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.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]) {
self.$tiles[i] = $('<img>') if (self.isAsync) {
.attr({ self.$tiles[i] = true;
src: self.options.getImageURL(self.options.type, i) }
}) getImageURL(i, function(url) {
.css({ self.$tiles[i] = $('<img>')
left: (i * self.tileWidth) + 'px' .attr({src: url})
}) .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});
});
}); });
} }