feat(virtual-background): Desktop share as virtual background

css/modals/virtual-background/_virtual-background.scss

@@ -220,12 +220,18 @@
  }
 
  .video-background-preview-entry{
-    margin-left:5px;
+    margin-left: -10px;
     height: 250px;
-    width: 94%;
+    max-width: 95.4%;
     margin-bottom: 8px;
     position: absolute;
     z-index: 2;
+    @media (min-width: 432px) and (max-width: 632px) {
+        max-width: 336;
+    }
+    @media (max-width: 432px){
+        max-width: 336;
+    }
  }
 
  .virtual-background-preview-video{

react/features/toolbox/components/web/Toolbox.js

@@ -74,6 +74,7 @@ import {
     VideoQualityDialog
 } from '../../../video-quality';
 import { VideoBackgroundButton } from '../../../virtual-background';
+import { toggleBackgroundEffect } from '../../../virtual-background/actions';
 import { checkBlurSupport } from '../../../virtual-background/functions';
 import {
     setFullScreen,
@@ -183,6 +184,11 @@ type Props = {
      */
     _locked: boolean,
 
+    /**
+     * The JitsiLocalTrack to display.
+     */
+    _localVideo: Object,
+
     /**
      * Whether or not the overflow menu is visible.
      */
@@ -223,6 +229,11 @@ type Props = {
      */
      _shouldShowButton: Function,
 
+    /**
+     * Returns the selected virtual source object.
+     */
+     _virtualSource: Object,
+
     /**
      * Invoked to active other features of the app.
      */
@@ -896,7 +907,21 @@ class Toolbox extends Component<Props> {
      * @returns {void}
      */
     _onToolbarToggleScreenshare() {
-        if (!this.props._desktopSharingEnabled || this.props._backgroundType === 'desktop-share') {
+        if (this.props._backgroundType === 'desktop-share') {
+            const noneOptions = {
+                enabled: false,
+                backgroundType: 'none',
+                selectedThumbnail: 'none',
+                backgroundEffectEnabled: false
+            };
+
+            this.props._virtualSource.dispose();
+
+            this.props.dispatch(toggleBackgroundEffect(noneOptions, this.props._localVideo));
+
+            return;
+        }
+        if (!this.props._desktopSharingEnabled) {
             return;
         }
 
@@ -1377,6 +1402,7 @@ function _mapStateToProps(state) {
         _conference: conference,
         _desktopSharingEnabled: desktopSharingEnabled,
         _backgroundType: state['features/virtual-background'].backgroundType,
+        _virtualSource: state['features/virtual-background'].virtualSource,
         _desktopSharingDisabledTooltipKey: desktopSharingDisabledTooltipKey,
         _dialog: Boolean(state['features/base/dialog'].component),
         _feedbackConfigured: Boolean(callStatsID),
@@ -1386,6 +1412,7 @@ function _mapStateToProps(state) {
         _fullScreen: fullScreen,
         _tileViewEnabled: shouldDisplayTileView(state),
         _localParticipantID: localParticipant.id,
+        _localVideo: localVideo,
         _localRecState: localRecordingStates,
         _locked: locked,
         _overflowMenuVisible: overflowMenuVisible,