allow for asynchronous large video timeline
This commit is contained in:
parent
902b91f921
commit
305dd4cec1
1 changed files with 21 additions and 9 deletions
|
@ -60,6 +60,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
self.center = Math.floor(self.options.width / 2);
|
self.center = Math.floor(self.options.width / 2);
|
||||||
self.fps = 25;
|
self.fps = 25;
|
||||||
self.height = 64;
|
self.height = 64;
|
||||||
|
self.isAsync = self.options.getImageURL.length == 3;
|
||||||
self.tileWidth = 1500;
|
self.tileWidth = 1500;
|
||||||
self.tiles = self.options.duration * self.fps / self.tileWidth;
|
self.tiles = self.options.duration * self.fps / self.tileWidth;
|
||||||
|
|
||||||
|
@ -139,6 +140,14 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
triggerPositionEvent();
|
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) {
|
function getPosition(e) {
|
||||||
return self.options.position + (
|
return self.options.position + (
|
||||||
e.clientX - that.offset().left - self.center - 1
|
e.clientX - that.offset().left - self.center - 1
|
||||||
|
@ -177,14 +186,15 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
Math.min(self.tile + 2, self.tiles),
|
Math.min(self.tile + 2, self.tiles),
|
||||||
function(i) {
|
function(i) {
|
||||||
if (!self.$tiles[i]) {
|
if (!self.$tiles[i]) {
|
||||||
|
if (self.isAsync) {
|
||||||
|
self.$tiles[i] = true;
|
||||||
|
}
|
||||||
|
getImageURL(i, function(url) {
|
||||||
self.$tiles[i] = $('<img>')
|
self.$tiles[i] = $('<img>')
|
||||||
.attr({
|
.attr({src: url})
|
||||||
src: self.options.getImageURL(self.options.type, i)
|
.css({left: (i * self.tileWidth) + 'px'})
|
||||||
})
|
|
||||||
.css({
|
|
||||||
left: (i * self.tileWidth) + 'px'
|
|
||||||
})
|
|
||||||
.appendTo(self.$timeline);
|
.appendTo(self.$timeline);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -214,7 +224,9 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
|
|
||||||
function setType() {
|
function setType() {
|
||||||
Ox.forEach(self.$tiles, function($tile, i) {
|
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});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue