Fix disable virtual background feature, now hides the feature everywhere

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

@@ -13,7 +13,7 @@ import Checkbox from '../../../../base/ui/components/web/Checkbox';
 import ContextMenu from '../../../../base/ui/components/web/ContextMenu';
 import ContextMenuItem from '../../../../base/ui/components/web/ContextMenuItem';
 import ContextMenuItemGroup from '../../../../base/ui/components/web/ContextMenuItemGroup';
-import { checkBlurSupport } from '../../../../virtual-background/functions';
+import { checkBlurSupport, checkVirtualBackgroundEnabled } from '../../../../virtual-background/functions';
 import { openSettingsDialog } from '../../../actions';
 import { SETTINGS_TABS } from '../../../constants';
 import { createLocalVideoTracks } from '../../../functions.web';
@@ -57,6 +57,11 @@ export interface IProps {
      * All the camera device ids currently connected.
      */
     videoDeviceIds: string[];
+
+    /**
+    * Whether or not the virtual background is visible.
+    */
+    visibleVirtualBackground: boolean;
 }
 
 const useStyles = makeStyles()(theme => {
@@ -145,7 +150,8 @@ const VideoSettingsContent = ({
     selectBackground,
     setVideoInputDevice,
     toggleVideoSettings,
-    videoDeviceIds
+    videoDeviceIds,
+    visibleVirtualBackground
 }: IProps) => {
     const _componentWasUnmounted = useRef(false);
     const [ trackData, setTrackData ] = useState(new Array(videoDeviceIds.length).fill({
@@ -287,8 +293,6 @@ const VideoSettingsContent = ({
         }
     }, [ videoDeviceIds ]);
 
-    const virtualBackgroundSupported = checkBlurSupport();
-
     return (
         <ContextMenu
             aria-labelledby = 'video-settings-button'
@@ -301,7 +305,7 @@ const VideoSettingsContent = ({
                 {trackData.map((data, i) => _renderPreviewEntry(data, i))}
             </ContextMenuItemGroup>
             <ContextMenuItemGroup>
-                { virtualBackgroundSupported && <ContextMenuItem
+                { visibleVirtualBackground && <ContextMenuItem
                     accessibilityLabel = { t('virtualBackground.title') }
                     icon = { IconImage }
                     onClick = { selectBackground }
@@ -323,7 +327,9 @@ const mapStateToProps = (state: IReduxState) => {
     const { localFlipX } = state['features/base/settings'];
 
     return {
-        localFlipX: Boolean(localFlipX)
+        localFlipX: Boolean(localFlipX),
+        visibleVirtualBackground: checkBlurSupport()
+        && checkVirtualBackgroundEnabled(state)
     };
 };