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

better api for timeline images

Browse source
This commit is contained in:
rolux 2011-05-17 11:43:54 +02:00
commit bab9c8be8e
5 changed files with 33 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,13 +3,13 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
duration: 1920,
duration: 0,
editing: false,
getTimelineURL: null,
'in': 0,
out: 0,
results: [],
subtitles: [],
timeline: '',
width: 256,
type: 'player'
})
@ -21,8 +21,11 @@ Ox.SmallVideoTimelineImage = function(options, self) {
// fixme: unless we do a block timeline,
// we can always use a single 1920 png
// fixme: timeline doesn't have to go through canvas at all,
// just use one or more images
self.height = self.options.type == 'player' ? 16 : 24;
self.imageWidth = Ox.isString(self.options.timeline) ? 1920 : Math.round(self.options.duration);
self.imageHeight = self.options.type == 'player' ? 16 : 18;
self.imageTop = self.options.type == 'player' ? 0 : 3;
@ -86,10 +89,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
.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),
self.options.width : self.imageWidth,
height = self.imageHeight,
canvas = $('<canvas>')
.attr({
@ -104,10 +105,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
bottom = height;
self.options.results.forEach(function(result) {
var left = Math.round(
result['in'] * self.options.width / self.options.duration
result['in'] / self.options.duration * width
),
right = Math.round(
result.out * self.options.width / self.options.duration
result.out / self.options.duration * width
) + 1;
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
@ -125,10 +126,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
});
} else if (image == 'selection' && self.options.out > self.options['in']) {
var left = Math.round(
self.options['in'] * self.options.width / self.options.duration
self.options['in'] / self.options.duration * width
),
right = Math.round(
self.options.out * self.options.width / self.options.duration
self.options.out / self.options.duration * width
) + 1,
top = 0,
bottom = height,
@ -148,8 +149,12 @@ Ox.SmallVideoTimelineImage = function(options, self) {
} 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,
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;
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
@ -169,10 +174,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
if (Ox.isString(self.options.timeline)) {
$image = $('<img>')
.attr({
src: self.options.getTimelineURL(0)
src: self.options.timeline
})
.load(function() {
context.drawImage($image[0])
context.drawImage($image[0], 0, top)
callback(canvas.toDataURL());
});
} else {
@ -181,7 +186,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
Ox.loop(images, function(i) {
var $image = $('<img>')
.attr({
src: self.options.getTimelineURL(i)
src: self.options.timeline(i)
})
.load(function() {
context.drawImage($image[0], i * 3600, top);
@ -198,6 +203,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
}
}
function getPosition() {
}
self.setOption = function(key, value) {
if (key == 'in' || key == 'out') {
self.$selection.attr({