some improvements to fullscreen mode

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) {
+            css = Ox.extend({
-                self.offset = that.offset();
-            }
-            css = {
-                left: self.options.fullscreen ? 0 : self.offset.left + 'px',
-                top: self.options.fullscreen ? 0 : self.offset.top + 'px',
                 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') {
+        } else if (element == 'poster' || element == 'video') {
-            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') {
             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',
+                    left: self.absoluteOffset.left + 'px',
-                    top: self.offset.top + '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',
+                        left: self.relativeOffset.left + 'px',
-                        top: self.offset.top + '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() {