add VideoEditPanel, ClipPanel
This commit is contained in:
j
parent
9420591b42
commit
72f1b47e1c
2 changed files with 695 additions and 0 deletions
297
source/Ox.UI/js/Video/ClipPanel.js
Normal file
297
source/Ox.UI/js/Video/ClipPanel.js
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
'use strict';
|
||||
|
||||
Ox.ClipPanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
clips: [],
|
||||
editable: false,
|
||||
'in': 0,
|
||||
out: 0,
|
||||
position: 0,
|
||||
selected: '',
|
||||
sort: [],
|
||||
sortOptions: [],
|
||||
view: 'list',
|
||||
width: 0
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
clips: function() {
|
||||
self.$list.options({items: self.options.clips});
|
||||
}
|
||||
});
|
||||
|
||||
self.$menubar = Ox.Bar({
|
||||
size: 24
|
||||
})
|
||||
.bindEvent({
|
||||
doubleclick: function(e) {
|
||||
if ($(e.target).is('.OxBar')) {
|
||||
self.$list.animate({scrollTop: 0}, 250);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
self.$viewElement = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{id: 'list', title: 'list', tooltip: Ox._('View as List')},
|
||||
{id: 'grid', title: 'grid', tooltip: Ox._('View as Grid')}
|
||||
],
|
||||
selectable: true,
|
||||
type: 'image',
|
||||
value: self.options.view
|
||||
})
|
||||
.css({
|
||||
float: 'left',
|
||||
margin: '4px 2px 4px 4px'
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
Ox.print(data);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$menubar);
|
||||
|
||||
self.$sortSelect = Ox.Select({
|
||||
items: self.options.sortOptions,
|
||||
value: self.options.sort[0].key,
|
||||
width: 84 + Ox.UI.SCROLLBAR_SIZE
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
that.triggerEvent('sort', {
|
||||
key: data.value,
|
||||
operator: Ox.getObjectById(
|
||||
self.options.sortOptions, data.value
|
||||
).operator
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
self.$orderButton = Ox.Button({
|
||||
overlap: 'left',
|
||||
title: getButtonTitle(),
|
||||
tooltip: getButtonTooltip(),
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.triggerEvent('sort', {
|
||||
key: self.options.sort[0].key,
|
||||
operator: self.options.sort[0].operator == '+' ? '-' : '+'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
self.$sortElement = Ox.FormElementGroup({
|
||||
elements: [self.$sortSelect, self.$orderButton],
|
||||
float: 'right'
|
||||
})
|
||||
.css({
|
||||
float: 'right',
|
||||
margin: '4px 4px 4px 2px'
|
||||
})
|
||||
.appendTo(self.$menubar);
|
||||
|
||||
if (self.options.view == 'list') {
|
||||
self.$list = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
align: 'right',
|
||||
id: 'index',
|
||||
operator: '+',
|
||||
title: Ox._('Index'),
|
||||
visible: false,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
id: 'id',
|
||||
operator: '+',
|
||||
title: Ox._('ID'),
|
||||
unique: true,
|
||||
visible: false,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
id: 'item',
|
||||
operator: '+',
|
||||
title: Ox._(pandora.site.itemName.singular),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
editable: isEditable,
|
||||
format: function(value) {
|
||||
return Ox.formatDuration(value, 3);
|
||||
},
|
||||
id: 'in',
|
||||
operator: '+',
|
||||
title: Ox._('In'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
editable: isEditable,
|
||||
format: function(value) {
|
||||
return Ox.formatDuration(value, 3);
|
||||
},
|
||||
id: 'out',
|
||||
operator: '+',
|
||||
title: Ox._('Out'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
editable: isEditable,
|
||||
format: function(value) {
|
||||
return Ox.formatDuration(value, 3);
|
||||
},
|
||||
id: 'duration',
|
||||
operator: '+',
|
||||
title: Ox._('Duration'),
|
||||
visible: true,
|
||||
width: 90
|
||||
}
|
||||
],
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsResizable: true,
|
||||
columnsVisible: true,
|
||||
items: self.options.clips,
|
||||
scrollbarVisible: true,
|
||||
sort: self.options.sort,
|
||||
sortable: self.options.editable && self.options.sort[0].key == 'index',
|
||||
unique: 'id'
|
||||
});
|
||||
} else {
|
||||
self.$list = Ox.IconList({
|
||||
|
||||
});
|
||||
}
|
||||
self.$list.bindEvent({
|
||||
copy: function(data) {
|
||||
that.triggerEvent('copy', data);
|
||||
},
|
||||
cut: function(data) {
|
||||
that.triggerEvent('cut', data);
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', data);
|
||||
},
|
||||
move: function(data) {
|
||||
data.ids.forEach(function(id, index) {
|
||||
Ox.print('????', id, index);
|
||||
self.$list.value(id, 'index', index);
|
||||
});
|
||||
that.triggerEvent('move', data);
|
||||
},
|
||||
open: function(data) {
|
||||
that.triggerEvent('open', data);
|
||||
},
|
||||
paste: function() {
|
||||
that.triggerEvent('paste');
|
||||
},
|
||||
select: function(data) {
|
||||
that.triggerEvent('select', data);
|
||||
},
|
||||
sort: function(data) {
|
||||
self.options.sort = self.$list.options('sort');
|
||||
self.$list.options({sortable: isSortable()});
|
||||
that.triggerEvent('sort', data);
|
||||
},
|
||||
submit: function(data) {
|
||||
data.value = Ox.parseDuration(data.value);
|
||||
self.$list.value(data.id, data.key, data.value);
|
||||
that.triggerEvent('edit', data);
|
||||
}
|
||||
});
|
||||
|
||||
self.$statusbar = Ox.Bar({
|
||||
size: 16
|
||||
});
|
||||
|
||||
that.setElement(
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$menubar,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: self.$list
|
||||
},
|
||||
{
|
||||
element: self.$statusbar,
|
||||
size: 16
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
);
|
||||
|
||||
function cutClips() {
|
||||
|
||||
}
|
||||
|
||||
function editClip(data) {
|
||||
var value = self.$list.value(data.id, data.key);
|
||||
if (data.value != value && !(data.value === '' && value === null)) {
|
||||
self.$list.value(data.id, data.key, data.value || null);
|
||||
that.triggerEvent('edit', data);
|
||||
}
|
||||
}
|
||||
|
||||
function getButtonTitle() {
|
||||
return self.options.sort[0].operator == '+' ? 'up' : 'down';
|
||||
}
|
||||
|
||||
function getButtonTooltip() {
|
||||
return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending');
|
||||
}
|
||||
|
||||
function isEditable(data) {
|
||||
return self.options.editable && !data.annotation;
|
||||
}
|
||||
|
||||
function isSortable() {
|
||||
return self.options.editable && self.options.sort[0].key == 'index';
|
||||
}
|
||||
|
||||
function moveClips(data) {
|
||||
Ox.Request.clearCache();
|
||||
pandora.api.sortClips({
|
||||
edit: pandora.user.ui.edit,
|
||||
ids: data.ids
|
||||
})
|
||||
}
|
||||
|
||||
function openClips(data) {
|
||||
|
||||
}
|
||||
|
||||
function pasteClips() {
|
||||
|
||||
}
|
||||
|
||||
function removeClips() {
|
||||
|
||||
}
|
||||
|
||||
function updateSortElement() {
|
||||
|
||||
}
|
||||
|
||||
that.updateItem = function(id, data) {
|
||||
['in', 'out', 'duration'].forEach(function(key) {
|
||||
self.$list.value(id, key, data[key]);
|
||||
});
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
398
source/Ox.UI/js/Video/VideoEditPanel.js
Normal file
398
source/Ox.UI/js/Video/VideoEditPanel.js
Normal file
|
|
@ -0,0 +1,398 @@
|
|||
'use strict';
|
||||
|
||||
Ox.VideoEditPanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
clips: [],
|
||||
clipSize: 256,
|
||||
clipSort: [],
|
||||
clipSortOptions: [],
|
||||
clipTooltip: 'clips',
|
||||
clipView: 'list',
|
||||
clickLink: null,
|
||||
cuts: [],
|
||||
duration: 0,
|
||||
editable: false,
|
||||
enableSubtitles: false,
|
||||
fullscreen: false,
|
||||
getLargeTimelineURL: null,
|
||||
height: 0,
|
||||
'in': 0,
|
||||
loop: false,
|
||||
muted: false,
|
||||
out: 0,
|
||||
paused: true,
|
||||
playInToOut: false,
|
||||
position: 0,
|
||||
resolution: 0,
|
||||
scaleToFill: false,
|
||||
selected: '',
|
||||
showClips: false,
|
||||
showTimeline: false,
|
||||
smallTimelineURL: '',
|
||||
subtitles: [],
|
||||
timeline: '',
|
||||
timelineTooltip: 'timeline',
|
||||
type: 'static',
|
||||
video: [],
|
||||
volume: 1,
|
||||
width: 0
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
clips: function() {
|
||||
self.$clipPanel.options({clips: Ox.clone(self.options.clips)});
|
||||
},
|
||||
duration: function() {
|
||||
self.$timeline.options({duration: self.options.duration});
|
||||
},
|
||||
fullscreen: function() {
|
||||
self.$video.options({fullscreen: self.options.fullscreen});
|
||||
},
|
||||
height: function() {
|
||||
self.$video.options({height: getPlayerHeight()});
|
||||
},
|
||||
'in': function() {
|
||||
setPoint('in', self.options['in']);
|
||||
},
|
||||
out: function() {
|
||||
setPoint('out', self.options.out);
|
||||
},
|
||||
paused: function() {
|
||||
self.$video.options({paused: self.options.paused});
|
||||
},
|
||||
position: function() {
|
||||
self.$video.options({position: self.options.position});
|
||||
self.$timeline.options({position: self.options.position});
|
||||
self.$annotationPanel.options({position: self.options.position});
|
||||
},
|
||||
selected: function() {
|
||||
self.$annotationPanel.options({selected: self.options.selected});
|
||||
},
|
||||
showClips: function() {
|
||||
that.$element.toggle(1);
|
||||
},
|
||||
showTimeline: function() {
|
||||
self.$videoPanel.toggle(1);
|
||||
},
|
||||
smallTimelineURL: function() {
|
||||
self.$video.options({timeline: self.options.smallTimelineURL});
|
||||
},
|
||||
timeline: function() {
|
||||
self.$timeline.options({type: self.options.timeline});
|
||||
},
|
||||
video: function() {
|
||||
self.$video.options({video: self.options.video});
|
||||
},
|
||||
width: function() {
|
||||
self.$video.options({width: getPlayerWidth()});
|
||||
self.$timeline.options({width: getTimelineWidth()});
|
||||
}
|
||||
})
|
||||
.bindEvent({
|
||||
//resize: resizeElement,
|
||||
key_0: toggleMuted,
|
||||
key_equal: function() {
|
||||
self.$video.changeVolume(0.1);
|
||||
},
|
||||
key_minus: function() {
|
||||
self.$video.changeVolume(-0.1);
|
||||
},
|
||||
key_space: togglePaused
|
||||
});
|
||||
|
||||
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({
|
||||
controlsTop: ['fullscreen', 'space', 'open'],
|
||||
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'previous', 'next', 'loop', 'position'],
|
||||
enableKeyboard: true,
|
||||
enableMouse: true,
|
||||
enablePosition: true,
|
||||
enableTimeline: true,
|
||||
height: getPlayerHeight(),
|
||||
'in': self.options['in'],
|
||||
loop: self.options.loop,
|
||||
muted: self.options.muted,
|
||||
out: self.options.out,
|
||||
paused: self.options.paused,
|
||||
position: self.options.position,
|
||||
resolution: self.options.resolution,
|
||||
scaleToFill: self.options.scaleToFill,
|
||||
subtitles: self.options.subtitles,
|
||||
timeline: self.options.smallTimelineURL,
|
||||
video: self.options.video,
|
||||
volume: self.options.volume,
|
||||
width: getPlayerWidth()
|
||||
})
|
||||
.bindEvent({
|
||||
fullscreen: function(data) {
|
||||
self.options.fullscreen = data.fullscreen;
|
||||
},
|
||||
loop: function(data) {
|
||||
that.triggerEvent('loop', data);
|
||||
},
|
||||
muted: function(data) {
|
||||
that.triggerEvent('muted', data);
|
||||
},
|
||||
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);
|
||||
},
|
||||
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);
|
||||
},
|
||||
volume: function(data) {
|
||||
that.triggerEvent('volume', data);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$player);
|
||||
|
||||
self.$controls = Ox.Element()
|
||||
.addClass('OxMedia')
|
||||
.bindEvent({
|
||||
toggle: toggleControls
|
||||
});
|
||||
|
||||
self.$timeline = Ox.LargeVideoTimeline({
|
||||
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({
|
||||
mousedown: that.gainFocus,
|
||||
position: changeTimeline
|
||||
})
|
||||
.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({
|
||||
clips: Ox.clone(self.options.clips),
|
||||
editable: self.options.editable,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
selected: self.options.selected,
|
||||
sort: self.options.clipSort,
|
||||
sortOptions: self.options.sortOptions,
|
||||
view: self.options.clipView,
|
||||
width: self.options.clipSize
|
||||
})
|
||||
.bindEvent({
|
||||
copy: function(data) {
|
||||
that.triggerEvent('copy', data);
|
||||
},
|
||||
cut: function(data) {
|
||||
that.triggerEvent('cut', data);
|
||||
},
|
||||
edit: function(data) {
|
||||
that.triggerEvent('edit', data);
|
||||
},
|
||||
move: function(data) {
|
||||
that.triggerEvent('move', data);
|
||||
},
|
||||
open: function(data) {
|
||||
// ...
|
||||
},
|
||||
paste: function() {
|
||||
that.triggerEvent('paste');
|
||||
},
|
||||
remove: function(data) {
|
||||
that.triggerEvent('remove', data);
|
||||
},
|
||||
resize: resizeClips,
|
||||
resizeend: resizeendClips,
|
||||
select: function(data) {
|
||||
that.triggerEvent('select', data);
|
||||
},
|
||||
sort: function(data) {
|
||||
self.options.clipSort = data.sort;
|
||||
that.triggerEvent('sort', data);
|
||||
},
|
||||
toggle: toggleClips
|
||||
});
|
||||
|
||||
that.setElement(
|
||||
Ox.SplitPanel({
|
||||
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 changeTimeline(data) {
|
||||
self.options.position = data.position;
|
||||
self.$video.options({position: self.options.position});
|
||||
self.$clipPanel.options({position: self.options.position});
|
||||
that.triggerEvent('position', {position: self.options.position});
|
||||
}
|
||||
|
||||
function getPlayerHeight() {
|
||||
return self.options.height - 24 -
|
||||
self.options.showTimeline * 80 - 1;
|
||||
}
|
||||
|
||||
function getPlayerWidth() {
|
||||
return self.options.width -
|
||||
(self.options.showClips && !self.fullscreen)
|
||||
* self.options.clipSize - 1;
|
||||
}
|
||||
|
||||
function getTimelineWidth() {
|
||||
return self.options.width -
|
||||
(self.options.showClips && !self.fullscreen)
|
||||
* self.options.clipSize - 16 - 1;
|
||||
}
|
||||
|
||||
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.size);
|
||||
}
|
||||
|
||||
function selectClip(data) {
|
||||
self.options.selected = data.id;
|
||||
if (self.options.selected) {
|
||||
setPosition(data['in']);
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
}
|
||||
self.$clipPanel.options({selected: self.options.selected});
|
||||
that.triggerEvent('select', {id: self.options.selected});
|
||||
}
|
||||
|
||||
function setPoint(point, position) {
|
||||
self.options[point] = position;
|
||||
self.$video.options(point, position);
|
||||
self.$timeline.options(point, position);
|
||||
self.$clipPanel.options(point, position);
|
||||
}
|
||||
|
||||
function setPosition(position, playing) {
|
||||
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) {
|
||||
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.showAnnotations
|
||||
});
|
||||
}
|
||||
|
||||
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.updateClip = function(id, data) {
|
||||
self.$clipPanel.updateItem(id, data);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Reference in a new issue