jellyfin · endrl · Apr 16, 2023 · Apr 17, 2023
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
   "scripts": {
     "analyze": "vite build --mode analyze",
     "build": "vite build",
+    "build-jellyfin-web": "cross-env BUILD_JELLYFIN_WEB=true vite build",
     "check": "npm run lint && npm run typecheck",
     "start": "vite",
     "serve": "vite preview",
@@ -57,9 +58,11 @@
     "@types/uuid": "9.0.1",
     "@typescript-eslint/eslint-plugin": "5.58.0",
     "@typescript-eslint/parser": "5.58.0",
+    "@vitejs/plugin-legacy": "4.0.2",
     "@vitejs/plugin-vue": "4.1.0",
     "autoprefixer": "10.4.14",
     "confusing-browser-globals": "1.0.11",
+    "cross-env": "7.0.3",
     "eslint": "8.38.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-import-resolver-typescript": "3.5.5",
@@ -82,12 +85,14 @@
     "prettier": "2.8.7",
     "rollup-plugin-visualizer": "5.9.0",
     "sass": "1.62.0",
+    "terser": "5.16.9",
     "typescript": "5.0.4",
     "unplugin-icons": "0.16.1",
     "unplugin-vue-components": "0.24.1",
     "unplugin-vue-router": "0.5.4",
     "vite": "4.2.1",
     "vite-plugin-pages": "0.29.0",
+    "vite-plugin-top-level-await": "1.3.0",
     "vite-plugin-vue-layouts": "0.8.0",
     "vue-eslint-parser": "9.1.1",
     "vue-i18n-extract": "2.0.7",
@@ -98,4 +103,4 @@
     "npm": ">=8.19.2",
     "yarn": "Yarn is not supported. Please use NPM."
   }
-}
+}
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
@@ -148,7 +148,10 @@ class PlaybackManagerStore {
    * that made the MediaSession controls disappear for a second. Keeping the metadata
    * as a global variable and updating it solves this problem.
    */
-  private _mediaMetadata = new MediaMetadata();
+  private _mediaMetadata = window.navigator.mediaSession
+    ? new MediaMetadata()
+    : undefined;
+
   public get status(): PlaybackStatus {
     return this._state.status;
   }
@@ -542,55 +545,57 @@ class PlaybackManagerStore {
    * Updates mediasession metadata based on the currently playing item
    */
   private _updateMediaSessionMetadata = (): void => {
-    this._mediaMetadata.title = this.currentItem?.Name ?? '';
-    this._mediaMetadata.artist = this.currentItem?.AlbumArtist ?? '';
-    this._mediaMetadata.album = this.currentItem?.Album ?? '';
-    this._mediaMetadata.artwork = this.currentItem
-      ? [
-          {
-            src:
-              getImageInfo(this.currentItem, {
-                width: 96
-              }).url || '',
-            sizes: '96x96'
-          },
-          {
-            src:
-              getImageInfo(this.currentItem, {
-                width: 128
-              }).url || '',
-            sizes: '128x128'
-          },
-          {
-            src:
-              getImageInfo(this.currentItem, {
-                width: 192
-              }).url || '',
-            sizes: '192x192'
-          },
-          {
-            src:
-              getImageInfo(this.currentItem, {
-                width: 256
-              }).url || '',
-            sizes: '256x256'
-          },
-          {
-            src:
-              getImageInfo(this.currentItem, {
-                width: 384
-              }).url || '',
-            sizes: '384x384'
-          },
-          {
-            src:
-              getImageInfo(this.currentItem, {
-                width: 512
-              }).url || '',
-            sizes: '512x512'
-          }
-        ]
-      : [];
+    if (window.navigator.mediaSession) {
+      this._mediaMetadata.title = this.currentItem?.Name ?? '';
+      this._mediaMetadata.artist = this.currentItem?.AlbumArtist ?? '';
+      this._mediaMetadata.album = this.currentItem?.Album ?? '';
+      this._mediaMetadata.artwork = this.currentItem
+        ? [
+            {
+              src:
+                getImageInfo(this.currentItem, {
+                  width: 96
+                }).url || '',
+              sizes: '96x96'
+            },
+            {
+              src:
+                getImageInfo(this.currentItem, {
+                  width: 128
+                }).url || '',
+              sizes: '128x128'
+            },
+            {
+              src:
+                getImageInfo(this.currentItem, {
+                  width: 192
+                }).url || '',
+              sizes: '192x192'
+            },
+            {
+              src:
+                getImageInfo(this.currentItem, {
+                  width: 256
+                }).url || '',
+              sizes: '256x256'
+            },
+            {
+              src:
+                getImageInfo(this.currentItem, {
+                  width: 384
+                }).url || '',
+              sizes: '384x384'
+            },
+            {
+              src:
+                getImageInfo(this.currentItem, {
+                  width: 512
+                }).url || '',
+              sizes: '512x512'
+            }
+          ]
+        : [];
+    }
   };
 
   /**

diff --git a/frontend/src/utils/external-config.ts b/frontend/src/utils/external-config.ts
@@ -47,7 +47,9 @@ function validateJsonConfig(
  */
 export async function getJSONConfig(): Promise<ExternalJSONConfig> {
   if (isNil(externalConfig)) {
-    const loadedConfig = await (await fetch('/config.json')).json();
+    const loadedConfig = await (
+      await fetch(import.meta.env.BASE_URL + 'config.json')
+    ).json();
 
     validateJsonConfig(loadedConfig);
 

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -21,6 +21,9 @@ import visualizer from 'rollup-plugin-visualizer';
 import virtual from '@rollup/plugin-virtual';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import autoprefixer from 'autoprefixer';
+// Browser compatibility
+import legacy from '@vitejs/plugin-legacy';
+import topLevelAwait from 'vite-plugin-top-level-await';
 /**
  * We need to match our locales to the date-fns ones for proper localization of dates.
  * In order to reduce bundle size, we calculate here (at build time) only the locales that we
@@ -66,6 +69,7 @@ const dfnsExports = localeFiles
 
 export default defineConfig(({ mode }): UserConfig => {
   const config: UserConfig = {
+    base: process.env.BUILD_JELLYFIN_WEB ? '/web/' : '/',
     server: {
       host: '0.0.0.0',
       port: 3000
@@ -206,5 +210,27 @@ export default defineConfig(({ mode }): UserConfig => {
     }
   };
 
+  /**
+   * Enable support for legacy webview app wrapper like LG WebOS 5
+   * Overwrites: build.target
+   * Build with 'npm run build-jellyfin-web'
+   */
+  if (process.env.BUILD_JELLYFIN_WEB) {
+    config.plugins?.push(
+      legacy({
+        targets: ['chrome >=68'],
+        modernPolyfills: true
+      })
+    );
+    config.plugins?.push(
+      topLevelAwait({
+        // The export name of top-level await promise for each chunk module
+        promiseExportName: '__tla',
+        // The function to generate import names of top-level await promise in each chunk module
+        promiseImportName: (i) => `__tla_${i}`
+      })
+    );
+  }
+
   return config;
 });