fix(app): startup due to lacking FontFace implementation in Firefox

Source: https://github.com/jellyfin/jellyfin-vue/issues/2432
Closes #2432
This commit is contained in:
Fernando Fernández 2024-08-21 14:06:44 +02:00
parent 5849830aca
commit 2b8f533b86
No known key found for this signature in database
GPG Key ID: 82FD36644F1F4D3B
2 changed files with 24 additions and 1 deletions

View File

@ -5,6 +5,7 @@
*/
import { createApp } from 'vue';
import { routes } from 'vue-router/auto-routes';
import { getFontFaces } from '@/utils/data-manipulation';
import Root from '@/App.vue';
import { hideDirective } from '@/plugins/directives';
import { vuePlugin as i18n } from '@/plugins/i18n';
@ -44,7 +45,7 @@ app.directive('hide', hideDirective);
*/
await Promise.all([
router.isReady(),
...[...document.fonts.keys()].map(font => font.load())
...getFontFaces().map(font => font.load())
]);
await document.fonts.ready;

View File

@ -31,3 +31,25 @@ export function mergeExcludingUnknown<T extends object, K extends keyof T>(
export function upperFirst<T extends string>(str: T): Capitalize<T> {
return (str[0].toUpperCase() + str.slice(1)) as Capitalize<T>;
}
/**
* Get the font faces present in the document.
*
* Instead of using a normal iterable (like `...[...document.fonts.keys()]`),
* we need this for Firefox compatibility.
*
* See https://github.com/jellyfin/jellyfin-vue/issues/2432
*/
export function getFontFaces() {
const iterable = document.fonts.keys();
const results = [];
let iterator = iterable.next();
while (iterator.done === false) {
results.push(iterator.value);
iterator = iterable.next();
}
return results;
}