0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

fix a bug where, when dragging on timeline, the dragend position might not be registered

Browse source
This commit is contained in:
rolux 2011-05-17 20:01:40 +02:00
parent 9650a29a90
commit 46d71a5734
2 changed files with 49 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -56,6 +56,10 @@ Ox.SmallVideoTimeline = function(options, self) {
.bindEvent({ .bindEvent({
drag: function(event, e) { drag: function(event, e) {
mousedown(e); mousedown(e);
},
dragend: function(event, e) {
self.triggered = false;
mousedown(e);
} }
}) })
.appendTo(that); .appendTo(that);
@ -224,7 +228,7 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$positionMarker.css({ self.$positionMarker.css({
left: self.interfaceLeft + Math.round( left: self.interfaceLeft + Math.round(
self.options.position * self.imageWidth / self.options.duration 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'
}); });
} }

95
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -154,12 +154,8 @@ Ox.VideoPlayer = function(options, self) {
if (self.options.enableKeyboard) { if (self.options.enableKeyboard) {
that.bindEvent({ that.bindEvent({
key_0: function() { key_0: toggleMuted,
toggleMuted(true); key_1: toggleScale,
},
key_1: function() {
toggleScale(true);
},
key_equal: function() { key_equal: function() {
changeVolumeBy(0.1); changeVolumeBy(0.1);
}, },
@ -177,7 +173,7 @@ Ox.VideoPlayer = function(options, self) {
goToNextResult(1); goToNextResult(1);
}, },
key_left: function() { key_left: function() {
setPosition(self.options.position - self.secondsPerFrame, true); setPosition(self.options.position - self.secondsPerFrame);
}, },
key_minus: function() { key_minus: function() {
changeVolumeBy(-0.1); changeVolumeBy(-0.1);
@ -186,17 +182,15 @@ Ox.VideoPlayer = function(options, self) {
playInToOut(); playInToOut();
}, },
key_right: function() { key_right: function() {
setPosition(self.options.position + self.secondsPerFrame, true); setPosition(self.options.position + self.secondsPerFrame);
}, },
key_shift_f: function() { key_shift_f: function() {
self.options.enableFullscreen && toggleFullscreen(true); self.options.enableFullscreen && toggleFullscreen();
}, },
key_shift_g: function() { key_shift_g: function() {
goToNextResult(-1); goToNextResult(-1);
}, },
key_space: function() { key_space: togglePaused
togglePaused(true);
}
}) })
} }
@ -274,7 +268,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.bind({ .bind({
click: function() { click: function() {
togglePaused(true); togglePaused();
} }
}) })
.appendTo(that.$element) .appendTo(that.$element)
@ -564,7 +558,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent('click', function() { .bindEvent('click', function() {
toggleFullscreen(); toggleFullscreen('button');
}) })
.appendTo(self['$controls' + titlecase]); .appendTo(self['$controls' + titlecase]);
@ -581,7 +575,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent('click', function() { .bindEvent('click', function() {
toggleMuted(); toggleMuted('button');
}) })
.appendTo(self['$controls' + titlecase]); .appendTo(self['$controls' + titlecase]);
@ -599,7 +593,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent('click', function() { .bindEvent('click', function() {
togglePaused(); togglePaused('button');
}) })
.appendTo(self['$controls' + titlecase]); .appendTo(self['$controls' + titlecase]);
@ -636,7 +630,7 @@ Ox.VideoPlayer = function(options, self) {
click: function() { click: function() {
if (!self.options.paused) { if (!self.options.paused) {
self.playOnSubmit = true; self.playOnSubmit = true;
togglePaused(true); togglePaused();
} else if (self.playOnLoad) { } else if (self.playOnLoad) {
// if clicked during resolution switch, // if clicked during resolution switch,
// don't play on load // don't play on load
@ -815,7 +809,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.css({float: 'left'}) .css({float: 'left'})
.bindEvent('click', function() { .bindEvent('click', function() {
toggleScale(); toggleScale('button');
}) })
.appendTo(self['$controls' + titlecase]); .appendTo(self['$controls' + titlecase]);
@ -1033,7 +1027,7 @@ Ox.VideoPlayer = function(options, self) {
function ended() { function ended() {
if (!self.options.paused) { if (!self.options.paused) {
togglePaused(true); togglePaused();
} }
if (self.options.poster) { if (self.options.poster) {
self.$poster.animate({ self.$poster.animate({
@ -1270,7 +1264,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.bindEvent({ .bindEvent({
position: function(data) { position: function(data) {
setPosition(data.position, true); setPosition(data.position, 'largeTimeline');
} }
}); });
return $timeline; return $timeline;
@ -1301,7 +1295,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.bindEvent({ .bindEvent({
position: function(data) { position: function(data) {
setPosition(data.position, true); setPosition(data.position, 'timeline');
} }
}); });
//Ox.print('??', $timeline.find('.OxInterface')) //Ox.print('??', $timeline.find('.OxInterface'))
@ -1415,7 +1409,7 @@ Ox.VideoPlayer = function(options, self) {
self.options.duration = self.out - self['in']; self.options.duration = self.out - self['in'];
self.$video.css(getCSS('video')); self.$video.css(getCSS('video'));
self.video.currentTime = self.options.position; 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')); //self.$poster && self.$poster.css(getCSS('poster'));
hideLoadingIcon(); hideLoadingIcon();
@ -1459,12 +1453,12 @@ Ox.VideoPlayer = function(options, self) {
(self.options.playInToOut || self.playInToOut) && (self.options.playInToOut || self.playInToOut) &&
self.options.position >= self.options.out self.options.position >= self.options.out
) { ) {
togglePaused(true); togglePaused();
setPosition(self.options.out/*, true*/); setPosition(self.options.out, 'video');
//ended(); //ended();
self.playInToOut = false; self.playInToOut = false;
} else { } else {
setPosition(self.options.position); setPosition(self.options.position, 'video');
} }
that.triggerEvent('position', { that.triggerEvent('position', {
position: self.options.position position: self.options.position
@ -1473,9 +1467,9 @@ Ox.VideoPlayer = function(options, self) {
function playInToOut() { function playInToOut() {
self.playInToOut = true; self.playInToOut = true;
setPosition(self.options['in'], true); setPosition(self.options['in']);
if (self.options.paused) { if (self.options.paused) {
togglePaused(true); togglePaused();
} }
} }
@ -1502,16 +1496,16 @@ Ox.VideoPlayer = function(options, self) {
function seeking() { function seeking() {
self.seekTimeout = setTimeout(function() { self.seekTimeout = setTimeout(function() {
self.$playIcon && self.$playIcon.hide(); self.$playIcon && self.$playIcon.hide();
showLoadingIcon(); showLoadingIcon();
}, 250); }, 250);
} }
function setPosition(position, setVideo) { function setPosition(position, from) {
position = Ox.limit(position, self['in'], self['out']); position = Ox.limit(position, self['in'], self['out']);
self.options.position = Math.round( self.options.position = Math.round(
position * self.options.fps position * self.options.fps
) / self.options.fps; ) / self.options.fps;
if (setVideo && self.loaded) { if (self.loaded && from != 'video') {
self.video.currentTime = self.options.position; self.video.currentTime = self.options.position;
} }
if (self.iconIsVisible) { if (self.iconIsVisible) {
@ -1527,11 +1521,10 @@ Ox.VideoPlayer = function(options, self) {
self.posterIsVisible = false; self.posterIsVisible = false;
} }
self.$subtitle && setSubtitle(); self.$subtitle && setSubtitle();
// fixme: setPosition may have been called from these timelines self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
self.$timeline && self.$timeline.options({
position: self.options.position position: self.options.position
}); });
self.$largeTimeline && self.$largeTimeline.options({ self.$largeTimeline && from != 'largeTimeline' && self.$largeTimeline.options({
position: self.options.position position: self.options.position
}); });
self.$position && self.$position.html(formatPosition()); self.$position && self.$position.html(formatPosition());
@ -1540,7 +1533,7 @@ Ox.VideoPlayer = function(options, self) {
function setResolution() { function setResolution() {
if (!self.options.paused) { if (!self.options.paused) {
self.playOnLoad = true; self.playOnLoad = true;
togglePaused(true); togglePaused();
} }
self.loaded = false; self.loaded = false;
showLoadingIcon(); showLoadingIcon();
@ -1711,15 +1704,15 @@ Ox.VideoPlayer = function(options, self) {
if (!found) { if (!found) {
position = self.results[direction == 1 ? 0 : self.results.length - 1]['in']; position = self.results[direction == 1 ? 0 : self.results.length - 1]['in'];
} }
setPosition(position + self.secondsPerFrame, true); setPosition(position + self.secondsPerFrame);
} }
function submitPositionInput() { function submitPositionInput() {
self.$positionInput.hide(); self.$positionInput.hide();
self.$position.html('').show(); self.$position.html('').show();
setPosition(parsePositionInput(self.$positionInput.options('value')), true); setPosition(parsePositionInput(self.$positionInput.options('value')));
if (self.playOnSubmit) { if (self.playOnSubmit) {
togglePaused(true); togglePaused();
self.video.play(); self.video.play();
self.playOnSubmit = false; self.playOnSubmit = false;
} }
@ -1736,7 +1729,7 @@ Ox.VideoPlayer = function(options, self) {
show && self.$findInput.focusInput(false); show && self.$findInput.focusInput(false);
} }
function toggleFullscreen(toggleButton) { function toggleFullscreen(from) {
var parentOffset, playOnFullscreen; var parentOffset, playOnFullscreen;
self.options.fullscreen = !self.options.fullscreen; self.options.fullscreen = !self.options.fullscreen;
if (!self.options.paused) { if (!self.options.paused) {
@ -1803,19 +1796,19 @@ Ox.VideoPlayer = function(options, self) {
//showInterface(); //showInterface();
}); });
} }
if (toggleButton && self.$fullscreenButton) { if (self.$fullscreenButton && from != 'button') {
self.$fullscreenButton.toggleTitle(); self.$fullscreenButton.toggleTitle();
} }
} }
function toggleMuted(toggleButton) { function toggleMuted(from) {
self.options.muted = !self.options.muted; self.options.muted = !self.options.muted;
self.video.muted = self.options.muted; self.video.muted = self.options.muted;
if (!self.options.muted && !self.options.volume) { if (!self.options.muted && !self.options.volume) {
self.options.volume = 1; self.options.volume = 1;
self.video.volume = 1; self.video.volume = 1;
} }
if (toggleButton && self.$muteButton) { if (self.$muteButton && from != 'button') {
self.$muteButton.toggleTitle(); self.$muteButton.toggleTitle();
} }
self.$volumeButton && self.$volumeButton.attr({ 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.options.paused = !self.options.paused;
self.$timeline && self.$timeline.options({ self.$timeline && self.$timeline.options({
paused: self.options.paused paused: self.options.paused
@ -1845,7 +1838,7 @@ Ox.VideoPlayer = function(options, self) {
} }
} else { } else {
if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) { 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.video.play();
self.playInterval = setInterval(playing, self.millisecondsPerFrame); self.playInterval = setInterval(playing, self.millisecondsPerFrame);
@ -1855,7 +1848,7 @@ Ox.VideoPlayer = function(options, self) {
}, 250, togglePlayIcon); }, 250, togglePlayIcon);
} }
} }
if (toggleButton && self.$playButton) { if (self.$playButton && from != 'button') {
self.$playButton.toggleTitle(); 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.options.scaleToFill = !self.options.scaleToFill;
self.$video.animate(getCSS('video'), 250); self.$video.animate(getCSS('video'), 250);
self.$poster && self.$poster.animate(getCSS('poster'), 250); self.$poster && self.$poster.animate(getCSS('poster'), 250);
if (toggleButton && self.$scaleButton) { if (self.$scaleButton && from != 'button') {
self.$scaleButton.toggleTitle(); self.$scaleButton.toggleTitle();
} }
} }
@ -1890,17 +1883,17 @@ Ox.VideoPlayer = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'fullscreen') { if (key == 'fullscreen') {
toggleFullscreen(true); toggleFullscreen();
} else if (key == 'height' || key == 'width') { } else if (key == 'height' || key == 'width') {
setSizes(); setSizes();
} else if (key == 'muted') { } else if (key == 'muted') {
toggleMuted(true); toggleMuted();
} else if (key == 'paused') { } else if (key == 'paused') {
togglePaused(true); togglePaused();
} else if (key == 'position') { } else if (key == 'position') {
setPosition(value, true); setPosition(value);
} else if (key == 'scaleToFill') { } else if (key == 'scaleToFill') {
toggleScale(true); toggleScale();
} }
}; };