timeline player: fix mute button, add scroll button

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(),
+        var positionScrollTop = getPositionScrollTop();
-            videoTop = [
+        positionScrollTop && self.$timelinePlayer.stop().animate({
-                self.margin + Ox.min(self.videoLines) * (self.tileHeight + self.margin),
+            scrollTop: positionScrollTop
-                self.margin + Ox.max(self.videoLines) * (self.tileHeight + self.margin)
+        }, 250, function() {
-            ],
+            self.$scrollButton.hide();
-            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);
-        }
     }
 
     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();