pandora/static/js/pandora/ui/info.js

// vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.info = function(id) {
    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)
        }
    }
    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 = $('<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;
};