119 lines
3.6 KiB
JavaScript
119 lines
3.6 KiB
JavaScript
// @flow
|
|
/* eslint-disable react/jsx-no-bind, no-return-assign */
|
|
import React, { useState } from 'react';
|
|
|
|
import { Dialog } from '../../base/dialog';
|
|
import { translate } from '../../base/i18n';
|
|
import { Icon, IconBlurBackground } from '../../base/icons';
|
|
import { connect } from '../../base/redux';
|
|
import { Tooltip } from '../../base/tooltip';
|
|
import { toggleBackgroundEffect, setVirtualBackground } from '../actions';
|
|
|
|
const images = [
|
|
{
|
|
tooltip: 'Image 1',
|
|
name: 'background-1.jpg',
|
|
id: 1,
|
|
src: 'images/virtual-background/background-1.jpg'
|
|
},
|
|
{
|
|
tooltip: 'Image 2',
|
|
name: 'background-2.jpg',
|
|
id: 2,
|
|
src: 'images/virtual-background/background-2.jpg'
|
|
},
|
|
{
|
|
tooltip: 'Image 3',
|
|
name: 'background-3.jpg',
|
|
id: 3,
|
|
src: 'images/virtual-background/background-3.jpg'
|
|
},
|
|
{
|
|
tooltip: 'Image 4',
|
|
name: 'background-4.jpg',
|
|
id: 4,
|
|
src: 'images/virtual-background/background-4.jpg'
|
|
}
|
|
];
|
|
type Props = {
|
|
|
|
/**
|
|
* The redux {@code dispatch} function.
|
|
*/
|
|
dispatch: Function,
|
|
|
|
/**
|
|
* Invoked to obtain translated strings.
|
|
*/
|
|
t: Function
|
|
};
|
|
|
|
/**
|
|
* Renders virtual background dialog.
|
|
*
|
|
* @returns {ReactElement}
|
|
*/
|
|
function VirtualBackground({ dispatch, t }: Props) {
|
|
const [ selected, setSelected ] = useState('');
|
|
const enableBlur = () => {
|
|
setSelected('blur');
|
|
dispatch(setVirtualBackground('', false));
|
|
dispatch(toggleBackgroundEffect(true));
|
|
};
|
|
|
|
const removeBackground = () => {
|
|
setSelected('none');
|
|
dispatch(setVirtualBackground('', false));
|
|
dispatch(toggleBackgroundEffect(false));
|
|
};
|
|
|
|
const addImageBackground = image => {
|
|
setSelected(image.id);
|
|
dispatch(setVirtualBackground(image.src, true));
|
|
dispatch(toggleBackgroundEffect(true));
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
hideCancelButton = { true }
|
|
submitDisabled = { false }
|
|
titleKey = { 'virtualBackground.title' }
|
|
width = 'small'>
|
|
<div className = 'virtual-background-dialog'>
|
|
<Tooltip
|
|
content = { t('virtualBackground.removeBackground') }
|
|
position = { 'top' }>
|
|
<div
|
|
className = { selected === 'none' ? 'none-selected' : 'virtual-background-none' }
|
|
onClick = { () => removeBackground() }>
|
|
None
|
|
</div>
|
|
</Tooltip>
|
|
<Tooltip
|
|
content = { t('virtualBackground.enableBlur') }
|
|
position = { 'top' }>
|
|
<Icon
|
|
className = { selected === 'blur' ? 'blur-selected' : '' }
|
|
onClick = { () => enableBlur() }
|
|
size = { 50 }
|
|
src = { IconBlurBackground } />
|
|
</Tooltip>
|
|
{images.map((image, index) => (
|
|
<Tooltip
|
|
content = { image.tooltip }
|
|
key = { index }
|
|
position = { 'top' }>
|
|
<img
|
|
className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' }
|
|
onClick = { () => addImageBackground(image) }
|
|
onError = { event => event.target.style.display = 'none' }
|
|
src = { image.src } />
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export default translate(connect()(VirtualBackground));
|