feat: ffprobe + TMDb scrape + HLS transcode + history/favourites/playlists

Backend
  - service/ffprobe.go: thin ffprobe wrapper, parses duration / resolution /
    codecs into a typed ProbeResult. 30s per-file timeout.
  - service/tmdb.go: minimal TMDb provider (search/movie). Disabled when no
    api key; supports tmdb_api_proxy / tmdb_image_proxy overrides for users
    behind a firewall.
  - service/scraper.go: filename cleaner (handles bracketed tags, scene
    noise tokens, year extraction), per-row + per-library enrichment with a
    4 RPS throttle and WS hub progress events. Unit-tested.
  - service/scanner.go: now invokes ffprobe per file and kicks the TMDb
    scraper in the background once a library scan finishes.
  - service/transcoder.go: per-media ffmpeg HLS job manager; outputs
    index.m3u8 + seg_NNNNN.ts under cache/hls/<id>; cancels jobs on
    shutdown; publishes 'transcode' WS events.
  - service/stream.go: serves HLS playlist (with 30s wait-for-ready) and
    .ts segments with path-traversal protection. Adds Probe() helper used
    by the admin 'reprobe' button.
  - service/image_proxy.go: cached, host-allow-listed reverse proxy for
    TMDb / Bangumi / Douban / Fanart / TheTVDB images so the SPA never
    hits a CORS or GFW issue.
  - service/playback.go: history upsert, favourites toggle, playlist CRUD
    + ordered items. RecentHistory joins with model.Media in one extra
    query so the home page can render a 'Continue Watching' row.
  - handler/streaming.go + handler/playback.go: REST endpoints for HLS,
    image proxy, scrape (one + library), reprobe, history, favourites,
    playlists.
  - handler/handler.go: registers /api/hls/:id/{index.m3u8,:seg}, /api/img,
    /api/history, /api/favourites/:id, /api/playlists/* with proper
    auth/admin guards.

Frontend
  - api/client.ts: imageURL() helper; hlsURL() endpoint; reuses the JWT in
    a query parameter for <video src> and <img src>.
  - api/playback.ts: typed helpers for history, favourites, playlists.
  - components/MediaCard.tsx: optional 'progress' prop renders a thin
    bottom progress bar, used by the new Continue Watching row.
  - pages/HomePage.tsx: two rows (Continue Watching + Recently Added);
    falls back to the empty-state hint when both are empty.
  - pages/PlayerPage.tsx: hls.js (lazy-imported) with auto-fallback to
    direct play; ?mode=hls|direct query toggle; resume position written
    every 10s while playing.
  - pages/MediaDetailPage.tsx: heart toggle + admin 'rescrape' / 'reprobe'
    buttons + dedicated 'HLS 转码播放' CTA.
  - pages/FavouritesPage.tsx, PlaylistsPage.tsx, PlaylistDetailPage.tsx:
    new screens.
  - components/Layout.tsx + App.tsx: sidebar links for Favourites and
    Playlists; routes are now lazily code-split via React.lazy + Suspense
    so the initial bundle stays at ~243 KB / 82 KB gzipped (hls.js is
    fetched only on first HLS playback).

Verified: go build, go vet, go test (incl. CleanQuery cases) all pass;
frontend tsc -b && vite build emits 9 route chunks plus a deferred hls
chunk.

web/src/pages/MediaDetailPage.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
-import { Play } from 'lucide-react'
+import { Heart, Play, RefreshCw, Sparkles } from 'lucide-react'
+import toast from 'react-hot-toast'
 
 import { mediaAPI } from '../api/library'
+import { playbackAPI } from '../api/playback'
+import { imageURL } from '../api/client'
+import { useAuthStore } from '../stores/auth'
+import { api } from '../api/client'
 import type { Media } from '../types'
 
 function fmtDuration(sec: number): string {
@@ -24,21 +29,58 @@ function fmtSize(bytes: number): string {
   return `${v.toFixed(2)} ${units[i]}`
 }
 
-// Detail screen for a single media item: poster, summary and a Play CTA.
+// Detail screen for a single media item.
+//
+// Buttons:
+//   - Play         (direct play)
+//   - HLS          (force transcoded play)
+//   - Favourite    (toggle, all users)
+//   - Re-scrape    (admin only, triggers TMDb lookup)
+//   - Re-probe     (admin only, refreshes ffprobe metadata)
 export function MediaDetailPage() {
   const { id = '' } = useParams()
+  const role = useAuthStore((s) => s.user?.role)
   const [media, setMedia] = useState<Media | null>(null)
+  const [favourite, setFavourite] = useState(false)
   const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
+  const refresh = async () => {
     if (!id) return
     setLoading(true)
-    mediaAPI
-      .get(id)
-      .then(setMedia)
-      .finally(() => setLoading(false))
+    try {
+      const m = await mediaAPI.get(id)
+      setMedia(m)
+      const favs = await playbackAPI.listFavourites().catch(() => [])
+      setFavourite(favs.some((f) => f.id === m.id))
+    } finally {
+      setLoading(false)
+    }
+  }
+  useEffect(() => {
+    refresh().catch(() => undefined)
   }, [id])
 
+  const toggleFav = async () => {
+    if (!media) return
+    const state = await playbackAPI.toggleFavourite(media.id)
+    setFavourite(state)
+    toast.success(state ? '已加入收藏' : '已取消收藏')
+  }
+
+  const rescrape = async () => {
+    if (!media) return
+    await api.post(`/media/${media.id}/scrape`)
+    toast.success('已刮削')
+    await refresh()
+  }
+
+  const reprobe = async () => {
+    if (!media) return
+    await api.post(`/media/${media.id}/probe`)
+    toast.success('已重新探测')
+    await refresh()
+  }
+
   if (loading) return <p className="text-slate-500">加载中…</p>
   if (!media) return <p className="text-slate-500">媒体不存在</p>
 
@@ -47,7 +89,12 @@ export function MediaDetailPage() {
       <div className="flex flex-col gap-6 md:flex-row">
         <div className="aspect-[2/3] w-48 shrink-0 overflow-hidden rounded-xl bg-surface-800">
           {media.poster_url ? (
-            <img src={media.poster_url} alt={media.title} className="h-full w-full object-cover" />
+            <img
+              src={imageURL(media.poster_url)}
+              alt={media.title}
+              className="h-full w-full object-cover"
+              referrerPolicy="no-referrer"
+            />
           ) : (
             <div className="flex h-full w-full items-center justify-center text-slate-600">
               无海报
@@ -69,11 +116,42 @@ export function MediaDetailPage() {
             <Badge>{fmtDuration(media.duration_sec)}</Badge>
             <Badge>{fmtSize(media.size_bytes)}</Badge>
             {media.container && <Badge>{media.container.toUpperCase()}</Badge>}
+            <Badge>{media.scrape_status}</Badge>
           </div>
 
-          <Link to={`/play/${media.id}`} className="neon-button">
-            <Play size={18} /> 播放
-          </Link>
+          <div className="flex flex-wrap gap-2">
+            <Link to={`/play/${media.id}`} className="neon-button">
+              <Play size={18} /> 播放
+            </Link>
+            <Link
+              to={`/play/${media.id}?mode=hls`}
+              className="neon-button !border-accent-400/40 !bg-accent-400/10 !text-accent-400 hover:!border-accent-400"
+            >
+              <RefreshCw size={16} /> HLS 转码播放
+            </Link>
+            <button
+              onClick={toggleFav}
+              className={
+                'neon-button ' +
+                (favourite
+                  ? '!border-pink-400/60 !bg-pink-400/10 !text-pink-400'
+                  : '')
+              }
+            >
+              <Heart size={16} fill={favourite ? 'currentColor' : 'none'} />
+              {favourite ? '已收藏' : '收藏'}
+            </button>
+            {role === 'admin' && (
+              <>
+                <button onClick={rescrape} className="neon-button">
+                  <Sparkles size={16} /> 重新刮削
+                </button>
+                <button onClick={reprobe} className="neon-button">
+                  <RefreshCw size={16} /> 重新探测
+                </button>
+              </>
+            )}
+          </div>
         </div>
       </div>
     </div>
@@ -82,6 +160,8 @@ export function MediaDetailPage() {
 
 function Badge({ children }: { children: React.ReactNode }) {
   return (
-    <span className="rounded border border-white/10 bg-white/5 px-2 py-0.5">{children}</span>
+    <span className="rounded border border-white/10 bg-white/5 px-2 py-0.5">
+      {children}
+    </span>
   )
 }