feat(virtual-background) Move dialog to SettingsDialog tab (#13005)

Implement redesign

react/features/settings/components/web/SettingsDialog.tsx

@@ -8,6 +8,7 @@ import {
     IconCalendar,
     IconGear,
     IconHost,
+    IconImage,
     IconShortcuts,
     IconUser,
     IconVideo,
@@ -24,12 +25,14 @@ import {
     getAudioDeviceSelectionDialogProps,
     getVideoDeviceSelectionDialogProps
 } from '../../../device-selection/functions.web';
+import { checkBlurSupport } from '../../../virtual-background/functions';
 import {
     submitModeratorTab,
     submitMoreTab,
     submitNotificationsTab,
     submitProfileTab,
-    submitShortcutsTab
+    submitShortcutsTab,
+    submitVirtualBackgroundTab
 } from '../../actions';
 import { SETTINGS_TABS } from '../../constants';
 import {
@@ -38,7 +41,8 @@ import {
     getNotificationsMap,
     getNotificationsTabProps,
     getProfileTabProps,
-    getShortcutsTabProps
+    getShortcutsTabProps,
+    getVirtualBackgroundTabProps
 } from '../../functions';
 
 // @ts-ignore
@@ -48,6 +52,7 @@ import MoreTab from './MoreTab';
 import NotificationsTab from './NotificationsTab';
 import ProfileTab from './ProfileTab';
 import ShortcutsTab from './ShortcutsTab';
+import VirtualBackgroundTab from './VirtualBackgroundTab';
 
 /**
  * The type of the React {@code Component} props of
@@ -254,6 +259,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
     const showSoundsSettings = configuredTabs.includes('sounds');
     const enabledNotifications = getNotificationsMap(state);
     const showNotificationsSettings = Object.keys(enabledNotifications).length > 0;
+    const virtualBackgroundSupported = checkBlurSupport();
     const tabs: IDialogTab<any>[] = [];
 
     if (showDeviceSettings) {
@@ -305,12 +311,37 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         });
     }
 
+    if (virtualBackgroundSupported) {
+        tabs.push({
+            name: SETTINGS_TABS.VIRTUAL_BACKGROUND,
+            component: VirtualBackgroundTab,
+            labelKey: 'virtualBackground.title',
+            props: getVirtualBackgroundTabProps(state),
+            className: `settings-pane ${classes.settingsDialog}`,
+            submit: (newState: any) => submitVirtualBackgroundTab(newState),
+            cancel: () => {
+                const { _virtualBackground } = getVirtualBackgroundTabProps(state);
+
+                return submitVirtualBackgroundTab({
+                    options: {
+                        backgroundType: _virtualBackground.backgroundType,
+                        enabled: _virtualBackground.backgroundEffectEnabled,
+                        url: _virtualBackground.virtualSource,
+                        selectedThumbnail: _virtualBackground.selectedThumbnail,
+                        blurValue: _virtualBackground.blurValue
+                    }
+                }, true);
+            },
+            icon: IconImage
+        });
+    }
+
     if (showSoundsSettings || showNotificationsSettings) {
         tabs.push({
             name: SETTINGS_TABS.NOTIFICATIONS,
             component: NotificationsTab,
             labelKey: 'settings.notifications',
-            propsUpdateFunction: (tabState: any, newProps: any) => {
+            propsUpdateFunction: (tabState: any, newProps: ReturnType<typeof getNotificationsTabProps>) => {
                 return {
                     ...newProps,
                     enabledNotifications: tabState?.enabledNotifications || {}
@@ -373,7 +404,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         component: ShortcutsTab,
         labelKey: 'settings.shortcuts',
         props: getShortcutsTabProps(state, isDisplayedOnWelcomePage),
-        propsUpdateFunction: (tabState: any, newProps: any) => {
+        propsUpdateFunction: (tabState: any, newProps: ReturnType<typeof getShortcutsTabProps>) => {
             // Updates tab props, keeping users selection
 
             return {

react/features/settings/components/web/VirtualBackgroundTab.tsx

@@ -0,0 +1,107 @@
+import { withStyles } from '@mui/styles';
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import AbstractDialogTab, {
+    IProps as AbstractDialogTabProps
+} from '../../../base/dialog/components/web/AbstractDialogTab';
+import { translate } from '../../../base/i18n/functions';
+import VirtualBackgrounds from '../../../virtual-background/components/VirtualBackgrounds';
+
+/**
+ * The type of the React {@code Component} props of {@link VirtualBackgroundTab}.
+ */
+export interface IProps extends AbstractDialogTabProps, WithTranslation {
+
+    /**
+     * Returns the jitsi track that will have background effect applied.
+     */
+    _jitsiTrack: Object;
+
+    /**
+     * CSS classes object.
+     */
+    classes: any;
+
+    /**
+     * Virtual background options.
+     */
+    options: any;
+
+    /**
+     * The selected thumbnail identifier.
+     */
+    selectedThumbnail: string;
+}
+
+const styles = () => {
+    return {
+        container: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column' as const
+        }
+    };
+};
+
+/**
+ * React {@code Component} for modifying language and moderator settings.
+ *
+ * @augments Component
+ */
+class VirtualBackgroundTab extends AbstractDialogTab<IProps, any> {
+    /**
+     * Initializes a new {@code ModeratorTab} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handler so it is only bound once for every instance.
+        this._onOptionsChanged = this._onOptionsChanged.bind(this);
+    }
+
+    /**
+     * Callback invoked to select if follow-me mode
+     * should be activated.
+     *
+     * @param {Object} options - The new background options.
+     *
+     * @returns {void}
+     */
+    _onOptionsChanged(options: any) {
+        super._onChange({ options });
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const {
+            classes,
+            options,
+            selectedThumbnail,
+            _jitsiTrack
+        } = this.props;
+
+        return (
+            <div
+                className = { classes.container }
+                id = 'virtual-background-dialog'
+                key = 'virtual-background'>
+                <VirtualBackgrounds
+                    _jitsiTrack = { _jitsiTrack }
+                    onOptionsChange = { this._onOptionsChanged }
+                    options = { options }
+                    selectedThumbnail = { selectedThumbnail } />
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles)(translate(VirtualBackgroundTab));

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

@@ -3,7 +3,6 @@ import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
 import { IReduxState, IStore } from '../../../../app/types';
-import { openDialog } from '../../../../base/dialog/actions';
 import { translate } from '../../../../base/i18n/functions';
 import { IconImage } from '../../../../base/icons/svg';
 import Video from '../../../../base/media/components/Video.web';
@@ -13,7 +12,8 @@ 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 VirtualBackgroundDialog from '../../../../virtual-background/components/VirtualBackgroundDialog';
+import { openSettingsDialog } from '../../../actions';
+import { SETTINGS_TABS } from '../../../constants';
 import { createLocalVideoTracks } from '../../../functions.web';
 
 const videoClassName = 'video-preview-video flipVideoX';
@@ -297,7 +297,7 @@ const mapStateToProps = (state: IReduxState) => {
 
 const mapDispatchToProps = (dispatch: IStore['dispatch']) => {
     return {
-        selectBackground: () => dispatch(openDialog(VirtualBackgroundDialog)),
+        selectBackground: () => dispatch(openSettingsDialog(SETTINGS_TABS.VIRTUAL_BACKGROUND)),
         changeFlip: (flip: boolean) => {
             dispatch(updateSettings({
                 localFlipX: flip