From 8cd259c43f7c546c6e8dacecc7c440765ac6fe3f Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Mon, 23 May 2022 13:47:07 -0500
Subject: [PATCH] fix(device-selection):iOS Safari disable previews

On iOS Safari when the tracks for the previews are created the old ones
are auto destroyed which leads many issues like stop sending media while
the devie selectioin is displayed, error messages, etc.
---
 react/features/device-selection/actions.js   | 13 ++-----------
 react/features/device-selection/functions.js | 13 +++++++++----
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/react/features/device-selection/actions.js b/react/features/device-selection/actions.js
index f1edb48d2..64de72649 100644
--- a/react/features/device-selection/actions.js
+++ b/react/features/device-selection/actions.js
@@ -5,8 +5,6 @@ import {
     setAudioOutputDeviceId,
     setVideoInputDevice
 } from '../base/devices';
-import { isIosMobileBrowser } from '../base/environment/utils';
-import { browser } from '../base/lib-jitsi-meet';
 import { updateSettings } from '../base/settings';
 
 import { getDeviceSelectionDialogProps } from './functions';
@@ -19,16 +17,10 @@ import logger from './logger';
  * @returns {Function}
  */
 export function submitDeviceSelectionTab(newState) {
-    // Always use the new track for mobile Safari because of https://bugs.webkit.org/show_bug.cgi?id=179363#c30. The
-    // old track is stopped by the browser when a new track is created for preview so it needs to be replaced even if
-    // the device selection doesn't change.
-    const replaceTrackAlways = isIosMobileBrowser() && browser.isVersionGreaterThan('15.3');
-
     return (dispatch, getState) => {
         const currentState = getDeviceSelectionDialogProps(getState());
 
-        if ((newState.selectedVideoInputId && (newState.selectedVideoInputId !== currentState.selectedVideoInputId))
-            || replaceTrackAlways) {
+        if (newState.selectedVideoInputId && (newState.selectedVideoInputId !== currentState.selectedVideoInputId)) {
             dispatch(updateSettings({
                 userSelectedCameraDeviceId: newState.selectedVideoInputId,
                 userSelectedCameraDeviceLabel:
@@ -38,8 +30,7 @@ export function submitDeviceSelectionTab(newState) {
             dispatch(setVideoInputDevice(newState.selectedVideoInputId));
         }
 
-        if ((newState.selectedAudioInputId && newState.selectedAudioInputId !== currentState.selectedAudioInputId)
-            || replaceTrackAlways) {
+        if (newState.selectedAudioInputId && newState.selectedAudioInputId !== currentState.selectedAudioInputId) {
             dispatch(updateSettings({
                 userSelectedMicDeviceId: newState.selectedAudioInputId,
                 userSelectedMicDeviceLabel:
diff --git a/react/features/device-selection/functions.js b/react/features/device-selection/functions.js
index 2d9abd318..0464949f7 100644
--- a/react/features/device-selection/functions.js
+++ b/react/features/device-selection/functions.js
@@ -13,7 +13,8 @@ import {
     setAudioOutputDevice,
     setVideoInputDeviceAndUpdateSettings
 } from '../base/devices';
-import JitsiMeetJS from '../base/lib-jitsi-meet';
+import { isIosMobileBrowser } from '../base/environment/utils';
+import JitsiMeetJS, { browser } from '../base/lib-jitsi-meet';
 import { toState } from '../base/redux';
 import {
     getUserSelectedCameraDeviceId,
@@ -29,6 +30,10 @@ import {
  * @returns {Object} - The properties for the device selection dialog.
  */
 export function getDeviceSelectionDialogProps(stateful: Object | Function) {
+    // On mobile Safari because of https://bugs.webkit.org/show_bug.cgi?id=179363#c30, the old track is stopped
+    // by the browser when a new track is created for preview. That's why we are disabling all previews.
+    const disablePreviews = isIosMobileBrowser() && browser.isVersionGreaterThan('15.3');
+
     const state = toState(stateful);
     const settings = state['features/base/settings'];
     const { conference } = state['features/base/conference'];
@@ -64,10 +69,10 @@ export function getDeviceSelectionDialogProps(stateful: Object | Function) {
         disableVideoInputSelect,
         hasAudioPermission: permissions.audio,
         hasVideoPermission: permissions.video,
-        hideAudioInputPreview: disableAudioInputChange || !JitsiMeetJS.isCollectingLocalStats(),
-        hideAudioOutputPreview: !speakerChangeSupported,
+        hideAudioInputPreview: disableAudioInputChange || !JitsiMeetJS.isCollectingLocalStats() || disablePreviews,
+        hideAudioOutputPreview: !speakerChangeSupported || disablePreviews,
         hideAudioOutputSelect: !speakerChangeSupported,
-        hideVideoInputPreview: !cameraChangeSupported,
+        hideVideoInputPreview: !cameraChangeSupported || disablePreviews,
         selectedAudioInputId,
         selectedAudioOutputId,
         selectedVideoInputId