From 3ecfcd0f3fe7727bccb2353fef198fc902288f35 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Tue, 17 Apr 2012 13:42:46 +0000 Subject: [PATCH] implement 'follow player while playing' --- .../Ox.UI/js/Video/Ox.VideoTimelinePanel.js | 7 +- .../Ox.UI/js/Video/Ox.VideoTimelinePlayer.js | 83 ++++++++++++++----- 2 files changed, 69 insertions(+), 21 deletions(-) diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js index a001154b..ddc9426c 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js @@ -85,6 +85,9 @@ Ox.VideoTimelinePanel = function(options, self) { width: getPlayerWidth() }) .bindEvent({ + follow: function(data) { + that.triggerEvent('follow', data); + }, muted: function(data) { that.triggerEvent('muted', data); }, @@ -255,7 +258,9 @@ Ox.VideoTimelinePanel = function(options, self) { } self.setOption = function(key, value) { - if (key == 'showAnnotations') { + if (key == 'height') { + self.$player.options({height: value}); + } else if (key == 'showAnnotations') { that.$element.toggle(1); } else if (key == 'width') { self.$player.options({width: value}); diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js index 761fa23f..c2999f6f 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js @@ -81,23 +81,26 @@ Ox.VideoTimelinePlayer = function(options, self) { if (id == 'timeline') { // ... } 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); - self.$content = Ox.Element() - .addClass('OxVideoTimelinePlayer') - .css({ - overflow: 'hidden', - overflowY: 'scroll' - }) + self.$timelinePlayer = Ox.Element() + .css({overflowX: 'hidden', overflowY: 'scroll'}) .bind({ mousedown: mousedown, mouseleave: mouseleave, - mousemove: mousemove + mousemove: mousemove, + scroll: scroll }) .bindEvent({ mousedown: function() { @@ -217,7 +220,7 @@ Ox.VideoTimelinePlayer = function(options, self) { size: 16 }, { - element: self.$content + element: self.$timelinePlayer }, { element: self.$playerbar, @@ -340,7 +343,7 @@ Ox.VideoTimelinePlayer = function(options, self) { height: self.tileHeight + self.margin + 'px', overflowX: 'hidden' }) - .appendTo(self.$content); + .appendTo(self.$timelinePlayer); self.$timelines[i] = [ self.$timeline.clone() .css({ @@ -527,22 +530,45 @@ Ox.VideoTimelinePlayer = function(options, self) { 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() { - var scrollTop = self.$content.scrollTop(), + var scrollTop = self.$timelinePlayer.scrollTop(), videoTop = [ self.margin + Ox.min(self.videoLines) * (self.tileHeight + self.margin), self.margin + Ox.max(self.videoLines) * (self.tileHeight + self.margin) ], offset = self.contentHeight - self.tileHeight - 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) { - 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) { - 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.frame = Math.floor(self.options.position * self.fps); videoLines = getVideoLines(); @@ -554,11 +580,9 @@ Ox.VideoTimelinePlayer = function(options, self) { }); }); if (videoLines[1] != self.videoLines[1]) { - self.videoLines[1] = videoLines[1]; self.$frameBox.detach().appendTo(self.$timelines[videoLines[1]][0]); } if (videoLines[0] != self.videoLines[0]) { - self.videoLines[0] = videoLines[0]; isPlaying && self.$video.togglePaused(); self.$videoBox.detach().appendTo(self.$timelines[videoLines[0]][0]); 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) { self.$video.options({position: self.options.position}); self.$frame.attr({ @@ -581,7 +614,7 @@ Ox.VideoTimelinePlayer = function(options, self) { scrollToPosition(); } self.$smallTimeline.options({position: self.options.position}); - self.$position.html(formatPosition()) + self.$position.html(formatPosition()); } function setSubtitles() { @@ -632,6 +665,10 @@ Ox.VideoTimelinePlayer = function(options, self) { self.$lines.pop(); self.$timelines.pop(); } + if (!self.options.paused && self.options.followPlayer) { + self.scrollTimeout && clearTimeout(self.scrollTimeout); + scrollToPosition(); + } self.$smallTimeline.options({width: getSmallTimelineWidth()}) } @@ -662,6 +699,10 @@ Ox.VideoTimelinePlayer = function(options, self) { function togglePaused(fromVideo) { self.options.paused = !self.options.paused; + if (!self.options.paused && self.options.followPlayer) { + self.scrollTimeout && clearTimeout(self.scrollTimeout); + scrollToPosition(); + } !fromVideo && self.$video.options({ paused: self.options.paused }); @@ -671,7 +712,9 @@ Ox.VideoTimelinePlayer = function(options, self) { } self.setOption = function(key, value) { - if (key == 'width') { + if (key == 'height') { + setHeight(); + } else if (key == 'width') { setWidth(); } };