oxjs/source/Ox.UI/js/Video/SmallVideoTimelineImage.js

245 lines
8.6 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.SmallVideoTimelineImage <f> Small Video Timeline Image
2012-05-21 10:38:18 +00:00
options <o> Options
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Small Video Timeline Image
2012-05-21 10:38:18 +00:00
@*/
2011-05-15 18:50:05 +00:00
Ox.SmallVideoTimelineImage = function(options, self) {
2011-05-15 16:18:58 +00:00
self = self || {};
var that = Ox.Element({}, self)
.defaults({
2011-05-17 09:43:54 +00:00
duration: 0,
imageURL: '',
2011-05-15 16:18:58 +00:00
'in': 0,
mode: 'player',
2011-05-15 16:18:58 +00:00
out: 0,
results: [],
state: 'default',
2011-05-15 16:18:58 +00:00
subtitles: [],
type: '',
2012-05-26 15:48:19 +00:00
width: 256
2011-05-15 16:18:58 +00:00
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
'in': function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
out: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
results: function() {
self.$results.attr({
src: getImageURL('results')
});
},
selection: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
subtitles: function() {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
},
state: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
width: function() {
var width = self.options.width;
that.css({width: width + 'px'});
self.$results
.attr({src: getImageURL('results')})
.css({width: width + 'px'});
self.$selection
.attr({src: getImageURL('selection')})
.css({width: width + 'px'});
self.$subtitles.css({width: width + 'px'});
self.$timeline.css({width: width + 'px'});
}
})
2011-05-15 16:18:58 +00:00
.css({
position: 'absolute',
width: self.options.width + 'px'
});
self.images = Ox.isString(self.options.imageURL) ?
1 : Math.ceil(self.options.duration / 3600);
self.imageWidth = Ox.isString(self.options.imageURL) ?
1920 : Math.round(self.options.duration);
self.height = self.options.mode == 'player' ? 16 : 24;
self.imageHeight = self.options.mode == 'player' ? 16 : 18;
self.imageTop = self.options.mode == 'player' ? 0 : 3;
self.timelineTop = self.options.mode == 'player' ? 0 : 4;
self.theme = Ox.Theme();
2011-05-15 16:18:58 +00:00
that.css({
height: self.height + 'px'
});
if (Ox.isString(self.options.imageURL)) {
self.$timeline = $('<img>')
.attr({
src: self.options.imageURL
})
.css({
position: 'absolute',
top: self.timelineTop + 'px',
width: self.options.width + 'px',
height: '16px'
})
2012-06-15 13:20:07 +00:00
.appendTo(that);
} else {
Ox.loop(self.images, function(i) {
$('<img>')
.attr({
src: self.options.imageURL(self.options.type, i)
})
.css({
position: 'absolute',
left: (i * 3600) + 'px',
top: self.timelineTop + 'px',
width: (i == self.images - 1 ? self.imageWidth % 3600 || 3600 : 3600) + 'px',
height: '16px'
})
2012-06-15 13:20:07 +00:00
.appendTo(that);
2011-05-15 16:18:58 +00:00
});
}
2011-05-15 16:18:58 +00:00
self.$subtitles = $('<img>')
.attr({
src: getImageURL('subtitles')
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
2011-05-15 16:18:58 +00:00
width: self.options.width + 'px',
height: self.imageHeight + 'px'
2011-05-15 16:18:58 +00:00
})
.appendTo(that);
2011-05-15 16:18:58 +00:00
self.$results = $('<img>')
.attr({
src: getImageURL('results')
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
2011-05-15 16:18:58 +00:00
width: self.options.width + 'px',
height: self.imageHeight + 'px'
2011-05-15 16:18:58 +00:00
})
.appendTo(that);
2011-05-15 16:18:58 +00:00
self.$selection = $('<img>')
.attr({
src: getImageURL('selection')
})
.css({
position: 'absolute',
top: self.imageTop + 'px',
2011-05-15 16:18:58 +00:00
width: self.options.width + 'px',
height: self.imageHeight + 'px'
2011-05-15 16:18:58 +00:00
})
.appendTo(that);
2011-05-15 16:18:58 +00:00
function getImageURL(image, callback) {
var width = image == 'results' || image == 'selection'
? self.options.width : self.imageWidth,
2011-05-15 16:18:58 +00:00
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(
2011-05-17 09:43:54 +00:00
result['in'] / self.options.duration * width
),
right = Math.round(
2011-05-17 09:43:54 +00:00
result.out / self.options.duration * width
) + 1;
2011-05-15 16:18:58 +00:00
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.mode == 'editor'
&& (y == top || y == bottom - 1) ? 255 : 128,
color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
? [0, 0, 0] : [255, 255, 0],
2011-05-15 16:18:58 +00:00
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
data[index + 3] = alpha;
2011-05-15 16:18:58 +00:00
});
});
});
2011-05-16 18:05:29 +00:00
} else if (image == 'selection' && self.options.out > self.options['in']) {
var left = Math.round(
2011-05-17 09:43:54 +00:00
self.options['in'] / self.options.duration * width
),
right = Math.round(
2011-05-17 09:43:54 +00:00
self.options.out / self.options.duration * width
) + 1,
2011-05-15 16:18:58 +00:00
top = 0,
bottom = height,
2012-01-09 20:25:38 +00:00
rgb = self.options.state == 'editing' ? [[0, 128, 0], [128, 255, 128]]
: self.options.state == 'editable' ? [[0, 0, 128], [128, 128, 255]]
: self.options.state == 'selected' ? [[0, 0, 0], [255, 255, 255]]
: [[32, 32, 32], [224, 224, 224]];
2011-05-15 16:18:58 +00:00
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.mode == 'editor'
2012-01-10 14:49:28 +00:00
&& (y == top || y == bottom - 1) ? 255 : 128,
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
2011-05-15 16:18:58 +00:00
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
data[index + 3] = alpha;
2011-05-15 16:18:58 +00:00
});
});
} else if (image == 'subtitles') {
var bottom = self.options.mode == 'player' ? 14 : 15;
2011-05-15 16:18:58 +00:00
self.options.subtitles.forEach(function(subtitle) {
2011-05-17 09:43:54 +00:00
var left = Math.round(
subtitle['in'] / self.options.duration * self.imageWidth
),
right = Math.round(
subtitle.out / self.options.duration * self.imageWidth
) + 1,
top = bottom - subtitle.text.split('\n').length - 2;
2011-05-15 16:18:58 +00:00
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = 128,
color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255],
2011-05-15 16:18:58 +00:00
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
data[index + 2] = color[2];
data[index + 3] = alpha;
2011-05-15 16:18:58 +00:00
});
});
});
}
context.putImageData(imageData, 0, 0);
return canvas.toDataURL();
2011-05-15 16:18:58 +00:00
}
return that;
2011-10-24 13:13:00 +00:00
};