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;