From 5ead7f75f4f0dd273dd54746d356ef8bf20cba07 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 9 Aug 2013 13:45:51 +0000 Subject: [PATCH] edit panel: add updatePanel method --- static/js/editPanel.js | 487 +++++++++++++++++++++-------------------- 1 file changed, 249 insertions(+), 238 deletions(-) diff --git a/static/js/editPanel.js b/static/js/editPanel.js index 87318f99..b3ceca64 100644 --- a/static/js/editPanel.js +++ b/static/js/editPanel.js @@ -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() {