revised controls (find, volume)

demos/video/js/video.js

@@ -32,17 +32,17 @@ Ox.load('UI', {
         videoSize = getVideoSize(),
         $videos = [
             Ox.VideoPlayer({
-                    controls: ['play', 'mute', 'fullscreen', 'scale', 'timeline', 'position'],
+                    controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
+                    controlsTop: ['fullscreen', 'title', 'find'],
                     enableFind: true,
                     enableFullscreen: true,
                     enableKeyboard: true,
+                    enableVolume: true,
                     focus: 'mouseenter',
                     height: 192,
-                    'in': 3128.725, 
                     logoLink: 'http://next.0xdb.org/' + id,
                     logoTitle: 'Watch on 0xdb',
                     logo: 'png/logo.png',
-                    out: 3130.725,
                     paused: true,
                     poster: poster,
                     showIconOnLoad: true,
@@ -51,7 +51,7 @@ Ox.load('UI', {
                     timeline: function(i) {
                         return 'png/timeline.16.' + i + '.png';
                     },
-                    title: '<b>Brick</b> - Rian Johnson - 2005',
+                    title: 'Brick - Rian Johnson - 2005',
                     video: url + '?' +  + Ox.random(1000000),
                     width: 360
                 })
@@ -78,9 +78,8 @@ Ox.load('UI', {
                     top: '16px'
                 }),
             Ox.VideoPlayer({
-                    controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
+                    controlsBottom: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
                     externalControls: true,
-                    find: 'brick',
                     height: 192,
                     'in': 3128.725, 
                     out: 3130.725,

source/Ox.UI/js/Form/Ox.Input.js

@@ -733,6 +733,11 @@ Ox.Input = function(options, self) {
         }
     };
 
+    that.blurInput = function() {
+        self.$input.blur();
+        return that;
+    };
+
     that.focusInput = function(select) {
         select = Ox.isUndefined(select) ? true : select;
         self.$input.focus();

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

@@ -3,7 +3,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
-            duration: 0,
+            duration: 1920,
             editing: false,
             getTimelineURL: null,
             'in': 0,
@@ -120,7 +120,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     });
                 });
             });
-        } else if (image == 'selection') {
+        } else if (image == 'selection' && self.options.out > self.options['in']) {
             var left = Math.round(
                     self.options['in'] * self.options.width / self.options.duration
                 ),

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

@@ -10,11 +10,11 @@ Ox.VideoPlayer <f> Generic Video Player
                 in <n> In point (sec)
                 out <n> Out point (sec)
                 text <s> Text            
-        controls <[s]> Controls, from left to right
+        controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
-            Can be 'play', 'playInToOut', 'mute', 'volume', 'size', 'scale',
+            Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
-            'timeline', 'space', 'position', 'settings'. The 'space' control
+            'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
-            is just empty space that separates left-aligned from right-aligned
+            'position', 'settings'. The 'space' control is just empty space
-            controls
+            that separates left-aligned from right-aligned controls.
         duration <n|-1> Duration (sec)
         enableFind <b|false> If true, enable find
         enableFullscreen <b|false> If true, enable fullscreen
@@ -69,7 +69,8 @@ Ox.VideoPlayer = function(options, self) {
     var that = Ox.Element({}, self)
         .defaults({
             annotations: [],
-            controls: [],
+            controlsBottom: [],
+            controlsTop: [],
             duration: 0,
             enableFind: false,
             enableFullscreen: false,
@@ -139,7 +140,7 @@ Ox.VideoPlayer = function(options, self) {
     if (self.options.enableKeyboard) {
         that.bindEvent({
             key_1: function() {
-                toggleScale();
+                toggleScale(true);
             },
             key_f: function() {
                 // need timeout so the "f" doesn't appear in the input field
@@ -151,6 +152,9 @@ Ox.VideoPlayer = function(options, self) {
             key_left: function() {
                 setPosition(self.options.position - self.secondsPerFrame, true);
             },
+            key_m: function() {
+                toggleMuted(true);
+            },
             key_p: function() {
                 playInToOut();
             },
@@ -189,8 +193,9 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     if (
-        (!self.options.externalControls && self.options.controls.length) ||
+        (!self.options.externalControls &&
-        self.options.showIcon || self.options.title
+        (self.options.controlsTop.length || self.options.controlsBottom.length)) ||
+        self.options.showIcon
     ) {
         that.bind({
             mouseenter: function() {
@@ -343,38 +348,15 @@ Ox.VideoPlayer = function(options, self) {
             .appendTo(self.$videoContainer);
     }
 
-    if (self.options.title) {
-        self.$title = $('<div>')
-            .addClass('OxInterface')
-            .css({
-                position: 'absolute',
-                height: (self.barHeight - 1) + 'px',
-                paddingTop: '1px',
-                textAlign: 'center',
-                color: 'rgb(255, 255, 255)',
-                opacity: 0
-            })
-            .css({
-                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
-            })
-            .css({
-                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
-            })
-            .html(self.options.title)
-            .appendTo(that.$element);
-    }
-
     if (self.options.enableFind) {
 
         self.$find = $('<div>')
-            .addClass('OxInterface')
             .css({
                 position: 'absolute',
-                right: '16px',
+                right: 0,
-                top: (self.options.title ? 32 : 16) + 'px',
+                top: self.options.controlsTop.length ? '16px' : 0,
-                width: '128px',
+                borderBottomLeftRadius: '8px',
-                borderRadius: '8px',
+                borderBottomRightRadius: '8px'
-                opacity: 0
             })
             .css({
                 backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
@@ -382,8 +364,34 @@ Ox.VideoPlayer = function(options, self) {
             .css({
                 backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
             })
+            .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',
+                width: '24px',
+                paddingTop: '2px',
+                fontSize: '9px',
+                textAlign: 'center'
+            })
+            .html('0')
+            .appendTo(self.$find);
+
         self.$previousButton = Ox.Button({
                 style: 'symbol',
                 title: 'arrowLeft',
@@ -413,9 +421,7 @@ Ox.VideoPlayer = function(options, self) {
             .appendTo(self.$find);
 
         self.$findInput = Ox.Input({
-                placeholder: 'Find',
+                value: self.options.find
-                value: self.options.find,
-                width: 86
             })
             .css({
                 float: 'left',
@@ -450,15 +456,17 @@ Ox.VideoPlayer = function(options, self) {
                 background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
             });
 
+        ///*
         self.$clearButton = Ox.Button({
                 style: 'symbol',
-                title: 'close',
+                title: 'delete',
                 tooltip: 'Clear',
                 type: 'image'
             })
             .css({float: 'left'})
             .bindEvent({
                 click: function() {
+                    self.$results.html('0');
                     self.$findInput
                         .options({value: ''})
                         .focusInput();
@@ -466,27 +474,33 @@ Ox.VideoPlayer = function(options, self) {
                     self.$timeline && self.$timeline.options({
                         results: self.results
                     });
+                    //setTimeout(self.$findInput.focusInput, 10);
                 }
             })
             .appendTo(self.$find);
+        //*/
       
     }
 
-    if (self.options.controls.length) {
+    ['top', 'bottom'].forEach(function(edge) {
 
-        self.$controls = Ox.Bar({
+        var titlecase = Ox.toTitleCase(edge);
+
+        if (self.options['controls' + titlecase].length) {
+
+            self['$controls' + titlecase] = Ox.Bar({
                 size: self.barHeight
             })
-            .addClass('OxInterface')
+            .addClass('OxControls OxInterface')
             .css({
                 position: 'absolute',
-                bottom: 0,
                 opacity: self.options.externalControls ? 1 : 0
             })
+            .css(edge, 0)
             .appendTo(that.$element);
 
             if (!self.options.externalControls) {
-            self.$controls.css({
+                self['$controls' + titlecase].css({
                     backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
                 })
                 .css({
@@ -494,75 +508,22 @@ Ox.VideoPlayer = function(options, self) {
                 });
             }
 
-        self.$control = {};
+            self.options['controls' + titlecase].forEach(function(control) {
 
-        self.options.controls.forEach(function(control) {
+                if (control == 'find') {
 
-            if (control == 'play') {
+                    self.$findButton = Ox.Button({
-
-                self.$playButton = Ox.Button({
-                    style: 'symbol',
-                    // FIXME: this is retarded, fix Ox.Button
-                    title: [
-                        {id: 'play', title: 'play', selected: self.options.paused},
-                        {id: 'pause', title: 'pause', selected: !self.options.paused}
-                    ],
-                    tooltip: ['Play', 'Pause'],
-                    type: 'image'
-                })
-                .css({float: 'left'})
-                .bindEvent('click', function() {
-                    togglePaused();
-                })
-                .appendTo(self.$controls);
-
-            } else if (control == 'playInToOut') {
-
-                self.$playInToOutButton = Ox.Button({
-                    style: 'symbol',
-                    title: 'playInToOut',
-                    tooltip: 'Play In to Out',
-                    type: 'image'
-                })
-                .css({float: 'left'})
-                .bindEvent('click', playInToOut)
-                .appendTo(self.$controls);
-
-            } else if (control == 'mute') {
-
-                self.$muteButton = Ox.Button({
                         style: 'symbol',
                         title: [
-                        {id: 'mute', title: 'mute', selected: !self.options.muted},
+                            {id: 'find', title: 'find'},
-                        {id: 'unmute', title: 'unmute', selected: self.options.muted}
+                            {id: 'close', title: 'close'}
                         ],
-                    tooltip: ['Mute', 'Unmute'],
+                        tooltip: ['Find', 'Close'],
                         type: 'image'
                     })
                     .css({float: 'left'})
-                .bindEvent('click', function() {
+                    .bindEvent('click', toggleFind)
-                    toggleMuted();
+                    .appendTo(self['$controls' + titlecase]);
-                })
-                .appendTo(self.$controls);
-
-            } else if (control == 'volume') {
-                
-            } else if (control == 'scale') {
-
-                self.$scaleButton = Ox.Button({
-                    style: 'symbol',
-                    title: [
-                        {id: 'fill', title: 'fill', selected: !self.options.scaleToFill},
-                        {id: 'fit', title: 'fit', selected: self.options.scaleToFill}
-                    ],
-                    tooltip: ['Scale to Fill', 'Scale to Fit'],
-                    type: 'image'
-                })
-                .css({float: 'left'})
-                .bindEvent('click', function() {
-                    toggleScale();
-                })
-                .appendTo(self.$controls);
 
                 } else if (control == 'fullscreen') {
 
@@ -579,56 +540,54 @@ Ox.VideoPlayer = function(options, self) {
                     .bindEvent('click', function() {
                         toggleFullscreen();
                     })
-                .appendTo(self.$controls);
+                    .appendTo(self['$controls' + titlecase]);
 
-            } else if (control == 'size') {
+                } else if (control == 'mute') {
 
-                self.$sizeButton = Ox.Button({
+                    self.$muteButton = Ox.Button({
                         style: 'symbol',
                         title: [
-                        {id: 'grow', title: 'grow', selected: !self.options.sizeIsLarge},
+                            {id: 'mute', title: 'mute', selected: !self.options.muted},
-                        {id: 'shrink', title: 'shrink', selected: self.options.sizeIsLarge}
+                            {id: 'unmute', title: 'unmute', selected: self.options.muted}
                         ],
-                    tooltip: ['Larger', 'Smaller'],
+                        tooltip: ['Mute', 'Unmute'],
                         type: 'image'
                     })
                     .css({float: 'left'})
-                .bindEvent('click', toggleSize)
+                    .bindEvent('click', function() {
-                .appendTo(self.$controls);
+                        toggleMuted();
-
-            } else if (control == 'timeline') {
-
-                /*
-                if (self.options.showProgress) {
-                    self.$progress = $('<img>')
-                        .attr({
-                            src: getProgressImageURL()
                     })
-                        .css({
+                    .appendTo(self['$controls' + titlecase]);
-                            float: 'left',
+
-                            height: self.barHeight + 'px',
+                } else if (control == 'play') {
+
+                    self.$playButton = Ox.Button({
+                        style: 'symbol',
+                        // FIXME: this is retarded, fix Ox.Button
+                        title: [
+                            {id: 'play', title: 'play', selected: self.options.paused},
+                            {id: 'pause', title: 'pause', selected: !self.options.paused}
+                        ],
+                        tooltip: ['Play', 'Pause'],
+                        type: 'image'
                     })
-                        .appendTo(self.$timelineImages.$element);
-                }
-                */
-
-                if (self.options.duration) {
-                    self.$timeline = getTimeline()
-                } else {
-                    self.$timeline = Ox.Element()
-                        .css({
-                            float: 'left'
-                        })
-                        .html('&nbsp;');
-                }
-                self.$timeline.appendTo(self.$controls);
-
-            } else if (control == 'space') {
-
-                self.$space = $('<div>')
                     .css({float: 'left'})
-                    .html('&nbsp;') // fixme: ??
+                    .bindEvent('click', function() {
-                    .appendTo(self.$controls.$element);
+                        togglePaused();
+                    })
+                    .appendTo(self['$controls' + titlecase]);
+
+                } else if (control == 'playInToOut') {
+
+                    self.$playInToOutButton = Ox.Button({
+                        style: 'symbol',
+                        title: 'playInToOut',
+                        tooltip: 'Play In to Out',
+                        type: 'image'
+                    })
+                    .css({float: 'left'})
+                    .bindEvent('click', playInToOut)
+                    .appendTo(self['$controls' + titlecase]);
 
                 } else if (control == 'position') {
 
@@ -663,7 +622,7 @@ Ox.VideoPlayer = function(options, self) {
                                     .focusInput(false);
                             }
                         })
-                    .appendTo(self.$controls.$element);
+                        .appendTo(self['$controls' + titlecase].$element);
 
                     self.$positionInput = Ox.Input({
                             value: formatPosition(),
@@ -685,7 +644,7 @@ Ox.VideoPlayer = function(options, self) {
                             }
                         })
                         .hide()
-                    .appendTo(self.$controls.$element);
+                        .appendTo(self['$controls' + titlecase].$element);
 
                     self.$positionInput.children('input').css({
                             width: (self.positionWidth - 6) + 'px',
@@ -703,12 +662,198 @@ Ox.VideoPlayer = function(options, self) {
                             background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
                         });                
                 
+                } else if (control == 'scale') {
+
+                    self.$scaleButton = Ox.Button({
+                        style: 'symbol',
+                        title: [
+                            {id: 'fill', title: 'fill', selected: !self.options.scaleToFill},
+                            {id: 'fit', title: 'fit', selected: self.options.scaleToFill}
+                        ],
+                        tooltip: ['Scale to Fill', 'Scale to Fit'],
+                        type: 'image'
+                    })
+                    .css({float: 'left'})
+                    .bindEvent('click', function() {
+                        toggleScale();
+                    })
+                    .appendTo(self['$controls' + titlecase]);
+
+                } else if (control == 'size') {
+
+                    self.$sizeButton = Ox.Button({
+                        style: 'symbol',
+                        title: [
+                            {id: 'grow', title: 'grow', selected: !self.options.sizeIsLarge},
+                            {id: 'shrink', title: 'shrink', selected: self.options.sizeIsLarge}
+                        ],
+                        tooltip: ['Larger', 'Smaller'],
+                        type: 'image'
+                    })
+                    .css({float: 'left'})
+                    .bindEvent('click', toggleSize)
+                    .appendTo(self['$controls' + titlecase]);
+
+                } else if (control == 'space') {
+
+                    self['$space' + titlecase] = $('<div>')
+                        .css({float: 'left'})
+                        .html('&nbsp;') // fixme: ??
+                        .appendTo(self['$controls' + titlecase].$element);
+
+                } else if (control == 'timeline') {
+
+                    /*
+                    if (self.options.showProgress) {
+                        self.$progress = $('<img>')
+                            .attr({
+                                src: getProgressImageURL()
+                            })
+                            .css({
+                                float: 'left',
+                                height: self.barHeight + 'px',
+                            })
+                            .appendTo(self.$timelineImages.$element);
+                    }
+                    */
+
+                    if (self.options.duration) {
+                        self.$timeline = getTimeline()
+                    } else {
+                        self.$timeline = Ox.Element()
+                            .css({
+                                float: 'left'
+                            })
+                            .html('&nbsp;');
+                    }
+                    self.$timeline.appendTo(self['$controls' + titlecase]);
+
+                } else if (control == 'title') {
+
+                    self.$title = $('<div>')
+                        .addClass('OxInterface')
+                        .css({
+                            float: 'left',
+                            paddingTop: '1px',
+                            textAlign: 'center',
+                            color: 'rgb(255, 255, 255)'
+                        })
+                        .html(self.options.title)
+                        .appendTo(self['$controls' + titlecase].$element);
+
+                } else if (control == 'volume') {
+
+                    self.$volumeButton = Ox.Button({
+                        style: 'symbol',
+                        title: 'mute',
+                        tooltip: 'Volume',
+                        type: 'image'
+                    })
+                    .css({float: 'left'})
+                    .bindEvent('click', function() {
+                        self.$volume.toggle();
+                    })
+                    .appendTo(self['$controls' + titlecase]);
+
                 }
 
             });
 
         }
 
+    });
+
+    if (self.options.enableVolume) {
+
+        self.$volume = $('<div>')
+            .css({
+                position: 'absolute',
+                left: 0,
+                bottom: self.options.controlsBottom.length ? '16px' : 0,
+                height: '16px',
+                borderTopLeftRadius: '8px',
+                borderTopRightRadius: '8px'
+            })
+            .css({
+                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+            })
+            .css({
+                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+            })
+            .hide()
+            .appendTo(that.$element);
+
+        self.$muteButton = Ox.Button({
+                style: 'symbol',
+                title: [
+                    {id: 'mute', title: 'mute', selected: !self.options.muted},
+                    {id: 'unmute', title: 'unmute', selected: self.options.muted}
+                ],
+                tooltip: ['Mute', 'Unmute'],
+                type: 'image'
+            })
+            .css({float: 'left'})
+            .bindEvent({
+                click: function() {
+                    toggleMuted();
+                }
+            })
+            .appendTo(self.$volume);
+
+        self.$volumeInput = Ox.Range({
+                max: 1,
+                min: 0,
+                step: 0.001,
+                value: self.options.muted ? 0 : self.options.volume
+            })
+            .css({
+                float: 'left'
+            })
+            .bindEvent({
+                change: setVolume
+            })
+            .appendTo(self.$volume);
+
+        self.$volumeInput.find('.OxTrack')
+            .css({
+                //border: '1px solid rgba(64, 64, 64, 1)'
+                padding: '1px',
+                border: 0
+            })
+            .css({
+                background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
+            })
+            .css({
+                background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
+            });                
+
+        self.$volumeInput.find('.OxThumb')
+            .css({
+                //border: '1px solid rgba(64, 64, 64, 1)'
+                padding: '1px 7px 1px 7px',
+                border: 0
+            })
+            .css({
+                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+            })
+            .css({
+                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
+            });
+
+        self.$volumeValue = $('<div>')
+            .css({
+                float: 'left',
+                width: '24px',
+                paddingTop: '2px',
+                fontSize: '9px',
+                textAlign: 'center'
+            })
+            .html(self.options.muted ? 0 : Math.round(self.options.volume * 100))
+            .appendTo(self.$volume);
+
+    }
+
+
     setSizes();
 
     function clearInterfaceTimeout() {
@@ -735,13 +880,22 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function find(query) {
+        var results = [];
+        Ox.print(query)
+        if (query.length) {
             query = query.toLowerCase();
-        return query.length ? Ox.map(self.options.subtitles, function(subtitle) {
+            results = Ox.map(self.options.subtitles, function(subtitle) {
                 return subtitle.text.toLowerCase().indexOf(query) > -1 ? {
                     'in': subtitle['in'],
                     out: subtitle.out
                 } : null;
-        }) : [];
+            });
+            if (results.length == 0) {
+                // fixme: doesn't happen
+                self.$findInput.focusInput();
+            }
+        }
+        return results;
     }
 
     function formatPosition(position) {
@@ -751,10 +905,14 @@ Ox.VideoPlayer = function(options, self) {
 
     function getCSS(element) {
         var css;
-        if (element == 'controls' || element == 'title') {
+        if (element == 'controlsTop' || element == 'controlsBottom') {
             css = {
                 width: self.width + 'px'
             };
+        } else if (element == 'find') {
+            css = {
+                width: Math.min(208, self.width) + 'px'
+            };
         } else if (element == 'loadingIcon') {
             css = {
                 left: self.iconLeft + 'px',
@@ -767,7 +925,7 @@ Ox.VideoPlayer = function(options, self) {
                 logoMargin = Math.round(self.height / 20);
             css = {
                 left: logoMargin + 'px',
-                top: (logoMargin + !!self.titleIsVisible * 16) + 'px',
+                top: logoMargin + (self.controlsTopAreVisible ? 16 : 0) + 'px',
                 height: logoHeight + 'px',
             };
         } else if (element == 'player') {
@@ -777,7 +935,7 @@ Ox.VideoPlayer = function(options, self) {
                     ? window.innerHeight
                     : self.height + (
                         self.options.externalControls
-                        ? (!!self.options.controls.length + !!self.options.title) * self.barHeight
+                        ? (!!self.options.controlsTop.length + !!self.options.controlsBottom.length) * self.barHeight
                         : 0)) + 'px'
             }, self.options.fullscreen ? {
                 left: 0,
@@ -828,20 +986,28 @@ Ox.VideoPlayer = function(options, self) {
             };
         } else if (element == 'subtitle') {
             css = {
-                bottom: (parseInt(self.height / 16) + !!self.controlsAreVisible * 16) + 'px',
+                bottom: (parseInt(self.height / 16) + !!self.controlsBottomAreVisible * 16) + 'px',
                 width: self.width + 'px',
                 fontSize: parseInt(self.height / 20) + 'px',
                 WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
             };
-        } else if (element == 'space' || element == 'timeline') {
+        } else if (element == 'spaceBottom' || element == 'timeline') {
             css = {
                 width: self.timelineWidth + 'px'
             };
+        } else if (element == 'spaceTop' || element == 'title') {
+            css = {
+                width: getTitleWidth() + 'px'
+            };
         } else if (element == 'videoContainer') {
             css = {
                 width: self.width + 'px',
                 height: self.height + 'px'
             };
+        } else if (element == 'volume') {
+            css = {
+                width: Math.min(168, self.width)
+            };
         }
         return css;
     }
@@ -929,6 +1095,12 @@ Ox.VideoPlayer = function(options, self) {
             .css({
                 float: 'left'
             })
+            .css({
+                background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
+            })
+            .css({
+                background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
+            })
             .bindEvent({
                 position: function(data) {
                     setPosition(data.position, true);
@@ -946,7 +1118,7 @@ Ox.VideoPlayer = function(options, self) {
 
     function getTimelineLeft() {
         var left = 0;
-        Ox.forEach(self.options.controls, function(control) {
+        Ox.forEach(self.options.controlsBottom, function(control) {
             if (control == 'timeline') {
                 return false;
             }
@@ -957,7 +1129,7 @@ Ox.VideoPlayer = function(options, self) {
 
     function getTimelineWidth() {
         return (self.options.fullscreen ? window.innerWidth : self.options.width) -
-            self.options.controls.reduce(function(prev, curr) {
+            self.options.controlsBottom.reduce(function(prev, curr) {
                 return prev + (
                     curr == 'timeline' || curr == 'space' ? 0 :
                     curr == 'position' ? self.positionWidth : 16
@@ -965,13 +1137,45 @@ Ox.VideoPlayer = function(options, self) {
             }, 0);
     }
 
+    function getTitleWidth() {
+        return (self.options.fullscreen ? window.innerWidth : self.options.width) -
+            self.options.controlsTop.reduce(function(prev, curr) {
+                return prev + (
+                    curr == 'title' || curr == 'space' ? 0 : 16
+                );
+            }, 0);
+    }
+
+    function getVolumeImageURL() {
+        var symbol;
+        if (self.options.muted || self.options.volume == 0) {
+            symbol = 'unmute';
+        } else if (self.options.volume < 1/3) {
+            symbol = 'VolumeUp';
+        } else if (self.options.volume < 2/3) {
+            symbol = 'VolumeDown';
+        } else {
+            symbol = 'mute';
+        }
+        return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/');
+    }
+
     function hideInterface() {
         Ox.print('hideInterface');
         self.interfaceTimeout = setTimeout(function() {
             if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
-                self.titleIsVisible = false;
+                self.controlsTopAreVisible = false;
-                self.controlsAreVisible = false;
+                self.controlsBottomAreVisible = false;
-                that.find('.OxInterface').animate({
+                self.$controlsTop && self.$controlsTop.animate({
+                    opacity: 0
+                }, 250);
+                self.$controlsBottom && self.$controlsBottom.animate({
+                    opacity: 0
+                }, 250);
+                self.$find && self.$find.is(':visible') && self.$find.animate({
+                    opacity: 0
+                }, 250);
+                self.$volume && self.$volume.is(':visible') && self.$volume.animate({
                     opacity: 0
                 }, 250);
                 self.$logo && self.$logo.animate({
@@ -1133,7 +1337,7 @@ Ox.VideoPlayer = function(options, self) {
         self.iconTop = parseInt((self.height - self.iconSize) / 2);
         if (self.$timeline || self.$space) {
             self.timelineWidth = self.width - 
-                self.options.controls.reduce(function(prev, curr) {
+                self.options.controlsBottom.reduce(function(prev, curr) {
                     return prev + (
                         curr == 'timeline' || curr == 'space' ? 0 :
                         curr == 'position' ? self.positionWidth : 16
@@ -1151,8 +1355,10 @@ Ox.VideoPlayer = function(options, self) {
         self.$loadingIcon.animate(getCSS('loadingIcon'), ms);
         self.$playIcon && self.$playIcon.animate(getCSS('playIcon'), ms);
         self.$subtitle && self.$subtitle.animate(getCSS('subtitle'), ms);
+        self.$controlsTop && self.$controlsTop.animate(getCSS('controlsTop'), ms);
         self.$title && self.$title.animate(getCSS('title'), ms);
-        self.$controls && self.$controls.animate(getCSS('controls'), ms);
+        self.$spaceTop && self.$spaceTop.animate(getCSS('spaceTop'), ms);
+        self.$controlsBottom && self.$controlsBottom.animate(getCSS('controlsBottom'), ms);
         if (self.$timeline) {
             self.$timeline.animate(getCSS('timeline'), ms, function() {
                 self.$timeline.options({
@@ -1160,7 +1366,19 @@ Ox.VideoPlayer = function(options, self) {
                 })
             });
         }
-        self.$space && self.$space.animate(getCSS('space'), ms);
+        self.$spaceBottom && self.$spaceBottom.animate(getCSS('spaceBottom'), ms);
+        if (self.$find) {
+            self.$find.animate(getCSS('find'), ms);
+            self.$findInput.options({
+                width: Math.min(128, self.width - 80)
+            });
+        }
+        if (self.$volume) {
+            self.$volume.animate(getCSS('volume'), ms);
+            self.$volumeInput.options({
+                width: Math.min(128, self.width - 40)
+            });
+        }
     }
 
     function setSubtitle() {
@@ -1174,16 +1392,34 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
+    function setVolume(data) {
+        self.options.volume = data.value;
+        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() {
         Ox.print('showInterface');
         clearTimeout(self.interfaceTimeout);
-        if (self.$title) {
+        if (self.$controlsTop) {
-            self.titleIsVisible = true;
+            self.controlsTopAreVisible = true;
         }
-        if (self.$controls) {
+        if (self.$controlsBottom) {
-            self.controlsAreVisible = true;
+            self.controlsBottomAreVisible = true;
         }
-        that.find('.OxInterface').animate({
+        self.$controlsTop && self.$controlsTop.animate({
+            opacity: 1
+        }, 250);
+        self.$controlsBottom && self.$controlsBottom.animate({
+            opacity: 1
+        }, 250);
+        self.$find && self.$find.is(':visible') && self.$find.animate({
+            opacity: 1
+        }, 250);
+        self.$volume && self.$volume.is(':visible') && self.$volume.animate({
             opacity: 1
         }, 250);
         self.$logo && self.$logo.animate({
@@ -1219,12 +1455,12 @@ Ox.VideoPlayer = function(options, self) {
     function submitFindInput() {
         self.options.find = self.$findInput.options('value');
         self.results = find(self.options.find);
+        self.$results.html(self.results.length);
         self.$timeline && self.$timeline.options({
             results: self.results
         });
         if (self.results.length) {
-            setPosition(self.results[0]['in'] + self.secondsPerFrame, true);
+            goToNextResult(1);
-            self.currentResult = 0;
         }
     }
 
@@ -1262,6 +1498,11 @@ Ox.VideoPlayer = function(options, self) {
         self.mouseHasLeft && hideInterface();
     }
 
+    function toggleFind() {
+        self.$find.toggle();
+        self.$find.is(':visible') && self.$findInput.focusInput(false);
+    }
+
     function toggleFullscreen(toggleButton) {
         var parentOffset, wasPlaying;
         self.options.fullscreen = !self.options.fullscreen;
@@ -1295,7 +1536,7 @@ Ox.VideoPlayer = function(options, self) {
                         }
                     }
                 });
-                self.$controls && self.$controls.bind({
+                that.find('.OxControls').bind({
                     mouseenter: function() {
                         self.mouseIsInControls = true;
                     },
@@ -1310,7 +1551,7 @@ Ox.VideoPlayer = function(options, self) {
             // flag makes the animation end on absolute position
             self.exitFullscreen = true;
             that.unbind('mousemove');
-            self.$controls && self.$controls
+            that.find('.OxControls')
                 .trigger('mouseleave')
                 .unbind('mouseenter')
                 .unbind('mouseleave');
@@ -1320,7 +1561,8 @@ Ox.VideoPlayer = function(options, self) {
                 that.detach()
                     .css({
                         left: self.relativeOffset.left + 'px',
-                        top: self.relativeOffset.top + 'px'
+                        top: self.relativeOffset.top + 'px',
+                        zIndex: 1
                     })
                     .appendTo(self.$parent);
                 wasPlaying && self.video.play();
@@ -1339,6 +1581,15 @@ Ox.VideoPlayer = function(options, self) {
         if (toggleButton && self.$muteButton) {
             self.$muteButton.toggleTitle();
         }
+        self.$volumeButton && self.$volumeButton.attr({
+            src: getVolumeImageURL()
+        });
+        self.$volumeInput && self.$volumeInput.options({
+            value: self.options.muted ? 0 : self.options.volume
+        });
+        self.$volumeValue &&
+            self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
+        
     }
 
     function togglePaused(toggleButton) {