edit panel: add updatePanel method

This commit is contained in:
rolux 2013-08-09 13:45:51 +00:00
parent e7cbb9cf82
commit 5ead7f75f4

View file

@ -14,7 +14,7 @@ pandora.ui.editPanel = function() {
smallTimelineContext,
that = Ox.Element();
ui.edit ? renderEdit() : renderEdits();
ui.edit ? getEdit(renderEdit) : renderEdits();
function editsKey(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() {
var fps = 25,
width = Math.floor(edit.duration * fps),
@ -53,247 +66,245 @@ pandora.ui.editPanel = function() {
}
function renderEdit() {
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;
});
updateSmallTimelineURL();
pandora.$ui.mainPanel.replaceElement(1,
that = pandora.$ui.editPanel = Ox.VideoEditPanel({
clips: Ox.clone(edit.clips),
clipSize: listSize,
clipSort: ui.edits[ui.edit].sort,
clipSortOptions: [/*...*/],
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 '/' + 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'],
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: ...
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);
that = pandora.$ui.editPanel = Ox.VideoEditPanel({
clips: Ox.clone(edit.clips),
clipSize: listSize,
clipSort: ui.edits[ui.edit].sort,
clipSortOptions: [/*...*/],
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 '/' + 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'],
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: ...
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)])
});
},
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);
})
).concat(
pandora.site.sortKeys.map(function(key) {
return Ox.extend(Ox.clone(key), {
title: Ox._('Sort by {0}', [Ox._(key.title)])
});
},
'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) {
data.value = Math.min(data.value, result.data.duration);
args[data.key] = data.value;
if (data.key == 'in' && data.value > clip.out) {
args.out = args['in'];
} else if (data.key == 'out' && data.value < clip['in']) {
args['in'] = args.out;
}
pandora.api.editClip(args, function(result) {
if (result.status.code == 200) {
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});
})
),
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) {
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) {
data.value = Math.min(data.value, result.data.duration);
args[data.key] = data.value;
if (data.key == 'in' && data.value > clip.out) {
args.out = args['in'];
} else if (data.key == 'out' && data.value < clip['in']) {
args['in'] = args.out;
}
})
);
ui.edits[ui.edit].view == 'grid' && enableDragAndDrop();
pandora.api.editClip(args, function(result) {
if (result.status.code == 200) {
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() {