shaka-player 4.2.3 → 4.3.0

package/ui/ui.js

@@ -290,6 +290,12 @@ shaka.ui.Overlay = class {
     const videos = document.querySelectorAll(
         '[data-shaka-player]');
 
+    // Look for elements marked 'data-shaka-player-canvas'
+    // on the page. These will be used to create our default
+    // UI.
+    const canvases = document.querySelectorAll(
+        '[data-shaka-player-canvas]');
+
     if (!videos.length && !containers.length) {
       // No elements have been tagged with shaka attributes.
     } else if (videos.length && !containers.length) {
@@ -307,8 +313,21 @@ shaka.ui.Overlay = class {
         const videoParent = video.parentElement;
         videoParent.replaceChild(container, video);
         container.appendChild(video);
-
-        shaka.ui.Overlay.setupUIandAutoLoad_(container, video);
+        let currentCanvas = null;
+        for (const canvas of canvases) {
+          goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
+              'Should be a canvas element!');
+          if (canvas.parentElement == container) {
+            currentCanvas = canvas;
+            break;
+          }
+        }
+        if (!currentCanvas) {
+          currentCanvas = document.createElement('canvas');
+          currentCanvas.classList.add('shaka-canvas-container');
+          container.appendChild(currentCanvas);
+        }
+        shaka.ui.Overlay.setupUIandAutoLoad_(container, video, currentCanvas);
       }
     } else {
       for (const container of containers) {
@@ -336,9 +355,25 @@ shaka.ui.Overlay = class {
           container.appendChild(currentVideo);
         }
 
+        let currentCanvas = null;
+        for (const canvas of canvases) {
+          goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
+              'Should be a canvas element!');
+          if (canvas.parentElement == container) {
+            currentCanvas = canvas;
+            break;
+          }
+        }
+        if (!currentCanvas) {
+          currentCanvas = document.createElement('canvas');
+          currentCanvas.classList.add('shaka-canvas-container');
+          container.appendChild(currentCanvas);
+        }
+
         try {
           // eslint-disable-next-line no-await-in-loop
-          await shaka.ui.Overlay.setupUIandAutoLoad_(container, currentVideo);
+          await shaka.ui.Overlay.setupUIandAutoLoad_(
+              container, currentVideo, currentCanvas);
         } catch (e) {
           // This can fail if, for example, not every player file has loaded.
           // Ad-block is a likely cause for this sort of failure.
@@ -377,9 +412,10 @@ shaka.ui.Overlay = class {
   /**
    * @param {!Element} container
    * @param {!Element} video
+   * @param {!Element} canvas
    * @private
    */
-  static async setupUIandAutoLoad_(container, video) {
+  static async setupUIandAutoLoad_(container, video, canvas) {
     // Create the UI
     const player = new shaka.Player(
         shaka.util.Dom.asHTMLMediaElement(video));
@@ -387,6 +423,9 @@ shaka.ui.Overlay = class {
         shaka.util.Dom.asHTMLElement(container),
         shaka.util.Dom.asHTMLMediaElement(video));
 
+    // Attach Canvas used for LCEVC Decoding
+    player.attachCanvas(/** @type {HTMLCanvasElement} */(canvas));
+
     // Get and configure cast app id.
     let castAppId = '';