From 5383867f709f2664586bbec175eb668ad3d7b9cd Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Fri, 17 Feb 2012 17:31:39 +0000
Subject: [PATCH] begin to add some keyboard shortcuts to video view annotation
 panel

---
 source/Ox.UI/js/Video/Ox.VideoPanel.js | 44 +++++++++++++++++---------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/source/Ox.UI/js/Video/Ox.VideoPanel.js b/source/Ox.UI/js/Video/Ox.VideoPanel.js
index bec350c5..b6db25b4 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPanel.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPanel.js
@@ -61,9 +61,8 @@ Ox.VideoPanel = function(options, self) {
             })
             .bindEvent({
                 resize: resizeElement,
-                key_space: function() {
-                    that.togglePlay();
-                }
+                key_0: toggleMuted,
+                key_space: togglePaused
             });
 
     self.fullscreen = false;
@@ -153,6 +152,7 @@ Ox.VideoPanel = function(options, self) {
         })
         .css({left: '4px', top: '4px'})
         .bindEvent({
+            mousedown: that.gainFocus,
             position: changeTimeline
         })
         .appendTo(self.$controls);
@@ -233,6 +233,17 @@ Ox.VideoPanel = function(options, self) {
             }
         });
 
+    [
+        '0', 'b', 'backslash', 'closebracket', 'comma', 'dot',
+        'f', 'g', 'i', 'n', 'o', 'openbracket', 'p',
+        'shift_0', 'shift_g', 'shift_i', 'shift_o', 'slash', 'space'
+    ].forEach(function(key) {
+        key = 'key_' + key;
+        self.$annotationPanel.bindEvent(key, function() {
+            that.triggerEvent(key);
+        });
+    });    
+
     that.$element = Ox.SplitPanel({
             elements: [
                 {
@@ -359,15 +370,22 @@ Ox.VideoPanel = function(options, self) {
         });
     }
 
+    function toggleMuted() {
+        self.$video.toggleMuted();
+    }
+
+    function togglePaused() {
+        self.$video.togglePaused();
+        self.$video.options('paused') && that.triggerEvent('position', {
+            position: self.$video.options('position')
+        });
+    }
+
     self.setOption = function(key, value) {
         if (key == 'fullscreen') {
-            self.$video.options({
-                fullscreen: value
-            });
+            self.$video.options({fullscreen: value});
         } else if (key == 'height') {
-            self.$video.options({
-                height: getPlayerHeight()
-            });
+            self.$video.options({height: getPlayerHeight()});
         } else if (key == 'in' || key == 'out') {
             setPoint(key, value);
         } else if (key == 'position') {
@@ -381,12 +399,8 @@ Ox.VideoPanel = function(options, self) {
         } else if (key == 'showTimeline') {
             self.$videoPanel.toggle(1);
         } else if (key == 'width') {
-            self.$video.options({
-                width: getPlayerWidth()
-            });
-            self.$timeline.options({
-                width: getTimelineWidth()
-            });
+            self.$video.options({width: getPlayerWidth()});
+            self.$timeline.options({width: getTimelineWidth()});
         }
     }