From a564ce581ddd1489ee84ecad1d48415654147fa5 Mon Sep 17 00:00:00 2001
From: Mihai-Andrei Uscat <52234168+muscat1@users.noreply.github.com>
Date: Wed, 9 Jun 2021 09:22:16 +0300
Subject: [PATCH] fix(DeviceSelection): Remove video from mobile Safari

---
 .../device-selection/_device-selection.scss   | 17 ++++++
 .../components/DeviceSelection.js             | 60 +++++++++++++------
 react/features/device-selection/functions.js  |  4 ++
 3 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/css/modals/device-selection/_device-selection.scss b/css/modals/device-selection/_device-selection.scss
index 79789bb8c..2902868cb 100644
--- a/css/modals/device-selection/_device-selection.scss
+++ b/css/modals/device-selection/_device-selection.scss
@@ -129,3 +129,20 @@
         }
     }
 }
+
+.device-selection.video-hidden {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .column-selectors {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .column-video {
+        order: 1;
+        width: 100%;
+        margin-top: 8px;
+    }
+}
diff --git a/react/features/device-selection/components/DeviceSelection.js b/react/features/device-selection/components/DeviceSelection.js
index c46a88611..d932084fc 100644
--- a/react/features/device-selection/components/DeviceSelection.js
+++ b/react/features/device-selection/components/DeviceSelection.js
@@ -64,6 +64,18 @@ export type Props = {
      */
     hideAudioOutputSelect: boolean,
 
+    /**
+     * Whether video input preview should be displayed or not.
+     * (In the case of iOS Safari)
+     */
+    hideVideoInputPreview: boolean,
+
+    /**
+     * Whether video output dropdown should be displayed or not.
+     * (In the case of iOS Safari)
+     */
+    hideVideoOutputSelect: boolean,
+
     /**
      * An optional callback to invoke after the component has completed its
      * mount logic.
@@ -201,17 +213,20 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
         const {
             hideAudioInputPreview,
             hideAudioOutputSelect,
+            hideVideoInputPreview,
             selectedAudioOutputId
         } = this.props;
 
         return (
-            <div className = 'device-selection'>
+            <div className = { `device-selection${hideVideoInputPreview ? ' video-hidden' : ''}` }>
                 <div className = 'device-selection-column column-video'>
-                    <div className = 'device-selection-video-container'>
-                        <VideoInputPreview
-                            error = { this.state.previewVideoTrackError }
-                            track = { this.state.previewVideoTrack } />
-                    </div>
+                    { !hideVideoInputPreview
+                        && <div className = 'device-selection-video-container'>
+                            <VideoInputPreview
+                                error = { this.state.previewVideoTrackError }
+                                track = { this.state.previewVideoTrack } />
+                        </div>
+                    }
                     { !hideAudioInputPreview
                         && <AudioInputPreview
                             track = { this.state.previewAudioTrack } /> }
@@ -264,6 +279,12 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
      * @returns {void}
      */
     _createVideoInputTrack(deviceId) {
+        const { hideVideoInputPreview } = this.props;
+
+        if (hideVideoInputPreview) {
+            return;
+        }
+
         return this._disposeVideoInputPreview()
             .then(() => createLocalTrack('video', deviceId, 5000))
             .then(jitsiLocalTrack => {
@@ -342,18 +363,6 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
         const { availableDevices, hasAudioPermission, hasVideoPermission } = this.props;
 
         const configurations = [
-            {
-                devices: availableDevices.videoInput,
-                hasPermission: hasVideoPermission,
-                icon: 'icon-camera',
-                isDisabled: this.props.disableDeviceChange,
-                key: 'videoInput',
-                label: 'settings.selectCamera',
-                onSelect: selectedVideoInputId =>
-                    super._onChange({ selectedVideoInputId }),
-                selectedDeviceId: this.state.previewVideoTrack
-                    ? this.state.previewVideoTrack.getDeviceId() : null
-            },
             {
                 devices: availableDevices.audioInput,
                 hasPermission: hasAudioPermission,
@@ -369,6 +378,21 @@ class DeviceSelection extends AbstractDialogTab<Props, State> {
             }
         ];
 
+        if (!this.props.hideVideoOutputSelect) {
+            configurations.unshift({
+                devices: availableDevices.videoInput,
+                hasPermission: hasVideoPermission,
+                icon: 'icon-camera',
+                isDisabled: this.props.disableDeviceChange,
+                key: 'videoInput',
+                label: 'settings.selectCamera',
+                onSelect: selectedVideoInputId =>
+                    super._onChange({ selectedVideoInputId }),
+                selectedDeviceId: this.state.previewVideoTrack
+                    ? this.state.previewVideoTrack.getDeviceId() : null
+            });
+        }
+
         if (!this.props.hideAudioOutputSelect) {
             configurations.push({
                 devices: availableDevices.audioOutput,
diff --git a/react/features/device-selection/functions.js b/react/features/device-selection/functions.js
index 177b56996..04d111196 100644
--- a/react/features/device-selection/functions.js
+++ b/react/features/device-selection/functions.js
@@ -13,6 +13,7 @@ import {
     setAudioOutputDeviceId,
     setVideoInputDevice
 } from '../base/devices';
+import { isIosMobileBrowser } from '../base/environment/utils';
 import JitsiMeetJS from '../base/lib-jitsi-meet';
 import { toState } from '../base/redux';
 import {
@@ -33,6 +34,7 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
     const settings = state['features/base/settings'];
     const { conference } = state['features/base/conference'];
     const { permissions } = state['features/base/devices'];
+    const isMobileSafari = isIosMobileBrowser();
     let disableAudioInputChange = !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
     let selectedAudioInputId = settings.micDeviceId;
     let selectedAudioOutputId = getAudioOutputDeviceId();
@@ -62,6 +64,8 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
             !JitsiMeetJS.isCollectingLocalStats(),
         hideAudioOutputSelect: !JitsiMeetJS.mediaDevices
                             .isDeviceChangeAvailable('output'),
+        hideVideoInputPreview: isMobileSafari,
+        hideVideoOutputSelect: isMobileSafari,
         selectedAudioInputId,
         selectedAudioOutputId,
         selectedVideoInputId