fix: correct inconsistencies between disableLocalVideoFlip flag and UI

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 });
 

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()}
                     </>
                 )}

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,

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: '${

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)