diff --git a/source/Ox.UI/js/Video/BlockVideoTimeline.js b/source/Ox.UI/js/Video/BlockVideoTimeline.js index 8ccd4947..4376af7f 100644 --- a/source/Ox.UI/js/Video/BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/BlockVideoTimeline.js @@ -160,6 +160,8 @@ Ox.BlockVideoTimeline = function(options, self) { subtitles: Ox.clone(self.options.subtitles, true), type: self.options.type, width: Math.round(self.options.duration) + }).bindEvent({ + loaded: updateTimelines }); } diff --git a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js index 1105beb3..6e303b64 100644 --- a/source/Ox.UI/js/Video/SmallVideoTimelineImage.js +++ b/source/Ox.UI/js/Video/SmallVideoTimelineImage.js @@ -5,6 +5,7 @@ Ox.SmallVideoTimelineImage Small Video Timeline Image options Options self Shared private variable ([options[, self]]) -> Small Video Timeline Image + loaded subtitle, result and selection overlays are loaded @*/ Ox.SmallVideoTimelineImage = function(options, self) { @@ -137,42 +138,49 @@ Ox.SmallVideoTimelineImage = function(options, self) { }); } - self.$subtitles = $('') - .attr({ - src: getImageURL('subtitles') - }) - .css({ - position: 'absolute', - top: self.imageTop + 'px', - width: self.options.width + 'px', - height: self.imageHeight + 'px' - }) - .appendTo(that); + self.$subtitles = $(''); + self.$results = $(''); + self.$selection = $(''); - self.$results = $('') - .attr({ - src: getImageURL('results') - }) - .css({ - position: 'absolute', - top: self.imageTop + 'px', - width: self.options.width + 'px', - height: self.imageHeight + 'px' - }) - .appendTo(that); + setTimeout(function() { + self.$subtitles + .attr({ + src: getImageURL('subtitles') + }) + .css({ + position: 'absolute', + top: self.imageTop + 'px', + width: self.options.width + 'px', + height: self.imageHeight + 'px' + }) + .appendTo(that); + + self.$results + .attr({ + src: getImageURL('results') + }) + .css({ + position: 'absolute', + top: self.imageTop + 'px', + width: self.options.width + 'px', + height: self.imageHeight + 'px' + }) + .appendTo(that); + + self.$selection + .attr({ + src: getImageURL('selection') + }) + .css({ + position: 'absolute', + top: self.imageTop + 'px', + width: self.options.width + 'px', + height: self.imageHeight + 'px' + }) + .appendTo(that); + that.triggerEvent('loaded'); + }); - self.$selection = $('') - .attr({ - src: getImageURL('selection') - }) - .css({ - position: 'absolute', - top: self.imageTop + 'px', - width: self.options.width + 'px', - height: self.imageHeight + 'px' - }) - .appendTo(that); - function getClipTimeline() { var $canvas, context, image, firstTile, lastTile, tileHeight, tileOffset, tileWidth;