Fix roomId handling

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"]',
+			'constructor() [peerId: "%s", device: "%s", useSimulcast: "%s", produce: "%s", forceTcp: "%s"]',
-			roomId, peerId, device.flag, useSimulcast, produce, forceTcp);
+			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;
+		this._roomId = null;
-		store.dispatch(roomActions.setRoomName(roomId));
 
 		// 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({

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',

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 (
-			<JoinDialog />
+			<JoinDialog roomId={id} />
 		);
 	}
 	else

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

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
 							}}
 						/>
 					</DialogContentText>
@@ -275,7 +276,7 @@ const JoinDialog = ({
 						<Button
 							onClick={() =>
 							{
-								roomClient.join({ joinVideo: false });
+								roomClient.join({ roomId, joinVideo: false });
 							}}
 							variant='contained'
 							color='secondary'
@@ -288,7 +289,7 @@ const JoinDialog = ({
 						<Button
 							onClick={() =>
 							{
-								roomClient.join({ joinVideo: true });
+								roomClient.join({ roomId, joinVideo: true });
 							}}
 							variant='contained'
 							color='secondary'
@@ -348,6 +349,7 @@ JoinDialog.propTypes =
 {
 	roomClient            : PropTypes.any.isRequired,
 	room                  : PropTypes.object.isRequired,
+	roomId                : PropTypes.string.isRequired,
 	displayName           : PropTypes.string.isRequired,
 	displayNameInProgress : PropTypes.bool.isRequired,
 	loginEnabled          : PropTypes.bool.isRequired,

app/src/components/appPropTypes.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 
 export const Room = PropTypes.shape(
 	{
-		url   : PropTypes.string.isRequired,
 		state : PropTypes.oneOf(
 			[ 'new', 'connecting', 'connected', 'closed' ]).isRequired,
 		activeSpeakerId : PropTypes.string

app/src/index.js

@@ -10,7 +10,6 @@ import debug from 'debug';
 import RoomClient from './RoomClient';
 import RoomContext from './RoomContext';
 import deviceInfo from './deviceInfo';
-import * as roomActions from './actions/roomActions';
 import * as meActions from './actions/meActions';
 import ChooseRoom from './components/ChooseRoom';
 import LoadingView from './components/LoadingView';
@@ -77,34 +76,14 @@ function run()
 	const urlParser = new URL(window.location);
 	const parameters = urlParser.searchParams;
 
-	let roomId = (urlParser.pathname).substr(1);
-
-	if (!roomId)
-		roomId = parameters.get('roomId');
-
-	if (roomId)
-		roomId = roomId.toLowerCase();
-	else
-	{
-		roomId = randomString({ length: 8 }).toLowerCase();
-
-		parameters.set('roomId', roomId);
-		window.history.pushState('', '', urlParser.toString());
-	}
-
 	const accessCode = parameters.get('code');
 	const produce = parameters.get('produce') !== 'false';
 	const useSimulcast = parameters.get('simulcast') === 'true';
 	const forceTcp = parameters.get('forceTcp') === 'true';
 
-	const roomUrl = window.location.href.split('?')[0];
-
 	// Get current device.
 	const device = deviceInfo();
 
-	store.dispatch(
-		roomActions.setRoomUrl(roomUrl));
-
 	store.dispatch(
 		meActions.setMe({
 			peerId,
@@ -113,7 +92,7 @@ function run()
 	);
 
 	roomClient = new RoomClient(
-		{ roomId, peerId, accessCode, device, useSimulcast, produce, forceTcp });
+		{ peerId, accessCode, device, useSimulcast, produce, forceTcp });
 
 	global.CLIENT = roomClient;
 

app/src/reducers/room.js

@@ -1,6 +1,5 @@
 const initialState =
 {
-	url                : null,
 	name               : '',
 	state              : 'new', // new/connecting/connected/disconnected/closed,
 	locked             : false,
@@ -26,13 +25,6 @@ const room = (state = initialState, action) =>
 {
 	switch (action.type)
 	{
-		case 'SET_ROOM_URL':
-		{
-			const { url } = action.payload;
-
-			return { ...state, url };
-		}
-
 		case 'SET_ROOM_NAME':
 		{
 			const { name } = action.payload;