enable timeline types
This commit is contained in:
parent
fbeb434e27
commit
856ea3b1d3
7 changed files with 134 additions and 94 deletions
|
@ -36,6 +36,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
results: setResults,
|
||||
subtitles: setSubtitles,
|
||||
state: setState,
|
||||
type: setType,
|
||||
width: setWidth
|
||||
})
|
||||
.addClass('OxBlockVideoTimeline')
|
||||
|
@ -69,19 +70,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
|
||||
setCSS();
|
||||
|
||||
self.$image = Ox.SmallVideoTimelineImage({
|
||||
duration: self.options.duration,
|
||||
editing: self.options.editing,
|
||||
imageURL: self.options.getImageURL,
|
||||
'in': self.options['in'],
|
||||
mode: 'editor',
|
||||
out: self.options.out,
|
||||
results: self.options.results,
|
||||
state: self.options.state,
|
||||
subtitles: self.options.subtitles,
|
||||
type: self.options.type,
|
||||
width: Math.round(self.options.duration)
|
||||
});
|
||||
self.$image = getImage();
|
||||
|
||||
Ox.loop(self.lines, function(i) {
|
||||
addLine(i);
|
||||
|
@ -155,6 +144,22 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function getImage() {
|
||||
return Ox.SmallVideoTimelineImage({
|
||||
duration: self.options.duration,
|
||||
editing: self.options.editing,
|
||||
imageURL: self.options.getImageURL,
|
||||
'in': self.options['in'],
|
||||
mode: 'editor',
|
||||
out: self.options.out,
|
||||
results: self.options.results,
|
||||
state: self.options.state,
|
||||
subtitles: self.options.subtitles,
|
||||
type: self.options.type,
|
||||
width: Math.round(self.options.duration)
|
||||
});
|
||||
}
|
||||
|
||||
function getLines() {
|
||||
return Math.ceil(self.options.duration / self.options.width);
|
||||
}
|
||||
|
@ -270,6 +275,19 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
updateTimelines();
|
||||
}
|
||||
|
||||
function setType() {
|
||||
self.$image = getImage();
|
||||
self.$images.forEach(function($image, i) {
|
||||
self.$images[i].replaceWith(
|
||||
self.$images[i] = self.$image.clone()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
marginLeft: -i * self.options.width + 'px'
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function setWidth() {
|
||||
self.lines = getLines();
|
||||
setCSS();
|
||||
|
@ -303,8 +321,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
|||
function updateTimelines() {
|
||||
self.$lines.forEach(function($line, i) {
|
||||
$($line.children()[0]).replaceWith(
|
||||
self.$images[i] = self.$image.clone()
|
||||
.css({
|
||||
self.$images[i] = self.$image.clone().css({
|
||||
position: 'absolute',
|
||||
marginLeft: (-i * self.options.width) + 'px'
|
||||
})
|
||||
|
|
|
@ -35,6 +35,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
|||
},
|
||||
position: setPosition,
|
||||
subtitles: setSubtitles,
|
||||
type: setType,
|
||||
width: setWidth
|
||||
})
|
||||
.addClass('OxLargeVideoTimeline')
|
||||
|
@ -46,56 +47,42 @@ Ox.LargeVideoTimeline = function(options, self) {
|
|||
drag: drag
|
||||
});
|
||||
|
||||
Ox.extend(self, {
|
||||
$cuts: [],
|
||||
$pointMarker: {},
|
||||
$tiles: {},
|
||||
$tooltip: Ox.Tooltip({
|
||||
animate: false
|
||||
}),
|
||||
center: Math.floor(self.options.width / 2),
|
||||
element: that.$element[0],
|
||||
fps: 25,
|
||||
height: 64,
|
||||
tileWidth: 1500
|
||||
});
|
||||
self.$cuts = [];
|
||||
self.$pointMarker = {};
|
||||
self.$tiles = {};
|
||||
self.$tooltip = Ox.Tooltip({animate: false});
|
||||
self.center = Math.floor(self.options.width / 2);
|
||||
self.fps = 25;
|
||||
self.height = 64;
|
||||
self.tileWidth = 150;
|
||||
self.tiles = self.options.duration * self.fps / self.tileWidth;
|
||||
|
||||
self.$timeline = $('<div>')
|
||||
.css({
|
||||
left: self.center + 'px'
|
||||
})
|
||||
.appendTo(that.$element)
|
||||
.css({left: self.center + 'px'})
|
||||
.appendTo(that)
|
||||
|
||||
setSubtitles();
|
||||
|
||||
self.options.cuts.forEach(function(v, i) {
|
||||
self.$cuts[i] = $('<img>')
|
||||
.addClass('OxCut')
|
||||
.attr({
|
||||
src: Ox.UI.getImageURL('markerCut')
|
||||
})
|
||||
.css({
|
||||
left: (v * self.fps) + 'px'
|
||||
})
|
||||
.attr({src: Ox.UI.getImageURL('markerCut')})
|
||||
.css({left: (v * self.fps) + 'px'})
|
||||
.appendTo(self.$timeline)
|
||||
});
|
||||
|
||||
self.$markerPosition = $('<img>')
|
||||
.addClass('OxMarkerPosition')
|
||||
.attr({
|
||||
src: Ox.UI.getImageURL('markerPosition')
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
.attr({src: Ox.UI.getImageURL('markerPosition')})
|
||||
.appendTo(that);
|
||||
|
||||
setMarker();
|
||||
|
||||
['in', 'out'].forEach(function(point) {
|
||||
var titlecase = Ox.toTitleCase(point);
|
||||
self.$pointMarker[point] = $('<img>')
|
||||
.addClass('OxMarkerPoint' + titlecase)
|
||||
.attr({
|
||||
src: Ox.UI.getImageURL('marker' + titlecase)
|
||||
})
|
||||
.attr({src: Ox.UI.getImageURL('marker' + titlecase)})
|
||||
.appendTo(self.$timeline);
|
||||
setPointMarker(point);
|
||||
});
|
||||
|
@ -126,7 +113,9 @@ Ox.LargeVideoTimeline = function(options, self) {
|
|||
}
|
||||
|
||||
function getPosition(e) {
|
||||
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
|
||||
return self.options.position + (
|
||||
e.clientX - that.offset().left - self.center - 1
|
||||
) / self.fps;
|
||||
}
|
||||
|
||||
function mouseleave(e) {
|
||||
|
@ -142,9 +131,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
|||
}
|
||||
|
||||
function setMarker() {
|
||||
self.$markerPosition.css({
|
||||
left: self.center + 'px'
|
||||
});
|
||||
self.$markerPosition.css({left: self.center + 'px'});
|
||||
}
|
||||
|
||||
function setPointMarker(point) {
|
||||
|
@ -198,6 +185,12 @@ Ox.LargeVideoTimeline = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function setType() {
|
||||
Ox.forEach(self.$tiles, function($tile, i) {
|
||||
$tile.attr({src: self.options.getImageURL(self.options.type, i)});
|
||||
});
|
||||
}
|
||||
|
||||
function setWidth() {
|
||||
self.center = Math.floor(self.options.width / 2);
|
||||
that.css({
|
||||
|
@ -210,9 +203,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
|||
}
|
||||
|
||||
function triggerPositionEvent() {
|
||||
that.triggerEvent('position', {
|
||||
position: self.options.position
|
||||
});
|
||||
that.triggerEvent('position', {position: self.options.position});
|
||||
}
|
||||
|
||||
function updateTooltip() {
|
||||
|
|
|
@ -97,7 +97,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
width: self.options.width + 'px',
|
||||
height: '16px'
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
.appendTo(that);
|
||||
} else {
|
||||
Ox.loop(self.images, function(i) {
|
||||
$('<img>')
|
||||
|
@ -111,7 +111,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
|
||||
height: '16px'
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
.appendTo(that);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -239,10 +239,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
|||
return canvas.toDataURL();
|
||||
}
|
||||
|
||||
function getPosition() {
|
||||
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
@ -89,6 +89,10 @@ Ox.VideoEditor = function(options, self) {
|
|||
showAnnotations: function() {
|
||||
that.$element.toggle(1);
|
||||
},
|
||||
timeline: function() {
|
||||
self.$menuButton.checkItem(self.options.timeline);
|
||||
updateTimelines();
|
||||
},
|
||||
width: setSizes
|
||||
})
|
||||
.bindEvent({
|
||||
|
@ -495,8 +499,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
self.options.timelines,
|
||||
function(timeline) {
|
||||
return Ox.extend({
|
||||
checked: timeline.id == self.options.timeline,
|
||||
disabled: true
|
||||
checked: timeline.id == self.options.timeline
|
||||
}, timeline);
|
||||
}
|
||||
)},
|
||||
|
@ -564,7 +567,11 @@ Ox.VideoEditor = function(options, self) {
|
|||
} else if (id == 'subtitles') {
|
||||
toggleSubtitles();
|
||||
} else if (id == 'timeline') {
|
||||
// data.checked[0].id
|
||||
self.options.timeline = data.checked[0].id;
|
||||
updateTimelines();
|
||||
that.triggerEvent('timeline', {
|
||||
timeline: self.options.timeline
|
||||
});
|
||||
}
|
||||
},
|
||||
hide: function() {
|
||||
|
@ -1367,6 +1374,11 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function updateTimelines() {
|
||||
self.$timeline[0].options({type: self.options.timeline});
|
||||
self.$timeline[1].options({type: self.options.timeline});
|
||||
}
|
||||
|
||||
function updateWords(action) {
|
||||
// action can be 'add' or 'remove'
|
||||
var words = [];
|
||||
|
|
|
@ -87,6 +87,9 @@ Ox.VideoPanel = function(options, self) {
|
|||
showTimeline: function() {
|
||||
self.$videoPanel.toggle(1);
|
||||
},
|
||||
timeline: function() {
|
||||
self.$timeline.options({type: self.options.timeline});
|
||||
},
|
||||
width: function() {
|
||||
self.$video.options({width: getPlayerWidth()});
|
||||
self.$timeline.options({width: getTimelineWidth()});
|
||||
|
|
|
@ -53,9 +53,7 @@ Ox.VideoTimelinePanel = function(options, self) {
|
|||
self.$player.options({height: self.options.height});
|
||||
},
|
||||
paused: function() {
|
||||
self.$player.options({
|
||||
paused: self.options.paused
|
||||
});
|
||||
self.$player.options({paused: self.options.paused});
|
||||
},
|
||||
position: function() {
|
||||
setPosition(self.options.position);
|
||||
|
@ -63,6 +61,9 @@ Ox.VideoTimelinePanel = function(options, self) {
|
|||
showAnnotations: function() {
|
||||
that.$element.toggle(1);
|
||||
},
|
||||
timeline: function() {
|
||||
self.$player.options({timeline: self.options.timeline});
|
||||
},
|
||||
width: function() {
|
||||
self.$player.options({width: getPlayerWidth()});
|
||||
}
|
||||
|
|
|
@ -45,6 +45,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
togglePaused();
|
||||
},
|
||||
position: setPosition,
|
||||
timeline: function() {
|
||||
self.$menuButton.checkItem(self.options.timeline);
|
||||
updateTimeline();
|
||||
},
|
||||
width: setWidth
|
||||
});
|
||||
|
||||
|
@ -73,8 +77,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
self.options.timelines,
|
||||
function(timeline) {
|
||||
return Ox.extend({
|
||||
checked: timeline.id == self.options.timeline,
|
||||
disabled: true
|
||||
checked: timeline.id == self.options.timeline
|
||||
}, timeline);
|
||||
}
|
||||
)},
|
||||
|
@ -95,7 +98,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
change: function(data) {
|
||||
var id = data.id;
|
||||
if (id == 'timeline') {
|
||||
// data.checked[0].id
|
||||
self.options.timeline = data.checked[0].id;
|
||||
updateTimeline();
|
||||
that.triggerEvent('timeline', {
|
||||
timeline: self.options.timeline
|
||||
});
|
||||
} else if (id == 'followPlayer') {
|
||||
self.options.followPlayer = data.checked;
|
||||
if (!self.options.paused && self.options.followPlayer) {
|
||||
|
@ -268,7 +275,6 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
|
||||
self.$lines = [];
|
||||
self.$timelines = [];
|
||||
self.$interfaces = [];
|
||||
|
||||
self.$timeline = renderTimeline();
|
||||
//setSubtitles();
|
||||
|
@ -397,12 +403,12 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$timelinePlayer);
|
||||
self.$timelines[i] = [
|
||||
self.$timeline.clone()
|
||||
self.$timeline.clone(true)
|
||||
.css({
|
||||
width: self.frame + self.videoWidth + 'px',
|
||||
marginLeft: -i * self.contentWidth + 'px'
|
||||
}),
|
||||
self.$timeline.clone()
|
||||
self.$timeline.clone(true)
|
||||
.css({
|
||||
marginLeft: -i * self.contentWidth + self.videoWidth - 1 + 'px'
|
||||
})
|
||||
|
@ -591,6 +597,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
left: i * self.tileWidth + 'px',
|
||||
top: self.margin / 2 + 'px'
|
||||
})
|
||||
.data({index: i})
|
||||
.appendTo($timeline);
|
||||
});
|
||||
$('<div>')
|
||||
|
@ -601,10 +608,8 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
top: self.margin / 2 + 'px',
|
||||
width: self.frames + 'px',
|
||||
height: self.tileHeight + 'px'
|
||||
//background: 'rgba(255, 0, 0, 0.5)'
|
||||
})
|
||||
.appendTo($timeline);
|
||||
|
||||
return $timeline;
|
||||
}
|
||||
|
||||
|
@ -715,6 +720,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function setTimeline() {
|
||||
self.$timelinePlayer.empty();
|
||||
}
|
||||
|
||||
function setVolume() {
|
||||
self.$video.options({volume: self.options.volume});
|
||||
that.triggerEvent('volume', {
|
||||
|
@ -807,6 +816,17 @@ Ox.VideoTimelinePlayer = function(options, self) {
|
|||
}
|
||||
}
|
||||
|
||||
function updateTimeline() {
|
||||
self.$timelinePlayer.find('img').each(function() {
|
||||
var $this = $(this);
|
||||
$this.attr({
|
||||
src: self.options.getLargeTimelineURL(
|
||||
self.options.timeline, $this.data('index')
|
||||
)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*@
|
||||
togglePaused <f> toggle paused
|
||||
() -> <o> toggle paused
|
||||
|
|
Loading…
Reference in a new issue