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