From 68f0d1117c792c4a2edba865d31dcc79d60db152 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 2 Oct 2011 15:37:58 +0000 Subject: [PATCH] some info view updates --- pandora/0xdb.json | 17 +++-- static/js/pandora/ui/infoView.js | 118 +++++++++++++++++++------------ static/js/pandora/ui/toolbar.js | 5 +- 3 files changed, 85 insertions(+), 55 deletions(-) diff --git a/pandora/0xdb.json b/pandora/0xdb.json index bd5031d4..a1e788d6 100644 --- a/pandora/0xdb.json +++ b/pandora/0xdb.json @@ -1,10 +1,13 @@ { "capabilities": { - "canPlayClips": {"guest": 1, "member": 2, "staff": 3, "admin": 4}, - "canPlayVideo": {"guest": 0, "member": 1, "staff": 3, "admin": 4}, - "canSeeItem": {"guest": 2, "member": 2, "staff": 3, "admin": 4}, - "canSeeFiles": {"guest": -1, "member": -1, "staff": 3, "admin": 4}, - "canSeeExtraItemViews": {"guest": false, "member": false, "staff": true, "admin": true} + "canDeleteItems": {"admin": true}, + "canEditItemIcons": {"staff": true, "admin": true}, + "canPlayClips": {"guest": 1, "member": 2, "friend": 3, "staff": 4, "admin": 4}, + "canPlayVideo": {"guest": 0, "member": 1, "friend": 3, "staff": 4, "admin": 4}, + "canReloadMetadata": {"staff": true, "admin": true}, + "canSeeFiles": {"guest": -1, "member": -1, "friend": -1, "staff": 4, "admin": 4}, + "canSeeItem": {"guest": 2, "member": 2, "friend": 3, "staff": 4, "admin": 4}, + "canSeeExtraItemViews": {"friend": true, "staff": true, "admin": true} }, "clipKeys": [ {"id": "clip:text", "title": "Text", "type": "string"}, @@ -551,7 +554,6 @@ "columnWidth": {} } }, - "editIcon": false, "find": {"conditions": [], "operator": "&"}, "groups": [ {"id": "director", "sort": [{"key": "items", "operator": "-"}]}, @@ -580,6 +582,7 @@ "showFlags": true, "showGroups": true, "showHome": true, + "showIconBrowser": false, "showInfo": true, "showMapControls": false, "showMapLabels": false, @@ -608,7 +611,7 @@ {"name": "Movies A-Z", "path": "", "items": 1234} ] }, - "userLevels": ["guest", "member", "staff", "admin"], + "userLevels": ["guest", "member", "friend", "staff", "admin"], "video": { "download": false, "formats": ["webm", "mp4"], diff --git a/static/js/pandora/ui/infoView.js b/static/js/pandora/ui/infoView.js index 4bf4e5a2..0369bf6f 100644 --- a/static/js/pandora/ui/infoView.js +++ b/static/js/pandora/ui/infoView.js @@ -3,46 +3,54 @@ pandora.ui.infoView = function(data) { // fixme: given that currently, the info view doesn't scroll into view nicely // when collapsing the movies browser, the info view should become a split panel - var css = { + var ui = pandora.user.ui, + canEditIcons = pandora.site.capabilities.canEditItemIcons[pandora.user.level], + borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8, + css = { marginTop: '4px', textAlign: 'justify', MozUserSelect: 'text', WebkitUserSelect: 'text' }, - listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, - margin = 16, - iconSize = pandora.user.ui.infoIconSize, - iconRatio = pandora.user.ui.icons == 'posters' - ? (pandora.user.ui.showSitePoster ? 5/8 : data.posterRatio) : 1, + iconRatio = ui.icons == 'posters' + ? (ui.showSitePoster ? 5/8 : data.posterRatio) : 1, + iconSize = ui.infoIconSize, iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio), iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio), iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0, - borderRadius = pandora.user.ui.icons == 'posters' ? 0 : iconSize / 8, - that = Ox.Element(), + listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, + margin = 16, + statisticsWidth = 128, uid = Ox.uid(), + + that = Ox.Element(), + $list, + $info = $('
') .css({ position: 'absolute', - left: pandora.user.level == 'admin' && !pandora.user.ui.editPoster ? -listWidth + 'px' : 0, + left: canEditIcons && !ui.showIconBrowser ? -listWidth + 'px' : 0, top: 0, right: 0, }) .appendTo(that.$element), + $data = Ox.Container() .css({ position: 'absolute', - left: (pandora.user.level == 'admin' ? listWidth : 0) + 'px', + left: (canEditIcons ? listWidth : 0) + 'px', top: 0, right: 0, height: pandora.$ui.contentPanel.size(1) + 'px' }) .appendTo($info), + $icon = Ox.Element('') .attr({ src: '/' + data.id + '/' + ( - pandora.user.ui.icons == 'posters' - ? (pandora.user.ui.showSitePoster ? 'siteposter' : 'poster') : 'icon' + ui.icons == 'posters' + ? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon' ) + '512.jpg?' + uid }) .css({ @@ -58,6 +66,7 @@ pandora.ui.infoView = function(data) { singleclick: toggleIconSize }) .appendTo($data.$element), + $reflection = $('
') .addClass('OxReflection') .css({ @@ -69,10 +78,11 @@ pandora.ui.infoView = function(data) { overflow: 'hidden' }) .appendTo($data.$element), + $reflectionIcon = $('') .attr({ src: '/' + data.id + '/' + ( - pandora.user.ui.icons == 'posters' ? 'poster' : 'icon' + ui.icons == 'posters' ? 'poster' : 'icon' ) + '512.jpg?' + uid }) .css({ @@ -83,6 +93,7 @@ pandora.ui.infoView = function(data) { borderRadius: borderRadius + 'px' }) .appendTo($reflection), + $reflectionGradient = $('
') .css({ position: 'absolute', @@ -90,12 +101,13 @@ pandora.ui.infoView = function(data) { height: iconSize / 2 + 'px' }) .appendTo($reflection), + $text = $('
') .css({ position: 'absolute', left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px', top: margin + 'px', - right: margin + 'px' + right: margin + statisticsWidth + margin + 'px' }) .bind({ click: function(e) { @@ -107,6 +119,16 @@ pandora.ui.infoView = function(data) { } }) .appendTo($data.$element), + + $statistics = $('
') + .css({ + position: 'absolute', + width: statisticsWidth + 'px', + top: margin + 'px', + right: margin + 'px' + }) + .appendTo($data.$element), + $browserImages = []; var match = /(\(S\d{2}(E\d{2})?\))/.exec(data.title); @@ -329,29 +351,31 @@ pandora.ui.infoView = function(data) { $('
').css({height: '8px'}).appendTo($text); - if (pandora.user.level == 'admin') { + ['hue', 'saturation', 'lightness'].forEach(function(key) { + $('
') + .css({marginBottom: '4px'}) + .append(formatKey(key, true)) + .append(Ox.formatColor(data[key], key)) + .appendTo($statistics); + }); + + if (canEditIcons) { $icon.bindEvent({ doubleclick: function() { - pandora.UI.set('editPoster', !pandora.user.ui.editPoster); - if (pandora.user.ui.editPoster) { - $info.animate({ - left: 0 - }, 250); - } else { - $info.animate({ - left: -listWidth + 'px' - }, 250); - } + pandora.UI.set('showIconBrowser', !ui.showIconBrowser); + $info.animate({ + left: ui.showIconBrowser ? 0 : -listWidth + 'px' + }, 250); } }); - renderList(); - } - function formatKey(key) { - return '' + Ox.toTitleCase(key) + ': '; + function formatKey(key, isStatistics) { + return isStatistics + ? $('
').css({marginBottom: '2px', fontWeight: 'bold'}).html(Ox.toTitleCase(key)) + : '' + Ox.toTitleCase(key) + ': '; } function formatLight(str) { @@ -369,15 +393,15 @@ pandora.ui.infoView = function(data) { function renderList() { pandora.api.get({ id: data.id, - keys: [pandora.user.ui.icons == 'posters' ? 'posters' : 'frames'] + keys: [ui.icons == 'posters' ? 'posters' : 'frames'] }, 0, function(result) { - var images = result.data[pandora.user.ui.icons == 'posters' ? 'posters' : 'frames'], + var images = result.data[ui.icons == 'posters' ? 'posters' : 'frames'], selectedImage = images.filter(function(image) { return image.selected; })[0]; $list = Ox.IconList({ - defaultRatio: pandora.user.ui.icons == 'posters' ? 5/8 : data.stream.aspectRatio, - fixedRatio: pandora.user.ui.icons == 'posters' ? false : data.stream.aspectRatio, + defaultRatio: ui.icons == 'posters' ? 5/8 : data.stream.aspectRatio, + fixedRatio: ui.icons == 'posters' ? false : data.stream.aspectRatio, item: function(data, sort, size) { var ratio = data.width / data.height; size = size || 128; @@ -385,13 +409,13 @@ pandora.ui.infoView = function(data) { height: ratio <= 1 ? size : size / ratio, id: data['id'], info: data.width + ' x ' + data.height + ' px', - title: pandora.user.ui.icons == 'posters' ? data.source : Ox.formatDuration(data.position), + title: ui.icons == 'posters' ? data.source : Ox.formatDuration(data.position), url: data.url, width: ratio >= 1 ? size : size * ratio } }, items: images, - keys: pandora.user.ui.icons == 'posters' + keys: ui.icons == 'posters' ? ['index', 'source', 'width', 'height', 'url'] : ['index', 'position', 'width', 'height', 'url'], max: 1, @@ -421,12 +445,12 @@ pandora.ui.infoView = function(data) { if ($browserImages.length == 0) { $browserImages = pandora.$ui.browser.find('img[src*="/' + data.id + '/"]'); } - if (pandora.user.ui.icons == 'posters' && !pandora.user.ui.showSitePoster) { + if (ui.icons == 'posters' && !ui.showSitePoster) { $browserImages.each(function() { var $this = $(this), size = Math.max($this.width(), $this.height()); $this.attr({src: src}); - pandora.user.ui.icons == 'posters' && $this.css(imageRatio < 1 ? { + ui.icons == 'posters' && $this.css(imageRatio < 1 ? { width: Math.round(size * imageRatio) + 'px', height: size + 'px' } : { @@ -440,9 +464,9 @@ pandora.ui.infoView = function(data) { iconSize = iconSize == 256 ? 512 : 256; toggleIconSize(); } - pandora.api[pandora.user.ui.icons == 'posters' ? 'setPoster' : 'setPosterFrame'](Ox.extend({ + pandora.api[ui.icons == 'posters' ? 'setPoster' : 'setPosterFrame'](Ox.extend({ id: data.id - }, pandora.user.ui.icons == 'posters' ? { + }, ui.icons == 'posters' ? { source: selectedImage.source } : { // fixme: api slightly inconsistent, this shouldn't be "position" @@ -450,14 +474,14 @@ pandora.ui.infoView = function(data) { }), function() { // fixme: update the info (video preview) frame as well var src; - if (pandora.user.ui.icons == 'frames') { + if (ui.icons == 'frames') { src = '/' + data.id + '/icon512.jpg?' + Ox.uid() $icon.attr({src: src}); $reflectionIcon.attr({src: src}); } $browserImages.each(function() { $(this).attr({src: '/' + data.id + '/' + ( - pandora.user.ui.icons == 'posters' ? 'poster' : 'icon' + ui.icons == 'posters' ? 'poster' : 'icon' ) + '64.jpg?' + Ox.uid()}); }); }); @@ -473,7 +497,7 @@ pandora.ui.infoView = function(data) { iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio); iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio); iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0, - borderRadius = pandora.user.ui.icons == 'posters' ? 0 : iconSize / 8; + borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8; $icon.animate({ left: margin + iconLeft + 'px', width: iconWidth + 'px', @@ -503,14 +527,14 @@ pandora.ui.infoView = function(data) { that.reload = function() { var src = src = '/' + data.id + '/' + ( - pandora.user.ui.icons == 'posters' - ? (pandora.user.ui.showSitePoster ? 'siteposter' : 'poster') : 'icon' + ui.icons == 'posters' + ? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon' ) + '512.jpg?' + Ox.uid() $icon.attr({src: src}); $reflectionIcon.attr({src: src}); iconSize = iconSize == 256 ? 512 : 256; - iconRatio = pandora.user.ui.icons == 'posters' - ? (pandora.user.ui.showSitePoster ? 5/8 : data.posterRatio) : 1; + iconRatio = ui.icons == 'posters' + ? (ui.showSitePoster ? 5/8 : data.posterRatio) : 1; toggleIconSize(); pandora.user.level == 'admin' && $list.replaceWith($list = renderList()); }; @@ -524,7 +548,7 @@ pandora.ui.infoView = function(data) { that.bindEvent({ pandora_icons: that.reload, pandora_showsiteposter: function() { - pandora.user.ui.icons == 'posters' && that.reload(); + ui.icons == 'posters' && that.reload(); } }); diff --git a/static/js/pandora/ui/toolbar.js b/static/js/pandora/ui/toolbar.js index 6124d50d..bcf5c435 100644 --- a/static/js/pandora/ui/toolbar.js +++ b/static/js/pandora/ui/toolbar.js @@ -23,7 +23,10 @@ pandora.ui.toolbar = function() { pandora.$ui.orderButton = pandora.ui.orderButton() ); } - if (ui.item && ui.itemView == 'info' && pandora.user.level == 'admin') { + if ( + ui.item && ui.itemView == 'info' + && pandora.site.capabilities.canReloadMetadata[pandora.user.level] + ) { that.append( Ox.Button({ title: 'Reload Metadata'