From 1e826a8c53803681b157be674944d051b272ca1c Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 17 May 2011 22:44:04 +0200
Subject: [PATCH] some more interface improvements (escape hides secondary
 controls)

---
 source/Ox.UI/js/Video/Ox.VideoPlayer.js | 51 ++++++++++++++++++-------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index 9dba4c88..a12a39f7 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -158,16 +158,8 @@ Ox.VideoPlayer = function(options, self) {
             key_equal: function() {
                 changeVolumeBy(0.1);
             },
-            key_f: function() {
-                // need timeout so the "f" doesn't appear in the input field
-                setTimeout(function() {
-                    if (self.$find.is(':hidden')) {
-                        toggleFind();
-                    } else {
-                        self.$findInput.focusInput();
-                    }
-                }, 0);
-            },
+            key_escape: hideControls,
+            key_f: focusFind,
             key_g: function() {
                 goToNextResult(1);
             },
@@ -1075,6 +1067,20 @@ Ox.VideoPlayer = function(options, self) {
         return results;
     }
 
+    function focusFind() {
+        if (!self.interfaceIsVisible) {
+            showInterface();
+        }
+        // need timeout so the "f" doesn't appear in the input field
+        setTimeout(function() {
+            if (self.$find.is(':hidden')) {
+                toggleFind();
+            } else {
+                self.$findInput.focusInput();
+            }
+        }, 0);
+    }
+
     function formatPosition(position) {
         position = Ox.isUndefined(position) ? self.options.position : position;
         return Ox.formatDuration(position, self.options.showMilliseconds);
@@ -1367,6 +1373,19 @@ Ox.VideoPlayer = function(options, self) {
         return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/');
     }
 
+    function hideControls() {
+        // fixme: slightly wrong name, this is about secondary controls
+        ['find', 'volume', 'resolution'].forEach(function(element) {
+            var $element = self['$' + element];
+            $element && $element.is(':visible') && $element.animate({
+                opacity: 0
+            }, 250, function() {
+                $element.hide().css({opacity: 1});
+            });
+        });
+        self.options.fullscreen && hideInterface();
+    }
+
     function hideInterface() {
         Ox.print('hideInterface');
         clearTimeout(self.interfaceTimeout);
@@ -1632,6 +1651,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function changeVolumeBy(num) {
+        showVolume();
         self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
         setVolume(self.options.volume);
         self.$volumeInput && self.$volumeInput.options({
@@ -1710,6 +1730,11 @@ Ox.VideoPlayer = function(options, self) {
         }).show();
     }
 
+    function showVolume() {
+        !self.interfaceIsVisible && showInterface();
+        self.$volume && self.$volume.is(':hidden') && toggleVolume();
+    }
+
     function submitFindInput(value, hasPressedEnter) {
         self.options.find = value;
         self.results = find(self.options.find, hasPressedEnter);
@@ -1792,9 +1817,7 @@ Ox.VideoPlayer = function(options, self) {
                 that.bind({
                     mousemove: function() {
                         showInterface();
-                        //if (!self.mouseIsInControls) {
-                            hideInterface();                            
-                        //}
+                        hideInterface();                            
                     }
                 });
                 that.find('.OxControls').bind({
@@ -1807,6 +1830,7 @@ Ox.VideoPlayer = function(options, self) {
                 });
                 showInterface();
                 hideInterface();
+                that.gainFocus();
             });
         } else {
             // flag makes the animation end on absolute position
@@ -1837,6 +1861,7 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function toggleMuted(from) {
+        showVolume();
         self.options.muted = !self.options.muted;
         self.video.muted = self.options.muted;
         if (!self.options.muted && !self.options.volume) {