feat(last-n): Implement startLastN and make last-n configurable through UI. (#9093)

config.js

@@ -228,6 +228,11 @@ var config = {
     // Default value for the channel "last N" attribute. -1 for unlimited.
     channelLastN: -1,
 
+    // Provides a way for the lastN value to be controlled through the UI.
+    // When startLastN is present, conference starts with a last-n value of startLastN and channelLastN
+    // value will be used when the quality level is selected using "Manage Video Quality" slider.
+    // startLastN: 1,
+
     // Provides a way to use different "last N" values based on the number of participants in the conference.
     // The keys in an Object represent number of participants and the values are "last N" to be used when number of
     // participants gets to or above the number.

react/features/base/config/configWhitelist.js

@@ -153,6 +153,7 @@ export default [
     'resolution',
     'startAudioMuted',
     'startAudioOnly',
+    'startLastN',
     'startScreenSharing',
     'startSilent',
     'startVideoMuted',

react/features/base/lastn/actionTypes.js

@@ -0,0 +1,11 @@
+// @flow
+
+/**
+ * The type of (redux) action which sets the last-n for the conference.
+ *
+ * {
+ *     type: SET_LAST_N,
+ *     lastN: number
+ * }
+ */
+export const SET_LAST_N = 'SET_LAST_N';

react/features/base/lastn/actions.js

@@ -0,0 +1,19 @@
+// @flow
+
+import { SET_LAST_N } from './actionTypes';
+
+/**
+ * Sets the last-n, i.e., the number of remote videos to be requested from the bridge for the conference.
+ *
+ * @param {number} lastN - The number of remote videos to be requested.
+ * @returns {{
+ *     type: SET_LAST_N,
+ *     lastN: number
+ * }}
+ */
+export function setLastN(lastN: number) {
+    return {
+        type: SET_LAST_N,
+        lastN
+    };
+}

react/features/base/lastn/functions.js

@@ -1,3 +1,28 @@
+import { VIDEO_QUALITY_LEVELS } from '../../video-quality/constants';
+
+/**
+ * Determines the lastN value to be used for the conference based on the video quality selected.
+ *
+ * @param {string} qualityLevel - Quality level (height) selected.
+ * @param {number} channelLastN - LastN value set for the whole conference.
+ * @returns {number} LastN value applicable to the quality level specified.
+ */
+export function getLastNForQualityLevel(qualityLevel, channelLastN) {
+    let lastN = channelLastN;
+
+    const videoQualityLevels = Object.values(VIDEO_QUALITY_LEVELS);
+
+    for (const lvl in videoQualityLevels) {
+        if (videoQualityLevels.hasOwnProperty(lvl)
+            && qualityLevel === videoQualityLevels[lvl]
+            && lvl > 1) {
+            lastN = Math.floor(channelLastN / Math.pow(2, lvl - 1));
+        }
+    }
+
+    return lastN;
+}
+
 /**
  * Checks if the given Object is a correct last N limit mapping, coverts both keys and values to numbers and sorts
  * the keys in ascending order.

react/features/base/lastn/index.js

@@ -0,0 +1,3 @@
+export * from './actions';
+export * from './actionTypes';
+export * from './functions';

react/features/base/lastn/middleware.js

@@ -18,6 +18,7 @@ import {
 import { MiddlewareRegistry } from '../redux';
 import { isLocalVideoTrackDesktop } from '../tracks/functions';
 
+import { SET_LAST_N } from './actionTypes';
 import { limitLastN } from './functions';
 import logger from './logger';
 
@@ -40,6 +41,12 @@ MiddlewareRegistry.register(store => next => action => {
     case SET_TILE_VIEW:
         _updateLastN(store);
         break;
+    case SET_LAST_N: {
+        const { lastN } = action;
+
+        _updateLastN(store, lastN);
+        break;
+    }
     }
 
     return result;
@@ -49,17 +56,18 @@ MiddlewareRegistry.register(store => next => action => {
  * Updates the last N value in the conference based on the current state of the redux store.
  *
  * @param {Store} store - The redux store.
+ * @param {number} value - The last-n value to be set.
  * @private
  * @returns {void}
  */
-function _updateLastN({ getState }) {
+function _updateLastN({ getState }, value = null) {
     const state = getState();
     const { conference } = state['features/base/conference'];
     const { enabled: audioOnly } = state['features/base/audio-only'];
     const { appState } = state['features/background'] || {};
     const { enabled: filmStripEnabled } = state['features/filmstrip'];
     const config = state['features/base/config'];
-    const { lastNLimits } = state['features/base/lastn'];
+    const { lastNLimits, lastN } = state['features/base/lastn'];
     const participantCount = getParticipantCount(state);
 
     if (!conference) {
@@ -68,17 +76,23 @@ function _updateLastN({ getState }) {
         return;
     }
 
-    let lastN = typeof config.channelLastN === 'undefined' ? -1 : config.channelLastN;
+    // Select the lastN value based on the following preference order.
+    // 1. The value passed to the setLastN action that is dispatched.
+    // 2. The last-n value in redux.
+    // 3. The last-n value from 'startLastN' if it is specified in config.js
+    // 4. The last-n value from 'channelLastN' if specified in config.js.
+    // 5. -1 as the default value.
+    let lastNSelected = value || lastN || (config.startLastN ?? (config.channelLastN ?? -1));
 
-    // Apply last N limit based on the # of participants and channelLastN settings.
+    // Apply last N limit based on the # of participants and config settings.
     const limitedLastN = limitLastN(participantCount, lastNLimits);
 
     if (limitedLastN !== undefined) {
-        lastN = lastN === -1 ? limitedLastN : Math.min(limitedLastN, lastN);
+        lastNSelected = lastNSelected === -1 ? limitedLastN : Math.min(limitedLastN, lastNSelected);
     }
 
     if (typeof appState !== 'undefined' && appState !== 'active') {
-        lastN = isLocalVideoTrackDesktop(state) ? 1 : 0;
+        lastNSelected = isLocalVideoTrackDesktop(state) ? 1 : 0;
     } else if (audioOnly) {
         const { remoteScreenShares, tileViewEnabled } = state['features/video-layout'];
         const largeVideoParticipantId = state['features/large-video'].participantId;
@@ -89,22 +103,22 @@ function _updateLastN({ getState }) {
         // view since we make an exception only for screenshare when in audio-only mode. If the user unpins
         // the screenshare, lastN will be set to 0 here. It will be set to 1 if screenshare has been auto pinned.
         if (!tileViewEnabled && largeVideoParticipant && !largeVideoParticipant.local) {
-            lastN = (remoteScreenShares || []).includes(largeVideoParticipantId) ? 1 : 0;
+            lastNSelected = (remoteScreenShares || []).includes(largeVideoParticipantId) ? 1 : 0;
         } else {
-            lastN = 0;
+            lastNSelected = 0;
         }
     } else if (!filmStripEnabled) {
-        lastN = 1;
+        lastNSelected = 1;
     }
 
-    if (conference.getLastN() === lastN) {
+    if (conference.getLastN() === lastNSelected) {
         return;
     }
 
-    logger.info(`Setting last N to: ${lastN}`);
+    logger.info(`Setting last N to: ${lastNSelected}`);
 
     try {
-        conference.setLastN(lastN);
+        conference.setLastN(lastNSelected);
     } catch (err) {
         logger.error(`Failed to set lastN: ${err}`);
     }

react/features/base/lastn/reducer.js

@@ -3,12 +3,21 @@ import {
 } from '../config';
 import { ReducerRegistry, set } from '../redux';
 
+import { SET_LAST_N } from './actionTypes';
 import { validateLastNLimits } from './functions';
 
 ReducerRegistry.register('features/base/lastn', (state = { }, action) => {
     switch (action.type) {
     case SET_CONFIG:
         return _setConfig(state, action);
+    case SET_LAST_N: {
+        const { lastN } = action;
+
+        return {
+            ...state,
+            lastN
+        };
+    }
     }
 
     return state;

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

@@ -6,9 +6,10 @@ import type { Dispatch } from 'redux';
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
 import { setAudioOnly } from '../../base/audio-only';
 import { translate } from '../../base/i18n';
+import { setLastN, getLastNForQualityLevel } from '../../base/lastn';
 import { connect } from '../../base/redux';
 import { setPreferredVideoQuality } from '../actions';
-import { VIDEO_QUALITY_LEVELS } from '../constants';
+import { DEFAULT_LAST_N, VIDEO_QUALITY_LEVELS } from '../constants';
 import logger from '../logger';
 
 const {
@@ -44,6 +45,11 @@ type Props = {
      */
     _audioOnly: Boolean,
 
+    /**
+     * The channelLastN value configured for the conference.
+     */
+    _channelLastN: Number,
+
     /**
      * Whether or not the conference is in peer to peer mode.
      */
@@ -342,10 +348,18 @@ class VideoQualitySlider extends Component<Props> {
      */
     _setPreferredVideoQuality(qualityLevel) {
         this.props.dispatch(setPreferredVideoQuality(qualityLevel));
-
         if (this.props._audioOnly) {
             this.props.dispatch(setAudioOnly(false));
         }
+
+        // Determine the lastN value based on the quality setting.
+        let { _channelLastN = DEFAULT_LAST_N } = this.props;
+
+        _channelLastN = _channelLastN === -1 ? DEFAULT_LAST_N : _channelLastN;
+        const lastN = getLastNForQualityLevel(qualityLevel, _channelLastN);
+
+        // Set the lastN for the conference.
+        this.props.dispatch(setLastN(lastN));
     }
 }
 
@@ -361,9 +375,11 @@ function _mapStateToProps(state) {
     const { enabled: audioOnly } = state['features/base/audio-only'];
     const { p2p } = state['features/base/conference'];
     const { preferredVideoQuality } = state['features/video-quality'];
+    const { channelLastN } = state['features/base/config'];
 
     return {
         _audioOnly: audioOnly,
+        _channelLastN: channelLastN,
         _p2p: p2p,
         _sendrecvVideoQuality: preferredVideoQuality
     };

react/features/video-quality/constants.js

@@ -1,3 +1,9 @@
+/**
+ * Default last-n value used to be used for "HD" video quality setting when no channelLastN value is specified.
+ * @type {number}
+ */
+export const DEFAULT_LAST_N = 20;
+
 /**
  * The supported remote video resolutions. The values are currently based on
  * available simulcast layers.