0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

load SmallVideoTimelineImage overlay async and update in BlockVideoTimeline once loaded

Browse source
This commit is contained in:
j 2014-02-03 07:27:00 +00:00
parent 13018e272e
commit fbffadd4e5
2 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
source/Ox.UI/js/Video/BlockVideoTimeline.js
View file

@ -160,6 +160,8 @@ Ox.BlockVideoTimeline = function(options, self) {
subtitles: Ox.clone(self.options.subtitles, true), subtitles: Ox.clone(self.options.subtitles, true),
type: self.options.type, type: self.options.type,
width: Math.round(self.options.duration) width: Math.round(self.options.duration)
}).bindEvent({
loaded: updateTimelines
}); });
} }

76
source/Ox.UI/js/Video/SmallVideoTimelineImage.js
View file

@ -5,6 +5,7 @@ Ox.SmallVideoTimelineImage <f> Small Video Timeline Image
options <o> Options options <o> Options
self <o> Shared private variable self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Small Video Timeline Image ([options[, self]]) -> <o:Ox.Element> Small Video Timeline Image
loaded <!> subtitle, result and selection overlays are loaded
@*/ @*/
Ox.SmallVideoTimelineImage = function(options, self) { Ox.SmallVideoTimelineImage = function(options, self) {
@ -137,42 +138,49 @@ Ox.SmallVideoTimelineImage = function(options, self) {
}); });
} }
self.$subtitles = $('<img>') self.$subtitles = $('<img>');
.attr({ self.$results = $('<img>');
src: getImageURL('subtitles') self.$selection = $('<img>');
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
width: self.options.width + 'px',
height: self.imageHeight + 'px'
})
.appendTo(that);
self.$results = $('<img>') setTimeout(function() {
.attr({ self.$subtitles
src: getImageURL('results') .attr({
}) src: getImageURL('subtitles')
.css({ })
position: 'absolute', .css({
top: self.imageTop + 'px', position: 'absolute',
width: self.options.width + 'px', top: self.imageTop + 'px',
height: self.imageHeight + 'px' width: self.options.width + 'px',
}) height: self.imageHeight + 'px'
.appendTo(that); })
.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 = $('<img>')
.attr({
src: getImageURL('selection')
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
width: self.options.width + 'px',
height: self.imageHeight + 'px'
})
.appendTo(that);
function getClipTimeline() { function getClipTimeline() {
var $canvas, context, image, var $canvas, context, image,
firstTile, lastTile, tileHeight, tileOffset, tileWidth; firstTile, lastTile, tileHeight, tileOffset, tileWidth;