0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

better api for timeline images

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

14
demos/video/js/video.js
View file

@ -208,13 +208,11 @@ Ox.load('UI', {
$smallTimeline = Ox.SmallVideoTimeline({ $smallTimeline = Ox.SmallVideoTimeline({
duration: 6336.08, duration: 6336.08,
find: 'brick', find: 'brick',
getTimelineURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 3128.725, 'in': 3128.725,
out: 3130.725, out: 3130.725,
results: results, results: results,
subtitles: subtitles, subtitles: subtitles,
timeline: 'png/timeline.16.png',
type: 'editor', type: 'editor',
width: 376 width: 376
}) })
@ -228,13 +226,11 @@ Ox.load('UI', {
$playerTimeline = Ox.SmallVideoTimeline({ $playerTimeline = Ox.SmallVideoTimeline({
duration: 6336.08, duration: 6336.08,
find: 'brick', find: 'brick',
getTimelineURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 3128.725, 'in': 3128.725,
out: 3130.725, out: 3130.725,
results: results, results: results,
subtitles: subtitles, subtitles: subtitles,
timeline: 'png/timeline.16.png',
type: 'player', type: 'player',
width: 376 width: 376
}) })
@ -248,14 +244,14 @@ Ox.load('UI', {
$blockTimeline = Ox.BlockVideoTimeline({ $blockTimeline = Ox.BlockVideoTimeline({
duration: 6336.08, duration: 6336.08,
find: 'brick', find: 'brick',
getTimelineURL: function(i) {
return 'png/timeline.16.' + i + '.png';
},
'in': 3128.725, 'in': 3128.725,
out: 3130.725, out: 3130.725,
results: results, results: results,
showMilliseconds: 2, showMilliseconds: 2,
subtitles: subtitles, subtitles: subtitles,
timeline: function(i) {
return 'png/timeline.16.' + i + '.png';
},
width: 376 width: 376
}) })
.css({ .css({

4
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -5,12 +5,12 @@ Ox.BlockVideoTimeline = function(options, self) {
.defaults({ .defaults({
duration: 0, duration: 0,
find: '', find: '',
getTimelineURL: null,
'in': 0, 'in': 0,
out: 0, out: 0,
position: 0, position: 0,
results: [], results: [],
subtitles: [], subtitles: [],
timeline: null,
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
@ -46,11 +46,11 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$image = Ox.SmallVideoTimelineImage({ self.$image = Ox.SmallVideoTimelineImage({
duration: self.options.duration, duration: self.options.duration,
editing: self.options.editing, editing: self.options.editing,
getTimelineURL: self.options.getTimelineURL,
'in': self.options['in'], 'in': self.options['in'],
out: self.options.out, out: self.options.out,
results: self.options.results, results: self.options.results,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
timeline: self.options.timeline,
width: Math.ceil(self.options.duration), width: Math.ceil(self.options.duration),
type: self.options.type type: self.options.type
}) })

4
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -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 _offset: 0, // hack for cases where all these position: absolute elements have to go into a float: left
duration: 0, duration: 0,
editing: false, editing: false,
getTimelineURL: null,
'in': 0, 'in': 0,
out: 0, out: 0,
paused: false, paused: false,
showMilliseconds: 0, showMilliseconds: 0,
timeline: '',
type: 'player', type: 'player',
width: 256 width: 256
}) })
@ -156,11 +156,11 @@ Ox.SmallVideoTimeline = function(options, self) {
return Ox.SmallVideoTimelineImage({ return Ox.SmallVideoTimelineImage({
duration: self.options.duration, duration: self.options.duration,
editing: self.options.editing, editing: self.options.editing,
getTimelineURL: self.options.getTimelineURL,
'in': self.options['in'], 'in': self.options['in'],
out: self.options.out, out: self.options.out,
results: self.options.results, results: self.options.results,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
timeline: self.options.timeline,
width: self.imageWidth, width: self.imageWidth,
type: self.options.type type: self.options.type
}) })

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

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

4
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -1144,15 +1144,13 @@ Ox.VideoPlayer = function(options, self) {
var $timeline = Ox.SmallVideoTimeline({ var $timeline = Ox.SmallVideoTimeline({
_offset: getTimelineLeft(), _offset: getTimelineLeft(),
duration: self.options.duration, duration: self.options.duration,
getTimelineURL: Ox.isString(self.options.timeline) ?
function() { return self.options.timeline; } :
self.options.timeline,
'in': self.options['in'], 'in': self.options['in'],
out: self.options.out, out: self.options.out,
paused: self.options.paused, paused: self.options.paused,
results: self.results, results: self.results,
showMilliseconds: self.options.showMilliseconds, showMilliseconds: self.options.showMilliseconds,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
timeline: self.options.timeline,
type: 'player', type: 'player',
width: getTimelineWidth() width: getTimelineWidth()
}) })