Merge pull request #4357 from ThaUnknown/jassub

feat: migrate from JavascriptSubtitlesOctopus to JASSUB

.escheckrc

@@ -6,7 +6,6 @@
         "./dist/libraries/pdf.worker.js",
         "./dist/libraries/worker-bundle.js",
         "./dist/libraries/wasm-gen/libarchive.js",
-        "./dist/node_modules.@jellyfin.libass-wasm.*.chunk.js",
         "./dist/serviceworker.js"
     ]
 }

babel.config.js

@@ -12,14 +12,7 @@ module.exports = {
                 corejs: 3
             }
         ],
-        '@babel/preset-react',
+        '@babel/preset-react'
-        [
-            '@babel/preset-typescript',
-            {
-                isTSX: true,
-                allExtensions: true
-            }
-        ]
     ],
     plugins: [
         '@babel/plugin-proposal-class-properties',

package-lock.json

@@ -15,7 +15,6 @@
         "@fontsource/noto-sans-kr": "4.5.12",
         "@fontsource/noto-sans-sc": "4.5.12",
         "@fontsource/noto-sans-tc": "4.5.12",
-        "@jellyfin/libass-wasm": "4.1.1",
         "@jellyfin/sdk": "unstable",
         "@loadable/component": "5.15.3",
         "blurhash": "2.0.5",
@@ -26,12 +25,14 @@
         "dompurify": "3.0.1",
         "epubjs": "0.3.93",
         "escape-html": "1.0.3",
+        "event-target-polyfill": "github:ThaUnknown/event-target-polyfill",
         "fast-text-encoding": "1.0.6",
         "flv.js": "1.6.2",
         "headroom.js": "0.12.0",
         "history": "5.3.0",
         "hls.js": "1.2.4",
         "intersection-observer": "0.12.2",
+        "jassub": "1.5.12",
         "jellyfin-apiclient": "1.10.0",
         "jquery": "3.6.4",
         "jstree": "3.3.15",
@@ -2638,11 +2639,6 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
-    "node_modules/@jellyfin/libass-wasm": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@jellyfin/libass-wasm/-/libass-wasm-4.1.1.tgz",
-      "integrity": "sha512-xQVJw+lZUg4U1TmLS80reBECfPtpCgRF8hhUSvUUQM9g68OvINyUU3K2yqRH+8tomGpghiRaIcr/bUJ83e0veA=="
-    },
     "node_modules/@jellyfin/sdk": {
       "version": "0.0.0-unstable.202304122102",
       "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202304122102.tgz",
@@ -7332,6 +7328,11 @@
         "es5-ext": "~0.10.14"
       }
     },
+    "node_modules/event-target-polyfill": {
+      "version": "0.0.3",
+      "resolved": "git+ssh://git@github.com/ThaUnknown/event-target-polyfill.git#5cb9a0ed6774af1b905b525964316911375726a7",
+      "license": "MIT"
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -9686,6 +9687,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jassub": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/jassub/-/jassub-1.5.12.tgz",
+      "integrity": "sha512-CJiuNCXMMGqfmVVlaDyxqaKfOy3RIHW4HBwVWvbq8pl/d1/y1fgTarfR31whUUupHZCe7Tfq8XB7WDgdu6IHaA==",
+      "dependencies": {
+        "rvfc-polyfill": "^1.0.4"
+      }
+    },
     "node_modules/jellyfin-apiclient": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/jellyfin-apiclient/-/jellyfin-apiclient-1.10.0.tgz",
@@ -13720,6 +13729,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rvfc-polyfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rvfc-polyfill/-/rvfc-polyfill-1.0.4.tgz",
+      "integrity": "sha512-BemRbBDZiLB8pxoPT+2q6R30ykY1e75XBE/L1A0Ubd/3KdUoCQLqI/z4v4oNFNlN3/Rs93d3b6WoybnXhdebkw=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -20994,11 +21008,6 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
-    "@jellyfin/libass-wasm": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@jellyfin/libass-wasm/-/libass-wasm-4.1.1.tgz",
-      "integrity": "sha512-xQVJw+lZUg4U1TmLS80reBECfPtpCgRF8hhUSvUUQM9g68OvINyUU3K2yqRH+8tomGpghiRaIcr/bUJ83e0veA=="
-    },
     "@jellyfin/sdk": {
       "version": "0.0.0-unstable.202304122102",
       "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202304122102.tgz",
@@ -24572,6 +24581,10 @@
         "es5-ext": "~0.10.14"
       }
     },
+    "event-target-polyfill": {
+      "version": "git+ssh://git@github.com/ThaUnknown/event-target-polyfill.git#5cb9a0ed6774af1b905b525964316911375726a7",
+      "from": "event-target-polyfill@github:ThaUnknown/event-target-polyfill"
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -26323,6 +26336,14 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
+    "jassub": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/jassub/-/jassub-1.5.12.tgz",
+      "integrity": "sha512-CJiuNCXMMGqfmVVlaDyxqaKfOy3RIHW4HBwVWvbq8pl/d1/y1fgTarfR31whUUupHZCe7Tfq8XB7WDgdu6IHaA==",
+      "requires": {
+        "rvfc-polyfill": "^1.0.4"
+      }
+    },
     "jellyfin-apiclient": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/jellyfin-apiclient/-/jellyfin-apiclient-1.10.0.tgz",
@@ -29235,6 +29256,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rvfc-polyfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rvfc-polyfill/-/rvfc-polyfill-1.0.4.tgz",
+      "integrity": "sha512-BemRbBDZiLB8pxoPT+2q6R30ykY1e75XBE/L1A0Ubd/3KdUoCQLqI/z4v4oNFNlN3/Rs93d3b6WoybnXhdebkw=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",

package.json

@@ -74,7 +74,6 @@
     "@fontsource/noto-sans-kr": "4.5.12",
     "@fontsource/noto-sans-sc": "4.5.12",
     "@fontsource/noto-sans-tc": "4.5.12",
-    "@jellyfin/libass-wasm": "4.1.1",
     "@jellyfin/sdk": "unstable",
     "@loadable/component": "5.15.3",
     "blurhash": "2.0.5",
@@ -85,12 +84,14 @@
     "dompurify": "3.0.1",
     "epubjs": "0.3.93",
     "escape-html": "1.0.3",
+    "event-target-polyfill": "github:ThaUnknown/event-target-polyfill",
     "fast-text-encoding": "1.0.6",
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
     "history": "5.3.0",
     "hls.js": "1.2.4",
     "intersection-observer": "0.12.2",
+    "jassub": "1.5.12",
     "jellyfin-apiclient": "1.10.0",
     "jquery": "3.6.4",
     "jstree": "3.3.15",
@@ -131,8 +132,8 @@
   "scripts": {
     "start": "npm run serve",
     "serve": "webpack serve --config webpack.dev.js",
-    "build:development": "webpack --config webpack.dev.js",
+    "build:development": "cross-env NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.dev.js",
-    "build:production": "cross-env NODE_ENV=\"production\" webpack --config webpack.prod.js",
+    "build:production": "cross-env NODE_ENV=\"production\" NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.prod.js",
     "build:check": "tsc --noEmit",
     "escheck": "es-check",
     "lint": "eslint \"./\"",

src/plugins/htmlVideoPlayer/plugin.js

@@ -209,13 +209,9 @@ function tryRemoveElement(elem) {
         /**
          * @type {any | null | undefined}
          */
-        #currentSubtitlesOctopus;
-        /**
-         * @type {null | undefined}
-         */
         #currentAssRenderer;
         /**
-         * @type {number | undefined}
+         * @type {null | undefined}
          */
         #customTrackIndex;
         /**
@@ -585,9 +581,9 @@ function tryRemoveElement(elem) {
             const offsetValue = parseFloat(offset);
 
             // if .ass currently rendering
-            if (this.#currentSubtitlesOctopus) {
+            if (this.#currentAssRenderer) {
                 this.updateCurrentTrackOffset(offsetValue);
-                this.#currentSubtitlesOctopus.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + offsetValue;
+                this.#currentAssRenderer.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + offsetValue;
             } else {
                 const trackElements = this.getTextTracks();
                 // if .vtt currently rendering
@@ -978,10 +974,8 @@ function tryRemoveElement(elem) {
                 loading.hide();
 
                 seekOnPlaybackStart(this, e.target, this._currentPlayOptions.playerStartPositionTicks, () => {
-                    if (this.#currentSubtitlesOctopus) {
+                    if (this.#currentAssRenderer) {
-                        this.#currentSubtitlesOctopus.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + this.#currentTrackOffset;
+                        this.#currentAssRenderer.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + this.#currentTrackOffset;
-                        this.#currentSubtitlesOctopus.resize();
-                        this.#currentSubtitlesOctopus.resetRenderAheadCache(false);
                     }
                 });
 
@@ -1169,15 +1163,9 @@ function tryRemoveElement(elem) {
             this.#currentClock = null;
             this._currentAspectRatio = null;
 
-            const octopus = this.#currentSubtitlesOctopus;
+            const jassub = this.#currentAssRenderer;
-            if (octopus) {
+            if (jassub) {
-                octopus.dispose();
+                jassub.destroy();
-            }
-            this.#currentSubtitlesOctopus = null;
-
-            const renderer = this.#currentAssRenderer;
-            if (renderer) {
-                renderer.setEnabled(false);
             }
             this.#currentAssRenderer = null;
         }
@@ -1266,59 +1254,68 @@ function tryRemoveElement(elem) {
             const fallbackFontList = apiClient.getUrl('/FallbackFont/Fonts', {
                 api_key: apiClient.accessToken()
             });
-            const htmlVideoPlayer = this;
             const options = {
                 video: videoElement,
                 subUrl: getTextTrackUrl(track, item),
                 fonts: avaliableFonts,
-                workerUrl: `${appRouter.baseUrl()}/libraries/subtitles-octopus-worker.js`,
+                fallbackFont: 'liberation sans',
-                legacyWorkerUrl: `${appRouter.baseUrl()}/libraries/subtitles-octopus-worker-legacy.js`,
+                availableFonts: { 'liberation sans': `${appRouter.baseUrl()}/default.woff2` },
-                onError() {
+                // Disabled eslint compat, but is safe as corejs3 polyfills URL
-                    // HACK: Clear JavascriptSubtitlesOctopus: it gets disposed when an error occurs
+                // eslint-disable-next-line compat/compat
-                    htmlVideoPlayer.#currentSubtitlesOctopus = null;
+                workerUrl: new URL('jassub/dist/jassub-worker.js', import.meta.url),
-
+                // eslint-disable-next-line compat/compat
-                    // HACK: Give JavascriptSubtitlesOctopus time to dispose itself
+                legacyWorkerUrl: new URL('jassub/dist/jassub-worker-legacy.js', import.meta.url),
-                    setTimeout(() => {
-                        onErrorInternal(htmlVideoPlayer, 'mediadecodeerror');
-                    }, 0);
-                },
                 timeOffset: (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000,
-
+                // new jassub options; override all, even defaults
-                // new octopus options; override all, even defaults
+                blendMode: 'js',
-                renderMode: 'wasm-blend',
+                asyncRender: true,
+                // firefox implements offscreen canvas, but not according to spec which causes errors
+                offscreenRender: !browser.firefox,
+                // RVFC is polyfilled everywhere, but webOS 2 reports polyfill API's as functional even tho they aren't
+                onDemandRender: browser.web0sVersion !== 2,
+                useLocalFonts: true,
                 dropAllAnimations: false,
                 libassMemoryLimit: 40,
                 libassGlyphLimit: 40,
                 targetFps: 24,
                 prescaleFactor: 0.8,
                 prescaleHeightLimit: 1080,
-                maxRenderHeight: 2160,
+                maxRenderHeight: 2160
-                resizeVariation: 0.2,
-                renderAhead: 90
             };
-            import('@jellyfin/libass-wasm').then(({ default: SubtitlesOctopus }) => {
+            // TODO: replace with `event-target-polyfill` once https://github.com/benlesh/event-target-polyfill/pull/12 or 11 is merged
-                Promise.all([
+            import('event-target-polyfill').then(() => {
-                    apiClient.getNamedConfiguration('encoding'),
+                import('jassub').then(({ default: JASSUB }) => {
-                    // Worker in Tizen 5 doesn't resolve relative path with async request
+                    Promise.all([
-                    resolveUrl(options.workerUrl),
+                        apiClient.getNamedConfiguration('encoding'),
-                    resolveUrl(options.legacyWorkerUrl)
+                        // Worker in Tizen 5 doesn't resolve relative path with async request
-                ]).then(([config, workerUrl, legacyWorkerUrl]) => {
+                        resolveUrl(options.workerUrl),
-                    options.workerUrl = workerUrl;
+                        resolveUrl(options.legacyWorkerUrl)
-                    options.legacyWorkerUrl = legacyWorkerUrl;
+                    ]).then(([config, workerUrl, legacyWorkerUrl]) => {
+                        options.workerUrl = workerUrl;
+                        options.legacyWorkerUrl = legacyWorkerUrl;
 
-                    if (config.EnableFallbackFont) {
+                        const cleanup = () => {
-                        apiClient.getJSON(fallbackFontList).then((fontFiles = []) => {
+                            this.#currentAssRenderer.destroy();
-                            fontFiles.forEach(font => {
+                            this.#currentAssRenderer = null;
-                                const fontUrl = apiClient.getUrl(`/FallbackFont/Fonts/${font.Name}`, {
+                            onErrorInternal(this, 'mediadecodeerror');
-                                    api_key: apiClient.accessToken()
+                        };
+
+                        if (config.EnableFallbackFont) {
+                            apiClient.getJSON(fallbackFontList).then((fontFiles = []) => {
+                                fontFiles.forEach(font => {
+                                    const fontUrl = apiClient.getUrl(`/FallbackFont/Fonts/${font.Name}`, {
+                                        api_key: apiClient.accessToken()
+                                    });
+                                    avaliableFonts.push(fontUrl);
                                 });
-                                avaliableFonts.push(fontUrl);
+                                this.#currentAssRenderer = new JASSUB(options);
+                                this.#currentAssRenderer.addEventListener('error', cleanup, { once: true });
                             });
-                            this.#currentSubtitlesOctopus = new SubtitlesOctopus(options);
+                        } else {
-                        });
+                            this.#currentAssRenderer = new JASSUB(options);
-                    } else {
+                            this.#currentAssRenderer.addEventListener('error', cleanup, { once: true });
-                        this.#currentSubtitlesOctopus = new SubtitlesOctopus(options);
+                        }
-                    }
+                    });
                 });
             });
         }

src/plugins/htmlVideoPlayer/style.scss

@@ -17,7 +17,7 @@
     z-index: 1000;
 }
 
-.videoPlayerContainer .libassjs-canvas-parent {
+.videoPlayerContainer .JASSUB {
     order: -1;
 }
 

webpack.common.js

@@ -8,15 +8,14 @@ const { DefinePlugin } = require('webpack');
 const Assets = [
     'native-promise-only/npo.js',
     'libarchive.js/dist/worker-bundle.js',
-    '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.js',
-    '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.data',
-    '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.wasm',
-    '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker-legacy.js',
-    '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker-legacy.data',
-    '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker-legacy.js.mem',
     'pdfjs-dist/build/pdf.worker.js'
 ];
 
+const JassubWasm = [
+    'jassub/dist/jassub-worker.wasm',
+    'jassub/dist/default.woff2'
+];
+
 const LibarchiveWasm = [
     'libarchive.js/dist/wasm-gen/libarchive.js',
     'libarchive.js/dist/wasm-gen/libarchive.wasm'
@@ -83,6 +82,14 @@ const config = {
                     to: path.resolve(__dirname, './dist/libraries/wasm-gen')
                 };
             })
+        }),
+        new CopyPlugin({
+            patterns: JassubWasm.map(asset => {
+                return {
+                    from: path.resolve(__dirname, `./node_modules/${asset}`),
+                    to: path.resolve(__dirname, './dist')
+                };
+            })
         })
     ],
     output: {
@@ -147,7 +154,8 @@ const config = {
             {
                 test: /\.(js|jsx)$/,
                 include: [
-                    path.resolve(__dirname, 'node_modules/@jellyfin/libass-wasm'),
+                    path.resolve(__dirname, 'node_modules/event-target-polyfill'),
+                    path.resolve(__dirname, 'node_modules/rvfc-polyfill'),
                     path.resolve(__dirname, 'node_modules/@jellyfin/sdk'),
                     path.resolve(__dirname, 'node_modules/@remix-run/router'),
                     path.resolve(__dirname, 'node_modules/@uupaa/dynamic-import-polyfill'),
@@ -174,6 +182,20 @@ const config = {
                     }
                 }]
             },
+            {
+                test: /\.js$/,
+                include: [
+                    path.resolve(__dirname, 'node_modules/jassub')
+                ],
+                use: [{
+                    loader: 'babel-loader',
+                    options: {
+                        cacheCompression: false,
+                        cacheDirectory: true,
+                        presets: ['@babel/preset-env']
+                    }
+                }]
+            },
             {
                 test: /\.worker\.ts$/,
                 exclude: /node_modules/,