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
), 3);
setPosition();
triggerPositionEvent();
that.triggerEvent('position', {position: self.options.position});
}
function dragstart(data) {
@ -139,11 +139,12 @@ Ox.LargeVideoTimeline = function(options, self) {
), 3);
self.drag.x = data.clientX;
setPosition();
triggerPositionEvent();
that.triggerEvent('positioning', {position: self.options.position});
}
function dragend() {
Ox.$body.removeClass('OxDragging');
that.triggerEvent('position', {position: self.options.position});
}
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) {
setPosition(data.position);
},
positioning: function(data) {
setPosition(data.position, false, true);
},
resolution: function(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.$video.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position});
}
function dragendTimeline() {
that.triggerEvent('position', {position: self.options.position});
}
@ -436,7 +442,8 @@ Ox.VideoEditPanel = function(options, self) {
.css({left: '4px', top: '4px'})
.bindEvent({
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),
previousMinute = Math.floor(self.options.position / 60);
self.options.position = position;
!playing && self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position});
if (!playing || minute != previousMinute) {
if ((!playing || minute != previousMinute) && !dragging) {
that.triggerEvent('position', {
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) {
setPosition(data.position);
},
positioning: function(data) {
setPosition(data.position, false, true);
},
resolution: function(data) {
that.triggerEvent('resolution', data);
},
@ -420,6 +423,9 @@ Ox.VideoEditor = function(options, self) {
.bindEvent({
position: function(data) {
setPosition(data.position);
},
positioning: function(data) {
setPosition(data.position, false, true);
}
})
.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),
previousMinute = Math.floor(self.options.position / 60);
self.options.position = position;
@ -1240,7 +1246,7 @@ Ox.VideoEditor = function(options, self) {
$timeline.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', {
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) {
setPosition(data.position);
},
positioning: function(data) {
setPosition(data.position, false, true);
},
resolution: function(data) {
that.triggerEvent('resolution', data);
},
@ -305,7 +308,8 @@ Ox.VideoPanel = function(options, self) {
.css({left: '4px', top: '4px'})
.bindEvent({
mousedown: that.gainFocus,
position: changeTimeline
position: dragendTimeline,
positioning: dragTimeline
})
.appendTo(self.$controls);
@ -422,10 +426,13 @@ Ox.VideoPanel = function(options, self) {
})
);
function changeTimeline(data) {
function dragTimeline(data) {
self.options.position = data.position;
self.$video.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
}
function dragendTimeline() {
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),
previousMinute = Math.floor(self.options.position / 60);
self.options.position = position;
!playing && self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
if (!playing || minute != previousMinute) {
if ((!playing || minute != previousMinute) && !dragging) {
that.triggerEvent('position', {
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
playing <!> playing
position <!> position
positioning <!> positioning
resolution <!> resolution
scale <!> scale
select <!> select
@ -1259,7 +1260,7 @@ Ox.VideoPlayer = function(options, self) {
function drag(e) {
setPosition(self.drag.position - e.clientDX / 25);
that.triggerEvent('position', {
that.triggerEvent('positioning', {
position: self.options.position
});
}
@ -1267,6 +1268,9 @@ Ox.VideoPlayer = function(options, self) {
function dragend() {
Ox.$body.removeClass('OxDragging');
!self.drag.paused && togglePaused();
that.triggerEvent('position', {
position: self.options.position
});
}
function durationchange() {