fix(UI): Only create VR canvas when necessary (#8580)

Author: avelad

ui/ui.js

@@ -584,7 +584,7 @@ shaka.ui.Overlay = class {
    * @param {!Element} container
    * @param {!Element} video
    * @param {!Element} lcevcCanvas
-   * @param {!Element} vrCanvas
+   * @param {?Element} vrCanvas
    * @private
    */
   static async setupUIandAutoLoad_(container, video, lcevcCanvas, vrCanvas) {
@@ -593,7 +593,7 @@ shaka.ui.Overlay = class {
     const ui = new shaka.ui.Overlay(player,
         shaka.util.Dom.asHTMLElement(container),
         shaka.util.Dom.asHTMLMediaElement(video),
-        shaka.util.Dom.asHTMLCanvasElement(vrCanvas));
+        vrCanvas ? shaka.util.Dom.asHTMLCanvasElement(vrCanvas) : null);
 
     // Attach Canvas used for LCEVC Decoding
     player.attachCanvas(/** @type {HTMLCanvasElement} */(lcevcCanvas));
@@ -639,7 +639,7 @@ shaka.ui.Overlay = class {
    * @param {!Element} container
    * @param {!NodeList<!Element>} canvases
    * @param {!NodeList<!Element>} vrCanvases
-   * @return {{lcevcCanvas: !Element, vrCanvas: !Element}}
+   * @return {{lcevcCanvas: !Element, vrCanvas: ?Element}}
    * @private
    */
   static findOrMakeSpecialCanvases_(container, canvases, vrCanvases) {
@@ -666,11 +666,6 @@ shaka.ui.Overlay = class {
         break;
       }
     }
-    if (!vrCanvas) {
-      vrCanvas = document.createElement('canvas');
-      vrCanvas.classList.add('shaka-vr-canvas-container');
-      container.appendChild(vrCanvas);
-    }
     return {
       lcevcCanvas,
       vrCanvas,

ui/vr_manager.js

@@ -9,6 +9,7 @@ goog.provide('shaka.ui.VRManager');
 
 goog.require('shaka.log');
 goog.require('shaka.ui.VRWebgl');
+goog.require('shaka.util.Dom');
 goog.require('shaka.util.EventManager');
 goog.require('shaka.util.FakeEvent');
 goog.require('shaka.util.FakeEventTarget');
@@ -54,7 +55,7 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
     this.eventManager_ = new shaka.util.EventManager();
 
     /** @private {?WebGLRenderingContext} */
-    this.gl_ = this.getGL_();
+    this.gl_ = this.getGL_(this.canvas_);
 
     /** @private {?shaka.ui.VRWebgl} */
     this.vrWebgl_ = null;
@@ -167,7 +168,12 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
    * @return {boolean}
    */
   canPlayVR() {
-    return !!this.gl_;
+    if (this.canvas_) {
+      return !!this.gl_;
+    }
+    const canvas =
+        shaka.util.Dom.asHTMLCanvasElement(document.createElement('canvas'));
+    return !!this.getGL_(canvas);
   }
 
   /**
@@ -306,10 +312,15 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
    * @private
    */
   checkVrStatus_() {
-    if (!this.canvas_) {
-      return;
-    }
     if ((this.config_.displayInVrMode || this.vrAsset_)) {
+      if (!this.canvas_) {
+        this.canvas_ = shaka.util.Dom.asHTMLCanvasElement(
+            document.createElement('canvas'));
+        this.canvas_.classList.add('shaka-vr-canvas-container');
+        this.video_.parentElement.insertBefore(
+            this.canvas_, this.video_.nextElementSibling);
+        this.gl_ = this.getGL_(this.canvas_);
+      }
       const newProjectionMode =
           this.vrAsset_ || this.config_.defaultVrProjectionMode;
       if (!this.vrWebgl_) {
@@ -328,7 +339,7 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
         }
       }
     } else if (!this.config_.displayInVrMode && !this.vrAsset_ &&
-        this.vrWebgl_) {
+        this.canvas_ && this.vrWebgl_) {
       this.canvas_.style.display = 'none';
       this.eventManager_.removeAll();
       this.vrWebgl_.release();
@@ -352,11 +363,12 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
   }
 
   /**
+   * @param {?HTMLCanvasElement} canvas
    * @return {?WebGLRenderingContext}
    * @private
    */
-  getGL_() {
-    if (!this.canvas_) {
+  getGL_(canvas) {
+    if (!canvas) {
       return null;
     }
     // The user interface is not intended for devices that are controlled with
@@ -369,7 +381,7 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
       'webgl',
     ];
     for (const webgl of webglContexts) {
-      const gl = this.canvas_.getContext(webgl);
+      const gl = canvas.getContext(webgl);
       if (gl) {
         return /** @type {!WebGLRenderingContext} */(gl);
       }