From a0b92c16e579a195da3db0869b2155fbbdcb77a9 Mon Sep 17 00:00:00 2001
From: j <0x006A@0x2620.org>
Date: Sun, 14 Jul 2013 09:14:23 +0000
Subject: [PATCH] fix large timeline

---
 source/Ox.UI/js/Video/VideoEditPanel.js | 42 +++++++++++++++----------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/source/Ox.UI/js/Video/VideoEditPanel.js b/source/Ox.UI/js/Video/VideoEditPanel.js
index 87c7aa18..d568d9b5 100644
--- a/source/Ox.UI/js/Video/VideoEditPanel.js
+++ b/source/Ox.UI/js/Video/VideoEditPanel.js
@@ -46,7 +46,9 @@ Ox.VideoEditPanel = function(options, self) {
                 self.$clipPanel.options({clips: Ox.clone(self.options.clips)});
             },
             duration: function() {
-                self.$timeline.options({duration: self.options.duration});
+                self.$timeline && self.$timeline.replaceWith(
+                    self.$timeline = getTimeline()
+                );
             },
             fullscreen: function() {
                 self.$video.options({fullscreen: self.options.fullscreen});
@@ -137,6 +139,9 @@ Ox.VideoEditPanel = function(options, self) {
             width: getPlayerWidth()
         })
         .bindEvent({
+            durationchange: function(data) {
+                that.options({duration: data.duration});
+            },
             fullscreen: function(data) {
                 self.options.fullscreen = data.fullscreen;
             },
@@ -180,21 +185,7 @@ Ox.VideoEditPanel = function(options, self) {
             toggle: toggleControls
         });
 
-    self.$timeline = Ox.LargeVideoTimeline({
-            duration: self.options.duration,
-            getImageURL: self.options.getLargeTimelineURL,
-            'in': self.options['in'],
-            out: self.options.out,
-            position: self.options.position,
-            subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
-            type: self.options.timeline,
-            width: getTimelineWidth()
-        })
-        .css({left: '4px', top: '4px'})
-        .bindEvent({
-            mousedown: that.gainFocus,
-            position: changeTimeline
-        })
+    self.$timeline = getTimeline()
         .appendTo(self.$controls);
 
     self.$videoPanel = Ox.SplitPanel({
@@ -301,12 +292,31 @@ Ox.VideoEditPanel = function(options, self) {
             * self.options.clipSize - 1;
     }
 
+    function getTimeline() {
+        return Ox.LargeVideoTimeline({
+                duration: self.options.duration,
+                getImageURL: self.options.getLargeTimelineURL,
+                'in': self.options['in'],
+                out: self.options.out,
+                position: self.options.position,
+                subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
+                type: self.options.timeline,
+                width: getTimelineWidth()
+            })
+            .css({left: '4px', top: '4px'})
+            .bindEvent({
+                mousedown: that.gainFocus,
+                position: changeTimeline
+            })
+    }
+
     function getTimelineWidth() {
         return self.options.width -
             (self.options.showClips && !self.fullscreen)
             * self.options.clipSize - 16 - 1;
     }
 
+
     function resizeClips(data) {
         // called on clips resize
         self.options.clipSize = data.size;