feat(virtual-bg) Added config to disable screen sharing as virtual bg

This commit is contained in:
robertpin 2021-10-28 10:17:46 +03:00 committed by vp8x8
parent 6845a759a0
commit 69d2cb52fe
3 changed files with 31 additions and 19 deletions

View File

@ -921,6 +921,9 @@ var config = {
// Only the default ones from will be available. // Only the default ones from will be available.
// disableAddingBackgroundImages: false, // disableAddingBackgroundImages: false,
// Disables using screensharing as virtual background.
// disableScreensharingVirtualBackground: false,
// Sets the background transparency level. '0' is fully transparent, '1' is opaque. // Sets the background transparency level. '0' is fully transparent, '1' is opaque.
// backgroundAlpha: 1, // backgroundAlpha: 1,

View File

@ -109,6 +109,7 @@ export default [
'disableRemoteMute', 'disableRemoteMute',
'disableResponsiveTiles', 'disableResponsiveTiles',
'disableRtx', 'disableRtx',
'disableScreensharingVirtualBackground',
'disableShortcuts', 'disableShortcuts',
'disableShowMoreStats', 'disableShowMoreStats',
'disableRemoveRaisedHandOnFocus', 'disableRemoveRaisedHandOnFocus',

View File

@ -4,6 +4,7 @@ import Spinner from '@atlaskit/spinner';
import Bourne from '@hapi/bourne'; import Bourne from '@hapi/bourne';
import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage'; import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { useSelector } from 'react-redux';
import { Dialog, hideDialog, openDialog } from '../../base/dialog'; import { Dialog, hideDialog, openDialog } from '../../base/dialog';
import { translate } from '../../base/i18n'; import { translate } from '../../base/i18n';
@ -126,6 +127,7 @@ function VirtualBackground({
const localImages = jitsiLocalStorage.getItem('virtualBackgrounds'); const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
const [ storedImages, setStoredImages ] = useState<Array<Image>>((localImages && Bourne.parse(localImages)) || []); const [ storedImages, setStoredImages ] = useState<Array<Image>>((localImages && Bourne.parse(localImages)) || []);
const [ loading, setLoading ] = useState(false); const [ loading, setLoading ] = useState(false);
const { disableScreensharingVirtualBackground } = useSelector(state => state['features/base/config']);
const [ activeDesktopVideo ] = useState(_virtualBackground?.virtualSource?.videoType === VIDEO_TYPE.DESKTOP const [ activeDesktopVideo ] = useState(_virtualBackground?.virtualSource?.videoType === VIDEO_TYPE.DESKTOP
? _virtualBackground.virtualSource ? _virtualBackground.virtualSource
@ -197,6 +199,10 @@ function VirtualBackground({
const shareDesktop = useCallback(async () => { const shareDesktop = useCallback(async () => {
if (disableScreensharingVirtualBackground) {
return;
}
let isCancelled = false, url; let isCancelled = false, url;
try { try {
@ -438,25 +444,27 @@ function VirtualBackground({
{t('virtualBackground.blur')} {t('virtualBackground.blur')}
</div> </div>
</Tooltip> </Tooltip>
<Tooltip {!disableScreensharingVirtualBackground && (
content = { t('virtualBackground.desktopShare') } <Tooltip
position = { 'top' }> content = { t('virtualBackground.desktopShare') }
<div position = { 'top' }>
aria-checked = { _selectedThumbnail === 'desktop-share' } <div
aria-label = { t('virtualBackground.desktopShare') } aria-checked = { _selectedThumbnail === 'desktop-share' }
className = { _selectedThumbnail === 'desktop-share' aria-label = { t('virtualBackground.desktopShare') }
? 'background-option desktop-share-selected' className = { _selectedThumbnail === 'desktop-share'
: 'background-option desktop-share' } ? 'background-option desktop-share-selected'
onClick = { shareDesktop } : 'background-option desktop-share' }
onKeyPress = { shareDesktopKeyPress } onClick = { shareDesktop }
role = 'radio' onKeyPress = { shareDesktopKeyPress }
tabIndex = { 0 }> role = 'radio'
<Icon tabIndex = { 0 }>
className = 'share-desktop-icon' <Icon
size = { 30 } className = 'share-desktop-icon'
src = { IconShareDesktop } /> size = { 30 }
</div> src = { IconShareDesktop } />
</Tooltip> </div>
</Tooltip>
)}
{_images.map(image => ( {_images.map(image => (
<Tooltip <Tooltip
content = { image.tooltip && t(`virtualBackground.${image.tooltip}`) } content = { image.tooltip && t(`virtualBackground.${image.tooltip}`) }