diff --git a/front/apps/web/package.json b/front/apps/web/package.json
index 3a4fe4b0..9cc36393 100644
--- a/front/apps/web/package.json
+++ b/front/apps/web/package.json
@@ -13,7 +13,6 @@
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
- "@jellyfin/libass-wasm": "^4.1.1",
"@kyoo/models": "workspace:^",
"@kyoo/primitives": "workspace:^",
"@kyoo/ui": "workspace:^",
@@ -28,6 +27,7 @@
"hls.js": "^1.2.8",
"i18next": "^22.0.6",
"jotai": "^1.10.0",
+ "libass-wasm": "^4.1.0",
"moti": "^0.21.0",
"next": "13.0.5",
"next-fonts": "^1.5.1",
diff --git a/front/packages/ui/src/player/subtitle-octopus.d.ts b/front/packages/ui/src/player/subtitle-octopus.d.ts
new file mode 100644
index 00000000..af1eca6c
--- /dev/null
+++ b/front/packages/ui/src/player/subtitle-octopus.d.ts
@@ -0,0 +1,142 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see .
+ */
+
+declare module "libass-wasm" {
+ interface OptionsBase {
+ /**
+ * The video element to attach listeners to
+ */
+ video?: HTMLVideoElement;
+
+ /**
+ * The canvas to render the subtitles to. If none is given it will create a new canvas and insert
+ * it as a sibling of the video element (only if the video element exists)
+ */
+ canvas?: HTMLCanvasElement;
+
+ /**
+ * The URL of the worker
+ *
+ * @default `subtitles-octopus-worker.js`
+ */
+ workerUrl?: string;
+
+ /**
+ * The URL of the legacy worker
+ *
+ * @default `subtitles-octopus-worker-legacy.js`
+ */
+ legacyWorkerUrl?: string;
+
+ /**
+ * An array of links to the fonts used in the subtitle
+ */
+ fonts?: string[];
+
+ /**
+ * Object with all available fonts - Key is font name in lower case, value is link
+ *
+ * @example `{"arial": "/font1.ttf"}`
+ */
+ availableFonts?: Record;
+
+ /**
+ * The amount of time the subtitles should be offset from the video
+ *
+ * @default 0
+ */
+ timeOffset?: number;
+
+ /**
+ * Whether performance info is printed in the console
+ *
+ * @default false
+ */
+ debug?: boolean;
+
+ /**
+ * Function that's called when SubtitlesOctopus is ready
+ */
+ onReady?: () => void;
+
+ /**
+ * Function called in case of critical error meaning the subtitles wouldn't be shown and you
+ * should use an alternative method (for instance it occurs if browser doesn't support web
+ * workers)
+ */
+ onError?: () => void;
+
+ /**
+ * Change the render mode
+ *
+ * @default wasm-blend
+ */
+ renderMode?: "js-blend" | "wasm-blend" | "lossy";
+ }
+
+ interface OptionsWithSubUrl extends OptionsBase {
+ subUrl: string;
+ }
+
+ interface OptionsWithSubContent extends OptionsBase {
+ subContent: string;
+ }
+
+ export type Options = OptionsWithSubUrl | OptionsWithSubContent;
+
+ declare class SubtitlesOctopus {
+ constructor(options: Options);
+
+ /**
+ * Render subtitles at specified time
+ *
+ * @param time
+ */
+ setCurrentTime(time: number): void;
+
+ /**
+ * Works the same as the {@link subUrl} option. It will set the subtitle to display by its URL.
+ *
+ * @param url
+ */
+ setTrackByUrl(url: string): void;
+
+ /**
+ * Works the same as the {@link subContent} option. It will set the subtitle to display by its
+ * content.
+ *
+ * @param content
+ */
+ setTrack(content: string): void;
+
+ /**
+ * This simply removes the subtitles. You can use {@link setTrackByUrl} or {@link setTrack} methods
+ * to set a new subtitle file to be displayed.
+ */
+ freeTrack(): void;
+
+ /**
+ * Destroy instance
+ */
+ dispose(): void;
+ }
+
+ export default SubtitlesOctopus;
+}
diff --git a/front/yarn.lock b/front/yarn.lock
index 70fa2853..172fa1d3 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -2192,13 +2192,6 @@ __metadata:
languageName: node
linkType: hard
-"@jellyfin/libass-wasm@npm:^4.1.1":
- version: 4.1.1
- resolution: "@jellyfin/libass-wasm@npm:4.1.1"
- checksum: 5621a42ca991be51527151eb343d41004ca6e996509703427fe91befe5fe2650206a4839b757ea4a7e770280176503bfcc92ae170470c3b174fa6936f83320fc
- languageName: node
- linkType: hard
-
"@jest/create-cache-key-function@npm:^29.0.3":
version: 29.3.1
resolution: "@jest/create-cache-key-function@npm:29.3.1"
@@ -8866,6 +8859,13 @@ __metadata:
languageName: node
linkType: hard
+"libass-wasm@npm:^4.1.0":
+ version: 4.1.0
+ resolution: "libass-wasm@npm:4.1.0"
+ checksum: a6ecc842594b36455b309aa3bb6ce3b59ada407ffbdc5e62bf657144dfce028c0a7d20dac34a9b3ed0b21d051b0daf14ea656f692e2aad3b1d66347a4ed95ec4
+ languageName: node
+ linkType: hard
+
"lines-and-columns@npm:^1.1.6":
version: 1.2.4
resolution: "lines-and-columns@npm:1.2.4"
@@ -13608,7 +13608,6 @@ __metadata:
dependencies:
"@emotion/react": ^11.9.3
"@emotion/styled": ^11.9.3
- "@jellyfin/libass-wasm": ^4.1.1
"@kyoo/models": "workspace:^"
"@kyoo/primitives": "workspace:^"
"@kyoo/ui": "workspace:^"
@@ -13630,6 +13629,7 @@ __metadata:
hls.js: ^1.2.8
i18next: ^22.0.6
jotai: ^1.10.0
+ libass-wasm: ^4.1.0
moti: ^0.21.0
next: 13.0.5
next-fonts: ^1.5.1