ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 11:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(virtual-backgroud) Remove desktop share as virtual background.

Browse Source 
Its no longer supported in multi-stream mode.
This commit is contained in:
Jaya Allamsetty
2022-10-07 16:51:43 -04:00
parent 2029db5a59
commit 3f78de2d34
9 changed files with 10 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
react/features/virtual-background/components/VirtualBackgroundDialog.tsx
View File

@@ -7,21 +7,17 @@ import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
import { Theme } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react';
import { WithTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../app/types';
// @ts-ignore
import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config';
// @ts-ignore
import { Dialog, hideDialog, openDialog } from '../../base/dialog';
import { Dialog, hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n/functions';
import Icon from '../../base/icons/components/Icon';
import { IconCloseSmall, IconShareDesktop } from '../../base/icons/svg';
import { JitsiTrackErrors, browser } from '../../base/lib-jitsi-meet';
import { IconCloseSmall } from '../../base/icons/svg';
// @ts-ignore
import { createLocalTrack } from '../../base/lib-jitsi-meet/functions';
import { VIDEO_TYPE } from '../../base/media/constants';
import { connect } from '../../base/redux/functions';
// @ts-ignore
import { updateSettings } from '../../base/settings';
@@ -30,9 +26,6 @@ import { Tooltip } from '../../base/tooltip';
// @ts-ignore
import { getLocalVideoTrack } from '../../base/tracks';
// @ts-ignore
import { showErrorNotification } from '../../notifications';
import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
// @ts-ignore
import { toggleBackgroundEffect, virtualBackgroundTrackChanged } from '../actions';
import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants';
// @ts-ignore
@@ -290,7 +283,6 @@ function VirtualBackground({
_selectedThumbnail,
_showUploadButton,
_virtualBackground,
_multiStreamModeEnabled,
dispatch,
initialOptions,
t
@@ -301,14 +293,6 @@ function VirtualBackground({
const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
const [ storedImages, setStoredImages ] = useState<Array<Image>>((localImages && Bourne.parse(localImages)) || []);
const [ loading, setLoading ] = useState(false);
let { disableScreensharingVirtualBackground } = useSelector((state: IState) => state['features/base/config']);
// Disable screenshare as virtual background in multi-stream mode.
disableScreensharingVirtualBackground = disableScreensharingVirtualBackground || _multiStreamModeEnabled;
const [ activeDesktopVideo ] = useState(_virtualBackground?.virtualSource?.videoType === VIDEO_TYPE.DESKTOP
? _virtualBackground.virtualSource
: null);
const [ initialVirtualBackground ] = useState(_virtualBackground);
const deleteStoredImage = useCallback(e => {
const imageId = e.currentTarget.getAttribute('data-imageid');
@@ -374,71 +358,6 @@ function VirtualBackground({
}
}, [ enableSlideBlur ]);
const shareDesktop = useCallback(async () => {
if (disableScreensharingVirtualBackground) {
return;
}
let isCancelled = false, url;
try {
url = await createLocalTrack('desktop', '');
} catch (e: any) {
if (e.name === JitsiTrackErrors.SCREENSHARING_USER_CANCELED) {
isCancelled = true;
} else {
logger.error(e);
}
}
if (!url) {
if (!isCancelled) {
dispatch(showErrorNotification({
titleKey: 'virtualBackground.desktopShareError'
}, NOTIFICATION_TIMEOUT_TYPE.LONG));
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;
}
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);
logger.info('"Desktop-share" option set for virtual background preview!');
}
}, [ dispatch, options ]);
const shareDesktopKeyPress = useCallback(e => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
shareDesktop();
}
}, [ shareDesktop ]);
const removeBackground = useCallback(async () => {
setOptions({
enabled: false,
@@ -508,23 +427,15 @@ function VirtualBackground({
}, [ setUploadedImageBackground ]);
const applyVirtualBackground = useCallback(async () => {
if (activeDesktopVideo) {
await activeDesktopVideo.dispose();
}
setLoading(true);
await dispatch(toggleBackgroundEffect(options, _jitsiTrack));
await setLoading(false);
if (_localFlipX && options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
dispatch(updateSettings({
localFlipX: !_localFlipX
}));
} else {
// Set x scale to default value.
dispatch(updateSettings({
localFlipX: true
}));
}
// Set x scale to default value.
dispatch(updateSettings({
localFlipX: true
}));
dispatch(hideDialog());
logger.info(`Virtual background type: '${typeof options.backgroundType === 'undefined'
? 'none' : options.backgroundType}' applied!`);
@@ -626,27 +537,6 @@ function VirtualBackground({
{t('virtualBackground.blur')}
</div>
</Tooltip>
{!disableScreensharingVirtualBackground && (
<Tooltip
content = { t('virtualBackground.desktopShare') }
position = { 'top' }>
<div
aria-checked = { _selectedThumbnail === 'desktop-share' }
aria-label = { t('virtualBackground.desktopShare') }
className = { cx('background-option', 'desktop-share', {
'desktop-share-selected': _selectedThumbnail === 'desktop-share'
}) }
onClick = { shareDesktop }
onKeyPress = { shareDesktopKeyPress }
role = 'radio'
tabIndex = { 0 }>
<Icon
className = 'share-desktop-icon'
size = { 30 }
src = { IconShareDesktop } />
</div>
</Tooltip>
)}
{_images.map(image => (
<Tooltip
content = { image.tooltip && t(`virtualBackground.${image.tooltip}`) }

15
react/features/virtual-background/components/VirtualBackgroundPreview.tsx
View File

@@ -12,7 +12,6 @@ import { hideDialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
// @ts-ignore
import Video from '../../base/media/components/Video';
import { VIDEO_TYPE } from '../../base/media/constants';
import { connect, equals } from '../../base/redux/functions';
// @ts-ignore
import { getCurrentCameraDeviceId } from '../../base/settings';
@@ -23,9 +22,6 @@ import { showWarningNotification } from '../../notifications/actions';
import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
// @ts-ignore
import { toggleBackgroundEffect } from '../actions';
import { VIRTUAL_BACKGROUND_TYPE } from '../constants';
// @ts-ignore
import { localTrackStopped } from '../functions';
// @ts-ignore
import logger from '../logger';
@@ -208,11 +204,6 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
return;
}
if (this.props.options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE
&& this.state.localTrackLoaded) {
this._applyBackgroundEffect();
}
}
/**
@@ -310,14 +301,8 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
this._setTracks();
}
if (!equals(this.props.options, prevProps.options) && this.state.localTrackLoaded) {
if (prevProps.options.backgroundType === VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE) {
prevProps.options.url.dispose();
}
this._applyBackgroundEffect();
}
if (this.props.options.url?.videoType === VIDEO_TYPE.DESKTOP) {
localTrackStopped(this.props.dispatch, this.props.options.url, this.state.jitsiTrack);
}
}
/**

1
react/features/virtual-background/constants.ts
View File

@@ -5,7 +5,6 @@
*/
export const VIRTUAL_BACKGROUND_TYPE = {
IMAGE: 'image',
DESKTOP_SHARE: 'desktop-share',
BLUR: 'blur',
NONE: 'none'
};

31
react/features/virtual-background/functions.ts
View File

@@ -1,7 +1,3 @@
import { JitsiTrackEvents } from '../base/lib-jitsi-meet';
import { updateSettings } from '../base/settings/actions';
import { toggleBackgroundEffect } from './actions';
let filterSupport: boolean | undefined;
/**
@@ -89,33 +85,6 @@ export function resizeImage(base64image: any, width = 1920, height = 1080): Prom
});
}
/**
* 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: any, currentLocalTrack: Object | null) {
const noneOptions = {
enabled: false,
backgroundType: 'none',
selectedThumbnail: 'none',
backgroundEffectEnabled: false
};
desktopTrack?.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, () => {
dispatch(toggleBackgroundEffect(noneOptions, currentLocalTrack));
// Set x scale to default value.
dispatch(updateSettings({
localFlipX: true
}));
});
}
/**
* Creating a wrapper for promises on a specific time interval.
*

26
react/features/virtual-background/middleware.ts
View File

@@ -1,26 +0,0 @@
import { VIDEO_TYPE } from '../base/media/constants';
import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
import { getLocalVideoTrack } from '../base/tracks/functions';
import { SET_VIRTUAL_BACKGROUND } from './actionTypes';
import { localTrackStopped } from './functions';
/**
* Middleware which intercepts the desktop video type on
* virtual background. If the user stops the screen share
* then the default virtual background is set to 'none' option.
*
* @param {Store} store - The redux store.
* @returns {Function}
*/
MiddlewareRegistry.register(store => next => action => {
const { dispatch, getState } = store;
const virtualSource = getState()['features/virtual-background'].virtualSource;
const currentLocalTrack = getLocalVideoTrack(getState()['features/base/tracks']);
if (virtualSource?.videoType === VIDEO_TYPE.DESKTOP && action.type === SET_VIRTUAL_BACKGROUND) {
localTrackStopped(dispatch, virtualSource, currentLocalTrack?.jitsiTrack);
}
return next(action);
});

3
react/features/virtual-background/reducer.ts
View File

@@ -2,7 +2,6 @@ import PersistenceRegistry from '../base/redux/PersistenceRegistry';
import ReducerRegistry from '../base/redux/ReducerRegistry';
import { BACKGROUND_ENABLED, SET_VIRTUAL_BACKGROUND } from './actionTypes';
import { VIRTUAL_BACKGROUND_TYPE } from './constants';
const STORE_NAME = 'features/virtual-background';
@@ -31,7 +30,7 @@ ReducerRegistry.register<IVirtualBackground>(STORE_NAME, (state = {}, action): I
/**
* Sets up the persistence of the feature {@code virtual-background}.
*/
PersistenceRegistry.register(STORE_NAME, state.backgroundType !== VIRTUAL_BACKGROUND_TYPE.DESKTOP_SHARE);
PersistenceRegistry.register(STORE_NAME);
switch (action.type) {
case SET_VIRTUAL_BACKGROUND: {