From fcd12af35ca789e5cdd7d21baae9dd8c3fd62fc3 Mon Sep 17 00:00:00 2001 From: j <0x006A@0x2620.org> Date: Thu, 20 Oct 2011 11:05:48 +0200 Subject: [PATCH] only load layers for video/timeline view --- pandora/item/views.py | 2 +- static/js/pandora/ui/item.js | 304 ++++++++++++++++++----------------- 2 files changed, 156 insertions(+), 150 deletions(-) diff --git a/pandora/item/views.py b/pandora/item/views.py index 671fbe5d8..a51443c51 100644 --- a/pandora/item/views.py +++ b/pandora/item/views.py @@ -391,7 +391,7 @@ def get(request): info = item.get_json(data['keys']) if not data['keys'] or 'stream' in data['keys']: info['stream'] = item.get_stream() - if not data['keys'] or 'layers' in data['keys']: + if data['keys'] and 'layers' in data['keys']: info['layers'] = item.get_layers(request.user) if data['keys'] and 'files' in data['keys']: info['files'] = item.get_files(request.user) diff --git a/static/js/pandora/ui/item.js b/static/js/pandora/ui/item.js index ad7feba32..98d969629 100644 --- a/static/js/pandora/ui/item.js +++ b/static/js/pandora/ui/item.js @@ -105,166 +105,172 @@ pandora.ui.item = function() { // fixme: duplicated var layers = [], video = {}; - pandora.site.layers.forEach(function(layer, i) { - layers[i] = Ox.extend({}, layer, {items: result.data.layers[layer.id]}); - }); - pandora.site.video.resolutions.forEach(function(resolution) { - video[resolution] = Ox.range(result.data.parts).map(function(i) { - return '/' + pandora.user.ui.item + '/' - + resolution + 'p' + (i + 1) + '.' + pandora.user.videoFormat; + pandora.api.get({id: pandora.user.ui.item, keys: ['layers']}, function(r) { + pandora.site.layers.forEach(function(layer, i) { + layers[i] = Ox.extend({}, layer, {items: r.data.layers[layer.id]}); }); + pandora.site.video.resolutions.forEach(function(resolution) { + video[resolution] = Ox.range(result.data.parts).map(function(i) { + return '/' + pandora.user.ui.item + '/' + + resolution + 'p' + (i + 1) + '.' + pandora.user.videoFormat; + }); + }); + // + pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.player = Ox.VideoPanelPlayer({ + annotationsSize: pandora.user.ui.annotationsSize, + cuts: result.data.cuts || [], + duration: result.data.duration, + getTimelineImageURL: function(i) { + return '/' + pandora.user.ui.item + '/timeline64p' + i + '.png'; + }, + height: pandora.$ui.contentPanel.size(1), + 'in': pandora.user.ui.videoPoints[pandora.user.ui.item]['in'], + muted: pandora.user.ui.videoMuted, + out: pandora.user.ui.videoPoints[pandora.user.ui.item].out, + position: pandora.user.ui.videoPoints[pandora.user.ui.item].position, + scaleToFill: pandora.user.ui.videoScale == 'fill', + showAnnotations: pandora.user.ui.showAnnotations, + showControls: pandora.user.ui.showControls, + subtitles: r.data.layers.subtitles ? + r.data.layers.subtitles.map(function(subtitle) { + return {'in': subtitle['in'], out: subtitle.out, text: subtitle.value}; + }) : [], + tooltips: true, + timeline: '/' + pandora.user.ui.item + '/timeline16p.png', + video: video, + volume: pandora.user.ui.videoVolume, + width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 + }).bindEvent({ + muted: function(data) { + pandora.UI.set('muted', data.muted); + }, + position: function(data) { + pandora.UI.set('videoPoints.' + pandora.user.ui.item + '.position', data.position); + }, + resizeannotations: function(data) { + pandora.UI.set('annotationsSize', data.annotationsSize); + }, + scale: function(data) { + pandora.UI.set('videoScale', data.scale); + }, + toggleannotations: function(data) { + pandora.UI.set('showAnnotations', data.showAnnotations); + }, + togglecontrols: function(data) { + pandora.UI.set('showControls', data.showControls); + }, + volume: function(data) { + pandora.UI.set('volume', data.volume); + }, + pandora_showannotations: function(data) { + pandora.$ui.player.options({showAnnotations: data.value}); + } + })); }); - // - pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.player = Ox.VideoPanelPlayer({ - annotationsSize: pandora.user.ui.annotationsSize, - cuts: result.data.cuts || [], - duration: result.data.duration, - getTimelineImageURL: function(i) { - return '/' + pandora.user.ui.item + '/timeline64p' + i + '.png'; - }, - height: pandora.$ui.contentPanel.size(1), - 'in': pandora.user.ui.videoPoints[pandora.user.ui.item]['in'], - muted: pandora.user.ui.videoMuted, - out: pandora.user.ui.videoPoints[pandora.user.ui.item].out, - position: pandora.user.ui.videoPoints[pandora.user.ui.item].position, - scaleToFill: pandora.user.ui.videoScale == 'fill', - showAnnotations: pandora.user.ui.showAnnotations, - showControls: pandora.user.ui.showControls, - subtitles: result.data.layers.subtitles ? result.data.layers.subtitles.map(function(subtitle) { - return {'in': subtitle['in'], out: subtitle.out, text: subtitle.value}; - }) : [], - tooltips: true, - timeline: '/' + pandora.user.ui.item + '/timeline16p.png', - video: video, - volume: pandora.user.ui.videoVolume, - width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 - }).bindEvent({ - muted: function(data) { - pandora.UI.set('muted', data.muted); - }, - position: function(data) { - pandora.UI.set('videoPoints.' + pandora.user.ui.item + '.position', data.position); - }, - resizeannotations: function(data) { - pandora.UI.set('annotationsSize', data.annotationsSize); - }, - scale: function(data) { - pandora.UI.set('videoScale', data.scale); - }, - toggleannotations: function(data) { - pandora.UI.set('showAnnotations', data.showAnnotations); - }, - togglecontrols: function(data) { - pandora.UI.set('showControls', data.showControls); - }, - volume: function(data) { - pandora.UI.set('volume', data.volume); - }, - pandora_showannotations: function(data) { - pandora.$ui.player.options({showAnnotations: data.value}); - } - })); } else if (pandora.user.ui.itemView == 'timeline') { var layers = [], video = {}; - pandora.site.layers.forEach(function(layer) { - layers.push(Ox.extend({items: result.data.layers[layer.id]}, layer)); - }); - pandora.site.video.resolutions.forEach(function(resolution) { - video[resolution] = Ox.range(result.data.parts).map(function(i) { - return '/' + pandora.user.ui.item + '/' - + resolution + 'p' + (i + 1) + '.' + pandora.user.videoFormat; + pandora.api.get({id: pandora.user.ui.item, keys: ['layers']}, function(r) { + pandora.site.layers.forEach(function(layer) { + layers.push(Ox.extend({items: r.data.layers[layer.id]}, layer)); }); - }); - pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.editor = Ox.VideoEditor({ - annotationsSize: pandora.user.ui.annotationsSize, - cuts: result.data.cuts || [], - duration: result.data.duration, - find: '', - getFrameURL: function(position) { - return '/' + pandora.user.ui.item + '/' + Ox.last(pandora.site.video.resolutions) + 'p' + position + '.jpg'; - }, - getLargeTimelineImageURL: function(i) { - return '/' + pandora.user.ui.item + '/timeline64p' + i + '.png'; - }, - getSmallTimelineImageURL: function(i) { - return '/' + pandora.user.ui.item + '/timeline16p' + i + '.png'; - }, - height: pandora.$ui.contentPanel.size(1), - id: 'editor', - 'in': pandora.user.ui.videoPoints[pandora.user.ui.item]['in'], - layers: layers, - muted: pandora.user.ui.videoMuted, - out: pandora.user.ui.videoPoints[pandora.user.ui.item].out, - position: pandora.user.ui.videoPoints[pandora.user.ui.item].position, - posterFrame: parseInt(video.duration / 2), - showAnnotations: pandora.user.ui.showAnnotations, - showLargeTimeline: true, - // fixme: layers have value, subtitles has text? - subtitles: result.data.layers.subtitles ? result.data.layers.subtitles.map(function(subtitle) { - return {'in': subtitle['in'], out: subtitle.out, text: subtitle.value}; - }) : [], - tooltips: true, - video: video, - videoRatio: result.data.videoRatio, - videoSize: pandora.user.ui.videoSize, - width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 - }).bindEvent({ - points: function(data) { - pandora.UI.set('videoPoints.' + pandora.user.ui.item, { - 'in': data['in'], - out: data.out, - position: pandora.user.ui.videoPoints[pandora.user.ui.item].position + pandora.site.video.resolutions.forEach(function(resolution) { + video[resolution] = Ox.range(result.data.parts).map(function(i) { + return '/' + pandora.user.ui.item + '/' + + resolution + 'p' + (i + 1) + '.' + pandora.user.videoFormat; }); - }, - position: function(data) { - pandora.UI.set('videoPoints.' + pandora.user.ui.item + '.position', data.position); - }, - resize: function(data) { - Ox.print('RESIZE!!', data.size) + }); + pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.editor = Ox.VideoEditor({ + annotationsSize: pandora.user.ui.annotationsSize, + cuts: result.data.cuts || [], + duration: result.data.duration, + find: '', + getFrameURL: function(position) { + return '/' + pandora.user.ui.item + '/' + Ox.last(pandora.site.video.resolutions) + 'p' + position + '.jpg'; + }, + getLargeTimelineImageURL: function(i) { + return '/' + pandora.user.ui.item + '/timeline64p' + i + '.png'; + }, + getSmallTimelineImageURL: function(i) { + return '/' + pandora.user.ui.item + '/timeline16p' + i + '.png'; + }, + height: pandora.$ui.contentPanel.size(1), + id: 'editor', + 'in': pandora.user.ui.videoPoints[pandora.user.ui.item]['in'], + layers: layers, + muted: pandora.user.ui.videoMuted, + out: pandora.user.ui.videoPoints[pandora.user.ui.item].out, + position: pandora.user.ui.videoPoints[pandora.user.ui.item].position, + posterFrame: parseInt(video.duration / 2), + showAnnotations: pandora.user.ui.showAnnotations, + showLargeTimeline: true, + // fixme: layers have value, subtitles has text? + subtitles: r.data.layers.subtitles ? + r.data.layers.subtitles.map(function(subtitle) { + return {'in': subtitle['in'], out: subtitle.out, text: subtitle.value}; + }) : [], + tooltips: true, + video: video, + videoRatio: result.data.videoRatio, + videoSize: pandora.user.ui.videoSize, + width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 + }).bindEvent({ + points: function(data) { + pandora.UI.set('videoPoints.' + pandora.user.ui.item, { + 'in': data['in'], + out: data.out, + position: pandora.user.ui.videoPoints[pandora.user.ui.item].position + }); + }, + position: function(data) { + pandora.UI.set('videoPoints.' + pandora.user.ui.item + '.position', data.position); + }, + resize: function(data) { + Ox.print('RESIZE!!', data.size) + pandora.$ui.editor.options({ + height: data.size + }); + }, + resizeend: function(data) { + pandora.UI.set({annotationsSize: data.size}); + }, + togglesize: function(data) { + pandora.UI.set({videoSize: data.size}); + }, + addannotation: function(data) { + Ox.print('addAnnotation', data); + data.item = pandora.user.ui.item; + data.value = 'Click to edit'; + pandora.api.addAnnotation(data, function(result) { + pandora.$ui.editor.addAnnotation(data.layer, result.data); + }); + }, + removeannotations: function(data) { + pandora.api.removeAnnotations(data, function(result) { + //fixme: check for errors + pandora.$ui.editor.removeAnnotations(data.layer, data.ids); + }); + }, + toggleannotations: function(data) { + pandora.UI.set('showAnnotations', data.showAnnotations); + }, + updateannotation: function(data) { + //fixme: check that edit was successfull + pandora.api.editAnnotation(data, function(result) { + Ox.print('done updateAnnotation', result); + + }); + }, + pandora_showannotations: function(data) { + pandora.$ui.editor.options({showAnnotations: data.value}); + } + })); + that.bindEvent('resize', function(data) { + //Ox.print('resize item', data) pandora.$ui.editor.options({ height: data.size }); - }, - resizeend: function(data) { - pandora.UI.set({annotationsSize: data.size}); - }, - togglesize: function(data) { - pandora.UI.set({videoSize: data.size}); - }, - addannotation: function(data) { - Ox.print('addAnnotation', data); - data.item = pandora.user.ui.item; - data.value = 'Click to edit'; - pandora.api.addAnnotation(data, function(result) { - pandora.$ui.editor.addAnnotation(data.layer, result.data); - }); - }, - removeannotations: function(data) { - pandora.api.removeAnnotations(data, function(result) { - //fixme: check for errors - pandora.$ui.editor.removeAnnotations(data.layer, data.ids); - }); - }, - toggleannotations: function(data) { - pandora.UI.set('showAnnotations', data.showAnnotations); - }, - updateannotation: function(data) { - //fixme: check that edit was successfull - pandora.api.editAnnotation(data, function(result) { - Ox.print('done updateAnnotation', result); - - }); - }, - pandora_showannotations: function(data) { - pandora.$ui.editor.options({showAnnotations: data.value}); - } - })); - that.bindEvent('resize', function(data) { - //Ox.print('resize item', data) - pandora.$ui.editor.options({ - height: data.size }); }); /*