better api for timeline images
This commit is contained in:
rolux
parent
1f2a7f6953
commit
bab9c8be8e
5 changed files with 33 additions and 30 deletions
|
|
@ -208,13 +208,11 @@ Ox.load('UI', {
|
|||
$smallTimeline = Ox.SmallVideoTimeline({
|
||||
duration: 6336.08,
|
||||
find: 'brick',
|
||||
getTimelineURL: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
'in': 3128.725,
|
||||
out: 3130.725,
|
||||
results: results,
|
||||
subtitles: subtitles,
|
||||
timeline: 'png/timeline.16.png',
|
||||
type: 'editor',
|
||||
width: 376
|
||||
})
|
||||
|
|
@ -228,13 +226,11 @@ Ox.load('UI', {
|
|||
$playerTimeline = Ox.SmallVideoTimeline({
|
||||
duration: 6336.08,
|
||||
find: 'brick',
|
||||
getTimelineURL: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
'in': 3128.725,
|
||||
out: 3130.725,
|
||||
results: results,
|
||||
subtitles: subtitles,
|
||||
timeline: 'png/timeline.16.png',
|
||||
type: 'player',
|
||||
width: 376
|
||||
})
|
||||
|
|
@ -248,14 +244,14 @@ Ox.load('UI', {
|
|||
$blockTimeline = Ox.BlockVideoTimeline({
|
||||
duration: 6336.08,
|
||||
find: 'brick',
|
||||
getTimelineURL: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
'in': 3128.725,
|
||||
out: 3130.725,
|
||||
results: results,
|
||||
showMilliseconds: 2,
|
||||
subtitles: subtitles,
|
||||
timeline: function(i) {
|
||||
return 'png/timeline.16.' + i + '.png';
|
||||
},
|
||||
width: 376
|
||||
})
|
||||
.css({
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
.defaults({
|
||||
duration: 0,
|
||||
find: '',
|
||||
getTimelineURL: null,
|
||||
'in': 0,
|
||||
out: 0,
|
||||
position: 0,
|
||||
results: [],
|
||||
subtitles: [],
|
||||
timeline: null,
|
||||
width: 0
|
||||
})
|
||||
.options(options || {})
|
||||
|
|
@ -46,11 +46,11 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
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,
|
||||
timeline: self.options.timeline,
|
||||
width: Math.ceil(self.options.duration),
|
||||
type: self.options.type
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ Ox.SmallVideoTimeline = function(options, self) {
|
|||
_offset: 0, // hack for cases where all these position: absolute elements have to go into a float: left
|
||||
duration: 0,
|
||||
editing: false,
|
||||
getTimelineURL: null,
|
||||
'in': 0,
|
||||
out: 0,
|
||||
paused: false,
|
||||
showMilliseconds: 0,
|
||||
timeline: '',
|
||||
type: 'player',
|
||||
width: 256
|
||||
})
|
||||
|
|
@ -156,11 +156,11 @@ Ox.SmallVideoTimeline = function(options, self) {
|
|||
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,
|
||||
timeline: self.options.timeline,
|
||||
width: self.imageWidth,
|
||||
type: self.options.type
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -1144,15 +1144,13 @@ Ox.VideoPlayer = function(options, self) {
|
|||
var $timeline = Ox.SmallVideoTimeline({
|
||||
_offset: getTimelineLeft(),
|
||||
duration: self.options.duration,
|
||||
getTimelineURL: Ox.isString(self.options.timeline) ?
|
||||
function() { return self.options.timeline; } :
|
||||
self.options.timeline,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
paused: self.options.paused,
|
||||
results: self.results,
|
||||
showMilliseconds: self.options.showMilliseconds,
|
||||
subtitles: self.options.subtitles,
|
||||
timeline: self.options.timeline,
|
||||
type: 'player',
|
||||
width: getTimelineWidth()
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue