jellyfin-web/src/components/homesections/homesections.js

import layoutManager from 'components/layoutManager';
import globalize from 'scripts/globalize';
import { DEFAULT_SECTIONS, HomeSectionType } from 'types/homeSectionType';
import Dashboard from 'utils/dashboard';

import { loadRecordings } from './sections/activeRecordings';
import { loadLibraryButtons } from './sections/libraryButtons';
import { loadLibraryTiles } from './sections/libraryTiles';
import { loadLiveTV } from './sections/liveTv';
import { loadNextUp } from './sections/nextUp';
import { loadRecentlyAdded } from './sections/recentlyAdded';
import { loadResume } from './sections/resume';

import 'elements/emby-button/paper-icon-button-light';
import 'elements/emby-itemscontainer/emby-itemscontainer';
import 'elements/emby-scroller/emby-scroller';
import 'elements/emby-button/emby-button';

import './homesections.scss';

export function getDefaultSection(index) {
    if (index < 0 || index > DEFAULT_SECTIONS.length) return '';
    return DEFAULT_SECTIONS[index];
}

function getAllSectionsToShow(userSettings, sectionCount) {
    const sections = [];
    for (let i = 0, length = sectionCount; i < length; i++) {
        let section = userSettings.get('homesection' + i) || getDefaultSection(i);
        if (section === 'folders') {
            section = getDefaultSection(0);
        }

        sections.push(section);
    }

    // Ensure libraries are visible in TV layout
    if (
        layoutManager.tv
            && !sections.includes(HomeSectionType.SmallLibraryTiles)
            && !sections.includes(HomeSectionType.LibraryButtons)
    ) {
        return [
            HomeSectionType.SmallLibraryTiles,
            ...sections
        ];
    }

    return sections;
}

export function loadSections(elem, apiClient, user, userSettings) {
    return getUserViews(apiClient, user.Id).then(function (userViews) {
        let html = '';

        if (userViews.length) {
            const userSectionCount = 7;
            // TV layout can have an extra section to ensure libraries are visible
            const totalSectionCount = layoutManager.tv ? userSectionCount + 1 : userSectionCount;
            for (let i = 0; i < totalSectionCount; i++) {
                html += '<div class="verticalSection section' + i + '"></div>';
            }

            elem.innerHTML = html;
            elem.classList.add('homeSectionsContainer');

            const promises = [];
            const sections = getAllSectionsToShow(userSettings, userSectionCount);
            for (let i = 0; i < sections.length; i++) {
                promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
            }

            return Promise.all(promises)
                // Timeout for polyfilled CustomElements (webOS 1.2)
                .then(() => new Promise((resolve) => setTimeout(resolve, 0)))
                .then(() => {
                    return resume(elem, {
                        refresh: true
                    });
                });
        } else {
            let noLibDescription;
            if (user.Policy?.IsAdministrator) {
                noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
            } else {
                noLibDescription = globalize.translate('AskAdminToCreateLibrary');
            }

            html += '<div class="centerMessage padded-left padded-right">';
            html += '<h2>' + globalize.translate('MessageNothingHere') + '</h2>';
            html += '<p>' + noLibDescription + '</p>';
            html += '</div>';
            elem.innerHTML = html;

            const createNowLink = elem.querySelector('#button-createLibrary');
            if (createNowLink) {
                createNowLink.addEventListener('click', function () {
                    Dashboard.navigate('dashboard/libraries');
                });
            }
        }
    });
}

export function destroySections(elem) {
    const elems = elem.querySelectorAll('.itemsContainer');
    for (const e of elems) {
        e.fetchData = null;
        e.parentContainer = null;
        e.getItemsHtml = null;
    }

    elem.innerHTML = '';
}

export function pause(elem) {
    const elems = elem.querySelectorAll('.itemsContainer');
    for (const e of elems) {
        e.pause();
    }
}

export function resume(elem, options) {
    const elems = elem.querySelectorAll('.itemsContainer');
    const promises = [];

    for (let i = 0, length = elems.length; i < length; i++) {
        promises.push(elems[i].resume(options));
    }

    return Promise.all(promises);
}

function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
    const section = allSections[index];
    const elem = page.querySelector('.section' + index);
    const options = { enableOverflow: enableScrollX() };

    switch (section) {
        case HomeSectionType.ActiveRecordings:
            loadRecordings(elem, true, apiClient, options);
            break;
        case HomeSectionType.LatestMedia:
            loadRecentlyAdded(elem, apiClient, user, userViews, options);
            break;
        case HomeSectionType.LibraryButtons:
            loadLibraryButtons(elem, userViews);
            break;
        case HomeSectionType.LiveTv:
            return loadLiveTV(elem, apiClient, user, options);
        case HomeSectionType.NextUp:
            loadNextUp(elem, apiClient, userSettings, options);
            break;
        case HomeSectionType.Resume:
            return loadResume(elem, apiClient, 'HeaderContinueWatching', 'Video', userSettings, options);
        case HomeSectionType.ResumeAudio:
            return loadResume(elem, apiClient, 'HeaderContinueListening', 'Audio', userSettings, options);
        case HomeSectionType.ResumeBook:
            return loadResume(elem, apiClient, 'HeaderContinueReading', 'Book', userSettings, options);
        case HomeSectionType.SmallLibraryTiles:
            loadLibraryTiles(elem, userViews, options);
            break;
        default:
            elem.innerHTML = '';
    }

    return Promise.resolve();
}

function getUserViews(apiClient, userId) {
    return apiClient.getUserViews({}, userId || apiClient.getCurrentUserId()).then(function (result) {
        return result.Items;
    });
}

function enableScrollX() {
    return true;
}

export default {
    getDefaultSection,
    loadSections,
    destroySections,
    pause,
    resume
};