Video: add original quality selection (#1328)

.prettierignore

@@ -1,2 +1,3 @@
 **/plugins/inline-attachment/**
+**/plugins/videojs-http-streaming--override/playlist-selectors.js
 **/ui/constants/errors.js

static/app-strings.json

@@ -1672,6 +1672,11 @@
   "Theater Mode (t)": "Theater Mode (t)",
   "Default Mode (t)": "Default Mode (t)",
   "Quality": "Quality",
+  "Auto --[Video quality. Short form]--": "Auto",
+  "Orig (%quality%) --[Video quality popup. Short form.]--": "Orig (%quality%)",
+  "Original (%quality%) --[Video quality popup. Long form.]--": "Original (%quality%)",
+  "Original --[Video quality button. Abbreviate to fit space.]--": "Original",
+  "Original --[Video quality button. Long form.]--": "Original",
   "Autoplay Next On": "Autoplay Next On",
   "Autoplay Next is on.": "Autoplay Next is on.",
   "Autoplay Next Off": "Autoplay Next Off",

ui/component/viewers/videoViewer/internal/plugins/videojs-hls-quality-selector/plugin.js

@@ -50,12 +50,9 @@ class HlsQualitySelectorPlugin {
   }
 
   updatePlugin() {
-    // If there is the VHS tech
+    if (this.player.claimSrcVhs || this.player.isLivestream) {
-    if (this.getVhs()) {
-      // Show quality selector
       this._qualityButton.show();
     } else {
-      // Hide quality selector
       this._qualityButton.hide();
     }
   }
@@ -66,7 +63,7 @@ class HlsQualitySelectorPlugin {
    * @return {*} - videojs-http-streaming plugin.
    */
   getHls() {
-    console.warn('hls-quality-selector: WARN: Using getHls options is deprecated. Use getVhs instead.')
+    console.warn('hls-quality-selector: WARN: Using getHls options is deprecated. Use getVhs instead.');
     return this.getVhs();
   }
 
@@ -112,13 +109,43 @@ class HlsQualitySelectorPlugin {
     concreteButtonInstance.removeClass('vjs-hidden');
   }
 
+  resolveOriginalQualityLabel(abbreviatedForm, includeResolution) {
+    if (includeResolution && this.config.originalHeight) {
+      return abbreviatedForm
+        ? __('Orig (%quality%) --[Video quality popup. Short form.]--', { quality: this.config.originalHeight + 'p' })
+        : __('Original (%quality%) --[Video quality popup. Long form.]--', {
+            quality: this.config.originalHeight + 'p',
+          });
+    } else {
+      // The allocated space for the button is fixed and happened to fit
+      // "Original", so we don't abbreviate for English. But it will most likely
+      // not fit for other languages, hence the 2 strings.
+      return abbreviatedForm
+        ? __('Original --[Video quality button. Abbreviate to fit space.]--')
+        : __('Original --[Video quality button. Long form.]--');
+    }
+  }
+
   /**
    *Set inner button text.
    *
    * @param {string} text - the text to display in the button.
    */
   setButtonInnerText(text) {
-    this._qualityButton.menuButton_.$('.vjs-icon-placeholder').innerHTML = text;
+    let str;
+    switch (text) {
+      case 'auto':
+        str = __('Auto --[Video quality. Short form]--');
+        break;
+      case 'original':
+        str = this.resolveOriginalQualityLabel(true, false);
+        break;
+      default:
+        str = text;
+        break;
+    }
+
+    this._qualityButton.menuButton_.$('.vjs-icon-placeholder').innerHTML = str;
   }
 
   /**
@@ -170,9 +197,19 @@ class HlsQualitySelectorPlugin {
       return 0;
     });
 
+    if (!player.isLivestream) {
+      levelItems.push(
+        this.getQualityMenuItem.call(this, {
+          label: this.resolveOriginalQualityLabel(false, true),
+          value: 'original',
+          selected: false,
+        })
+      );
+    }
+
     levelItems.push(
       this.getQualityMenuItem.call(this, {
-        label: player.localize('Auto'),
+        label: __('Auto --[Video quality. Short form]--'),
         value: 'auto',
         selected: true,
       })
@@ -186,6 +223,15 @@ class HlsQualitySelectorPlugin {
     }
   }
 
+  swapSrcTo(mode = 'original') {
+    const currentTime = this.player.currentTime();
+    this.player.src(mode === 'vhs' ? this.player.claimSrcVhs : this.player.claimSrcOriginal);
+    this.player.load();
+    this.player.currentTime(currentTime);
+
+    console.assert(mode === 'vhs' || mode === 'original', 'Unexpected input');
+  }
+
   /**
    * Sets quality (based on media height)
    *
@@ -198,14 +244,32 @@ class HlsQualitySelectorPlugin {
     this._currentQuality = height;
 
     if (this.config.displayCurrentQuality) {
-      this.setButtonInnerText(height === 'auto' ? height : `${height}p`);
+      this.setButtonInnerText(height === 'auto' ? 'auto' : height === 'original' ? 'original' : `${height}p`);
     }
 
     for (let i = 0; i < qualityList.length; ++i) {
       const quality = qualityList[i];
-
+      quality.enabled = quality.height === height || height === 'auto' || height === 'original';
-      quality.enabled = quality.height === height || height === 'auto';
     }
+
+    if (height === 'original') {
+      if (this.player.currentSrc() !== this.player.claimSrcOriginal.src) {
+        setTimeout(() => this.swapSrcTo('original'));
+      }
+    } else {
+      if (!this.player.isLivestream && this.player.currentSrc() !== this.player.claimSrcVhs.src) {
+        setTimeout(() => this.swapSrcTo('vhs'));
+
+        if (height !== 'auto') {
+          // -- Re-select quality --
+          // Until we have "persistent quality" implemented, we need to do this
+          // because the VHS internals default to "auto" when initialized,
+          // causing a GUI mismatch.
+          setTimeout(() => this.setQuality(height), 1000);
+        }
+      }
+    }
+
     this._qualityButton.unpressButton();
   }
 

ui/component/viewers/videoViewer/internal/plugins/videojs-http-streaming--override/config.js

@@ -0,0 +1,14 @@
+export default {
+  GOAL_BUFFER_LENGTH: 30,
+  MAX_GOAL_BUFFER_LENGTH: 60,
+  GOAL_BUFFER_LENGTH_RATE: 1,
+  // 0.5 MB/s
+  INITIAL_BANDWIDTH: 4194304,
+  // A fudge factor to apply to advertised playlist bitrates to account for
+  // temporary flucations in client bandwidth
+  BANDWIDTH_VARIANCE: 1.2,
+  // How much of the buffer must be filled before we consider upswitching
+  BUFFER_LOW_WATER_LINE: 0,
+  MAX_BUFFER_LOW_WATER_LINE: 30,
+  BUFFER_LOW_WATER_LINE_RATE: 1,
+};

ui/component/viewers/videoViewer/internal/plugins/videojs-http-streaming--override/playlist-selectors.js

@@ -0,0 +1,223 @@
+/* eslint-disable */
+import window from 'global/window';
+import Config from './config';
+import Playlist from './playlist';
+
+// Utilities
+
+/**
+ * Returns the CSS value for the specified property on an element
+ * using `getComputedStyle`. Firefox has a long-standing issue where
+ * getComputedStyle() may return null when running in an iframe with
+ * `display: none`.
+ *
+ * @see https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+ * @param {HTMLElement} el the htmlelement to work on
+ * @param {string} the proprety to get the style for
+ */
+const safeGetComputedStyle = function(el, property) {
+  if (!el) {
+    return '';
+  }
+
+  const result = window.getComputedStyle(el);
+
+  if (!result) {
+    return '';
+  }
+
+  return result[property];
+};
+
+/**
+ * Resuable stable sort function
+ *
+ * @param {Playlists} array
+ * @param {Function} sortFn Different comparators
+ * @function stableSort
+ */
+const stableSort = function(array, sortFn) {
+  const newArray = array.slice();
+
+  array.sort(function(left, right) {
+    const cmp = sortFn(left, right);
+
+    if (cmp === 0) {
+      return newArray.indexOf(left) - newArray.indexOf(right);
+    }
+    return cmp;
+  });
+};
+
+/**
+ * Chooses the appropriate media playlist based on bandwidth and player size
+ *
+ * @param {Object} master
+ *        Object representation of the master manifest
+ * @param {number} playerBandwidth
+ *        Current calculated bandwidth of the player
+ * @param {number} playerWidth
+ *        Current width of the player element (should account for the device
+ *   pixel ratio)
+ * @param {number} playerHeight
+ *        Current height of the player element (should account for the device
+ *   pixel ratio)
+ * @param {boolean} limitRenditionByPlayerDimensions
+ *        True if the player width and height should be used during the
+ *   selection, false otherwise
+ * @return {Playlist} the highest bitrate playlist less than the
+ * currently detected bandwidth, accounting for some amount of
+ * bandwidth variance
+ */
+export const simpleSelector = function(
+  master,
+  playerBandwidth,
+  playerWidth,
+  playerHeight,
+  limitRenditionByPlayerDimensions
+) {
+  // convert the playlists to an intermediary representation to make comparisons easier
+  let sortedPlaylistReps = master.playlists.map((playlist) => {
+    let bandwidth;
+    const width = playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.width;
+    const height = playlist.attributes.RESOLUTION && playlist.attributes.RESOLUTION.height;
+
+    bandwidth = playlist.attributes.BANDWIDTH;
+
+    bandwidth = bandwidth || window.Number.MAX_VALUE;
+
+    return {
+      bandwidth,
+      width,
+      height,
+      playlist
+    };
+  });
+
+  stableSort(sortedPlaylistReps, (left, right) => left.bandwidth - right.bandwidth);
+
+  // filter out any playlists that have been excluded due to
+  // incompatible configurations
+  sortedPlaylistReps = sortedPlaylistReps.filter((rep) => !Playlist.isIncompatible(rep.playlist));
+
+  // filter out any playlists that have been disabled manually through the representations
+  // api or blacklisted temporarily due to playback errors.
+  let enabledPlaylistReps = sortedPlaylistReps.filter((rep) => Playlist.isEnabled(rep.playlist));
+
+  if (!enabledPlaylistReps.length) {
+    // if there are no enabled playlists, then they have all been blacklisted or disabled
+    // by the user through the representations api. In this case, ignore blacklisting and
+    // fallback to what the user wants by using playlists the user has not disabled.
+    enabledPlaylistReps = sortedPlaylistReps.filter((rep) => !Playlist.isDisabled(rep.playlist));
+  }
+
+  // filter out any variant that has greater effective bitrate
+  // than the current estimated bandwidth
+  const bandwidthPlaylistReps = enabledPlaylistReps.filter((rep) => rep.bandwidth * Config.BANDWIDTH_VARIANCE < playerBandwidth);
+
+  let highestRemainingBandwidthRep =
+    bandwidthPlaylistReps[bandwidthPlaylistReps.length - 1];
+
+  // get all of the renditions with the same (highest) bandwidth
+  // and then taking the very first element
+  const bandwidthBestRep = bandwidthPlaylistReps.filter((rep) => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+
+  // if we're not going to limit renditions by player size, make an early decision.
+  if (limitRenditionByPlayerDimensions === false) {
+    const chosenRep = (
+      bandwidthBestRep ||
+      enabledPlaylistReps[0] ||
+      sortedPlaylistReps[0]
+    );
+
+    return chosenRep ? chosenRep.playlist : null;
+  }
+
+  // filter out playlists without resolution information
+  const haveResolution = bandwidthPlaylistReps.filter((rep) => rep.width && rep.height);
+
+  // sort variants by resolution
+  stableSort(haveResolution, (left, right) => left.width - right.width);
+
+  // if we have the exact resolution as the player use it
+  const resolutionBestRepList = haveResolution.filter((rep) => rep.width === playerWidth && rep.height === playerHeight);
+
+  highestRemainingBandwidthRep = resolutionBestRepList[resolutionBestRepList.length - 1];
+  // ensure that we pick the highest bandwidth variant that have exact resolution
+  const resolutionBestRep = resolutionBestRepList.filter((rep) => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+
+  let resolutionPlusOneList;
+  let resolutionPlusOneSmallest;
+  let resolutionPlusOneRep;
+
+  // find the smallest variant that is larger than the player
+  // if there is no match of exact resolution
+  if (!resolutionBestRep) {
+    resolutionPlusOneList = haveResolution.filter((rep) => rep.width > playerWidth || rep.height > playerHeight);
+
+    // find all the variants have the same smallest resolution
+    resolutionPlusOneSmallest = resolutionPlusOneList.filter((rep) => rep.width === resolutionPlusOneList[0].width &&
+               rep.height === resolutionPlusOneList[0].height);
+
+    // ensure that we also pick the highest bandwidth variant that
+    // is just-larger-than the video player
+    highestRemainingBandwidthRep =
+      resolutionPlusOneSmallest[resolutionPlusOneSmallest.length - 1];
+    resolutionPlusOneRep = resolutionPlusOneSmallest.filter((rep) => rep.bandwidth === highestRemainingBandwidthRep.bandwidth)[0];
+  }
+
+  // fallback chain of variants
+  const chosenRep = (
+    resolutionPlusOneRep ||
+    resolutionBestRep ||
+    bandwidthBestRep ||
+    enabledPlaylistReps[0] ||
+    sortedPlaylistReps[0]
+  );
+
+  return chosenRep ? chosenRep.playlist : null;
+};
+
+// Playlist Selectors
+
+/**
+ * Chooses the appropriate media playlist based on the most recent
+ * bandwidth estimate and the player size.
+ *
+ * Expects to be called within the context of an instance of VhsHandler
+ *
+ * @return {Playlist} the highest bitrate playlist less than the
+ * currently detected bandwidth, accounting for some amount of
+ * bandwidth variance
+ */
+export const lastBandwidthSelector = function() {
+  const pixelRatio = this.useDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+
+  const selectedBandwidth = simpleSelector(
+    this.playlists.master,
+    this.systemBandwidth,
+    parseInt(safeGetComputedStyle(this.tech_.el(), 'width'), 10) * pixelRatio,
+    parseInt(safeGetComputedStyle(this.tech_.el(), 'height'), 10) * pixelRatio,
+    this.limitRenditionByPlayerDimensions
+  );
+
+  const player = this.player_;
+  const hlsQualitySelector = player.hlsQualitySelector;
+  const originalHeight = hlsQualitySelector.config.originalHeight;
+
+  if (originalHeight && hlsQualitySelector) {
+    if (hlsQualitySelector.getCurrentQuality() === 'auto') {
+      if (selectedBandwidth.attributes.RESOLUTION.height === originalHeight) {
+        if (player.claimSrcOriginal && player.currentSrc() !== player.claimSrcOriginal?.src) {
+          setTimeout(() => {
+            const currentTime = player.currentTime();
+            player.src(player.claimSrcOriginal);
+            player.currentTime(currentTime);
+          });
+        }
+      }
+    }
+  }
+
+  return selectedBandwidth;
+};

ui/component/viewers/videoViewer/internal/plugins/videojs-http-streaming--override/playlist.js

@@ -0,0 +1,59 @@
+/**
+ * @file playlist.js
+ *
+ * Playlist related utilities.
+ */
+
+/**
+ * Check whether the playlist is blacklisted or not.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is blacklisted or not
+ * @function isBlacklisted
+ */
+export const isBlacklisted = function(playlist) {
+  return playlist.excludeUntil && playlist.excludeUntil > Date.now();
+};
+
+/**
+ * Check whether the playlist is compatible with current playback configuration or has
+ * been blacklisted permanently for being incompatible.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is incompatible or not
+ * @function isIncompatible
+ */
+export const isIncompatible = function(playlist) {
+  return playlist.excludeUntil && playlist.excludeUntil === Infinity;
+};
+
+/**
+ * Check whether the playlist is enabled or not.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is enabled or not
+ * @function isEnabled
+ */
+export const isEnabled = function(playlist) {
+  const blacklisted = isBlacklisted(playlist);
+
+  return (!playlist.disabled && !blacklisted);
+};
+
+/**
+ * Check whether the playlist has been manually disabled through the representations api.
+ *
+ * @param {Object} playlist the media playlist object
+ * @return {boolean} whether the playlist is disabled manually or not
+ * @function isDisabled
+ */
+export const isDisabled = function(playlist) {
+  return playlist.disabled;
+};
+
+export default {
+  isEnabled,
+  isDisabled,
+  isBlacklisted,
+  isIncompatible,
+};

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -30,10 +30,17 @@ require('@silvermine/videojs-chromecast')(videojs);
 require('@silvermine/videojs-airplay')(videojs);
 
 export type Player = {
+  // -- custom --
+  claimSrcOriginal: ?{ src: string, type: string },
+  claimSrcVhs: ?{ src: string, type: string },
+  isLivestream?: boolean,
+  // -- original --
   controlBar: { addChild: (string, any) => void },
   loadingSpinner: any,
   autoplay: (any) => boolean,
   chromecast: (any) => void,
+  hlsQualitySelector: ?any,
+  tech: (?boolean) => { vhs: ?any },
   currentTime: (?number) => number,
   dispose: () => void,
   duration: () => number,
@@ -51,6 +58,8 @@ export type Player = {
   playbackRate: (?number) => number,
   readyState: () => number,
   requestFullscreen: () => boolean,
+  src: ({ src: string, type: string }) => ?string,
+  currentSrc: () => string,
   userActive: (?boolean) => boolean,
   volume: (?number) => number,
 };
@@ -276,7 +285,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       }
 
       // Add quality selector to player
-      if (showQualitySelector) player.hlsQualitySelector({ displayCurrentQuality: true });
+      if (showQualitySelector) {
+        player.hlsQualitySelector({
+          displayCurrentQuality: true,
+          originalHeight: claimValues?.video?.height,
+        });
+      }
 
       // Add recsys plugin
       if (shareTelemetry) {
@@ -333,19 +347,17 @@ export default React.memo<Props>(function VideoJs(props: Props) {
   //   }
   // }, [showQualitySelector]);
 
-  /** instantiate videoJS and dispose of it when done with code **/
   // This lifecycle hook is only called once (on mount), or when `isAudio` or `source` changes.
   useEffect(() => {
     (async function () {
-      // test if perms to play video are available
       let canAutoplayVideo = await canAutoplay.video({ timeout: 2000, inline: true });
-
       canAutoplayVideo = canAutoplayVideo.result === true;
 
       const vjsElement = createVideoPlayerDOM(containerRef.current);
-
-      // Initialize Video.js
       const vjsPlayer = initializeVideoPlayer(vjsElement, canAutoplayVideo);
+      if (!vjsPlayer) {
+        return;
+      }
 
       // Add reference to player to global scope
       window.player = vjsPlayer;
@@ -355,50 +367,35 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
       window.addEventListener('keydown', curried_function(playerRef, containerRef));
 
-      // $FlowFixMe
       const controlBar = document.querySelector('.vjs-control-bar');
-      if (controlBar) controlBar.style.setProperty('opacity', '1', 'important');
+      if (controlBar) {
+        controlBar.style.setProperty('opacity', '1', 'important');
+      }
 
       if (isLivestreamClaim && userClaimId) {
-        // $FlowFixMe
+        vjsPlayer.isLivestream = true;
         vjsPlayer.addClass('livestreamPlayer');
-
+        vjsPlayer.src({ type: 'application/x-mpegURL', src: livestreamVideoUrl });
-        // $FlowFixMe
-        vjsPlayer.src({
-          type: 'application/x-mpegURL',
-          src: livestreamVideoUrl,
-        });
       } else {
-        // $FlowFixMe
+        vjsPlayer.isLivestream = false;
         vjsPlayer.removeClass('livestreamPlayer');
 
         // change to m3u8 if applicable
         const response = await fetch(source, { method: 'HEAD', cache: 'no-store' });
-
         playerServerRef.current = response.headers.get('x-powered-by');
+        vjsPlayer.claimSrcOriginal = { type: sourceType, src: source };
 
         if (response && response.redirected && response.url && response.url.endsWith('m3u8')) {
-          // use m3u8 source
+          vjsPlayer.claimSrcVhs = { type: 'application/x-mpegURL', src: response.url };
-          // $FlowFixMe
+          vjsPlayer.src(vjsPlayer.claimSrcVhs);
-          vjsPlayer.src({
-            type: 'application/x-mpegURL',
-            src: response.url,
-          });
         } else {
-          // use original mp4 source
+          vjsPlayer.src(vjsPlayer.claimSrcOriginal);
-          // $FlowFixMe
-          vjsPlayer.src({
-            type: sourceType,
-            src: source,
-          });
         }
       }
 
-      // load video once source setup
-      // $FlowFixMe
       vjsPlayer.load();
 
-      // fix invisible vidcrunch overlay on IOS
+      // fix invisible vidcrunch overlay on IOS  << TODO: does not belong here. Move to ads.jsx (#739)
       if (IS_IOS) {
         // ads video player
         const adsClaimDiv = document.querySelector('.ads__claim-item');

ui/component/viewers/videoViewer/view.jsx

@@ -27,11 +27,14 @@ import type { HomepageCat } from 'util/buildHomepage';
 import debounce from 'util/debounce';
 import { formatLbryUrlForWeb, generateListSearchUrlParams } from 'util/url';
 import useInterval from 'effects/use-interval';
+import { lastBandwidthSelector } from './internal/plugins/videojs-http-streaming--override/playlist-selectors';
 
 // const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
 // const PLAY_TIMEOUT_LIMIT = 2000;
 const PLAY_POSITION_SAVE_INTERVAL_MS = 15000;
 
+const USE_ORIGINAL_STREAM_FOR_OPTIMIZED_AUTO = false;
+
 type Props = {
   position: number,
   changeVolume: (number) => void,
@@ -382,6 +385,17 @@ function VideoViewer(props: Props) {
     // re-factoring.
     player.on('loadedmetadata', () => restorePlaybackRate(player));
 
+    // Override "auto" to use non-vhs url when the quality matches.
+    if (USE_ORIGINAL_STREAM_FOR_OPTIMIZED_AUTO) {
+      player.on('loadedmetadata', () => {
+        const vhs = player.tech(true).vhs;
+        if (vhs) {
+          // https://github.com/videojs/http-streaming/issues/749#issuecomment-606972884
+          vhs.selectPlaylist = lastBandwidthSelector;
+        }
+      });
+    }
+
     // used for tracking buffering for watchman
     player.on('tracking:buffered', doTrackingBuffered);