add controls for video conferences

Author: ReDBrother

services/app/apps/codebattle/assets/js/widgets/App.jsx

@@ -27,8 +27,8 @@ const {
 const { gameUI: gameUIReducer, ...otherReducers } = reducers;
 
 const gameUIPersistWhitelist = [
-  'audioMute',
-  'videoMute',
+  'audioMuted',
+  'videoMuted',
   'showVideoConferencePanel',
   'editorMode',
   'editorTheme',

services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx

@@ -56,12 +56,8 @@ Editor.propTypes = {
   editable: PropTypes.bool,
   roomMode: PropTypes.string.isRequired,
   checkResult: PropTypes.func.isRequired,
-  toggleMuteSound: PropTypes.func.isRequired,
-  mute: PropTypes.bool.isRequired,
   userType: PropTypes.string.isRequired,
-  userId: PropTypes.string.isRequired,
-  onChangeCursorSelection: PropTypes.func.isRequired,
-  onChangeCursorPosition: PropTypes.func.isRequired,
+  userId: PropTypes.number.isRequired,
 };
 
 Editor.defaultProps = {

services/app/apps/codebattle/assets/js/widgets/config/jitsiStatuses.js

@@ -0,0 +1,9 @@
+const statuses = {
+  loading: 'loading',
+  ready: 'ready',
+  joinedGameRoom: 'joinedGameRoom',
+  notSupported: 'notSupported',
+  noHaveApiKey: 'noHaveApiKey',
+};
+
+export default statuses;

services/app/apps/codebattle/assets/js/widgets/pages/game/VideoConference.jsx

@@ -8,13 +8,14 @@ import Loading from '@/components/Loading';
 import useJitsiRoom from '@/utils/useJitsiRoom';
 
 import i18n from '../../../i18n';
+import statuses from '../../config/jitsiStatuses';
 
 const mapStatusToDescription = {
-  loading: i18n.t('Setup Conference Room'),
-  ready: i18n.t('Conference Room Is Ready'),
-  joinedGameRoom: i18n.t('Conference Room Is Started'),
-  notSupported: i18n.t('Not Supported Browser'),
-  noHaveApiKey: i18n.t('No have jitsi api key'),
+  [statuses.loading]: i18n.t('Setup Conference Room'),
+  [statuses.ready]: i18n.t('Conference Room Is Ready'),
+  [statuses.joinedGameRoom]: i18n.t('Conference Room Is Started'),
+  [statuses.notSupported]: i18n.t('Not Supported Browser'),
+  [statuses.noHaveApiKey]: i18n.t('No have jitsi api key'),
 };
 
 function ConferenceLoading({ status, hideLoader = false }) {
@@ -32,21 +33,23 @@ function VideoConference() {
     status,
   } = useJitsiRoom();
 
+  const loadingClassName = cn('w-100 h-100', {
+    'd-flex justify-content-center align-items-center': status !== statuses.joinedGameRoom,
+    'd-none invisible absolute': status === statuses.joinedGameRoom,
+  });
   const conferenceClassName = cn('w-100 h-100', {
-    'd-none invisible absolute': status !== 'joinedGameRoom',
+    'd-none invisible absolute': status !== statuses.joinedGameRoom,
   });
 
   return (
     <>
-      {status !== 'joinedGameRoom' && (
-        <div className="d-flex w-100 h-100 justify-content-center align-items-center">
-          <ConferenceLoading
-            status={status}
-            hideLoader={['notSupported', 'noHaveApiKey'].includes(status)}
-          />
-        </div>
-      )}
-      <div ref={ref} id="jaas-container" className={conferenceClassName} />
+      <div className={loadingClassName}>
+        <ConferenceLoading
+          status={status}
+          hideLoader={[statuses.notSupported, statuses.noHaveApiKey].includes(status)}
+        />
+      </div>
+      <div ref={ref} className={conferenceClassName} />
     </>
   );
 }

services/app/apps/codebattle/assets/js/widgets/pages/game/VideoConferenceButton.jsx

@@ -8,10 +8,10 @@ import { actions } from '@/slices';
 import i18n from '../../../i18n';
 import * as selectors from '../../selectors';
 
+import VideoConferenceMediaControls from './VideoConferenceMediaControls';
+
 function VideoConferenceButton() {
   const dispatch = useDispatch();
-
-  // const { audioMute, videoMute } = useSelector(selectors.videoConferenceSettingsSelector);
   const showVideoConferencePanel = useSelector(selectors.showVideoConferencePanelSelector);
 
   const toggleVideoConference = () => {
@@ -40,20 +40,9 @@ function VideoConferenceButton() {
             : i18n.t('Open Video Chat')
         }
       </button>
-      {/* {showVideoConferencePanel && ( */}
-      {/*   <div className="d-flex"> */}
-      {/*     <button */}
-      {/*       type="button" */}
-      {/*       className="btn btn-secondary btn-block w-100 rounded-lg" */}
-      {/*       aria-label="Mute audio" */}
-      {/*     /> */}
-      {/*     <button */}
-      {/*       type="button" */}
-      {/*       className="btn btn-secondary btn-block w-100 rounded-lg" */}
-      {/*       aria-label="Mute video" */}
-      {/*     /> */}
-      {/*   </div> */}
-      {/* )} */}
+      {showVideoConferencePanel && (
+        <VideoConferenceMediaControls />
+      )}
     </>
   );
 }

services/app/apps/codebattle/assets/js/widgets/pages/game/VideoConferenceMediaControls.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import cn from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { actions } from '@/slices';
+
+import * as selectors from '../../selectors';
+
+function VideoConferenceMediaControls() {
+  const dispatch = useDispatch();
+
+  const { audioMuted, videoMuted } = useSelector(selectors.videoConferenceSettingsSelector);
+  const { audioAvailable, videoAvailable } = useSelector(selectors.videoConferenceMediaAvailableSelector);
+
+  useEffect(() => () => {
+    dispatch(actions.setVideoAvailable(false));
+    dispatch(actions.setAudioAvailable(false));
+  }, [dispatch]);
+
+  const audioMuteBtnClassName = cn('btn btn-secondary w-100 h-100 rounded-left', {
+    disabled: !audioAvailable,
+  });
+  const videoMuteBtnClassName = cn('btn btn-secondary w-100 h-100 rounded-right', {
+    disabled: !videoAvailable,
+  });
+
+  return (
+    <div className="d-flex btn-block mt-2">
+      <button
+        type="button"
+        className={audioMuteBtnClassName}
+        aria-label="Mute audio"
+        onClick={() => dispatch(actions.setAudioMuted(!audioMuted))}
+        disabled={!audioAvailable}
+      >
+        <FontAwesomeIcon icon={audioMuted ? 'microphone-slash' : 'microphone'} />
+      </button>
+      <button
+        type="button"
+        className={videoMuteBtnClassName}
+        aria-label="Mute video"
+        onClick={() => dispatch(actions.setVideoMuted(!videoMuted))}
+        disabled={!videoAvailable}
+      >
+        <FontAwesomeIcon icon={videoMuted ? 'video-slash' : 'video'} />
+      </button>
+    </div>
+  );
+}
+
+export default VideoConferenceMediaControls;

services/app/apps/codebattle/assets/js/widgets/selectors/index.js

@@ -25,6 +25,8 @@ export const currentUserIsAdminSelector = state => !!state.user.users[state.user
 
 export const currentUserIsGuestSelector = state => !!state.user.users[state.user.currentUserId].isGuest;
 
+export const userByIdSelector = userId => state => state.user.users[userId];
+
 export const userIsAdminSelector = userId => state => !!state.user.users[userId]?.isAdmin;
 
 export const subscriptionTypeSelector = state => (
@@ -450,12 +452,21 @@ export const currentChatUserSelector = state => {
 
 export const taskDescriptionLanguageSelector = state => state.gameUI.taskDescriptionLanguage;
 
+export const videoConferenceMediaAvailableSelector = createDraftSafeSelector(
+  state => state.gameUI.audioAvailable,
+  state => state.gameUI.videoAvailable,
+  (audioAvailable, videoAvailable) => ({
+    audioAvailable,
+    videoAvailable,
+  }),
+);
+
 export const videoConferenceSettingsSelector = createDraftSafeSelector(
-  state => state.gameUI.audioMute,
-  state => state.gameUI.videoMute,
-  (audioMute, videoMute) => ({
-    audioMute,
-    videoMute,
+  state => state.gameUI.audioMuted,
+  state => state.gameUI.videoMuted,
+  (audioMuted, videoMuted) => ({
+    audioMuted,
+    videoMuted,
   }),
 );
 

services/app/apps/codebattle/assets/js/widgets/slices/gameUI.js

@@ -15,8 +15,10 @@ const initialState = {
   showToastActionsAfterGame: false,
   isShowGuide: false,
   showVideoConferencePanel: false,
-  videoMute: true,
-  audioMute: true,
+  videoMuted: false,
+  audioMuted: false,
+  audioAvailable: false,
+  videoAvailable: false,
 };
 
 const gameUI = createSlice({
@@ -52,11 +54,17 @@ const gameUI = createSlice({
     toggleShowVideoConferencePanel: state => {
       state.showVideoConferencePanel = !state.showVideoConferencePanel;
     },
-    setAudioMute: (state, payload) => {
-      state.audioMute = payload;
+    setAudioMuted: (state, { payload }) => {
+      state.audioMuted = payload;
     },
-    setVideoMute: (state, payload) => {
-      state.videoMute = payload;
+    setVideoMuted: (state, { payload }) => {
+      state.videoMuted = payload;
+    },
+    setAudioAvailable: (state, { payload }) => {
+      state.audioAvailable = payload;
+    },
+    setVideoAvailable: (state, { payload }) => {
+      state.videoAvailable = payload;
     },
   },
 });

services/app/apps/codebattle/assets/js/widgets/utils/useEditor.js

@@ -109,7 +109,7 @@ const useOption = (editor, {
  *   toggleMuteSound: Function,
  *   mute: boolean,
  *   userType: string,
- *   userId: string,
+ *   userId: number,
  *   onChangeCursorSelection: Function,
  *   onChangeCursorPosition: Function,
  * }} props

services/app/apps/codebattle/assets/js/widgets/utils/useJitsiRoom.js

@@ -8,6 +8,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { actions } from '@/slices';
 
+import statuses from '../config/jitsiStatuses';
 import * as selectors from '../selectors';
 
 const apiKey = Gon.getAsset('jitsi_api_key');
@@ -16,10 +17,16 @@ const useJitsiRoom = () => {
   const dispatch = useDispatch();
 
   const ref = useRef();
-  const [status, setStatus] = useState('loading');
+  const [api, setApi] = useState(null);
+  const [status, setStatus] = useState(statuses.loading);
   const userId = useSelector(selectors.currentUserIdSelector);
   const gameId = useSelector(selectors.gameIdSelector);
-  const { name } = useSelector(state => state.user.users[userId]);
+  const { name } = useSelector(selectors.userByIdSelector(userId));
+
+  const {
+    audioMuted,
+    videoMuted,
+  } = useSelector(selectors.videoConferenceSettingsSelector);
 
   const roomName = gameId ? `${apiKey}/codebattle_game_${gameId}` : `${apiKey}/codebattle_testing`;
 
@@ -29,49 +36,83 @@ const useJitsiRoom = () => {
     }
 
     if (!apiKey) {
-      setStatus('noHaveApiKey');
+      setStatus(statuses.noHaveApiKey);
     }
   }, [dispatch]);
 
   useEffect(() => {
-    if (status === 'loading' && JitsiMeetExternalAPI && apiKey) {
+    if (status === statuses.loading && JitsiMeetExternalAPI && apiKey) {
       const newApi = new JitsiMeetExternalAPI('8x8.vc', {
         roomName,
         parentNode: ref.current,
         userInfo: {
           displayName: name,
         },
         configOverwrite: {
+          startWithAudioMuted: audioMuted,
+          startWithVideoMuted: videoMuted,
           prejoinPageEnabled: false,
           hideConferenceSubject: true,
           // hideConferenceTimer: true,
           toolbarButtons: [
-            'camera',
-            'microphone',
             'settings',
           ],
         },
       });
 
       newApi.addListener('browserSupport', payload => {
         if (payload.supported) {
-          setStatus('ready');
+          setStatus(statuses.ready);
         } else {
-          setStatus('notSupported');
+          setStatus(statuses.notSupported);
         }
       });
 
       newApi.addListener('videoConferenceJoined', () => {
-        setStatus('joinedGameRoom');
+        newApi.getAvailableDevices().then(devices => {
+          const { audioInput, videoInput } = devices;
+
+          const audioAvailable = audioInput.some(item => !!item.deviceId);
+          const videoAvailable = videoInput.some(item => !!item.deviceId);
+
+          dispatch(actions.setAudioAvailable(audioAvailable));
+          dispatch(actions.setVideoAvailable(videoAvailable));
+        });
+
+        setStatus(statuses.joinedGameRoom);
       });
+
+      setApi(newApi);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status]);
 
+  useEffect(() => {
+    if (api) {
+      api.isAudioMuted().then(muted => {
+        if (muted !== audioMuted) {
+          api.executeCommand('toggleAudio');
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [audioMuted]);
+
+  useEffect(() => {
+    if (api) {
+      api.isVideoMuted().then(muted => {
+        if (muted !== videoMuted) {
+          api.executeCommand('toggleVideo');
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoMuted]);
+
   return useMemo(() => ({
     ref,
     status,
-  }), [ref, status]);
+  }), [status]);
 };
 
 export default useJitsiRoom;