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

player/timeline: differentiate between drag (positioning event) and dragend (position event), fixes #1657

Browse source
This commit is contained in:
rlx 2013-08-27 11:38:01 +00:00
parent a9c60fe05f
commit e93b196e67
5 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
source/Ox.UI/js/Video/LargeVideoTimeline.js
View file

@ -124,7 +124,7 @@ Ox.LargeVideoTimeline = function(options, self) {
getPosition(data), 0, self.options.duration getPosition(data), 0, self.options.duration
), 3); ), 3);
setPosition(); setPosition();
triggerPositionEvent(); that.triggerEvent('position', {position: self.options.position});
} }
function dragstart(data) { function dragstart(data) {
@ -139,11 +139,12 @@ Ox.LargeVideoTimeline = function(options, self) {
), 3); ), 3);
self.drag.x = data.clientX; self.drag.x = data.clientX;
setPosition(); setPosition();
triggerPositionEvent(); that.triggerEvent('positioning', {position: self.options.position});
} }
function dragend() { function dragend() {
Ox.$body.removeClass('OxDragging'); Ox.$body.removeClass('OxDragging');
that.triggerEvent('position', {position: self.options.position});
} }
function getImageURL(i, callback) { function getImageURL(i, callback) {

15
source/Ox.UI/js/Video/VideoEditPanel.js
View file

@ -232,6 +232,9 @@ Ox.VideoEditPanel = function(options, self) {
position: function(data) { position: function(data) {
setPosition(data.position); setPosition(data.position);
}, },
positioning: function(data) {
setPosition(data.position, false, true);
},
resolution: function(data) { resolution: function(data) {
that.triggerEvent('resolution', data); that.triggerEvent('resolution', data);
}, },
@ -363,10 +366,13 @@ Ox.VideoEditPanel = function(options, self) {
}) })
); );
function changeTimeline(data) { function dragTimeline(data) {
self.options.position = data.position; self.options.position = data.position;
self.$video.options({position: self.options.position}); self.$video.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position}); self.$clipPanel.options({position: self.options.position});
}
function dragendTimeline() {
that.triggerEvent('position', {position: self.options.position}); that.triggerEvent('position', {position: self.options.position});
} }
@ -436,7 +442,8 @@ Ox.VideoEditPanel = function(options, self) {
.css({left: '4px', top: '4px'}) .css({left: '4px', top: '4px'})
.bindEvent({ .bindEvent({
mousedown: that.gainFocus, mousedown: that.gainFocus,
position: changeTimeline position: dragendTimeline,
positioning: dragTimeline,
}); });
} }
@ -504,14 +511,14 @@ Ox.VideoEditPanel = function(options, self) {
} }
} }
function setPosition(position, playing) { function setPosition(position, playing, dragging) {
var minute = Math.floor(position / 60), var minute = Math.floor(position / 60),
previousMinute = Math.floor(self.options.position / 60); previousMinute = Math.floor(self.options.position / 60);
self.options.position = position; self.options.position = position;
!playing && self.$video.options({position: self.options.position}); !playing && self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position}); self.$timeline.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position}); self.$clipPanel.options({position: self.options.position});
if (!playing || minute != previousMinute) { if ((!playing || minute != previousMinute) && !dragging) {
that.triggerEvent('position', { that.triggerEvent('position', {
position: !playing ? self.options.position : minute * 60 position: !playing ? self.options.position : minute * 60
}); });

10
source/Ox.UI/js/Video/VideoEditor.js
View file

@ -372,6 +372,9 @@ Ox.VideoEditor = function(options, self) {
position: function(data) { position: function(data) {
setPosition(data.position); setPosition(data.position);
}, },
positioning: function(data) {
setPosition(data.position, false, true);
},
resolution: function(data) { resolution: function(data) {
that.triggerEvent('resolution', data); that.triggerEvent('resolution', data);
}, },
@ -420,6 +423,9 @@ Ox.VideoEditor = function(options, self) {
.bindEvent({ .bindEvent({
position: function(data) { position: function(data) {
setPosition(data.position); setPosition(data.position);
},
positioning: function(data) {
setPosition(data.position, false, true);
} }
}) })
.appendTo(self.$editor); .appendTo(self.$editor);
@ -1231,7 +1237,7 @@ Ox.VideoEditor = function(options, self) {
} }
} }
function setPosition(position, playing) { function setPosition(position, playing, dragging) {
var minute = Math.floor(position / 60), var minute = Math.floor(position / 60),
previousMinute = Math.floor(self.options.position / 60); previousMinute = Math.floor(self.options.position / 60);
self.options.position = position; self.options.position = position;
@ -1240,7 +1246,7 @@ Ox.VideoEditor = function(options, self) {
$timeline.options({position: self.options.position}); $timeline.options({position: self.options.position});
}); });
self.$annotationPanel.options({position: self.options.position}); self.$annotationPanel.options({position: self.options.position});
if (!playing || minute != previousMinute) { if ((!playing || minute != previousMinute) && !dragging) {
that.triggerEvent(playing ? 'playing' : 'position', { that.triggerEvent(playing ? 'playing' : 'position', {
position: !playing ? self.options.position : minute * 60 position: !playing ? self.options.position : minute * 60
}); });

15
source/Ox.UI/js/Video/VideoPanel.js
View file

@ -264,6 +264,9 @@ Ox.VideoPanel = function(options, self) {
position: function(data) { position: function(data) {
setPosition(data.position); setPosition(data.position);
}, },
positioning: function(data) {
setPosition(data.position, false, true);
},
resolution: function(data) { resolution: function(data) {
that.triggerEvent('resolution', data); that.triggerEvent('resolution', data);
}, },
@ -305,7 +308,8 @@ Ox.VideoPanel = function(options, self) {
.css({left: '4px', top: '4px'}) .css({left: '4px', top: '4px'})
.bindEvent({ .bindEvent({
mousedown: that.gainFocus, mousedown: that.gainFocus,
position: changeTimeline position: dragendTimeline,
positioning: dragTimeline
}) })
.appendTo(self.$controls); .appendTo(self.$controls);
@ -422,10 +426,13 @@ Ox.VideoPanel = function(options, self) {
}) })
); );
function changeTimeline(data) { function dragTimeline(data) {
self.options.position = data.position; self.options.position = data.position;
self.$video.options({position: self.options.position}); self.$video.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position}); self.$annotationPanel.options({position: self.options.position});
}
function dragendTimeline() {
that.triggerEvent('position', {position: self.options.position}); that.triggerEvent('position', {position: self.options.position});
} }
@ -560,14 +567,14 @@ Ox.VideoPanel = function(options, self) {
} }
} }
function setPosition(position, playing) { function setPosition(position, playing, dragging) {
var minute = Math.floor(position / 60), var minute = Math.floor(position / 60),
previousMinute = Math.floor(self.options.position / 60); previousMinute = Math.floor(self.options.position / 60);
self.options.position = position; self.options.position = position;
!playing && self.$video.options({position: self.options.position}); !playing && self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position}); self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position}); self.$annotationPanel.options({position: self.options.position});
if (!playing || minute != previousMinute) { if ((!playing || minute != previousMinute) && !dragging) {
that.triggerEvent('position', { that.triggerEvent('position', {
position: !playing ? self.options.position : minute * 60 position: !playing ? self.options.position : minute * 60
}); });

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

@ -97,6 +97,7 @@ Ox.VideoPlayer <f> Generic Video Player
paused <!> paused paused <!> paused
playing <!> playing playing <!> playing
position <!> position position <!> position
positioning <!> positioning
resolution <!> resolution resolution <!> resolution
scale <!> scale scale <!> scale
select <!> select select <!> select
@ -1259,7 +1260,7 @@ Ox.VideoPlayer = function(options, self) {
function drag(e) { function drag(e) {
setPosition(self.drag.position - e.clientDX / 25); setPosition(self.drag.position - e.clientDX / 25);
that.triggerEvent('position', { that.triggerEvent('positioning', {
position: self.options.position position: self.options.position
}); });
} }
@ -1267,6 +1268,9 @@ Ox.VideoPlayer = function(options, self) {
function dragend() { function dragend() {
Ox.$body.removeClass('OxDragging'); Ox.$body.removeClass('OxDragging');
!self.drag.paused && togglePaused(); !self.drag.paused && togglePaused();
that.triggerEvent('position', {
position: self.options.position
});
} }
function durationchange() { function durationchange() {