233 lines
No EOL
8.3 KiB
JavaScript
233 lines
No EOL
8.3 KiB
JavaScript
Ox.SmallVideoTimelineImage = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
duration: 1920,
|
|
editing: false,
|
|
getTimelineURL: null,
|
|
'in': 0,
|
|
out: 0,
|
|
results: [],
|
|
subtitles: [],
|
|
width: 256,
|
|
type: 'player'
|
|
})
|
|
.options(options || {})
|
|
.css({
|
|
position: 'absolute',
|
|
width: self.options.width + 'px'
|
|
});
|
|
|
|
// fixme: unless we do a block timeline,
|
|
// we can always use a single 1920 png
|
|
|
|
self.height = self.options.type == 'player' ? 16 : 24;
|
|
self.imageHeight = self.options.type == 'player' ? 16 : 18;
|
|
self.imageTop = self.options.type == 'player' ? 0 : 3;
|
|
|
|
that.css({
|
|
height: self.height + 'px'
|
|
});
|
|
|
|
self.$timeline = $('<img>')
|
|
.attr({
|
|
src: Ox.UI.PATH + 'png/transparent.png'
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
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');
|
|
});
|
|
|
|
self.$subtitles = $('<img>')
|
|
.attr({
|
|
src: getImageURL('subtitles')
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
width: self.options.width + 'px',
|
|
height: self.imageHeight + 'px',
|
|
top: self.imageTop + 'px'
|
|
})
|
|
.appendTo(that.$element);
|
|
|
|
self.$results = $('<img>')
|
|
.attr({
|
|
src: getImageURL('results')
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
width: self.options.width + 'px',
|
|
height: self.imageHeight + 'px',
|
|
top: self.imageTop + 'px'
|
|
})
|
|
.appendTo(that.$element);
|
|
|
|
self.$selection = $('<img>')
|
|
.attr({
|
|
src: getImageURL('selection')
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
width: self.options.width + 'px',
|
|
height: self.imageHeight + 'px',
|
|
top: self.imageTop + 'px'
|
|
})
|
|
.appendTo(that.$element);
|
|
|
|
function getImageURL(image, callback) {
|
|
Ox.print(image == 'results' || image == 'selection' ?
|
|
self.options.width : Math.ceil(self.options.duration))
|
|
var width = image == 'results' || image == 'selection' ?
|
|
self.options.width : Math.ceil(self.options.duration),
|
|
height = self.imageHeight,
|
|
canvas = $('<canvas>')
|
|
.attr({
|
|
width: width,
|
|
height: height
|
|
})[0],
|
|
context = canvas.getContext('2d'),
|
|
imageData = context.createImageData(width, height),
|
|
data = imageData.data;
|
|
if (image == 'results') {
|
|
var top = 0,
|
|
bottom = height;
|
|
self.options.results.forEach(function(result) {
|
|
var left = Math.round(
|
|
result['in'] * self.options.width / self.options.duration
|
|
),
|
|
right = Math.round(
|
|
result.out * self.options.width / self.options.duration
|
|
) + 1;
|
|
Ox.loop(left, right, function(x) {
|
|
Ox.loop(top, bottom, function(y) {
|
|
var color = self.options.type == 'player' ?
|
|
[255, 255, 0, 128] :
|
|
(y == top || y == bottom - 1) ?
|
|
[255, 255, 0, 255] : [255, 255, 0, 64],
|
|
index = x * 4 + y * 4 * width;
|
|
data[index] = color[0];
|
|
data[index + 1] = color[1];
|
|
data[index + 2] = color[2];
|
|
data[index + 3] = color[3];
|
|
});
|
|
});
|
|
});
|
|
} else if (image == 'selection' && self.options.out > self.options['in']) {
|
|
var left = Math.round(
|
|
self.options['in'] * self.options.width / self.options.duration
|
|
),
|
|
right = Math.round(
|
|
self.options.out * self.options.width / self.options.duration
|
|
) + 1,
|
|
top = 0,
|
|
bottom = height,
|
|
rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
|
|
Ox.loop(left, right, function(x) {
|
|
Ox.loop(top, bottom, function(y) {
|
|
var color = self.options.type == 'player' ?
|
|
[rgb[0], rgb[1], rgb[2], 128] :
|
|
[rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64],
|
|
index = x * 4 + y * 4 * width;
|
|
data[index] = color[0];
|
|
data[index + 1] = color[1];
|
|
data[index + 2] = color[2];
|
|
data[index + 3] = color[3];
|
|
});
|
|
});
|
|
} else if (image == 'subtitles') {
|
|
var bottom = self.options.type == 'player' ? 14 : 15;
|
|
self.options.subtitles.forEach(function(subtitle) {
|
|
var left = Math.round(subtitle['in']),
|
|
right = Math.round(subtitle.out) + 1,
|
|
top = bottom - subtitle.text.split('\n').length - 2;
|
|
Ox.loop(left, right, function(x) {
|
|
Ox.loop(top, bottom, function(y) {
|
|
var color = (y == top || y == bottom - 1) ?
|
|
[0, 0, 0] : [255, 255, 255],
|
|
index = x * 4 + y * 4 * width;
|
|
data[index] = color[0];
|
|
data[index + 1] = color[1];
|
|
data[index + 2] = color[2];
|
|
data[index + 3] = 128;
|
|
});
|
|
});
|
|
});
|
|
} 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.getTimelineURL(0)
|
|
})
|
|
.load(function() {
|
|
context.drawImage($image[0])
|
|
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.getTimelineURL(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();
|
|
}
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
if (key == 'in' || key == 'out') {
|
|
self.$selection.attr({
|
|
src: getImageURL('selection')
|
|
});
|
|
} else if (key == 'results') {
|
|
self.$results.attr({
|
|
src: getImageURL('results')
|
|
});
|
|
} else if (key == 'selection') {
|
|
self.$selection.attr({
|
|
src: getImageURL('selection')
|
|
});
|
|
} else if (key == 'subtitles') {
|
|
self.$subtitles.attr({
|
|
src: getImageURL('subtitles')
|
|
});
|
|
} else if (key == 'width') {
|
|
that.css({width: value + 'px'});
|
|
self.$results
|
|
.attr({src: getImageURL('results')})
|
|
.css({width: value + 'px'});
|
|
self.$selection
|
|
.attr({src: getImageURL('selection')})
|
|
.css({width: value + 'px'});
|
|
self.$subtitles.css({width: value + 'px'});
|
|
self.$timeline.css({width: value + 'px'});
|
|
}
|
|
}
|
|
|
|
return that;
|
|
|
|
} |