diff --git a/app/src/RoomClient.js b/app/src/RoomClient.js index dfa4713..36c5415 100644 --- a/app/src/RoomClient.js +++ b/app/src/RoomClient.js @@ -97,13 +97,13 @@ export default class RoomClient } constructor( - { roomId, peerId, accessCode, device, useSimulcast, produce, forceTcp }) + { peerId, accessCode, device, useSimulcast, produce, forceTcp }) { logger.debug( - 'constructor() [roomId: "%s", peerId: "%s", device: "%s", useSimulcast: "%s", produce: "%s", forceTcp: "%s"]', - roomId, peerId, device.flag, useSimulcast, produce, forceTcp); + 'constructor() [peerId: "%s", device: "%s", useSimulcast: "%s", produce: "%s", forceTcp: "%s"]', + peerId, device.flag, useSimulcast, produce, forceTcp); - this._signalingUrl = getSignalingUrl(peerId, roomId); + this._signalingUrl = null; // Closed flag. this._closed = false; @@ -136,8 +136,7 @@ export default class RoomClient this._signalingSocket = null; // The room ID - this._roomId = roomId; - store.dispatch(roomActions.setRoomName(roomId)); + this._roomId = null; // mediasoup-client Device instance. // @type {mediasoupClient.Device} @@ -1240,10 +1239,16 @@ export default class RoomClient )); } - async join({ joinVideo }) + async join({ roomId, joinVideo }) { await this._loadDynamicImports(); + this._roomId = roomId; + + store.dispatch(roomActions.setRoomName(roomId)); + + this._signalingUrl = getSignalingUrl(this._peerId, roomId); + this._torrentSupport = WebTorrent.WEBRTC_SUPPORT; this._webTorrent = this._torrentSupport && new WebTorrent({ diff --git a/app/src/actions/roomActions.js b/app/src/actions/roomActions.js index 156f638..560c77d 100644 --- a/app/src/actions/roomActions.js +++ b/app/src/actions/roomActions.js @@ -1,9 +1,3 @@ -export const setRoomUrl = (url) => - ({ - type : 'SET_ROOM_URL', - payload : { url } - }); - export const setRoomName = (name) => ({ type : 'SET_ROOM_NAME', diff --git a/app/src/components/App.js b/app/src/components/App.js index e02aff7..c596efa 100644 --- a/app/src/components/App.js +++ b/app/src/components/App.js @@ -1,4 +1,5 @@ import React, { useEffect, Suspense } from 'react'; +import { useParams} from 'react-router'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import JoinDialog from './JoinDialog'; @@ -13,6 +14,8 @@ const App = (props) => room } = props; + let { id } = useParams(); + useEffect(() => { Room.preload(); @@ -23,7 +26,7 @@ const App = (props) => if (!room.joined) { return ( - + ); } else diff --git a/app/src/components/ChooseRoom.js b/app/src/components/ChooseRoom.js index 3bd5738..c588a1f 100644 --- a/app/src/components/ChooseRoom.js +++ b/app/src/components/ChooseRoom.js @@ -3,7 +3,6 @@ import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; import { withRoomContext } from '../RoomContext'; -import * as roomActions from '../actions/roomActions'; import PropTypes from 'prop-types'; import { useIntl, FormattedMessage } from 'react-intl'; import randomString from 'random-string'; @@ -166,13 +165,14 @@ const DialogActions = withStyles((theme) => ({ const ChooseRoom = ({ roomClient, - roomId, loggedIn, myPicture, - changeRoomId, classes }) => { + const [ roomId, setRoomId ] = + useState(randomString({ length: 8 }).toLowerCase()); + const intl = useIntl(); return ( @@ -214,12 +214,12 @@ const ChooseRoom = ({ { const { value } = event.target; - changeRoomId(value); + setRoomId(value.toLowerCase()); }} onBlur={() => { if (roomId === '') - changeRoomId(randomString({ length: 8 }).toLowerCase()); + setRoomId(randomString({ length: 8 }).toLowerCase()); }} fullWidth /> @@ -253,43 +253,29 @@ const ChooseRoom = ({ ChooseRoom.propTypes = { roomClient : PropTypes.any.isRequired, - roomId : PropTypes.string, loginEnabled : PropTypes.bool.isRequired, loggedIn : PropTypes.bool.isRequired, myPicture : PropTypes.string, - changeRoomId : PropTypes.func.isRequired, classes : PropTypes.object.isRequired }; const mapStateToProps = (state) => { return { - roomId : state.room.name, loginEnabled : state.me.loginEnabled, loggedIn : state.me.loggedIn, myPicture : state.me.picture }; }; -const mapDispatchToProps = (dispatch) => -{ - return { - changeRoomId : (roomId) => - { - dispatch(roomActions.setRoomName(roomId)); - } - }; -}; - export default withRoomContext(connect( mapStateToProps, - mapDispatchToProps, + null, null, { areStatesEqual : (next, prev) => { return ( - prev.room.name === next.room.name && prev.me.loginEnabled === next.me.loginEnabled && prev.me.loggedIn === next.me.loggedIn && prev.me.picture === next.me.picture diff --git a/app/src/components/JoinDialog.js b/app/src/components/JoinDialog.js index 4054919..e549d47 100644 --- a/app/src/components/JoinDialog.js +++ b/app/src/components/JoinDialog.js @@ -165,6 +165,7 @@ const DialogActions = withStyles((theme) => ({ const JoinDialog = ({ roomClient, room, + roomId, displayName, displayNameInProgress, loggedIn, @@ -226,7 +227,7 @@ const JoinDialog = ({ id='room.roomId' defaultMessage='Room ID: {roomName}' values={{ - roomName : room.name + roomName : roomId }} /> @@ -275,7 +276,7 @@ const JoinDialog = ({