Files: play video and audio in the viewer, as the file is; reads answer Range requests

The viewer hands a video or audio file to the browser untouched — container, codec and
all — and the browser plays what it can; when it can't, the viewer says so and offers the
download. What the server adds is the part a player needs: /api/files/read now goes
through http.ServeContent for a real file of known size, so Range requests (seeking) and
HEAD work, and a download can resume. The root backend's helper takes an offset for that,
and a Seeker opens the backend once, at the range asked for, instead of streaming from
the top. Audio files are a preview kind too: their cover art is the thumbnail.

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

web/src/Files.tsx

@@ -17,6 +17,7 @@ function icon(e: FileEntry): string {
   if (e.type === 'other') return '⚙️'
   if (e.preview === 'image' || isImage(e.name)) return '🖼️'
   if (e.preview === 'video') return '🎞️'
+  if (e.preview === 'audio') return '🎵'
   if (/\.(zip|gz|bz2|xz|zst|tar|tgz|7z|rar)$/i.test(e.name)) return '🗜️'
   if (/\.(sh|bash|zsh|py|go|js|ts|tsx|rb|pl|php|rs|c|h|cpp|java|lua)$/i.test(e.name) || e.mode.includes('x')) return '📜'
   if (/\.(log|txt|md|json|ya?ml|toml|ini|conf|cfg|env|service|timer)$/i.test(e.name)) return '📄'
@@ -132,7 +133,7 @@ class Near {
   private forget(el: Element) { this.cbs.delete(el); this.obs.unobserve(el) }
 }
 
-function Thumb({ url, kind, near, fallback }: { url: string; kind: 'image' | 'video'; near: Near | null; fallback: string }) {
+function Thumb({ url, kind, near, fallback }: { url: string; kind: 'image' | 'video' | 'audio'; near: Near | null; fallback: string }) {
   const ref = useRef<HTMLSpanElement>(null)
   const [show, setShow] = useState(false)
   const [failed, setFailed] = useState('')
@@ -189,11 +190,12 @@ function Viewer({ path, sudo, onClose, onChanged }: { path: string; sudo: boolea
   const [orig, setOrig] = useState('')
   const [err, setErr] = useState('')
   const [saving, setSaving] = useState(false)
+  const [cantPlay, setCantPlay] = useState(false) // the browser tried the file as it is and gave up
   const name = path.split('/').pop() ?? path
   const dirty = text !== null && text !== orig
 
   useEffect(() => {
-    setInfo(null); setText(null); setErr('')
+    setInfo(null); setText(null); setErr(''); setCantPlay(false)
     let stop = false
     ;(async () => {
       try {
@@ -251,7 +253,17 @@ 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>}
-      {info && text === null && !isImage(name) && !err && (
+      {/* 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>
+      )}
+      {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 && !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>
       )}
     </div>

web/src/api.ts

@@ -249,7 +249,7 @@ export interface ARCDetail {
 }
 export interface ARCView { detail: ARCDetail; live: ARCLive | null }
 
-export interface FileEntry { name: string; type: 'dir' | 'file' | 'link' | 'other'; size: number; mode: string; perm: string; mtime: number; user: string; group: string; target?: string; broken?: boolean; preview?: 'image' | 'video' }
+export interface FileEntry { name: string; type: 'dir' | 'file' | 'link' | 'other'; size: number; mode: string; perm: string; mtime: number; user: string; group: string; target?: string; broken?: boolean; preview?: 'image' | 'video' | 'audio' }
 export interface ThumbGPU { api: string; device: string; name?: string; codecs?: string[]; reason?: string; permission?: boolean }
 // How previews get made on the machine: ok with an engine, or why not and what would fix it.
 export interface ThumbStatus { ok: boolean; engine: 'gpu' | 'cpu' | ''; summary: string; ffmpeg?: string; gpus: ThumbGPU[]; unusable?: ThumbGPU[]; error?: string; install?: { pm: string; package: string }; gpu_fix?: boolean; user: string; cache: { path: string; entries: number; bytes: number } }

web/src/styles.css

@@ -364,11 +364,17 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
 .file-editor { flex: 1; min-height: 0; border: 0; border-radius: 0; resize: none; font-size: 13px; }
 .preview { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 12px; }
 .preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.preview video { max-width: 100%; max-height: 100%; background: #000; border-radius: 4px; outline: none; }
+.preview.audio { align-items: flex-start; }
+.audio-box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(560px, 100%); margin-top: 8vh; }
+.audio-box .ficon { font-size: 48px; }
+.audio-box audio { width: 100%; }
 /* previews: the icon column becomes a thumbnail box for images and videos */
 .file-list.thumbs .file-row { grid-template-columns: 72px 1fr 80px 80px 130px 32px; padding-top: 4px; padding-bottom: 4px; min-height: 52px; }
 .fthumb { position: relative; width: 72px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg3); border-radius: 4px; overflow: hidden; }
 .fthumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
-.fthumb.video::after { content: '▶'; position: absolute; right: 2px; bottom: 2px; font-size: 9px; line-height: 1; padding: 2px 3px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; }
+.fthumb.video::after, .fthumb.audio::after { content: '▶'; position: absolute; right: 2px; bottom: 2px; font-size: 9px; line-height: 1; padding: 2px 3px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; }
+.fthumb.audio::after { content: '♪'; }
 .fthumb .ficon { font-size: 18px; }
 .thumb-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 10px 0; }
 /* move: the folder picker */