pandora/static/js/editPanel.js

531 lines
20 KiB
JavaScript
Raw Normal View History

'use strict';
pandora.ui.editPanel = function() {
2013-07-13 23:08:01 +00:00
var ui = pandora.user.ui,
edit,
listSizes = [
144 + Ox.UI.SCROLLBAR_SIZE,
280 + Ox.UI.SCROLLBAR_SIZE,
416 + Ox.UI.SCROLLBAR_SIZE
],
listSize = listSizes[ui.clipColumns],
smallTimelineCanvas,
smallTimelineContext,
that = Ox.Element();
2013-08-09 13:45:51 +00:00
ui.edit ? getEdit(renderEdit) : renderEdits();
2013-07-13 23:08:01 +00:00
2013-08-07 14:32:17 +00:00
function editsKey(key) {
return 'edits.' + ui.edit.replace(/\./g, '\\.') + '.' + key;
2013-07-13 23:08:01 +00:00
}
function enableDragAndDrop() {
pandora.enableDragAndDrop(
Ox.UI.elements[that.find('.OxIconList').data('oxid')],
edit.editable
);
}
2013-08-08 17:04:21 +00:00
function getClips(ids) {
return ids.map(function(id) {
2013-08-09 12:56:07 +00:00
return Ox.getObjectById(edit.clips, id);
2013-08-08 17:04:21 +00:00
});
}
2013-08-09 13:45:51 +00:00
function getEdit(callback) {
pandora.api.getEdit({id: ui.edit}, function(result) {
edit = result.data;
// fixme: duration should come from backend
edit.duration = 0;
edit.clips.forEach(function(clip) {
clip.position = edit.duration;
edit.duration += clip.duration;
});
2014-02-06 10:28:35 +00:00
sortClips(callback);
2013-08-09 13:45:51 +00:00
});
}
2014-02-02 13:38:41 +00:00
// FIXME: not used below!
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;
}
2013-07-13 23:08:01 +00:00
function getSmallTimelineURL() {
var fps = getSmallTimelineFPS(),
width = Math.ceil(edit.duration * fps),
height = fps == 1 ? 16 : 64;
2013-07-13 23:08:01 +00:00
smallTimelineCanvas = Ox.$('<canvas>').attr({width: width, height: height})[0];
smallTimelineContext = smallTimelineCanvas.getContext('2d');
return smallTimelineCanvas.toDataURL();
}
function getVideos() {
var videos = {};
pandora.site.video.resolutions.forEach(function(resolution) {
videos[resolution] = Ox.flatten(edit.clips.map(function(clip) {
return pandora.getClipVideos(clip, resolution);
}));
});
return videos;
2013-07-13 23:08:01 +00:00
}
2013-07-14 18:57:31 +00:00
function renderEdit() {
2013-08-09 13:45:51 +00:00
that = pandora.$ui.editPanel = Ox.VideoEditPanel({
2014-01-22 18:24:21 +00:00
annotationsCalendarSize: ui.annotationsCalendarSize,
annotationsFont: ui.annotationsFont,
annotationsMapSize: ui.annotationsMapSize,
annotationsRange: ui.annotationsRange,
annotationsSize: ui.annotationsSize,
annotationsSort: ui.annotationsSort,
clickLink: pandora.clickLink,
2014-02-06 10:28:35 +00:00
clipRatio: pandora.site.video.previewRatio,
2013-08-09 13:45:51 +00:00
clips: Ox.clone(edit.clips),
clipSize: listSize,
2013-08-12 12:32:21 +00:00
clipTooltip: 'clips <span class="OxBright">' + Ox.SYMBOLS.SHIFT + 'C</span>',
2013-08-09 13:45:51 +00:00
clipView: ui.edits[ui.edit].view,
duration: edit.duration,
editable: edit.editable,
enableSubtitles: ui.videoSubtitles,
fullscreen: false,
getClipImageURL: function(id, width, height) {
var clip = Ox.getObjectById(edit.clips, id);
return pandora.getMediaURL('/' + clip.item + '/' + height + 'p' + clip['in'] + '.jpg');
2013-08-09 13:45:51 +00:00
},
getLargeTimelineURL: function(type, i, callback) {
pandora.getLargeEditTimelineURL(edit, type, i, callback);
},
height: pandora.$ui.appPanel.size(1),
'in': ui.edits[ui.edit]['in'],
2014-01-22 18:24:21 +00:00
layers: getLayers(edit.clips),
2013-08-09 13:45:51 +00:00
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',
2013-08-11 07:43:53 +00:00
selected: ui.edits[ui.edit].selection,
2014-01-22 18:24:21 +00:00
showAnnotationsCalendar: ui.showAnnotationsCalendar,
showAnnotationsMap: ui.showAnnotationsMap,
2013-08-09 13:45:51 +00:00
showClips: ui.showClips,
2014-01-22 18:24:21 +00:00
showLayers: ui.showLayers,
2013-08-09 13:45:51 +00:00
showTimeline: ui.showTimeline,
2014-01-22 18:24:21 +00:00
showUsers: pandora.site.annotations.showUsers,
2013-08-09 13:45:51 +00:00
smallTimelineURL: getSmallTimelineURL(),
sort: ui.edits[ui.edit].sort,
2014-02-06 14:53:53 +00:00
sortOptions: (
edit.type == 'static'
? [{id: 'index', title: Ox._('Sort Manually'), operator: '+'}]
: []
)
2014-02-06 10:28:35 +00:00
.concat(
2013-08-09 13:45:51 +00:00
pandora.site.clipKeys.map(function(key) {
return Ox.extend(Ox.clone(key), {
title: Ox._(('Sort by Clip {0}'), [Ox._(key.title)])
2013-07-13 23:08:01 +00:00
});
2013-08-09 13:45:51 +00:00
})
).concat(
pandora.site.sortKeys.map(function(key) {
return Ox.extend(Ox.clone(key), {
title: Ox._('Sort by {0}', [Ox._(key.title)])
2013-08-09 12:56:07 +00:00
});
2013-08-09 13:45:51 +00:00
})
),
2014-02-05 07:35:30 +00:00
subtitles: getSubtitles(edit.clips),
2013-08-09 13:45:51 +00:00
timeline: ui.videoTimeline,
2013-08-12 12:32:21 +00:00
timelineTooltip: 'timeline <span class="OxBright">' + Ox.SYMBOLS.SHIFT + 'T</span>',
2013-08-09 13:45:51 +00:00
video: getVideos(),
volume: ui.videoVolume,
width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1
})
.bindEvent({
copy: function(data) {
pandora.clipboard.copy(serializeClips(data.ids), 'clip');
},
copyadd: function(data) {
pandora.clipboard.add(serializeClips(data.ids), 'clip');
},
cut: function(data) {
var clips = serializeClips(data.ids);
pandora.clipboard.copy(clips, 'clip');
pandora.doHistory('cut', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
updateClips(result.data.clips);
});
},
cutadd: function(data) {
var clips = serializeClips(data.ids);
pandora.clipboard.add(clips, 'clip');
pandora.doHistory('cut', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
updateClips(result.data.clips);
});
},
'delete': function(data) {
var clips = serializeClips(data.ids);
pandora.doHistory('delete', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
updateClips(result.data.clips);
});
},
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;
if (data.key == 'out') {
data.value = Math.min(data.value, result.data.duration);
2013-08-09 13:45:51 +00:00
}
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) {
2013-08-09 13:45:51 +00:00
if (result.status.code == 200) {
edit.clips[index] = result.data;
that.updateClip(data.id, result.data);
updateVideos();
2013-07-14 14:59:04 +00:00
} else {
2013-08-09 13:45:51 +00:00
Ox.print('failed to edit clip', result);
}
2013-08-09 13:45:51 +00:00
});
});
},
join: function(data) {
2013-08-10 11:12:09 +00:00
var clips = [serializeClips(data.ids), serializeClips(data.join)];
pandora.doHistory('join', clips, ui.edit, function(result) {
updateClips(edit.clips.filter(function(clip) {
return !Ox.contains(data.ids, clip.id);
}).concat(result.data.clips));
});
2013-08-09 13:45:51 +00:00
},
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');
orderClips(data.ids);
});
},
muted: function(data) {
pandora.UI.set({videoMuted: data.muted});
},
open: function(data) {
pandora.UI.set(editsKey('clip'), data.ids[0]);
},
paste: function() {
var clips = pandora.clipboard.paste();
pandora.doHistory('paste', clips, ui.edit, function(result) {
Ox.Request.clearCache('getEdit');
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));
2013-08-09 13:45:51 +00:00
});
},
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});
},
2013-08-11 07:43:53 +00:00
select: function(data) {
2014-02-06 10:28:35 +00:00
pandora.UI.set({editSelection: data.ids});
2013-08-11 07:43:53 +00:00
},
2013-08-09 13:45:51 +00:00
size: function(data) {
pandora.UI.set({clipSize: data.size});
},
sort: function(data) {
2014-02-06 10:28:35 +00:00
pandora.UI.set({editSort: data});
sortClips(updateClips);
2013-08-09 13:45:51 +00:00
},
split: function(data) {
var clips = [serializeClips(data.ids), serializeClips(data.split)];
pandora.doHistory('split', clips, ui.edit, function(result) {
updateClips(edit.clips.filter(function(clip) {
return !Ox.contains(data.ids, clip.id);
}).concat(result.data.clips));
});
},
subtitles: function(data) {
pandora.UI.set({videoSubtitles: data.subtitles});
},
timeline: function(data) {
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) {
2014-02-06 10:28:35 +00:00
pandora.UI.set({editView: data.view});
2013-08-09 13:45:51 +00:00
data.view == 'grid' && enableDragAndDrop();
},
volume: function(data) {
pandora.UI.set({videoVolume: data.volume});
},
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});
}
});
2013-08-09 13:45:51 +00:00
that.updatePanel = function() {
2013-08-09 14:36:30 +00:00
Ox.Request.clearCache('getEdit');
getEdit(updateClips);
2013-08-09 13:45:51 +00:00
};
pandora.$ui.mainPanel.replaceElement(1, that);
updateSmallTimelineURL();
ui.edits[ui.edit].view == 'grid' && enableDragAndDrop();
}
2013-07-14 18:57:31 +00:00
function renderEdits() {
2013-07-14 17:22:26 +00:00
that = Ox.IconList({
borderRadius: 16,
defaultRatio: 1,
draggable: true,
item: function(data, sort, size) {
size = size || 128;
var ui = pandora.user.ui,
url = pandora.getMediaURL('/edit/' + data.id + '/icon' + size + '.jpg?' + data.modified),
2013-07-14 17:22:26 +00:00
info = Ox.formatDuration(data.duration);
return {
height: size,
id: data.id,
title: data.name,
info: info,
url: url,
width: size,
2013-08-09 12:56:07 +00:00
};
2013-07-14 17:22:26 +00:00
},
items: function(data, callback) {
pandora.api.findEdits(data, callback);
return Ox.clone(data, true);
},
keys: ['id', 'modified', 'name', 'duration'],
size: 128,
sort: [{key: 'id', operator: '+'}],
unique: 'id'
})
.addClass('OxMedia')
.bindEvent({
open: function(data) {
pandora.UI.set('edit', data.ids[0]);
}
});
}
function orderClips(ids) {
edit.clips.forEach(function(clip) {
clip.index = ids.indexOf(clip.id);
});
edit.clips = Ox.sortBy(edit.clips, 'index');
2013-07-14 11:04:13 +00:00
updateVideos();
}
2014-01-22 18:24:21 +00:00
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);
2014-01-22 18:32:11 +00:00
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']
);
2014-01-22 18:24:21 +00:00
return a;
});
})),
});
});
return layers;
}
2014-02-05 07:35:30 +00:00
function getSubtitles(clips) {
var subtitles = [],
subtitlesLayer = pandora.site.layers.filter(function(layer) {
return layer.isSubtitles;
}).map(function(layer) {
return layer.id;
})[0];
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;
}
2013-08-09 12:56:07 +00:00
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 || '');
});
}
2014-02-06 10:28:35 +00:00
function sortClips(callback) {
var sort = pandora.user.ui.editSort;
var key = sort[0].key;
if (key == 'position') {
key = 'in';
}
if ([
'id', 'index', 'in', 'out', 'duration',
'title', 'director', 'year', 'videoRatio'
].indexOf(key) > -1) {
edit.clips = Ox.sortBy(edit.clips, key);
if (sort[0].operator == '-') {
edit.clips.reverse();
}
2014-02-06 15:14:02 +00:00
updateDuration();
2014-02-06 10:28:35 +00:00
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);
});
edit.clips = Ox.sortBy(edit.clips, 'sort');
2014-02-06 15:14:02 +00:00
updateDuration();
2014-02-06 10:28:35 +00:00
callback(edit.clips);
});
}
}
2014-02-06 15:14:02 +00:00
function updateDuration() {
2013-07-13 23:08:01 +00:00
edit.duration = 0;
edit.clips.forEach(function(clip) {
clip.position = edit.duration;
edit.duration += clip.duration;
});
2014-02-06 15:14:02 +00:00
}
function updateClips(clips) {
clips = clips || edit.clips;
edit.clips = clips;
updateDuration();
2013-07-13 23:08:01 +00:00
that.options({
clips: Ox.clone(edit.clips),
2013-08-09 14:36:30 +00:00
duration: edit.duration,
2014-01-22 18:24:21 +00:00
layers: getLayers(edit.clips),
2013-07-13 23:08:01 +00:00
smallTimelineURL: getSmallTimelineURL(),
2014-02-05 07:35:30 +00:00
subtitles: getSubtitles(edit.clips),
2013-07-13 23:08:01 +00:00
video: getVideos()
});
2013-07-13 23:08:01 +00:00
updateSmallTimelineURL();
}
2013-07-13 23:08:01 +00:00
function updateSmallTimelineURL() {
var canvas = getSmallTimelineCanvas(),
context = canvas.getContext('2d'),
fps = getSmallTimelineFPS();
2013-07-13 23:08:01 +00:00
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) {
2013-07-13 23:08:01 +00:00
var image = Ox.$('<img>')
.on({
load: function() {
context.drawImage(image, Math.floor(clip.position * fps), 0);
that.options({smallTimelineURL: canvas.toDataURL()});
2013-07-13 23:08:01 +00:00
callback();
}
})
.attr({
src: url
})[0];
});
});
}
2013-07-12 14:44:33 +00:00
2013-07-14 18:57:31 +00:00
function updateVideos() {
edit.duration = 0;
edit.clips.forEach(function(clip) {
clip.position = edit.duration;
edit.duration += clip.duration;
});
that.options({
2013-08-09 14:36:30 +00:00
duration: edit.duration,
2013-07-14 18:57:31 +00:00
smallTimelineURL: getSmallTimelineURL(),
video: getVideos()
});
updateSmallTimelineURL();
}
return that;
2013-07-13 23:08:01 +00:00
};