Vincent/FlightTube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: subtitles centred and quieter

Browse Source 
The captions were pinned to one side and set for a television across a
room. Verified fixed in the running app: centred at the bottom of the
picture, smaller, on a translucent ground instead of solid black.

The position was not in the file — the embedded track extracts to
WebVTT with no cue settings at all. It was the element's in-band
rendering: WebKit hands a container's own subtitle stream to the media
pipeline, which places it wherever the container's text box points and
which no CSS can reach.

So the player reads the stream out of the file with ffmpeg — about
40ms, no re-encoding — and attaches it as an ordinary track. The
download stays one self-contained file; the cues become ours to place
and style. The file's own track is filtered out of the menu and left
disabled, or the same captions would be offered twice and the in-band
copy would render underneath.

Cue styling: 58% of WebKit's default size, on slate at 55% rather than
opaque black.
This commit is contained in:
vincent
2026-08-29 17:35:09 +02:00
parent 2121f3e475
commit 8dade59bb4
6 changed files with 123 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Player.tsx
+21 -23
View File
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import {
fetchSubtitles, fileUrl, listSubtitles, openExternal, resolveStream, savePlayback,
embeddedSubtitles, fetchSubtitles, fileUrl, listSubtitles, openExternal, resolveStream,
savePlayback,
} from "../api";
import { DEFAULT_SUB_LANG, type FeedItem } from "../types";
import { compactViews, relativeTime, subtitleLabel } from "./format";
@@ -143,43 +144,40 @@ export default function Player({
setTracks([]);
setFetchingSubs(false);
// A download made since subtitles became embedded carries them inside the
// file, where the element exposes them itself. Give it until the metadata
// is parsed to say so before going to the network for something already on
// disk — which would also fail offline.
const hasEmbedded = async () => {
const v = videoRef.current;
if (!v) return false;
for (let i = 0, settled = 0; i < 20 && settled < 3; i++) {
if (v.textTracks.length > 0) return true;
if (v.readyState >= 1) settled++;
await new Promise((r) => setTimeout(r, 150));
}
return (videoRef.current?.textTracks.length ?? 0) > 0;
};
const asBlobs = (list: Array<[string, string]>) =>
list.map(([lang, text]) => {
const url = URL.createObjectURL(new Blob([text], { type: "text/vtt" }));
blobs.push(url);
return [lang, url] as [string, string];
});
const load = async () => {
if (path) {
// Muxed into the download, which is where they belong — but read out
// rather than left to the element's in-band rendering, which the media
// pipeline draws wherever the container's text box points and which no
// styling can reach.
const inside = await embeddedSubtitles(item.id).catch(() => []);
if (cancelled) return;
if (inside.length > 0) {
setTracks(asBlobs(inside));
return;
}
// Downloads from before subtitles were embedded kept them beside the
// file instead.
const local = await listSubtitles(item.id).catch(() => []);
if (cancelled) return;
if (local.length > 0) {
setTracks(local.map(([lang, file]) => [lang, fileUrl(file)]));
return;
}
if (await hasEmbedded()) return;
}
if (cancelled) return;
setFetchingSubs(true);
try {
const list = await fetchSubtitles(item.id, wantLang);
if (cancelled) return;
setTracks(
list.map(([lang, text]) => {
const url = URL.createObjectURL(new Blob([text], { type: "text/vtt" }));
blobs.push(url);
return [lang, url] as [string, string];
}),
);
setTracks(asBlobs(list));
} catch {
/* a video with no captions in this language is an ordinary outcome */
} finally {