diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js index f174fd6170..63d9fd2221 100644 --- a/src/elements/emby-progressring/emby-progressring.js +++ b/src/elements/emby-progressring/emby-progressring.js @@ -2,6 +2,7 @@ import './emby-progressring.scss'; import 'webcomponents.js/webcomponents-lite'; import template from './emby-progressring.template.html'; import { getCurrentDateTimeLocale } from '../../scripts/globalize'; +import { toPercent } from '../../utils/number.ts'; /* eslint-disable indent */ @@ -72,10 +73,7 @@ import { getCurrentDateTimeLocale } from '../../scripts/globalize'; this.querySelector('.animate-75-100-b').style.transform = 'rotate(' + angle + 'deg)'; } - this.querySelector('.progressring-text').innerHTML = new Intl.NumberFormat(getCurrentDateTimeLocale(), { - style: 'percent', - maximumFractionDigits: 0 - }).format(progress / 100); + this.querySelector('.progressring-text').innerHTML = toPercent(progress / 100, getCurrentDateTimeLocale()); }; EmbyProgressRing.attachedCallback = function () { diff --git a/src/utils/number.ts b/src/utils/number.ts new file mode 100644 index 0000000000..20479fa9a4 --- /dev/null +++ b/src/utils/number.ts @@ -0,0 +1,23 @@ +function toLocaleStringSupportsOptions() { + return !!(typeof Intl === 'object' && Intl && typeof Intl.NumberFormat === 'function'); +} + +/** + * Gets the value of a number formatted as a perentage. + * @param {number} value The value as a number. + * @returns {string} The value formatted as a percentage. + */ +export function toPercent(value: number | null | undefined, locale: string): string { + if (value == null) { + return ''; + } + + if (toLocaleStringSupportsOptions()) { + return value.toLocaleString(locale, { + style: 'percent', + maximumFractionDigits: 0 + }); + } + + return `${Math.round(value * 100)}%`; +}