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

don't use canvas for the timeline image

Browse source
This commit is contained in:
rolux 2011-05-17 12:00:49 +02:00
parent bab9c8be8e
commit aadd8c8458
2 changed files with 44 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -53,14 +53,11 @@ Ox.BlockVideoTimeline = function(options, self) {
timeline: self.options.timeline,
width: Math.ceil(self.options.duration),
type: self.options.type
})
.bindEvent('load', function() {
// wait until the timeline image (the one image that is async)
// has loaded, so we can clone the element
});
Ox.loop(self.lines, function(i) {
addLine(i);
});
})
self.$positionMarker = $('<img>')
.attr({

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

@ -24,8 +24,11 @@ Ox.SmallVideoTimelineImage = function(options, self) {
// fixme: timeline doesn't have to go through canvas at all,
// just use one or more images
self.images = Ox.isString(self.options.timeline) ?
1 : Math.ceil(self.options.duration / 3600);
self.imageWidth = Ox.isString(self.options.timeline) ?
1920 : Math.round(self.options.duration);
self.height = self.options.type == 'player' ? 16 : 24;
self.imageWidth = Ox.isString(self.options.timeline) ? 1920 : Math.round(self.options.duration);
self.imageHeight = self.options.type == 'player' ? 16 : 18;
self.imageTop = self.options.type == 'player' ? 0 : 3;
@ -33,24 +36,34 @@ Ox.SmallVideoTimelineImage = function(options, self) {
height: self.height + 'px'
});
if (Ox.isString(self.options.timeline)) {
self.$timeline = $('<img>')
.attr({
src: Ox.UI.PATH + 'png/transparent.png'
src: self.options.timeline
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
width: self.options.width + 'px',
height: self.imageHeight + 'px',
top: self.imageTop + 'px'
})
.appendTo(that.$element);
getImageURL('timeline', function(imageURL) {
self.$timeline.attr({
src: imageURL
});
that.triggerEvent('load');
} else {
Ox.loop(self.images, function(i) {
$('<img>')
.attr({
src: self.options.timeline(i)
})
.css({
position: 'absolute',
left: (i * 3600) + 'px',
top: self.imageTop + 'px',
width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
height: self.imageHeight + 'px',
})
.appendTo(that.$element);
});
}
self.$subtitles = $('<img>')
.attr({
@ -58,9 +71,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
width: self.options.width + 'px',
height: self.imageHeight + 'px',
top: self.imageTop + 'px'
height: self.imageHeight + 'px'
})
.appendTo(that.$element);
@ -70,9 +83,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
width: self.options.width + 'px',
height: self.imageHeight + 'px',
top: self.imageTop + 'px'
height: self.imageHeight + 'px'
})
.appendTo(that.$element);
@ -82,9 +95,9 @@ Ox.SmallVideoTimelineImage = function(options, self) {
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
width: self.options.width + 'px',
height: self.imageHeight + 'px',
top: self.imageTop + 'px'
height: self.imageHeight + 'px'
})
.appendTo(that.$element);
@ -168,40 +181,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
});
});
});
} else if (image == 'timeline') {
var $image, counter, images,
top = self.options.type == 'player' ? 0 : 1;
if (Ox.isString(self.options.timeline)) {
$image = $('<img>')
.attr({
src: self.options.timeline
})
.load(function() {
context.drawImage($image[0], 0, top)
callback(canvas.toDataURL());
});
} else {
counter = 0;
images = Math.ceil(self.options.duration / 3600);
Ox.loop(images, function(i) {
var $image = $('<img>')
.attr({
src: self.options.timeline(i)
})
.load(function() {
context.drawImage($image[0], i * 3600, top);
if (++counter == images) {
callback(canvas.toDataURL());
}
});
});
}
}
if (image != 'timeline') {
context.putImageData(imageData, 0, 0);
return canvas.toDataURL();
}
}
function getPosition() {