Add toPercent utility for compatibility

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(), {
+        this.querySelector('.progressring-text').innerHTML = toPercent(progress / 100, getCurrentDateTimeLocale());
-            style: 'percent',
-            maximumFractionDigits: 0
-        }).format(progress / 100);
     };
 
     EmbyProgressRing.attachedCallback = function () {

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)}%`;
+}