ref(video-quality): update video quality post redux update

Move away from middleware and instead update video quality
when the selected video quality updates in redux. This also
lead to removing of automatically exiting audio only because
with the change it's not so readily possible to tell if the
user switched off audio only by re-selecting the already
preferred video quality. Removing this automagic removed
some additional checking done for mobile.

react/features/base/conference/middleware.js

@@ -17,7 +17,7 @@ import {
     getPinnedParticipant,
     PIN_PARTICIPANT
 } from '../participants';
-import { MiddlewareRegistry } from '../redux';
+import { MiddlewareRegistry, StateListenerRegistry } from '../redux';
 import UIEvents from '../../../../service/UI/UIEvents';
 import { TRACK_ADDED, TRACK_REMOVED } from '../tracks';
 
@@ -25,8 +25,7 @@ import {
     conferenceFailed,
     conferenceLeft,
     createConference,
-    setLastN,
-    toggleAudioOnly
+    setLastN
 } from './actions';
 import {
     CONFERENCE_FAILED,
@@ -34,8 +33,6 @@ import {
     DATA_CHANNEL_OPENED,
     SET_AUDIO_ONLY,
     SET_LASTN,
-    SET_MAX_RECEIVER_VIDEO_QUALITY,
-    SET_PREFERRED_RECEIVER_VIDEO_QUALITY,
     SET_ROOM
 } from './actionTypes';
 import {
@@ -81,12 +78,6 @@ MiddlewareRegistry.register(store => next => action => {
     case SET_LASTN:
         return _setLastN(store, next, action);
 
-    case SET_MAX_RECEIVER_VIDEO_QUALITY:
-        return _setMaximumReceiverVideoQuality(store, next, action);
-
-    case SET_PREFERRED_RECEIVER_VIDEO_QUALITY:
-        return _setPreferredReceiverVideoQuality(store, next, action);
-
     case SET_ROOM:
         return _setRoom(store, next, action);
 
@@ -98,6 +89,32 @@ MiddlewareRegistry.register(store => next => action => {
     return next(action);
 });
 
+/**
+ * Registers a change handler for state['features/base/conference'] to update
+ * the preferred video quality levels based on user preferred and internal
+ * settings.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => state['features/base/conference'],
+    /* listener */ (currentState, store, previousState = {}) => {
+        const {
+            conference,
+            maxReceiverVideoQuality,
+            preferredReceiverVideoQuality
+        } = currentState;
+        const changedPreferredVideoQuality = preferredReceiverVideoQuality
+            !== previousState.preferredReceiverVideoQuality;
+        const changedMaxVideoQuality = maxReceiverVideoQuality
+            !== previousState.maxReceiverVideoQuality;
+
+        if (changedPreferredVideoQuality || changedMaxVideoQuality) {
+            _setReceiverVideoConstraint(
+                conference,
+                preferredReceiverVideoQuality,
+                maxReceiverVideoQuality);
+        }
+    });
+
 /**
  * Makes sure to leave a failed conference in order to release any allocated
  * resources like peer connections, emit participant left events, etc.
@@ -438,71 +455,20 @@ function _setLastN({ getState }, next, action) {
 }
 
 /**
- * Sets an internal maximum for the video frame height to receive from remote
- * videos. This maximum acts as a cap so user preferences cannot exceed a
- * specified frame height.
+ * Helper function for updating the preferred receiver video constraint, based
+ * on the user preference and the internal maximum.
  *
- * @private
- * @param {Store} store - The redux store in which the specified {@code action}
- * is being dispatched.
- * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
- * specified {@code action} to the specified {@code store}.
- * @param {Action} action - The redux action
- * {@code SET_MAXIMUM_RECEIVER_VIDEO_QUALITY} which is being dispatched in the
- * specified {@code store}.
- * @private
- * @returns {Object} The value returned by {@code next(action)}.
+ * @param {JitsiConference} conference - The JitsiConference instance for the
+ * current call.
+ * @param {number} preferred - The user preferred max frame height.
+ * @param {number} max - The maximum frame height the application should
+ * receive.
+ * @returns {void}
  */
-function _setMaximumReceiverVideoQuality({ getState }, next, action) {
-    const { conference, preferredReceiverVideoQuality }
-        = getState()['features/base/conference'];
-
+function _setReceiverVideoConstraint(conference, preferred, max) {
     if (conference) {
-        if (typeof preferredReceiverVideoQuality === 'undefined'
-            || preferredReceiverVideoQuality > action.maxReceiverVideoQuality) {
-            conference.setReceiverVideoConstraint(
-                action.maxReceiverVideoQuality);
-        }
+        conference.setReceiverVideoConstraint(Math.min(preferred, max));
     }
-
-    return next(action);
-}
-
-/**
- * Sets the preferred receive video quality and will turn off audio only mode if
- * enabled.
- *
- * @param {Store} store - The redux store in which the specified {@code action}
- * is being dispatched.
- * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
- * specified {@code action} to the specified {@code store}.
- * @param {Action} action - The redux action
- * {@code SET_PREFERRED_RECEIVER_VIDEO_QUALITY} which is being dispatched in the
- * specified {@code store}.
- * @private
- * @returns {Object} The value returned by {@code next(action)}.
- */
-function _setPreferredReceiverVideoQuality(
-        { dispatch, getState },
-        next,
-        action) {
-    const {
-        audioOnly,
-        conference,
-        maxReceiverVideoQuality
-    } = getState()['features/base/conference'];
-
-    if (conference) {
-        const { preferredReceiverVideoQuality } = action;
-        const targetQuality = typeof maxReceiverVideoQuality === 'undefined'
-            ? preferredReceiverVideoQuality
-            : Math.min(maxReceiverVideoQuality, preferredReceiverVideoQuality);
-
-        conference.setReceiverVideoConstraint(targetQuality);
-        audioOnly && dispatch(toggleAudioOnly());
-    }
-
-    return next(action);
 }
 
 /**
@@ -592,10 +558,16 @@ function _syncConferenceLocalTracksWithState({ getState }, action) {
  * @returns {Object} The value returned by {@code next(action)}.
  */
 function _syncReceiveVideoQuality({ getState }, next, action) {
-    const state = getState()['features/base/conference'];
+    const {
+        conference,
+        maxReceiverVideoQuality,
+        preferredReceiverVideoQuality
+    } = getState()['features/base/conference'];
 
-    state.conference.setReceiverVideoConstraint(
-        state.preferredReceiverVideoQuality);
+    _setReceiverVideoConstraint(
+        conference,
+        preferredReceiverVideoQuality,
+        maxReceiverVideoQuality);
 
     return next(action);
 }

react/features/base/conference/reducer.js

@@ -27,77 +27,88 @@ import {
 import { VIDEO_QUALITY_LEVELS } from './constants';
 import { isRoomValid } from './functions';
 
+const DEFAULT_STATE = {
+    joining: undefined,
+    maxReceiverVideoQuality: VIDEO_QUALITY_LEVELS.HIGH,
+    preferredReceiverVideoQuality: VIDEO_QUALITY_LEVELS.HIGH
+};
+
 /**
  * Listen for actions that contain the conference object, so that it can be
  * stored for use by other action creators.
  */
-ReducerRegistry.register('features/base/conference', (state = {}, action) => {
-    switch (action.type) {
-    case AUTH_STATUS_CHANGED:
-        return _authStatusChanged(state, action);
+ReducerRegistry.register(
+    'features/base/conference',
+    (state = DEFAULT_STATE, action) => {
+        switch (action.type) {
+        case AUTH_STATUS_CHANGED:
+            return _authStatusChanged(state, action);
 
-    case CONFERENCE_FAILED:
-        return _conferenceFailed(state, action);
+        case CONFERENCE_FAILED:
+            return _conferenceFailed(state, action);
 
-    case CONFERENCE_JOINED:
-        return _conferenceJoined(state, action);
+        case CONFERENCE_JOINED:
+            return _conferenceJoined(state, action);
 
-    case CONFERENCE_LEFT:
-    case CONFERENCE_WILL_LEAVE:
-        return _conferenceLeftOrWillLeave(state, action);
+        case CONFERENCE_LEFT:
+        case CONFERENCE_WILL_LEAVE:
+            return _conferenceLeftOrWillLeave(state, action);
 
-    case CONFERENCE_WILL_JOIN:
-        return _conferenceWillJoin(state, action);
+        case CONFERENCE_WILL_JOIN:
+            return _conferenceWillJoin(state, action);
 
-    case CONNECTION_WILL_CONNECT:
-        return set(state, 'authRequired', undefined);
+        case CONNECTION_WILL_CONNECT:
+            return set(state, 'authRequired', undefined);
 
-    case LOCK_STATE_CHANGED:
-        return _lockStateChanged(state, action);
+        case LOCK_STATE_CHANGED:
+            return _lockStateChanged(state, action);
 
-    case P2P_STATUS_CHANGED:
-        return _p2pStatusChanged(state, action);
+        case P2P_STATUS_CHANGED:
+            return _p2pStatusChanged(state, action);
 
-    case SET_AUDIO_ONLY:
-        return _setAudioOnly(state, action);
+        case SET_AUDIO_ONLY:
+            return _setAudioOnly(state, action);
 
-    case SET_DESKTOP_SHARING_ENABLED:
-        return _setDesktopSharingEnabled(state, action);
+        case SET_DESKTOP_SHARING_ENABLED:
+            return _setDesktopSharingEnabled(state, action);
 
-    case SET_FOLLOW_ME:
-        return set(state, 'followMeEnabled', action.enabled);
+        case SET_FOLLOW_ME:
+            return set(state, 'followMeEnabled', action.enabled);
 
-    case SET_LOCATION_URL:
-        return set(state, 'room', undefined);
+        case SET_LOCATION_URL:
+            return set(state, 'room', undefined);
 
-    case SET_MAX_RECEIVER_VIDEO_QUALITY:
-        return set(
-            state,
-            'maxReceiverVideoQuality',
-            action.maxReceiverVideoQuality);
+        case SET_MAX_RECEIVER_VIDEO_QUALITY:
+            return set(
+                state,
+                'maxReceiverVideoQuality',
+                action.maxReceiverVideoQuality);
 
-    case SET_PASSWORD:
-        return _setPassword(state, action);
+        case SET_PASSWORD:
+            return _setPassword(state, action);
 
-    case SET_PREFERRED_RECEIVER_VIDEO_QUALITY:
-        return _setPreferredReceiverVideoQuality(state, action);
+        case SET_PREFERRED_RECEIVER_VIDEO_QUALITY:
+            return set(
+                state,
+                'preferredReceiverVideoQuality',
+                action.preferredReceiverVideoQuality);
 
-    case SET_ROOM:
-        return _setRoom(state, action);
+        case SET_ROOM:
+            return _setRoom(state, action);
 
-    case SET_SIP_GATEWAY_ENABLED:
-        return _setSIPGatewayEnabled(state, action);
+        case SET_SIP_GATEWAY_ENABLED:
+            return _setSIPGatewayEnabled(state, action);
 
-    case SET_START_MUTED_POLICY:
-        return {
-            ...state,
-            startAudioMutedPolicy: action.startAudioMutedPolicy,
-            startVideoMutedPolicy: action.startVideoMutedPolicy
-        };
-    }
+        case SET_START_MUTED_POLICY:
+            return {
+                ...state,
+                startAudioMutedPolicy: action.startAudioMutedPolicy,
+                startVideoMutedPolicy: action.startVideoMutedPolicy
+            };
+        }
 
-    return state;
-});
+        return state;
+    });
 
 /**
  * Reduces a specific Redux action AUTH_STATUS_CHANGED of the feature
@@ -210,15 +221,7 @@ function _conferenceJoined(state, { conference }) {
          * @type {boolean}
          */
         locked,
-        passwordRequired: undefined,
-
-        /**
-         * The current resolution restraint on receiving remote video. By
-         * default the conference will send the highest level possible.
-         *
-         * @type number
-         */
-        preferredReceiverVideoQuality: VIDEO_QUALITY_LEVELS.HIGH
+        passwordRequired: undefined
     });
 }
 
@@ -409,24 +412,6 @@ function _setPassword(state, { conference, method, password }) {
     return state;
 }
 
-/**
- * Reduces a specific Redux action {@code SET_PREFERRED_RECEIVER_VIDEO_QUALITY}
- * of the feature base/conference.
- *
- * @param {Object} state - The Redux state of the feature base/conference.
- * @param {Action} action - The Redux action of type
- * {@code SET_PREFERRED_RECEIVER_VIDEO_QUALITY} to reduce.
- * @private
- * @returns {Object} The new state of the feature base/conference after the
- * reduction of the specified action.
- */
-function _setPreferredReceiverVideoQuality(state, action) {
-    return set(
-        state,
-        'preferredReceiverVideoQuality',
-        action.preferredReceiverVideoQuality);
-}
-
 /**
  * Reduces a specific Redux action SET_ROOM of the feature base/conference.
  *

react/features/conference/middleware.js

@@ -22,20 +22,16 @@ MiddlewareRegistry.register(store => next => action => {
     case SET_REDUCED_UI: {
         const { dispatch, getState } = store;
         const state = getState();
-        const { audioOnly } = state['features/base/conference'];
         const { reducedUI } = state['features/base/responsive-ui'];
 
         dispatch(setToolboxEnabled(!reducedUI));
         dispatch(setFilmstripEnabled(!reducedUI));
 
-        // XXX: Currently setting the received video quality will disable
-        // audio-only mode if engaged, that's why we check for it here.
-        audioOnly
-            || dispatch(
-                setPreferredReceiverVideoQuality(
-                    reducedUI
-                        ? VIDEO_QUALITY_LEVELS.LOW
-                        : VIDEO_QUALITY_LEVELS.HIGH));
+        dispatch(
+            setPreferredReceiverVideoQuality(
+                reducedUI
+                    ? VIDEO_QUALITY_LEVELS.LOW
+                    : VIDEO_QUALITY_LEVELS.HIGH));
 
         break;
     }

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

@@ -284,7 +284,7 @@ class VideoQualitySlider extends Component {
     _enableHighDefinition() {
         sendAnalytics(createEvent('high'));
         logger.log('Video quality: high enabled');
-        this.props.dispatch(setPreferredReceiverVideoQuality(HIGH));
+        this._setPreferredVideoQuality(HIGH);
     }
 
     /**
@@ -297,7 +297,7 @@ class VideoQualitySlider extends Component {
     _enableLowDefinition() {
         sendAnalytics(createEvent('low'));
         logger.log('Video quality: low enabled');
-        this.props.dispatch(setPreferredReceiverVideoQuality(LOW));
+        this._setPreferredVideoQuality(LOW);
     }
 
     /**
@@ -310,7 +310,7 @@ class VideoQualitySlider extends Component {
     _enableStandardDefinition() {
         sendAnalytics(createEvent('standard'));
         logger.log('Video quality: standard enabled');
-        this.props.dispatch(setPreferredReceiverVideoQuality(STANDARD));
+        this._setPreferredVideoQuality(STANDARD);
     }
 
     /**
@@ -361,6 +361,23 @@ class VideoQualitySlider extends Component {
 
         onSelect();
     }
+
+    /**
+     * Helper for changing the preferred maximum video quality to receive and
+     * disable audio only.
+     *
+     * @param {number} qualityLevel - The new maximum video quality. Should be
+     * a value enumerated in {@code VIDEO_QUALITY_LEVELS}.
+     * @private
+     * @returns {void}
+     */
+    _setPreferredVideoQuality(qualityLevel) {
+        this.props.dispatch(setPreferredReceiverVideoQuality(qualityLevel));
+
+        if (this.props._audioOnly) {
+            this.props.dispatch(setAudioOnly(false));
+        }
+    }
 }
 
 /**