From f1f66cce81418e84a7e8277df82b0ad92745b8e9 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 17 May 2011 22:20:43 +0200
Subject: [PATCH] fix animation bug when switching back from fullscreen

---
 source/Ox.UI/js/Video/Ox.VideoPlayer.js | 114 ++++++++++++++----------
 1 file changed, 65 insertions(+), 49 deletions(-)

diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index 2570ab7d..9dba4c88 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -189,6 +189,12 @@ Ox.VideoPlayer = function(options, self) {
             key_shift_g: function() {
                 goToNextResult(-1);
             },
+            key_shift_left: function() {
+                setPosition(self.options.position - 1);
+            },
+            key_shift_right: function() {
+                setPosition(self.options.position + 1);
+            },
             key_space: togglePaused
         })
     }
@@ -374,6 +380,7 @@ Ox.VideoPlayer = function(options, self) {
     if (self.options.enableFind) {
 
         self.$find = $('<div>')
+            .addClass('OxControls')
             .css({
                 position: 'absolute',
                 right: 0,
@@ -713,6 +720,7 @@ Ox.VideoPlayer = function(options, self) {
                         .appendTo(self['$controls' + titlecase]);
 
                     self.$resolution = $('<div>')
+                        .addClass('OxControls')
                         .css({
                             position: 'absolute',
                             right: 0,
@@ -907,6 +915,7 @@ Ox.VideoPlayer = function(options, self) {
     if (self.options.enableVolume) {
 
         self.$volume = $('<div>')
+            .addClass('OxControls')
             .css({
                 position: 'absolute',
                 left: 0,
@@ -1360,8 +1369,10 @@ Ox.VideoPlayer = function(options, self) {
 
     function hideInterface() {
         Ox.print('hideInterface');
+        clearTimeout(self.interfaceTimeout);
         self.interfaceTimeout = setTimeout(function() {
             if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
+                self.interfaceIsVisible = false;
                 self.controlsTopAreVisible = false;
                 self.controlsBottomAreVisible = false;
                 self.$controlsTop && self.$controlsTop.animate({
@@ -1471,10 +1482,12 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function playInToOut() {
-        self.playInToOut = true;
-        setPosition(self.options['in']);
-        if (self.options.paused) {
-            togglePaused();
+        if (self.options.out > self.options['in']) {
+            self.playInToOut = true;
+            setPosition(self.options['in']);
+            if (self.options.paused) {
+                togglePaused();
+            }
         }
     }
 
@@ -1643,48 +1656,51 @@ Ox.VideoPlayer = function(options, self) {
     function showInterface() {
         Ox.print('showInterface');
         clearTimeout(self.interfaceTimeout);
-        if (self.$controlsTop) {
-            self.controlsTopAreVisible = true;
+        if (!self.interfaceIsVisible) {
+            self.interfaceIsVisible = true;
+            if (self.$controlsTop) {
+                self.controlsTopAreVisible = true;
+            }
+            if (self.$controlsBottom) {
+                self.controlsBottomAreVisible = true;
+            }
+            self.$controlsTop && self.$controlsTop.animate({
+                opacity: 1
+            }, 250);
+            self.$controlsBottom && self.$controlsBottom.animate({
+                opacity: 1
+            }, 250);
+            self.$find && self.$find.is(':visible') && self.$find.animate({
+                opacity: 1
+            }, 250);
+            self.$volume && self.$volume.is(':visible') && self.$volume.animate({
+                opacity: 1
+            }, 250);
+            self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
+                opacity: 1
+            }, 250);
+            self.$logo && self.$logo.animate({
+                top: getCSS('logo').top,
+                opacity: 0.5
+            }, 250, function() {
+                self.options.logoLink && self.$logo
+                    .bind({
+                        click: function() {
+                            document.location.href = self.options.logoLink;
+                        }
+                    });
+                self.options.logoTitle && self.$logo
+                    .bind({
+                        mouseenter: function(e) {
+                            self.$logoTooltip.show(e);
+                        },
+                        mouseleave: self.$logoTooltip.hide
+                    });
+            });
+            self.$subtitle && self.$subtitle.animate({
+                bottom: getCSS('subtitle').bottom,
+            }, 250);
         }
-        if (self.$controlsBottom) {
-            self.controlsBottomAreVisible = true;
-        }
-        self.$controlsTop && self.$controlsTop.animate({
-            opacity: 1
-        }, 250);
-        self.$controlsBottom && self.$controlsBottom.animate({
-            opacity: 1
-        }, 250);
-        self.$find && self.$find.is(':visible') && self.$find.animate({
-            opacity: 1
-        }, 250);
-        self.$volume && self.$volume.is(':visible') && self.$volume.animate({
-            opacity: 1
-        }, 250);
-        self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
-            opacity: 1
-        }, 250);
-        self.$logo && self.$logo.animate({
-            top: getCSS('logo').top,
-            opacity: 0.5
-        }, 250, function() {
-            self.options.logoLink && self.$logo
-                .bind({
-                    click: function() {
-                        document.location.href = self.options.logoLink;
-                    }
-                });
-            self.options.logoTitle && self.$logo
-                .bind({
-                    mouseenter: function(e) {
-                        self.$logoTooltip.show(e);
-                    },
-                    mouseleave: self.$logoTooltip.hide
-                });
-        });
-        self.$subtitle && self.$subtitle.animate({
-            bottom: getCSS('subtitle').bottom,
-        }, 250);
     }
 
     function showLoadingIcon() {
@@ -1775,10 +1791,10 @@ Ox.VideoPlayer = function(options, self) {
                 playOnFullscreen && self.video.play();
                 that.bind({
                     mousemove: function() {
-                        if (!self.mouseIsInControls) {
-                            showInterface();
+                        showInterface();
+                        //if (!self.mouseIsInControls) {
                             hideInterface();                            
-                        }
+                        //}
                     }
                 });
                 that.find('.OxControls').bind({
@@ -1800,7 +1816,7 @@ Ox.VideoPlayer = function(options, self) {
                 .trigger('mouseleave')
                 .unbind('mouseenter')
                 .unbind('mouseleave');
-            Ox.print('???', self.mouseIsInControls);
+            clearTimeout(self.interfaceTimeout);
             setSizes(function() {
                 self.exitFullscreen = false;
                 that.detach()