oxjs/source/UI/js/Video/VideoEditPanel.js

720 lines
24 KiB
JavaScript
Raw Normal View History

2013-07-13 23:07:25 +00:00
'use strict';
Ox.VideoEditPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
2014-01-22 18:22:12 +00:00
annotationsCalendarSize: 256,
annotationsMapSize: 256,
annotationsRange: 'all',
annotationsSort: 'position',
2014-02-06 10:27:57 +00:00
clipRatio: 16/9,
2013-07-13 23:07:25 +00:00
clips: [],
clipSize: 256,
clipTooltip: 'clips',
clipView: 'list',
clickLink: null,
controlsTooltips: {},
2013-07-13 23:07:25 +00:00
duration: 0,
editable: false,
enableSubtitles: false,
formatTitle: function() {
return Ox.last(arguments);
},
fps: 25,
2013-07-13 23:07:25 +00:00
fullscreen: false,
getClipImageURL: null,
2013-07-13 23:07:25 +00:00
getLargeTimelineURL: null,
height: 0,
'in': 0,
loop: false,
2014-01-22 18:22:12 +00:00
layers: [],
2013-07-13 23:07:25 +00:00
muted: false,
out: 0,
paused: true,
2016-03-29 12:26:04 +00:00
playbackRate: 1,
2013-07-13 23:07:25 +00:00
playInToOut: false,
position: 0,
resolution: 0,
scaleToFill: false,
selected: [],
2014-01-22 18:22:12 +00:00
showAnnotationsCalendar: false,
showAnnotationsMap: false,
2013-07-13 23:07:25 +00:00
showClips: false,
2014-01-22 18:22:12 +00:00
showLayers: {},
2013-07-13 23:07:25 +00:00
showTimeline: false,
2014-01-22 18:22:12 +00:00
showUsers: false,
2013-07-13 23:07:25 +00:00
smallTimelineURL: '',
2014-02-06 10:27:57 +00:00
sort: [],
sortOptions: [],
2013-07-13 23:07:25 +00:00
subtitles: [],
2015-04-14 14:50:52 +00:00
subtitlesOffset: 0,
2013-07-13 23:07:25 +00:00
timeline: '',
timelineTooltip: 'timeline',
type: 'static',
video: [],
volume: 1,
width: 0
})
.options(options || {})
.update({
clips: function() {
2013-07-14 14:56:41 +00:00
self.$clipPanel.options({
clips: Ox.clone(self.options.clips),
sort: Ox.clone(self.options.sort)
2013-07-14 14:56:41 +00:00
});
2013-07-13 23:07:25 +00:00
},
clipSize: function() {
self.$mainPanel.resizeElement(1, self.options.clipSize);
resizeClips({size: self.options.clipSize});
},
2016-11-27 18:41:10 +00:00
clipView: function() {
self.$clipPanel.options({
view: self.options.clipView
});
},
2013-07-13 23:07:25 +00:00
duration: function() {
2013-07-14 09:14:23 +00:00
self.$timeline && self.$timeline.replaceWith(
self.$timeline = getTimeline()
);
2013-07-13 23:07:25 +00:00
},
fullscreen: function() {
self.$video.options({fullscreen: self.options.fullscreen});
},
height: function() {
self.$video.options({height: getPlayerHeight()});
self.$clipPanel.options({height: self.options.height});
2013-07-13 23:07:25 +00:00
},
'in': function() {
setPoint('in', self.options['in']);
},
out: function() {
setPoint('out', self.options.out);
},
paused: function() {
self.$video.options({paused: self.options.paused});
},
2016-03-29 12:26:04 +00:00
playbackRate: function() {
self.$video.options({playbackRate: self.options.playbackRate});
},
2013-07-13 23:07:25 +00:00
position: function() {
self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position});
2013-07-13 23:07:25 +00:00
},
selected: function() {
self.$clipPanel.options({selected: self.options.selected});
2013-07-13 23:07:25 +00:00
},
showClips: function() {
2018-03-10 16:08:22 +00:00
self.$mainPanel.toggleElement(1);
2013-07-13 23:07:25 +00:00
},
2015-03-23 11:56:41 +00:00
showLayers: function() {
self.$clipPanel.options({
showLayers: self.options.showLayers
});
},
2013-07-13 23:07:25 +00:00
showTimeline: function() {
2018-03-10 16:08:22 +00:00
self.$videoPanel.toggleElement(2);
2013-07-13 23:07:25 +00:00
},
smallTimelineURL: function() {
self.$video.options({timeline: self.options.smallTimelineURL});
},
2014-02-06 10:59:38 +00:00
subtitles: function() {
self.$video.options({subtitles: self.options.subtitles});
self.$timeline.options({
subtitles: self.options.enableSubtitles ? self.options.subtitles : []
});
},
2013-07-13 23:07:25 +00:00
timeline: function() {
self.$timeline.options({type: self.options.timeline});
},
video: function() {
self.chapters = getChapters();
self.cuts = getCuts();
self.$video.options({
chapters: self.chapters,
video: self.options.video
});
self.$timeline.options({
cuts: self.cuts
});
2013-07-13 23:07:25 +00:00
},
2017-04-15 11:45:01 +00:00
volume: function() {
self.$video.options({
volume: self.options.volume
});
},
2013-07-13 23:07:25 +00:00
width: function() {
self.$video.options({width: getPlayerWidth()});
self.$timeline.options({width: getTimelineWidth()});
}
})
.bindEvent({
//resize: resizeElement,
key_0: toggleMuted,
key_backslash: function() {
if (self.options.view != 'annotations') {
self.$clipPanel.selectClip();
}
},
key_closebracket: function() {
movePositionTo('chapter', 1);
},
key_comma: function() {
movePositionTo('cut', -1);
},
key_control_c: function() {
// FIXME: this looks wrong, should copy getSelectedClips
that.triggerEvent('copy', [{
annotation: self.options.selected,
'in': self.options['in'],
out: self.options.out
}]);
},
2018-03-07 07:48:21 +00:00
key_control_v: function() {
that.triggerEvent('paste');
},
key_dot: function() {
movePositionTo('cut', 1);
},
2013-07-13 23:07:25 +00:00
key_equal: function() {
self.$video.changeVolume(0.1);
},
key_i: function() {
setPoint('in', self.options.position, true);
},
key_left: function() {
movePositionBy(-0.04);
},
2013-07-13 23:07:25 +00:00
key_minus: function() {
self.$video.changeVolume(-0.1);
},
key_o: function() {
setPoint('out', self.options.position, true);
},
key_openbracket: function() {
movePositionTo('chapter', -1);
},
key_right: function() {
movePositionBy(0.04);
},
key_shift_i: function() {
goToPoint('in');
},
key_shift_left: function() {
movePositionBy(-1);
},
key_shift_o: function() {
goToPoint('out');
},
key_slash: function() {
// TODO: selectCut
},
key_shift_right: function() {
movePositionBy(1);
},
key_space: togglePaused
2013-07-13 23:07:25 +00:00
});
self.chapters = getChapters();
self.cuts = getCuts();
2013-07-13 23:07:25 +00:00
self.fullscreen = false;
self.listSizes = [
144 + Ox.UI.SCROLLBAR_SIZE,
280 + Ox.UI.SCROLLBAR_SIZE,
416 + Ox.UI.SCROLLBAR_SIZE
],
self.$menubar = Ox.Bar({size: 24});
self.$player = Ox.Element().css({overflowX: 'hidden'});
self.$video = Ox.VideoPlayer({
chapters: self.chapters,
2013-07-14 17:46:03 +00:00
controlsBottom: [
'play', 'playInToOut', 'volume', 'scale', 'timeline',
2013-07-14 17:46:03 +00:00
'previous', 'next', 'loop', 'position', 'settings'
],
controlsTooltips: self.options.controlsTooltips,
controlsTop: ['fullscreen', 'chapterTitle', 'open'],
cuts: self.cuts,
2013-07-13 23:07:25 +00:00
enableKeyboard: true,
enableMouse: true,
enablePosition: true,
enableSubtitles: self.options.enableSubtitles,
2013-07-13 23:07:25 +00:00
enableTimeline: true,
externalControls: true,
2013-07-13 23:07:25 +00:00
height: getPlayerHeight(),
'in': self.options['in'],
loop: self.options.loop,
muted: self.options.muted,
out: self.options.out,
2016-03-29 12:26:04 +00:00
playbackRate: self.options.playbackRate,
2013-07-13 23:07:25 +00:00
paused: self.options.paused,
position: self.options.position,
resolution: self.options.resolution,
scaleToFill: self.options.scaleToFill,
showMilliseconds: 3,
2013-07-13 23:07:25 +00:00
subtitles: self.options.subtitles,
2015-04-14 14:50:52 +00:00
subtitlesOffset: self.options.subtitlesOffset,
2013-07-13 23:07:25 +00:00
timeline: self.options.smallTimelineURL,
video: self.options.video,
volume: self.options.volume,
width: getPlayerWidth()
})
.bindEvent({
2013-07-14 09:14:23 +00:00
durationchange: function(data) {
self.options.duration = data.duration;
self.$timeline && self.$timeline.replaceWith(
self.$timeline = getTimeline()
);
setPosition(self.$video.options('position'), true);
2013-07-14 18:58:31 +00:00
self.$clipPanel.options({duration: self.options.duration});
2013-07-14 09:14:23 +00:00
},
2013-07-13 23:07:25 +00:00
fullscreen: function(data) {
self.options.fullscreen = data.fullscreen;
},
loop: function(data) {
that.triggerEvent('loop', data);
},
2018-03-07 07:48:21 +00:00
key_control_v: function() {
that.triggerEvent('paste');
},
2013-07-13 23:07:25 +00:00
muted: function(data) {
that.triggerEvent('muted', data);
},
2014-02-07 11:34:31 +00:00
open: function(data) {
2014-02-09 08:07:51 +00:00
var clip = Ox.last(self.options.clips.filter(function(clip) {
return clip.position <= self.options.position;
}));
2014-02-07 11:34:31 +00:00
that.triggerEvent('openlink', {
annotation: clip.annotation,
'in': clip['in'],
item: clip.item,
out: clip.out,
position: clip['in'] + self.options.position - clip['position'],
});
},
2013-07-13 23:07:25 +00:00
paused: function(data) {
self.options.paused = data.paused;
that.triggerEvent('paused', data);
},
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
setPosition(data.position);
},
positioning: function(data) {
setPosition(data.position, false, true);
},
2013-07-13 23:07:25 +00:00
resolution: function(data) {
that.triggerEvent('resolution', data);
},
scale: function(data) {
that.triggerEvent('scale', data);
},
subtitles: function(data) {
self.$timeline.options({
subtitles: data.subtitles ? self.options.subtitles : []
});
that.triggerEvent('subtitles', data);
},
2016-03-05 10:57:29 +00:00
subtitlestrack: function(data) {
var enableSubtitles = !!data.track;
if (enableSubtitles != self.options.enableSubtitles) {
self.options.enableSubtitles = enableSubtitles;
that.triggerEvent('subtitles', {subtitles: enableSubtitles});
}
self.$timeline.options({
subtitles: enableSubtitles ? self.options.subtitles : []
});
},
2013-07-13 23:07:25 +00:00
volume: function(data) {
that.triggerEvent('volume', data);
}
})
.appendTo(self.$player);
self.$controls = Ox.Element()
.addClass('OxMedia')
.bindEvent({
toggle: toggleControls
});
2013-07-14 09:14:23 +00:00
self.$timeline = getTimeline()
2013-07-13 23:07:25 +00:00
.appendTo(self.$controls);
self.$videoPanel = Ox.SplitPanel({
elements: [
{
element: self.$menubar,
size: 24
},
{
element: self.$player
},
{
collapsed: !self.options.showTimeline,
collapsible: true,
element: self.$controls,
size: 80,
tooltip: self.options.timelineTooltip
}
],
orientation: 'vertical'
});
self.$clipPanel = Ox.ClipPanel({
2014-01-22 18:22:12 +00:00
annotationsCalendarSize: self.options.annotationsCalendarSize,
annotationsMapSize: self.options.annotationsMapSize,
annotationsRange: self.options.annotationsRange,
annotationsSort: self.options.annotationsSort,
2014-02-06 10:27:57 +00:00
clipRatio: self.options.clipRatio,
2013-07-13 23:07:25 +00:00
clips: Ox.clone(self.options.clips),
2014-01-22 18:22:12 +00:00
clickLink: self.options.clickLink,
2013-07-14 18:58:31 +00:00
duration: self.options.duration,
2013-07-13 23:07:25 +00:00
editable: self.options.editable,
formatTitle: self.options.formatTitle,
getClipImageURL: self.options.getClipImageURL,
2013-07-13 23:07:25 +00:00
'in': self.options['in'],
2014-01-22 18:22:12 +00:00
layers: Ox.clone(self.options.layers),
2013-07-13 23:07:25 +00:00
out: self.options.out,
position: self.options.position,
selected: self.options.selected,
2014-01-22 18:22:12 +00:00
showAnnotationsCalendar: self.options.showAnnotationsCalendar,
showAnnotationsMap: self.options.showAnnotationsMap,
showLayers: self.options.showLayers,
showUsers: self.options.showUsers,
sort: Ox.clone(self.options.sort),
2013-07-13 23:07:25 +00:00
sortOptions: self.options.sortOptions,
view: self.options.clipView,
width: self.options.clipSize
})
.bindEvent({
copy: function(data) {
that.triggerEvent('copy', data);
},
copyadd: function(data) {
that.triggerEvent('copyadd', data);
2013-07-13 23:07:25 +00:00
},
cut: function(data) {
that.triggerEvent('cut', data);
},
cutadd: function(data) {
that.triggerEvent('cutadd', data);
},
'delete': function(data) {
that.triggerEvent('delete', data);
},
2013-07-13 23:07:25 +00:00
edit: function(data) {
that.triggerEvent('edit', data);
},
join: function(data) {
that.triggerEvent('join', data);
},
2013-07-13 23:07:25 +00:00
move: function(data) {
that.triggerEvent('move', data);
},
open: function(data) {
2013-07-14 15:13:46 +00:00
setPosition(getClipById(data.ids[0])['position']);
that.triggerEvent('open', data);
2013-07-13 23:07:25 +00:00
},
paste: function() {
that.triggerEvent('paste');
},
resize: resizeClips,
resizeend: resizeendClips,
select: function(data) {
self.options.selected = data.ids;
2013-07-13 23:07:25 +00:00
that.triggerEvent('select', data);
},
selectannotation: function(data) {
that.triggerEvent('selectannotation', data);
},
2013-07-13 23:07:25 +00:00
sort: function(data) {
2014-02-06 10:27:57 +00:00
self.options.sort = data;
2013-07-13 23:07:25 +00:00
that.triggerEvent('sort', data);
},
split: function(data) {
that.triggerEvent('split', data);
},
toggle: toggleClips,
view: function(data) {
that.triggerEvent('view', data);
}
2013-07-13 23:07:25 +00:00
});
that.setElement(
2013-07-14 13:42:09 +00:00
self.$mainPanel = Ox.SplitPanel({
2013-07-13 23:07:25 +00:00
elements: [
{
element: self.$videoPanel
},
{
collapsed: !self.options.showClips,
collapsible: true,
element: self.$clipPanel,
resizable: true,
resize: self.listSizes,
size: self.options.clipSize,
tooltip: self.options.clipTooltip
}
],
orientation: 'horizontal'
})
);
function dragTimeline(data) {
2013-07-13 23:07:25 +00:00
self.options.position = data.position;
self.$video.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position});
}
function dragendTimeline(data) {
dragTimeline(data);
2013-07-13 23:07:25 +00:00
that.triggerEvent('position', {position: self.options.position});
}
function getChapters() {
return self.options.clips.map(function(clip) {
return {
position: clip.position,
2014-02-08 07:39:10 +00:00
title: self.options.formatTitle(clip)
};
});
}
2013-07-14 19:11:32 +00:00
function getClipById(id) {
return Ox.getObjectById(self.options.clips, id);
}
function getClipsInSelection() {
// FIXME: there should be a library function (intersect?) for this
var clips = self.options.clips.filter(function(clip) {
var endPosition = clip.position + clip.duration;
return (
clip.position >= self.options['in']
&& endPosition < self.options.out
) || (
clip.position <= self.options['in']
&& endPosition > self.options['in']
) || (
clip.position < self.options.out
&& endPosition >= self.options.out
)
});
return clips.map(function(clip, index) {
var dereference = false,
endPosition = clip.position + clip.duration,
inPoint = clip['in'],
outPoint = clip.out;
if (index == 0 && clip.position < self.options['in']) {
dereference = true;
inPoint = Ox.round(clip['in'] + self.options['in'] - clip.position, 3);
}
if (index == clips.length - 1 && endPosition > self.options.out) {
dereference = true;
outPoint = Ox.round(clip.out + self.options.out - endPosition, 3);
}
return clip.annotation && !dereference ? clip.annotation
: clip.item + '/' + inPoint + '-' + outPoint;
});
}
function getCuts() {
var cuts = [];
self.options.clips.forEach(function(clip, i) {
if (i > 0) {
cuts.push(clip.position);
}
clip.cuts.forEach(function(cut) {
cuts.push(clip.position + cut - clip['in']);
});
});
return cuts;
}
// fixme: why not goToNextPosition()?
function getNextPosition(type, direction) {
// type can be 'chapter' or 'cut'
var positions;
if (type == 'chapter') {
positions = self.chapters.map(function(chapter) {
return chapter.position;
});
} else if (type == 'cut') {
2013-07-18 13:22:13 +00:00
positions = [0].concat(self.cuts, self.options.duration);
}
return Ox.nextValue(positions, self.options.position, direction);
}
2013-07-13 23:07:25 +00:00
function getPlayerHeight() {
return self.options.height - 24 - 32
- self.options.showTimeline * 80 - 1;
2013-07-13 23:07:25 +00:00
}
function getPlayerWidth() {
return self.options.width
- (self.options.showClips && !self.fullscreen)
2013-07-13 23:07:25 +00:00
* self.options.clipSize - 1;
}
2013-07-14 09:14:23 +00:00
function getTimeline() {
return Ox.LargeVideoTimeline({
chapters: self.chapters,
cuts: self.cuts,
2013-07-14 09:14:23 +00:00
duration: self.options.duration,
getImageURL: self.options.getLargeTimelineURL,
'in': self.options['in'],
out: self.options.out,
position: self.options.position,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
type: self.options.timeline,
width: getTimelineWidth()
})
.css({left: '4px', top: '4px'})
.bindEvent({
key_left: function() {
self.options.paused && movePositionBy(-1 / self.options.fps);
},
key_right: function() {
self.options.paused && movePositionBy(1 / self.options.fps);
},
key_space: togglePaused,
2013-07-14 09:14:23 +00:00
mousedown: that.gainFocus,
position: dragendTimeline,
positioning: dragTimeline,
});
2013-07-14 09:14:23 +00:00
}
2013-07-13 23:07:25 +00:00
function getTimelineWidth() {
return self.options.width
- (self.options.showClips && !self.fullscreen)
2013-07-13 23:07:25 +00:00
* self.options.clipSize - 16 - 1;
}
function goToPoint(point) {
setPosition(self.options[point]);
}
function movePositionBy(sec) {
setPosition(Ox.limit(self.options.position + sec, 0, self.options.duration));
}
function movePositionTo(type, direction) {
setPosition(getNextPosition(type, direction));
}
2013-07-14 09:14:23 +00:00
2013-07-13 23:07:25 +00:00
function resizeClips(data) {
// called on clips resize
self.options.clipSize = data.size;
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
self.$clipPanel.options({width: data.size});
}
function resizeendClips(data) {
that.triggerEvent('clipSize', data);
2013-07-13 23:07:25 +00:00
}
function setPoint(point, position, triggerEvent) {
2013-07-13 23:07:25 +00:00
self.options[point] = position;
self.$video.options(point, position);
self.$timeline.options(point, position);
self.$clipPanel.options(point, position);
if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in', position);
}
if (triggerEvent) {
that.triggerEvent('points', {
'in': self.options['in'],
out: self.options.out,
position: self.options.position
});
}
2013-07-13 23:07:25 +00:00
}
function setPosition(position, playing, dragging) {
2013-07-13 23:07:25 +00:00
var minute = Math.floor(position / 60),
previousMinute = Math.floor(self.options.position / 60);
self.options.position = position;
!playing && self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$clipPanel.options({position: self.options.position});
if ((!playing || minute != previousMinute) && !dragging) {
2013-07-13 23:07:25 +00:00
that.triggerEvent('position', {
position: !playing ? self.options.position : minute * 60
});
}
}
function toggleClips(data) {
self.options.showClips = !data.collapsed;
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
that.triggerEvent('toggleclips', {
showClips: self.options.showClips
2013-07-13 23:07:25 +00:00
});
}
function toggleControls(data) {
self.options.showTimeline = !data.collapsed;
self.$video.options({
height: getPlayerHeight()
});
that.triggerEvent('toggletimeline', {
showTimeline: self.options.showTimeline
});
}
function toggleMuted() {
self.$video.toggleMuted();
}
function togglePaused() {
self.$video.togglePaused();
self.$video.options('paused') && that.triggerEvent('position', {
position: self.$video.options('position')
});
}
that.getPasteIndex = function() {
return self.$clipPanel.getPasteIndex();
};
that.getSelectedClips = function() {
return self.options.selected.length ? self.options.selected.map(function(id) {
var clip = getClipById(id);
return (
clip.annotation || clip.item + '/' + clip['in'] + '-' + clip.out
) + '/' + id;
}) : getClipsInSelection();
};
that.invertSelection = function() {
self.$clipPanel.invertSelection();
};
that.selectAll = function() {
self.$clipPanel.selectAll();
};
2013-07-13 23:07:25 +00:00
that.updateClip = function(id, data) {
self.options.clips[Ox.getIndexById(self.options.clips, id)] = data;
2013-07-13 23:07:25 +00:00
self.$clipPanel.updateItem(id, data);
};
return that;
};