fix: subtitles centred and quieter

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.

src/components/Player.tsx

@@ -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 {

src/components/PlayerControls.tsx

@@ -2,10 +2,20 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 import { subtitleLabel } from "./format";
 
+/**
+ * Only the tracks this app attached.
+ *
+ * A downloaded file carries its own subtitle stream and WebKit exposes that
+ * here too. Listing it would offer the same captions twice, and the in-band
+ * copy is the one the media pipeline draws wherever the container's text box
+ * points, out of reach of any styling. The app reads that stream out of the
+ * file and attaches it itself instead.
+ */
 function listSubs(v: HTMLVideoElement | null): TextTrack[] {
   if (!v) return [];
+  const own = new Set(Array.from(v.querySelectorAll("track")).map((el) => el.track));
   return Array.from(v.textTracks).filter(
-    (t) => t.kind === "subtitles" || t.kind === "captions",
+    (t) => own.has(t) && (t.kind === "subtitles" || t.kind === "captions"),
   );
 }
 
@@ -84,9 +94,11 @@ export default function PlayerControls({
       const wanted =
         subLang === "off"
           ? undefined
-          : tracks.find((t) =>
+          : listSubs(v).find((t) =>
               (t.language || "").toLowerCase().startsWith(subLang.toLowerCase()),
             );
+      // Everything else off, in-band tracks included — otherwise the file's own
+      // copy renders underneath ours.
       for (const t of tracks) t.mode = t === wanted ? "showing" : "disabled";
       read();
     };