pandora/static/js/editPanel.js
2018-11-13 17:08:01 +00:00

696 lines
27 KiB
JavaScript

'use strict';
pandora.ui.editPanel = function(isEmbed) {
var ui = pandora.user.ui,
edit,
smallTimelineCanvas,
smallTimelineContext,
that = Ox.Element();
ui.edit ? getEdit(isEmbed ? renderEmbedEdit : renderEdit) : renderEdits();
function editsKey(key) {
return 'edits.' + ui.edit.replace(/\./g, '\\.') + '.' + key;
}
function enableDragAndDrop() {
pandora.enableDragAndDrop(
Ox.$elements[that.find('.OxIconList').data('oxid')],
edit.editable,
'edits',
function($list) {
return serializeClips($list.options('selected')).map(function(id) {
return id.split('/').slice(0, 2).join('/');
});
}
);
}
function getClips(ids) {
return ids.map(function(id) {
return Ox.getObjectById(edit.clips, id);
});
}
function getEdit(callback) {
pandora.api.getEdit({id: ui.edit}, function(result) {
edit = result.data;
sortClips(callback);
});
}
function getSmallTimelineCanvas() {
var fps = getSmallTimelineFPS(),
width = Math.ceil(edit.duration * fps),
height = fps == 1 ? 16 : 64;
return Ox.$('<canvas>').attr({width: width, height: height})[0];
}
function getSmallTimelineFPS() {
return Math.floor(edit.duration * 25) < 32768 ? 25 : 1;
}
function getSmallTimelineURL() {
smallTimelineCanvas = getSmallTimelineCanvas();
smallTimelineContext = smallTimelineCanvas.getContext('2d');
return smallTimelineCanvas.toDataURL();
}
function getVideos() {
var videos = [];
edit.clips.filter(function(clip) {
return clip.duration;
}).map(function(clip) {
pandora.site.video.resolutions.forEach(function(resolution) {
videos = videos.concat(pandora.getClipVideos(clip, resolution));
});
});
return videos;
}
function renderEdit() {
if (ui.section != 'edits' || ui.edit != edit.id) {
return;
}
that = pandora.$ui.editPanel = Ox.VideoEditPanel({
annotationsCalendarSize: ui.annotationsCalendarSize,
annotationsMapSize: ui.annotationsMapSize,
annotationsRange: ui.annotationsRange,
annotationsSort: ui.annotationsSort,
clickLink: pandora.clickLink,
clipRatio: pandora.site.video.previewRatio,
clips: Ox.clone(edit.clips),
clipSize: ui.clipSize + Ox.UI.SCROLLBAR_SIZE,
clipTooltip: 'clips <span class="OxBright">' + Ox.SYMBOLS.shift + 'C</span>',
clipView: ui.edits[ui.edit].view,
controlsTooltips: {
open: Ox._('Open in {0} View', [Ox._(Ox.getObjectById(
pandora.site.itemViews, pandora.user.ui.videoView
).title)])
},
duration: edit.duration,
editable: edit.type == 'static' && edit.editable,
enableSubtitles: ui.videoSubtitles,
formatTitle: function() {
return pandora.getItemTitle(Ox.last(arguments), true);
},
fullscreen: false,
getClipImageURL: function(id, width, height) {
var clip = Ox.getObjectById(edit.clips, id);
return pandora.getMediaURL('/' + clip.item + '/' + height + 'p' + clip['in'] + '.jpg');
},
getLargeTimelineURL: function(type, i, callback) {
pandora.getLargeEditTimelineURL(edit, type, i, callback);
},
height: pandora.$ui.appPanel.size(1),
'in': ui.edits[ui.edit]['in'],
layers: getLayers(edit.clips),
loop: ui.videoLoop,
muted: ui.videoMuted,
out: ui.edits[ui.edit].out,
position: ui.edits[ui.edit].position,
resolution: ui.videoResolution,
scaleToFill: ui.videoScale == 'fill',
selected: ui.edits[ui.edit].selection,
showAnnotationsCalendar: ui.showAnnotationsCalendar,
showAnnotationsMap: ui.showAnnotationsMap,
showClips: ui.showClips,
showLayers: ui.showLayers,
showTimeline: ui.showTimeline,
showUsers: pandora.site.annotations.showUsers,
smallTimelineURL: getSmallTimelineURL(),
sort: ui.edits[ui.edit].sort,
sortOptions: (
edit.type == 'static'
? [{id: '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)])
});
})
),
subtitles: getSubtitles(edit.clips),
subtitlesOffset: ui.videoSubtitlesOffset,
timeline: ui.videoTimeline,
timelineTooltip: Ox._('timeline') + ' <span class="OxBright">' + Ox.SYMBOLS.shift + 'T</span>',
video: getVideos(),
volume: ui.videoVolume,
width: Ox.$document.width() - pandora.$ui.mainPanel.size(0) - 1
})
.bindEvent({
clipSize: function(data) {
pandora.UI.set({clipSize: data.size - Ox.UI.SCROLLBAR_SIZE});
},
copy: function(data) {
var ids = Ox.sort(data.ids, function(id) {
return Ox.getObjectById(edit.clips, id).index;
});
pandora.clipboard.copy(serializeClips(ids), 'clip');
},
copyadd: function(data) {
var ids = Ox.sort(data.ids, function(id) {
return Ox.getObjectById(edit.clips, id).index;
});
pandora.clipboard.add(serializeClips(ids), 'clip');
},
cut: function(data) {
var ids = Ox.sort(data.ids, function(id) {
return Ox.getObjectById(edit.clips, id).index;
});
var clips = serializeClips(ids);
pandora.clipboard.copy(clips, 'clip');
pandora.doHistory('cut', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
Ox.Request.clearCache('sortClips');
updateClips(result.data.clips);
});
},
cutadd: function(data) {
var ids = Ox.sort(data.ids, function(id) {
return Ox.getObjectById(edit.clips, id).index;
});
var clips = serializeClips(ids);
pandora.clipboard.add(clips, 'clip');
pandora.doHistory('cut', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
Ox.Request.clearCache('sortClips');
updateClips(result.data.clips);
});
},
'delete': function(data) {
var ids = Ox.sort(data.ids, function(id) {
return Ox.getObjectById(edit.clips, id).index;
});
var clips = serializeClips(ids);
pandora.doHistory('delete', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
Ox.Request.clearCache('sortClips');
edit.clips = result.data.clips;
sortClips(updateClips);
});
},
edit: function(data) {
var args = {id: data.id},
index = Ox.getIndexById(edit.clips, data.id),
clip = edit.clips[index];
if (data.key == 'duration') {
data.key = 'out';
data.value += clip['in'];
}
pandora.api.get({id: clip.item, keys: ['duration']}, function(result) {
var clips;
//fixme include in history...
if (data.key == 'volume') {
pandora.api.editClip({
id: data.id,
volume: data.value
}, function(result) {
edit.clips[Ox.getIndexById(edit.clips, data.id)] = result.data;
Ox.Request.clearCache('sortClips');
sortClips(updateClips);
});
return;
}
if (data.key == 'out') {
data.value = Math.min(data.value, result.data.duration);
}
clips = serializeClips([data.id]).concat(serializeClips([{
id: data.id,
'in': data.key == 'in' ? data.value : clip['in'],
item: clip.item,
out: data.key == 'out' ? data.value : clip.out
}]));
pandora.doHistory('edit', clips, ui.edit, function(result) {
edit.clips[Ox.getIndexById(edit.clips, data.id)] = result.data;
Ox.Request.clearCache('sortClips');
sortClips(updateClips);
});
});
},
join: function(data) {
var clips = [serializeClips(data.ids), serializeClips(data.join)],
index = pandora.$ui.editPanel.getPasteIndex() - 1;
pandora.doHistory('join', clips, ui.edit, index, function(result) {
edit.clips = edit.clips.filter(function(clip) {
return !Ox.contains(data.ids, clip.id);
}).concat(result.data.clips);
sortClips(updateClips);
});
},
loop: function(data) {
pandora.UI.set({videoLoop: data.loop});
},
move: function(data) {
pandora.api.orderClips({
edit: edit.id,
ids: data.ids
}, function(result) {
Ox.Request.clearCache('getEdit');
Ox.Request.clearCache('sortClips');
orderClips(data.ids);
});
},
muted: function(data) {
pandora.UI.set({videoMuted: data.muted});
},
open: function(data) {
pandora.UI.set(editsKey('clip'), data.ids[0]);
},
openlink: function(data) {
that.options({paused: true});
pandora.UI.set('videoPoints.' + data.item, data.annotation ? {
annotation: data.annotation.split('/')[1],
'in': data['in'],
out: data.out,
position: data.position
} : {
'in': data['in'],
out: data.out,
position: data.position
});
pandora.UI.set({
section: 'items',
item: data.item || data.annotation.split('/')[0],
itemView: ui.videoView,
});
},
paste: function() {
var clips = pandora.clipboard.paste('clip');
clips.length && pandora.doHistory('paste', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
Ox.Request.clearCache('sortClips');
updateClips(edit.clips.map(function(clip) {
if (clip.index >= result.data.clips[0].index) {
clip.index += result.data.clips.length
}
return clip;
}).concat(result.data.clips));
that.options({
selected: result.data.clips.map(function(clip) {
return clip.id;
})
});
});
},
playing: function(data) {
var set = {};
set[editsKey('clip')] = '';
set[editsKey('position')] = data.position;
pandora.UI.set(set);
},
position: function(data) {
var set = {};
set[editsKey('clip')] = '';
set[editsKey('position')] = data.position;
pandora.UI.set(set);
},
resize: function(data) {
// sidebar resize
that.options({width: data.size});
},
resizeclips: function(data) {
pandora.UI.set({clipsSize: data.clipsSize});
},
resolution: function(data) {
pandora.UI.set({videoResolution: data.resolution});
},
scale: function(data) {
pandora.UI.set({videoScale: data.scale});
},
select: function(data) {
pandora.UI.set({editSelection: data.ids});
},
selectannotation: function(data) {
that.options({position: data['in']})
},
sort: function(data) {
pandora.UI.set({editSort: data});
sortClips(updateClips);
},
split: function(data) {
var clips = [serializeClips(data.ids), serializeClips(data.split)],
index = pandora.$ui.editPanel.getPasteIndex() - 1;
pandora.doHistory('split', clips, ui.edit, index, function(result) {
updateClips(edit.clips.filter(function(clip) {
return !Ox.contains(data.ids, clip.id);
}).map(function(clip) {
if (clip.index >= result.data.clips[0].index) {
clip.index += result.data.clips.length
}
return clip;
}).concat(result.data.clips));
//fixme: what resets the position here?
var position = that.options('position');
that.options({
selected: result.data.clips.map(function(clip) { return clip.id}),
});
setTimeout(function() {
that.options('position', position);
}, 500);
});
},
subtitles: function(data) {
pandora.UI.set({videoSubtitles: data.subtitles});
},
timeline: function(data) {
updateSmallTimelineURL();
pandora.UI.set({videoTimeline: data.timeline});
},
toggleclips: function(data) {
pandora.UI.set({showClips: data.showClips});
},
toggletimeline: function(data) {
pandora.UI.set({showTimeline: data.showTimeline});
},
view: function(data) {
pandora.UI.set({editView: data.view});
data.view == 'grid' && enableDragAndDrop();
},
volume: function(data) {
pandora.UI.set({videoVolume: data.volume});
},
pandora_editview: function(data) {
that.options({clipView: data.value});
},
pandora_editselection: function(data) {
that.options({selected: data.value});
},
pandora_showclips: function(data) {
that.options({showClips: data.value});
},
pandora_showtimeline: function(data) {
that.options({showTimeline: data.value});
},
pandora_videotimeline: function(data) {
that.options({timeline: data.value});
}
});
that.updatePanel = function(callback) {
Ox.Request.clearCache('getEdit');
Ox.Request.clearCache('sortClips');
getEdit(function() {
updateClips();
callback && callback();
});
};
// FIXME: replaceElement resets inner collapsed state
var right = that.css('right');
pandora.$ui.mainPanel.replaceElement(1, that);
that.css('right', right);
updateSmallTimelineURL();
ui.edits[ui.edit].view == 'grid' && enableDragAndDrop();
that.gainFocus();
}
function renderEdits() {
that.css({
'overflow-y': 'auto'
});
Ox.Bar({size: 24}).appendTo(that);
var $content = Ox.Element()
.css({padding: '16px'})
.appendTo(that),
isEditable = pandora.hasCapability('canEditSitePages');
Ox.EditableContent({
editable: false,
value: Ox._('{0} Edits', [pandora.site.site.name]),
})
.css({
height: '32px',
fontSize: '18px',
})
.appendTo($content);
Ox.Element()
.css({height: '16px'})
.appendTo($content);
pandora.api.getPage({name: 'edits'}, function(result) {
Ox.EditableContent({
clickLink: pandora.clickLink,
editable: isEditable,
tooltip: isEditable ? pandora.getEditTooltip() : '',
type: 'textarea',
placeholder: isEditable ? Ox._('Doubleclick to insert text') : '',
value: result.data.text
})
.css({
width: '100%'
})
.bindEvent({
submit: function(data) {
Ox.Request.clearCache('getPage');
pandora.api.editPage({
name: 'edits',
text: data.value
});
}
})
.appendTo($content);
});
}
function renderEmbedEdit() {
that = Ox.VideoPlayer({
clickLink: pandora.clickLink,
clipRatio: pandora.site.video.previewRatio,
clips: Ox.clone(edit.clips),
clipTooltip: 'clips <span class="OxBright">' + Ox.SYMBOLS.shift + 'C</span>',
clipView: ui.edits[ui.edit].view,
controlsBottom: [
'play', 'volume', 'scale', 'timeline', 'position', 'settings'
],
controlsTooltips: {
close: Ox._('Close'),
open: Ox._('Watch on {0}', [pandora.site.site.name])
},
controlsTop: [
Ox.Fullscreen.available ? 'fullscreen' : 'space16'
].concat(
['chapterTitle', 'open']
),
chapters: edit.clips.map(function(clip) {
return {
position: clip.position,
title: pandora.getItemTitle(clip)
};
}),
duration: edit.duration,
enableFullscreen: Ox.Fullscreen.available,
enableKeyboard: true,
enableMouse: true,
enablePosition: true,
enableSubtitles: ui.videoSubtitles,
enableTimeline: true,
enableVolume: true,
height: Ox.$document.height(),
paused: true,
showIconOnLoad: true,
subtitles: getSubtitles(edit.clips),
subtitlesDefaultTrack: Ox.getLanguageNameByCode(pandora.site.language),
subtitlesTrack: Ox.getLanguageNameByCode(pandora.site.language),
timeline: getSmallTimelineURL(),
video: getVideos(),
volume: ui.videoVolume,
width: Ox.$document.width()
}).bindEvent({
fullscreen: function(data) {
Ox.Fullscreen.toggle();
setTimeout(that.resizePanel, 100);
},
open: function(data) {
that.options({paused: true});
var clip = Ox.last(edit.clips.filter(function(clip) {
return clip.position <= that.options('position');
})),
position = clip['in'] + that.options('position') - clip['position'],
url = document.location.protocol + '//'
+ document.location.hostname + '/'
+ clip.item + '/'
+ Ox.formatDuration(position) + ','
+ Ox.formatDuration(clip['in']) + ','
+ Ox.formatDuration(clip.out);
window.open(url, '_blank');
},
});
pandora.$ui.embedPanel.replaceWith(that);
pandora.$ui.embedPanel = that;
updateSmallTimelineURL();
Ox.$parent.postMessage('loaded');
}
function orderClips(ids) {
edit.clips.forEach(function(clip) {
clip.index = ids.indexOf(clip.id);
});
updateClips(Ox.sortBy(edit.clips, 'index'));
}
function getLayers(clips) {
var layers = [];
pandora.site.layers.forEach(function(layer, i) {
layers[i] = Ox.extend({}, layer, {
title: Ox._(layer.title),
item: Ox._(layer.item),
items: Ox.flatten(clips.map(function(clip) {
return clip.layers[layer.id].map(function(annotation) {
var a = Ox.clone(annotation);
a['id'] = clip['id'] + '/' + a['id'];
a['in'] = Math.max(
clip['position'],
a['in'] - clip['in'] + clip['position']
);
a.out = Math.min(
clip['position'] + clip['duration'],
a.out - clip['in'] + clip['position']
);
return a;
});
})),
});
});
return layers;
}
function getSubtitles(clips) {
var subtitles = [],
subtitlesLayer = pandora.getSubtitlesLayer();
subtitlesLayer && clips.map(function(clip) {
if (clip.layers[subtitlesLayer]) {
clip.layers[subtitlesLayer].forEach(function(subtitle) {
subtitles.push({
id: subtitle.id,
'in': Math.max(
clip['position'],
subtitle['in'] - clip['in'] + clip['position']
),
out: Math.min(
clip['position'] + clip['duration'],
subtitle.out - clip['in'] + clip['position']
),
text: subtitle.value.replace(/\n/g, ' ').replace(/<br\/?>/g, '\n')
});
});
}
});
return subtitles;
}
function serializeClips(clips) {
// can be ids or clips
return clips.map(function(clip) {
if (Ox.isString(clip)) {
clip = Ox.getObjectById(edit.clips, clip);
}
return (
clip.annotation || clip.item + '/' + clip['in'] + '-' + clip.out
) + '/' + (clip.id || '');
});
}
function sortClips(callback) {
var sort = pandora.user.ui.editSort,
key = sort[0].key,
index;
if (key == 'position') {
key = 'in';
}
if ([
'id', 'index', 'in', 'out', 'duration',
'title', 'director', 'year', 'videoRatio'
].indexOf(key) > -1) {
sortBy(key);
index = 0;
edit.clips.forEach(function(clip) {
clip.sort = index++;
if (sort[0].operator == '-') {
clip.sort = -clip.sort;
}
});
updateDuration();
callback(edit.clips);
} else {
pandora.api.sortClips({
edit: edit.id,
sort: sort
}, function(result) {
edit.clips.forEach(function(clip) {
clip.sort = result.data.clips.indexOf(clip.id);
if (sort[0].operator == '-') {
clip.sort = -clip.sort;
}
});
sortBy('sort');
updateDuration();
callback(edit.clips);
});
}
function sortBy(key) {
edit.clips = Ox.sortBy(edit.clips, sort[0].operator + key);
}
}
function updateDuration() {
edit.duration = 0;
edit.clips.forEach(function(clip) {
clip.position = edit.duration;
edit.duration += clip.duration;
});
}
function updateClips(clips) {
clips = clips || edit.clips;
edit.clips = clips;
updateDuration();
that.options({
clips: Ox.clone(edit.clips),
duration: edit.duration,
layers: getLayers(edit.clips),
smallTimelineURL: getSmallTimelineURL(),
subtitles: getSubtitles(edit.clips),
video: getVideos()
});
updateSmallTimelineURL();
}
function updateSmallTimelineURL() {
var canvas = getSmallTimelineCanvas(),
context = canvas.getContext('2d'),
fps = getSmallTimelineFPS(),
timelineIteration = self.timelineIteration = Ox.uid();
Ox.serialForEach(edit.clips, function(clip) {
var callback = Ox.last(arguments);
pandora[
fps == 1 ? 'getSmallClipTimelineURL' : 'getLargeClipTimelineURL'
](clip.item, clip['in'], clip.out, ui.videoTimeline, function(url) {
var image = Ox.$('<img>')
.on({
load: function() {
if (timelineIteration == self.timelineIteration) {
context.drawImage(image, Math.floor(clip.position * fps), 0);
that.options(isEmbed ? 'timeline' : 'smallTimelineURL',
canvas.toDataURL());
callback();
} else {
callback(false);
}
}
})
.attr({
src: url
})[0];
});
});
}
return that;
};