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

allow for asynchronous large video timeline

Browse source
This commit is contained in:
rlx 2013-07-13 13:58:52 +00:00
parent 902b91f921
commit 305dd4cec1
1 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
source/Ox.UI/js/Video/LargeVideoTimeline.js
View file

@ -60,6 +60,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.center = Math.floor(self.options.width / 2);
self.fps = 25;
self.height = 64;
self.isAsync = self.options.getImageURL.length == 3;
self.tileWidth = 1500;
self.tiles = self.options.duration * self.fps / self.tileWidth;
@ -139,6 +140,14 @@ Ox.LargeVideoTimeline = function(options, self) {
triggerPositionEvent();
}
function getImageURL(i, callback) {
if (!self.isAsync) {
callback(self.options.getImageURL(self.options.type, i));
} else {
self.options.getImageURL(self.options.type, i, callback);
}
}
function getPosition(e) {
return self.options.position + (
e.clientX - that.offset().left - self.center - 1
@ -177,14 +186,15 @@ Ox.LargeVideoTimeline = function(options, self) {
Math.min(self.tile + 2, self.tiles),
function(i) {
if (!self.$tiles[i]) {
self.$tiles[i] = $('<img>')
.attr({
src: self.options.getImageURL(self.options.type, i)
})
.css({
left: (i * self.tileWidth) + 'px'
})
.appendTo(self.$timeline);
if (self.isAsync) {
self.$tiles[i] = true;
}
getImageURL(i, function(url) {
self.$tiles[i] = $('<img>')
.attr({src: url})
.css({left: (i * self.tileWidth) + 'px'})
.appendTo(self.$timeline);
});
}
}
);
@ -214,7 +224,9 @@ Ox.LargeVideoTimeline = function(options, self) {
function setType() {
Ox.forEach(self.$tiles, function($tile, i) {
$tile.attr({src: self.options.getImageURL(self.options.type, i)});
getImageURL(i, function(url) {
$tile.attr({src: url});
});
});
}