jellyfin-web/src/components/favoriteitems.js

define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'globalize', 'layoutManager', 'scrollStyles', 'emby-itemscontainer'], function (loading, libraryBrowser, cardBuilder, dom, appHost, imageLoader, globalize, layoutManager) {
    'use strict';

    function enableScrollX() {
        return !layoutManager.desktop;
    }

    function getThumbShape() {
        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
    }

    function getPosterShape() {
        return enableScrollX() ? 'overflowPortrait' : 'portrait';
    }

    function getSquareShape() {
        return enableScrollX() ? 'overflowSquare' : 'square';
    }

    function getSections() {
        return [{
            name: 'HeaderFavoriteMovies',
            types: 'Movie',
            id: 'favoriteMovies',
            shape: getPosterShape(),
            showTitle: false,
            overlayPlayButton: true
        }, {
            name: 'HeaderFavoriteShows',
            types: 'Series',
            id: 'favoriteShows',
            shape: getPosterShape(),
            showTitle: false,
            overlayPlayButton: true
        }, {
            name: 'HeaderFavoriteEpisodes',
            types: 'Episode',
            id: 'favoriteEpisode',
            shape: getThumbShape(),
            preferThumb: false,
            showTitle: true,
            showParentTitle: true,
            overlayPlayButton: true,
            overlayText: false,
            centerText: true
        }, {
            name: 'HeaderFavoriteVideos',
            types: 'Video,MusicVideo',
            id: 'favoriteVideos',
            shape: getThumbShape(),
            preferThumb: true,
            showTitle: true,
            overlayPlayButton: true,
            overlayText: false,
            centerText: true
        }, {
            name: 'HeaderFavoriteArtists',
            types: 'MusicArtist',
            id: 'favoriteArtists',
            shape: getSquareShape(),
            preferThumb: false,
            showTitle: true,
            overlayText: false,
            showParentTitle: false,
            centerText: true,
            overlayPlayButton: true,
            coverImage: true
        }, {
            name: 'HeaderFavoriteAlbums',
            types: 'MusicAlbum',
            id: 'favoriteAlbums',
            shape: getSquareShape(),
            preferThumb: false,
            showTitle: true,
            overlayText: false,
            showParentTitle: true,
            centerText: true,
            overlayPlayButton: true,
            coverImage: true
        }, {
            name: 'HeaderFavoriteSongs',
            types: 'Audio',
            id: 'favoriteSongs',
            shape: getSquareShape(),
            preferThumb: false,
            showTitle: true,
            overlayText: false,
            showParentTitle: true,
            centerText: true,
            overlayMoreButton: true,
            action: 'instantmix',
            coverImage: true
        }];
    }

    function loadSection(elem, userId, topParentId, section, isSingleSection) {
        var screenWidth = dom.getWindowSize().innerWidth;
        var options = {
            SortBy: 'SortName',
            SortOrder: 'Ascending',
            Filters: 'IsFavorite',
            Recursive: true,
            Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
            CollapseBoxSetItems: false,
            ExcludeLocationTypes: 'Virtual',
            EnableTotalRecordCount: false
        };

        if (topParentId) {
            options.ParentId = topParentId;
        }

        if (!isSingleSection) {
            options.Limit = screenWidth >= 1920 ? 10 : screenWidth >= 1440 ? 8 : 6;

            if (enableScrollX()) {
                options.Limit = 20;
            }
        }

        var promise;

        if ('MusicArtist' === section.types) {
            promise = ApiClient.getArtists(userId, options);
        } else {
            options.IncludeItemTypes = section.types;
            promise = ApiClient.getItems(userId, options);
        }

        return promise.then(function (result) {
            var html = '';

            if (result.Items.length) {
                if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
                    html += '<a is="emby-linkbutton" href="' + ('list.html?serverId=' + ApiClient.serverId() + '&type=' + section.types + '&IsFavorite=true') + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
                    html += '<h2 class="sectionTitle sectionTitle-cards">';
                    html += globalize.translate(section.name);
                    html += '</h2>';
                    html += '<span class="material-icons chevron_right"></span>';
                    html += '</a>';
                } else {
                    html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate(section.name) + '</h2>';
                }

                html += '</div>';
                if (enableScrollX()) {
                    var scrollXClass = 'scrollX hiddenScrollX';
                    if (layoutManager.tv) {
                        scrollXClass += ' smoothScrollX';
                    }

                    html += '<div is="emby-itemscontainer" class="itemsContainer ' + scrollXClass + ' padded-left padded-right">';
                } else {
                    html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
                }

                var supportsImageAnalysis = appHost.supports('imageanalysis');
                var cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
                cardLayout = false;
                html += cardBuilder.getCardsHtml(result.Items, {
                    preferThumb: section.preferThumb,
                    shape: section.shape,
                    centerText: section.centerText && !cardLayout,
                    overlayText: false !== section.overlayText,
                    showTitle: section.showTitle,
                    showParentTitle: section.showParentTitle,
                    scalable: true,
                    coverImage: section.coverImage,
                    overlayPlayButton: section.overlayPlayButton,
                    overlayMoreButton: section.overlayMoreButton && !cardLayout,
                    action: section.action,
                    allowBottomPadding: !enableScrollX(),
                    cardLayout: cardLayout
                });
                html += '</div>';
            }

            elem.innerHTML = html;
            imageLoader.lazyChildren(elem);
        });
    }

    function loadSections(page, userId, topParentId, types) {
        loading.show();
        var sections = getSections();
        var sectionid = getParameterByName('sectionid');

        if (sectionid) {
            sections = sections.filter(function (s) {
                return s.id === sectionid;
            });
        }

        if (types) {
            sections = sections.filter(function (s) {
                return -1 !== types.indexOf(s.id);
            });
        }

        var i;
        var length;
        var elem = page.querySelector('.favoriteSections');

        if (!elem.innerHTML) {
            var html = '';

            for (i = 0, length = sections.length; i < length; i++) {
                html += '<div class="verticalSection section' + sections[i].id + '"></div>';
            }

            elem.innerHTML = html;
        }

        var promises = [];

        for (i = 0, length = sections.length; i < length; i++) {
            var section = sections[i];
            elem = page.querySelector('.section' + section.id);
            promises.push(loadSection(elem, userId, topParentId, section, 1 === sections.length));
        }

        Promise.all(promises).then(function () {
            loading.hide();
        });
    }

    return {
        render: loadSections
    };
});