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 = ({