From 568629fb347de799ebf0589190832ae8748c19c7 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Fri, 13 May 2011 17:44:50 +0200
Subject: [PATCH] add scale (fill/fit) functionality to video player

---
 demos/video/js/video.js                  |   14 +-
 source/Ox.UI/js/Video/Ox.VideoElement.js |    1 +
 source/Ox.UI/js/Video/Ox.VideoPlayer.js  | 1098 ++++++++++++++--------
 3 files changed, 732 insertions(+), 381 deletions(-)

diff --git a/demos/video/js/video.js b/demos/video/js/video.js
index bcdb2ec0..e266560d 100644
--- a/demos/video/js/video.js
+++ b/demos/video/js/video.js
@@ -9,12 +9,18 @@ Ox.load('UI', {
         padding: '16px'
     });
     Ox.VideoPlayer({
+        controls: ['play', 'mute', 'size', 'scale', 'timeline', 'position'],
         height: 96 * 384/180,//96 * 256/180,
+        logoLink: 'http://next.0xdb.org/' + id,
+        logoTitle: 'Watch on 0xdb',
+        logo: 'png/logo.png',
+        paused: true,
+        scaleToFill: true,
         subtitles: 'srt/' + id + '.srt',
-        timelineURL: timeline,
-        title: 'Brick',
-        videoURL: url,
-        width: 384//256
+        timeline: timeline,
+        title: '<b>Brick</b> - Rian Johnson - 2005',
+        video: url,
+        width: 500//384//256
     }).appendTo(Ox.UI.$body);
     /*
     var id = '0133093';
diff --git a/source/Ox.UI/js/Video/Ox.VideoElement.js b/source/Ox.UI/js/Video/Ox.VideoElement.js
index c1df1e6e..23b6406a 100644
--- a/source/Ox.UI/js/Video/Ox.VideoElement.js
+++ b/source/Ox.UI/js/Video/Ox.VideoElement.js
@@ -1,4 +1,5 @@
 // vim: et:ts=4:sw=4:sts=4:ft=js
+
 Ox.VideoElement = function(options, self) {
 
     var self = self || {},
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index d70b2e07..15d9ff92 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -1,11 +1,59 @@
 /*@
-Ox.VideoPlayer <f> Generic Video Player Element
+Ox.VideoPlayer <f> Generic Video Player
     (options, self) -> <o> Video Player
     options <o> Options
-        subtitles <s|[o]> URL or SRT or subtitles object
-            start <n> Start (sec)
-            stop <n> Stop (sec)
+        annotation <[o]> Array of annotation tracks
+            name <s> Name of the annotation track
+            data <[o]> Annotation data
+                in <n> In point (sec)
+                out <n> Out point (sec)
+                text <s> Text            
+        controls <[s]> Controls, from left to right
+            Can be 'play', 'playInToOut', 'mute', 'volume', 'size', 'scale',
+            'timeline', 'space', 'position', 'settings'. The 'space' control
+            is just empty space that separates left-aligned from right-aligned
+            controls
+        duration <n|-1> Duration (sec)
+        enableKeyboard <b|false> If true, enable keyboard controls
+        externalControls <b|false> If true, controls are outside the video
+        focus <s|'click'> focus on 'click', 'load' or 'mouseover'
+        fps <n|25> Frames per second
+        height <n|144> Height in px (excluding external controls)
+        in <n> In point (sec)
+        keepIconVisible <b|false> If true, play icon stays visible after mouseleave
+        keepLargeTimelineVisible <b|false> If true, large timeline stays visible after mouseleave
+        keepLogoVisible <b|false> If true, logo stays visible after mouseleave
+        logo <s|''> Logo image URL
+        logoLink <s|''> Logo link URL
+        logoTitle <s|''> Text for tooltip
+        muted <b|false> If true, video is muted
+        paused <b|false> If true, video is paused
+        playInToOut <b|false> If true, video plays only from in to out
+        position <n|0> Initial position (sec)
+        poster <s|''> Poster URL
+        posterFrame <n|-1> Position of poster frame (sec)
+        preload <s|'auto'> 'auto', 'metadata' or 'none'
+        out <n|-1> Out point (sec)
+        scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit)
+        showControlsOnLoad <b|false> If true, show controls on load
+        showFind <b|false> If true, show find input
+        showHours <b|false> If true, don't show hours for videos shorter than one hour
+        showIcon <b|false> If true, show play icon
+        showIconOnLoad <b|false> If true, show icon on load
+        showLargeTimeline <b|false> If true, show large timeline
+        showMilliseconds <b|false> If true, show milliseconds
+        showPointMarkers <b|false> If true, show in/out markers
+        sizeIsLarge <b|false> If true, initial state of the size control is large
+        subtitles <s|[o]|[]> URL or SRT or array of subtitles
+            in <n> In point (sec)
+            out <n> Out point (sec)
             text <s> Text
+        timeline <s> Timeline image URL
+        title <s|''> Video title
+        type <s|'play'> 'play', 'in' or 'out'
+        video <s|''> Video URL
+        volume <n|1> Volume (0-1)
+        width <n|256> Width in px
 @*/
 
 Ox.VideoPlayer = function(options, self) {
@@ -13,32 +61,57 @@ Ox.VideoPlayer = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
-            autoplay: false,
-            height: 192,
+            annotations: [],
+            controls: [],
+            duration: -1,
+            enableKeyboard: false,
+            externalControls: false,
+            focus: 'click',
+            fps: 25,
+            height: 144,
+            'in': -1,
+            keepIconVisible: false,
+            keepLargeTimelineVisible: false,
+            keepLogoVisible: false,
+            logo: '',
             logoLink: '',
             logoTitle: '',
-            logoURL: '',
+            muted: false,
+            paused: false,
+            playInToOut: false,
             position: 0,
-            showControls: false,
-            showVolume: false,
+            poster: '',
+            preload: 'auto',
+            out: -1,
+            scaleToFill: false,
+            showControlsOnLoad: false,
+            showFind: false,
+            showHours: false,
+            showIcon: false,
+            showIconOnLoad: false,
+            showLargeTimeline: false,
+            showMilliseconds: false,
+            showPointMarkers: false,
             subtitles: [],
-            timelineURL: '',
+            timeline: '',
             title: '',
-            videoURL: '',
+            type: 'play',
+            video: '',
+            volume: 1,
             width: 256
         })
         .options(options || {})
         .css({
-            position: 'absolute',
-            width: self.options.width + 'px',
-            height: self.options.height + 'px'
-            //background: 'red'
-        })
-        .bind({
-            mouseenter: showControls,
-            mouseleave: hideControls
+            position: 'absolute'
         });
 
+    if (self.options.controls.length || self.options.showIcon || self.options.title) {
+        that.bind({
+            mouseenter: showInterface,
+            mouseleave: hideInterface
+        });
+    }
+
     if (Ox.isString(self.options.subtitles)) {
         if (self.options.subtitles.indexOf('\n') > -1) {
             self.options.subtitles = Ox.parseSRT(self.options.subtitles);
@@ -50,64 +123,56 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
+    // fixme: this is _relative_, resizing can happen
+    self.ratio = self.options.width / self.options.height;
+    self.barHeight = 16;
+    setSize();
+
+    self.millisecondsPerFrame = 1000 / self.options.fps;
+
     self.buffered = [];
     self.controlsTimeout;
     self.dragTimeout;
 
-    self.controlsHeight = 16;
-    self.outerTrackWidth = self.options.width - 96;
-    self.innerTrackWidth = self.outerTrackWidth - self.controlsHeight;
-    self.markerOffset = -self.innerTrackWidth - 8;
-
-    self.$video = Ox.VideoElement({
-            height: self.options.height,
-            paused: true,
-            url: self.options.videoURL,
-            width: self.options.width
-        })
+    self.$videoContainer = $('<div>')
         .css({
             position: 'absolute',
+            width: self.options.width + 'px',
+            height: self.options.height + 'px',
+            overflow: 'hidden'
         })
-        .bindEvent({
+        .appendTo(that.$element)
+
+    self.$video = $('<video>')
+        .attr(Ox.extend({
+            preload: self.options.preload,
+            src: self.options.video
+        }, !self.options.paused ? {
+            autoplay: 'autoplay'
+        } : {}, self.options.poster ? {
+            poster: self.options.poster
+        } : {}))
+        .css({
+            position: 'absolute'
+        })
+        .bind({
+            click: togglePaused,
+            ended: ended,
             loadedmetadata: loadedmetadata,
-            paused: function(data) {
-                // called when playback ends
-                /*
-                self.$playButton.toggleTitle();
-                self.$positionMarkerRing.css({
-                    borderColor: 'rgba(255, 255, 255, 0.5)'
-                });
-                */
-            },
-            playing: function(data) {
-                setPosition(data.position);
-            },
-            progress: function(data) {
-                var buffered = data.video.buffered;
-                for (var i = 0; i < buffered.length; i++) {
-                    self.buffered[i] = [buffered.start(i), buffered.end(i)];
-                    // fixme: firefox weirdness
-                    if (self.buffered[i][0] > self.buffered[i][1]) {
-                        self.buffered[i][0] = 0;
-                    }
-                    //Ox.print(i, self.buffered[i][0], self.buffered[i][1])
-                }
-                self.$buffered.attr({
-                    src: getBufferedImageURL()
-                })
-                //self.$bar.html(Ox.formatDuration(data.video.buffered.end(data.video.buffered.length - 1)))
-            },
-            seeked: hideLoadingIcon,
-            seeking: showLoadingIcon
+            progress: progress,
+            seeked: seeked,
+            seeking: seeking
         })
-        .appendTo(that);
+        .appendTo(self.$videoContainer);
+    self.video = self.$video[0];
 
     if (self.options.title) {
         self.$titlebar = $('<div>')
+            .addClass('OxInterface')
             .css({
                 position: 'absolute',
                 width: self.options.width + 'px',
-                height: '15px',
+                height: (self.barHeight - 1) + 'px',
                 paddingTop: '1px',
                 textAlign: 'center'
             })
@@ -121,300 +186,387 @@ Ox.VideoPlayer = function(options, self) {
             .appendTo(that.$element);
     }
 
+    if (self.options.logo) {
+        self.logoHeight = Math.round(self.options.height / 10);
+        self.logoMargin = Math.round(self.options.height / 20);
+        self.$logo = $('<img>')
+            .attr({
+                src: self.options.logo
+            })
+            .css({
+                position: 'absolute',
+                left: self.logoMargin + 'px',
+                top: self.logoMargin + 'px',
+                height: self.logoHeight + 'px',
+                cursor: self.options.logoLink ? 'pointer' : 'default',
+                opacity: 0.25,
+            })
+            .appendTo(that.$element);
+        if (self.options.logoTitle) {
+            self.$logoTooltip = Ox.Tooltip({
+                title: self.options.logoTitle
+            });
+        }
+    }
+
+    self.iconSize = Math.min(Math.round(self.options.height / 10), 16);
     self.$loadingIcon = $('<img>')
         .attr({
             src: Ox.UI.getImagePath('symbolLoadingAnimated.svg').replace('/classic/', '/modern/')
         })
         .css({
             position: 'absolute',
-            left: parseInt(self.options.width / 2) - 16 + 'px', // fixme
-            top: parseInt(self.options.height / 2) - 16 + 'px',
-            width: '32px',
-            height: '32px'
+            left: parseInt((self.options.width - self.iconSize) / 2) + 'px',
+            top: parseInt((self.options.height - self.iconSize) / 2) + 'px',
+            width: self.iconSize + 'px',
+            height: self.iconSize + 'px'
         })
         .appendTo(that.$element);
 
-    self.$subtitle = $('<div>')
-        //.addClass('OxSubtitle')
-        .css({
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            textAlign: 'center',
-            textShadow: 'rgba(0, 0, 0, 1) 0 0 4px',
-            color: 'rgb(255, 255, 255)'
-        })
-        .appendTo(that.$element);
-
-    setSubtitleSize();
-
-    self.$controls = Ox.Bar({
-            size: self.controlsHeight
-        })
-        .css({
-            position: 'absolute',
-            bottom: 0,
-            width: self.options.width + 'px',
-        })
-        .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))'
-        })
-        .appendTo(that);
-
-    self.$buttons = Ox.Element()
-        .css({
-            float: 'left',
-            width: '48px'
-        })
-        .appendTo(self.$controls);
-
-    self.$playButton = Ox.Button({
-            style: 'symbol',
-            title: [
-                {id: 'play', title: 'play'},
-                {id: 'pause', title: 'pause'}
-            ],
-            tooltip: ['Play', 'Pause'],
-            type: 'image'
-        })
-        .css({
-            borderRadius: 0
-        })
-        .bindEvent('click', togglePlay)
-        .appendTo(self.$buttons);
-
-    self.$muteButton = Ox.Button({
-            style: 'symbol',
-            title: [
-                {id: 'mute', title: 'mute'},
-                {id: 'unmute', title: 'unmute'}
-            ],
-            tooltip: ['Mute', 'Unmute'],
-            type: 'image'
-        })
-        .css({
-            borderRadius: 0
-        })
-        .bindEvent('click', toggleMute)
-        .appendTo(self.$buttons);
-
-    self.$menuButton = Ox.Button({
-            id: 'select',
-            style: 'symbol',
-            title: 'select',
-            tooltip: ['Menu'],
-            type: 'image'
-        })
-        .css({
-            borderRadius: 0
-        })
-        .bindEvent('click', togglePlay)
-        .appendTo(self.$buttons);
-
-    self.$outerTrack = Ox.Element()
-        .css({
-            float: 'left',
-            width: self.outerTrackWidth + 'px',
-            height: self.controlsHeight + 'px',
-            background: 'rgba(0, 0, 0, 0.75)',
-            borderRadius: self.controlsHeight / 2 + 'px'
-        })
-        /*
-        .css({
-            backgroundImage: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75))'
-        })
-        .css({
-            backgroundImage: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.75), rgba(64, 64, 64, 0.75))'
-        })
-        */
-        .appendTo(self.$controls);
-    
-    self.$innerTrack = Ox.Element()
-        .css({
-            float: 'left',
-            width: self.innerTrackWidth + 'px',
-            height: self.controlsHeight + 'px',
-            marginLeft: self.controlsHeight / 2 + 'px'
-        })
-        .appendTo(self.$outerTrack);
-
-    self.$timeline = $('<img>')
-        .attr({
-            src: self.options.timelineURL
-        })
-        .css({
-            float: 'left',
-            width: self.innerTrackWidth + 'px',
-            height: self.controlsHeight + 'px'
-        })
-        .appendTo(self.$innerTrack.$element);
-
-    self.$buffered = $('<img>')
-        .attr({
-            src: getBufferedImageURL()
-        })
-        .css({
-            float: 'left',
-            marginLeft: -self.innerTrackWidth + 'px',
-            width: self.innerTrackWidth + 'px',
-            height: self.controlsHeight + 'px',
-        })
-        .appendTo(self.$innerTrack.$element);
-
-    self.$positionMarker = $('<div>')
-        .css({
-            float: 'left',
-            width: '14px',
-            height: '14px',
-            marginLeft: self.markerOffset + 'px',
-            border: '1px solid rgba(0, 0, 0, 0.5)',
-            borderRadius: '8px'
-        })
-        .append(
-            self.$positionMarkerRing = $('<div>')
-                .css({
-                    width: '10px',
-                    height: '10px',
-                    border: '2px solid rgba(255, 255, 255, 0.5)',
-                    borderRadius: '7px',
-                })
-                .append(
-                    $('<div>')
-                        .css({
-                            width: '8px',
-                            height: '8px',
-                            border: '1px solid rgba(0, 0, 0, 0.5)',
-                            borderRadius: '5px',
-                        })
-                )
-        )
-        .appendTo(self.$outerTrack.$element);
-
-    self.$trackInterface = Ox.Element()
-        .css({
-            float: 'left',
-            width: self.outerTrackWidth + 'px',
-            height: self.controlsHeight + 'px',
-            marginLeft: - self.outerTrackWidth + 'px'
-        })
-        .appendTo(self.$controls);
-
-    self.$tooltip = Ox.Tooltip({
-        animate: false
-    });
-
-    self.$position = $('<div>')
-        .css({
-            float: 'left',
-            width: '44px',
-            height: '12px',
-            padding: '2px',
-            fontSize: '9px',
-            textAlign: 'center'
-        })
-        .html(Ox.formatDuration(self.options.position))
-        .bind({
-            click: function() {
-                if (!self.$video.paused()) {
-                    self.wasPlaying = true;
-                    self.$video.pause();
-                    self.$playButton.toggleTitle();
-                }
-                self.$position.hide();
-                self.$positionInput
-                    .options({
-                        value: Ox.formatDuration(self.options.position)
+    if (self.options.showIcon) {
+        self.$playIcon = $('<div>')
+            .addClass('OxInterface')
+            .css({
+                position: 'absolute',
+                left: parseInt(self.options.width / 2) - 16 + 'px',
+                top: parseInt(self.options.height / 2) - 16 + 'px',
+                width: '28px',
+                height: '28px',
+                border: '2px solid rgb(255, 255, 255)',
+                borderRadius: '16px',
+                opacity: 0
+            })
+            .append(
+                self.$playIconImage = $('<img>')
+                    .attr({
+                        src: Ox.UI.getImagePath('symbolPlay.svg').replace('/classic/', '/modern/')
                     })
-                    .show()
-                    .focusInput(false);
+                    .css({
+                        width: '20px',
+                        height: '20px',
+                        margin: '4px'
+                    })
+            )
+            .appendTo(that.$element);
+    }
+
+    if (self.options.subtitles.length) {
+        self.$subtitle = $('<div>')
+            //.addClass('OxSubtitle')
+            .css({
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                textAlign: 'center',
+                textShadow: 'rgba(0, 0, 0, 1) 0 0 4px',
+                color: 'rgb(255, 255, 255)'
+            })
+            .appendTo(that.$element);
+        setSubtitleSize();
+    }
+
+    if (self.options.controls.length) {
+
+        self.$controls = $('<div>')
+            .addClass('OxInterface')
+            .css({
+                position: 'absolute',
+                bottom: 0,
+                width: self.options.width + 'px',
+                height: self.barHeight + 'px'
+            })
+            .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))'
+            })
+            .appendTo(that.$element);
+
+        self.$control = {};
+
+        self.positionWidth = 48 + (self.options.showMilliseconds ? 16 : 0);
+        self.outerTrackWidth = self.options.width - self.options.controls.reduce(function(prev, curr) {
+            return prev + (
+                curr == 'timeline' || curr == 'space' ? 0 :
+                curr == 'position' ? self.positionWidth : 16
+            );
+        }, 0);
+        self.innerTrackWidth = self.outerTrackWidth - self.barHeight;
+        self.markerOffset = -self.innerTrackWidth - 8;
+
+        self.options.controls.forEach(function(control) {
+
+            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'
+                })
+                .css({float: 'left'})
+                .bindEvent('click', 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: 'unmute', title: 'unmute', selected: !self.options.muted}
+                    ],
+                    tooltip: ['Mute', 'Unmute'],
+                    type: 'image'
+                })
+                .css({float: 'left'})
+                .bindEvent('click', toggleMuted)
+                .appendTo(self.$controls);
+
+            } else if (control == 'volume') {
+                
+            } 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);
+
+            } 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', toggleScale)
+                .appendTo(self.$controls);
+
+            } else if (control == 'timeline') {
+
+                self.$outerTrack = Ox.Element()
+                    .css({
+                        float: 'left',
+                        width: self.outerTrackWidth + 'px',
+                        height: self.barHeight + 'px',
+                        background: 'rgba(0, 0, 0, 0.75)',
+                        borderRadius: self.barHeight / 2 + 'px'
+                    })
+                    .appendTo(self.$controls);
+
+                self.$innerTrack = Ox.Element()
+                    .css({
+                        float: 'left',
+                        width: self.innerTrackWidth + 'px',
+                        height: self.barHeight + 'px',
+                        marginLeft: self.barHeight / 2 + 'px'
+                    })
+                    .appendTo(self.$outerTrack);
+
+                self.$timeline = $('<img>')
+                    .attr({
+                        src: self.options.timeline
+                    })
+                    .css({
+                        float: 'left',
+                        width: self.innerTrackWidth + 'px',
+                        height: self.barHeight + 'px'
+                    })
+                    .appendTo(self.$innerTrack.$element);
+
+                /*
+                self.$buffered = $('<img>')
+                    .attr({
+                        src: getBufferedImageURL()
+                    })
+                    .css({
+                        float: 'left',
+                        marginLeft: -self.innerTrackWidth + 'px',
+                        width: self.innerTrackWidth + 'px',
+                        height: self.barHeight + 'px',
+                    })
+                    .appendTo(self.$innerTrack.$element);
+                */
+
+                self.$positionMarker = $('<div>')
+                    .css({
+                        float: 'left',
+                        width: '14px',
+                        height: '14px',
+                        marginLeft: self.markerOffset + 'px',
+                        border: '1px solid rgba(0, 0, 0, 0.5)',
+                        borderRadius: '8px'
+                    })
+                    .append(
+                        self.$positionMarkerRing = $('<div>')
+                            .css({
+                                width: '10px',
+                                height: '10px',
+                                border: '2px solid rgba(255, 255, 255, 0.5)',
+                                borderRadius: '7px',
+                            })
+                            .append(
+                                $('<div>')
+                                    .css({
+                                        width: '8px',
+                                        height: '8px',
+                                        border: '1px solid rgba(0, 0, 0, 0.5)',
+                                        borderRadius: '5px',
+                                    })
+                            )
+                    )
+                    .appendTo(self.$outerTrack.$element);
+
+                self.$trackInterface = Ox.Element()
+                    .css({
+                        float: 'left',
+                        width: self.outerTrackWidth + 'px',
+                        height: self.barHeight + 'px',
+                        marginLeft: - self.outerTrackWidth + 'px'
+                    })
+                    .appendTo(self.$controls);
+
+                self.$tooltip = Ox.Tooltip({
+                    animate: false
+                });
+
+            } else if (control == 'space') {
+                
+            } else if (control == 'position') {
+
+                self.$position = $('<div>')
+                    .addClass('foo')
+                    .css({
+                        float: 'left',
+                        width: '44px',
+                        height: '12px',
+                        padding: '2px',
+                        fontSize: '9px',
+                        textAlign: 'center'
+                    })
+                    .html(Ox.formatDuration(self.options.position))
+                    .bind({
+                        click: function() {
+                            if (!self.options.paused) {
+                                self.wasPlaying = true;
+                                togglePaused();
+                                //togglePlayIcon();
+                                self.$playButton.toggleTitle();
+                            }
+                            self.$position.hide();
+                            self.$positionInput
+                                .options({
+                                    value: Ox.formatDuration(self.options.position)
+                                })
+                                .show()
+                                .focusInput(false);
+                        }
+                    })
+                    .appendTo(self.$controls);
+
+                self.$positionInput = Ox.Input({
+                        value: Ox.formatDuration(self.options.position),
+                        width: 48
+                    })
+                    .css({
+                        float: 'left',
+                        background: 'rgba(0, 0, 0, 0)',
+                        MozBoxShadow: '0 0 0',
+                        WebkitBoxShadow: '0 0 0'
+                    })
+                    .bindEvent({
+                        blur: submitPositionInput,
+                        change: submitPositionInput,
+                        //submit: submitPositionInput
+                    })
+                    .hide()
+                    .appendTo(self.$controls);
+
+                self.$positionInput.children('input').css({
+                        width: '42px',
+                        height: '16px',
+                        padding: '0 3px 0 3px',
+                        border: '0px',
+                        borderRadius: '8px',
+                        fontSize: '9px',
+                        color: 'rgb(255, 255, 255)'
+                    })
+                    .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))'
+                    });                
+
             }
-        })
-        .appendTo(self.$controls.$element)
 
-    self.$positionInput = Ox.Input({
-            value: Ox.formatDuration(self.options.position),
-            width: 48
-        })
-        .css({
-            float: 'left',
-            background: 'rgba(0, 0, 0, 0)',
-            MozBoxShadow: '0 0 0',
-            WebkitBoxShadow: '0 0 0'
-        })
-        .bindEvent({
-            blur: submitPositionInput,
-            change: submitPositionInput,
-            //submit: submitPositionInput
-        })
-        .hide()
-        .appendTo(self.$controls.$element);
-
-    self.$positionInput.children('input').css({
-            width: '42px',
-            height: '16px',
-            padding: '0 3px 0 3px',
-            border: '0px',
-            borderRadius: '8px',
-            fontSize: '9px',
-            color: 'rgb(255, 255, 255)'
-        })
-        .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))'
         });
 
-    function submitPositionInput() {
-        self.$positionInput.hide();
-        self.$position.html('').show();
-        setPosition(parsePositionInput(self.$positionInput.options('value')));
-        self.$video.position(self.options.position);
-        if (self.wasPlaying) {
-            self.$video.play();
-            self.$playButton.toggleTitle();
-            self.wasPlaying = false;
-        }
     }
 
-    function parsePositionInput(str) {
-        var position,
-            split = str.split(':').reverse();
-        while (split.length > 3) {
-            split.pop();
-        }
-        position = split.reduce(function(prev, curr, i) {
-            return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
-        }, 0)
-        return Ox.limit(position, 0, self.duration);
+    function ended() {
+        
     }
 
-    function getPosition(e) {
-        // fixme: no offsetX in firefox???
-        if ($.browser.mozilla) {
-            //Ox.print(e, e.layerX - 56)
-            return Ox.limit(
-                (e.layerX - 48 - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
-                0, self.duration
-            );
+    function getVideoCSS() {
+        var playerWidth = self.options.width,
+            playerHeight = self.options.height,
+            playerRatio = playerWidth / playerHeight,
+            videoWidth = self.video.videoWidth,
+            videoHeight = self.video.videoHeight,
+            videoRatio = videoWidth / videoHeight,
+            videoIsWider = videoRatio > playerRatio,
+            width, height;
+        if (self.options.scaleToFill) {
+            width = videoIsWider ? playerHeight * videoRatio : playerWidth;
+            height = videoIsWider ? playerHeight : playerWidth / videoRatio;
         } else {
-            /*Ox.print(e.offsetX, Ox.limit(
-                (e.offsetX - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
-                0, self.duration
-            ))*/
-            return Ox.limit(
-                (e.offsetX - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
-                0, self.duration
-            );
+            width = videoIsWider ? playerWidth : playerHeight * videoRatio;
+            height = videoIsWider ? playerWidth / videoRatio : playerHeight;
         }
-    } 
+        width = Math.round(width);
+        height = Math.round(height);
+        return {
+            width: width + 'px',
+            height: height + 'px',
+            marginLeft: parseInt((playerWidth - width) / 2),
+            marginTop: parseInt((playerHeight - height) / 2)
+        };
+    }
 
     function getBufferedImageURL() {
         var width = self.innerTrackWidth,
-            height = self.controlsHeight,
+            height = self.barHeight,
             $canvas = $('<canvas>')
                 .attr({
                     width: width,
@@ -429,8 +581,8 @@ Ox.VideoPlayer = function(options, self) {
             data = imageData.data;
 
         self.buffered.forEach(function(range) {
-            var left = Math.round(range[0] * width / self.duration),
-                right = Math.round(range[1] * width / self.duration);
+            var left = Math.round(range[0] * width / self.video.duration),
+                right = Math.round(range[1] * width / self.video.duration);
             Ox.loop(left, right, function(x) {
                 Ox.loop(height, function(y) {
                     index = x * 4 + y * 4 * width;
@@ -442,6 +594,26 @@ Ox.VideoPlayer = function(options, self) {
         return canvas.toDataURL();
     }
 
+    function getPosition(e) {
+        // fixme: no offsetX in firefox???
+        if ($.browser.mozilla) {
+            //Ox.print(e, e.layerX - 56)
+            return Ox.limit(
+                (e.layerX - 48 - self.barHeight / 2) / self.innerTrackWidth * self.video.duration,
+                0, self.video.duration
+            );
+        } else {
+            /*Ox.print(e.offsetX, Ox.limit(
+                (e.offsetX - self.barHeight / 2) / self.innerTrackWidth * self.video.duration,
+                0, self.video.duration
+            ))*/
+            return Ox.limit(
+                (e.offsetX - self.barHeight / 2) / self.innerTrackWidth * self.video.duration,
+                0, self.video.duration
+            );
+        }
+    } 
+
     function getSubtitle() {
         var subtitle = '';
         Ox.forEach(self.options.subtitles, function(v) {
@@ -456,37 +628,57 @@ Ox.VideoPlayer = function(options, self) {
         return subtitle;
     }
 
-    function hideControls() {
-        Ox.print('!!!!!!', self.$positionInput.hasFocus())
-        if (!self.$positionInput.hasFocus()) {
+    function hideInterface() {
+        Ox.print('HIDE')
+        if (!(self.$positionInput && self.$positionInput.hasFocus())) {
             self.controlsTimeout = setTimeout(function() {
-                // fixme: use class
-                self.$titlebar.animate({
-                    opacity: 0
-                }, 250);
-                self.$controls.animate({
+                $('.OxInterface').animate({
                     opacity: 0
                 }, 250);
+                self.$logo && self.$logo.animate({
+                    top: self.logoMargin + 'px',
+                    opacity: 0.25
+                }, 250, function() {
+                    self.options.logoLink && self.$logo.unbind('click');
+                    self.options.logoTitle &&
+                        self.$logo.unbind('mouseenter').unbind('mouseleave');
+                });
+                self.$subtitle.animate({
+                    bottom: parseInt(self.options.height / 16) + 'px',
+                });
             }, 1000);
         }
     }
 
+    /*
     function hideLoadingIcon() {
         self.$loadingIcon.animate({
             opacity: 0
-        }, 0);
+        }, 0, function() {
+            self.$playIcon.animate({
+                opacity: 1
+            }, 250);
+        });
+    }
+    */
+
+    function hideLoadingIcon() {
+        self.$loadingIcon.hide().attr({
+            src: Ox.UI.getImagePath('symbolLoading.svg')
+                .replace('/classic/', '/modern/')
+        });
     }
 
-    function loadedmetadata(data) {
-        //self.$position.html(Ox.formatDuration(data.video.duration))
-        //Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight)
-        self.duration = data.video.duration;
-        //Ox.print('DURATION', Ox.formatDuration(self.duration));
+    function loadedmetadata() {
+
+        self.$video.css(getVideoCSS());
+
         hideLoadingIcon();
         that.gainFocus().bindEvent({
             key_space: function() {
+                togglePlayIcon();
                 self.$playButton.toggleTitle();
-                togglePlay();
+                togglePaused();
             }
         });
         self.$trackInterface
@@ -500,10 +692,16 @@ Ox.VideoPlayer = function(options, self) {
                 dragpause: dragpauseTrack,
                 dragend: dragpauseTrack
             });
+        // fixme: maybe not the right moment
+        if (!self.options.paused) {
+            self.playInterval = setInterval(playing, self.millisecondsPerFrame);
+        }
+        Ox.print('W', self.video.videoWidth)
     }
 
     function dragTrack(e) {
         setPosition(getPosition(e));
+        self.video.currentTime = self.options.position;
         if (self.dragTimeout) {
             clearTimeout(self.dragTimeout);
             self.dragTimeout = 0;
@@ -511,12 +709,12 @@ Ox.VideoPlayer = function(options, self) {
     }
 
     function dragpauseTrack(e) {
-        self.$video.position(self.options.position);
+        self.video.currentTime = self.options.position;
     }
 
     function mousedownTrack(e) {
         setPosition(getPosition(e));
-        self.$video.position(self.options.position);
+        self.video.currentTime = self.options.position;
     }
 
     function mouseleaveTrack(e) {
@@ -529,24 +727,79 @@ Ox.VideoPlayer = function(options, self) {
         }).show(e.clientX, e.clientY);
     }
 
-    function showControls() {
-        clearTimeout(self.controlsTimeout);
-        self.$titlebar.animate({
-            opacity: 1
-        }, 250);
-        self.$controls.animate({
-            opacity: 1
-        }, 250);
+    function parsePositionInput(str) {
+        var position, split = str.split(':').reverse();
+        while (split.length > 3) {
+            split.pop();
+        }
+        position = split.reduce(function(prev, curr, i) {
+            return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
+        }, 0)
+        return Ox.limit(position, 0, self.video.duration);
+    }
+
+    function playing() {
+        var event = 'playing';
+        self.options.position = Math.round(
+            self.video.currentTime * self.options.fps
+        ) / self.options.fps;
+        if (
+            (self.options.playInToOut || self.playInToOut) &&
+            self.options.position >= self.options.out
+        )  {
+            togglePaused();
+            setPosition(self.options.out);
+        } else {
+            setPosition();
+        }
+    }
+
+    function progress() {
+        return;
+        var buffered = self.video.buffered;
+        for (var i = 0; i < buffered.length; i++) {
+            self.buffered[i] = [buffered.start(i), buffered.end(i)];
+            // fixme: firefox weirdness
+            if (self.buffered[i][0] > self.buffered[i][1]) {
+                self.buffered[i][0] = 0;
+            }
+        }
+        self.$buffered.attr({
+            src: getBufferedImageURL()
+        })
+    }
+
+    function seeked() {
+        hideLoadingIcon();
+    }
+
+    function seeking() {
+        showLoadingIcon();
+    }
+
+    function setSize() {
+        self.height = self.options.height + (
+            self.options.externalControls
+            ? (!!self.options.controls.length + !!self.options.title) * self.barHeight
+            : 0
+        );
+        that.css({
+            position: 'absolute',
+            width: self.options.width + 'px',
+            height: self.height + 'px'
+        });
     }
 
     function setPosition(position) {
-        self.options.position = position;
-        //Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
+        if (!Ox.isUndefined(position)) {
+            self.options.position = position;
+        }
+        //Ox.print('SP', self.options.position)
         setSubtitle();
         self.$positionMarker.css({
-            marginLeft: self.innerTrackWidth * position / self.duration + self.markerOffset + 'px',
+            marginLeft: self.innerTrackWidth * self.options.position / self.video.duration + self.markerOffset + 'px',
         });
-        self.$position.html(Ox.formatDuration(position));
+        self.$position.html(Ox.formatDuration(self.options.position));
     }
 
     function setSubtitle() {
@@ -562,29 +815,120 @@ Ox.VideoPlayer = function(options, self) {
 
     function setSubtitleSize() {
         self.$subtitle.css({
-            bottom: parseInt(self.controlsHeight + self.options.height / 16) + 'px',
+            bottom: parseInt(self.options.height / 16) + 'px',
             width: self.options.width + 'px',
             fontSize: parseInt(self.options.height / 20) + 'px',
             WebkitTextStroke: (self.options.height / 1000) + 'px rgb(0, 0, 0)'
         });
     }
 
-    function showLoadingIcon() {
-        self.$loadingIcon.animate({
+    function showInterface() {
+        clearTimeout(self.controlsTimeout);
+        $('.OxInterface').animate({
             opacity: 1
-        }, 0);
-    }
-    function toggleMute() {
-        self.$video.toggleMute();
-    }
-
-    function togglePlay() {
-        self.$video.togglePlay();
-        self.$positionMarkerRing.css({
-            borderColor: 'rgba(255, 255, 255, ' + (self.$video.paused() ? 0.5 : 1) + ')'
+        }, 250);
+        self.$logo && self.$logo.animate({
+            top: self.logoMargin + 16 + 'px',
+            opacity: 0.5
+        }, 250, function() {
+            self.options.logoLink && self.$logo
+                .bind({
+                    click: function() {
+                        document.location.href = self.options.logoLink;
+                    }
+                });
+            self.options.logoTitle && self.$logo
+                .bind({
+                    mouseenter: self.$logoTooltip.show,
+                    mouseleave: self.$logoTooltip.hide
+                });            
+        });
+        self.$subtitle.animate({
+            bottom: self.barHeight + parseInt(self.options.height / 16) + 'px',
         });
     }
 
+    function showLoadingIcon() {
+        self.$loadingIcon.attr({
+            src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
+                .replace('/classic/', '/modern/')
+        })
+        .show();
+    }
+
+    function submitPositionInput() {
+        self.$positionInput.hide();
+        self.$position.html('').show();
+        setPosition(parsePositionInput(self.$positionInput.options('value')));
+        self.video.currentTime = self.options.position;
+        if (self.wasPlaying) {
+            self.video.play();
+            togglePlayIcon();
+            self.$playButton.toggleTitle();
+            self.wasPlaying = false;
+        }
+    }
+
+    function toggleMuted() {
+        self.options.muted = !self.options.muted;
+        self.video.muted = self.options.muted;
+    }
+
+    function togglePaused() {
+        self.options.paused = !self.options.paused;
+        self.$positionMarkerRing.css({
+            borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')'
+        });
+        if (self.options.paused) {
+            self.video.pause();
+            clearInterval(self.playInterval);
+            self.playInToOut = false;
+        } else {
+            self.video.play();
+            self.playInterval = setInterval(playing, self.millisecondsPerFrame);
+        }
+    }
+
+    function togglePlayIcon() {
+        self.$playIconImage.attr({
+            src: Ox.UI.getImagePath('symbol' + (self.video.paused() ? 'Play' : 'Pause')+ '.svg').replace('/classic/', '/modern/')
+        })
+    }
+
+    function toggleScale() {
+        Ox.print('TOGGLE SCALE')
+        self.options.scaleToFill = !self.options.scaleToFill;
+        self.$video.animate(getVideoCSS(), 250);
+    }
+
+    function toggleSize() {
+        self.options.sizeIsLarge = !self.options.sizeIsLarge;
+        that.triggerEvent('size', {
+            size: self.options.sizeIsLarge ? 'large' : 'small'
+        });
+    }
+
+    self.setOptions = function(key, value) {
+        if (key == 'height' || key == 'width') {
+            setSize();
+        } else if (key == 'muted') {
+            toggleMuted();
+        } else if (key == 'paused') {
+            togglePaused();
+        } else if (key == 'position') {
+            setPosition();
+        }
+    }
+
+    that.playInToOut = function() {
+        self.playInToOut = true;
+        setPosition(self.options['in']);
+        self.options.paused && that.play();
+        return that;
+    };
+
+
+
     return that;
 
 };
\ No newline at end of file