fix(video-quality): Add the ability to request Ultra HD resolutions

Change the preferredVideoQuality and maxReceiverVideoQuality values to Ultra HD resolutions. The requested resolution can be as high as 4K to facilitate VPaaS customers to request 4K. The sender video resolution will always max out at the value specified in the video constraints from config.js settings.

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

@@ -21,6 +21,7 @@ import { findNearestQualityLevel } from '../functions';
  * @type {Object}
  */
 const VIDEO_QUALITY_TO_ICON = {
+    [VIDEO_QUALITY_LEVELS.ULTRA]: IconVideoQualityHD,
     [VIDEO_QUALITY_LEVELS.HIGH]: IconVideoQualityHD,
     [VIDEO_QUALITY_LEVELS.STANDARD]: IconVideoQualitySD,
     [VIDEO_QUALITY_LEVELS.LOW]: IconVideoQualityLD

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

@@ -14,6 +14,7 @@ import { VIDEO_QUALITY_LEVELS } from '../constants';
 import logger from '../logger';
 
 const {
+    ULTRA,
     HIGH,
     STANDARD,
     LOW
@@ -97,6 +98,7 @@ class VideoQualitySlider extends Component<Props> {
         this._enableLowDefinition = this._enableLowDefinition.bind(this);
         this._enableStandardDefinition
             = this._enableStandardDefinition.bind(this);
+        this._enableUltraHighDefinition = this._enableUltraHighDefinition.bind(this);
         this._onSliderChange = this._onSliderChange.bind(this);
 
         /**
@@ -125,9 +127,9 @@ class VideoQualitySlider extends Component<Props> {
                 videoQuality: STANDARD
             },
             {
-                onSelect: this._enableHighDefinition,
+                onSelect: this._enableUltraHighDefinition,
                 textKey: 'videoStatus.highDefinition',
-                videoQuality: HIGH
+                videoQuality: ULTRA
             }
         ];
     }
@@ -298,6 +300,21 @@ class VideoQualitySlider extends Component<Props> {
         this._setPreferredVideoQuality(STANDARD);
     }
 
+    _enableUltraHighDefinition: () => void;
+
+    /**
+     * Dispatches an action to receive ultra HD quality video from remote
+     * participants.
+     *
+     * @private
+     * @returns {void}
+     */
+    _enableUltraHighDefinition() {
+        sendAnalytics(createEvent('ultra high'));
+        logger.log('Video quality: ultra high enabled');
+        this._setPreferredVideoQuality(ULTRA);
+    }
+
     /**
      * Matches the current video quality state with corresponding index of the
      * component's slider options.

react/features/video-quality/constants.js

@@ -5,6 +5,7 @@
  * @type {object}
  */
 export const VIDEO_QUALITY_LEVELS = {
+    ULTRA: 2160,
     HIGH: 720,
     STANDARD: 360,
     LOW: 180

react/features/video-quality/functions.js

@@ -2,8 +2,8 @@
 
 import { CFG_LVL_TO_APP_QUALITY_LVL, VIDEO_QUALITY_LEVELS } from './constants';
 
-const { LOW, STANDARD, HIGH } = VIDEO_QUALITY_LEVELS;
+const { LOW, STANDARD, HIGH, ULTRA } = VIDEO_QUALITY_LEVELS;
-const videoQualityLevels = [ LOW, STANDARD, HIGH ];
+const videoQualityLevels = [ LOW, STANDARD, HIGH, ULTRA ];
 
 /**
  * Finds the nearest video quality level to the passed video quality.

react/features/video-quality/middleware.js

@@ -81,7 +81,7 @@ StateListenerRegistry.register(
         const { maxReceiverVideoQuality } = state['features/video-quality'];
         const { maxFullResolutionParticipants = 2 } = state['features/base/config'];
 
-        let newMaxRecvVideoQuality = VIDEO_QUALITY_LEVELS.HIGH;
+        let newMaxRecvVideoQuality = VIDEO_QUALITY_LEVELS.ULTRA;
 
         if (reducedUI) {
             newMaxRecvVideoQuality = VIDEO_QUALITY_LEVELS.LOW;

react/features/video-quality/reducer.js

@@ -7,9 +7,9 @@ import { validateMinHeightForQualityLvl } from './functions';
 import logger from './logger';
 
 const DEFAULT_STATE = {
-    maxReceiverVideoQuality: VIDEO_QUALITY_LEVELS.HIGH,
+    maxReceiverVideoQuality: VIDEO_QUALITY_LEVELS.ULTRA,
     minHeightForQualityLvl: new Map(),
-    preferredVideoQuality: VIDEO_QUALITY_LEVELS.HIGH
+    preferredVideoQuality: VIDEO_QUALITY_LEVELS.ULTRA
 };
 
 DEFAULT_STATE.minHeightForQualityLvl.set(360, VIDEO_QUALITY_LEVELS.STANDARD);