diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js index 185f463b..83d8701c 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js @@ -410,6 +410,7 @@ Ox.VideoTimelinePlayer = function(options, self) { } function getLines(scrollbarIsVisible) { + // Returns the number of lines var lines; if (scrollbarIsVisible) { self.contentWidth -= Ox.UI.SCROLLBAR_SIZE; @@ -491,6 +492,9 @@ Ox.VideoTimelinePlayer = function(options, self) { } 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(), videoLeft = videoFrame % self.contentWidth, lines = []; @@ -621,26 +625,32 @@ Ox.VideoTimelinePlayer = function(options, self) { function setPosition(fromVideo) { 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.frame = Math.floor(self.options.position * self.fps); videoLines = getVideoLines(); - min = Ox.min(Ox.flatten([self.videoLines, videoLines])); - max = Ox.max(Ox.flatten([self.videoLines, videoLines])); + // current and previous video lines + videoLines_ = Ox.flatten([self.videoLines, videoLines]); + min = Ox.min(videoLines_); + max = Ox.max(videoLines_); Ox.loop(min, max + 1, function(i) { self.$timelines[i][0].css({ width: self.frame + self.videoWidth + 'px' }); }); if (videoLines[1] != self.videoLines[1]) { + // move frame to new line self.$frameBox.detach().appendTo(self.$timelines[videoLines[1]][0]); } if (videoLines[0] != self.videoLines[0]) { + // move video to new line isPlaying && self.$video.togglePaused(); self.$videoBox.detach().appendTo(self.$timelines[videoLines[0]][0]); isPlaying && self.$video.togglePaused(); } 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({ position: self.paused ? self.options.position @@ -652,6 +662,9 @@ Ox.VideoTimelinePlayer = function(options, self) { && videoLines[1] != self.videoLines[1] && 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.options.followPlayer ? scrollToPosition() : updateScrollButton(); } else {