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()}); } }