fix: correct inconsistencies between disableLocalVideoFlip flag and UI

Some parts of the ui still showed the setting for flipping the video, even if the flag indicated otherwise Also fixes the case where setting a virtual background ignores the stored localFlipX setting
jitsi · Sep 9, 2024 · 646739c · 646739c
1 parent ac72003
commit 646739c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 17 deletions.
diff --git a/react/features/base/tracks/actions.any.ts b/react/features/base/tracks/actions.any.ts
@@ -833,6 +833,7 @@ export function toggleCamera() {
         const tracks = state['features/base/tracks'];
         const localVideoTrack = getLocalVideoTrack(tracks)?.jitsiTrack;
         const currentFacingMode = localVideoTrack.getCameraFacingMode();
+        const { localFlipX } = state['features/base/settings'];
 
         /**
          * FIXME: Ideally, we should be dispatching {@code replaceLocalTrack} here,
@@ -848,7 +849,7 @@ export function toggleCamera() {
             : CAMERA_FACING_MODE.USER;
 
         // Update the flipX value so the environment facing camera is not flipped, before the new track is created.
-        dispatch(updateSettings({ localFlipX: targetFacingMode === CAMERA_FACING_MODE.USER }));
+        dispatch(updateSettings({ localFlipX: targetFacingMode === CAMERA_FACING_MODE.USER ? localFlipX : false }));
 
         const newVideoTrack = await createLocalTrack('video', null, null, { facingMode: targetFacingMode });
 

diff --git a/react/features/device-selection/components/VideoDeviceSelection.web.tsx b/react/features/device-selection/components/VideoDeviceSelection.web.tsx
@@ -51,6 +51,11 @@ export interface IProps extends AbstractDialogTabProps, WithTranslation {
      */
     disableDeviceChange: boolean;
 
+    /**
+     * Whether the local video can be flipped or not.
+     */
+    disableLocalVideoFlip: boolean | undefined;
+
     /**
      * Whether video input dropdown should be enabled or not.
      */
@@ -203,6 +208,7 @@ class VideoDeviceSelection extends AbstractDialogTab<IProps, IState> {
      */
     render() {
         const {
+            disableLocalVideoFlip,
             hideAdditionalSettings,
             hideVideoInputPreview,
             localFlipX,
@@ -225,13 +231,15 @@ class VideoDeviceSelection extends AbstractDialogTab<IProps, IState> {
                 </div>
                 {!hideAdditionalSettings && (
                     <>
-                        <div className = { classes.checkboxContainer }>
-                            <Checkbox
-                                checked = { localFlipX }
-                                label = { t('videothumbnail.mirrorVideo') }
-                                // eslint-disable-next-line react/jsx-no-bind
-                                onChange = { () => super._onChange({ localFlipX: !localFlipX }) } />
-                        </div>
+                        {!disableLocalVideoFlip && (
+                            <div className = { classes.checkboxContainer }>
+                                <Checkbox
+                                    checked = { localFlipX }
+                                    label = { t('videothumbnail.mirrorVideo') }
+                                    // eslint-disable-next-line react/jsx-no-bind
+                                    onChange = { () => super._onChange({ localFlipX: !localFlipX }) } />
+                            </div>
+                        )}
                         {this._renderFramerateSelect()}
                     </>
                 )}

diff --git a/react/features/device-selection/functions.web.ts b/react/features/device-selection/functions.web.ts
@@ -105,6 +105,7 @@ export function getVideoDeviceSelectionDialogProps(stateful: IStateful, isDispla
     const inputDeviceChangeSupported = JitsiMeetJS.mediaDevices.isDeviceChangeAvailable('input');
     const userSelectedCamera = getUserSelectedCameraDeviceId(state);
     const { localFlipX } = state['features/base/settings'];
+    const { disableLocalVideoFlip } = state['features/base/config'];
     const hideAdditionalSettings = isPrejoinPageVisible(state) || isDisplayedOnWelcomePage;
     const framerate = state['features/screen-share'].captureFrameRate ?? SS_DEFAULT_FRAME_RATE;
 
@@ -127,6 +128,7 @@ export function getVideoDeviceSelectionDialogProps(stateful: IStateful, isDispla
         desktopShareFramerates: SS_SUPPORTED_FRAMERATES,
         disableDeviceChange: !JitsiMeetJS.mediaDevices.isDeviceChangeAvailable(),
         disableVideoInputSelect,
+        disableLocalVideoFlip,
         hasVideoPermission: permissions.video,
         hideAdditionalSettings,
         hideVideoInputPreview: !inputDeviceChangeSupported || disablePreviews,

diff --git a/react/features/settings/actions.web.ts b/react/features/settings/actions.web.ts
@@ -304,14 +304,15 @@ export function submitVirtualBackgroundTab(newState: any, isCancel = false) {
     return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const track = getLocalVideoTrack(state['features/base/tracks'])?.jitsiTrack;
+        const { localFlipX } = state['features/base/settings'];
 
         if (newState.options?.selectedThumbnail) {
             await dispatch(toggleBackgroundEffect(newState.options, track));
 
             if (!isCancel) {
                 // Set x scale to default value.
                 dispatch(updateSettings({
-                    localFlipX: true
+                    localFlipX
                 }));
 
                 virtualBackgroundLogger.info(`Virtual background type: '${

diff --git a/react/features/settings/components/web/video/VideoSettingsContent.tsx b/react/features/settings/components/web/video/VideoSettingsContent.tsx
@@ -33,6 +33,11 @@ export interface IProps {
      */
     currentCameraDeviceId: string;
 
+    /**
+     * Whether the local video flip is disabled.
+     */
+    disableLocalVideoFlip: boolean | undefined;
+
     /**
      * Whether or not the local video is flipped.
      */
@@ -146,6 +151,7 @@ const stopPropagation = (e: React.MouseEvent) => {
 const VideoSettingsContent = ({
     changeFlip,
     currentCameraDeviceId,
+    disableLocalVideoFlip,
     localFlipX,
     selectBackground,
     setVideoInputDevice,
@@ -310,23 +316,27 @@ const VideoSettingsContent = ({
                     icon = { IconImage }
                     onClick = { selectBackground }
                     text = { t('virtualBackground.title') } /> }
-                <div
-                    className = { classes.checkboxContainer }
-                    onClick = { stopPropagation }>
-                    <Checkbox
-                        checked = { localFlipX }
-                        label = { t('videothumbnail.mirrorVideo') }
-                        onChange = { _onToggleFlip } />
-                </div>
+                {!disableLocalVideoFlip && (
+                    <div
+                        className = { classes.checkboxContainer }
+                        onClick = { stopPropagation }>
+                        <Checkbox
+                            checked = { localFlipX }
+                            label = { t('videothumbnail.mirrorVideo') }
+                            onChange = { _onToggleFlip } />
+                    </div>
+                )}
             </ContextMenuItemGroup>
         </ContextMenu>
     );
 };
 
 const mapStateToProps = (state: IReduxState) => {
+    const { disableLocalVideoFlip } = state['features/base/config'];
     const { localFlipX } = state['features/base/settings'];
 
     return {
+        disableLocalVideoFlip,
         localFlipX: Boolean(localFlipX),
         visibleVirtualBackground: checkBlurSupport()
         && checkVirtualBackgroundEnabled(state)