diff --git a/react/features/virtual-background/components/VirtualBackgroundDialog.js b/react/features/virtual-background/components/VirtualBackgroundDialog.js index 00b598526e..f6d59691a3 100644 --- a/react/features/virtual-background/components/VirtualBackgroundDialog.js +++ b/react/features/virtual-background/components/VirtualBackgroundDialog.js @@ -63,6 +63,11 @@ type Props = { */ _selectedThumbnail: string, + /** + * Returns the selected virtual source object. + */ + _virtualSource: Object, + /** * The redux {@code dispatch} function. */ @@ -79,11 +84,12 @@ type Props = { * * @returns {ReactElement} */ -function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Props) { +function VirtualBackground({ _jitsiTrack, _selectedThumbnail, _virtualSource, dispatch, t }: Props) { const [ options, setOptions ] = useState({}); const localImages = jitsiLocalStorage.getItem('virtualBackgrounds'); const [ storedImages, setStoredImages ] = useState((localImages && JSON.parse(localImages)) || []); const [ loading, isloading ] = useState(false); + const [ activeDesktopVideo ] = useState(_virtualSource?.videoType === 'desktop' ? _virtualSource : null); const deleteStoredImage = image => { setStoredImages(storedImages.filter(item => item !== image)); @@ -180,6 +186,9 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Pro }; const applyVirtualBackground = async () => { + if (activeDesktopVideo) { + await activeDesktopVideo.dispose(); + } isloading(true); await dispatch(toggleBackgroundEffect(options, _jitsiTrack)); await isloading(false); @@ -289,6 +298,7 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Pro */ function _mapStateToProps(state): Object { return { + _virtualSource: state['features/virtual-background'].virtualSource, _selectedThumbnail: state['features/virtual-background'].selectedThumbnail, _jitsiTrack: getLocalVideoTrack(state['features/base/tracks'])?.jitsiTrack }; diff --git a/react/features/virtual-background/components/VirtualBackgroundPreview.js b/react/features/virtual-background/components/VirtualBackgroundPreview.js index 79dfc61a9d..b188efce09 100644 --- a/react/features/virtual-background/components/VirtualBackgroundPreview.js +++ b/react/features/virtual-background/components/VirtualBackgroundPreview.js @@ -9,8 +9,9 @@ import { connect, equals } from '../../base/redux'; import { getCurrentCameraDeviceId } from '../../base/settings'; import { createLocalTracksF } from '../../base/tracks/functions'; import { toggleBackgroundEffect } from '../actions'; +import { localTrackStopped } from '../functions'; -const videoClassName = 'virtual-background-preview-video flipVideoX'; +const videoClassName = 'video-preview-video'; /** * The type of the React {@code PureComponent} props of {@link VirtualBackgroundPreview}. @@ -206,8 +207,14 @@ class VirtualBackgroundPreview extends PureComponent { this._setTracks(); } if (!equals(this.props.options, prevProps.options)) { + if (prevProps.options.backgroundType === 'desktop-share') { + prevProps.options.url.dispose(); + } this._applyBackgroundEffect(); } + if (this.props.options.url?.videoType === 'desktop') { + localTrackStopped(this.props.dispatch, this.props.options.url, this.state.jitsiTrack); + } } /** diff --git a/react/features/virtual-background/functions.js b/react/features/virtual-background/functions.js index f3c823bd81..3d0b38749e 100644 --- a/react/features/virtual-background/functions.js +++ b/react/features/virtual-background/functions.js @@ -1,4 +1,8 @@ // @flow + +import { JitsiTrackEvents } from '../base/lib-jitsi-meet'; + +import { toggleBackgroundEffect } from './actions'; let filterSupport; /** @@ -85,3 +89,26 @@ export function resizeImage(base64image: any, width: number = 1920, height: numb img.src = base64image; }); } + +/** + * Check if the local desktop track was stopped and apply none option on virtual background. + * + * @param {Function} dispatch - The Redux dispatch function. + * @param {Object} desktopTrack - The desktop track that needs to be checked if it was stopped. + * @param {Object} currentLocalTrack - The current local track where we apply none virtual + * background option if the desktop track was stopped. + * @returns {Promise} + */ +export function localTrackStopped(dispatch: Function, desktopTrack: Object, currentLocalTrack: Object) { + const noneOptions = { + enabled: false, + backgroundType: 'none', + selectedThumbnail: 'none', + backgroundEffectEnabled: false + }; + + desktopTrack + && desktopTrack.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, () => { + dispatch(toggleBackgroundEffect(noneOptions, currentLocalTrack)); + }); +} diff --git a/react/features/virtual-background/middleware.js b/react/features/virtual-background/middleware.js index 4a587c9c4e..9790273a71 100644 --- a/react/features/virtual-background/middleware.js +++ b/react/features/virtual-background/middleware.js @@ -1,10 +1,9 @@ // @flow -import { JitsiTrackEvents } from '../base/lib-jitsi-meet'; import { MiddlewareRegistry } from '../base/redux'; import { getLocalVideoTrack } from '../base/tracks'; -import { toggleBackgroundEffect } from './actions'; +import { localTrackStopped } from './functions'; /** * Middleware which intercepts the desktop video type on @@ -20,17 +19,7 @@ MiddlewareRegistry.register(store => next => action => { const currentLocalTrack = getLocalVideoTrack(getState()['features/base/tracks']); if (virtualSource?.videoType === 'desktop') { - const noneOptions = { - enabled: false, - backgroundType: 'none', - selectedThumbnail: 'none', - backgroundEffectEnabled: false - }; - - virtualSource - && virtualSource.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, () => { - dispatch(toggleBackgroundEffect(noneOptions, currentLocalTrack.jitsiTrack)); - }); + localTrackStopped(dispatch, virtualSource, currentLocalTrack.jitsiTrack); } return next(action);