haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(virtual-background) keep selected state on dialog

This commit is contained in:
Tudor D. Pop 2021-04-09 17:25:26 +03:00 committed by GitHub
parent bf3726cb93
commit 7ca04ccb0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/features/virtual-background/actionTypes.js
View File

@ -18,6 +18,8 @@ export const BACKGROUND_ENABLED = 'BACKGROUND_ENABLED';
* type: SET_VIRTUAL_BACKGROUND, * type: SET_VIRTUAL_BACKGROUND,
* virtualSource: string, * virtualSource: string,
* blurValue: number, * blurValue: number,
* backgroundType: string,
* selectedThumbnail: string
* }} * }}
*/ */
export const SET_VIRTUAL_BACKGROUND = 'SET_VIRTUAL_BACKGROUND'; export const SET_VIRTUAL_BACKGROUND = 'SET_VIRTUAL_BACKGROUND';

3
react/features/virtual-background/actions.js
View File

@ -50,7 +50,8 @@ export function setVirtualBackground(options: Object) {
type: SET_VIRTUAL_BACKGROUND, type: SET_VIRTUAL_BACKGROUND,
virtualSource: options?.url, virtualSource: options?.url,
blurValue: options?.blurValue, blurValue: options?.blurValue,
backgroundType: options?.backgroundType backgroundType: options?.backgroundType,
selectedThumbnail: options?.selectedThumbnail
}; };
} }

67
react/features/virtual-background/components/VirtualBackgroundDialog.js
View File

@ -20,24 +20,29 @@ import logger from '../logger';
const backgroundsLimit = 25; const backgroundsLimit = 25;
const images = [ const images = [
{ {
id: 1, id: '1',
src: 'images/virtual-background/background-1.jpg' src: 'images/virtual-background/background-1.jpg'
}, },
{ {
id: 2, id: '2',
src: 'images/virtual-background/background-2.jpg' src: 'images/virtual-background/background-2.jpg'
}, },
{ {
id: 3, id: '3',
src: 'images/virtual-background/background-3.jpg' src: 'images/virtual-background/background-3.jpg'
}, },
{ {
id: 4, id: '4',
src: 'images/virtual-background/background-4.jpg' src: 'images/virtual-background/background-4.jpg'
} }
]; ];
type Props = { type Props = {
/**
* Returns the selected thumbnail identifier.
*/
_selectedThumbnail: string,
/** /**
* The redux {@code dispatch} function. * The redux {@code dispatch} function.
*/ */
@ -54,7 +59,7 @@ type Props = {
* *
* @returns {ReactElement} * @returns {ReactElement}
*/ */
function VirtualBackground({ dispatch, t }: Props) { function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) {
const localImages = jitsiLocalStorage.getItem('virtualBackgrounds'); const localImages = jitsiLocalStorage.getItem('virtualBackgrounds');
const [ storedImages, setStoredImages ] = useState((localImages && JSON.parse(localImages)) || []); const [ storedImages, setStoredImages ] = useState((localImages && JSON.parse(localImages)) || []);
const [ loading, isloading ] = useState(false); const [ loading, isloading ] = useState(false);
@ -78,15 +83,14 @@ function VirtualBackground({ dispatch, t }: Props) {
} }
}, [ storedImages ]); }, [ storedImages ]);
const [ selected, setSelected ] = useState('');
const enableBlur = async (blurValue, selection) => { const enableBlur = async (blurValue, selection) => {
isloading(true); isloading(true);
setSelected(selection);
await dispatch( await dispatch(
toggleBackgroundEffect({ toggleBackgroundEffect({
backgroundType: 'blur', backgroundType: 'blur',
enabled: true, enabled: true,
blurValue blurValue,
selectedThumbnail: selection
}) })
); );
isloading(false); isloading(false);
@ -94,10 +98,10 @@ function VirtualBackground({ dispatch, t }: Props) {
const removeBackground = async () => { const removeBackground = async () => {
isloading(true); isloading(true);
setSelected('none');
await dispatch( await dispatch(
toggleBackgroundEffect({ toggleBackgroundEffect({
enabled: false enabled: false,
selectedThumbnail: 'none'
}) })
); );
isloading(false); isloading(false);
@ -105,12 +109,12 @@ function VirtualBackground({ dispatch, t }: Props) {
const setUploadedImageBackground = async image => { const setUploadedImageBackground = async image => {
isloading(true); isloading(true);
setSelected(image.id);
await dispatch( await dispatch(
toggleBackgroundEffect({ toggleBackgroundEffect({
backgroundType: 'image', backgroundType: 'image',
enabled: true, enabled: true,
url: image.src url: image.src,
selectedThumbnail: image.id
}) })
); );
isloading(false); isloading(false);
@ -118,14 +122,14 @@ function VirtualBackground({ dispatch, t }: Props) {
const setImageBackground = async image => { const setImageBackground = async image => {
isloading(true); isloading(true);
setSelected(image.id);
const url = await toDataURL(image.src); const url = await toDataURL(image.src);
await dispatch( await dispatch(
toggleBackgroundEffect({ toggleBackgroundEffect({
backgroundType: 'image', backgroundType: 'image',
enabled: true, enabled: true,
url url,
selectedThumbnail: image.id
}) })
); );
isloading(false); isloading(false);
@ -137,12 +141,13 @@ function VirtualBackground({ dispatch, t }: Props) {
reader.readAsDataURL(imageFile[0]); reader.readAsDataURL(imageFile[0]);
reader.onload = async () => { reader.onload = async () => {
const url = await resizeImage(reader.result); const url = await resizeImage(reader.result);
const uuId = uuid.v4();
isloading(true); isloading(true);
setStoredImages([ setStoredImages([
...storedImages, ...storedImages,
{ {
id: uuid.v4(), id: uuId,
src: url src: url
} }
]); ]);
@ -150,7 +155,8 @@ function VirtualBackground({ dispatch, t }: Props) {
toggleBackgroundEffect({ toggleBackgroundEffect({
backgroundType: 'image', backgroundType: 'image',
enabled: true, enabled: true,
url url,
selectedThumbnail: uuId
}) })
); );
isloading(false); isloading(false);
@ -181,7 +187,8 @@ function VirtualBackground({ dispatch, t }: Props) {
content = { t('virtualBackground.removeBackground') } content = { t('virtualBackground.removeBackground') }
position = { 'top' }> position = { 'top' }>
<div <div
className = { selected === 'none' ? 'none-selected' : 'virtual-background-none' } className = { _selectedThumbnail === 'none'
? 'none-selected' : 'virtual-background-none' }
onClick = { removeBackground }> onClick = { removeBackground }>
{t('virtualBackground.none')} {t('virtualBackground.none')}
</div> </div>
@ -190,7 +197,7 @@ function VirtualBackground({ dispatch, t }: Props) {
content = { t('virtualBackground.slightBlur') } content = { t('virtualBackground.slightBlur') }
position = { 'top' }> position = { 'top' }>
<Icon <Icon
className = { selected === 'slight-blur' ? 'blur-selected' : '' } className = { _selectedThumbnail === 'slight-blur' ? 'blur-selected' : '' }
onClick = { () => enableBlur(8, 'slight-blur') } onClick = { () => enableBlur(8, 'slight-blur') }
size = { 50 } size = { 50 }
src = { IconBlurBackground } /> src = { IconBlurBackground } />
@ -199,14 +206,14 @@ function VirtualBackground({ dispatch, t }: Props) {
content = { t('virtualBackground.blur') } content = { t('virtualBackground.blur') }
position = { 'top' }> position = { 'top' }>
<Icon <Icon
className = { selected === 'blur' ? 'blur-selected' : '' } className = { _selectedThumbnail === 'blur' ? 'blur-selected' : '' }
onClick = { () => enableBlur(25, 'blur') } onClick = { () => enableBlur(25, 'blur') }
size = { 50 } size = { 50 }
src = { IconBlurBackground } /> src = { IconBlurBackground } />
</Tooltip> </Tooltip>
{images.map((image, index) => ( {images.map((image, index) => (
<img <img
className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' } className = { _selectedThumbnail === image.id ? 'thumbnail-selected' : 'thumbnail' }
key = { index } key = { index }
onClick = { () => setImageBackground(image) } onClick = { () => setImageBackground(image) }
onError = { event => event.target.style.display = 'none' } onError = { event => event.target.style.display = 'none' }
@ -235,7 +242,7 @@ function VirtualBackground({ dispatch, t }: Props) {
className = { 'thumbnail-container' } className = { 'thumbnail-container' }
key = { index }> key = { index }>
<img <img
className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' } className = { _selectedThumbnail === image.id ? 'thumbnail-selected' : 'thumbnail' }
onClick = { () => setUploadedImageBackground(image) } onClick = { () => setUploadedImageBackground(image) }
onError = { event => event.target.style.display = 'none' } onError = { event => event.target.style.display = 'none' }
src = { image.src } /> src = { image.src } />
@ -253,4 +260,20 @@ function VirtualBackground({ dispatch, t }: Props) {
); );
} }
export default translate(connect()(VirtualBackground)); /**
* Maps (parts of) the redux state to the associated props for the
* {@code VirtualBackground} component.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _selectedThumbnail: string
* }}
*/
function _mapStateToProps(state): Object {
return {
_selectedThumbnail: state['features/virtual-background'].selectedThumbnail
};
}
export default translate(connect(_mapStateToProps)(VirtualBackground));

5
react/features/virtual-background/reducer.js
View File

@ -23,7 +23,7 @@ PersistenceRegistry.register(STORE_NAME, true);
* specified action. * specified action.
*/ */
ReducerRegistry.register(STORE_NAME, (state = {}, action) => { ReducerRegistry.register(STORE_NAME, (state = {}, action) => {
const { virtualSource, backgroundEffectEnabled, blurValue, backgroundType } = action; const { virtualSource, backgroundEffectEnabled, blurValue, backgroundType, selectedThumbnail } = action;
switch (action.type) { switch (action.type) {
case SET_VIRTUAL_BACKGROUND: { case SET_VIRTUAL_BACKGROUND: {
@ -31,7 +31,8 @@ ReducerRegistry.register(STORE_NAME, (state = {}, action) => {
...state, ...state,
virtualSource, virtualSource,
blurValue, blurValue,
backgroundType backgroundType,
selectedThumbnail
}; };
} }
case BACKGROUND_ENABLED: { case BACKGROUND_ENABLED: {