ArtPlayer/packages/artplayer/src/setting/aspectRatio.js

import Setting from './';

export default function aspectRatio(art) {
    const {
        i18n,
        icons,
        constructor: { SETTING_ITEM_WIDTH, ASPECT_RATIO },
    } = art;

    function getI18n(value) {
        return value === 'default' ? i18n.get('Default') : value;
    }

    function update(item) {
        const tooltip = getI18n(art.aspectRatio);
        Setting.select(item, art.aspectRatio, tooltip);
    }

    return {
        width: SETTING_ITEM_WIDTH,
        name: 'aspect-ratio',
        html: i18n.get('Aspect Ratio'),
        icon: icons.aspectRatio,
        tooltip: getI18n(art.aspectRatio),
        selector: ASPECT_RATIO.map((item) => {
            return {
                value: item,
                name: `aspect-ratio-${item}`,
                get default() {
                    return item === art.aspectRatio;
                },
                html: getI18n(item),
            };
        }),
        onSelect(item) {
            art.aspectRatio = item.value;
            return item.html;
        },
        mounted: (_, item) => {
            update(item);
            art.on('aspectRatio', () => update(item));
        },
    };
}