jellyfin-web/src/components/cardbuilder/cardBuilderUtils.js

const ASPECT_RATIOS = {
    portrait: (2 / 3),
    backdrop: (16 / 9),
    square: 1,
    banner: (1000 / 185)
};

/**
 * Computes the aspect ratio for a card given its shape.
 * @param {string} shape - Shape for which to get the aspect ratio.
 * @returns {null|number} Ratio of the shape.
 */
function getDesiredAspect(shape) {
    if (!shape) {
        return null;
    }

    shape = shape.toLowerCase();
    if (shape.indexOf('portrait') !== -1) {
        return ASPECT_RATIOS.portrait;
    }
    if (shape.indexOf('backdrop') !== -1) {
        return ASPECT_RATIOS.backdrop;
    }
    if (shape.indexOf('square') !== -1) {
        return ASPECT_RATIOS.square;
    }
    if (shape.indexOf('banner') !== -1) {
        return ASPECT_RATIOS.banner;
    }

    return null;
}

/**
 * Computes the number of posters per row.
 * @param {string} shape - Shape of the cards.
 * @param {number} screenWidth - Width of the screen.
 * @param {boolean} isOrientationLandscape - Flag for the orientation of the screen.
 * @param {boolean} isTV - Flag to denote if posters are rendered on a television screen.
 * @returns {number} Number of cards per row for an itemsContainer.
 */
function getPostersPerRow(shape, screenWidth, isOrientationLandscape, isTV) {
    switch (shape) {
        case 'portrait': return postersPerRowPortrait(screenWidth, isTV);
        case 'square': return postersPerRowSquare(screenWidth, isTV);
        case 'banner': return postersPerRowBanner(screenWidth);
        case 'backdrop': return postersPerRowBackdrop(screenWidth, isTV);
        case 'smallBackdrop': return postersPerRowSmallBackdrop(screenWidth);
        case 'overflowSmallBackdrop': return postersPerRowOverflowSmallBackdrop(screenWidth, isOrientationLandscape, isTV);
        case 'overflowPortrait': return postersPerRowOverflowPortrait(screenWidth, isOrientationLandscape, isTV);
        case 'overflowSquare': return postersPerRowOverflowSquare(screenWidth, isOrientationLandscape, isTV);
        case 'overflowBackdrop': return postersPerRowOverflowBackdrop(screenWidth, isOrientationLandscape, isTV);
        default: return 4;
    }
}

const postersPerRowPortrait = (screenWidth, isTV) => {
    switch (true) {
        case isTV: return 100 / 16.66666667;
        case screenWidth >= 2200: return 10;
        case screenWidth >= 1920: return 100 / 11.1111111111;
        case screenWidth >= 1600: return 8;
        case screenWidth >= 1400: return 100 / 14.28571428571;
        case screenWidth >= 1200: return 100 / 16.66666667;
        case screenWidth >= 800: return 5;
        case screenWidth >= 700: return 4;
        case screenWidth >= 500: return 100 / 33.33333333;
        default: return 100 / 33.33333333;
    }
};

const postersPerRowSquare = (screenWidth, isTV) => {
    switch (true) {
        case isTV: return 100 / 16.66666667;
        case screenWidth >= 2200: return 10;
        case screenWidth >= 1920: return 100 / 11.1111111111;
        case screenWidth >= 1600: return 8;
        case screenWidth >= 1400: return 100 / 14.28571428571;
        case screenWidth >= 1200: return 100 / 16.66666667;
        case screenWidth >= 800: return 5;
        case screenWidth >= 700: return 4;
        case screenWidth >= 500: return 100 / 33.33333333;
        default: return 2;
    }
};

const postersPerRowBanner = (screenWidth) => {
    switch (true) {
        case screenWidth >= 2200: return 4;
        case screenWidth >= 1200: return 100 / 33.33333333;
        case screenWidth >= 800: return 2;
        default: return 1;
    }
};

const postersPerRowBackdrop = (screenWidth, isTV) => {
    switch (true) {
        case isTV: return 4;
        case screenWidth >= 2500: return 6;
        case screenWidth >= 1600: return 5;
        case screenWidth >= 1200: return 4;
        case screenWidth >= 770: return 3;
        case screenWidth >= 420: return 2;
        default: return 1;
    }
};

function postersPerRowSmallBackdrop(screenWidth) {
    switch (true) {
        case screenWidth >= 1600: return 8;
        case screenWidth >= 1400: return 100 / 14.2857142857;
        case screenWidth >= 1200: return 100 / 16.66666667;
        case screenWidth >= 1000: return 5;
        case screenWidth >= 800: return 4;
        case screenWidth >= 500: return 100 / 33.33333333;
        default: return 2;
    }
}

const postersPerRowOverflowSmallBackdrop = (screenWidth, isLandscape, isTV) => {
    switch (true) {
        case isTV: return 100 / 18.9;
        case isLandscape && screenWidth >= 800: return 100 / 15.5;
        case isLandscape: return 100 / 23.3;
        case screenWidth >= 540: return 100 / 30;
        default: return 100 / 72;
    }
};

const postersPerRowOverflowPortrait = (screenWidth, isLandscape, isTV) => {
    switch (true) {
        case isTV: return 100 / 15.5;
        case isLandscape && screenWidth >= 1700: return 100 / 11.6;
        case isLandscape: return 100 / 15.5;
        case screenWidth >= 1400: return 100 / 15;
        case screenWidth >= 1200: return 100 / 18;
        case screenWidth >= 760: return 100 / 23;
        case screenWidth >= 400: return 100 / 31.5;
        default: return 100 / 42;
    }
};

const postersPerRowOverflowSquare = (screenWidth, isLandscape, isTV) => {
    switch (true) {
        case isTV: return 100 / 15.5;
        case isLandscape && screenWidth >= 1700: return 100 / 11.6;
        case isLandscape: return 100 / 15.5;
        case screenWidth >= 1400: return 100 / 15;
        case screenWidth >= 1200: return 100 / 18;
        case screenWidth >= 760: return 100 / 23;
        case screenWidth >= 540: return 100 / 31.5;
        default: return 100 / 42;
    }
};

const postersPerRowOverflowBackdrop = (screenWidth, isLandscape, isTV) => {
    switch (true) {
        case isTV: return 100 / 23.3;
        case isLandscape && screenWidth >= 1700: return 100 / 18.5;
        case isLandscape: return 100 / 23.3;
        case screenWidth >= 1800: return 100 / 23.5;
        case screenWidth >= 1400: return 100 / 30;
        case screenWidth >= 760: return 100 / 40;
        case screenWidth >= 640: return 100 / 56;
        default: return 100 / 72;
    }
};

export default {
    getDesiredAspect,
    getPostersPerRow
};