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

add some comments in video timeline player

Browse source
This commit is contained in:
rlx 2012-04-23 08:11:34 +00:00
parent 3c253a86d5
commit cb1fffa491
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -410,6 +410,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
} }
function getLines(scrollbarIsVisible) { function getLines(scrollbarIsVisible) {
// Returns the number of lines
var lines; var lines;
if (scrollbarIsVisible) { if (scrollbarIsVisible) {
self.contentWidth -= Ox.UI.SCROLLBAR_SIZE; self.contentWidth -= Ox.UI.SCROLLBAR_SIZE;
@ -491,6 +492,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
} }
function getVideoLines() { function getVideoLines() {
// Returns the lines the video is at, as an array of two line numbers.
// If the video fits in one line, they're both the same, otherwise, the
// line that has most of the video (and thus the player) comes first.
var videoFrame = getVideoFrame(), var videoFrame = getVideoFrame(),
videoLeft = videoFrame % self.contentWidth, videoLeft = videoFrame % self.contentWidth,
lines = []; lines = [];
@ -621,26 +625,32 @@ Ox.VideoTimelinePlayer = function(options, self) {
function setPosition(fromVideo) { function setPosition(fromVideo) {
var isPlaying = !self.options.paused, var isPlaying = !self.options.paused,
max, min, videoLines; max, min, videoLines, 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();
min = Ox.min(Ox.flatten([self.videoLines, videoLines])); // current and previous video lines
max = Ox.max(Ox.flatten([self.videoLines, videoLines])); videoLines_ = Ox.flatten([self.videoLines, videoLines]);
min = Ox.min(videoLines_);
max = Ox.max(videoLines_);
Ox.loop(min, max + 1, function(i) { Ox.loop(min, max + 1, function(i) {
self.$timelines[i][0].css({ self.$timelines[i][0].css({
width: self.frame + self.videoWidth + 'px' width: self.frame + self.videoWidth + 'px'
}); });
}); });
if (videoLines[1] != self.videoLines[1]) { if (videoLines[1] != self.videoLines[1]) {
// move frame to new line
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]) {
// move video to new line
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();
} }
if (videoLines[0] != videoLines[1]) { if (videoLines[0] != videoLines[1]) {
// if the player spans two lines, update the frame
// (but only once per second if the video is playing)
self.$frame.options({ self.$frame.options({
position: self.paused position: self.paused
? self.options.position ? self.options.position
@ -652,6 +662,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
&& videoLines[1] != self.videoLines[1] && videoLines[1] != self.videoLines[1]
&& videoLines[1] > videoLines[0] && videoLines[1] > videoLines[0]
) { ) {
// if the video is moving, the user has not scrolled away
// and the video has reached a line break, then either
// follow the video or update the scroll button
self.videoLines = videoLines; self.videoLines = videoLines;
self.options.followPlayer ? scrollToPosition() : updateScrollButton(); self.options.followPlayer ? scrollToPosition() : updateScrollButton();
} else { } else {