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),
type: self.options.type,
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
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> 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 = $('<img>')
.attr({
src: getImageURL('subtitles')
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
width: self.options.width + 'px',
height: self.imageHeight + 'px'
})
.appendTo(that);
self.$subtitles = $('<img>');
self.$results = $('<img>');
self.$selection = $('<img>');
self.$results = $('<img>')
.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 = $('<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() {
var $canvas, context, image,
firstTile, lastTile, tileHeight, tileOffset, tileWidth;