From 01c4695be7619191c5721b734794bf2280d66c83 Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
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 3557a22..57b643c 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 2702c11..0000000
--- 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 1b341cc..06eac39 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 0000000..79260c9
--- /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 9204360..0000000
--- 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 e21e0c9..a6aa358 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 1c28eed..b2bb587 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"
]