feat: durations, clean subtitles, icon buttons

Subtitles rendered pinned to the left edge and clipped, in half-grey
karaoke text: YouTube's auto-captions carry align:start position:0% on
every cue plus inline <00:00:12.480><c>word</c> timing tags. Both are
now stripped after download, and existing downloads are tidied the first
time they are listed.

Thumbnails show video length. The Atom feed carries no duration, so it
is read from the watch page and cached — but only a trickle. The first
version fetched 24 pages every 12 seconds at six concurrent, roughly two
requests a second sustained, and YouTube answered by challenging the
whole IP: 'Sign in to confirm you are not a bot', which broke streaming
and downloads too. It is now four pages every five minutes, one at a
time, and stops for the session the moment a batch is refused.

A subtitle chosen in the player becomes the stored preference, so the
next video matches without going back to Settings.

The back and download buttons are square icon buttons; the back glyph
was off-centre because px-2 beat the p-0 meant to clear it.
This commit is contained in:
vincent
2026-08-29 14:07:17 +02:00
parent e080715f3b
commit 7aae080e46
10 changed files with 350 additions and 14 deletions
+10 -2
View File
@@ -3,7 +3,7 @@ import type { LiveDownload } from "../hooks/useDownloads";
import type { FeedItem } from "../types";
import DownloadButton from "./DownloadButton";
import WatchBar from "./WatchBar";
import { compactViews, relativeTime } from "./format";
import { clockDuration, compactViews, relativeTime } from "./format";
interface Props {
item: FeedItem;
@@ -46,12 +46,20 @@ export default function VideoTile({
)}
{downloaded && (
<span
className="absolute bottom-2 right-1.5 rounded bg-sky-500 px-1 py-0.5 text-[9px]
className="absolute bottom-2 left-1.5 rounded bg-sky-500 px-1 py-0.5 text-[9px]
font-bold uppercase tracking-widest leading-none text-white"
>
Offline
</span>
)}
{clockDuration(item.duration) && (
<span
className="absolute bottom-1.5 right-1.5 rounded bg-slate-950/80 px-1 py-0.5
font-mono text-[10px] leading-none tabular-nums text-white"
>
{clockDuration(item.duration)}
</span>
)}
<WatchBar item={item} />
</button>