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

more efficient composition of block timeline, more efficient resizing of small timeline

Browse source
This commit is contained in:
rolux 2011-05-16 09:03:37 +02:00
commit ac2ea5f53d
4 changed files with 83 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -44,6 +44,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self.$timeline.attr({
src: imageURL
});
that.triggerEvent('load');
});
self.$subtitles = $('<img>')
@ -83,7 +84,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
.appendTo(that.$element);
function getImageURL(image, callback) {
var 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({
@ -97,11 +99,18 @@ Ox.SmallVideoTimelineImage = function(options, self) {
var top = 0,
bottom = height;
self.options.results.forEach(function(result) {
var left = Math.round(result['in']),
right = Math.round(result.out) + 1;
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 = (y == top || y == bottom - 1) ? [255, 255, 0, 255] : [255, 255, 0, 64],
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];
@ -111,14 +120,20 @@ Ox.SmallVideoTimelineImage = function(options, self) {
});
});
} else if (image == 'selection') {
var left = Math.round(self.options['in']),
right = Math.round(self.options.out) + 1,
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 = [rgb[0], rgb[1], rgb[2], (y == top || y == bottom - 1) ? 255 : 64],
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];
@ -134,7 +149,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
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],
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];
@ -175,10 +191,24 @@ Ox.SmallVideoTimelineImage = function(options, self) {
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'});
}
}