add close buttons to controls, better behaviour of mute vs volume 0, make range properly resizable, hide title overflow

demos/video/js/video.js

@@ -78,7 +78,11 @@ Ox.load('UI', {
                     top: '16px'
                 }),
             Ox.VideoPlayer({
-                    controlsBottom: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
+                    controlsTop: ['fullscreen', 'title', 'find'],
+                    controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'],
+                    enableFind: true,
+                    enableFullscreen: true,
+                    enableVolume: true,
                     externalControls: true,
                     height: 192,
                     'in': 3128.725, 
@@ -87,6 +91,7 @@ Ox.load('UI', {
                     showMilliseconds: 2,
                     subtitles: 'srt/' + id + '.srt',
                     timeline: timeline,
+                    title: 'Brick - Rian Johnson - 2005',
                     video: url + '?' +  + Ox.random(1000000),
                     width: 360
                 })

source/Ox.UI/js/Form/Ox.Range.js

@@ -36,7 +36,7 @@ Ox.Range = function(options, self) {
                 min: 0,
                 orientation: 'horizontal',
                 step: 1,
-                size: 128,
+                size: 128, // fixme: shouldn't this be width?
                 thumbSize: 16,
                 thumbValue: false,
                 trackColors: [],
@@ -191,12 +191,18 @@ Ox.Range = function(options, self) {
         self.trackColorsStart = self.thumbSize / 2 / self.options.size;
         self.trackColorsStep = (self.options.size - self.thumbSize) /
             (self.trackColors - 1) / self.options.size;
+        that.css({
+            width: self.options.size + 'px'
+        });
         self.$track && self.$track.css({
             width: (self.trackSize - 2) + 'px'
         });
-        self.$thumb && self.$thumb.options({
+        if (self.$thumb) {
+            self.$thumb.options({
                 width: self.thumbSize
             });
+            setThumb();
+        }
     }
 
     function setThumb(animate) {

source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js

@@ -19,6 +19,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             width: self.options.width + 'px'
         });
 
+    // fixme: unless we do a block timeline,
+    // we can always use a single 1920 png
+
     self.height = self.options.type == 'player' ? 16 : 24;
     self.imageHeight = self.options.type == 'player' ? 16 : 18;
     self.imageTop = self.options.type == 'player' ? 0 : 3;

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -239,6 +239,7 @@ Ox.VideoPlayer = function(options, self) {
     self.$videoContainer = $('<div>')
         .css({
             position: 'absolute',
+            top: self.options.externalControls && self.options.controlsTop ? '16px' : 0,
             background: 'rgb(0, 0, 0)',
             overflow: 'hidden'
         })
@@ -367,20 +368,6 @@ Ox.VideoPlayer = function(options, self) {
             .hide()
             .appendTo(that.$element);
 
-        self.$playResultsButton = Ox.Button({
-                style: 'symbol',
-                title: 'PlayInToOut',
-                tooltip: 'Play Results',
-                type: 'image'
-            })
-            .css({float: 'left', opacity: 0.25})
-            .bindEvent({
-                click: function() {
-
-                }
-            })
-            .appendTo(self.$find);
-
         self.$results = $('<div>')
             .css({
                 float: 'left',
@@ -480,6 +467,20 @@ Ox.VideoPlayer = function(options, self) {
             .appendTo(self.$find);
         //*/
 
+        self.$hideFindButton = Ox.Button({
+                style: 'symbol',
+                title: 'close',
+                tooltip: 'Hide',
+                type: 'image'
+            })
+            .css({float: 'left'})
+            .bindEvent({
+                click: function() {
+                    self.$find.hide();
+                }
+            })
+            .appendTo(self.$find);
+      
     }
 
     ['top', 'bottom'].forEach(function(edge) {
@@ -514,11 +515,8 @@ Ox.VideoPlayer = function(options, self) {
 
                     self.$findButton = Ox.Button({
                         style: 'symbol',
-                        title: [
+                        title: 'find',
-                            {id: 'find', title: 'find'},
+                        tooltip: 'Find',
-                            {id: 'close', title: 'close'}
-                        ],
-                        tooltip: ['Find', 'Close'],
                         type: 'image'
                     })
                     .css({float: 'left'})
@@ -736,7 +734,9 @@ Ox.VideoPlayer = function(options, self) {
                             float: 'left',
                             paddingTop: '1px',
                             textAlign: 'center',
-                            color: 'rgb(255, 255, 255)'
+                            color: 'rgb(255, 255, 255)',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
                         })
                         .html(self.options.title)
                         .appendTo(self['$controls' + titlecase].$element);
@@ -783,6 +783,20 @@ Ox.VideoPlayer = function(options, self) {
             .hide()
             .appendTo(that.$element);
 
+        self.$hideVolumeButton = Ox.Button({
+                style: 'symbol',
+                title: 'close',
+                tooltip: 'Hide',
+                type: 'image'
+            })
+            .css({float: 'left'})
+            .bindEvent({
+                click: function() {
+                    self.$volume.hide();
+                }
+            })
+            .appendTo(self.$volume);
+
         self.$muteButton = Ox.Button({
                 style: 'symbol',
                 title: [
@@ -1006,7 +1020,7 @@ Ox.VideoPlayer = function(options, self) {
             };
         } else if (element == 'volume') {
             css = {
-                width: Math.min(168, self.width)
+                width: Math.min(184, self.width)
             };
         }
         return css;
@@ -1376,7 +1390,7 @@ Ox.VideoPlayer = function(options, self) {
         if (self.$volume) {
             self.$volume.animate(getCSS('volume'), ms);
             self.$volumeInput.options({
-                width: Math.min(128, self.width - 40)
+                size: Math.min(128, self.width - 56)
             });
         }
     }
@@ -1394,11 +1408,16 @@ Ox.VideoPlayer = function(options, self) {
 
     function setVolume(data) {
         self.options.volume = data.value;
+        if (!!self.options.volume == self.options.muted) {
+            self.options.muted = !self.options.muted;
+            self.video.muted = self.options.muted;
+            self.$muteButton.toggleTitle();
+        }
+        self.video.volume = self.options.volume;
         self.$volumeButton.attr({
             src: getVolumeImageURL()
         });
         self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
-        self.video.volume = self.options.volume;
     }
 
     function showInterface() {
@@ -1578,6 +1597,10 @@ Ox.VideoPlayer = function(options, self) {
     function toggleMuted(toggleButton) {
         self.options.muted = !self.options.muted;
         self.video.muted = self.options.muted;
+        if (!self.options.muted && !self.options.volume) {
+            self.options.volume = 1;
+            self.video.volume = 1;
+        }
         if (toggleButton && self.$muteButton) {
             self.$muteButton.toggleTitle();
         }
@@ -1587,9 +1610,9 @@ Ox.VideoPlayer = function(options, self) {
         self.$volumeInput && self.$volumeInput.options({
             value: self.options.muted ? 0 : self.options.volume
         });
-        self.$volumeValue &&
+        self.$volumeValue && self.$volumeValue.html(
-            self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
+            self.options.muted ? 0 : Math.round(self.options.volume * 100)
-        
+        );
     }
 
     function togglePaused(toggleButton) {