new edit panel
This commit is contained in:
j
parent
70f4037172
commit
553d2dd921
1 changed files with 225 additions and 235 deletions
|
|
@ -2,255 +2,245 @@
|
||||||
|
|
||||||
pandora.ui.editPanel = function() {
|
pandora.ui.editPanel = function() {
|
||||||
|
|
||||||
var that = Ox.SplitPanel({
|
var ui = pandora.user.ui,
|
||||||
elements: [
|
edit,
|
||||||
{element: Ox.Element(), size: 24},
|
listSizes = [
|
||||||
{element: Ox.Element()},
|
144 + Ox.UI.SCROLLBAR_SIZE,
|
||||||
{element: Ox.Element(), size: 16}
|
280 + Ox.UI.SCROLLBAR_SIZE,
|
||||||
],
|
416 + Ox.UI.SCROLLBAR_SIZE
|
||||||
orientation: 'vertical'
|
],
|
||||||
});
|
listSize = listSizes[ui.clipColumns],
|
||||||
|
smallTimelineCanvas,
|
||||||
|
smallTimelineContext,
|
||||||
|
that = Ox.Element();
|
||||||
|
|
||||||
pandora.user.ui.edit && render();
|
ui.edit && render();
|
||||||
|
|
||||||
|
function editPointsKey(key) {
|
||||||
|
return 'editPoints.' + ui.edit.replace(/\./g, '\\.') + '.' + key;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSmallTimelineURL() {
|
||||||
|
var fps = 25,
|
||||||
|
width = Math.floor(edit.duration * fps),
|
||||||
|
height = 64;
|
||||||
|
smallTimelineCanvas = Ox.$('<canvas>').attr({width: width, height: height})[0];
|
||||||
|
smallTimelineContext = smallTimelineCanvas.getContext('2d');
|
||||||
|
return smallTimelineCanvas.toDataURL();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getVideos() {
|
||||||
|
return Ox.flatten(edit.clips.map(function(clip) {
|
||||||
|
return pandora.getClipVideos(clip);
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
pandora.api.getEdit({id: pandora.user.ui.edit}, function(result) {
|
pandora.api.getEdit({id: pandora.user.ui.edit}, function(result) {
|
||||||
|
edit = result.data;
|
||||||
var edit = result.data;
|
// fixme: duration should come from backend
|
||||||
|
edit.duration = 0;
|
||||||
var $toolbar = Ox.Bar({size: 24}),
|
edit.clips.forEach(function(clip) {
|
||||||
|
clip.position = edit.duration;
|
||||||
$editMenu,
|
edit.duration += clip.duration;
|
||||||
|
});
|
||||||
$viewSelect = Ox.Select({
|
//Ox.print('EDIT', edit)
|
||||||
items: [
|
pandora.$ui.mainPanel.replaceElement(1,
|
||||||
{'id': 'list', 'title': Ox._('View as List')},
|
that = Ox.VideoEditPanel({
|
||||||
{'id': 'player', 'title': Ox._('View as Player')},
|
clips: edit.clips,
|
||||||
],
|
clipsSize: listSize,
|
||||||
value: 'list',
|
clipSort: ui.clipSort,
|
||||||
width: 128
|
clipSortOptions: [/*...*/],
|
||||||
})
|
clipView: ui.clipView,
|
||||||
.css({
|
cuts: [],
|
||||||
float: 'left',
|
duration: edit.duration,
|
||||||
margin: '4px 0 0 4px'
|
editable: edit.editable,
|
||||||
|
enableSubtitles: ui.videoSubtitles,
|
||||||
|
fullscreen: false,
|
||||||
|
getLargeTimelineURL: function(type, i, callback) {
|
||||||
|
pandora.getLargeEditTimelineURL(edit, type, i, callback);
|
||||||
|
},
|
||||||
|
height: pandora.$ui.appPanel.size(1),
|
||||||
|
'in': ui.editPoints[ui.edit]['in'],
|
||||||
|
loop: ui.videoLoop,
|
||||||
|
muted: ui.videoMuted,
|
||||||
|
out: ui.editPoints[ui.edit].out,
|
||||||
|
position: ui.editPoints[ui.edit].position,
|
||||||
|
resolution: ui.videoResolution,
|
||||||
|
scaleToFill: ui.videoScale == 'fill',
|
||||||
|
// selected: ...
|
||||||
|
showClips: ui.showClips,
|
||||||
|
showTimeline: ui.showTimeline,
|
||||||
|
smallTimelineURL: getSmallTimelineURL(),
|
||||||
|
sort: ui.clipSort,
|
||||||
|
sortOptions: [
|
||||||
|
{key: 'index', title: Ox._('Sort Manually'), operator: '+'}
|
||||||
|
].concat(
|
||||||
|
pandora.site.clipKeys.map(function(key) {
|
||||||
|
return Ox.extend(Ox.clone(key), {
|
||||||
|
title: Ox._(('Sort by Clip {0}'), [Ox._(key.title)])
|
||||||
|
});
|
||||||
|
})
|
||||||
|
).concat(
|
||||||
|
pandora.site.sortKeys.map(function(key) {
|
||||||
|
return Ox.extend(Ox.clone(key), {
|
||||||
|
title: Ox._('Sort by {0}', [Ox._(key.title)])
|
||||||
|
});
|
||||||
|
})
|
||||||
|
),
|
||||||
|
timeline: ui.videoTimeline,
|
||||||
|
video: getVideos(),
|
||||||
|
volume: ui.videoVolume,
|
||||||
|
width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
clipssort: function(data) {
|
||||||
$panel.replaceElement(0, pandora.$ui.edit = pandora.ui[
|
pandora.UI.set({clipSort: data.sort});
|
||||||
data.value == 'player' ? 'editPlayer' : 'editList'
|
|
||||||
](edit));
|
|
||||||
},
|
},
|
||||||
}).appendTo($toolbar),
|
copy: function(data) {
|
||||||
|
|
||||||
$statusbar = Ox.Bar({size: 16}),
|
},
|
||||||
|
cut: function(data) {
|
||||||
|
|
||||||
$panel = Ox.SplitPanel({
|
},
|
||||||
elements: [
|
edit: function(data) {
|
||||||
{
|
var args = {id: data.id},
|
||||||
element: pandora.$ui.edit = pandora.ui.editList(edit)
|
index = Ox.getIndexById(edit.clips, data.id),
|
||||||
},
|
clip = edit.clips[index];
|
||||||
{
|
if (data.key == 'duration') {
|
||||||
element: Ox.Element(),
|
data.key = 'out';
|
||||||
size: 0,
|
data.value += clip['in'];
|
||||||
resizable: false
|
|
||||||
}
|
}
|
||||||
],
|
pandora.api.get({id: clip.item, keys: ['duration']}, function(result) {
|
||||||
orientation: 'horizontal'
|
data.value = Math.min(data.value, result.data.duration);
|
||||||
});
|
args[data.key] = data.value;
|
||||||
|
if (data.key == 'in' && data.value > clip.out) {
|
||||||
that.replaceElement(0, $toolbar);
|
args.out = args['in'];
|
||||||
that.replaceElement(1, $panel);
|
} else if (data.key == 'out' && data.value < clip['in']) {
|
||||||
that.replaceElement(2, $statusbar);
|
args['in'] = args.out;
|
||||||
});
|
}
|
||||||
}
|
pandora.api.editClip(args, function(result) {
|
||||||
|
edit.clips[index] = result.data;
|
||||||
that.reload = function() {
|
that.updateClip(data.id, result.data);
|
||||||
render();
|
});
|
||||||
}
|
});
|
||||||
|
},
|
||||||
return that;
|
move: function(data) {
|
||||||
|
pandora.api.sortClips({
|
||||||
};
|
edit: edit.id,
|
||||||
|
ids: data.ids
|
||||||
pandora.ui.editList = function(edit) {
|
}, function() {
|
||||||
|
Ox.Request.clearCache('getEdit');
|
||||||
var height = getHeight(),
|
});
|
||||||
width = getWidth(),
|
},
|
||||||
|
muted: function(data) {
|
||||||
that = Ox.Element()
|
pandora.UI.set('videoMuted', data.muted);
|
||||||
.css({
|
},
|
||||||
'overflow-y': 'auto'
|
paste: function() {
|
||||||
});
|
if (Ox.Clipboard.type() == 'clip') {
|
||||||
|
pandora.api.addClips({
|
||||||
self.$list = Ox.TableList({
|
clips: Ox.Clipboard.paste(),
|
||||||
columns: [
|
edit: pandora.user.ui.edit
|
||||||
{
|
}, function(result) {
|
||||||
align: 'left',
|
updateClips(edit.clips.concat(result.data.clips));
|
||||||
id: 'index',
|
});
|
||||||
operator: '+',
|
}
|
||||||
title: Ox._('Index'),
|
},
|
||||||
visible: false,
|
playing: function(data) {
|
||||||
width: 60
|
pandora.UI.set(editPointsKey('position'), data.position);
|
||||||
},
|
},
|
||||||
{
|
position: function(data) {
|
||||||
align: 'left',
|
pandora.UI.set(editPointsKey('position'), data.position);
|
||||||
id: 'id',
|
},
|
||||||
operator: '+',
|
remove: function(data) {
|
||||||
title: Ox._('ID'),
|
if (edit.editable) {
|
||||||
visible: false,
|
pandora.api.removeClips({
|
||||||
width: 60
|
ids: data.ids,
|
||||||
},
|
edit: pandora.user.ui.edit
|
||||||
{
|
}, function(result) {
|
||||||
align: 'left',
|
updateClips(result.data.clips);
|
||||||
id: 'item',
|
});
|
||||||
operator: '+',
|
}
|
||||||
title: Ox._(pandora.site.itemName.singular),
|
},
|
||||||
visible: true,
|
resizeclips: function(data) {
|
||||||
width: 360
|
pandora.UI.set('clipsSize', data.clipsSize);
|
||||||
},
|
},
|
||||||
{
|
resolution: function(data) {
|
||||||
editable: true,
|
pandora.UI.set('videoResolution', data.resolution);
|
||||||
id: 'in',
|
},
|
||||||
operator: '+',
|
scale: function(data) {
|
||||||
title: Ox._('In'),
|
pandora.UI.set('videoScale', data.scale);
|
||||||
visible: true,
|
},
|
||||||
width: 60
|
select: function(data) {
|
||||||
},
|
pandora.UI.set(editPointsKey('clip'), data.ids[0]);
|
||||||
{
|
},
|
||||||
editable: true,
|
subtitles: function(data) {
|
||||||
id: 'out',
|
pandora.UI.set('videoSubtitles', data.subtitles);
|
||||||
operator: '+',
|
},
|
||||||
title: Ox._('Out'),
|
timeline: function(data) {
|
||||||
visible: true,
|
pandora.UI.set('videoTimeline', data.timeline);
|
||||||
width: 60
|
},
|
||||||
},
|
toggleclips: function(data) {
|
||||||
{
|
pandora.UI.set('showAnnotations', data.showAnnotations);
|
||||||
id: 'duration',
|
},
|
||||||
operator: '+',
|
toggletimeline: function(data) {
|
||||||
title: Ox._('Duration'),
|
pandora.UI.set('showTimeline', data.showTimeline);
|
||||||
visible: true,
|
},
|
||||||
width: 60
|
volume: function(data) {
|
||||||
}
|
pandora.UI.set('videoVolume', data.volume);
|
||||||
],
|
},
|
||||||
columnsMovable: true,
|
pandora_showannotations: function(data) {
|
||||||
columnsRemovable: true,
|
that.options({showAnnotations: data.value});
|
||||||
columnsResizable: true,
|
},
|
||||||
columnsVisible: true,
|
pandora_showtimeline: function(data) {
|
||||||
items: edit.clips,
|
that.options({showTimeline: data.value});
|
||||||
scrollbarVisible: true,
|
},
|
||||||
sort: [{key: 'index', operator: '+'}],
|
pandora_videotimeline: function(data) {
|
||||||
sortable: true,
|
that.options({timeline: data.value});
|
||||||
unique: 'id'
|
}
|
||||||
})
|
|
||||||
.appendTo(that)
|
|
||||||
.bindEvent({
|
|
||||||
add: function(data) {
|
|
||||||
if(pandora.user.ui.item) {
|
|
||||||
pandora.api.addClip({
|
|
||||||
edit: pandora.user.ui.edit,
|
|
||||||
item: pandora.user.ui.item,
|
|
||||||
'in': pandora.user.ui.videoPoints[pandora.user.ui.item]['in'],
|
|
||||||
out: pandora.user.ui.videoPoints[pandora.user.ui.item].out,
|
|
||||||
}, function(result) {
|
|
||||||
Ox.Request.clearCache();
|
|
||||||
pandora.$ui.rightPanel.reload()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'delete': function(data) {
|
|
||||||
if (data.ids.length > 0 && edit.editable) {
|
|
||||||
pandora.api.removeClip({
|
|
||||||
ids: data.ids,
|
|
||||||
edit: pandora.user.ui.edit
|
|
||||||
}, function(result) {
|
|
||||||
Ox.Request.clearCache();
|
|
||||||
pandora.$ui.rightPanel.reload();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
move: function(data) {
|
|
||||||
Ox.Request.clearCache();
|
|
||||||
pandora.api.sortClips({
|
|
||||||
edit: pandora.user.ui.edit,
|
|
||||||
ids: data.ids
|
|
||||||
})
|
})
|
||||||
},
|
);
|
||||||
select: function(data) {
|
updateSmallTimelineURL();
|
||||||
},
|
|
||||||
submit: function(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);
|
|
||||||
var edit = {
|
|
||||||
id: data.id,
|
|
||||||
};
|
|
||||||
edit[data.key] = parseFloat(data.value);
|
|
||||||
pandora.api.editClip(edit, function(result) {
|
|
||||||
self.$list.value(data.id, data.key, result.data[data.key]);
|
|
||||||
self.$list.value(data.id, 'duration', result.data.duration);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function getHeight() {
|
|
||||||
// 24 menu + 24 toolbar + 16 statusbar + 32 title + 32 margins
|
|
||||||
// + 1px to ge trid of scrollbar
|
|
||||||
return window.innerHeight - 128 -1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getWidth() {
|
function updateClips(clips) {
|
||||||
return window.innerWidth
|
Ox.Request.clearCache();
|
||||||
- pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1
|
edit.clips = clips;
|
||||||
- pandora.user.ui.embedSize - 1
|
edit.duration = 0;
|
||||||
- 32;
|
edit.clips.forEach(function(clip) {
|
||||||
}
|
clip.position = edit.duration;
|
||||||
|
edit.duration += clip.duration;
|
||||||
that.update = function() {
|
|
||||||
$text.options({
|
|
||||||
maxHeight: getHeight(),
|
|
||||||
width: getWidth()
|
|
||||||
});
|
});
|
||||||
return that;
|
that.options({
|
||||||
};
|
clips: clips,
|
||||||
|
smallTimelineURL: getSmallTimelineURL(),
|
||||||
|
video: getVideos()
|
||||||
|
});
|
||||||
|
updateSmallTimelineURL();
|
||||||
|
|
||||||
|
}
|
||||||
|
that.updateSmallTimelineURL = updateSmallTimelineURL;
|
||||||
|
function updateSmallTimelineURL() {
|
||||||
|
var fps = 25;
|
||||||
|
Ox.serialForEach(edit.clips, function(clip) {
|
||||||
|
var callback = Ox.last(arguments);
|
||||||
|
pandora.getLargeClipTimelineURL(clip.item, clip['in'], clip.out, ui.videoTimeline, function(url) {
|
||||||
|
var image = Ox.$('<img>')
|
||||||
|
.on({
|
||||||
|
load: function() {
|
||||||
|
smallTimelineContext.drawImage(image, Math.floor(clip.position * fps), 0);
|
||||||
|
that.options({smallTimelineURL: smallTimelineCanvas.toDataURL()});
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.attr({
|
||||||
|
src: url
|
||||||
|
})[0];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
pandora.ui.editPlayer = function(edit) {
|
|
||||||
|
|
||||||
var that = Ox.Element()
|
|
||||||
.css({
|
|
||||||
overflowY: 'auto'
|
|
||||||
});
|
|
||||||
|
|
||||||
self.$player = Ox.VideoPlayer({
|
|
||||||
controlsBottom: ['play', 'volume', 'previous', 'next', 'loop', 'scale', 'space', 'position'],
|
|
||||||
controlsTop: ['fullscreen', 'space', 'open'],
|
|
||||||
enableKeyboard: true,
|
|
||||||
enableMouse: true,
|
|
||||||
enablePosition: true,
|
|
||||||
enableTimeline: true,
|
|
||||||
height: getHeight(),
|
|
||||||
paused: true,
|
|
||||||
position: 0,
|
|
||||||
video: Ox.flatten(edit.clips.map(function(clip) {
|
|
||||||
return pandora.getClipVideos(clip);
|
|
||||||
})),
|
|
||||||
width: getWidth()
|
|
||||||
}).appendTo(that);
|
|
||||||
|
|
||||||
function getHeight() {
|
|
||||||
// 24 menu + 24 toolbar + 16 statusbar + 32 title + 32 margins
|
|
||||||
// + 1px to ge trid of scrollbar
|
|
||||||
return window.innerHeight - 128 -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getWidth() {
|
|
||||||
return window.innerWidth
|
|
||||||
- pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return that;
|
|
||||||
};
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue