fix(VirtualBackgroundDialog): SS on electron.

react/features/virtual-background/components/VirtualBackgroundDialog.js

@@ -6,9 +6,10 @@ import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import uuid from 'uuid';
 
-import { Dialog, hideDialog } from '../../base/dialog';
+import { Dialog, hideDialog, openDialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 import { Icon, IconCloseSmall, IconPlusCircle, IconShareDesktop } from '../../base/icons';
+import { browser, JitsiTrackErrors } from '../../base/lib-jitsi-meet';
 import { createLocalTrack } from '../../base/lib-jitsi-meet/functions';
 import { VIDEO_TYPE } from '../../base/media';
 import { connect } from '../../base/redux';
@@ -92,6 +93,14 @@ type Props = {
      */
     dispatch: Function,
 
+    /**
+     * The initial options copied in the state for the {@code VirtualBackground} component.
+     *
+     * NOTE: currently used only for electron in order to open the dialog in the correct state after desktop sharing
+     * selection.
+     */
+    initialOptions: Object,
+
     /**
      * Invoked to obtain translated strings.
      */
@@ -102,13 +111,39 @@ const onError = event => {
     event.target.style.display = 'none';
 };
 
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code VirtualBackground} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{Props}}
+ */
+function _mapStateToProps(state): Object {
+    return {
+        _virtualBackground: state['features/virtual-background'],
+        _selectedThumbnail: state['features/virtual-background'].selectedThumbnail,
+        _jitsiTrack: getLocalVideoTrack(state['features/base/tracks'])?.jitsiTrack
+    };
+}
+
+const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackground));
+
 /**
  * Renders virtual background dialog.
  *
  * @returns {ReactElement}
  */
-function VirtualBackground({ _jitsiTrack, _selectedThumbnail, _virtualBackground, dispatch, t }: Props) {
-    const [ options, setOptions ] = useState({});
+function VirtualBackground({
+    _jitsiTrack,
+    _selectedThumbnail,
+    _virtualBackground,
+    dispatch,
+    initialOptions,
+    t
+}: Props) {
+    const [ options, setOptions ] = useState({ ...initialOptions });
     const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
     const [ storedImages, setStoredImages ] = useState<Array<Image>>((localImages && Bourne.parse(localImages)) || []);
     const [ loading, setLoading ] = useState(false);
@@ -180,23 +215,56 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, _virtualBackground
 
 
     const shareDesktop = useCallback(async () => {
-        const url = await createLocalTrack('desktop', '');
+        let isCancelled = false, url;
+
+        try {
+            url = await createLocalTrack('desktop', '');
+        } catch (e) {
+            if (e.name === JitsiTrackErrors.SCREENSHARING_USER_CANCELED) {
+                isCancelled = true;
+            } else {
+                logger.error(e);
+            }
+        }
 
         if (!url) {
-            dispatch(showErrorNotification({
-                titleKey: 'virtualBackground.desktopShareError'
-            }));
-            logger.error('Could not create desktop share as a virtual background!');
+            if (!isCancelled) {
+                dispatch(showErrorNotification({
+                    titleKey: 'virtualBackground.desktopShareError'
+                }));
+                logger.error('Could not create desktop share as a virtual background!');
+            }
+
+            /**
+             * For electron createLocalTrack will open the {@code DesktopPicker} dialog and hide the
+             * {@code VirtualBackgroundDialog}. That's why we need to reopen the {@code VirtualBackgroundDialog}
+             * and restore the current state through {@code initialOptions} prop.
+             */
+            if (browser.isElectron()) {
+                dispatch(openDialog(VirtualBackgroundDialog, { initialOptions: options }));
+            }
 
             return;
         }
-        setOptions({
+
+        const newOptions = {
             backgroundType: VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE,
             enabled: true,
             selectedThumbnail: 'desktop-share',
             url
-        });
-    }, []);
+        };
+
+        /**
+         * For electron createLocalTrack will open the {@code DesktopPicker} dialog and hide the
+         * {@code VirtualBackgroundDialog}. That's why we need to reopen the {@code VirtualBackgroundDialog}
+         * and force it to show desktop share virtual background through {@code initialOptions} prop.
+         */
+        if (browser.isElectron()) {
+            dispatch(openDialog(VirtualBackgroundDialog, { initialOptions: newOptions }));
+        } else {
+            setOptions(newOptions);
+        }
+    }, [ dispatch, options ]);
 
     const shareDesktopKeyPress = useCallback(e => {
         if (e.key === ' ' || e.key === 'Enter') {
@@ -483,20 +551,4 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, _virtualBackground
     );
 }
 
-/**
- * Maps (parts of) the redux state to the associated props for the
- * {@code VirtualBackground} component.
- *
- * @param {Object} state - The Redux state.
- * @private
- * @returns {{Props}}
- */
-function _mapStateToProps(state): Object {
-    return {
-        _virtualBackground: state['features/virtual-background'],
-        _selectedThumbnail: state['features/virtual-background'].selectedThumbnail,
-        _jitsiTrack: getLocalVideoTrack(state['features/base/tracks'])?.jitsiTrack
-    };
-}
-
-export default translate(connect(_mapStateToProps)(VirtualBackground));
+export default VirtualBackgroundDialog;

react/features/virtual-background/components/VirtualBackgroundPreview.js

@@ -115,6 +115,10 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
         this.setState({
             jitsiTrack
         });
+
+        if (this.props.options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
+            this._applyBackgroundEffect();
+        }
     }
 
     /**