2021-02-18 15:52:47 +00:00
|
|
|
// @flow
|
|
|
|
/* eslint-disable react/jsx-no-bind, no-return-assign */
|
2021-03-24 16:32:45 +00:00
|
|
|
import Spinner from '@atlaskit/spinner';
|
|
|
|
import { jitsiLocalStorage } from '@jitsi/js-utils/jitsi-local-storage';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import uuid from 'uuid';
|
2021-02-18 15:52:47 +00:00
|
|
|
|
|
|
|
import { Dialog } from '../../base/dialog';
|
|
|
|
import { translate } from '../../base/i18n';
|
2021-03-24 16:32:45 +00:00
|
|
|
import { Icon, IconBlurBackground, IconCancelSelection } from '../../base/icons';
|
2021-02-18 15:52:47 +00:00
|
|
|
import { connect } from '../../base/redux';
|
|
|
|
import { Tooltip } from '../../base/tooltip';
|
|
|
|
import { toggleBackgroundEffect, setVirtualBackground } from '../actions';
|
2021-03-24 16:32:45 +00:00
|
|
|
import { resizeImage, toDataURL } from '../functions';
|
|
|
|
import logger from '../logger';
|
2021-02-18 15:52:47 +00:00
|
|
|
|
2021-03-24 16:32:45 +00:00
|
|
|
// The limit of virtual background uploads is 21. When the number
|
|
|
|
// of uploads is 22 we trigger the deleteStoredImage function to delete
|
|
|
|
// the first/oldest uploaded background.
|
|
|
|
const backgroundsLimit = 22;
|
2021-02-18 15:52:47 +00:00
|
|
|
const images = [
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
src: 'images/virtual-background/background-1.jpg'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
src: 'images/virtual-background/background-2.jpg'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
src: 'images/virtual-background/background-3.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) {
|
2021-03-24 16:32:45 +00:00
|
|
|
const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
|
|
|
|
const [ storedImages, setStoredImages ] = useState((localImages && JSON.parse(localImages)) || []);
|
|
|
|
const [ loading, isloading ] = useState(false);
|
|
|
|
|
|
|
|
const deleteStoredImage = image => {
|
|
|
|
setStoredImages(storedImages.filter(item => item !== image));
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Updates stored images on local storage.
|
|
|
|
*/
|
|
|
|
useEffect(() => {
|
|
|
|
jitsiLocalStorage.setItem('virtualBackgrounds', JSON.stringify(storedImages));
|
|
|
|
if (storedImages.length === backgroundsLimit) {
|
|
|
|
deleteStoredImage(storedImages[0]);
|
|
|
|
}
|
|
|
|
}, [ storedImages ]);
|
|
|
|
|
2021-02-18 15:52:47 +00:00
|
|
|
const [ selected, setSelected ] = useState('');
|
2021-03-24 16:32:45 +00:00
|
|
|
const enableBlur = async () => {
|
|
|
|
isloading(true);
|
2021-02-18 15:52:47 +00:00
|
|
|
setSelected('blur');
|
2021-03-24 16:32:45 +00:00
|
|
|
await dispatch(setVirtualBackground('', false));
|
|
|
|
await dispatch(toggleBackgroundEffect(true));
|
|
|
|
isloading(false);
|
2021-02-18 15:52:47 +00:00
|
|
|
};
|
|
|
|
|
2021-03-24 16:32:45 +00:00
|
|
|
const removeBackground = async () => {
|
|
|
|
isloading(true);
|
2021-02-18 15:52:47 +00:00
|
|
|
setSelected('none');
|
2021-03-24 16:32:45 +00:00
|
|
|
await dispatch(setVirtualBackground('', false));
|
|
|
|
await dispatch(toggleBackgroundEffect(false));
|
|
|
|
isloading(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
const setUploadedImageBackground = async image => {
|
|
|
|
isloading(true);
|
|
|
|
setSelected(image.id);
|
|
|
|
await dispatch(setVirtualBackground(image.src, true));
|
|
|
|
await dispatch(toggleBackgroundEffect(true));
|
|
|
|
isloading(false);
|
2021-02-18 15:52:47 +00:00
|
|
|
};
|
|
|
|
|
2021-03-24 16:32:45 +00:00
|
|
|
const setImageBackground = async image => {
|
|
|
|
isloading(true);
|
2021-02-18 15:52:47 +00:00
|
|
|
setSelected(image.id);
|
2021-03-24 16:32:45 +00:00
|
|
|
await dispatch(setVirtualBackground(await toDataURL(image.src), true));
|
|
|
|
await dispatch(toggleBackgroundEffect(true));
|
|
|
|
isloading(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
const uploadImage = async imageFile => {
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
|
|
|
reader.readAsDataURL(imageFile[0]);
|
|
|
|
reader.onload = async () => {
|
|
|
|
const resizedImage = await resizeImage(reader.result);
|
|
|
|
|
|
|
|
isloading(true);
|
|
|
|
setStoredImages([
|
|
|
|
...storedImages,
|
|
|
|
{
|
|
|
|
id: uuid.v4(),
|
|
|
|
src: resizedImage
|
|
|
|
}
|
|
|
|
]);
|
|
|
|
|
|
|
|
await dispatch(setVirtualBackground(resizedImage, true));
|
|
|
|
await dispatch(toggleBackgroundEffect(true));
|
|
|
|
isloading(false);
|
|
|
|
};
|
|
|
|
reader.onerror = () => {
|
|
|
|
isloading(false);
|
|
|
|
logger.error('Failed to upload virtual image!');
|
|
|
|
};
|
2021-02-18 15:52:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Dialog
|
|
|
|
hideCancelButton = { true }
|
|
|
|
submitDisabled = { false }
|
|
|
|
titleKey = { 'virtualBackground.title' }
|
|
|
|
width = 'small'>
|
2021-03-24 16:32:45 +00:00
|
|
|
{loading ? (
|
2021-03-25 12:52:53 +00:00
|
|
|
<div className = 'virtual-background-loading'>
|
2021-03-24 16:32:45 +00:00
|
|
|
<span className = 'loading-content-text'>{t('virtualBackground.pleaseWait')}</span>
|
|
|
|
<Spinner
|
|
|
|
isCompleting = { false }
|
|
|
|
size = 'medium' />
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<div className = 'virtual-background-dialog'>
|
|
|
|
<Tooltip
|
|
|
|
content = { t('virtualBackground.removeBackground') }
|
|
|
|
position = { 'top' }>
|
|
|
|
<div
|
|
|
|
className = { selected === 'none' ? 'none-selected' : 'virtual-background-none' }
|
|
|
|
onClick = { removeBackground }>
|
|
|
|
{t('virtualBackground.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) => (
|
|
|
|
<img
|
|
|
|
className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' }
|
|
|
|
key = { index }
|
|
|
|
onClick = { () => setImageBackground(image) }
|
|
|
|
onError = { event => event.target.style.display = 'none' }
|
|
|
|
src = { image.src } />
|
|
|
|
))}
|
|
|
|
<Tooltip
|
|
|
|
content = { t('virtualBackground.uploadImage') }
|
|
|
|
position = { 'top' }>
|
|
|
|
<label
|
|
|
|
className = 'custom-file-upload'
|
|
|
|
htmlFor = 'file-upload'>
|
|
|
|
+
|
|
|
|
</label>
|
|
|
|
<input
|
|
|
|
accept = 'image/*'
|
|
|
|
className = 'file-upload-btn'
|
|
|
|
id = 'file-upload'
|
|
|
|
onChange = { e => uploadImage(e.target.files) }
|
|
|
|
type = 'file' />
|
|
|
|
</Tooltip>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className = 'virtual-background-dialog'>
|
|
|
|
{storedImages.map((image, index) => (
|
|
|
|
<div
|
|
|
|
className = { 'thumbnail-container' }
|
|
|
|
key = { index }>
|
|
|
|
<img
|
|
|
|
className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' }
|
|
|
|
onClick = { () => setUploadedImageBackground(image) }
|
|
|
|
onError = { event => event.target.style.display = 'none' }
|
|
|
|
src = { image.src } />
|
|
|
|
<Icon
|
|
|
|
className = { 'delete-image-icon' }
|
|
|
|
onClick = { () => deleteStoredImage(image) }
|
|
|
|
size = { 15 }
|
|
|
|
src = { IconCancelSelection } />
|
|
|
|
</div>
|
|
|
|
))}
|
2021-02-18 15:52:47 +00:00
|
|
|
</div>
|
2021-03-24 16:32:45 +00:00
|
|
|
</div>
|
|
|
|
)}
|
2021-02-18 15:52:47 +00:00
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default translate(connect()(VirtualBackground));
|