fix(virtual-background) keep selected state on dialog

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';

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
     };
 }
 

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' }>
                             <div
-                                className = { selected === 'none' ? 'none-selected' : 'virtual-background-none' }
+                                className = { _selectedThumbnail === 'none'
+                                    ? 'none-selected' : 'virtual-background-none' }
                                 onClick = { removeBackground }>
                                 {t('virtualBackground.none')}
                             </div>
@@ -190,7 +197,7 @@ function VirtualBackground({ dispatch, t }: Props) {
                             content = { t('virtualBackground.slightBlur') }
                             position = { 'top' }>
                             <Icon
-                                className = { selected === 'slight-blur' ? 'blur-selected' : '' }
+                                className = { _selectedThumbnail === 'slight-blur' ? 'blur-selected' : '' }
                                 onClick = { () => enableBlur(8, 'slight-blur') }
                                 size = { 50 }
                                 src = { IconBlurBackground } />
@@ -199,14 +206,14 @@ function VirtualBackground({ dispatch, t }: Props) {
                             content = { t('virtualBackground.blur') }
                             position = { 'top' }>
                             <Icon
-                                className = { selected === 'blur' ? 'blur-selected' : '' }
+                                className = { _selectedThumbnail === 'blur' ? 'blur-selected' : '' }
                                 onClick = { () => enableBlur(25, 'blur') }
                                 size = { 50 }
                                 src = { IconBlurBackground } />
                         </Tooltip>
                         {images.map((image, index) => (
                             <img
-                                className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' }
+                                className = { _selectedThumbnail === image.id ? 'thumbnail-selected' : 'thumbnail' }
                                 key = { index }
                                 onClick = { () => setImageBackground(image) }
                                 onError = { event => event.target.style.display = 'none' }
@@ -235,7 +242,7 @@ function VirtualBackground({ dispatch, t }: Props) {
                                 className = { 'thumbnail-container' }
                                 key = { index }>
                                 <img
-                                    className = { selected === image.id ? 'thumbnail-selected' : 'thumbnail' }
+                                    className = { _selectedThumbnail === image.id ? 'thumbnail-selected' : 'thumbnail' }
                                     onClick = { () => 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));

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: {