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

This commit is contained in:
rolux 2011-05-16 09:03:37 +02:00
parent 9379599aeb
commit ac2ea5f53d
4 changed files with 83 additions and 43 deletions

View file

@ -128,6 +128,7 @@ Ox.load('UI', {
resize: function(foo, size) { resize: function(foo, size) {
$videos[0].options({width: size - 32}); $videos[0].options({width: size - 32});
$smallTimeline.options({width: size - 16}); $smallTimeline.options({width: size - 16});
$playerTimeline.options({width: size - 16});
} }
}), }),
size: 392, size: 392,

View file

@ -43,9 +43,24 @@ Ox.BlockVideoTimeline = function(options, self) {
setCSS(); setCSS();
self.$image = Ox.SmallVideoTimelineImage({
duration: self.options.duration,
editing: self.options.editing,
getTimelineURL: self.options.getTimelineURL,
'in': self.options['in'],
out: self.options.out,
results: self.options.results,
subtitles: self.options.subtitles,
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) { Ox.loop(self.lines, function(i) {
addLine(i); addLine(i);
}); });
})
self.$positionMarker = $('<img>') self.$positionMarker = $('<img>')
.attr({ .attr({
@ -90,17 +105,7 @@ Ox.BlockVideoTimeline = function(options, self) {
overflow: 'hidden' overflow: 'hidden'
}) })
.appendTo(that.$element); .appendTo(that.$element);
self.$images[i] = Ox.SmallVideoTimelineImage({ self.$images[i] = self.$image.clone()
duration: self.options.duration,
editing: self.options.editing,
getTimelineURL: self.options.getTimelineURL,
'in': self.options['in'],
out: self.options.out,
results: self.options.results,
subtitles: self.options.subtitles,
width: Math.ceil(self.options.duration),
type: self.options.type
})
.css({ .css({
position: 'absolute', position: 'absolute',
marginLeft: (-i * self.options.width) + 'px' marginLeft: (-i * self.options.width) + 'px'

View file

@ -35,23 +35,7 @@ Ox.SmallVideoTimeline = function(options, self) {
height: self.height + 'px' height: self.height + 'px'
}); });
self.$image = Ox.SmallVideoTimelineImage({ self.$image = getTimelineImage().appendTo(that);
duration: self.options.duration,
editing: self.options.editing,
getTimelineURL: self.options.getTimelineURL,
'in': self.options['in'],
out: self.options.out,
results: self.options.results,
subtitles: self.options.subtitles,
width: self.imageWidth,
type: self.options.type
})
.css({
position: 'absolute',
left: self.imageLeft + 'px',
width: self.options.width + 'px'
})
.appendTo(that);
self.$interface = Ox.Element() self.$interface = Ox.Element()
.addClass('OxInterface') .addClass('OxInterface')
@ -167,6 +151,25 @@ Ox.SmallVideoTimeline = function(options, self) {
return subtitle; return subtitle;
} }
function getTimelineImage() {
return Ox.SmallVideoTimelineImage({
duration: self.options.duration,
editing: self.options.editing,
getTimelineURL: self.options.getTimelineURL,
'in': self.options['in'],
out: self.options.out,
results: self.options.results,
subtitles: self.options.subtitles,
width: self.imageWidth,
type: self.options.type
})
.css({
position: 'absolute',
left: self.imageLeft + 'px',
width: self.imageWidth + 'px'
});
}
function mousedown(e) { function mousedown(e) {
if ($(e.target).is('.OxInterface')) { if ($(e.target).is('.OxInterface')) {
self.options.position = getPosition(e); self.options.position = getPosition(e);
@ -228,13 +231,14 @@ Ox.SmallVideoTimeline = function(options, self) {
} }
function setWidth() { function setWidth() {
self.imageWidth = self.options.width -
(self.options.type == 'player' ? 16 : 8);
that.css({ that.css({
width: self.options.width + 'px' width: self.options.width + 'px'
}); });
self.$image.css({ self.$image.options({
width: self.imageWidth + 'px' width: self.imageWidth
}); }).css({
self.$image.children().css({
width: self.imageWidth + 'px' width: self.imageWidth + 'px'
}); });
self.$interface.css({ self.$interface.css({

View file

@ -44,6 +44,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self.$timeline.attr({ self.$timeline.attr({
src: imageURL src: imageURL
}); });
that.triggerEvent('load');
}); });
self.$subtitles = $('<img>') self.$subtitles = $('<img>')
@ -83,7 +84,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
.appendTo(that.$element); .appendTo(that.$element);
function getImageURL(image, callback) { 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, height = self.imageHeight,
canvas = $('<canvas>') canvas = $('<canvas>')
.attr({ .attr({
@ -97,11 +99,18 @@ Ox.SmallVideoTimelineImage = function(options, self) {
var top = 0, var top = 0,
bottom = height; bottom = height;
self.options.results.forEach(function(result) { self.options.results.forEach(function(result) {
var left = Math.round(result['in']), var left = Math.round(
right = Math.round(result.out) + 1; 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(left, right, function(x) {
Ox.loop(top, bottom, function(y) { 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; index = x * 4 + y * 4 * width;
data[index] = color[0]; data[index] = color[0];
data[index + 1] = color[1]; data[index + 1] = color[1];
@ -111,14 +120,20 @@ Ox.SmallVideoTimelineImage = function(options, self) {
}); });
}); });
} else if (image == 'selection') { } else if (image == 'selection') {
var left = Math.round(self.options['in']), var left = Math.round(
right = Math.round(self.options.out) + 1, self.options['in'] * self.options.width / self.options.duration
),
right = Math.round(
self.options.out * self.options.width / self.options.duration
) + 1,
top = 0, top = 0,
bottom = height, bottom = height,
rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255]; rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
Ox.loop(left, right, function(x) { Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) { 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; index = x * 4 + y * 4 * width;
data[index] = color[0]; data[index] = color[0];
data[index + 1] = color[1]; data[index + 1] = color[1];
@ -134,7 +149,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
top = bottom - subtitle.text.split('\n').length - 2; top = bottom - subtitle.text.split('\n').length - 2;
Ox.loop(left, right, function(x) { Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) { 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; index = x * 4 + y * 4 * width;
data[index] = color[0]; data[index] = color[0];
data[index + 1] = color[1]; data[index + 1] = color[1];
@ -175,10 +191,24 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self.$results.attr({ self.$results.attr({
src: getImageURL('results') src: getImageURL('results')
}); });
} else if (key == 'selection') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'subtitles') { } else if (key == 'subtitles') {
self.$subtitles.attr({ self.$subtitles.attr({
src: getImageURL('subtitles') 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'});
} }
} }