Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

more orientation cleanup and real fullscreen support

  • Loading branch information...
commit 692165ebbf4a7c8f8dbde1d9a8b6659496915cb9 1 parent cefa080
@davidflanagan davidflanagan authored
View
2  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>
View
25 apps/video/js/video.js
@@ -80,14 +80,7 @@ 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;
@@ -95,28 +88,33 @@ window.addEventListener('DOMContentLoaded', function() {
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
View
6 apps/video/style/controls-800px.css
@@ -15,12 +15,12 @@
/* 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;
}
@@ -28,7 +28,7 @@ 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");
View
10 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;
View
9 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] {
Please sign in to comment.
Something went wrong with that request. Please try again.