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

implement 'follow player while playing'

Browse source
This commit is contained in:
rlx 2012-04-17 13:42:46 +00:00
parent 0e8bfd1348
commit 3ecfcd0f3f
2 changed files with 69 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
View file

@ -85,6 +85,9 @@ Ox.VideoTimelinePanel = function(options, self) {
width: getPlayerWidth() width: getPlayerWidth()
}) })
.bindEvent({ .bindEvent({
follow: function(data) {
that.triggerEvent('follow', data);
},
muted: function(data) { muted: function(data) {
that.triggerEvent('muted', data); that.triggerEvent('muted', data);
}, },
@ -255,7 +258,9 @@ Ox.VideoTimelinePanel = function(options, self) {
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'showAnnotations') { if (key == 'height') {
self.$player.options({height: value});
} else if (key == 'showAnnotations') {
that.$element.toggle(1); that.$element.toggle(1);
} else if (key == 'width') { } else if (key == 'width') {
self.$player.options({width: value}); self.$player.options({width: value});

83
source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js
View file

@ -81,23 +81,26 @@ Ox.VideoTimelinePlayer = function(options, self) {
if (id == 'timeline') { if (id == 'timeline') {
// ... // ...
} else if (id == 'followPlayer') { } else if (id == 'followPlayer') {
// ... self.options.followPlayer = data.checked;
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
}
that.triggerEvent('follow', {
follow: self.options.followPlayer
});
} }
Ox.print('DATA:::::::::', data);
} }
}) })
.appendTo(self.$menubar); .appendTo(self.$menubar);
self.$content = Ox.Element() self.$timelinePlayer = Ox.Element()
.addClass('OxVideoTimelinePlayer') .css({overflowX: 'hidden', overflowY: 'scroll'})
.css({
overflow: 'hidden',
overflowY: 'scroll'
})
.bind({ .bind({
mousedown: mousedown, mousedown: mousedown,
mouseleave: mouseleave, mouseleave: mouseleave,
mousemove: mousemove mousemove: mousemove,
scroll: scroll
}) })
.bindEvent({ .bindEvent({
mousedown: function() { mousedown: function() {
@ -217,7 +220,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
size: 16 size: 16
}, },
{ {
element: self.$content element: self.$timelinePlayer
}, },
{ {
element: self.$playerbar, element: self.$playerbar,
@ -340,7 +343,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
height: self.tileHeight + self.margin + 'px', height: self.tileHeight + self.margin + 'px',
overflowX: 'hidden' overflowX: 'hidden'
}) })
.appendTo(self.$content); .appendTo(self.$timelinePlayer);
self.$timelines[i] = [ self.$timelines[i] = [
self.$timeline.clone() self.$timeline.clone()
.css({ .css({
@ -527,22 +530,45 @@ Ox.VideoTimelinePlayer = function(options, self) {
return $timeline; return $timeline;
} }
function scroll() {
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
self.scrollTimeout = setTimeout(function() {
scrollToPosition();
self.scrollTimeout = 0;
}, 2500);
}
}
function scrollToPosition() { function scrollToPosition() {
var scrollTop = self.$content.scrollTop(), var scrollTop = self.$timelinePlayer.scrollTop(),
videoTop = [ videoTop = [
self.margin + Ox.min(self.videoLines) * (self.tileHeight + self.margin), self.margin + Ox.min(self.videoLines) * (self.tileHeight + self.margin),
self.margin + Ox.max(self.videoLines) * (self.tileHeight + self.margin) self.margin + Ox.max(self.videoLines) * (self.tileHeight + self.margin)
], ],
offset = self.contentHeight - self.tileHeight - self.margin; offset = self.contentHeight - self.tileHeight - self.margin;
if (videoTop[0] < scrollTop + self.margin) { if (videoTop[0] < scrollTop + self.margin) {
self.$content.scrollTop(videoTop[0] - self.margin); self.$timelinePlayer.stop().animate({
scrollTop: videoTop[0] - self.margin
}, 250);
} else if (videoTop[1] > scrollTop + offset) { } else if (videoTop[1] > scrollTop + offset) {
self.$content.scrollTop(videoTop[1] - offset); self.$timelinePlayer.stop().animate({
scrollTop: videoTop[1] - offset
}, 250);
}
}
function setHeight() {
self.contentHeight = self.options.height - 32;
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
} }
} }
function setPosition(fromVideo) { function setPosition(fromVideo) {
var max, min, videoLines, isPlaying = !self.options.paused; var isPlaying = !self.options.paused,
max, min, videoLines;
self.options.position = Ox.limit(self.options.position, 0, self.options.duration); self.options.position = Ox.limit(self.options.position, 0, self.options.duration);
self.frame = Math.floor(self.options.position * self.fps); self.frame = Math.floor(self.options.position * self.fps);
videoLines = getVideoLines(); videoLines = getVideoLines();
@ -554,11 +580,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
}); });
}); });
if (videoLines[1] != self.videoLines[1]) { if (videoLines[1] != self.videoLines[1]) {
self.videoLines[1] = videoLines[1];
self.$frameBox.detach().appendTo(self.$timelines[videoLines[1]][0]); self.$frameBox.detach().appendTo(self.$timelines[videoLines[1]][0]);
} }
if (videoLines[0] != self.videoLines[0]) { if (videoLines[0] != self.videoLines[0]) {
self.videoLines[0] = videoLines[0];
isPlaying && self.$video.togglePaused(); isPlaying && self.$video.togglePaused();
self.$videoBox.detach().appendTo(self.$timelines[videoLines[0]][0]); self.$videoBox.detach().appendTo(self.$timelines[videoLines[0]][0]);
isPlaying && self.$video.togglePaused(); isPlaying && self.$video.togglePaused();
@ -572,7 +596,16 @@ Ox.VideoTimelinePlayer = function(options, self) {
) )
}); });
} }
self.videoLines = videoLines; if (
fromVideo && self.options.followPlayer && !self.scrollTimeout
&& videoLines[1] != self.videoLines[1]
&& videoLines[1] > videoLines[0]
) {
self.videoLines = videoLines;
scrollToPosition();
} else {
self.videoLines = videoLines;
}
if (!fromVideo) { if (!fromVideo) {
self.$video.options({position: self.options.position}); self.$video.options({position: self.options.position});
self.$frame.attr({ self.$frame.attr({
@ -581,7 +614,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
scrollToPosition(); scrollToPosition();
} }
self.$smallTimeline.options({position: self.options.position}); self.$smallTimeline.options({position: self.options.position});
self.$position.html(formatPosition()) self.$position.html(formatPosition());
} }
function setSubtitles() { function setSubtitles() {
@ -632,6 +665,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.$lines.pop(); self.$lines.pop();
self.$timelines.pop(); self.$timelines.pop();
} }
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
}
self.$smallTimeline.options({width: getSmallTimelineWidth()}) self.$smallTimeline.options({width: getSmallTimelineWidth()})
} }
@ -662,6 +699,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
function togglePaused(fromVideo) { function togglePaused(fromVideo) {
self.options.paused = !self.options.paused; self.options.paused = !self.options.paused;
if (!self.options.paused && self.options.followPlayer) {
self.scrollTimeout && clearTimeout(self.scrollTimeout);
scrollToPosition();
}
!fromVideo && self.$video.options({ !fromVideo && self.$video.options({
paused: self.options.paused paused: self.options.paused
}); });
@ -671,7 +712,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'width') { if (key == 'height') {
setHeight();
} else if (key == 'width') {
setWidth(); setWidth();
} }
}; };