diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index a344981..1212e65 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -8,7 +8,6 @@ import hark from 'hark'; import ScreenShare from './ScreenShare'; import Spotlights from './Spotlights'; import { getSignalingUrl } from './urlFactory'; -import * as cookiesManager from './cookiesManager'; import * as requestActions from './actions/requestActions'; import * as stateActions from './actions/stateActions'; const { @@ -52,11 +51,11 @@ export default class RoomClient } constructor( - { roomId, peerName, displayName, device, useSimulcast, produce }) + { roomId, peerName, device, useSimulcast, produce }) { logger.debug( - 'constructor() [roomId:"%s", peerName:"%s", displayName:"%s", device:%s]', - roomId, peerName, displayName, device.flag); + 'constructor() [roomId:"%s", peerName:"%s", device:%s]', + roomId, peerName, device.flag); this._signalingUrl = getSignalingUrl(peerName, roomId); @@ -81,9 +80,6 @@ export default class RoomClient // My peer name. this._peerName = peerName; - // My display name - this._displayName = displayName; - // Alert sound this._soundAlert = new Audio('/sounds/notify.mp3'); @@ -140,8 +136,6 @@ export default class RoomClient this._screenSharingProducer = null; this._startKeyListener(); - - this.join(); } close() @@ -309,9 +303,6 @@ export default class RoomClient { logger.debug('changeDisplayName() [displayName:"%s"]', displayName); - // Store in cookie. - cookiesManager.setUser({ displayName }); - try { await this.sendRequest('change-display-name', { displayName }); @@ -450,7 +441,7 @@ export default class RoomClient if (existingTorrent) { - const { displayName, picture } = store.getState().me; + const { displayName, picture } = store.getState().settings; const file = { magnetUri : existingTorrent.magnetURI, @@ -467,7 +458,7 @@ export default class RoomClient 'Torrent successfully created' ); - const { displayName, picture } = store.getState().me; + const { displayName, picture } = store.getState().settings; const file = { magnetUri : newTorrent.magnetURI, displayName, @@ -698,9 +689,6 @@ export default class RoomClient { logger.debug('enableWebcam()'); - // Store in cookie. - cookiesManager.setVideoEnabled({ webcamEnabled: true }); - store.dispatch(stateActions.setWebcamInProgress(true)); try @@ -737,9 +725,6 @@ export default class RoomClient { logger.debug('disableWebcam()'); - // Store in cookie. - cookiesManager.setVideoEnabled({ webcamEnabled: false }); - store.dispatch(stateActions.setWebcamInProgress(true)); try @@ -820,8 +805,6 @@ export default class RoomClient stateActions.setProducerTrack(this._micProducer.id, newTrack)); store.dispatch(stateActions.setSelectedAudioDevice(deviceId)); - - cookiesManager.setAudioDevice({ audioDeviceId: deviceId }); await this._updateAudioDevices(); } @@ -874,8 +857,6 @@ export default class RoomClient store.dispatch(stateActions.setSelectedWebcamDevice(deviceId)); - cookiesManager.setVideoDevice({ videoDeviceId: deviceId }); - await this._updateWebcams(); } catch (error) @@ -980,30 +961,6 @@ export default class RoomClient stateActions.setMyRaiseHandStateInProgress(false)); } - async restartIce() - { - logger.debug('restartIce()'); - - store.dispatch( - stateActions.setRestartIceInProgress(true)); - - try - { - await this._room.restartIce(); - } - catch (error) - { - logger.error('restartIce() failed: %o', error); - } - - // Make it artificially longer. - setTimeout(() => - { - store.dispatch( - stateActions.setRestartIceInProgress(false)); - }, 500); - } - async resumeAudio() { logger.debug('resumeAudio()'); @@ -1287,10 +1244,12 @@ export default class RoomClient try { + const { displayName } = store.getState().settings; + await this._room.join( this._peerName, { - displayName : this._displayName, + displayName : displayName, device : this._device } ); @@ -1336,14 +1295,8 @@ export default class RoomClient if (this._room.canSend('audio')) await this._setMicProducer(); - // Add our webcam (unless the cookie says no). if (this._room.canSend('video')) - { - const devicesCookie = cookiesManager.getVideoEnabled(); - - if (!devicesCookie || devicesCookie.webcamEnabled) - await this.enableWebcam(); - } + await this.enableWebcam(); } store.dispatch(stateActions.setRoomState('connected')); @@ -1472,8 +1425,6 @@ export default class RoomClient })); store.dispatch(stateActions.setSelectedAudioDevice(deviceId)); - - cookiesManager.setAudioDevice({ audioDeviceId: deviceId }); await this._updateAudioDevices(); @@ -1732,8 +1683,6 @@ export default class RoomClient store.dispatch(stateActions.setSelectedWebcamDevice(deviceId)); - cookiesManager.setVideoDevice({ videoDeviceId: deviceId }); - await this._updateWebcams(); producer.on('close', (originator) => @@ -1856,16 +1805,10 @@ export default class RoomClient await this._updateAudioDevices(); - const devicesCookie = cookiesManager.getAudioDevice(); + const { selectedAudioDevice } = store.getState().settings; - if ( - devicesCookie && - devicesCookie.audioDeviceId && - this._audioDevices[devicesCookie.audioDeviceId] - ) - { - return this._audioDevices[devicesCookie.audioDeviceId].deviceId; - } + if (selectedAudioDevice && this._audioDevices[selectedAudioDevice]) + return selectedAudioDevice; else { const audioDevices = Object.values(this._audioDevices); @@ -1889,16 +1832,10 @@ export default class RoomClient await this._updateWebcams(); - const devicesCookie = cookiesManager.getVideoDevice(); + const { selectedWebcam } = store.getState().settings; - if ( - devicesCookie && - devicesCookie.videoDeviceId && - this._webcams[devicesCookie.videoDeviceId] - ) - { - return this._webcams[devicesCookie.videoDeviceId].deviceId; - } + if (selectedWebcam && this._webcams[selectedWebcam]) + return selectedWebcam; else { const webcams = Object.values(this._webcams); diff --git a/app/src/actions/stateActions.js b/app/src/actions/stateActions.js index a9614ca..d97ccb2 100644 --- a/app/src/actions/stateActions.js +++ b/app/src/actions/stateActions.js @@ -57,11 +57,11 @@ export const setSettingsOpen = ({ settingsOpen }) => payload : { settingsOpen } }); -export const setMe = ({ peerName, displayName, displayNameSet, device, loginEnabled }) => +export const setMe = ({ peerName, device, loginEnabled }) => { return { type : 'SET_ME', - payload : { peerName, displayName, displayNameSet, device, loginEnabled } + payload : { peerName, device, loginEnabled } }; }; @@ -142,22 +142,6 @@ export const setDisplayMode = (mode) => payload : { mode } }); -export const setAudioOnlyState = (enabled) => -{ - return { - type : 'SET_AUDIO_ONLY_STATE', - payload : { enabled } - }; -}; - -export const setAudioOnlyInProgress = (flag) => -{ - return { - type : 'SET_AUDIO_ONLY_IN_PROGRESS', - payload : { flag } - }; -}; - export const setPeerVideoInProgress = (peerName, flag) => { return { @@ -242,14 +226,6 @@ export const setPeerRaiseHandState = (peerName, raiseHandState) => }; }; -export const setRestartIceInProgress = (flag) => -{ - return { - type : 'SET_RESTART_ICE_IN_PROGRESS', - payload : { flag } - }; -}; - export const addProducer = (producer) => { return { diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index d192428..3739582 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -47,6 +47,7 @@ const Me = (props) => const { roomClient, me, + settings, activeSpeaker, style, advancedMode, @@ -83,6 +84,7 @@ const Me = (props) => isMe advancedMode={advancedMode} peer={me} + displayName={settings.displayName} showPeerInfo videoTrack={webcamProducer ? webcamProducer.track : null} videoVisible={videoVisible} @@ -121,6 +123,7 @@ Me.propTypes = roomClient : PropTypes.any.isRequired, advancedMode : PropTypes.bool, me : appPropTypes.Me.isRequired, + settings : PropTypes.object, activeSpeaker : PropTypes.bool, micProducer : appPropTypes.Producer, webcamProducer : appPropTypes.Producer, @@ -134,6 +137,7 @@ const mapStateToProps = (state) => return { me : state.me, ...meProducersSelector(state), + settings : state.settings, activeSpeaker : state.me.name === state.room.activeSpeakerName }; }; @@ -148,6 +152,7 @@ export default withRoomContext(connect( return ( prev.me === next.me && prev.producers === next.producers && + prev.settings === next.settings && prev.room.activeSpeakerName === next.room.activeSpeakerName ); } diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index d93cd03..8419690 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -287,6 +287,7 @@ const Peer = (props) => ({ - displayName : state.me.displayName, - picture : state.me.picture + displayName : state.settings.displayName, + picture : state.settings.picture }); export default withRoomContext( @@ -135,8 +135,8 @@ export default withRoomContext( areStatesEqual : (next, prev) => { return ( - prev.me.displayName === next.me.displayName && - prev.me.picture === next.me.picture + prev.settings.displayName === next.settings.displayName && + prev.settings.picture === next.settings.picture ); } } diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js index 8f12648..b33ffc3 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js @@ -75,10 +75,11 @@ const ListMe = (props) => { const { me, + settings, classes } = props; - const picture = me.picture || EmptyAvatar; + const picture = settings.picture || EmptyAvatar; return (
  • @@ -86,7 +87,7 @@ const ListMe = (props) => My avatar
    - {me.displayName} + {settings.displayName}
    @@ -102,12 +103,14 @@ const ListMe = (props) => ListMe.propTypes = { - me : appPropTypes.Me.isRequired, - classes : PropTypes.object.isRequired + me : appPropTypes.Me.isRequired, + settings : PropTypes.object.isRequired, + classes : PropTypes.object.isRequired }; const mapStateToProps = (state) => ({ - me : state.me + me : state.me, + settings : state.settings }); export default connect( @@ -118,7 +121,8 @@ export default connect( areStatesEqual : (next, prev) => { return ( - prev.me === next.me + prev.me === next.me && + prev.settings === next.settings ); } } diff --git a/app/src/components/Room.js b/app/src/components/Room.js index 1b9c2c8..339fdb9 100644 --- a/app/src/components/Room.js +++ b/app/src/components/Room.js @@ -176,6 +176,10 @@ class Room extends React.PureComponent componentDidMount() { + const { roomClient } = this.props; + + roomClient.join(); + if (this.fullscreen.fullscreenEnabled) { this.fullscreen.addEventListener('fullscreenchange', this.handleFullscreenChange); @@ -220,6 +224,7 @@ class Room extends React.PureComponent const { roomClient, room, + advancedMode, myPicture, loggedIn, loginEnabled, @@ -277,9 +282,9 @@ class Room extends React.PureComponent This website uses cookies to enhance the user experience. - + - + @@ -377,7 +382,7 @@ class Room extends React.PureComponent - + @@ -392,6 +397,7 @@ Room.propTypes = { roomClient : PropTypes.object.isRequired, room : appPropTypes.Room.isRequired, + advancedMode : PropTypes.bool.isRequired, myPicture : PropTypes.string, loggedIn : PropTypes.bool.isRequired, loginEnabled : PropTypes.bool.isRequired, @@ -407,6 +413,7 @@ Room.propTypes = const mapStateToProps = (state) => ({ room : state.room, + advancedMode : state.settings.advancedMode, loggedIn : state.me.loggedIn, loginEnabled : state.me.loginEnabled, myPicture : state.me.picture, @@ -445,7 +452,8 @@ export default withRoomContext(connect( prev.me.picture === next.me.picture && prev.toolarea.toolAreaOpen === next.toolarea.toolAreaOpen && prev.toolarea.unreadMessages === next.toolarea.unreadMessages && - prev.toolarea.unreadFiles === next.toolarea.unreadFiles + prev.toolarea.unreadFiles === next.toolarea.unreadFiles && + prev.settings.advancedMode === next.settings.advancedMode ); } } diff --git a/app/src/components/Settings/Settings.js b/app/src/components/Settings/Settings.js index fc0e9e1..92fecb1 100644 --- a/app/src/components/Settings/Settings.js +++ b/app/src/components/Settings/Settings.js @@ -63,6 +63,7 @@ const Settings = ({ roomClient, room, me, + settings, onToggleAdvancedMode, // handleChangeMode, handleCloseSettings, @@ -96,7 +97,7 @@ const Settings = ({
    { if (event.target.value) @@ -157,7 +158,7 @@ const Settings = ({ } + control={} label='Advanced mode' /> { /*
    @@ -195,6 +196,7 @@ Settings.propTypes = roomClient : PropTypes.any.isRequired, me : appPropTypes.Me.isRequired, room : appPropTypes.Room.isRequired, + settings : PropTypes.object.isRequired, onToggleAdvancedMode : PropTypes.func.isRequired, handleChangeMode : PropTypes.func.isRequired, handleCloseSettings : PropTypes.func.isRequired, @@ -204,8 +206,9 @@ Settings.propTypes = const mapStateToProps = (state) => { return { - me : state.me, - room : state.room + me : state.me, + room : state.room, + settings : state.settings }; }; @@ -224,7 +227,8 @@ export default withRoomContext(connect( { return ( prev.me === next.me && - prev.room === next.room + prev.room === next.room && + prev.settings === next.settings ); } } diff --git a/app/src/components/VideoContainers/VideoView.js b/app/src/components/VideoContainers/VideoView.js index 2d2852c..9e1381d 100644 --- a/app/src/components/VideoContainers/VideoView.js +++ b/app/src/components/VideoContainers/VideoView.js @@ -160,6 +160,7 @@ class VideoView extends React.PureComponent const { isMe, peer, + displayName, showPeerInfo, videoContain, advancedMode, @@ -206,8 +207,8 @@ class VideoView extends React.PureComponent
    { isMe ? onChangeDisplayName(displayName)} + onChange={({ newDisplayName }) => onChangeDisplayName(newDisplayName)} /> : - {peer.displayName} + {displayName} } @@ -336,6 +337,7 @@ VideoView.propTypes = isMe : PropTypes.bool, peer : PropTypes.oneOfType( [ appPropTypes.Me, appPropTypes.Peer ]), + displayName : PropTypes.string, showPeerInfo : PropTypes.bool, videoContain : PropTypes.bool, advancedMode : PropTypes.bool, diff --git a/app/src/components/appPropTypes.js b/app/src/components/appPropTypes.js index 74b52e3..3349fd4 100644 --- a/app/src/components/appPropTypes.js +++ b/app/src/components/appPropTypes.js @@ -17,16 +17,11 @@ export const Device = PropTypes.shape( export const Me = PropTypes.shape( { - name : PropTypes.string.isRequired, - displayName : PropTypes.string, - displayNameSet : PropTypes.bool.isRequired, - device : Device.isRequired, - canSendMic : PropTypes.bool.isRequired, - canSendWebcam : PropTypes.bool.isRequired, - webcamInProgress : PropTypes.bool.isRequired, - audioOnly : PropTypes.bool.isRequired, - audioOnlyInProgress : PropTypes.bool.isRequired, - restartIceInProgress : PropTypes.bool.isRequired + name : PropTypes.string.isRequired, + device : Device.isRequired, + canSendMic : PropTypes.bool.isRequired, + canSendWebcam : PropTypes.bool.isRequired, + webcamInProgress : PropTypes.bool.isRequired }); export const Producer = PropTypes.shape( diff --git a/app/src/cookiesManager.js b/app/src/cookiesManager.js deleted file mode 100644 index 18659dd..0000000 --- a/app/src/cookiesManager.js +++ /dev/null @@ -1,47 +0,0 @@ -import jsCookie from 'js-cookie'; - -const USER_COOKIE = 'multiparty-meeting.user'; -const VIDEO_COOKIE = 'multiparty-meeting.videoEnabled'; - -const AUDIO_DEVICE = 'multiparty-meeting.audioDevice'; -const VIDEO_DEVICE = 'multiparty-meeting.videoDevice'; - -export function getUser() -{ - return jsCookie.getJSON(USER_COOKIE); -} - -export function setUser({ displayName }) -{ - jsCookie.set(USER_COOKIE, { displayName }); -} - -export function getVideoEnabled() -{ - return jsCookie.getJSON(VIDEO_COOKIE); -} - -export function setVideoEnabled({ webcamEnabled }) -{ - jsCookie.set(VIDEO_COOKIE, { webcamEnabled }); -} - -export function getAudioDevice() -{ - return jsCookie.getJSON(AUDIO_DEVICE); -} - -export function setAudioDevice({ audioDeviceId }) -{ - jsCookie.set(AUDIO_DEVICE, { audioDeviceId }); -} - -export function getVideoDevice() -{ - return jsCookie.getJSON(VIDEO_DEVICE); -} - -export function setVideoDevice({ videoDeviceId }) -{ - jsCookie.set(VIDEO_DEVICE, { videoDeviceId }); -} diff --git a/app/src/index.js b/app/src/index.js index d6fcdcf..d82f1d6 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -9,7 +9,6 @@ import Logger from './Logger'; import debug from 'debug'; import RoomClient from './RoomClient'; import RoomContext from './RoomContext'; -import * as cookiesManager from './cookiesManager'; import * as stateActions from './actions/stateActions'; import Room from './components/Room'; import LoadingView from './components/LoadingView'; @@ -51,8 +50,6 @@ function run() let roomId = (urlParser.pathname).substr(1) ? (urlParser.pathname).substr(1).toLowerCase() : urlParser.query.roomId.toLowerCase(); const produce = urlParser.query.produce !== 'false'; - - let displayName = urlParser.query.displayName; const useSimulcast = urlParser.query.simulcast === 'true'; if (!roomId) @@ -82,24 +79,6 @@ function run() const roomUrl = roomUrlParser.toString(); - // Get displayName from cookie (if not already given as param). - const userCookie = cookiesManager.getUser() || {}; - - let displayNameSet; - - if (!displayName) - displayName = userCookie.displayName; - - if (displayName) - { - displayNameSet = true; - } - else - { - displayName = 'Guest'; - displayNameSet = false; - } - // Get current device. const device = getDeviceInfo(); @@ -109,15 +88,13 @@ function run() store.dispatch( stateActions.setMe({ peerName, - displayName, - displayNameSet, device, loginEnabled : window.config.loginEnabled }) ); roomClient = new RoomClient( - { roomId, peerName, displayName, device, useSimulcast, produce }); + { roomId, peerName, device, useSimulcast, produce }); global.CLIENT = roomClient; diff --git a/app/src/reducers/me.js b/app/src/reducers/me.js index 5647f7b..4750f0c 100644 --- a/app/src/reducers/me.js +++ b/app/src/reducers/me.js @@ -1,8 +1,6 @@ const initialState = { name : null, - displayName : null, - displayNameSet : false, device : null, canSendMic : false, canSendWebcam : false, @@ -14,14 +12,8 @@ const initialState = audioInProgress : false, screenShareInProgress : false, loginEnabled : false, - audioOnly : false, - audioOnlyInProgress : false, raiseHand : false, raiseHandInProgress : false, - restartIceInProgress : false, - picture : null, - selectedWebcam : null, - selectedAudioDevice : null, loggedIn : false }; @@ -33,8 +25,6 @@ const me = (state = initialState, action) => { const { peerName, - displayName, - displayNameSet, device, loginEnabled } = action.payload; @@ -42,8 +32,6 @@ const me = (state = initialState, action) => return { ...state, name : peerName, - displayName, - displayNameSet, device, loginEnabled }; @@ -55,16 +43,6 @@ const me = (state = initialState, action) => case 'USER_LOGOUT': return { ...state, loggedIn: false }; - case 'CHANGE_WEBCAM': - { - return { ...state, selectedWebcam: action.payload.deviceId }; - } - - case 'CHANGE_AUDIO_DEVICE': - { - return { ...state, selectedAudioDevice: action.payload.deviceId }; - } - case 'SET_MEDIA_CAPABILITIES': { const { canSendMic, canSendWebcam } = action.payload; @@ -114,31 +92,6 @@ const me = (state = initialState, action) => return { ...state, screenShareInProgress: flag }; } - case 'SET_DISPLAY_NAME': - { - let { displayName } = action.payload; - - // Be ready for undefined displayName (so keep previous one). - if (!displayName) - displayName = state.displayName; - - return { ...state, displayName, displayNameSet: true }; - } - - case 'SET_AUDIO_ONLY_STATE': - { - const { enabled } = action.payload; - - return { ...state, audioOnly: enabled }; - } - - case 'SET_AUDIO_ONLY_IN_PROGRESS': - { - const { flag } = action.payload; - - return { ...state, audioOnlyInProgress: flag }; - } - case 'SET_MY_RAISE_HAND_STATE': { const { flag } = action.payload; @@ -153,18 +106,6 @@ const me = (state = initialState, action) => return { ...state, raiseHandInProgress: flag }; } - case 'SET_RESTART_ICE_IN_PROGRESS': - { - const { flag } = action.payload; - - return { ...state, restartIceInProgress: flag }; - } - - case 'SET_PICTURE': - { - return { ...state, picture: action.payload.picture }; - } - default: return state; } diff --git a/app/src/reducers/room.js b/app/src/reducers/room.js index 0092ca5..cdf9c0a 100644 --- a/app/src/reducers/room.js +++ b/app/src/reducers/room.js @@ -8,7 +8,6 @@ const initialState = activeSpeakerName : null, torrentSupport : false, showSettings : false, - advancedMode : false, fullScreenConsumer : null, // ConsumerID windowConsumer : null, // ConsumerID toolbarsVisible : true, @@ -89,13 +88,6 @@ const room = (state = initialState, action) => return { ...state, showSettings }; } - case 'TOGGLE_ADVANCED_MODE': - { - const advancedMode = !state.advancedMode; - - return { ...state, advancedMode }; - } - case 'TOGGLE_FULLSCREEN_CONSUMER': { const { consumerId } = action.payload; diff --git a/app/src/reducers/rootReducer.js b/app/src/reducers/rootReducer.js index b7e3b75..ea78cdb 100644 --- a/app/src/reducers/rootReducer.js +++ b/app/src/reducers/rootReducer.js @@ -9,6 +9,7 @@ import notifications from './notifications'; import chatmessages from './chatmessages'; import toolarea from './toolarea'; import files from './files'; +import settings from './settings'; export default combineReducers({ room, @@ -20,5 +21,6 @@ export default combineReducers({ notifications, chatmessages, toolarea, - files + files, + settings }); diff --git a/app/src/reducers/settings.js b/app/src/reducers/settings.js new file mode 100644 index 0000000..d4a7216 --- /dev/null +++ b/app/src/reducers/settings.js @@ -0,0 +1,52 @@ +const initialState = +{ + displayName : 'Guest', + picture : null, + selectedWebcam : null, + selectedAudioDevice : null, + advancedMode : false +}; + +const settings = (state = initialState, action) => +{ + switch (action.type) + { + case 'CHANGE_WEBCAM': + { + return { ...state, selectedWebcam: action.payload.deviceId }; + } + + case 'CHANGE_AUDIO_DEVICE': + { + return { ...state, selectedAudioDevice: action.payload.deviceId }; + } + + case 'SET_DISPLAY_NAME': + { + let { displayName } = action.payload; + + // Be ready for undefined displayName (so keep previous one). + if (!displayName) + displayName = state.displayName; + + return { ...state, displayName }; + } + + case 'SET_PICTURE': + { + return { ...state, picture: action.payload.picture }; + } + + case 'TOGGLE_ADVANCED_MODE': + { + const advancedMode = !state.advancedMode; + + return { ...state, advancedMode }; + } + + default: + return state; + } +}; + +export default settings; diff --git a/app/src/store.js b/app/src/store.js index 14c8460..efcb1a4 100644 --- a/app/src/store.js +++ b/app/src/store.js @@ -15,7 +15,7 @@ const persistConfig = key : 'root', storage : storage, stateReconciler : autoMergeLevel2, - whitelist : [] + whitelist : [ 'settings' ] }; const reduxMiddlewares =