Files: re-encode a video the browser can't play, on the machine's own GPU, and play that

The viewer tries the file as it is first. When the browser gives up — Safari and an MKV,
HEVC without a hardware decoder — or on a tap, a picker: codec (H.264, HEVC, AV1, or the
original codec repackaged) and size (original, 1080p, 720p, 480p), each codec labelled
with the engine this machine would use. POST /api/files/play runs ffmpeg into an HLS
event playlist of fragmented-MP4 segments under <data dir>/transcode/<id>/; Safari plays
HLS itself and everything else goes through hls.js, loaded only then. The recipes are
tried best first: a card on the bus before the integrated GPU, decoding on the same card
before decoding on the CPU and uploading, the software encoders last; a recipe that
produces no first segment is dropped for the next. The seekable range grows as ffmpeg
gets ahead; status says how far. Streams are reused for the same request, closed when
the player goes, swept after ten idle minutes, and the folder is emptied at start. Root
mode runs ffmpeg as root through a helper that ends when the daemon lets go of it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/Files.tsx

@@ -4,6 +4,7 @@ import { fmtBytes } from './fmt'
 import { Btn, Loading, Spinner, askText, askYes, setUnsaved, toast, useEscape } from './ui'
 import { useHashSel } from './hashsel'
 import TaskOutput from './TaskOutput'
+import Player from './Player'
 
 const join = (dir: string, name: string) => (dir === '/' ? '/' + name : dir + '/' + name)
 const fmtTime = (ms: number) => { const d = new Date(ms); const now = new Date(); return d.toDateString() === now.toDateString() ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : d.toLocaleDateString(undefined, { year: d.getFullYear() === now.getFullYear() ? undefined : 'numeric', month: 'short', day: '2-digit' }) }
@@ -253,15 +254,13 @@ function Viewer({ path, sudo, onClose, onChanged }: { path: string; sudo: boolea
         <textarea className="editor file-editor" value={text} spellCheck={false} onChange={(e) => setText(e.target.value)} />
       )}
       {info && text === null && isImage(name) && <div className="preview"><img src={api.fileReadURL(path, sudo)} alt={name} /></div>}
-      {/* Video and audio go to the browser as they are, codec and all, and it plays what it can. */}
-      {info && text === null && !isImage(name) && info.preview === 'video' && !cantPlay && (
-        <div className="preview"><video controls playsInline preload="metadata" src={api.fileReadURL(path, sudo)} onError={() => setCantPlay(true)} /></div>
-      )}
+      {/* Video: the browser's own decoder first, and a re-encode on the machine when that fails. Audio as it is. */}
+      {info && text === null && !isImage(name) && info.preview === 'video' && <Player path={path} sudo={sudo} name={name} />}
       {info && text === null && !isImage(name) && info.preview === 'audio' && !cantPlay && (
         <div className="preview audio"><div className="audio-box"><div className="ficon">🎵</div><div className="mono small">{name}</div><audio controls preload="metadata" src={api.fileReadURL(path, sudo)} onError={() => setCantPlay(true)} /></div></div>
       )}
-      {info && text === null && !isImage(name) && cantPlay && (
-        <div className="notice">This browser can't play {name} as it is — the container or codec isn't one it decodes. Download it instead.</div>
+      {info && text === null && !isImage(name) && info.preview === 'audio' && cantPlay && (
+        <div className="notice">This browser can't play {name} as it is — the codec isn't one it decodes. Download it instead.</div>
       )}
       {info && text === null && !isImage(name) && !info.preview && !err && (
         <div className="notice">{info.type === 'dir' ? 'This is a directory.' : info.size > MAX_EDIT ? `Too large to edit here (${fmtBytes(info.size)}). Download it instead.` : 'Binary file. Download it instead.'}</div>