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

chore: format player subtitles

Browse Source
This commit is contained in:
mkelvers
2026-05-28 11:29:23 +02:00
committed by Milas Holsting
parent e500af6102
commit c2650aae07
2 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import type { SubtitleCue, SubtitleTrack } from '../types';
import { state } from '../state';
import { parseVtt } from './vtt';
import type { SubtitleCue, SubtitleTrack } from "../types";
import { state } from "../state";
import { parseVtt } from "./vtt";
// proxy subtitle URL through backend (avoids CORS)
const proxyUrl = (token: string) => `/watch/proxy/subtitle?token=${encodeURIComponent(token)}`;
@@ -10,20 +10,20 @@ const subtitlesForMode = (): SubtitleTrack[] => {
const src = state.modeSources[state.currentMode];
if (!src?.subtitles) return [];
return src.subtitles
.map(t => ({
lang: (t.lang || 'unknown').toLowerCase(),
label: t.lang || 'Unknown',
.map((t) => ({
lang: (t.lang || "unknown").toLowerCase(),
label: t.lang || "Unknown",
url: proxyUrl(t.token),
}))
.filter(t => t.url !== '');
.filter((t) => t.url !== "");
};
const hideSubtitleText = (): void => {
const el = state.container.querySelector('[data-subtitle-text]') as HTMLElement | null;
const el = state.container.querySelector("[data-subtitle-text]") as HTMLElement | null;
if (!el) return;
el.textContent = '';
el.classList.remove('block');
el.classList.add('hidden');
el.textContent = "";
el.classList.remove("block");
el.classList.add("hidden");
};
// fetches and parses VTT from proxy URL
@@ -43,27 +43,27 @@ const loadSubtitle = async (url: string): Promise<SubtitleCue[]> => {
*/
export const updateSubtitleOptions = (): void => {
const select = state.container.querySelector(
'[data-subtitle-select]'
"[data-subtitle-select]",
) as HTMLSelectElement | null;
if (!select) return;
state.currentSubtitleTracks = subtitlesForMode();
select.innerHTML = '';
select.innerHTML = "";
const none = document.createElement('option');
none.value = 'none';
none.textContent = 'Off';
const none = document.createElement("option");
none.value = "none";
none.textContent = "Off";
select.appendChild(none);
select.value = 'none';
select.value = "none";
state.currentSubtitleTracks.forEach((t, i) => {
const opt = document.createElement('option');
const opt = document.createElement("option");
opt.value = String(i);
opt.textContent = t.label;
select.appendChild(opt);
});
const wrapper = select.parentElement;
wrapper?.classList.toggle('hidden', state.currentSubtitleTracks.length === 0);
wrapper?.classList.toggle("hidden", state.currentSubtitleTracks.length === 0);
state.activeSubtitles = [];
hideSubtitleText();
};
@@ -73,7 +73,7 @@ export const updateSubtitleOptions = (): void => {
* Finds active cue and shows/hides overlay.
*/
export const updateSubtitleRender = (time: number): void => {
const el = state.container.querySelector('[data-subtitle-text]') as HTMLElement | null;
const el = state.container.querySelector("[data-subtitle-text]") as HTMLElement | null;
if (!el) return;
if (!state.activeSubtitles.length) {
hideSubtitleText();
@@ -104,7 +104,7 @@ export const updateSubtitleRender = (time: number): void => {
}
el.textContent = cue.text;
el.classList.remove('hidden');
el.classList.remove("hidden");
};
/**
@@ -113,10 +113,10 @@ export const updateSubtitleRender = (time: number): void => {
*/
export const setupSubtitles = (): void => {
const select = state.container.querySelector(
'[data-subtitle-select]'
"[data-subtitle-select]",
) as HTMLSelectElement | null;
select?.addEventListener('change', async () => {
if (select.value === 'none') {
select?.addEventListener("change", async () => {
if (select.value === "none") {
state.activeSubtitles = [];
hideSubtitleText();
return;