chore(Demo): Improve ad behavior (#8285)

Allow preload adTagUri to improve the behavior with pre-roll 
Include the AD feature when using a custom asset

Author: avelad

demo/common/asset.js

@@ -161,6 +161,37 @@ const ShakaDemoAssetInfo = class {
     return this;
   }
 
+  /**
+   * @param {shakaAssets.Feature} feature
+   * @return {!ShakaDemoAssetInfo}
+   */
+  removeFeature(feature) {
+    this.features = this.features.filter((f) => f != feature);
+    // Sort the features list, so that features are in a predictable order.
+    this.features.sort(ShakaDemoAssetInfo.caseLessAlphaComparator_);
+    return this;
+  }
+
+  /**
+   * @private
+   */
+  checkAdFeature_() {
+    let isAd = false;
+    if (this.adTagUri || (this.imaVideoId && this.imaContentSrcId) ||
+      this.imaAssetKey || this.mediaTailorUrl) {
+      isAd = true;
+    }
+    if (isAd) {
+      if (!this.features.includes(shakaAssets.Feature.ADS)) {
+        this.addFeature(shakaAssets.Feature.ADS);
+      }
+    } else {
+      if (this.features.includes(shakaAssets.Feature.ADS)) {
+        this.removeFeature(shakaAssets.Feature.ADS);
+      }
+    }
+  }
+
   /**
    * @param {shakaAssets.KeySystem} keySystem
    * @return {!ShakaDemoAssetInfo}
@@ -263,8 +294,8 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   setAdTagUri(uri) {
-    this.adTagUri = uri;
-    this.addFeature(shakaAssets.Feature.ADS);
+    this.adTagUri = uri.trim();
+    this.checkAdFeature_();
     return this;
   }
 
@@ -273,10 +304,8 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   setIMAContentSourceId(id) {
-    this.imaContentSrcId = id;
-    if (!this.features.includes(shakaAssets.Feature.ADS)) {
-      this.addFeature(shakaAssets.Feature.ADS);
-    }
+    this.imaContentSrcId = id.trim();
+    this.checkAdFeature_();
 
     return this;
   }
@@ -286,10 +315,8 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   setIMAVideoId(id) {
-    this.imaVideoId = id;
-    if (!this.features.includes(shakaAssets.Feature.ADS)) {
-      this.addFeature(shakaAssets.Feature.ADS);
-    }
+    this.imaVideoId = id.trim();
+    this.checkAdFeature_();
 
     return this;
   }
@@ -299,10 +326,8 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   setIMAAssetKey(key) {
-    this.imaAssetKey = key;
-    if (!this.features.includes(shakaAssets.Feature.ADS)) {
-      this.addFeature(shakaAssets.Feature.ADS);
-    }
+    this.imaAssetKey = key.trim();
+    this.checkAdFeature_();
 
     return this;
   }
@@ -312,10 +337,8 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   setIMAManifestType(type) {
-    this.imaManifestType = type;
-    if (!this.features.includes(shakaAssets.Feature.ADS)) {
-      this.addFeature(shakaAssets.Feature.ADS);
-    }
+    this.imaManifestType = type.trim();
+    this.checkAdFeature_();
 
     return this;
   }
@@ -326,15 +349,20 @@ const ShakaDemoAssetInfo = class {
    * @return {!ShakaDemoAssetInfo}
    */
   setMediaTailor(url, adsParams=null) {
-    this.mediaTailorUrl = url;
+    this.mediaTailorUrl = url.trim();
     this.mediaTailorAdsParams = adsParams;
-    if (!this.features.includes(shakaAssets.Feature.ADS)) {
-      this.addFeature(shakaAssets.Feature.ADS);
-    }
+    this.checkAdFeature_();
 
     return this;
   }
 
+  /**
+   * @return {boolean}
+   */
+  hasAds() {
+    return this.features.includes(shakaAssets.Feature.ADS);
+  }
+
   /**
    * @param {string} headerName
    * @param {string} headerValue

demo/custom.js

@@ -288,7 +288,7 @@ shakaDemo.Custom = class {
       }
     };
     const adTagOnChange = (input) => {
-      assetInProgress.adTagUri = input.value;
+      assetInProgress.setAdTagUri(input.value);
     };
     this.makeField_(container, 'Ad Tag URL', adTagSetup, adTagOnChange);
 
@@ -302,7 +302,7 @@ shakaDemo.Custom = class {
         this.checkManifestRequired_(assetInProgress);
     };
     const contentSrcIdOnChange = (input) => {
-      assetInProgress.imaContentSrcId = input.value;
+      assetInProgress.setIMAContentSourceId(input.value);
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };
@@ -320,7 +320,7 @@ shakaDemo.Custom = class {
         this.checkManifestRequired_(assetInProgress);
     };
     const videoIdOnChange = (input) => {
-      assetInProgress.imaVideoId = input.value;
+      assetInProgress.setIMAVideoId(input.value);
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };
@@ -337,7 +337,7 @@ shakaDemo.Custom = class {
         this.checkManifestRequired_(assetInProgress);
     };
     const assetKeyChange = (input) => {
-      assetInProgress.imaAssetKey = input.value;
+      assetInProgress.setIMAAssetKey(input.value);
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };
@@ -354,7 +354,7 @@ shakaDemo.Custom = class {
         this.checkManifestRequired_(assetInProgress);
     };
     const manifestTypeChange = (input) => {
-      assetInProgress.imaManifestType = input.value;
+      assetInProgress.setIMAManifestType(input.value);
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };

demo/main.js

@@ -1426,6 +1426,48 @@ shakaDemo.Main = class {
         ui.configure(uiConfig);
       }
 
+      if (asset.hasAds()) {
+        // The player internally, if another stream is loaded, calls
+        // adManager.onAssetUnload and this would prevent the initial preloading
+        // of the ad, so we unload the player first to prevent the player
+        // from being unloaded the new ad.
+        const loadMode = this.player_.getLoadMode();
+        if (loadMode == shaka.Player.LoadMode.MEDIA_SOURCE ||
+            loadMode == shaka.Player.LoadMode.SRC_EQUALS) {
+          await this.player_.unload();
+        }
+      }
+
+      // If the asset has an ad tag attached to it, load the ads
+      const adManager = this.player_.getAdManager();
+      if (adManager && asset.adTagUri) {
+        const adTagUri = asset.adTagUri + Date.now();
+        if (asset.useIMA) {
+          try {
+            // If IMA is blocked by an AdBlocker, init() will throw.
+            // If that happens, just proceed to load.
+            goog.asserts.assert(
+                this.video_ != null, 'this.video should exist!');
+            adManager.initClientSide(
+                this.controls_.getClientSideAdContainer(), this.video_,
+                /** adsRenderingSettings= */ null);
+            const adRequest = new google.ima.AdsRequest();
+            adRequest.adTagUrl = adTagUri;
+            adManager.requestClientSideAds(adRequest);
+          } catch (error) {
+            console.log(error);
+            console.warn('Ads code has been prevented from running. ' +
+              'Proceeding without ads.');
+          }
+        } else {
+          try {
+            await adManager.addAdUrlInterstitial(adTagUri);
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      }
+
       // Finally, the asset can be loaded.
       if (asset.preloadManager) {
         const preloadManager = asset.preloadManager;
@@ -1474,29 +1516,6 @@ shakaDemo.Main = class {
         }
       }
 
-      // If the asset has an ad tag attached to it, load the ads
-      const adManager = this.player_.getAdManager();
-      if (adManager && asset.adTagUri && asset.useIMA) {
-        try {
-          // If IMA is blocked by an AdBlocker, init() will throw.
-          // If that happens, just proceed to load.
-          goog.asserts.assert(this.video_ != null, 'this.video should exist!');
-          adManager.initClientSide(
-              this.controls_.getClientSideAdContainer(), this.video_,
-              /** adsRenderingSettings= */ null);
-          const adRequest = new google.ima.AdsRequest();
-          adRequest.adTagUrl = asset.adTagUri;
-          adManager.requestClientSideAds(adRequest);
-        } catch (error) {
-          console.log(error);
-          console.warn('Ads code has been prevented from running. ' +
-            'Proceeding without ads.');
-        }
-      }
-      if (adManager && asset.adTagUri && !asset.useIMA) {
-        adManager.addAdUrlInterstitial(asset.adTagUri);
-      }
-
       // Set media session title, but only if the browser supports that API.
       if (navigator.mediaSession) {
         const icon = asset.iconUri || shakaDemo.Main.logo_;