melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: format static/player/subtitles/index.ts

Browse Source
This commit is contained in:
mkelvers
2026-06-21 02:04:53 +02:00
committed by Milas Holsting
parent 7050ef3cb7
commit 14d08e93b3
1 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
static/player/subtitles/index.ts
View File

@@ -1,4 +1,5 @@
import type { SubtitleCue, SubtitleTrack } from "../types"; import type { SubtitleCue, SubtitleTrack } from "../types";
import { state } from "../state"; import { state } from "../state";
import { parseVtt } from "./vtt"; import { parseVtt } from "./vtt";
@@ -8,7 +9,9 @@ const proxyUrl = (token: string) => `/watch/proxy/subtitle?token=${encodeURIComp
// builds subtitle track list from current mode's source // builds subtitle track list from current mode's source
const subtitlesForMode = (): SubtitleTrack[] => { const subtitlesForMode = (): SubtitleTrack[] => {
const src = state.playback.modeSources[state.playback.currentMode]; const src = state.playback.modeSources[state.playback.currentMode];
if (!src?.subtitles) return []; if (!src?.subtitles) {
return [];
}
return src.subtitles return src.subtitles
.map((t) => ({ .map((t) => ({
lang: (t.lang || "unknown").toLowerCase(), lang: (t.lang || "unknown").toLowerCase(),
@@ -19,8 +22,10 @@ const subtitlesForMode = (): SubtitleTrack[] => {
}; };
const hideSubtitleText = (): void => { const hideSubtitleText = (): void => {
const el = state.elements.container.querySelector("[data-subtitle-text]") as HTMLElement | null; const el = state.elements.container.querySelector("[data-subtitle-text]");
if (!el) return; if (!el) {
return;
}
el.textContent = ""; el.textContent = "";
el.classList.remove("block"); el.classList.remove("block");
el.classList.add("hidden"); el.classList.add("hidden");
@@ -30,7 +35,9 @@ const hideSubtitleText = (): void => {
const loadSubtitle = async (url: string): Promise<SubtitleCue[]> => { const loadSubtitle = async (url: string): Promise<SubtitleCue[]> => {
try { try {
const res = await fetch(url); const res = await fetch(url);
if (!res.ok) throw new Error(`subtitle request failed with status ${res.status}`); if (!res.ok) {
throw new Error(`subtitle request failed with status ${res.status}`);
}
return parseVtt(await res.text()); return parseVtt(await res.text());
} catch (error) { } catch (error) {
console.error("failed to load subtitle:", error); console.error("failed to load subtitle:", error);
@@ -39,28 +46,29 @@ const loadSubtitle = async (url: string): Promise<SubtitleCue[]> => {
}; };
/** /**
* Rebuilds subtitle dropdown from current mode's available tracks. * Rebuilds subtitle dropdown from current mode's available tracks. Shows/hides dropdown based on
* Shows/hides dropdown based on availability. * availability.
*/ */
export const updateSubtitleOptions = (): void => { export const updateSubtitleOptions = (): void => {
const select = state.elements.container.querySelector( const select =
"[data-subtitle-select]", state.elements.container.querySelector<HTMLSelectElement>("[data-subtitle-select]");
) as HTMLSelectElement | null; if (!select) {
if (!select) return; return;
}
state.subtitles.tracks = subtitlesForMode(); state.subtitles.tracks = subtitlesForMode();
select.replaceChildren(); select.replaceChildren();
const none = document.createElement("option"); const none = document.createElement("option");
none.value = "none"; none.value = "none";
none.textContent = "Off"; none.textContent = "Off";
select.appendChild(none); select.append(none);
select.value = "none"; select.value = "none";
state.subtitles.tracks.forEach((t, i) => { state.subtitles.tracks.forEach((t, i) => {
const opt = document.createElement("option"); const opt = document.createElement("option");
opt.value = String(i); opt.value = String(i);
opt.textContent = t.label; opt.textContent = t.label;
select.appendChild(opt); select.append(opt);
}); });
const wrapper = select.parentElement; const wrapper = select.parentElement;
@@ -70,13 +78,15 @@ export const updateSubtitleOptions = (): void => {
}; };
/** /**
* Updates subtitle text display based on current video time. * Updates subtitle text display based on current video time. Finds active cue and shows/hides
* Finds active cue and shows/hides overlay. * overlay.
*/ */
export const updateSubtitleRender = (time: number): void => { export const updateSubtitleRender = (time: number): void => {
const el = state.elements.container.querySelector("[data-subtitle-text]") as HTMLElement | null; const el = state.elements.container.querySelector("[data-subtitle-text]");
if (!el) return; if (!el) {
if (!state.subtitles.activeCues.length) { return;
}
if (state.subtitles.activeCues.length === 0) {
hideSubtitleText(); hideSubtitleText();
return; return;
} }
@@ -108,14 +118,10 @@ export const updateSubtitleRender = (time: number): void => {
el.classList.remove("hidden"); el.classList.remove("hidden");
}; };
/** /** Binds subtitle select change handler. Loads and parses selected VTT track. */
* Binds subtitle select change handler.
* Loads and parses selected VTT track.
*/
export const setupSubtitles = (): void => { export const setupSubtitles = (): void => {
const select = state.elements.container.querySelector( const select =
"[data-subtitle-select]", state.elements.container.querySelector<HTMLSelectElement>("[data-subtitle-select]");
) as HTMLSelectElement | null;
select?.addEventListener("change", async () => { select?.addEventListener("change", async () => {
if (select.value === "none") { if (select.value === "none") {
state.subtitles.activeCues = []; state.subtitles.activeCues = [];