From 7abc26fd0dc91070ef618d76cd145164c36c1ce3 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Sun, 18 Sep 2011 06:50:54 +0000
Subject: [PATCH] updating VideoPreview

---
 source/Ox.UI/js/Video/Ox.VideoPreview.js | 39 +++++++++++++++---------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/source/Ox.UI/js/Video/Ox.VideoPreview.js b/source/Ox.UI/js/Video/Ox.VideoPreview.js
index f55285a0..b5ea63a8 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPreview.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPreview.js
@@ -8,9 +8,10 @@ Ox.VideoPreview = function(options, self) {
             duration: 0,
             getFrame: null,
             fps: 25,
-            frameHeight: 144,
-            frameWidth: 256,
+            frameRatio: 16/9,
+            height: 256,
             timeline: '',
+            width: 256
         })
         .options(options || {})
         .addClass('OxVideoPreview');
@@ -21,16 +22,13 @@ Ox.VideoPreview = function(options, self) {
     self.$frame = $('<img>')
         .addClass('OxFrame')
         .attr({src: self.options.getFrame()})
-        .css({
-            height: self.options.frameHeight + 'px',
-            width: self.options.frameWidth + 'px'
-        })
+        .css(getFrameCSS())
         .appendTo(that.$element);
 
     self.$timeline = $('<img>')
         .addClass('OxTimeline')
         .attr({src: self.options.timeline})
-        .css({width: self.options.frameWidth + 'px'})
+        .css({width: self.options.width + 'px'})
         .appendTo(that.$element);
 
     self.$interface = Ox.Element({
@@ -55,25 +53,36 @@ Ox.VideoPreview = function(options, self) {
 
     function click(e) {
         that.triggerEvent('click', {
-            //e.offsetX does not work in Firefox
+            // e.offsetX does not work in Firefox
             position: getPosition(e.clientX - that.offset().left)
         });
     }
 
+    function getFrameCSS() {
+        var height = self.options.height - 16,
+            width = Math.round(height * self.options.frameRatio),
+            marginLeft = Math.round((self.options.width - width) / 2);
+        return {
+            height: height + 'px',
+            width: width + 'px',
+            marginLeft: marginLeft + 'px'
+        }
+    }
+
     function getPosition(x) {
         return Math.round(
-            self.options.duration * x / self.options.frameWidth * self.options.fps
+            self.options.duration * x / self.options.width * self.options.fps
         ) / self.options.fps;
     }
 
     function startLoading() {
         var last,
-            steps = [Math.round(self.options.frameWidth / 2)];
+            steps = [Math.round(self.options.width / 2)];
         while ((last = steps[steps.length - 1]) > 1) {
             steps.push(Math.round(last / 2));
         }
         steps.forEach(function(step) {
-            Ox.loop(0, self.options.frameWidth, step, function(x) {
+            Ox.loop(0, self.options.width, step, function(x) {
                 var frame = self.options.getFrame(getPosition(x));
                 if (
                     self.loaded.indexOf(frame) == -1
@@ -99,11 +108,11 @@ Ox.VideoPreview = function(options, self) {
     }
 
     self.setOption = function(key, value) {
-        if (key == 'frameHeight') {
-            self.$frame.css({height: value + 'px'});            
-        } else if (key == 'frameWidth') {
+        if (key == 'height') {
+            self.$frame.css(getFrameCSS());            
+        } else if (key == 'width') {
             self.$frame.attr({src: self.options.getFrame()})
-                .css({width: value + 'px'});
+                .css(getFrameCSS());
             self.$timeline.css({width: value + 'px'});
             stopLoading();
         }