diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js index 31a8a31d..6b0585c9 100644 --- a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js @@ -46,8 +46,8 @@ Ox.VideoTimelinePlayer = function(options, self) { + self.options.showMilliseconds * 6; self.tiles = Math.ceil(self.frames / self.tileWidth); self.videoWidth = Math.round(self.tileHeight * self.options.videoRatio); + self.lines = getLines(); // may update self.contentWidth self.videoLines = getVideoLines(); - self.lines = getLines(); self.$menubar = Ox.Bar({size: 16}); @@ -95,6 +95,22 @@ Ox.VideoTimelinePlayer = function(options, self) { }) .appendTo(self.$menubar); + self.$scrollButton = Ox.Button({ + style: 'symbol', + title: 'arrowDown', + tooltip: 'Scroll to Player', + type: 'image' + }) + .css({float: 'right'}) + .hide() + .bindEvent({ + click: function() { + self.scrollTimeout && clearTimeout(self.scrollTimeout); + scrollToPosition(); + } + }) + .appendTo(self.$menubar); + self.$timelinePlayer = Ox.Element() .css({overflowX: 'hidden', overflowY: 'auto'}) .bind({ @@ -151,6 +167,7 @@ Ox.VideoTimelinePlayer = function(options, self) { self.$playButton = Ox.Button({ style: 'symbol', title: 'play', + tooltip: 'Play', type: 'image' }) .css({ @@ -165,7 +182,8 @@ Ox.VideoTimelinePlayer = function(options, self) { self.$muteButton = Ox.Button({ style: 'symbol', - title: 'mute', + title: self.options.muted ? 'unmute' : 'mute', + tooltip: self.options.muted ? 'Unmute' : 'Mute', type: 'image' }) .css({float: 'left'}) @@ -259,10 +277,12 @@ Ox.VideoTimelinePlayer = function(options, self) { }) .appendTo(self.$timelines[self.videoLines[1]][0]); + Ox.print('MUTED???', self.options.muted) self.$frame = Ox.VideoPlayer({ censored: self.options.censored, duration: self.options.duration, height: self.tileHeight, + muted: self.options.muted, position: self.options.position, scaleToFill: true, type: 'in', @@ -396,6 +416,20 @@ Ox.VideoTimelinePlayer = function(options, self) { ) / self.fps; } + function getPositionScrollTop() { + // Returns the target scrolltop if the player is not fully visible, + // otherwise returns null + 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; + return videoTop[0] < scrollTop + self.margin ? videoTop[0] - self.margin + : videoTop[1] > scrollTop + offset ? videoTop[1] - offset + : null; + } + function getSmallTimeline() { var $timeline = Ox.SmallVideoTimeline({ duration: self.options.duration, @@ -545,6 +579,7 @@ Ox.VideoTimelinePlayer = function(options, self) { } function scroll() { + updateScrollButton(); if (!self.options.paused && self.options.followPlayer) { self.scrollTimeout && clearTimeout(self.scrollTimeout); self.scrollTimeout = setTimeout(function() { @@ -555,21 +590,12 @@ Ox.VideoTimelinePlayer = function(options, self) { } function scrollToPosition() { - 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.$timelinePlayer.stop().animate({ - scrollTop: videoTop[0] - self.margin - }, 250); - } else if (videoTop[1] > scrollTop + offset) { - self.$timelinePlayer.stop().animate({ - scrollTop: videoTop[1] - offset - }, 250); - } + var positionScrollTop = getPositionScrollTop(); + positionScrollTop && self.$timelinePlayer.stop().animate({ + scrollTop: positionScrollTop + }, 250, function() { + self.$scrollButton.hide(); + }); } function setHeight() { @@ -609,12 +635,12 @@ Ox.VideoTimelinePlayer = function(options, self) { }); } if ( - fromVideo && self.options.followPlayer && !self.scrollTimeout + fromVideo && !self.scrollTimeout && videoLines[1] != self.videoLines[1] && videoLines[1] > videoLines[0] ) { self.videoLines = videoLines; - scrollToPosition(); + self.options.followPlayer ? scrollToPosition() : updateScrollButton(); } else { self.videoLines = videoLines; } @@ -706,7 +732,8 @@ Ox.VideoTimelinePlayer = function(options, self) { self.options.muted = !self.options.muted; self.$video.options({muted: self.options.muted}); self.$muteButton.options({ - title: self.options.muted ? 'unmute' : 'mute' + title: self.options.muted ? 'unmute' : 'mute', + tooltip: self.options.muted ? 'Unmute' : 'Mute' }); that.triggerEvent('muted', { muted: self.options.muted @@ -727,6 +754,18 @@ Ox.VideoTimelinePlayer = function(options, self) { }); } + function updateScrollButton() { + var scrollTop = self.$timelinePlayer.scrollTop(), + positionScrollTop = getPositionScrollTop(); + if (positionScrollTop === null) { + self.$scrollButton.hide(); + } else { + self.$scrollButton.options({ + title: positionScrollTop < scrollTop ? 'arrowUp' : 'arrowDown' + }).show(); + } + } + self.setOption = function(key, value) { if (key == 'height') { setHeight();