-
Notifications
You must be signed in to change notification settings - Fork 210
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add video conference and small fixes
- Loading branch information
1 parent
5aaa40f
commit e827c58
Showing
14 changed files
with
284 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
services/app/apps/codebattle/assets/js/widgets/pages/game/VideoConference.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import React, { | ||
| memo, | ||
| } from 'react'; | ||
|
|
||
| import cn from 'classnames'; | ||
|
|
||
| import Loading from '@/components/Loading'; | ||
| import useJitsiRoom from '@/utils/useJitsiRoom'; | ||
|
|
||
| import i18n from '../../../i18n'; | ||
|
|
||
| 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'), | ||
| }; | ||
|
|
||
| function ConferenceLoading({ status, hideLoader = false }) { | ||
| return ( | ||
| <div className="d-flex flex-column"> | ||
| {!hideLoader && <Loading />} | ||
| <small>{mapStatusToDescription[status]}</small> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function VideoConference() { | ||
| const { | ||
| ref, | ||
| status, | ||
| } = useJitsiRoom(); | ||
|
|
||
| const conferenceClassName = cn('w-100 h-100', { | ||
| 'd-none invisible absolute': status !== '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} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default memo(VideoConference); |
61 changes: 61 additions & 0 deletions
61
services/app/apps/codebattle/assets/js/widgets/pages/game/VideoConferenceButton.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* global JitsiMeetExternalAPI */ | ||
| import React from 'react'; | ||
|
|
||
| import { useDispatch, useSelector } from 'react-redux'; | ||
|
|
||
| import { actions } from '@/slices'; | ||
|
|
||
| import i18n from '../../../i18n'; | ||
| import * as selectors from '../../selectors'; | ||
|
|
||
| function VideoConferenceButton() { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| // const { audioMute, videoMute } = useSelector(selectors.videoConferenceSettingsSelector); | ||
| const showVideoConferencePanel = useSelector(selectors.showVideoConferencePanelSelector); | ||
|
|
||
| const toggleVideoConference = () => { | ||
| dispatch(actions.toggleShowVideoConferencePanel()); | ||
| }; | ||
|
|
||
| if (!JitsiMeetExternalAPI) { | ||
| return <></>; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <button | ||
| type="button" | ||
| onClick={toggleVideoConference} | ||
| className="btn btn-secondary btn-block rounded-lg" | ||
| aria-label={ | ||
| showVideoConferencePanel | ||
| ? 'Open Text Chat' | ||
| : 'Open Video Chat' | ||
| } | ||
| > | ||
| { | ||
| showVideoConferencePanel | ||
| ? i18n.t('Open Text Chat') | ||
| : 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> */} | ||
| {/* )} */} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default VideoConferenceButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
services/app/apps/codebattle/assets/js/widgets/utils/useJitsiRoom.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /* global JitsiMeetExternalAPI */ | ||
| import { | ||
| useEffect, useMemo, useRef, useState, | ||
| } from 'react'; | ||
|
|
||
| import Gon from 'gon'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
|
|
||
| import { actions } from '@/slices'; | ||
|
|
||
| import * as selectors from '../selectors'; | ||
|
|
||
| const apiKey = Gon.getAsset('jitsi_api_key'); | ||
|
|
||
| const useJitsiRoom = () => { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const ref = useRef(); | ||
| const [status, setStatus] = useState('loading'); | ||
| const userId = useSelector(selectors.currentUserIdSelector); | ||
| const gameId = useSelector(selectors.gameIdSelector); | ||
| const { name } = useSelector(state => state.user.users[userId]); | ||
|
|
||
| const roomName = gameId ? `${apiKey}/codebattle_game_${gameId}` : `${apiKey}/codebattle_testing`; | ||
|
|
||
| useEffect(() => { | ||
| if (!JitsiMeetExternalAPI) { | ||
| dispatch(actions.toggleShowVideoConferencePanel()); | ||
| } | ||
|
|
||
| if (!apiKey) { | ||
| setStatus('noHaveApiKey'); | ||
| } | ||
| }, [dispatch]); | ||
|
|
||
| useEffect(() => { | ||
| if (status === 'loading' && JitsiMeetExternalAPI && apiKey) { | ||
| const newApi = new JitsiMeetExternalAPI('8x8.vc', { | ||
| roomName, | ||
| parentNode: ref.current, | ||
| userInfo: { | ||
| displayName: name, | ||
| }, | ||
| configOverwrite: { | ||
| prejoinPageEnabled: false, | ||
| hideConferenceSubject: true, | ||
| // hideConferenceTimer: true, | ||
| toolbarButtons: [ | ||
| 'camera', | ||
| 'microphone', | ||
| 'settings', | ||
| ], | ||
| }, | ||
| }); | ||
|
|
||
| newApi.addListener('browserSupport', payload => { | ||
| if (payload.supported) { | ||
| setStatus('ready'); | ||
| } else { | ||
| setStatus('notSupported'); | ||
| } | ||
| }); | ||
|
|
||
| newApi.addListener('videoConferenceJoined', () => { | ||
| setStatus('joinedGameRoom'); | ||
| }); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [status]); | ||
|
|
||
| return useMemo(() => ({ | ||
| ref, | ||
| status, | ||
| }), [ref, status]); | ||
| }; | ||
|
|
||
| export default useJitsiRoom; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.