Merge pull request #22 from cvan/conditionally-hide-controls

conditionally hide controls

README.md

@@ -1,7 +1,7 @@
 eleVR Web Player
 ================
 
-The eleVR player lets you watch 360 flat and stereo video on your Oculus Rift or Android device with VR headset (Cardboard, Durovis Dive, etc.) from a web browser. It is written with js, html5, and webGL. 
+The eleVR player lets you watch 360 flat and stereo video on your Oculus Rift or Android device with VR headset (Cardboard, Durovis Dive, etc.) from a web browser. It is written with js, html5, and webGL.
 
 eleVR Web Player works with the native browser support currently being implemented by [Firefox](http://blog.bitops.com/blog/2014/06/26/first-steps-for-vr-on-the-web/) and [Chromium](https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ&usp=sharing#list). Please note that these experimental browsers may not have mp4 support.
 
@@ -28,7 +28,7 @@ The following table documents the keyboard controls currently available.
 
 eleVR Player was developed by [eleVR](http://eleVR.com). eleVR is a project of the Communications Design Group and is supported by SAP. The contributors to the project are [@hawksley](https://github.com/hawksley) and [@amluto](https://github.com/amluto).
 
-It currently supports spherical video with equirectangular projections and spherical 3D video with top/bottom equirectangular projections. eleVR Player Master does not come bundled with any video files, but you can get two small demo *.webm files from the gh-pages branch, one for each projection. Alternatively, you can use your own spherical video or can download larger mp4 files from the [eleVR Downloads Page](http://elevr.com/downloads/).
+It currently supports spherical video with equirectangular projections and spherical 3D video with top/bottom equirectangular projections. eleVR Player Master does not come bundled with any video files, but you can get two small demo `*.webm` files from the gh-pages branch, one for each projection. Alternatively, you can use your own spherical video or can download larger mp4 files from the [eleVR Downloads Page](http://elevr.com/downloads/).
 
 ### Support ###
 Using keyboard rotation controls, the player works on standard Firefox and Chrome on Windows, Mac, and Linux. It also runs on Safari (if webgl is enabled). I haven't tested it on other browsers.
@@ -43,11 +43,14 @@ The easiest way to run your own video is to click the folder icon and load your
 You can load your own video from the javascript console, by typing loadVideo("0myVideo.mp4"). If your video is equirectangular 2D, preface your video by 0. If it is stereo top/bottom, preface it by 1. These numbers correspond to the projections in the projectionEnum declaration in elevr-player.js.
 
 If you want to add your video to the drop-down, create a new option in the html video-select element that looks like:
+
+```html
 <option value="0myVideo.mp4">My Video</option>
+```
 
-If you want your video to be the video loaded initially, change the source of the video in the html video tag. You can also update the starting projection, if necessary, by changing the value of the "projection" variable on instantiation (and also changing the default value of the projection-select html select tag.
+If you want your video to be the video loaded initially, change the source of the video in the html video tag. You can also update the starting projection, if necessary, by changing the value of the `projection` variable on instantiation (and also changing the default value of the `<select id="projection-select">` HTML tag).
 
-### Ability to load external video URLs (via querystring, hash, postMessage) ###
+### Ability to load external video URLs (via query string, hash, postMessage) ###
 
 Query-string key-value params:
 [`http://localhost:8080/?autoplay=1&video=http://cdn2.vrideo.com/prod_videos/v1/lSPg9ka_1080p_full.webm`](http://localhost:8080/?autoplay=1&video=http://cdn2.vrideo.com/prod_videos/v1/lSPg9ka_1080p_full.webm)
@@ -71,10 +74,23 @@ window.postMessage({video: 'http://cdn2.vrideo.com/prod_videos/v1/mYNVcD6_480p_f
 data:text/html,<iframe id='i' src='http://localhost:8080' style='border: 0; position: absolute; left: 0; top: 0; height: 100%; width: 100%' allowfullscreen></iframe><script>setTimeout(function () { i.contentWindow.postMessage({video: 'http://cdn2.vrideo.com/prod_videos/v1/mYNVcD6_480p_full.mp4', autoplay: true, loop: true}, '*'); }, 300);</script>
 ```
 
+### Ability to hide video controls ###
+
+Query-string key-value params:
+
+[`http://localhost:8080/?controls=0&video=http://cdn2.vrideo.com/prod_videos/v1/lSPg9ka_1080p_full.webm`](http://localhost:8080/?controls=0&video=http://cdn2.vrideo.com/prod_videos/v1/lSPg9ka_1080p_full.webm)
+
+`postMessage` to the page from the JS console (or from an iframe):
+
+```js
+window.postMessage({controls: false}, '*')
+```
+
+If `autoplay` is not explicitly passed as a parameter, `autoplay` is enabled by default when video controls are hidden (i.e., `controls` is falsy).
 
 ## Possible Issues and Resolutions ##
 ###Unable to play video###
-If you download and run the code yourself, you need to serve the content to localhost before you can view video (due to _cross origin issues_). 
+If you download and run the code yourself, you need to serve the content to localhost before you can view video (due to _cross origin issues_).
 
 Similarly, if you try to run your own video, you may run into __cross origin__ issues if your video is not at the same origin the player. Take a look at [this doc](https://developer.mozilla.org/en-US/docs/Web/WebGL/Cross-Domain_Textures) from mozilla if you run into these issues.
 

css/elevr-player.css

@@ -35,8 +35,8 @@ select {
   border-radius: 3px;
 }
 
-video {
-  display: none;
+.hidden {
+  display: none !important;
 }
 
 a {

index.html

@@ -108,28 +108,28 @@
     <!-- Loading Message -->
     <div id="left-load" class="left">
       <div id="title-l" class="title">Loading Video...</div>
-      <div id="message-l" class="message">Try WASD + Q/E</div>
+      <div id="message-l" class="message hidden">Try WASD + Q/E</div>
     </div>
     <div id="right-load" class="right">
       <div id="title-r" class="title">Loading Video...</div>
-      <div id="message-r" class="message">Try WASD + Q/E</div>
+      <div id="message-r" class="message hidden">Try WASD + Q/E</div>
     </div>
-    <div id="left-play" class="left" style="display:none;">
+    <div id="left-play" class="left hidden">
       <a id="play-l" class="large-play fa fa-play fa-5x"></a>
     </div>
-    <div id="right-play" class="right" style="display:none;">
+    <div id="right-play" class="right hidden">
       <a id="play-r" class="large-play fa fa-play fa-5x"></a>
     </div>
 
     <canvas id="glcanvas">
       Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
     </canvas>
-    <video preload="auto" id="video" loop="true" webkit-playsinline crossOrigin="anonymous">
+    <video class="hidden" preload="auto" id="video" loop="true" webkit-playsinline crossOrigin="anonymous">
       <source src="therelaxatron2.mp4" type="video/mp4">
       <source src="therelaxatron.webm" type="video/webm">
     </video>
         <!-- Video Controls -->
-        <div id="video-controls">
+        <div id="video-controls" class="hidden">
           <a id="play-pause" class="fa fa-play icon" title="Play"></a>
 
 

js/controls.js

@@ -153,11 +153,11 @@ var manualRotation = quat.create(),
      * Video Commands
      */
     loaded: function() {
-      window.leftLoad.style.display = 'none';
-      window.rightLoad.style.display = 'none';
+      window.leftLoad.classList.add('hidden');
+      window.rightLoad.classList.add('hidden');
       if (video.paused) {
-        window.leftPlay.style.display = 'block';
-        window.rightPlay.style.display = 'block';
+        window.leftPlay.classList.remove('hidden');
+        window.rightPlay.classList.remove('hidden');
       }
     },
 
@@ -168,8 +168,8 @@ var manualRotation = quat.create(),
 
       video.play();
       if (!video.paused) { // In case somehow hitting play button doesn't work.
-        window.leftPlay.style.display = 'none';
-        window.rightPlay.style.display = 'none';
+        window.leftPlay.classList.add('hidden');
+        window.rightPlay.classList.add('hidden');
 
         window.playButton.className = 'fa fa-pause icon';
         window.playButton.title = 'Pause';
@@ -184,8 +184,8 @@ var manualRotation = quat.create(),
       window.playButton.className = 'fa fa-play icon';
       window.playButton.title = 'Play';
 
-      window.leftPlay.style.display = 'block';
-      window.rightPlay.style.display = 'block';
+      window.leftPlay.classList.remove('hidden');
+      window.rightPlay.classList.remove('hidden');
     },
 
     playPause: function() {
@@ -259,10 +259,10 @@ var manualRotation = quat.create(),
 
     loadVideo: function(videoFile) {
       controls.pause();
-      window.leftPlay.style.display = 'none';
-      window.rightPlay.style.display = 'none';
-      window.leftLoad.style.display = 'block';
-      window.rightLoad.style.display = 'block';
+      window.leftPlay.classList.add('hidden');
+      window.rightPlay.classList.add('hidden');
+      window.leftLoad.classList.remove('hidden');
+      window.rightLoad.classList.remove('hidden');
 
       webGL.gl.clear(webGL.gl.COLOR_BUFFER_BIT);
 
@@ -306,6 +306,18 @@ var manualRotation = quat.create(),
       } else if (canvas.requestFullScreen){
         canvas.requestFullscreen();
       }
+    },
+
+    hide: function() {
+      window.videoControls.classList.add('hidden');
+      window.messageL.classList.add('hidden');
+      window.messageR.classList.add('hidden');
+    },
+
+    show: function() {
+      window.videoControls.classList.remove('hidden');
+      window.messageL.classList.remove('hidden');
+      window.messageR.classList.remove('hidden');
     }
   };
 

js/elevr-player.js

@@ -27,13 +27,31 @@ var timing = {showTiming: false, // Switch to true to show frame times in the co
               framesSinceIssue: 0
               };
 
-var videoObjectURL = null;
+var called = {};
 var videoOptions = {};
 
-function initElements() {
-  window.container = document.getElementById('video-container');
+function resizeContainer() {
+  if (!window.container) {
+    window.container = document.getElementById('video-container');
+  }
+
   window.container.style.width = window.innerWidth + 'px';
   window.container.style.height = window.innerHeight + 'px';
+}
+
+window.addEventListener('resize', resizeContainer);
+
+function setupControls() {
+  if (called.setupControls) {
+    return;
+  }
+
+  window.videoControls = document.getElementById('video-controls');
+  window.messageL = document.getElementById('message-l');
+  window.messageR = document.getElementById('message-r');
+
+  resizeContainer();
+
   window.leftLoad = document.getElementById('left-load');
   window.rightLoad = document.getElementById('right-load');
   window.leftPlay = document.getElementById('left-play');
@@ -59,15 +77,22 @@ function initElements() {
   document.getElementById('title-l').style.fontSize = window.outerHeight / 20 + 'px';
   document.getElementById('title-r').style.fontSize = window.outerHeight / 20 + 'px';
 
-  document.getElementById('message-l').style.fontSize = window.outerHeight / 30 + 'px';
-  document.getElementById('message-r').style.fontSize = window.outerHeight / 30 + 'px';
+  window.messageL.style.fontSize = window.outerHeight / 30 + 'px';
+  window.messageR.style.fontSize = window.outerHeight / 30 + 'px';
+
+  controls.create();
+
+  called.setupControls = true;
 }
 
 function runEleVRPlayer() {
-  webVR.initWebVR();
+  if (called.runEleVRPlayer) {
+    return;
+  }
 
-  initElements();
-  controls.create();
+  setupControls();
+
+  webVR.initWebVR();
 
   webGL.initWebGL();
 
@@ -98,25 +123,35 @@ function runEleVRPlayer() {
     Array.prototype.slice.call(window.videoSelect.options).forEach(function(option) {
       videoOptions[option.value] = option;
     });
-
-    initFromSettings(window.location.hash || window.location.search);
   }
+
+  initFromSettings(window.location.hash || window.location.search);
+
+  called.runEleVRPlayer = true;
 }
 
 function initFromSettings(newSettings) {
   if (!newSettings) {
+    controls.show();
     return;
   }
 
   var settings = util.getTruthyURLSearchParams(newSettings, {
-    autoplay: false,
-    projection: 'mono',
-    loop: true
+    autoplay: undefined,
+    controls: true,
+    loop: true,
+    projection: 'mono'
   });
 
-  if (!settings.projection) {
-    // Hack because we coerce '0' to `false` in `util.getTruthyURLSearchParams`.
-    settings.projection = '0';
+  if (settings.controls) {
+    controls.show();
+  } else {
+    controls.hide();
+
+    if (typeof settings.autoplay === 'undefined') {
+      // `autoplay` by default if controls are hidden and no explicit `autoplay` param set.
+      settings.autoplay = true;
+    }
   }
 
   settings.projection = util.getCustomProjection(settings.projection);