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) {