From 7ca04ccb0feb1f256def0ec8ed191b4427f4b0ca Mon Sep 17 00:00:00 2001 From: "Tudor D. Pop" Date: Fri, 9 Apr 2021 17:25:26 +0300 Subject: [PATCH] fix(virtual-background) keep selected state on dialog --- .../virtual-background/actionTypes.js | 2 + react/features/virtual-background/actions.js | 3 +- .../components/VirtualBackgroundDialog.js | 67 +++++++++++++------ react/features/virtual-background/reducer.js | 5 +- 4 files changed, 52 insertions(+), 25 deletions(-) diff --git a/react/features/virtual-background/actionTypes.js b/react/features/virtual-background/actionTypes.js index 671d31100..1b0ff1d1f 100644 --- a/react/features/virtual-background/actionTypes.js +++ b/react/features/virtual-background/actionTypes.js @@ -18,6 +18,8 @@ export const BACKGROUND_ENABLED = 'BACKGROUND_ENABLED'; * type: SET_VIRTUAL_BACKGROUND, * virtualSource: string, * blurValue: number, + * backgroundType: string, + * selectedThumbnail: string * }} */ export const SET_VIRTUAL_BACKGROUND = 'SET_VIRTUAL_BACKGROUND'; diff --git a/react/features/virtual-background/actions.js b/react/features/virtual-background/actions.js index 7f127bcd3..0b6ff866c 100644 --- a/react/features/virtual-background/actions.js +++ b/react/features/virtual-background/actions.js @@ -50,7 +50,8 @@ export function setVirtualBackground(options: Object) { type: SET_VIRTUAL_BACKGROUND, virtualSource: options?.url, blurValue: options?.blurValue, - backgroundType: options?.backgroundType + backgroundType: options?.backgroundType, + selectedThumbnail: options?.selectedThumbnail }; } diff --git a/react/features/virtual-background/components/VirtualBackgroundDialog.js b/react/features/virtual-background/components/VirtualBackgroundDialog.js index d8234c3cc..b27f07d4c 100644 --- a/react/features/virtual-background/components/VirtualBackgroundDialog.js +++ b/react/features/virtual-background/components/VirtualBackgroundDialog.js @@ -20,24 +20,29 @@ import logger from '../logger'; const backgroundsLimit = 25; const images = [ { - id: 1, + id: '1', src: 'images/virtual-background/background-1.jpg' }, { - id: 2, + id: '2', src: 'images/virtual-background/background-2.jpg' }, { - id: 3, + id: '3', src: 'images/virtual-background/background-3.jpg' }, { - id: 4, + id: '4', src: 'images/virtual-background/background-4.jpg' } ]; type Props = { + /** + * Returns the selected thumbnail identifier. + */ + _selectedThumbnail: string, + /** * The redux {@code dispatch} function. */ @@ -54,7 +59,7 @@ type Props = { * * @returns {ReactElement} */ -function VirtualBackground({ dispatch, t }: Props) { +function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) { const localImages = jitsiLocalStorage.getItem('virtualBackgrounds'); const [ storedImages, setStoredImages ] = useState((localImages && JSON.parse(localImages)) || []); const [ loading, isloading ] = useState(false); @@ -78,15 +83,14 @@ function VirtualBackground({ dispatch, t }: Props) { } }, [ storedImages ]); - const [ selected, setSelected ] = useState(''); const enableBlur = async (blurValue, selection) => { isloading(true); - setSelected(selection); await dispatch( toggleBackgroundEffect({ backgroundType: 'blur', enabled: true, - blurValue + blurValue, + selectedThumbnail: selection }) ); isloading(false); @@ -94,10 +98,10 @@ function VirtualBackground({ dispatch, t }: Props) { const removeBackground = async () => { isloading(true); - setSelected('none'); await dispatch( toggleBackgroundEffect({ - enabled: false + enabled: false, + selectedThumbnail: 'none' }) ); isloading(false); @@ -105,12 +109,12 @@ function VirtualBackground({ dispatch, t }: Props) { const setUploadedImageBackground = async image => { isloading(true); - setSelected(image.id); await dispatch( toggleBackgroundEffect({ backgroundType: 'image', enabled: true, - url: image.src + url: image.src, + selectedThumbnail: image.id }) ); isloading(false); @@ -118,14 +122,14 @@ function VirtualBackground({ dispatch, t }: Props) { const setImageBackground = async image => { isloading(true); - setSelected(image.id); const url = await toDataURL(image.src); await dispatch( toggleBackgroundEffect({ backgroundType: 'image', enabled: true, - url + url, + selectedThumbnail: image.id }) ); isloading(false); @@ -137,12 +141,13 @@ function VirtualBackground({ dispatch, t }: Props) { reader.readAsDataURL(imageFile[0]); reader.onload = async () => { const url = await resizeImage(reader.result); + const uuId = uuid.v4(); isloading(true); setStoredImages([ ...storedImages, { - id: uuid.v4(), + id: uuId, src: url } ]); @@ -150,7 +155,8 @@ function VirtualBackground({ dispatch, t }: Props) { toggleBackgroundEffect({ backgroundType: 'image', enabled: true, - url + url, + selectedThumbnail: uuId }) ); isloading(false); @@ -181,7 +187,8 @@ function VirtualBackground({ dispatch, t }: Props) { content = { t('virtualBackground.removeBackground') } position = { 'top' }>
{t('virtualBackground.none')}
@@ -190,7 +197,7 @@ function VirtualBackground({ dispatch, t }: Props) { content = { t('virtualBackground.slightBlur') } position = { 'top' }> enableBlur(8, 'slight-blur') } size = { 50 } src = { IconBlurBackground } /> @@ -199,14 +206,14 @@ function VirtualBackground({ dispatch, t }: Props) { content = { t('virtualBackground.blur') } position = { 'top' }> enableBlur(25, 'blur') } size = { 50 } src = { IconBlurBackground } /> {images.map((image, index) => ( setImageBackground(image) } onError = { event => event.target.style.display = 'none' } @@ -235,7 +242,7 @@ function VirtualBackground({ dispatch, t }: Props) { className = { 'thumbnail-container' } key = { index }> setUploadedImageBackground(image) } onError = { event => event.target.style.display = 'none' } 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)); diff --git a/react/features/virtual-background/reducer.js b/react/features/virtual-background/reducer.js index 2ac7ea109..8f1724563 100644 --- a/react/features/virtual-background/reducer.js +++ b/react/features/virtual-background/reducer.js @@ -23,7 +23,7 @@ PersistenceRegistry.register(STORE_NAME, true); * specified action. */ ReducerRegistry.register(STORE_NAME, (state = {}, action) => { - const { virtualSource, backgroundEffectEnabled, blurValue, backgroundType } = action; + const { virtualSource, backgroundEffectEnabled, blurValue, backgroundType, selectedThumbnail } = action; switch (action.type) { case SET_VIRTUAL_BACKGROUND: { @@ -31,7 +31,8 @@ ReducerRegistry.register(STORE_NAME, (state = {}, action) => { ...state, virtualSource, blurValue, - backgroundType + backgroundType, + selectedThumbnail }; } case BACKGROUND_ENABLED: {