more orientation cleanup and real fullscreen support

andreasgal · May 10, 2012 · 692165e · 692165e
1 parent cefa080
commit 692165e
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 24 deletions.
diff --git a/apps/video/index.html b/apps/video/index.html
@@ -33,7 +33,7 @@ <h1 data-l10n-id="videos">Videos</h1>
     </ul>
 
     <!-- 'fullscreen' (maximized) video player -->
-    <div id="videoFrame">
+    <div id="videoFrame" class="hidden">
       <video src="about:blank" id="player"></video>
       <!-- video controls -->
       <div id="videoSubtitles"></div>

diff --git a/apps/video/js/video.js b/apps/video/js/video.js
@@ -80,43 +80,41 @@ window.addEventListener('DOMContentLoaded', function() {
 
   // Make the video fit
   function setPlayerSize() {
-    console.log("setPlayerSize");
-
     // compute a CSS transform that centers & maximizes the <video> element
-/*
-    var style = getComputedStyle(document.body);
-    var bWidth = parseInt(style.width, 10);
-    var bHeight = parseInt(style.height, 10);
-*/
     var bWidth = window.innerWidth;
     var bHeight = window.innerHeight;
 
     var scale = Math.floor(
       Math.min(bWidth / player.srcWidth, bHeight / player.srcHeight) * 20
     ) / 20; // round to the lower 5%
 
-    console.log(bWidth, bHeight, scale);
-
     var xOffset = Math.floor((bWidth - scale * player.srcWidth) / 2);
     var yOffset = Math.floor((bHeight - scale * player.srcHeight) / 2);
     var transform = 
       ' translate(' + xOffset + 'px, ' + yOffset + 'px)' +
       ' scale(' + scale + ')';
-    console.log(transform);
+    console.log('SETPLAYERSIZE', transform);
     player.style.MozTransformOrigin = 'top left';
     player.style.MozTransform = transform;
   }
 
   // Rescale when orientation changes
-  screen.addEventListener("mozorientationchange", setPlayerSize);
+//  screen.addEventListener("mozorientationchange", setPlayerSize);
+
+  // Rescale when window size changes. This should get called when
+  // orientation changes and when we go into fullscreen
+  window.addEventListener("resize", setPlayerSize);
 
   // show|hide video player
   function showPlayer(sample) {
     // switch to the video player view
+    $('videoFrame').classList.remove('hidden');
     $('videoControls').classList.add('hidden');
-    document.body.classList.add('fullscreen');
+//    document.body.classList.add('fullscreen');
     $('videoBar').classList.remove('paused');
 
+    $('videoFrame').mozRequestFullScreen();
+
     //TODO: fetch subtitles from UniversalSubtitles.org
     var req = new XMLHttpRequest();
     req.open('GET', sample.subtitles, false);
@@ -147,7 +145,6 @@ window.addEventListener('DOMContentLoaded', function() {
     player.srcWidth = sample.width;   // XXX use player.videoWidth instead
     player.srcHeight = sample.height; // XXX use player.videoHeight instead
     player.play();
-    $('videoFrame').mozRequestFullScreen();
     setPlayerSize();
 
     // XXX in appCache mode, player.duration == Infinity
@@ -170,7 +167,7 @@ window.addEventListener('DOMContentLoaded', function() {
 
     // switch to the video gallery view
     document.mozCancelFullScreen();
-    document.body.classList.remove('fullscreen');
+    $('videoFrame').classList.add('hidden');
     $('videoBar').classList.remove('paused');
 
     // stop player

diff --git a/apps/video/style/controls-800px.css b/apps/video/style/controls-800px.css
@@ -15,20 +15,20 @@
 /* time slider */
 #timeSlider {
   left: 166px;
-  bottom: -moz-calc(100% - 32px);
+  top: -moz-calc(100% - 96px);
   height: 64px;
   width: 378px;
 }
 #elapsedTime {
-  bottom: -moz-calc(100% - 30px);
+  top: -moz-calc(100% - 36px);
   height: 6px;
   border-radius: 6px;
 }
 button#playHead {
   display: block;
   top: 0; /* updated by script (ontimeupdate) */
   left: 0;
-  margin-top: -31px;
+  margin-left: -31px;
   width: 64px;
   height: 64px;
   background-image: url("images/btn_playhead_off.png");

diff --git a/apps/video/style/controls.css b/apps/video/style/controls.css
@@ -17,8 +17,8 @@
 /* video player controls */
 #videoControls {
   position: absolute;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
@@ -51,7 +51,7 @@
 #videoBar {
   position: relative;
   left: -moz-calc(50% - 150px);
-  bottom: -moz-calc(100% - 16px);
+  top: -moz-calc(100% - 128px);
   height: 112px;
   width: 300px;
   margin: 0;
@@ -65,7 +65,7 @@
   height: 96px;
   padding: 0;
   margin: 0;
-  button: 16px;
+  top: -moz-calc(100%-112px);
 }
 
 /* rwd/fwd buttons */
@@ -108,7 +108,7 @@
 }
 #elapsedTime {
   position: absolute;
-  bottom: -moz-calc(100% - 16px);
+  top: -moz-calc(100% - 20px);
   height: 4px;
   width: 0; /* updated by script (ontimeupdate) */
   background-color: #fff;

diff --git a/apps/video/style/video.css b/apps/video/style/video.css
@@ -110,17 +110,24 @@ p.time {
 
 /* fullscreen video player */
 #videoFrame {
-  display: none;
+  display: block;
   position: relative;
   width: 100%;
   height: 100%;
 }
+
+#videoFrame.hidden {
+  display: none;
+}
+
+/*
 body.fullscreen > * {
   display: none;
 }
 body.fullscreen #videoFrame {
   display: block;
 }
+*/
 
 /* localization */
 body.hidden *[data-l10n-id] {