edit panel: add updatePanel method
This commit is contained in:
rolux
parent
e7cbb9cf82
commit
5ead7f75f4
1 changed files with 249 additions and 238 deletions
|
|
@ -14,7 +14,7 @@ pandora.ui.editPanel = function() {
|
||||||
smallTimelineContext,
|
smallTimelineContext,
|
||||||
that = Ox.Element();
|
that = Ox.Element();
|
||||||
|
|
||||||
ui.edit ? renderEdit() : renderEdits();
|
ui.edit ? getEdit(renderEdit) : renderEdits();
|
||||||
|
|
||||||
function editsKey(key) {
|
function editsKey(key) {
|
||||||
return 'edits.' + ui.edit.replace(/\./g, '\\.') + '.' + key;
|
return 'edits.' + ui.edit.replace(/\./g, '\\.') + '.' + key;
|
||||||
|
|
@ -33,6 +33,19 @@ pandora.ui.editPanel = function() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
callback();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function getSmallTimelineURL() {
|
function getSmallTimelineURL() {
|
||||||
var fps = 25,
|
var fps = 25,
|
||||||
width = Math.floor(edit.duration * fps),
|
width = Math.floor(edit.duration * fps),
|
||||||
|
|
@ -53,247 +66,245 @@ pandora.ui.editPanel = function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderEdit() {
|
function renderEdit() {
|
||||||
pandora.api.getEdit({id: ui.edit}, function(result) {
|
that = pandora.$ui.editPanel = Ox.VideoEditPanel({
|
||||||
edit = result.data;
|
clips: Ox.clone(edit.clips),
|
||||||
// fixme: duration should come from backend
|
clipSize: listSize,
|
||||||
edit.duration = 0;
|
clipSort: ui.edits[ui.edit].sort,
|
||||||
edit.clips.forEach(function(clip) {
|
clipSortOptions: [/*...*/],
|
||||||
clip.position = edit.duration;
|
clipView: ui.edits[ui.edit].view,
|
||||||
edit.duration += clip.duration;
|
duration: edit.duration,
|
||||||
});
|
editable: edit.editable,
|
||||||
updateSmallTimelineURL();
|
enableSubtitles: ui.videoSubtitles,
|
||||||
pandora.$ui.mainPanel.replaceElement(1,
|
fullscreen: false,
|
||||||
that = pandora.$ui.editPanel = Ox.VideoEditPanel({
|
getClipImageURL: function(id, width, height) {
|
||||||
clips: Ox.clone(edit.clips),
|
var clip = Ox.getObjectById(edit.clips, id);
|
||||||
clipSize: listSize,
|
return '/' + clip.item + '/' + height + 'p' + clip['in'] + '.jpg';
|
||||||
clipSort: ui.edits[ui.edit].sort,
|
},
|
||||||
clipSortOptions: [/*...*/],
|
getLargeTimelineURL: function(type, i, callback) {
|
||||||
clipView: ui.edits[ui.edit].view,
|
pandora.getLargeEditTimelineURL(edit, type, i, callback);
|
||||||
duration: edit.duration,
|
},
|
||||||
editable: edit.editable,
|
height: pandora.$ui.appPanel.size(1),
|
||||||
enableSubtitles: ui.videoSubtitles,
|
'in': ui.edits[ui.edit]['in'],
|
||||||
fullscreen: false,
|
loop: ui.videoLoop,
|
||||||
getClipImageURL: function(id, width, height) {
|
muted: ui.videoMuted,
|
||||||
var clip = Ox.getObjectById(edit.clips, id);
|
out: ui.edits[ui.edit].out,
|
||||||
return '/' + clip.item + '/' + height + 'p' + clip['in'] + '.jpg';
|
position: ui.edits[ui.edit].position,
|
||||||
},
|
resolution: ui.videoResolution,
|
||||||
getLargeTimelineURL: function(type, i, callback) {
|
scaleToFill: ui.videoScale == 'fill',
|
||||||
pandora.getLargeEditTimelineURL(edit, type, i, callback);
|
// selected: ...
|
||||||
},
|
showClips: ui.showClips,
|
||||||
height: pandora.$ui.appPanel.size(1),
|
showTimeline: ui.showTimeline,
|
||||||
'in': ui.edits[ui.edit]['in'],
|
smallTimelineURL: getSmallTimelineURL(),
|
||||||
loop: ui.videoLoop,
|
sort: ui.edits[ui.edit].sort,
|
||||||
muted: ui.videoMuted,
|
sortOptions: [
|
||||||
out: ui.edits[ui.edit].out,
|
{id: 'index', title: Ox._('Sort Manually'), operator: '+'}
|
||||||
position: ui.edits[ui.edit].position,
|
].concat(
|
||||||
resolution: ui.videoResolution,
|
pandora.site.clipKeys.map(function(key) {
|
||||||
scaleToFill: ui.videoScale == 'fill',
|
return Ox.extend(Ox.clone(key), {
|
||||||
// selected: ...
|
title: Ox._(('Sort by Clip {0}'), [Ox._(key.title)])
|
||||||
showClips: ui.showClips,
|
|
||||||
showTimeline: ui.showTimeline,
|
|
||||||
smallTimelineURL: getSmallTimelineURL(),
|
|
||||||
sort: ui.edits[ui.edit].sort,
|
|
||||||
sortOptions: [
|
|
||||||
{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)])
|
|
||||||
});
|
|
||||||
})
|
|
||||||
),
|
|
||||||
timeline: ui.videoTimeline,
|
|
||||||
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) {
|
).concat(
|
||||||
var clips = serializeClips(data.ids);
|
pandora.site.sortKeys.map(function(key) {
|
||||||
pandora.clipboard.add(clips, 'clip');
|
return Ox.extend(Ox.clone(key), {
|
||||||
pandora.doHistory('cut', clips, ui.edit, function(result) {
|
title: Ox._('Sort by {0}', [Ox._(key.title)])
|
||||||
Ox.Request.clearCache('getEdit');
|
|
||||||
updateClips(result.data.clips);
|
|
||||||
});
|
});
|
||||||
},
|
})
|
||||||
'delete': function(data) {
|
),
|
||||||
var clips = serializeClips(data.ids);
|
timeline: ui.videoTimeline,
|
||||||
pandora.doHistory('delete', clips, ui.edit, function(result) {
|
video: getVideos(),
|
||||||
Ox.Request.clearCache('getEdit');
|
volume: ui.videoVolume,
|
||||||
updateClips(result.data.clips);
|
width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1
|
||||||
});
|
})
|
||||||
},
|
.bindEvent({
|
||||||
edit: function(data) {
|
copy: function(data) {
|
||||||
var args = {id: data.id},
|
pandora.clipboard.copy(serializeClips(data.ids), 'clip');
|
||||||
index = Ox.getIndexById(edit.clips, data.id),
|
},
|
||||||
clip = edit.clips[index];
|
copyadd: function(data) {
|
||||||
if (data.key == 'duration') {
|
pandora.clipboard.add(serializeClips(data.ids), 'clip');
|
||||||
data.key = 'out';
|
},
|
||||||
data.value += clip['in'];
|
cut: function(data) {
|
||||||
}
|
var clips = serializeClips(data.ids);
|
||||||
pandora.api.get({id: clip.item, keys: ['duration']}, function(result) {
|
pandora.clipboard.copy(clips, 'clip');
|
||||||
data.value = Math.min(data.value, result.data.duration);
|
pandora.doHistory('cut', clips, ui.edit, function(result) {
|
||||||
args[data.key] = data.value;
|
Ox.Request.clearCache('getEdit');
|
||||||
if (data.key == 'in' && data.value > clip.out) {
|
updateClips(result.data.clips);
|
||||||
args.out = args['in'];
|
});
|
||||||
} else if (data.key == 'out' && data.value < clip['in']) {
|
},
|
||||||
args['in'] = args.out;
|
cutadd: function(data) {
|
||||||
}
|
var clips = serializeClips(data.ids);
|
||||||
pandora.api.editClip(args, function(result) {
|
pandora.clipboard.add(clips, 'clip');
|
||||||
if (result.status.code == 200) {
|
pandora.doHistory('cut', clips, ui.edit, function(result) {
|
||||||
edit.clips[index] = result.data;
|
Ox.Request.clearCache('getEdit');
|
||||||
that.updateClip(data.id, result.data);
|
updateClips(result.data.clips);
|
||||||
updateVideos();
|
});
|
||||||
} else {
|
},
|
||||||
Ox.print('failed to edit clip', result);
|
'delete': function(data) {
|
||||||
}
|
var clips = serializeClips(data.ids);
|
||||||
});
|
pandora.doHistory('delete', clips, ui.edit, function(result) {
|
||||||
});
|
Ox.Request.clearCache('getEdit');
|
||||||
},
|
updateClips(result.data.clips);
|
||||||
join: function(data) {
|
});
|
||||||
Ox.print('JOIN', data);
|
},
|
||||||
},
|
edit: function(data) {
|
||||||
loop: function(data) {
|
var args = {id: data.id},
|
||||||
pandora.UI.set({videoLoop: data.loop});
|
index = Ox.getIndexById(edit.clips, data.id),
|
||||||
},
|
clip = edit.clips[index];
|
||||||
move: function(data) {
|
if (data.key == 'duration') {
|
||||||
pandora.api.orderClips({
|
data.key = 'out';
|
||||||
edit: edit.id,
|
data.value += clip['in'];
|
||||||
ids: data.ids
|
}
|
||||||
}, function(result) {
|
pandora.api.get({id: clip.item, keys: ['duration']}, function(result) {
|
||||||
Ox.Request.clearCache('getEdit');
|
data.value = Math.min(data.value, result.data.duration);
|
||||||
orderClips(data.ids);
|
args[data.key] = data.value;
|
||||||
});
|
if (data.key == 'in' && data.value > clip.out) {
|
||||||
},
|
args.out = args['in'];
|
||||||
muted: function(data) {
|
} else if (data.key == 'out' && data.value < clip['in']) {
|
||||||
pandora.UI.set({videoMuted: data.muted});
|
args['in'] = args.out;
|
||||||
},
|
|
||||||
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.concat(result.data.clips));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
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});
|
|
||||||
},
|
|
||||||
size: function(data) {
|
|
||||||
pandora.UI.set({clipSize: data.size});
|
|
||||||
},
|
|
||||||
sort: function(data) {
|
|
||||||
pandora.UI.set(editsKey('sort'), data);
|
|
||||||
var key = data[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 (data[0].operator == '-') {
|
|
||||||
edit.clips.reverse();
|
|
||||||
}
|
|
||||||
updateClips(edit.clips);
|
|
||||||
} else {
|
|
||||||
pandora.api.sortClips({
|
|
||||||
edit: edit.id,
|
|
||||||
sort: data
|
|
||||||
}, function(result) {
|
|
||||||
edit.clips.forEach(function(clip) {
|
|
||||||
clip['sort'] = result.data.clips.indexOf(clip.id);
|
|
||||||
});
|
|
||||||
edit.clips = Ox.sortBy(edit.clips, 'sort');
|
|
||||||
updateClips(edit.clips);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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) {
|
|
||||||
pandora.UI.set(editsKey('view'), data.view);
|
|
||||||
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});
|
|
||||||
}
|
}
|
||||||
})
|
pandora.api.editClip(args, function(result) {
|
||||||
);
|
if (result.status.code == 200) {
|
||||||
ui.edits[ui.edit].view == 'grid' && enableDragAndDrop();
|
edit.clips[index] = result.data;
|
||||||
|
that.updateClip(data.id, result.data);
|
||||||
|
updateVideos();
|
||||||
|
} else {
|
||||||
|
Ox.print('failed to edit clip', result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
join: function(data) {
|
||||||
|
Ox.print('JOIN', data);
|
||||||
|
},
|
||||||
|
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.concat(result.data.clips));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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});
|
||||||
|
},
|
||||||
|
size: function(data) {
|
||||||
|
pandora.UI.set({clipSize: data.size});
|
||||||
|
},
|
||||||
|
sort: function(data) {
|
||||||
|
pandora.UI.set(editsKey('sort'), data);
|
||||||
|
var key = data[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 (data[0].operator == '-') {
|
||||||
|
edit.clips.reverse();
|
||||||
|
}
|
||||||
|
updateClips(edit.clips);
|
||||||
|
} else {
|
||||||
|
pandora.api.sortClips({
|
||||||
|
edit: edit.id,
|
||||||
|
sort: data
|
||||||
|
}, function(result) {
|
||||||
|
edit.clips.forEach(function(clip) {
|
||||||
|
clip['sort'] = result.data.clips.indexOf(clip.id);
|
||||||
|
});
|
||||||
|
edit.clips = Ox.sortBy(edit.clips, 'sort');
|
||||||
|
updateClips(edit.clips);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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) {
|
||||||
|
pandora.UI.set(editsKey('view'), data.view);
|
||||||
|
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});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
that.updatePanel = function() {
|
||||||
|
getEdit(function() {
|
||||||
|
that.options({
|
||||||
|
clips: edit.clips,
|
||||||
|
duration: edit.duration
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
pandora.$ui.mainPanel.replaceElement(1, that);
|
||||||
|
updateSmallTimelineURL();
|
||||||
|
ui.edits[ui.edit].view == 'grid' && enableDragAndDrop();
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderEdits() {
|
function renderEdits() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue