feat: Add queue manager (#8649)

Close #8508

---------

Co-authored-by: Wojciech Tyczyński <[email protected]>

Author: avelad

build/all.py

@@ -119,12 +119,12 @@ def main(args):
   build_args_without_ui = ['--name', 'compiled', '+@complete', '-@ui']
   build_args_only_dash_without_ui = [
     '--name', 'dash',
-    '+@complete', '-@ui', '-@polyfillForUI',
+    '+@complete', '-@ui', '-@polyfillForUI', '-@queue',
     '-@hls', '-@transmuxer', '-@mss', '-@offline', '-@cast', '-@optionalText', '-@ads',
   ]
   build_args_only_hls_without_ui = [
     '--name', 'hls',
-    '+@complete', '-@ui', '-@polyfillForUI',
+    '+@complete', '-@ui', '-@polyfillForUI', '-@queue',
     '-@dash', '-@mss', '-@offline', '-@cast', '-@optionalText', '-@ads',
   ]
 

build/types/complete

@@ -8,6 +8,7 @@
 +@manifests
 +@polyfill
 +@polyfillForUI
++@queue
 +@text
 +@optionalText
 +@transmuxer

build/types/core

@@ -8,6 +8,7 @@
 +../../lib/config/auto_show_text.js
 +../../lib/config/codec_switching_strategy.js
 +../../lib/config/cross_boundary_strategy.js
++../../lib/config/repeat_mode.js
 
 +../../lib/debug/asserts.js
 +../../lib/debug/log.js

build/types/queue

@@ -0,0 +1,3 @@
+# Queue Functionality
+
++../../lib/queue/queue_manager.js

build/types/ui

@@ -37,6 +37,7 @@
 +../../ui/settings_menu.js
 +../../ui/small_play_button.js
 +../../ui/skip_ad_button.js
++../../ui/skip_next_button.js
 +../../ui/spacer.js
 +../../ui/statistics_button.js
 +../../ui/text_selection.js

demo/asset_card.js

@@ -259,6 +259,18 @@ shakaDemo.AssetCard = class {
       await shakaDemoMain.loadAsset(this.asset_);
       this.remakeButtons();
     });
+    this.addButton('Add to queue', async () => {
+      if (disableButtons) {
+        return;
+      }
+      disableButtons = true;
+      if (shakaDemoMain.isPlaying()) {
+        await shakaDemoMain.addToQueue(this.asset_);
+      } else {
+        await shakaDemoMain.loadAsset(this.asset_);
+      }
+      this.remakeButtons();
+    });
     let preloadName = 'Start Preload';
     if (this.asset_.preloadManager) {
       preloadName = this.asset_.preloaded ? 'Preloaded!' : 'Preloading...';

demo/common/asset.js

@@ -44,7 +44,7 @@ const ShakaDemoAssetInfo = class {
     this.extraText = [];
     /** @type {!Array<string>} */
     this.extraThumbnail = [];
-    /** @type {!Array<!shakaAssets.ExtraChapter>} */
+    /** @type {!Array<!shaka.extern.ExtraChapter>} */
     this.extraChapter = [];
     /** @type {?string} */
     this.certificateUri = null;
@@ -403,7 +403,7 @@ const ShakaDemoAssetInfo = class {
   }
 
   /**
-   * @param {shakaAssets.ExtraChapter} extraChapter
+   * @param {shaka.extern.ExtraChapter} extraChapter
    * @return {!ShakaDemoAssetInfo}
    */
   addExtraChapter(extraChapter) {

demo/common/assets.js

@@ -182,23 +182,6 @@ shakaAssets.Feature = {
   // Set if the asset has Common Media Server Data.
   CMSD: 'Common Media Server Data',
 };
-
-
-/**
- * @typedef {{
- *   uri: string,
- *   language: string,
- *   mime: string
- * }}
- *
- * @property {string} uri
- *   The URI of the chapter.
- * @property {string} language
- *   The language of the chapter (e.g. 'en').
- * @property {string} mime
- *   The MIME type of the chapter (e.g. 'text/vtt')
- */
-shakaAssets.ExtraChapter;
 // End types and enums }}}
 
 

demo/config.js

@@ -100,6 +100,7 @@ shakaDemo.Config = class {
     this.addCmsdSection_();
     this.addLcevcSection_();
     this.addAdsSection_();
+    this.addQueueManagerSection_();
   }
 
   /**
@@ -419,6 +420,27 @@ shakaDemo.Config = class {
             'ads.allowStartInMiddleOfInterstitial');
   }
 
+  /** @private */
+  addQueueManagerSection_() {
+    const repeatModeOptions = shaka.config.RepeatMode;
+    const repeatModeOptionNames = {
+      'OFF': 'Off',
+      'ALL': 'All',
+      'SINGLE': 'Single',
+    };
+
+    const docLink = this.resolveExternLink_('.QueueConfiguration');
+    this.addSection_('Queue Manager', docLink)
+        .addNumberInput_('Time window at end to preload next Queue item',
+            'queue.preloadNextUrlWindow',
+            /* canBeDecimal= */ true,
+            /* canBeZero= */ true)
+        .addSelectInput_('Repeat mode',
+            'queue.repeatMode',
+            repeatModeOptions,
+            repeatModeOptionNames);
+  }
+
   /**
    * @param {string} category
    * @param {string} sectionName

demo/main.js

@@ -445,6 +445,22 @@ shakaDemo.Main = class {
     const onErrorEvent = (event) => this.onErrorEvent_(event);
     this.player_.addEventListener('error', onErrorEvent);
 
+    this.player_.addEventListener('loaded', () => {
+      if (this.player_.isAudioOnly()) {
+        if (this.video_.poster == shakaDemo.Main.mainPoster_) {
+          this.video_.poster = shakaDemo.Main.audioOnlyPoster_;
+        }
+      } else {
+        if (this.video_.poster == shakaDemo.Main.audioOnlyPoster_) {
+          this.video_.poster = shakaDemo.Main.mainPoster_;
+        }
+      }
+    });
+
+    this.player_.addEventListener('unloading', () => {
+      this.video_.poster = shakaDemo.Main.mainPoster_;
+    });
+
     // Listen to events on controls.
     this.controls_ = ui.getControls();
     this.controls_.addEventListener('error', onErrorEvent);
@@ -1274,6 +1290,9 @@ shakaDemo.Main = class {
     }
     this.player_.unload();
 
+    const queueManager = this.player_.getQueueManager();
+    queueManager.removeAllItems();
+
     // The currently-selected asset changed, so update asset cards.
     this.dispatchEventWithName_('shaka-main-selected-asset-changed');
 
@@ -1286,6 +1305,14 @@ shakaDemo.Main = class {
     this.remakeHash();
   }
 
+  /**
+   * @return {boolean}
+   */
+  isPlaying() {
+    const videoBar = document.getElementById('video-bar');
+    return !videoBar.classList.contains('hidden');
+  }
+
   /**
    * @param {ShakaDemoAssetInfo} asset
    * @param {shaka.offline.Storage=} storage
@@ -1474,52 +1501,37 @@ shakaDemo.Main = class {
         }
       }
 
+      const queueManager = this.player_.getQueueManager();
+      queueManager.removeAllItems();
+
       // Finally, the asset can be loaded.
       if (asset.preloadManager) {
         const preloadManager = asset.preloadManager;
         asset.preloadManager = null;
         await this.player_.load(preloadManager);
-      } else {
-        const manifestUri = await this.getManifestUri_(asset);
-        let mimeType = undefined;
-        if (asset.mimeType &&
-            manifestUri && !manifestUri.startsWith('offline:')) {
-          mimeType = asset.mimeType;
-        }
-        await this.player_.load(
-            manifestUri,
-            /* startTime= */ null,
-            mimeType);
-      }
-
-      if (this.player_.isAudioOnly() &&
-          this.video_.poster == shakaDemo.Main.mainPoster_) {
-        this.video_.poster = shakaDemo.Main.audioOnlyPoster_;
-      }
 
-      if (!(asset.storedContent && asset.storedContent.offlineUri)) {
-        for (const extraText of asset.extraText) {
-          if (extraText.mime) {
-            this.player_.addTextTrackAsync(extraText.uri, extraText.language,
-                extraText.kind, extraText.mime, extraText.codecs);
-          } else {
-            this.player_.addTextTrackAsync(extraText.uri, extraText.language,
-                extraText.kind);
+        if (!(asset.storedContent && asset.storedContent.offlineUri)) {
+          for (const extraText of asset.extraText) {
+            if (extraText.mime) {
+              this.player_.addTextTrackAsync(extraText.uri, extraText.language,
+                  extraText.kind, extraText.mime, extraText.codecs);
+            } else {
+              this.player_.addTextTrackAsync(extraText.uri, extraText.language,
+                  extraText.kind);
+            }
+          }
+          for (const extraThumbnail of asset.extraThumbnail) {
+            this.player_.addThumbnailsTrack(extraThumbnail);
           }
         }
-        for (const extraThumbnail of asset.extraThumbnail) {
-          this.player_.addThumbnailsTrack(extraThumbnail);
-        }
-      }
-
-      for (const extraChapter of asset.extraChapter) {
-        if (extraChapter.mime) {
+        for (const extraChapter of asset.extraChapter) {
           this.player_.addChaptersTrack(
               extraChapter.uri, extraChapter.language, extraChapter.mime);
-        } else {
-          this.player_.addChaptersTrack(
-              extraChapter.uri, extraChapter.language);
         }
+      } else {
+        const queueItem = await this.getQueueItem_(asset);
+        queueManager.insertItems([queueItem]);
+        await queueManager.playItem(0);
       }
 
       // Set media session title, but only if the browser supports that API.
@@ -1550,6 +1562,44 @@ shakaDemo.Main = class {
     this.remakeHash();
   }
 
+  /**
+   * @param {ShakaDemoAssetInfo} asset
+   */
+  async addToQueue(asset) {
+    const queueManager = this.player_.getQueueManager();
+    const queueItem = await this.getQueueItem_(asset);
+    queueManager.insertItems([queueItem]);
+  }
+
+  /**
+   * @param {ShakaDemoAssetInfo} asset
+   * @return {!Promise<shaka.extern.QueueItem>}
+   * @private
+   */
+  async getQueueItem_(asset) {
+    const manifestUri = await this.getManifestUri_(asset);
+    let mimeType = null;
+    if (asset.mimeType &&
+        manifestUri && !manifestUri.startsWith('offline:')) {
+      mimeType = asset.mimeType;
+    }
+    const itemConfig = asset.getConfiguration();
+    shaka.util.PlayerConfiguration.mergeConfigObjects(
+        itemConfig, this.desiredConfig_, this.defaultConfig_);
+    const isOffline = asset.storedContent && asset.storedContent.offlineUri;
+    /** @type {shaka.extern.QueueItem} */
+    const queueItem = {
+      manifestUri: manifestUri,
+      startTime: null,
+      mimeType: mimeType,
+      config: itemConfig,
+      extraText: isOffline ? null : asset.extraText,
+      extraThumbnail: isOffline ? null : asset.extraThumbnail,
+      extraChapter: asset.extraChapter,
+    };
+    return queueItem;
+  }
+
   /** Remakes the location's hash. */
   remakeHash() {
     if (!this.fullyLoaded_) {

externs/shaka/player.js

@@ -2717,6 +2717,7 @@ shaka.extern.TextDisplayerConfiguration;
  *   preferredDecodingAttributes: !Array<string>,
  *   preferForcedSubs: boolean,
  *   preferSpatialAudio: boolean,
+ *   queue: shaka.extern.QueueConfiguration,
  *   restrictions: shaka.extern.Restrictions,
  *   playRangeStart: number,
  *   playRangeEnd: number,
@@ -2843,6 +2844,8 @@ shaka.extern.TextDisplayerConfiguration;
  *   If true, a spatial audio track is preferred.
  *   <br>
  *   Defaults to <code>false</code>.
+ * @property {shaka.extern.QueueConfiguration} queue
+ *   Queue manager configuration and settings.
  * @property {shaka.extern.Restrictions} restrictions
  *   The application restrictions to apply to the tracks.  These are "hard"
  *   restrictions.  Any track that fails to meet these restrictions will not
@@ -2868,6 +2871,30 @@ shaka.extern.TextDisplayerConfiguration;
 shaka.extern.PlayerConfiguration;
 
 
+/**
+ * @typedef {{
+ *   preloadNextUrlWindow: number,
+ *   repeatMode: shaka.config.RepeatMode
+ * }}
+ *
+ * @description
+ * The Queue Manager's configuration options.
+ *
+ * @property {number} preloadNextUrlWindow
+ *   The window of time at the end of the presentation to begin preloading the
+ *   next item. Measured in seconds. If the value is 0, the next URL will not
+ *   be preloaded at all.
+ *   <br>
+ *   Defaults to <code>30</code>.
+ * @property {shaka.config.RepeatMode} repeatMode
+ *   Controls behavior of the queue when all items have been played.
+ *   <br>
+ *   Defaults to {@link shaka.config.RepeatMode#OFF}.
+ * @exportDoc
+ */
+shaka.extern.QueueConfiguration;
+
+
 /**
  * @typedef {{
  *   language: string,
@@ -2989,3 +3016,20 @@ shaka.extern.Chapter;
  * @exportDoc
  */
 shaka.extern.ExtraText;
+
+
+/**
+ * @typedef {{
+ *   uri: string,
+ *   language: string,
+ *   mime: string
+ * }}
+ *
+ * @property {string} uri
+ *   The URI of the chapter.
+ * @property {string} language
+ *   The language of the chapter (e.g. 'en').
+ * @property {string} mime
+ *   The MIME type of the chapter (e.g. 'text/vtt')
+ */
+shaka.extern.ExtraChapter;