From cc748127bbbd13d9f4f00e785d87a2817ea21020 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 15 May 2011 09:52:37 +0200 Subject: [PATCH] some improvements to fullscreen mode --- source/Ox.UI/js/Video/Ox.VideoPlayer.js | 110 ++++++++++++------------ 1 file changed, 53 insertions(+), 57 deletions(-) diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index dd6a9924..ef39b2df 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -138,6 +138,9 @@ Ox.VideoPlayer = function(options, self) { setPosition(self.options.position + self.secondsPerFrame); self.video.currentTime = self.options.position; }, + key_shift_f: function() { + toggleFullscreen(); + }, key_space: function() { self.$playButton && self.$playButton.toggleTitle(); togglePaused(); @@ -737,6 +740,7 @@ Ox.VideoPlayer = function(options, self) { self.options.duration = self.out - self['in']; self.video.currentTime = self.options.position; self.$video.css(getCSS('video')); + self.$poster && self.$poster.css(getCSS('poster')); hideLoadingIcon(); if (self.options.showIcon || self.options.showIconOnLoad) { @@ -884,7 +888,7 @@ Ox.VideoPlayer = function(options, self) { function getCSS(element) { var css; - if (element == 'controls') { + if (element == 'controls' || element == 'titlebar') { css = { width: self.width + 'px' }; @@ -904,12 +908,7 @@ Ox.VideoPlayer = function(options, self) { height: logoHeight + 'px', }; } else if (element == 'player') { - if (!self.offset) { - self.offset = that.offset(); - } - css = { - left: self.options.fullscreen ? 0 : self.offset.left + 'px', - top: self.options.fullscreen ? 0 : self.offset.top + 'px', + css = Ox.extend({ width: self.width + 'px', height: (self.options.fullscreen ? window.innerHeight @@ -917,7 +916,13 @@ Ox.VideoPlayer = function(options, self) { self.options.externalControls ? (!!self.options.controls.length + !!self.options.title) * self.barHeight : 0)) + 'px' - } + }, self.options.fullscreen ? { + left: 0, + top: 0 + } : {}, self.exitFullscreen ? { + left: self.absoluteOffset.left, + top: self.absoluteOffset.top + } : {}); } else if (element == 'playIcon') { var playIconPadding = Math.round(self.iconSize * 1/8), playIconSize = self.iconSize - 2 * playIconPadding - 4; @@ -936,49 +941,7 @@ Ox.VideoPlayer = function(options, self) { marginLeft: position * self.timelineImageWidth - self.timelineImageWidth - 8 + 'px', }; - } else if (element == 'poster') { - css = { - width: self.width + 'px', - height: self.height + 'px' - }; - } else if (element == 'progress') { - css = { - width: self.timelineImageWidth + 'px', - marginLeft: -self.timelineImageWidth + 'px' - }; - } else if (element == 'subtitle') { - css = { - bottom: parseInt(self.height / 16) + 'px', - width: self.width + 'px', - fontSize: parseInt(self.height / 20) + 'px', - WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)' - }; - } else if (element == 'space') { - css = { - width: self.timelineWidth + 'px' - }; - } else if (element == 'timeline') { - css = { - width: self.timelineWidth + 'px' - }; - } else if (element == 'timelineImage') { - css = { - width: self.timelineImageWidth + 'px' - }; - } else if (element == 'timelineImages') { - css = { - width: self.timelineImageWidth + 'px' - }; - } else if (element == 'timelineInterface') { - css = { - width: self.timelineWidth + 'px', - marginLeft: -self.timelineWidth + 'px' - }; - } else if (element == 'titlebar') { - css = { - width: self.width + 'px' - }; - } else if (element == 'video') { + } else if (element == 'poster' || element == 'video') { var playerWidth = self.width, playerHeight = self.height, playerRatio = playerWidth / playerHeight, @@ -1002,6 +965,31 @@ Ox.VideoPlayer = function(options, self) { marginLeft: parseInt((playerWidth - width) / 2), marginTop: parseInt((playerHeight - height) / 2) }; + } else if (element == 'progress') { + css = { + width: self.timelineImageWidth + 'px', + marginLeft: -self.timelineImageWidth + 'px' + }; + } else if (element == 'subtitle') { + css = { + bottom: parseInt(self.height / 16) + 'px', + width: self.width + 'px', + fontSize: parseInt(self.height / 20) + 'px', + WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)' + }; + } else if (element == 'space' || element == 'timeline') { + css = { + width: self.timelineWidth + 'px' + }; + } else if (element == 'timelineImage' || element == 'timelineImages') { + css = { + width: self.timelineImageWidth + 'px' + }; + } else if (element == 'timelineInterface') { + css = { + width: self.timelineWidth + 'px', + marginLeft: -self.timelineWidth + 'px' + }; } else if (element == 'videoContainer') { css = { width: self.width + 'px', @@ -1112,7 +1100,7 @@ Ox.VideoPlayer = function(options, self) { } function toggleFullscreen() { - var wasPlaying; + var parentOffset, wasPlaying; self.options.fullscreen = !self.options.fullscreen; if (!self.options.paused) { self.video.pause(); @@ -1120,11 +1108,16 @@ Ox.VideoPlayer = function(options, self) { } if (self.options.fullscreen) { self.$parent = that.parent(); - self.offset = that.offset(); + parentOffset = self.$parent.offset(); + self.absoluteOffset = that.offset(); + self.relativeOffset = { + left: self.absoluteOffset.left - parentOffset.left, + top: self.absoluteOffset.top - parentOffset.top + }; that.detach() .css({ - left: self.offset.left + 'px', - top: self.offset.top + 'px', + left: self.absoluteOffset.left + 'px', + top: self.absoluteOffset.top + 'px', zIndex: 1000 }) .appendTo(Ox.UI.$body); @@ -1132,14 +1125,16 @@ Ox.VideoPlayer = function(options, self) { wasPlaying && self.video.play(); }); } else { + self.exitFullscreen = true; setSizes(function() { that.detach() .css({ - left: self.offset.left + 'px', - top: self.offset.top + 'px' + left: self.relativeOffset.left + 'px', + top: self.relativeOffset.top + 'px' }) .appendTo(self.$parent); wasPlaying && self.video.play(); + self.exitFullscreen = false; }); } } @@ -1189,6 +1184,7 @@ Ox.VideoPlayer = function(options, self) { function toggleScale() { self.options.scaleToFill = !self.options.scaleToFill; self.$video.animate(getCSS('video'), 250); + self.$poster && self.$poster.animate(getCSS('poster'), 250); } function toggleSize() {