Moves checkbox for hiding self view to video tab from the general tab

react/features/base/settings/actionTypes.ts

@@ -7,6 +7,7 @@
  *         audioOutputDeviceId: string,
  *         avatarURL: string,
  *         cameraDeviceId: string,
+ *         disableSelfView: boolean,
  *         displayName: string,
  *         email: string,
  *         localFlipX: boolean,

react/features/base/settings/actions.ts

@@ -11,6 +11,7 @@ import { ISettingsState } from './reducer';
  *         audioOutputDeviceId: string,
  *         avatarURL: string,
  *         cameraDeviceId: string,
+ *         disableSelfView: boolean,
  *         displayName: string,
  *         email: string,
  *         localFlipX: boolean,

react/features/base/ui/components/web/ContextMenu.tsx

@@ -56,7 +56,7 @@ interface IProps {
     /**
      * Children of the context menu.
      */
-    children: ReactNode;
+    children?: ReactNode;
 
     /**
      * Class name for context menu. Used to overwrite default styles.

react/features/device-selection/components/VideoDeviceSelection.web.tsx

@@ -51,6 +51,11 @@ export interface IProps extends AbstractDialogTabProps, WithTranslation {
      */
     disableDeviceChange: boolean;
 
+    /**
+     * Whether or not the local video is hidden.
+     */
+    disableSelfView: boolean;
+
     /**
      * Whether video input dropdown should be enabled or not.
      */
@@ -203,6 +208,7 @@ class VideoDeviceSelection extends AbstractDialogTab<IProps, IState> {
      */
     render() {
         const {
+            disableSelfView,
             hideAdditionalSettings,
             hideVideoInputPreview,
             localFlipX,
@@ -231,6 +237,11 @@ class VideoDeviceSelection extends AbstractDialogTab<IProps, IState> {
                                 label = { t('videothumbnail.mirrorVideo') }
                                 // eslint-disable-next-line react/jsx-no-bind
                                 onChange = { () => super._onChange({ localFlipX: !localFlipX }) } />
+                            <Checkbox
+                                checked = { Boolean(disableSelfView) }
+                                label = { t('videothumbnail.hideSelfView') }
+                                // eslint-disable-next-line react/jsx-no-bind
+                                onChange = { () => super._onChange({ disableSelfView: !disableSelfView }) } />
                         </div>
                         {this._renderFramerateSelect()}
                     </>

react/features/settings/components/native/GeneralSection.tsx

@@ -22,7 +22,6 @@ const GeneralSection = () => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const {
-        disableSelfView,
         userSelectedSkipPrejoin
     } = useSelector((state: IReduxState) => state['features/base/settings']);
 
@@ -32,10 +31,6 @@ const GeneralSection = () => {
 
     const { language = DEFAULT_LANGUAGE } = i18next;
 
-    const onSelfViewToggled = useCallback((enabled?: boolean) =>
-        dispatch(updateSettings({ disableSelfView: enabled }))
-    , [ dispatch, updateSettings ]);
-
     const onShowPejoinToggled = useCallback((enabled?: boolean) => {
         dispatch(updateSettings({ userSelectedSkipPrejoin: !enabled }));
     }
@@ -51,12 +46,6 @@ const GeneralSection = () => {
 
     return (
         <FormSection>
-            <FormRow label = 'videothumbnail.hideSelfView'>
-                <Switch
-                    checked = { Boolean(disableSelfView) }
-                    onChange = { onSelfViewToggled } />
-            </FormRow>
-
             {showPrejoinSettings && <FormRow label = 'prejoin.showScreen'>
                 <Switch
                     checked = { showPrejoinPage }

react/features/settings/components/web/video/VideoSettingsContent.tsx

@@ -28,11 +28,21 @@ export interface IProps {
      */
     changeFlip: (flip: boolean) => void;
 
+    /**
+     * Callback to change the selfView state.
+     */
+    changeSelfView: (selfView: boolean) => void;
+
     /**
      * The deviceId of the camera device currently being used.
      */
     currentCameraDeviceId: string;
 
+    /**
+     * Whether or not the local video is hidden.
+     */
+    disableSelfView: boolean;
+
     /**
      * Whether or not the local video is flipped.
      */
@@ -145,7 +155,9 @@ const stopPropagation = (e: React.MouseEvent) => {
 
 const VideoSettingsContent = ({
     changeFlip,
+    changeSelfView,
     currentCameraDeviceId,
+    disableSelfView,
     localFlipX,
     selectBackground,
     setVideoInputDevice,
@@ -171,6 +183,15 @@ const VideoSettingsContent = ({
         changeFlip(!localFlipX);
     }, [ localFlipX, changeFlip ]);
 
+    /**
+     * Toggles local video view based on the provided 'enabled' state.
+     *
+     * @returns {void}
+     */
+    const _onSelfViewToggled = useCallback(() => {
+        changeSelfView(!disableSelfView);
+    }, [ disableSelfView, changeSelfView ]);
+
     /**
      * Destroys all the tracks from trackData object.
      *
@@ -317,6 +338,10 @@ const VideoSettingsContent = ({
                         checked = { localFlipX }
                         label = { t('videothumbnail.mirrorVideo') }
                         onChange = { _onToggleFlip } />
+                    <Checkbox
+                        checked = { Boolean(disableSelfView) }
+                        label = { t('videothumbnail.hideSelfView') }
+                        onChange = { _onSelfViewToggled } />
                 </div>
             </ContextMenuItemGroup>
         </ContextMenu>
@@ -325,9 +350,11 @@ const VideoSettingsContent = ({
 
 const mapStateToProps = (state: IReduxState) => {
     const { localFlipX } = state['features/base/settings'];
+    const { disableSelfView } = state['features/base/settings'];
 
     return {
         localFlipX: Boolean(localFlipX),
+        disableSelfView: Boolean(disableSelfView),
         visibleVirtualBackground: checkBlurSupport()
         && checkVirtualBackgroundEnabled(state)
     };
@@ -340,6 +367,11 @@ const mapDispatchToProps = (dispatch: IStore['dispatch']) => {
             dispatch(updateSettings({
                 localFlipX: flip
             }));
+        },
+        changeSelfView: (selfView: boolean) => {
+            dispatch(updateSettings({
+                disableSelfView: selfView
+            }));
         }
     };
 };