From 495bb5dc835d3ac213f0b81b71039b02820b52a5 Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 6 Jun 2011 18:40:24 +0000 Subject: [PATCH] add mediaView.js --- static/js/pandora.js | 12 ++- static/js/pandora/ui/framesDialog.js | 109 -------------------------- static/js/pandora/ui/item.js | 4 + static/js/pandora/ui/mediaView.js | 107 +++++++++++++++++++++++++ static/js/pandora/ui/postersDialog.js | 109 -------------------------- static/js/pandora/ui/viewSelect.js | 6 +- static/json/pandora.json | 3 +- 7 files changed, 127 insertions(+), 223 deletions(-) delete mode 100644 static/js/pandora/ui/framesDialog.js create mode 100644 static/js/pandora/ui/mediaView.js delete mode 100644 static/js/pandora/ui/postersDialog.js diff --git a/static/js/pandora.js b/static/js/pandora.js index 3557a220..57b643ca 100644 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -16,6 +16,8 @@ Ox.load('UI', { theme: 'modern' }, function() { +// fixme: use Ox.extend() + Ox.load('Geo', function() { window.pandora = new Ox.App({url: '/api/'}).bindEvent({ @@ -72,8 +74,16 @@ Ox.load('Geo', function() { sortKeys: $.map(data.site.itemKeys, function(key, i) { return key.columnWidth ? key : null; }) - }); + pandora.site.itemViews.push( + {id: 'files', title: 'Files', admin: 'true'} + ); + pandora.site.media.importPosterFrames && pandora.site.itemViews.push( + {id: 'frames', title: 'Frames', admin: 'true'} + ); + pandora.site.media.importMoviePosters && pandora.site.itemViews.push( + {id: 'posters', title: 'Posters', admin: 'true'} + ); $.extend(pandora.user, { infoRatio: 16 / 9, sectionElement: 'buttons', diff --git a/static/js/pandora/ui/framesDialog.js b/static/js/pandora/ui/framesDialog.js deleted file mode 100644 index 2702c11e..00000000 --- a/static/js/pandora/ui/framesDialog.js +++ /dev/null @@ -1,109 +0,0 @@ -pandora.ui.framesDialog = function(id) { - - var height = Math.round(window.innerHeight * 0.9), - width = Math.round(window.innerWidth * 0.5), - listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, - previewWidth = width - listWidth, - previewHeight = height - 48, - previewRatio = previewWidth / previewHeight, - $preview = Ox.Element(), - $panel = Ox.SplitPanel({ - elements: [ - { - element: Ox.Element(), - size: listWidth - }, - { - element: $preview - } - ], - orientation: 'horizontal' - }), - that = Ox.Dialog({ - buttons: [ - Ox.Button({ - id: 'done', - title: 'Done' - }).bindEvent({ - click: function() { - that.close(); - } - }) - ], - content: $panel, - height: height, - padding: 0, - title: 'Manage Posters', - width: width - }); - - pandora.api.get({ - id: id, - keys: ['frames'] - }, function(result) { - var frames = result.data.frames, - selected = [frames.filter(function(frame) { - return frame.selected; - })[0]['position']], - $list = Ox.IconList({ - item: function(data, sort, size) { - var ratio = data.width / data.height; - size = size || 128; - return { - height: ratio <= 1 ? size : size / ratio, - id: data['id'], - title: Ox.formatDuration(data['position'], 'short'), - info: '', - url: data.url, - width: ratio >= 1 ? size : size * ratio - }; - }, - items: frames, - keys: ['id', 'position', 'width', 'height', 'url'], - max: 1, - min: 1, - orientation: 'vertical', - selected: selected, - size: 128, - sort: [{key: 'position', operator: '+'}], - unique: 'id' - }) - .css({background: 'rgb(16, 16, 16)'}) - .bindEvent({ - select: function(event) { - var position = event.ids[0], - frame = frames.filter(function(frame) { - return frame.id == position; - })[0], - frameRatio = frame.width / frame.height, - frameWidth = frameRatio > previewRatio ? previewWidth : previewHeight * frameRatio, - frameHeight = frameRatio < previewRatio ? previewHeight : previewWidth / frameRatio; - $preview.html( - $('') - .attr({ - src: frame.url - }) - .css({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - width: frameWidth + 'px', - height: frameHeight + 'px', - margin: 'auto' - }) - ); - pandora.api.setPosterFrame({ - id: id, - position: position - }); - } - }); - - $panel.replaceElement(0, $list); - }); - - return that; - -}; diff --git a/static/js/pandora/ui/item.js b/static/js/pandora/ui/item.js index 1b341ccb..06eac394 100644 --- a/static/js/pandora/ui/item.js +++ b/static/js/pandora/ui/item.js @@ -342,6 +342,10 @@ pandora.ui.item = function() { id: result.data.id }) ); + } else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') { + pandora.$ui.contentPanel.replaceElement(1, + pandora.$ui.item = pandora.ui.mediaView() + ); } var director = result.data.director?' ('+result.data.director.join(', ')+')':''; pandora.$ui.total.html(result.data.title + director); diff --git a/static/js/pandora/ui/mediaView.js b/static/js/pandora/ui/mediaView.js new file mode 100644 index 00000000..79260c99 --- /dev/null +++ b/static/js/pandora/ui/mediaView.js @@ -0,0 +1,107 @@ +pandora.ui.mediaView = function() { + + var item = pandora.user.ui.item, + view = pandora.user.ui.itemView, + width = pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1, + height = pandora.$ui.contentPanel.size(1), + listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, + previewWidth = width - listWidth, + previewHeight = height - 48, + previewRatio = previewWidth / previewHeight, + $preview = Ox.Element(), + that = Ox.SplitPanel({ + elements: [ + { + element: Ox.Element(), + size: listWidth + }, + { + element: $preview + } + ], + orientation: 'horizontal' + }); + + pandora.api.get({ + id: item, + keys: [view] + }, function(result) { + var images = result.data[view], + selected = [images.filter(function(image) { + return image.selected; + })[0]['index']], + $list = Ox.IconList({ + item: function(data, sort, size) { + var ratio = data.width / data.height; + size = size || 128; + return { + height: ratio <= 1 ? size : size / ratio, + id: data['id'], + info: data.width + ' x ' + data.height + ' px', + title: view == 'frames' ? Ox.formatDuration(data.position) : data.source, + url: data.url, + width: ratio >= 1 ? size : size * ratio + } + }, + items: images, + keys: view == 'frames' + ? ['index', 'position', 'width', 'height', 'url'] + : ['index', 'source', 'width', 'height', 'url'], + max: 1, + min: 1, + orientation: 'vertical', + selected: selected, + size: 128, + sort: [{key: 'index', operator: '+'}], + unique: 'index' + }) + .css({background: 'rgb(16, 16, 16)'}) + .bindEvent({ + select: function(event) { + var index = event.ids[0], + image = images.filter(function(image) { + return image.index == index; + })[0], + imageRatio = image.width / image.height, + imageWidth = imageRatio > previewRatio ? previewWidth : previewHeight * imageRatio, + imageHeight = imageRatio < previewRatio ? previewHeight : previewWidth / imageRatio; + $preview.html( + $('') + .attr({ + src: image.url + }) + .css({ + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: 0, + width: imageWidth + 'px', + height: imageHeight + 'px', + margin: 'auto' + }) + ); + pandora.api[view == 'frames' ? 'setPosterFrame' : 'setPoster'](Ox.extend({ + id: item + }, view == 'frames' ? { + position: image.index // api slightly inconsistent + } : { + source: image.source + }), function(result) { + $('img[src*="/' + item + '/poster"]').each(function() { + var $this = $(this); + Ox.print('??', $this.attr('src').split('?')[0] + '?' + Ox.uid()) + $this.attr({ + src: $this.attr('src').split('?')[0] + '?' + Ox.uid() + }); + }); + }); + } + }); + that.replaceElement(0, $list); + }); + + + return that; + +} \ No newline at end of file diff --git a/static/js/pandora/ui/postersDialog.js b/static/js/pandora/ui/postersDialog.js deleted file mode 100644 index 92043602..00000000 --- a/static/js/pandora/ui/postersDialog.js +++ /dev/null @@ -1,109 +0,0 @@ -pandora.ui.postersDialog = function(id) { - - var height = Math.round(window.innerHeight * 0.9), - width = Math.round(window.innerWidth * 0.5), - listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, - previewWidth = width - listWidth, - previewHeight = height - 48, - previewRatio = previewWidth / previewHeight, - $preview = Ox.Element(), - $panel = Ox.SplitPanel({ - elements: [ - { - element: Ox.Element(), - size: listWidth - }, - { - element: $preview - } - ], - orientation: 'horizontal' - }), - that = Ox.Dialog({ - buttons: [ - Ox.Button({ - id: 'done', - title: 'Done' - }).bindEvent({ - click: function() { - that.close(); - } - }) - ], - content: $panel, - height: height, - padding: 0, - title: 'Manage Posters', - width: width - }); - - pandora.api.get({ - id: id, - keys: ['posters'] - }, function(result) { - var posters = result.data.posters, - selected = [posters.filter(function(poster) { - return poster.selected; - })[0]['source']], - $list = Ox.IconList({ - item: function(data, sort, size) { - var ratio = data.width / data.height; - size = size || 128; - return { - height: ratio <= 1 ? size : size / ratio, - id: data['id'], - info: data.width + ' x ' + data.height + ' px', - title: data.source, - url: data.url, - width: ratio >= 1 ? size : size * ratio - } - }, - items: posters, - keys: ['precedence', 'source', 'width', 'height', 'url'], - max: 1, - min: 1, - orientation: 'vertical', - selected: selected, - size: 128, - sort: [{key: 'precedence', operator: '+'}], - unique: 'source' - }) - .css({background: 'rgb(16, 16, 16)'}) - .bindEvent({ - select: function(event) { - var source = event.ids[0], - poster = posters.filter(function(poster) { - return poster.source == source; - })[0], - posterRatio = poster.width / poster.height, - posterWidth = posterRatio > previewRatio ? previewWidth : previewHeight * posterRatio, - posterHeight = posterRatio < previewRatio ? previewHeight : previewWidth / posterRatio; - $preview.html( - $('') - .attr({ - src: poster.url - }) - .css({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - width: posterWidth + 'px', - height: posterHeight + 'px', - margin: 'auto' - }) - ); - pandora.api.setPoster({ - id: id, - source: source - }); - } - }); - - $panel.replaceElement(0, $list); - }); - - return that; - -}; diff --git a/static/js/pandora/ui/viewSelect.js b/static/js/pandora/ui/viewSelect.js index e21e0c90..a6aa3582 100644 --- a/static/js/pandora/ui/viewSelect.js +++ b/static/js/pandora/ui/viewSelect.js @@ -2,12 +2,14 @@ pandora.ui.viewSelect = function() { var that = Ox.Select({ id: 'viewSelect', - items: !pandora.user.ui.item ? $.map(pandora.site.listViews, function(view) { + items: !pandora.user.ui.item ? pandora.site.listViews.map(function(view) { return $.extend($.extend({}, view), { checked: pandora.user.ui.lists[pandora.user.ui.list].listView == view.id, title: 'View ' + view.title }); - }) : $.map(pandora.site.itemViews, function(view) { + }) : pandora.site.itemViews.filter(function(view) { + return !view.admin || pandora.user.level == 'admin'; + }).map(function(view) { return $.extend($.extend({}, view), { checked: pandora.user.ui.itemView == view.id, title: 'View: ' + view.title diff --git a/static/json/pandora.json b/static/json/pandora.json index 1c28eedb..b2bb587a 100644 --- a/static/json/pandora.json +++ b/static/json/pandora.json @@ -40,6 +40,5 @@ "js/pandora/ui/appPanel.js", "js/pandora/ui/flipbook.js", "js/pandora/ui/editor.js", - "js/pandora/ui/postersDialog.js", - "js/pandora/ui/framesDialog.js" + "js/pandora/ui/mediaView.js" ]