add showInToOut option to SmallVideoTimelineImage
This commit is contained in:
rolux
parent
4583f7bd77
commit
4bdae7eb1e
1 changed files with 101 additions and 21 deletions
|
|
@ -18,6 +18,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
mode: 'player',
|
||||
out: 0,
|
||||
results: [],
|
||||
showInToOut: false,
|
||||
state: 'default',
|
||||
subtitles: [],
|
||||
type: '',
|
||||
|
|
@ -73,19 +74,27 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
width: self.options.width + 'px'
|
||||
});
|
||||
|
||||
self.images = Ox.isString(self.options.imageURL) ?
|
||||
1 : Math.ceil(self.options.duration / 3600);
|
||||
self.imageWidth = Ox.isString(self.options.imageURL) ?
|
||||
1920 : Math.round(self.options.duration);
|
||||
self.height = self.options.mode == 'player' ? 16 : 24;
|
||||
self.imageHeight = self.options.mode == 'player' ? 16 : 18;
|
||||
self.imageTop = self.options.mode == 'player' ? 0 : 3;
|
||||
self.timelineTop = self.options.mode == 'player' ? 0 : 4;
|
||||
if (self.options.showInToOut) {
|
||||
self.pixelsPerSecond = (
|
||||
screen.width < 1024 ? 1024 : screen.width
|
||||
) / self.options.duration;
|
||||
}
|
||||
self.images = Ox.isString(self.options.imageURL) ? 1
|
||||
: Math.ceil(self.options.duration / 3600);
|
||||
self.imageWidth = Ox.isString(self.options.imageURL) ? 1920
|
||||
: self.options.showInToOut ? (
|
||||
self.pixelsPerSecond <= 1
|
||||
? Math.round(self.options.duration)
|
||||
: Math.round(self.options.duration * 25)
|
||||
)
|
||||
: Math.round(self.options.duration);
|
||||
self.height = self.options.mode == 'editor' ? 24 : 16;
|
||||
self.imageHeight = self.options.mode == 'editor' ? 18 : 16;
|
||||
self.imageTop = self.options.mode == 'editor' ? 3 : 0;
|
||||
self.timelineTop = self.options.mode == 'editor' ? 4 : 0;
|
||||
self.themeData = Ox.Theme.getThemeData();
|
||||
|
||||
that.css({
|
||||
height: self.height + 'px'
|
||||
});
|
||||
that.css({height: self.height + 'px'});
|
||||
|
||||
if (Ox.isString(self.options.imageURL)) {
|
||||
self.$timeline = $('<img>')
|
||||
|
|
@ -99,6 +108,15 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
height: '16px'
|
||||
})
|
||||
.appendTo(that);
|
||||
} else if (self.options.showInToOut) {
|
||||
self.$timeline = getClipTimeline()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: self.timelineTop + 'px',
|
||||
width: self.options.width + 'px',
|
||||
height: '16px'
|
||||
})
|
||||
.appendTo(that);
|
||||
} else {
|
||||
Ox.loop(self.images, function(i) {
|
||||
$('<img>')
|
||||
|
|
@ -152,15 +170,53 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
})
|
||||
.appendTo(that);
|
||||
|
||||
function getClipTimeline() {
|
||||
var $canvas, context, image,
|
||||
firstTile, lastTile, tileHeight, tileOffset, tileWidth;
|
||||
if (self.pixelsPerSecond <= 1) {
|
||||
firstTile = Math.floor(self.options['in'] / 3600);
|
||||
lastTile = Math.floor(self.options.out / 3600);
|
||||
tileHeight = 16;
|
||||
tileOffset = -Math.round(self.options['in'] % 3600);
|
||||
tileWidth = 3600;
|
||||
} else {
|
||||
firstTile = Math.floor(self.options['in'] / 60);
|
||||
lastTile = Math.floor(self.options.out / 60);
|
||||
tileHeight = 64;
|
||||
tileOffset = -Math.round(self.options['in'] % 60);
|
||||
tileWidth = 1500;
|
||||
}
|
||||
$canvas = $('<canvas>').attr({
|
||||
width: self.imageWidth,
|
||||
height: tileHeight
|
||||
});
|
||||
context = $canvas[0].getContext('2d');
|
||||
Ox.loop(firstTile, lastTile + 1, function(tileIndex) {
|
||||
var $image = $('<img>')
|
||||
.one({
|
||||
load: function() {
|
||||
context.drawImage(
|
||||
$image[0],
|
||||
tileOffset + (tileIndex - firstTile) * tileWidth,
|
||||
0
|
||||
);
|
||||
}
|
||||
})
|
||||
.attr({
|
||||
src: self.options.imageURL(tileHeight, tileIndex)
|
||||
});
|
||||
});
|
||||
return $canvas;
|
||||
}
|
||||
|
||||
function getImageURL(image, callback) {
|
||||
var width = image == 'results' || image == 'selection'
|
||||
? self.options.width : self.imageWidth,
|
||||
height = self.imageHeight,
|
||||
canvas = $('<canvas>')
|
||||
.attr({
|
||||
width: width,
|
||||
height: height
|
||||
})[0],
|
||||
canvas = $('<canvas>').attr({
|
||||
width: width,
|
||||
height: height
|
||||
})[0],
|
||||
context = canvas.getContext('2d'),
|
||||
imageData = context.createImageData(width, height),
|
||||
data = imageData.data;
|
||||
|
|
@ -188,7 +244,11 @@ 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']
|
||||
&& !self.options.showInToOut
|
||||
) {
|
||||
var left = Math.round(
|
||||
self.options['in'] / self.options.duration * width
|
||||
),
|
||||
|
|
@ -221,15 +281,35 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
});
|
||||
});
|
||||
} else if (image == 'subtitles') {
|
||||
var bottom = self.options.mode == 'player' ? 14 : 15;
|
||||
self.options.subtitles.forEach(function(subtitle) {
|
||||
var bottom = self.options.mode == 'editor' ? 15 : 14,
|
||||
offset = self.options.showInToOut ? (
|
||||
self.pixelsPerSecond <= 1
|
||||
? -self.options['in']
|
||||
: -self.options['in'] * 25
|
||||
) : 0,
|
||||
subtitles = self.options.showInToOut
|
||||
? self.options.subtitles.filter(function(subtitle) {
|
||||
return (
|
||||
subtitle['in'] >= self.options['in']
|
||||
&& subtitle['in'] <= self.options.out
|
||||
) || (
|
||||
subtitle.out >= self.options['in']
|
||||
&& subtitle.out <= self.options.out
|
||||
) || (
|
||||
subtitle['in'] < self.options['in']
|
||||
&& subtitle.out > self.options.out
|
||||
)
|
||||
})
|
||||
: self.options.subtitles;
|
||||
subtitles.forEach(function(subtitle) {
|
||||
var left = Math.round(
|
||||
subtitle['in'] / self.options.duration * self.imageWidth
|
||||
),
|
||||
) + offset,
|
||||
right = Math.round(
|
||||
subtitle.out / self.options.duration * self.imageWidth
|
||||
) + 1,
|
||||
) + offset + 1,
|
||||
top = bottom - subtitle.text.split('\n').length - 2;
|
||||
Ox.print('XXX', subtitle['in'], subtitle.out, left, right);
|
||||
Ox.loop(left, right, function(x) {
|
||||
Ox.loop(top, bottom, function(y) {
|
||||
var alpha = 128,
|
||||
|
|
|
|||
Loading…
Reference in a new issue