sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

more timelines

Browse source
This commit is contained in:
rolux 2011-05-15 20:50:05 +02:00
commit 275dcbb356
5 changed files with 275 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

187
source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js Normal file
View file

@ -0,0 +1,187 @@
Ox.SmallVideoTimelineImage = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
duration: 0,
editing: false,
getTimelineURL: null,
'in': 0,
out: 0,
results: [],
subtitles: [],
width: 256,
type: 'player'
})
.options(options || {})
.addClass('OxSmallVideoTimeline')
.css({
position: 'absolute',
width: self.options.width + 'px'
});
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
});
});
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) {
var 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']),
right = Math.round(result.out) + 1;
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var color = (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') {
var left = Math.round(self.options['in']),
right = Math.round(self.options.out) + 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 = [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 counter = 0,
images = Math.ceil(self.options.duration / 3600),
top = self.options.type == 'player' ? 0 : 1;
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 == 'subtitles') {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
}
}
return that;
}