feat(video-quality): persist.

react/features/video-quality/components/OverflowMenuVideoQualityItem.web.js

 } from '../../base/icons';
 import { connect } from '../../base/redux';
 import { VIDEO_QUALITY_LEVELS } from '../constants';
+import { findNearestQualityLevel } from '../functions';
 
 /**
  * A map of of selectable receive resolutions to corresponding icons.
      */
     render() {
         const { _audioOnly, _videoQuality } = this.props;
-        const icon = _audioOnly || !_videoQuality
+        const videoQualityLevel = findNearestQualityLevel(_videoQuality);
+        const icon = _audioOnly || !videoQualityLevel
             ? IconVideoQualityAudioOnly
-            : VIDEO_QUALITY_TO_ICON[_videoQuality];
+            : VIDEO_QUALITY_TO_ICON[videoQualityLevel];
 
         return (
             <li

react/features/video-quality/components/VideoQualitySlider.web.js

             return _sliderOptions.indexOf(audioOnlyOption);
         }
 
-        const matchingOption = _sliderOptions.find(
-            ({ videoQuality }) => videoQuality === _sendrecvVideoQuality);
+        for (let i = 0; i < _sliderOptions.length; i++) {
+            if (_sliderOptions[i].videoQuality >= _sendrecvVideoQuality) {
+                return i;
+            }
+        }
 
-        return _sliderOptions.indexOf(matchingOption);
+        return -1;
     }
 
     _onSliderChange: () => void;

react/features/video-quality/functions.js

 
 import { CFG_LVL_TO_APP_QUALITY_LVL, VIDEO_QUALITY_LEVELS } from './constants';
 
+const { LOW, STANDARD, HIGH } = VIDEO_QUALITY_LEVELS;
+const videoQualityLevels = [ LOW, STANDARD, HIGH ];
+
+/**
+ * Finds the nearest video quality level to the passed video quality.
+ *
+ * @param {number} videoQuality - The video quality.
+ * @returns {number|undefined} - The found quality level.
+ */
+export function findNearestQualityLevel(videoQuality: number) {
+    for (let i = 0; i < videoQualityLevels.length; i++) {
+        const level = videoQualityLevels[i];
+
+        if (level >= videoQuality) {
+            return level;
+        }
+    }
+
+    return undefined;
+}
 
 /**
  * Selects {@code VIDEO_QUALITY_LEVELS} for the given {@link availableHeight} and threshold to quality mapping.

react/features/video-quality/middleware.js

     CONFERENCE_JOINED,
     DATA_CHANNEL_OPENED
 } from '../base/conference';
+import { SET_CONFIG } from '../base/config';
 import { getParticipantCount } from '../base/participants';
 import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
 import { shouldDisplayTileView } from '../video-layout';
         }
         break;
     }
+    case SET_CONFIG: {
+        const state = getState();
+        const { videoQuality = {} } = state['features/base/config'];
+
+        if (videoQuality.persist) {
+            dispatch(
+                setPreferredVideoQuality(
+                    state['features/video-quality-persistent-storage'].persistedPrefferedVideoQuality));
+        }
+
+        break;
+    }
     }
 
     return result;

react/features/video-quality/reducer.js

 import { SET_CONFIG } from '../base/config';
-import { ReducerRegistry, set } from '../base/redux';
+import { PersistenceRegistry, ReducerRegistry, set } from '../base/redux';
 
 import { SET_MAX_RECEIVER_VIDEO_QUALITY, SET_PREFERRED_VIDEO_QUALITY } from './actionTypes';
 import { VIDEO_QUALITY_LEVELS } from './constants';
 import { validateMinHeightForQualityLvl } from './functions';
 import logger from './logger';
 
-const STORE_NAME = 'features/video-quality';
-
 const DEFAULT_STATE = {
     maxReceiverVideoQuality: VIDEO_QUALITY_LEVELS.HIGH,
     minHeightForQualityLvl: new Map(),
 DEFAULT_STATE.minHeightForQualityLvl.set(360, VIDEO_QUALITY_LEVELS.STANDARD);
 DEFAULT_STATE.minHeightForQualityLvl.set(720, VIDEO_QUALITY_LEVELS.HIGH);
 
-ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
+
+// When the persisted state is initialized the current state (for example the deafault state) is erased.
+// In order to workaround this issue we need additional state for the persisted properties.
+PersistenceRegistry.register('features/video-quality-persistent-storage');
+
+ReducerRegistry.register('features/video-quality-persistent-storage', (state = {}, action) => {
+    switch (action.type) {
+    case SET_PREFERRED_VIDEO_QUALITY: {
+        const { preferredVideoQuality } = action;
+
+        return {
+            ...state,
+            persistedPrefferedVideoQuality: preferredVideoQuality
+        };
+    }
+    }
+
+    return state;
+});
+
+ReducerRegistry.register('features/video-quality', (state = DEFAULT_STATE, action) => {
     switch (action.type) {
     case SET_CONFIG:
         return _setConfig(state, action);
             state,
             'maxReceiverVideoQuality',
             action.maxReceiverVideoQuality);
-    case SET_PREFERRED_VIDEO_QUALITY:
-        return set(
-            state,
-            'preferredVideoQuality',
-            action.preferredVideoQuality);
+    case SET_PREFERRED_VIDEO_QUALITY: {
+        const { preferredVideoQuality } = action;
+
+        return {
+            ...state,
+            preferredVideoQuality
+        };
+    }
     }
 
     return state;