Fix local adult metadata and watch history removal

web/src/pages/PlayerPage.tsx

@@ -35,6 +35,8 @@ export function PlayerPage() {
   const [media, setMedia] = useState<Media | null>(null)
   const [mode, setMode] = useState<Mode>('direct')
   const [subs, setSubs] = useState<SubtitleTrack[]>([])
+  const [hlsUnavailable, setHlsUnavailable] = useState(false)
+  const [playerError, setPlayerError] = useState('')
 
   // Load metadata and pick a default mode.
   useEffect(() => {
@@ -44,10 +46,11 @@ export function PlayerPage() {
       const forced = params.get('mode') as Mode | null
       const auto = pickMode(m)
       setMode(forced ?? auto)
+      setPlayerError('')
     })
     subtitlesAPI
       .list(id)
-      .then(setSubs)
+      .then((tracks) => setSubs(tracks ?? []))
       .catch(() => setSubs([]))
   }, [id, params])
 
@@ -66,7 +69,9 @@ export function PlayerPage() {
           hls.attachMedia(video)
           hls.on(HlsCtor.Events.ERROR, (_, data) => {
             if (data.fatal) {
-              toast.error('HLS 播放失败,尝试切换到直接播放')
+              setHlsUnavailable(true)
+              setPlayerError('HLS 转码不可用，正在尝试直接播放原始文件。若出现有画面无声音，通常是 MKV/AC3/EAC3 音轨需要配置本机 ffmpeg 转码为 AAC。')
+              toast.error('HLS 转码失败，尝试切换到直接播放')
               setMode('direct')
               params.set('mode', 'direct')
               setParams(params, { replace: true })
@@ -76,17 +81,26 @@ export function PlayerPage() {
         } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
           video.src = url
         } else {
-          toast.error('当前浏览器不支持 HLS,降级到直接播放')
+          setHlsUnavailable(true)
+          setPlayerError('当前浏览器不支持 HLS，正在尝试直接播放。')
+          toast.error('当前浏览器不支持 HLS，降级到直接播放')
           setMode('direct')
         }
         void video.play().catch(() => undefined)
+      }).catch(() => {
+        setHlsUnavailable(true)
+        setPlayerError('HLS 播放组件加载失败，正在尝试直接播放。')
+        setMode('direct')
       })
     } else {
       video.src = streamURL(media.id)
+      if (hlsUnavailable && needsTranscodeForBrowser(media)) {
+        setPlayerError('当前正在直连播放原始文件；此封装或音轨浏览器兼容性有限，可能只有画面没有声音。请配置本机 ffmpeg 后切回 HLS 转码播放。')
+      }
       void video.play().catch(() => undefined)
     }
     return teardownHls
-  }, [media, mode, params, setParams])
+  }, [hlsUnavailable, media, mode, params, setParams])
 
   // Persist resume position every 10 seconds while playing.
   useEffect(() => {
@@ -113,11 +127,14 @@ export function PlayerPage() {
   // ESC = back.
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') navigate(-1)
+      if (e.key === 'Escape') {
+        const target = media?.id || id
+        navigate(target ? `/media/${target}` : '/', { replace: true })
+      }
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [navigate])
+  }, [id, media?.id, navigate])
 
   const teardownHls = () => {
     if (hlsRef.current) {
@@ -126,35 +143,42 @@ export function PlayerPage() {
     }
   }
 
-  return (
-    <div className="-m-6 flex min-h-screen flex-col bg-black md:-m-8">
-      <button
-        onClick={() => navigate(-1)}
-        className="absolute left-4 top-4 z-10 flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm text-ink-600 backdrop-blur transition hover:bg-black/80"
-      >
-        <ArrowLeft size={16} /> 返回
-      </button>
+  const goBack = () => {
+    const target = media?.id || id
+    navigate(target ? `/media/${target}` : '/', { replace: true })
+  }
 
-      <button
-        onClick={() => {
-          const next = mode === 'hls' ? 'direct' : 'hls'
-          setMode(next)
-          params.set('mode', next)
-          setParams(params, { replace: true })
-        }}
-        className="absolute right-4 top-4 z-10 flex items-center gap-2 rounded-full bg-black/60 px-3 py-1.5 text-sm text-ink-600 backdrop-blur transition hover:bg-black/80"
-        title="切换播放模式"
-      >
-        {mode === 'hls' ? (
-          <>
-            <RefreshCw size={14} /> HLS 转码中
-          </>
-        ) : (
-          <>
-            <Sparkles size={14} /> 直接播放
-          </>
-        )}
-      </button>
+  return (
+    <div className="relative -m-6 flex min-h-screen flex-col overflow-hidden bg-black md:-m-8">
+      <div className="pointer-events-none absolute inset-x-0 top-0 z-20 flex items-center justify-between p-4 sm:p-6">
+        <button
+          onClick={goBack}
+          className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/15 bg-black/70 px-4 py-2 text-sm font-medium text-white shadow-xl backdrop-blur transition hover:bg-black/85"
+        >
+          <ArrowLeft size={16} /> 返回
+        </button>
+
+        <button
+          onClick={() => {
+            const next = mode === 'hls' ? 'direct' : 'hls'
+            setMode(next)
+            params.set('mode', next)
+            setParams(params, { replace: true })
+          }}
+          className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/15 bg-black/70 px-4 py-2 text-sm font-medium text-white shadow-xl backdrop-blur transition hover:bg-black/85"
+          title="切换播放模式"
+        >
+          {mode === 'hls' ? (
+            <>
+              <RefreshCw size={14} /> HLS 转码中
+            </>
+          ) : (
+            <>
+              <Sparkles size={14} /> 直接播放
+            </>
+          )}
+        </button>
+      </div>
 
       <div className="flex flex-1 items-center justify-center">
         {media ? (
@@ -168,11 +192,17 @@ export function PlayerPage() {
               // 浏览器对 <video src> 的错误描述非常有限，把详细原因
               // 转给开发者控制台 + 一条 toast；常见原因是 codec 不支持。
               if (mode === 'direct') {
-                toast.error('直接播放失败，切换到 HLS 转码')
-                setMode('hls')
-                params.set('mode', 'hls')
-                setParams(params, { replace: true })
+                if (hlsUnavailable) {
+                  setPlayerError('直接播放失败，且 HLS 转码不可用。请检查文件是否存在，或配置本机 ffmpeg 后使用 HLS 转码播放。')
+                  toast.error('直接播放失败，HLS 转码不可用')
+                } else {
+                  toast.error('直接播放失败，切换到 HLS 转码')
+                  setMode('hls')
+                  params.set('mode', 'hls')
+                  setParams(params, { replace: true })
+                }
               } else {
+                setPlayerError('视频播放失败，请检查文件是否存在，或确认 ffmpeg 已正确配置。')
                 toast.error('视频播放失败，请检查文件是否存在')
               }
             }}
@@ -191,6 +221,11 @@ export function PlayerPage() {
         ) : (
           <p className="text-sand-500">加载中…</p>
         )}
+        {playerError ? (
+          <div className="absolute bottom-20 left-1/2 w-[min(92vw,720px)] -translate-x-1/2 rounded-2xl border border-white/15 bg-black/75 px-5 py-4 text-sm text-white shadow-2xl backdrop-blur">
+            {playerError}
+          </div>
+        ) : null}
       </div>
     </div>
   )
@@ -201,11 +236,15 @@ const directVideoCodecs = ['h264', 'avc', 'avc1']
 const directAudioCodecs = ['aac', 'mp3', 'opus']
 
 function pickMode(m: Media): Mode {
+  return needsTranscodeForBrowser(m) ? 'hls' : 'direct'
+}
+
+function needsTranscodeForBrowser(m: Media): boolean {
   const c = (m.container ?? '').toLowerCase()
   const v = (m.video_codec ?? '').toLowerCase()
   const a = (m.audio_codec ?? '').toLowerCase()
   const containerOK = directContainers.some((x) => c.includes(x))
   const videoOK = !v || directVideoCodecs.some((x) => v.includes(x))
   const audioOK = !a || directAudioCodecs.some((x) => a.includes(x))
-  return containerOK && videoOK && audioOK ? 'direct' : 'hls'
+  return !(containerOK && videoOK && audioOK)
 }