From 46d71a573411c19f91819535096498ff00efa674 Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 17 May 2011 20:01:40 +0200 Subject: [PATCH] fix a bug where, when dragging on timeline, the dragend position might not be registered --- .../Ox.UI/js/Video/Ox.SmallVideoTimeline.js | 6 +- source/Ox.UI/js/Video/Ox.VideoPlayer.js | 95 +++++++++---------- 2 files changed, 49 insertions(+), 52 deletions(-) diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js index 9377a3c1..024cf7d1 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js @@ -56,6 +56,10 @@ Ox.SmallVideoTimeline = function(options, self) { .bindEvent({ drag: function(event, e) { mousedown(e); + }, + dragend: function(event, e) { + self.triggered = false; + mousedown(e); } }) .appendTo(that); @@ -224,7 +228,7 @@ Ox.SmallVideoTimeline = function(options, self) { self.$positionMarker.css({ left: self.interfaceLeft + Math.round( self.options.position * self.imageWidth / self.options.duration - ) - (self.options.type == 'editor' ? 4 : 0) + self.options._offset + 'px', + ) - (self.options.type == 'editor' ? 4 : 0) + self.options._offset + 'px' }); } diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 6be0ebe4..0bd0ce89 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -154,12 +154,8 @@ Ox.VideoPlayer = function(options, self) { if (self.options.enableKeyboard) { that.bindEvent({ - key_0: function() { - toggleMuted(true); - }, - key_1: function() { - toggleScale(true); - }, + key_0: toggleMuted, + key_1: toggleScale, key_equal: function() { changeVolumeBy(0.1); }, @@ -177,7 +173,7 @@ Ox.VideoPlayer = function(options, self) { goToNextResult(1); }, key_left: function() { - setPosition(self.options.position - self.secondsPerFrame, true); + setPosition(self.options.position - self.secondsPerFrame); }, key_minus: function() { changeVolumeBy(-0.1); @@ -186,17 +182,15 @@ Ox.VideoPlayer = function(options, self) { playInToOut(); }, key_right: function() { - setPosition(self.options.position + self.secondsPerFrame, true); + setPosition(self.options.position + self.secondsPerFrame); }, key_shift_f: function() { - self.options.enableFullscreen && toggleFullscreen(true); + self.options.enableFullscreen && toggleFullscreen(); }, key_shift_g: function() { goToNextResult(-1); }, - key_space: function() { - togglePaused(true); - } + key_space: togglePaused }) } @@ -274,7 +268,7 @@ Ox.VideoPlayer = function(options, self) { }) .bind({ click: function() { - togglePaused(true); + togglePaused(); } }) .appendTo(that.$element) @@ -564,7 +558,7 @@ Ox.VideoPlayer = function(options, self) { }) .css({float: 'left'}) .bindEvent('click', function() { - toggleFullscreen(); + toggleFullscreen('button'); }) .appendTo(self['$controls' + titlecase]); @@ -581,7 +575,7 @@ Ox.VideoPlayer = function(options, self) { }) .css({float: 'left'}) .bindEvent('click', function() { - toggleMuted(); + toggleMuted('button'); }) .appendTo(self['$controls' + titlecase]); @@ -599,7 +593,7 @@ Ox.VideoPlayer = function(options, self) { }) .css({float: 'left'}) .bindEvent('click', function() { - togglePaused(); + togglePaused('button'); }) .appendTo(self['$controls' + titlecase]); @@ -636,7 +630,7 @@ Ox.VideoPlayer = function(options, self) { click: function() { if (!self.options.paused) { self.playOnSubmit = true; - togglePaused(true); + togglePaused(); } else if (self.playOnLoad) { // if clicked during resolution switch, // don't play on load @@ -815,7 +809,7 @@ Ox.VideoPlayer = function(options, self) { }) .css({float: 'left'}) .bindEvent('click', function() { - toggleScale(); + toggleScale('button'); }) .appendTo(self['$controls' + titlecase]); @@ -1033,7 +1027,7 @@ Ox.VideoPlayer = function(options, self) { function ended() { if (!self.options.paused) { - togglePaused(true); + togglePaused(); } if (self.options.poster) { self.$poster.animate({ @@ -1270,7 +1264,7 @@ Ox.VideoPlayer = function(options, self) { }) .bindEvent({ position: function(data) { - setPosition(data.position, true); + setPosition(data.position, 'largeTimeline'); } }); return $timeline; @@ -1301,7 +1295,7 @@ Ox.VideoPlayer = function(options, self) { }) .bindEvent({ position: function(data) { - setPosition(data.position, true); + setPosition(data.position, 'timeline'); } }); //Ox.print('??', $timeline.find('.OxInterface')) @@ -1415,7 +1409,7 @@ Ox.VideoPlayer = function(options, self) { self.options.duration = self.out - self['in']; self.$video.css(getCSS('video')); self.video.currentTime = self.options.position; - self.playOnLoad && self.options.paused && togglePaused(true); + self.playOnLoad && self.options.paused && togglePaused(); //self.$poster && self.$poster.css(getCSS('poster')); hideLoadingIcon(); @@ -1459,12 +1453,12 @@ Ox.VideoPlayer = function(options, self) { (self.options.playInToOut || self.playInToOut) && self.options.position >= self.options.out ) { - togglePaused(true); - setPosition(self.options.out/*, true*/); + togglePaused(); + setPosition(self.options.out, 'video'); //ended(); self.playInToOut = false; } else { - setPosition(self.options.position); + setPosition(self.options.position, 'video'); } that.triggerEvent('position', { position: self.options.position @@ -1473,9 +1467,9 @@ Ox.VideoPlayer = function(options, self) { function playInToOut() { self.playInToOut = true; - setPosition(self.options['in'], true); + setPosition(self.options['in']); if (self.options.paused) { - togglePaused(true); + togglePaused(); } } @@ -1502,16 +1496,16 @@ Ox.VideoPlayer = function(options, self) { function seeking() { self.seekTimeout = setTimeout(function() { self.$playIcon && self.$playIcon.hide(); - showLoadingIcon(); + showLoadingIcon(); }, 250); } - function setPosition(position, setVideo) { + function setPosition(position, from) { position = Ox.limit(position, self['in'], self['out']); self.options.position = Math.round( position * self.options.fps ) / self.options.fps; - if (setVideo && self.loaded) { + if (self.loaded && from != 'video') { self.video.currentTime = self.options.position; } if (self.iconIsVisible) { @@ -1527,11 +1521,10 @@ Ox.VideoPlayer = function(options, self) { self.posterIsVisible = false; } self.$subtitle && setSubtitle(); - // fixme: setPosition may have been called from these timelines - self.$timeline && self.$timeline.options({ + self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({ position: self.options.position }); - self.$largeTimeline && self.$largeTimeline.options({ + self.$largeTimeline && from != 'largeTimeline' && self.$largeTimeline.options({ position: self.options.position }); self.$position && self.$position.html(formatPosition()); @@ -1540,7 +1533,7 @@ Ox.VideoPlayer = function(options, self) { function setResolution() { if (!self.options.paused) { self.playOnLoad = true; - togglePaused(true); + togglePaused(); } self.loaded = false; showLoadingIcon(); @@ -1711,15 +1704,15 @@ Ox.VideoPlayer = function(options, self) { if (!found) { position = self.results[direction == 1 ? 0 : self.results.length - 1]['in']; } - setPosition(position + self.secondsPerFrame, true); + setPosition(position + self.secondsPerFrame); } function submitPositionInput() { self.$positionInput.hide(); self.$position.html('').show(); - setPosition(parsePositionInput(self.$positionInput.options('value')), true); + setPosition(parsePositionInput(self.$positionInput.options('value'))); if (self.playOnSubmit) { - togglePaused(true); + togglePaused(); self.video.play(); self.playOnSubmit = false; } @@ -1736,7 +1729,7 @@ Ox.VideoPlayer = function(options, self) { show && self.$findInput.focusInput(false); } - function toggleFullscreen(toggleButton) { + function toggleFullscreen(from) { var parentOffset, playOnFullscreen; self.options.fullscreen = !self.options.fullscreen; if (!self.options.paused) { @@ -1803,19 +1796,19 @@ Ox.VideoPlayer = function(options, self) { //showInterface(); }); } - if (toggleButton && self.$fullscreenButton) { + if (self.$fullscreenButton && from != 'button') { self.$fullscreenButton.toggleTitle(); } } - function toggleMuted(toggleButton) { + function toggleMuted(from) { self.options.muted = !self.options.muted; self.video.muted = self.options.muted; if (!self.options.muted && !self.options.volume) { self.options.volume = 1; self.video.volume = 1; } - if (toggleButton && self.$muteButton) { + if (self.$muteButton && from != 'button') { self.$muteButton.toggleTitle(); } self.$volumeButton && self.$volumeButton.attr({ @@ -1829,7 +1822,7 @@ Ox.VideoPlayer = function(options, self) { ); } - function togglePaused(toggleButton) { + function togglePaused(from) { self.options.paused = !self.options.paused; self.$timeline && self.$timeline.options({ paused: self.options.paused @@ -1845,7 +1838,7 @@ Ox.VideoPlayer = function(options, self) { } } else { if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) { - setPosition(self.options['in'], true); + setPosition(self.options['in']); } self.video.play(); self.playInterval = setInterval(playing, self.millisecondsPerFrame); @@ -1855,7 +1848,7 @@ Ox.VideoPlayer = function(options, self) { }, 250, togglePlayIcon); } } - if (toggleButton && self.$playButton) { + if (self.$playButton && from != 'button') { self.$playButton.toggleTitle(); } } @@ -1868,11 +1861,11 @@ Ox.VideoPlayer = function(options, self) { }); } - function toggleScale(toggleButton) { + function toggleScale(from) { self.options.scaleToFill = !self.options.scaleToFill; self.$video.animate(getCSS('video'), 250); self.$poster && self.$poster.animate(getCSS('poster'), 250); - if (toggleButton && self.$scaleButton) { + if (self.$scaleButton && from != 'button') { self.$scaleButton.toggleTitle(); } } @@ -1890,17 +1883,17 @@ Ox.VideoPlayer = function(options, self) { self.setOption = function(key, value) { if (key == 'fullscreen') { - toggleFullscreen(true); + toggleFullscreen(); } else if (key == 'height' || key == 'width') { setSizes(); } else if (key == 'muted') { - toggleMuted(true); + toggleMuted(); } else if (key == 'paused') { - togglePaused(true); + togglePaused(); } else if (key == 'position') { - setPosition(value, true); + setPosition(value); } else if (key == 'scaleToFill') { - toggleScale(true); + toggleScale(); } };