From 7d67386f55c94ae3f35ffcb1e48aff125e3c5db8 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 18 Sep 2011 21:18:05 +0000 Subject: [PATCH] updating info (part 2) --- static/js/pandora.js | 27 +--- static/js/pandora/URL.js | 4 +- static/js/pandora/pandora.js | 14 ++- static/js/pandora/ui/info.js | 177 ++++++++++++++++++++------- static/js/pandora/ui/leftPanel.js | 20 +-- static/js/pandora/ui/list.js | 4 +- static/js/pandora/ui/videoPreview.js | 3 +- 7 files changed, 159 insertions(+), 90 deletions(-) diff --git a/static/js/pandora.js b/static/js/pandora.js index 96f3a24c2..925266ce4 100644 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -51,29 +51,7 @@ Ox.load({ site: data.site, user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user }); - /* - // ---- fixme: remove, server sends wrong data - pandora.site.user.ui.lists = { - "": { - "columns": ["title", "director", "country", "year", "language", "runtime", "genre"], - "columnWidth": {}, - "listView": "grid", - "selected": [], - "sort": [ - {"key": "director", "operator": ""} - ] - } - }; - pandora.site.user.ui.groups = [ - {"id": "director", "sort": [{"key": "items", "operator": "-"}]}, - {"id": "country", "sort": [{"key": "items", "operator": "-"}]}, - {"id": "year", "sort": [{"key": "name", "operator": "-"}]}, - {"id": "language", "sort": [{"key": "items", "operator": "-"}]}, - {"id": "genre", "sort": [{"key": "items", "operator": "-"}]} - ]; - // ---- - */ - Ox.print("USER.UI.LISTS", data.user.ui.lists, "SITE.USER.UI.LISTS", data.site.user.ui.lists) + Ox.extend(pandora.site, { findKeys: Ox.map(data.site.itemKeys, function(key) { return key.find ? key : null; @@ -101,7 +79,6 @@ Ox.load({ }) }); Ox.extend(pandora.user, { - infoRatio: 16 / 9, sectionElement: 'buttons', selectedMovies: [], videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats) @@ -164,6 +141,8 @@ Ox.load({ function resizeWindow() { pandora.resizeFolders(); + pandora.$ui.leftPanel.size(2, pandora.getInfoHeight()); + pandora.$ui.info.resizeInfo(); if (!pandora.user.ui.item) { pandora.$ui.list.size(); pandora.resizeGroups(pandora.$ui.rightPanel.width()); diff --git a/static/js/pandora/URL.js b/static/js/pandora/URL.js index 01039769a..73af136dc 100644 --- a/static/js/pandora/URL.js +++ b/static/js/pandora/URL.js @@ -222,7 +222,9 @@ pandora.URL = (function() { pandora.$ui.mainPanel.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel()); } else { // item to item - pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info()); + if (pandora.user.ui.item != oldUserUI.item) { + pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info()); + } pandora.$ui.contentPanel.replaceElement(1, pandora.ui.item()); } // fixme: should be 'video', not 'player' diff --git a/static/js/pandora/pandora.js b/static/js/pandora/pandora.js index b9da29167..f7f879c07 100644 --- a/static/js/pandora/pandora.js +++ b/static/js/pandora/pandora.js @@ -298,7 +298,19 @@ pandora.getGroupsSizes = function() { pandora.getInfoHeight = function() { // fixme: new, check if it can be used more - return pandora.user.ui.showInfo * pandora.user.ui.sidebarSize / pandora.user.infoRatio; + var isVideoPreview, list + if (!pandora.user.ui.item) { + list = pandora.user.ui.lists[pandora.user.ui.list]; + isVideoPreview = list.selected.length && !pandora.isClipView(list.listView); + } else { + isVideoPreview = !pandora.isClipView(pandora.user.ui.itemView, true); + } + return pandora.user.ui.showInfo * Math.min( + isVideoPreview + ? pandora.user.ui.sidebarSize / (16/9) + 16 + : pandora.user.ui.sidebarSize, + window.innerHeight - 109 // 20 menu + 24 bar + 64 (4 closed folders) + 1 resizebar + ); } pandora.getListData = function() { diff --git a/static/js/pandora/ui/info.js b/static/js/pandora/ui/info.js index 72e499a8b..e120e06d1 100644 --- a/static/js/pandora/ui/info.js +++ b/static/js/pandora/ui/info.js @@ -1,56 +1,139 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript pandora.ui.info = function(id) { - id = id || pandora.user.ui.item; - var that = Ox.Element() - .bindEvent({ - toggle: function(data) { - pandora.UI.set({showInfo: !data.collapsed}); - pandora.resizeFolders(); - } - }); - if (id) { - if (!pandora.user.ui.item && pandora.isClipView(pandora.user.ui.lists[pandora.user.ui.list].listView)) { - // Poster - pandora.api.get({id: id, keys: ['director', 'posterRatio', 'title']}, function(result) { - var ratio = result.data.posterRatio, - height = Math.min(pandora.user.ui.sidebarSize, 256); - that.empty().append( - Ox.Element({ - element: '', - tooltip: '' + result.data.title + '' + ( - result.data.director ? '
' + result.data.director.join(', ') : '' - ) - }).attr({ - src: '/' + id + '/poster256.jpg' - }).css({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - height: height + 'px', - margin: 'auto' - }) - ); - pandora.user.infoRatio = 1; - }); - } else { - // Video Preview - pandora.api.get({id: id, keys: ['duration', 'videoRatio']}, function(result) { - if (result.data) { - pandora.$ui.videoPreview && pandora.$ui.videoPreview.removeElement(); - pandora.$ui.videoPreview = pandora.ui.videoPreview({ - id: id, - duration: result.data.duration, - frameRatio: result.data.videoRatio - }).appendTo(pandora.$ui.info); + var list = pandora.user.ui.lists[pandora.user.ui.list], + id = id || pandora.user.ui.item || (list.selected.length ? list.selected[list.selected.length - 1] : null), + view = getView(), + that = Ox.Element() + .css({overflowX: 'hidden', overflowY: 'auto'}) + .bindEvent({ + toggle: function(data) { + pandora.UI.set({showInfo: !data.collapsed}); + pandora.resizeFolders(); } }); + if (view == 'list') { + that.empty().append(pandora.$ui.listInfo = pandora.ui.listInfo(list)); + } else if (view == 'poster') { + pandora.api.get({id: id, keys: ['director', 'posterRatio', 'title']}, function(result) { + var ratio = result.data.posterRatio, + height = pandora.getInfoHeight(); + that.empty().append( + pandora.$ui.posterInfo = pandora.ui.posterInfo(Ox.extend(result.data, {id: id})) + ); + }); + } else if (view == 'video') { + pandora.api.get({id: id, keys: ['duration', 'videoRatio']}, function(result) { + if (result.data) { + pandora.$ui.videoPreview && pandora.$ui.videoPreview.removeElement(); + pandora.$ui.videoPreview = pandora.ui.videoPreview({ + id: id, + duration: result.data.duration, + frameRatio: result.data.videoRatio + }).appendTo(pandora.$ui.info); + } + }); + } + pandora.$ui.leftPanel && resize(); + function getView() { + return !id ? 'list' + : !pandora.user.ui.item && pandora.isClipView(list.listView) ? 'poster' + : 'video'; + } + function resize() { + var height = pandora.getInfoHeight(); + if (height != pandora.$ui.leftPanel.size(2)) { + !pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height}); + // fixme: why is this timeout needed? + setTimeout(function() { + pandora.$ui.leftPanel.size(2, height, function() { + pandora.resizeFolders(); + }); + }, 0) } - } else if (pandora.$ui.leftPanel) { - //pandora.user.infoRatio = 1; - //resize(pandora.user.ui.sidebarSize); + } + that.resizeInfo = function() { + if (view == 'list') { + pandora.$ui.listInfo.resizeIcon(); + } else if (view == 'poster') { + pandora.$ui.posterInfo.resizePoster(); + } else if (view == 'video') { + pandora.$ui.videoPreview.options({ + height: pandora.getInfoHeight(), + width: pandora.user.ui.sidebarSize + }) + } + }; + return that; +}; + +pandora.ui.listInfo = function(data) { + var that = $('
').css({padding: '16px', textAlign: 'center'}); + var $icon = $('') + .attr({src: !pandora.user.ui.list ? '/static/png/icon256.png' : Ox.UI.getImageURL('symbolIcon')}) + .css(getIconCSS()) + .appendTo(that); + $('
').css({padding: '16px 0 16px 0', fontWeight: 'bold'}).html(!pandora.user.ui.list ? 'All Movies' : pandora.user.ui.list.replace('/', ': ')).appendTo(that); + $('
').css({textAlign: 'left'}).html(Ox.repeat('This is the list info text. ', 10)).appendTo(that); + function getIconCSS() { + var size = Math.round(pandora.user.ui.sidebarSize / 2); + return {width: size + 'px', height: size + 'px'}; + } + that.resizeIcon = function() { + $icon.css(getIconCSS()); } return that; }; +pandora.ui.posterInfo = function(data) { + var $poster = $('') + .attr({src: '/' + data.id + '/poster512.jpg'}) + .css(getPosterCSS()), + $text = $('
') + .css({ + width: pandora.user.ui.sidebarSize - 8 + 'px', + height: '12px', + padding: '2px 4px 2px 4px', + fontSize: '9px', + textAlign: 'center', + textOverflow: 'ellipsis', + overflow: 'hidden' + }) + .html( + data.title + ( + data.director ? ' (' + data.director.join(', ') + ')' : '' + ) + ); + that = Ox.SplitPanel({ + elements: [ + { + element: $('
').append($poster) + }, + { + element: Ox.Bar({size: 16}).append($text), + size: 16 + } + ], + orientation: 'vertical' + }); + function getPosterCSS() { + var css = {}, + ratio = pandora.user.ui.sidebarSize / (pandora.user.ui.sidebarSize - 16); + if (data.posterRatio < ratio) { + css.height = pandora.user.ui.sidebarSize - 16; + css.width = Math.round(css.height * data.posterRatio); + css.marginLeft = Math.floor((pandora.user.ui.sidebarSize - css.width) / 2); + } else { + css.width = pandora.user.ui.sizebarSize; + css.height = Math.round(css.width / data.posterRatio); + css.marginTop = Math.floor((pandora.user.ui.sidebarSize - 16 - css.height) / 2); + } + return Ox.map(css, function(value) { + return value + 'px'; + }); + } + that.resizePoster = function() { + $poster.css(getPosterCSS()); + $text.css({width: pandora.user.ui.sidebarSize - 8 + 'px'}) + } + return that; +}; diff --git a/static/js/pandora/ui/leftPanel.js b/static/js/pandora/ui/leftPanel.js index 5aa21c0da..5f3e76923 100644 --- a/static/js/pandora/ui/leftPanel.js +++ b/static/js/pandora/ui/leftPanel.js @@ -13,7 +13,7 @@ pandora.ui.leftPanel = function() { collapsed: !pandora.user.ui.showInfo, collapsible: true, element: pandora.$ui.info = pandora.ui.info(), - size: Math.min(pandora.user.ui.sidebarSize, 256), + size: pandora.getInfoHeight(), tooltip: 'info' } ], @@ -22,10 +22,7 @@ pandora.ui.leftPanel = function() { }) .bindEvent({ resize: function(data) { - Ox.print('LEFT PANEL RESIZE') - var infoSize = Math.min(data.size, 256); - // fixme: don't make a request here: - pandora.UI.set('sidebarSize', data.size); + pandora.user.ui.sidebarSize = data.size; if (data.size < pandora.site.sectionButtonsWidth && pandora.$ui.sectionButtons) { pandora.$ui.sectionButtons.removeElement(); delete pandora.$ui.sectionButtons; @@ -36,18 +33,13 @@ pandora.ui.leftPanel = function() { pandora.$ui.sectionbar.append(pandora.$ui.sectionButtons = pandora.ui.sectionButtons()); } !pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -infoSize}); - pandora.$ui.leftPanel.size(2, infoSize); - if (pandora.$ui.videoPreview) { - pandora.$ui.videoPreview.options({ - height: infoSize, - width: data.size - }); - } else { - pandora.$ui.info.find('img').css({height: infoSize + 'px'}) - } + pandora.$ui.leftPanel.size(2, pandora.getInfoHeight()); + pandora.$ui.info.resizeInfo(); pandora.resizeFolders(); }, resizeend: function(data) { + // set to 0 so that UI.set registers a change of the value + pandora.user.ui.sidebarSize = 0; pandora.UI.set({sidebarSize: data.size}); }, toggle: function(data) { diff --git a/static/js/pandora/ui/list.js b/static/js/pandora/ui/list.js index 0f6036491..558c6df05 100644 --- a/static/js/pandora/ui/list.js +++ b/static/js/pandora/ui/list.js @@ -284,7 +284,6 @@ pandora.ui.list = function() { // fixme: remove view argument $video.trigger('mousedown'); Ox.UI.$window.trigger('mouseup'); } - $video && Ox.print('OPENPREVIEW!!!@!') that.closePreview(); }, select: function(data) { @@ -334,6 +333,7 @@ pandora.ui.list = function() { // fixme: remove view argument }, 300); } } else { + pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info()); $('.OxSelectedVideo').removeClass('OxSelectedVideo'); } } @@ -655,7 +655,7 @@ pandora.ui.list = function() { // fixme: remove view argument pandora.$ui.mainMenu.disableItem('copy'); pandora.$ui.mainMenu.disableItem('openmovie'); } - pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info(data.ids[0])); + pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info()); pandora.api.find({ query: { conditions: data.ids.map(function(id) { diff --git a/static/js/pandora/ui/videoPreview.js b/static/js/pandora/ui/videoPreview.js index 03561dba1..a56c4c36b 100644 --- a/static/js/pandora/ui/videoPreview.js +++ b/static/js/pandora/ui/videoPreview.js @@ -14,7 +14,8 @@ pandora.ui.videoPreview = function(data) { ) + '.jpg'; }, frameRatio: data.frameRatio, - height: Math.min(pandora.user.ui.sidebarSize, 256), + height: pandora.getInfoHeight(), + scaleToFill: true, timeline: '/' + data.id + '/timeline16p.png', width: pandora.user.ui.sidebarSize })