fix: vjs fluid class usage, and remove hacky mutationobserver work-ar…

…ound (#76)
videojs · May 23, 2018 · db749dc · db749dc
1 parent 19ae76d
commit db749dc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 31 deletions.
diff --git a/examples/fluid.html b/examples/fluid.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>videojs-vr Demo</title>
+   <link href="../node_modules/video.js/dist/video-js.css" rel="stylesheet">
+   <link href="../dist/videojs-vr.css" rel="stylesheet">
+</head>
+<body>
+  <video id="videojs-vr-player" class="video-js vjs-16-9 vjs-default-skin" controls>
+    <source src="../samples/eagle-360.mp4" type="video/mp4">
+  </video>
+  <ul>
+    <li><a href="test/">Run unit tests in browser.</a></li>
+  </ul>
+  <script src="../node_modules/video.js/dist/video.js"></script>
+  <script src="../dist/videojs-vr.js"></script>
+  <script>
+    (function(window, videojs) {
+      var player = window.player = videojs('videojs-vr-player');
+      player.mediainfo = player.mediainfo || {};
+      player.mediainfo.projection = '360';
+
+      // AUTO is the default and looks at mediainfo
+      var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
+    }(window, window.videojs));
+  </script>
+</body>
+</html>
diff --git a/iframe.html → examples/iframe.html b/iframe.html → examples/iframe.html
@@ -7,6 +7,6 @@
    <link href="dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
-  <iframe width="700" height="400" src="index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="gyroscope; accelerometer; xr"></iframe>
+  <iframe width="700" height="400" src="../index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="gyroscope; accelerometer; xr"></iframe>
 </body>
 </html>
diff --git a/src/plugin.js b/src/plugin.js
@@ -466,36 +466,7 @@ class VR extends Plugin {
     this.prevTimestamps_ = [];
 
     this.renderedCanvas = this.renderer.domElement;
-
-    const debounce = function(fn, wait) {
-      let timeout;
-
-      return function(...args) {
-        // reset the timer
-        if (timeout) {
-          window.clearTimeout(timeout);
-        }
-        timeout = window.setTimeout(() => fn.apply(undefined, args), wait);
-      };
-    };
-    // we use this to stop webvr-polyfill from making the canvas take up more
-    // space then the video element
-    const setInherit = debounce((mut) => {
-      if (this.observer_) {
-        this.observer_.disconnect();
-      } else {
-        this.observer_ = new window.MutationObserver(setInherit);
-      }
-      this.renderedCanvas.setAttribute('style', 'width: inherit; height: inherit;');
-      this.handleResize_();
-      this.observer_.observe(this.renderedCanvas, {
-        attributes: true,
-        attributeList: ['style']
-      });
-    }, 10);
-
-    setInherit();
-
+    this.renderedCanvas.setAttribute('style', 'width: 100%; height: 100%; position: absolute; top:0;');
     this.player_.el().insertBefore(this.renderedCanvas, this.player_.el().firstChild);
     this.getVideoEl_().style.display = 'none';