updating info (part 2)

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());

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'

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() {

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 list = pandora.user.ui.lists[pandora.user.ui.list],
-    var that = Ox.Element()
+        id = id || pandora.user.ui.item || (list.selected.length ? list.selected[list.selected.length - 1] : null),
-        .bindEvent({
+        view = getView(),
-            toggle: function(data) {
+        that = Ox.Element()
-                pandora.UI.set({showInfo: !data.collapsed});
+            .css({overflowX: 'hidden', overflowY: 'auto'})
-                pandora.resizeFolders();
+            .bindEvent({
-            }
+                toggle: function(data) {
-        });
+                    pandora.UI.set({showInfo: !data.collapsed});
-    if (id) {
+                    pandora.resizeFolders();
-        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: '<img>',
-                        tooltip: '<span class="OxBright">' + result.data.title + '</span>' + (
-                            result.data.director ? '<br/>' + 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);
                 }
             });
+    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;
+    that.resizeInfo = function() {
-        //resize(pandora.user.ui.sidebarSize);
+        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 = $('<div>').css({padding: '16px', textAlign: 'center'});
+    var $icon = $('<img>')
+        .attr({src: !pandora.user.ui.list ? '/static/png/icon256.png' : Ox.UI.getImageURL('symbolIcon')})
+        .css(getIconCSS())
+        .appendTo(that);
+    $('<div>').css({padding: '16px 0 16px 0', fontWeight: 'bold'}).html(!pandora.user.ui.list ? 'All Movies' : pandora.user.ui.list.replace('/', ': ')).appendTo(that);
+    $('<div>').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 = $('<img>')
+            .attr({src: '/' + data.id + '/poster512.jpg'})
+            .css(getPosterCSS()),
+        $text = $('<div>')
+            .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: $('<div>').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;
+};

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')
+                pandora.user.ui.sidebarSize = data.size;
-                var infoSize = Math.min(data.size, 256);
-                // fixme: don't make a request here:
-                pandora.UI.set('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);
+                pandora.$ui.leftPanel.size(2, pandora.getInfoHeight());
-                if (pandora.$ui.videoPreview) {
+                pandora.$ui.info.resizeInfo();
-                    pandora.$ui.videoPreview.options({
-                        height: infoSize,
-                        width: data.size
-                    });
-                } else {
-                    pandora.$ui.info.find('img').css({height: infoSize + 'px'})
-                }
                 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) {

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) {

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
         })