From 9fc1430aaac9d937ba720546307422812204e3e3 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 3 Feb 2011 21:39:42 +0000 Subject: [PATCH] updating to new editor --- static/js/pandora.js | 269 +++++++++++++++++++------------------------ 1 file changed, 119 insertions(+), 150 deletions(-) diff --git a/static/js/pandora.js b/static/js/pandora.js index 5ae0a30d..769dab2d 100755 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -1720,154 +1720,124 @@ } else if (app.user.ui.itemView == 'player') { that = new Ox.Element('div'); } else if (app.user.ui.itemView == 'timeline') { - that = new Ox.SplitPanel({ - elements: [ - { - element: new Ox.Element('div'), - }, - { - collapsed: !app.user.ui.showAnnotations, - collapsible: true, - element: new Ox.Element('div'), - resizable: true, - resize: [256, 384], - size: app.user.ui.annotationsSize - } - ] - }) + that = new Ox.Element('div'); } - getItem(); - function getItem() { - pandora.api.getItem(app.user.ui.item, function(result) { - if (app.user.ui.itemView == 'info') { - //Ox.print('result.data.item', result.data.item) - $.get('/static/html/itemInfo.html', {}, function(template) { - //Ox.print(template); - app.$ui.contentPanel.replace(1, - app.$ui.item = new Ox.Element('div') - .append($.tmpl(template, result.data.item)) - ); - }); - } else if (app.user.ui.itemView == 'player') { - var video = result.data.item.stream, - subtitles = result.data.item.layers.subtitles; - video.height = video.profiles[0] - video.width = parseInt(video.height * video.aspectRatio / 2) * 2; - video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4'); - app.$ui.contentPanel.replace(1, app.$ui.player = new Ox.VideoPanelPlayer({ - annotationsSize: app.user.ui.annotationsSize, - duration: video.duration, - height: app.$ui.contentPanel.size(1), - position: app.user.ui.videoPosition[app.user.ui.item] || 0, - showAnnotations: app.user.ui.showAnnotations, - showControls: app.user.ui.showControls, - subtitles: subtitles, - videoHeight: video.height, - videoId: app.user.ui.item, - videoWidth: video.width, - videoSize: app.user.ui.videoScreen, - videoURL: video.url, - width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 - }).bindEvent({ - change: function(event, data) { - // showAnnotations, showControls, videoScreen - UI.set('videoSize' in data ? { - videoScreen: data.videoSize - } : data); - }, - enterfullscreen: enterFullscreen, - exitfullscreen: exitFullscreen - }))/*.bindEvent({ - resize: function(event, data) { - app.$ui.player.options({ - height: data - }); - } - })*/; - } else if (app.user.ui.itemView == 'timeline') { - var video = result.data.item.stream, - cuts = result.data.item.cuts || {}, - subtitles = result.data.item.layers.subtitles || [{ - 'in': 5, - 'out': 10, - 'value': 'This subtitle is just a test...' - }]; - video.height = video.profiles[0] - video.width = parseInt(video.height * video.aspectRatio / 2) * 2; - video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4'); - that.replace(0, app.$ui.editor = new Ox.VideoEditor({ - cuts: cuts, - duration: video.duration, - find: '', - frameURL: function(position) { - return '/' + app.user.ui.item + '/frame/' + video.width.toString() + '/' + position.toString() + '.jpg' - }, - height: app.$ui.contentPanel.size(1), - id: 'editor', - largeTimeline: true, - matches: [], - points: [0, 0], - position: app.user.ui.videoPosition[app.user.ui.item] || 0, - posterFrame: parseInt(video.duration / 2), - subtitles: subtitles, - videoHeight: video.height, - videoId: app.user.ui.item, - videoWidth: video.width, - videoSize: app.user.ui.videoSize, - videoURL: video.url, - width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 - - (app.user.ui.showAnnotations * app.user.ui.annotationsSize) - 1 - }).bindEvent({ - resize: function(event, data) { - app.$ui.editor.options({ - width: data - }); - }, - togglesize: function(event, data) { - UI.set({videoSize: data.size}); - } - })); - that.replace(1, app.$ui.annotations = ui.annotations()); - that.bindEvent('resize', function(event, data) { - //Ox.print('resize item', data) - app.$ui.editor.options({ - height: data - }); - }); - /* - app.$ui.rightPanel.bindEvent('resize', function(event, data) { - Ox.print('... rightPanel resize', data, app.$ui.timelinePanel.size(1)) - app.$ui.editor.options({ - width: data - app.$ui.timelinePanel.size(1) - 1 - }); - }); - */ - } else if (app.user.ui.itemView == 'files') { + pandora.api.getItem(app.user.ui.item, function(result) { + if (app.user.ui.itemView == 'info') { + //Ox.print('result.data.item', result.data.item) + $.get('/static/html/itemInfo.html', {}, function(template) { + //Ox.print(template); app.$ui.contentPanel.replace(1, - app.$ui.item = new Ox.FilesView({ - id: result.data.item.id - }) + app.$ui.item = new Ox.Element('div') + .append($.tmpl(template, result.data.item)) ); - } - app.$ui.total.html(result.data.item.title + ' (' + result.data.item.director.join(', ') + ')') - }); - } - /* - that.display = function() { - app.$ui.contentPanel.replaceElements([ - { - collapsible: true, - element: app.$ui.browser = ui.browser(), - resizable: false, - size: 112 + app.ui.scrollbarSize - }, - { - element: new Ox.Element('div') - } - ]); - getItem(); // fixme: can the asynchronicity be moved within the video editor? - } - */ + }); + } else if (app.user.ui.itemView == 'player') { + var video = result.data.item.stream, + subtitles = result.data.item.layers.subtitles; + video.height = video.profiles[0] + video.width = parseInt(video.height * video.aspectRatio / 2) * 2; + video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4'); + app.$ui.contentPanel.replace(1, app.$ui.player = new Ox.VideoPanelPlayer({ + annotationsSize: app.user.ui.annotationsSize, + duration: video.duration, + height: app.$ui.contentPanel.size(1), + position: app.user.ui.videoPosition[app.user.ui.item] || 0, + showAnnotations: app.user.ui.showAnnotations, + showControls: app.user.ui.showControls, + subtitles: subtitles, + videoHeight: video.height, + videoId: app.user.ui.item, + videoWidth: video.width, + videoSize: app.user.ui.videoScreen, + videoURL: video.url, + width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 + }).bindEvent({ + change: function(event, data) { + // showAnnotations, showControls, videoScreen + UI.set('videoSize' in data ? { + videoScreen: data.videoSize + } : data); + }, + enterfullscreen: enterFullscreen, + exitfullscreen: exitFullscreen + }))/*.bindEvent({ + resize: function(event, data) { + app.$ui.player.options({ + height: data + }); + } + })*/; + } else if (app.user.ui.itemView == 'timeline') { + var video = result.data.item.stream, + cuts = result.data.item.cuts || {}, + subtitles = result.data.item.layers.subtitles || [{ + 'in': 5, + 'out': 10, + 'value': 'This subtitle is just a test...' + }]; + video.height = video.profiles[0] + video.width = parseInt(video.height * video.aspectRatio / 2) * 2; + video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4'); + app.$ui.contentPanel.replace(1, app.$ui.editor = new Ox.VideoEditor({ + annotationsSize: app.user.ui.annotationsSize, + cuts: cuts, + duration: video.duration, + find: '', + frameURL: function(position) { + return '/' + app.user.ui.item + '/frame/' + video.width.toString() + '/' + position.toString() + '.jpg' + }, + height: app.$ui.contentPanel.size(1), + id: 'editor', + largeTimeline: true, + layers: app.config.layers, + matches: [], + points: [0, 0], + position: app.user.ui.videoPosition[app.user.ui.item] || 0, + posterFrame: parseInt(video.duration / 2), + showAnnotations: app.user.ui.showAnnotations, + subtitles: subtitles, + videoHeight: video.height, + videoId: app.user.ui.item, + videoWidth: video.width, + videoSize: app.user.ui.videoSize, + videoURL: video.url, + width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 + }).bindEvent({ + /* + resize: function(event, data) { + app.$ui.editor.options({ + width: data + }); + }, + */ + togglesize: function(event, data) { + UI.set({videoSize: data.size}); + } + })); + that.bindEvent('resize', function(event, data) { + //Ox.print('resize item', data) + app.$ui.editor.options({ + height: data + }); + }); + /* + app.$ui.rightPanel.bindEvent('resize', function(event, data) { + Ox.print('... rightPanel resize', data, app.$ui.timelinePanel.size(1)) + app.$ui.editor.options({ + width: data - app.$ui.timelinePanel.size(1) - 1 + }); + }); + */ + } else if (app.user.ui.itemView == 'files') { + app.$ui.contentPanel.replace(1, + app.$ui.item = new Ox.FilesView({ + id: result.data.item.id + }) + ); + } + app.$ui.total.html(result.data.item.title + ' (' + result.data.item.director.join(', ') + ')') + }); return that; }, leftPanel: function() { @@ -2966,7 +2936,7 @@ width: data }); app.user.ui.itemView == 'timeline' && app.$ui.editor.options({ - width: data - (app.user.ui.showAnnotations * app.user.ui.annotationsSize) - 1 + width: data }); } } @@ -3137,10 +3107,10 @@ }) : $.map(app.config.itemViews, function(view) { return $.extend($.extend({}, view), { checked: app.user.ui.itemView == view.id, - title: view.title + title: 'View: ' + view.title }); }), - width: !app.user.ui.item ? 144 : 96 + width: !app.user.ui.item ? 144 : 128 }) .css({ float: 'left', @@ -3412,8 +3382,7 @@ app.user.ui.itemView == 'timeline' && app.$ui.editor.options({ // fixme: duplicated height: app.$ui.contentPanel.size(1), - width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 - - (app.user.ui.showAnnotations * app.user.ui.annotationsSize) - 1 + width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 }); } }