feat(prejoin_page): Add prejoin page

react/features/base/conference/functions.js

@@ -246,6 +246,16 @@ export function getNearestReceiverVideoQualityLevel(availableHeight: number) {
     return selectedLevel;
 }
 
+/**
+ * Returns the stored room name.
+ *
+ * @param {Object} state - The current state of the app.
+ * @returns {string}
+ */
+export function getRoomName(state: Object): string {
+    return state['features/base/conference'].room;
+}
+
 /**
  * Handle an error thrown by the backend (i.e. {@code lib-jitsi-meet}) while
  * manipulating a conference participant (e.g. Pin or select participant).

react/features/base/config/configWhitelist.js

@@ -131,6 +131,7 @@ export default [
     'p2p',
     'pcStatsInterval',
     'preferH264',
+    'prejoinPageEnabled',
     'requireDisplayName',
     'remoteVideoMenu',
     'resolution',

react/features/base/devices/middleware.js

@@ -18,6 +18,8 @@ import {
     SET_AUDIO_INPUT_DEVICE,
     SET_VIDEO_INPUT_DEVICE
 } from './actionTypes';
+import { replaceAudioTrackById, replaceVideoTrackById } from '../../prejoin/actions';
+import { isPrejoinPageVisible } from '../../prejoin/functions';
 import { showNotification, showWarningNotification } from '../../notifications';
 import { updateSettings } from '../settings';
 import { formatDeviceLabel, setAudioOutputDeviceId } from './functions';
@@ -98,10 +100,18 @@ MiddlewareRegistry.register(store => next => action => {
         break;
     }
     case SET_AUDIO_INPUT_DEVICE:
-        APP.UI.emitEvent(UIEvents.AUDIO_DEVICE_CHANGED, action.deviceId);
+        if (isPrejoinPageVisible(store.getState())) {
+            store.dispatch(replaceAudioTrackById(action.deviceId));
+        } else {
+            APP.UI.emitEvent(UIEvents.AUDIO_DEVICE_CHANGED, action.deviceId);
+        }
         break;
     case SET_VIDEO_INPUT_DEVICE:
-        APP.UI.emitEvent(UIEvents.VIDEO_DEVICE_CHANGED, action.deviceId);
+        if (isPrejoinPageVisible(store.getState())) {
+            store.dispatch(replaceVideoTrackById(action.deviceId));
+        } else {
+            APP.UI.emitEvent(UIEvents.VIDEO_DEVICE_CHANGED, action.deviceId);
+        }
         break;
     case CHECK_AND_NOTIFY_FOR_NEW_DEVICE:
         _checkAndNotifyForNewDevice(store, action.newDevices, action.oldDevices);
@@ -111,7 +121,6 @@ MiddlewareRegistry.register(store => next => action => {
     return next(action);
 });
 
-
 /**
  * Does extra sync up on properties that may need to be updated after the
  * conference was joined.

react/features/base/icons/svg/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5223 18.2701C16.9328 18.6395 16.9661 19.2718 16.5966 19.6823C16.2272 20.0928 15.5949 20.1261 15.1844 19.7567L7.31769 12.6767C6.87631 12.2794 6.87631 11.5873 7.31769 11.1901L15.1844 4.11007C15.5949 3.74061 16.2272 3.77389 16.5966 4.1844C16.9661 4.59491 16.9328 5.2272 16.5223 5.59666L9.4815 11.9334L16.5223 18.2701Z" fill="#A4B8D1"/>
+</svg>

react/features/base/icons/svg/arrow_down.svg

@@ -1,3 +1,3 @@
 <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.07001 0.248238C8.3471 -0.0596449 8.82132 -0.0846038 9.1292 0.192491C9.43709 0.469585 9.46205 0.943802 9.18495 1.25168L5.65622 5.19348C5.35829 5.52451 4.83922 5.52451 4.54128 5.19348L1.06752 1.25168C0.79043 0.943802 0.81539 0.469585 1.12327 0.192491C1.43115 -0.0846038 1.90537 -0.0596449 2.18247 0.248238L5.09875 3.57062L8.07001 0.248238Z" fill="#5E6D7A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.07001 0.248238C8.3471 -0.0596449 8.82132 -0.0846038 9.1292 0.192491C9.43709 0.469585 9.46205 0.943802 9.18495 1.25168L5.65622 5.19348C5.35829 5.52451 4.83922 5.52451 4.54128 5.19348L1.06752 1.25168C0.79043 0.943802 0.81539 0.469585 1.12327 0.192491C1.43115 -0.0846038 1.90537 -0.0596449 2.18247 0.248238L5.09875 3.57062L8.07001 0.248238Z"/>
 </svg>

react/features/base/icons/svg/close-x.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.41416 8L15.071 2.34315C15.4615 1.95262 15.4615 1.31946 15.071 0.928933C14.6805 0.538409 14.0473 0.538409 13.6568 0.928933L7.99995 6.58579L2.34309 0.928933C1.95257 0.538409 1.3194 0.538409 0.92888 0.928933C0.538355 1.31946 0.538355 1.95262 0.92888 2.34315L6.58573 8L0.92888 13.6569C0.538355 14.0474 0.538355 14.6805 0.92888 15.0711C1.3194 15.4616 1.95257 15.4616 2.34309 15.0711L7.99995 9.41421L13.6568 15.0711C14.0473 15.4616 14.6805 15.4616 15.071 15.0711C15.4615 14.6805 15.4615 14.0474 15.071 13.6569L9.41416 8Z" />
+</svg>

react/features/base/icons/svg/index.js

@@ -4,6 +4,7 @@ export { default as IconAdd } from './add.svg';
 export { default as IconAddPeople } from './link.svg';
 export { default as IconArrowBack } from './arrow_back.svg';
 export { default as IconArrowDown } from './arrow_down.svg';
+export { default as IconArrowLeft } from './arrow-left.svg';
 export { default as IconAudioOnly } from './visibility.svg';
 export { default as IconAudioOnlyOff } from './visibility-off.svg';
 export { default as IconAudioRoute } from './volume.svg';
@@ -16,6 +17,7 @@ export { default as IconChatSend } from './send.svg';
 export { default as IconChatUnread } from './chat-unread.svg';
 export { default as IconCheck } from './check.svg';
 export { default as IconClose } from './close.svg';
+export { default as IconCloseX } from './close-x.svg';
 export { default as IconClosedCaption } from './closed_caption.svg';
 export { default as IconConnectionActive } from './gsm-bars.svg';
 export { default as IconConnectionInactive } from './ninja.svg';