chore: bump version to 0.0.23 [skip ci]

优化

VERSION

@@ -1 +1 @@
-0.0.19
+0.0.23

internal/service/danmaku_match_test.go

@@ -92,6 +92,10 @@ func TestDanmakuFetchHashMatchLayer(t *testing.T) {
 	require.Equal(t, "xml", res.SourceType)
 	require.Contains(t, res.Raw, "弹幕Hash命中")
 	require.Empty(t, res.Candidates)
+	require.Equal(t, "测试动画", res.AnimeTitle)
+	require.Equal(t, "第1话", res.EpisodeTitle)
+	require.Equal(t, int64(25484), res.EpisodeID)
+	require.Equal(t, "hash", res.MatchMode)
 
 	// match 请求体：文件名去扩展名并 URL 转义（官方接口要求，实测验证）、
 	// hash、大小、matchMode 齐全。

internal/service/danmaku_service.go

@@ -67,11 +67,17 @@ type DanmakuRenderConfig struct {
 //
 // Candidates is non-nil when multiple anime matched the search and the player
 // must ask the user which one to use (disambiguation); Raw is empty then.
+// AnimeTitle, EpisodeTitle, EpisodeID and MatchMode provide matched danmaku
+// metadata so the player UI can display which episode was loaded.
 type DanmakuFetchResult struct {
 	DanmakuRenderConfig
-	SourceType string         `json:"source_type"`
-	Raw        string         `json:"raw,omitempty"`
-	Candidates []DanmakuAnime `json:"candidates,omitempty"`
+	SourceType   string         `json:"source_type"`
+	Raw          string         `json:"raw,omitempty"`
+	Candidates   []DanmakuAnime `json:"candidates,omitempty"`
+	AnimeTitle   string         `json:"anime_title,omitempty"`
+	EpisodeTitle string         `json:"episode_title,omitempty"`
+	EpisodeID    int64          `json:"episode_id,omitempty"`
+	MatchMode    string         `json:"match_mode,omitempty"`
 }
 
 // DanmakuAnime is one search hit (an anime) with its episode list, mirroring
@@ -184,74 +190,90 @@ func (s *DanmakuService) Fetch(ctx context.Context, mediaID, keyword, episodeID
 	configured := strings.TrimRight(strings.TrimSpace(res.Source), "/")
 	official := danmakuOfficialBase
 
-	// 手动指定弹幕库：跳过识别，直接拉取该库（自定义源失败回退官方）。
-	if target := strings.TrimSpace(episodeID); target != "" {
-		raw, st, err := s.fetchCommentWithFallback(ctx, configured, official, target)
-		if err != nil {
-			s.log.Warn("danmaku comment fetch failed", zap.String("media_id", mediaID), zap.String("episode_id", target), zap.Error(err))
-			return res, err
-		}
-		res.Raw, res.SourceType = raw, st
-		return res, nil
-	}
-
-	term, media, err := s.searchTerms(ctx, mediaID)
-	if err != nil {
-		return res, err
-	}
-	manualKeyword := strings.TrimSpace(keyword) != ""
-	if kw := strings.TrimSpace(keyword); kw != "" {
-		term.name = kw
-	}
-	if strings.TrimSpace(term.name) == "" {
-		return res, nil
-	}
-
-	target := ""
-
-	// 1) hash 识别：始终走官方 /api/v2/match。
-	if media != nil && media.Path != "" {
-		if hash, ok := s.mediaHash(ctx, media); ok {
-			fileSize := media.SizeBytes
-			if strings.EqualFold(filepath.Ext(media.Path), ".strm") {
-				fileSize = 0 // strm 行的 SizeBytes 是文本大小，不是视频大小
-			}
-			matches, err := s.matchOfficial(ctx, danmakuMatchFileName(media.Path), hash, fileSize, media.DurationSec)
+		// 手动指定弹幕库：跳过识别，直接拉取该库（自定义源失败回退官方）。
+		if target := strings.TrimSpace(episodeID); target != "" {
+			raw, st, err := s.fetchCommentWithFallback(ctx, configured, official, target)
 			if err != nil {
-				s.log.Warn("danmaku hash match failed", zap.String("media_id", mediaID), zap.Error(err))
-			} else if len(matches) > 0 {
-				target = fmt.Sprintf("%d", matches[0].EpisodeID)
+				s.log.Warn("danmaku comment fetch failed", zap.String("media_id", mediaID), zap.String("episode_id", target), zap.Error(err))
+				return res, err
 			}
-		}
-	}
-
-	// 2) 按播放的文件名 + 集数搜索（keyword 手动覆盖时跳过，直接走第 3 层）。
-	if target == "" && !manualKeyword && media != nil && media.Path != "" {
-		if fileName := danmakuMatchFileName(media.Path); fileName != "" && fileName != term.name {
-			if candidates, err := s.searchCandidatesWithFallback(ctx, configured, official, fileName, term.episode); err == nil &&
-				len(candidates) == 1 && len(candidates[0].Episodes) > 0 {
-				target = fmt.Sprintf("%d", candidates[0].Episodes[0].EpisodeID)
+			res.Raw, res.SourceType = raw, st
+			if id, parseErr := strconv.ParseInt(target, 10, 64); parseErr == nil {
+				res.EpisodeID = id
 			}
-		}
-	}
-
-	// 3) 现有自动识别：标题层级（original_name → title → 文件名）+ 集数，
-	//    多结果返回候选列表交给播放器（歧义处理）。
-	if target == "" {
-		candidates, err := s.searchCandidatesWithFallback(ctx, configured, official, term.name, term.episode)
-		if err != nil {
-			s.log.Warn("danmaku search failed", zap.String("media_id", mediaID), zap.String("name", term.name), zap.String("episode", term.episode), zap.Error(err))
-			return res, err
-		}
-		if len(candidates) != 1 {
-			res.Candidates = candidates
+			res.MatchMode = "manual"
 			return res, nil
 		}
-		if len(candidates[0].Episodes) == 0 {
-			return res, errors.New("no danmaku library found for this video")
+
+		term, media, err := s.searchTerms(ctx, mediaID)
+		if err != nil {
+			return res, err
+		}
+		manualKeyword := strings.TrimSpace(keyword) != ""
+		if kw := strings.TrimSpace(keyword); kw != "" {
+			term.name = kw
+		}
+		if strings.TrimSpace(term.name) == "" {
+			return res, nil
+		}
+
+		target := ""
+
+		// 1) hash 识别：始终走官方 /api/v2/match。
+		if media != nil && media.Path != "" {
+			if hash, ok := s.mediaHash(ctx, media); ok {
+				fileSize := media.SizeBytes
+				if strings.EqualFold(filepath.Ext(media.Path), ".strm") {
+					fileSize = 0 // strm 行的 SizeBytes 是文本大小，不是视频大小
+				}
+				matches, err := s.matchOfficial(ctx, danmakuMatchFileName(media.Path), hash, fileSize, media.DurationSec)
+				if err != nil {
+					s.log.Warn("danmaku hash match failed", zap.String("media_id", mediaID), zap.Error(err))
+				} else if len(matches) > 0 {
+					target = fmt.Sprintf("%d", matches[0].EpisodeID)
+					res.AnimeTitle = matches[0].AnimeTitle
+					res.EpisodeTitle = matches[0].EpisodeTitle
+					res.EpisodeID = matches[0].EpisodeID
+					res.MatchMode = "hash"
+				}
+			}
+		}
+
+		// 2) 按播放的文件名 + 集数搜索（keyword 手动覆盖时跳过，直接走第 3 层）。
+		if target == "" && !manualKeyword && media != nil && media.Path != "" {
+			if fileName := danmakuMatchFileName(media.Path); fileName != "" && fileName != term.name {
+				if candidates, err := s.searchCandidatesWithFallback(ctx, configured, official, fileName, term.episode); err == nil &&
+					len(candidates) == 1 && len(candidates[0].Episodes) > 0 {
+					target = fmt.Sprintf("%d", candidates[0].Episodes[0].EpisodeID)
+					res.AnimeTitle = candidates[0].AnimeTitle
+					res.EpisodeTitle = candidates[0].Episodes[0].EpisodeTitle
+					res.EpisodeID = candidates[0].Episodes[0].EpisodeID
+					res.MatchMode = "filename"
+				}
+			}
+		}
+
+		// 3) 现有自动识别：标题层级（original_name → title → 文件名）+ 集数，
+		//    多结果返回候选列表交给播放器（歧义处理）。
+		if target == "" {
+			candidates, err := s.searchCandidatesWithFallback(ctx, configured, official, term.name, term.episode)
+			if err != nil {
+				s.log.Warn("danmaku search failed", zap.String("media_id", mediaID), zap.String("name", term.name), zap.String("episode", term.episode), zap.Error(err))
+				return res, err
+			}
+			if len(candidates) != 1 {
+				res.Candidates = candidates
+				return res, nil
+			}
+			if len(candidates[0].Episodes) == 0 {
+				return res, errors.New("no danmaku library found for this video")
+			}
+			target = fmt.Sprintf("%d", candidates[0].Episodes[0].EpisodeID)
+			res.AnimeTitle = candidates[0].AnimeTitle
+			res.EpisodeTitle = candidates[0].Episodes[0].EpisodeTitle
+			res.EpisodeID = candidates[0].Episodes[0].EpisodeID
+			res.MatchMode = "search"
 		}
-		target = fmt.Sprintf("%d", candidates[0].Episodes[0].EpisodeID)
-	}
 
 	raw, st, err := s.fetchCommentWithFallback(ctx, configured, official, target)
 	if err != nil {

internal/service/danmaku_service_test.go

@@ -142,6 +142,10 @@ func TestDanmakuFetchWithDandanplaySource(t *testing.T) {
 	require.Equal(t, "xml", res.SourceType)
 	require.Contains(t, res.Raw, "弹幕A")
 	require.Contains(t, res.Raw, `p="0.5,1,16777215,user1"`)
+	require.Equal(t, "测试动画", res.AnimeTitle)
+	require.Equal(t, "第1话", res.EpisodeTitle)
+	require.Equal(t, int64(25484), res.EpisodeID)
+	require.Equal(t, "search", res.MatchMode)
 }
 
 func TestDanmakuFetchUsesOriginalNameForSearch(t *testing.T) {
@@ -262,6 +266,8 @@ func TestDanmakuFetchWithExplicitEpisodeID(t *testing.T) {
 	require.True(t, res.Enabled)
 	require.Contains(t, res.Raw, "显式指定弹幕")
 	require.Empty(t, res.Candidates)
+	require.Equal(t, int64(99999), res.EpisodeID)
+	require.Equal(t, "manual", res.MatchMode)
 }
 func TestDetectDanmakuSourceType(t *testing.T) {
 	cases := []struct {

web/src/api/danmaku.ts

@@ -28,6 +28,19 @@ export interface DanmakuFetchResult {
   area: string
   raw?: string
   candidates?: DanmakuAnime[]
+  anime_title?: string
+  episode_title?: string
+  episode_id?: number
+  match_mode?: 'hash' | 'filename' | 'search' | 'manual' | string
+}
+
+export interface DanmakuLoadedInfo {
+  animeTitle?: string
+  episodeTitle?: string
+  episodeId?: number | string
+  matchMode?: 'hash' | 'filename' | 'search' | 'manual' | string
+  totalCount: number
+  sourceType?: 'auto' | 'xml' | 'json'
 }
 
 export type DanmakuFetchOptions = {

web/src/components/DanmakuStage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { create, type Manager, type ManagerPlugin } from 'danmu'
 
-import { danmakuAPI, type DanmakuAnime } from '../api/danmaku'
+import { danmakuAPI, type DanmakuAnime, type DanmakuLoadedInfo } from '../api/danmaku'
 import type { Media } from '../types'
 import { parseDanmaku, type Comment } from '../utils/parseDanmaku'
 
@@ -28,8 +28,8 @@ type DanmakuStageProps = {
   search?: string | null
   /** Explicit danmaku library chosen by the user; null = auto-resolve. */
   episodeId?: number | string | null
-  /** Called after each fetch attempt (success or error) finishes. */
-  onLoaded?: () => void
+  /** Called after each fetch attempt (success or error) finishes with metadata. */
+  onLoaded?: (info: DanmakuLoadedInfo | null) => void
   /** Called when multiple anime matched and the user must pick one. */
   onCandidates?: (candidates: DanmakuAnime[]) => void
 }
@@ -127,6 +127,10 @@ export function DanmakuStage({
     applyLiveSettings()
 
     const loadDanmaku = async () => {
+      let loadedInfo: DanmakuLoadedInfo | null = null
+      comments = []
+      nextIndex = 0
+      manager.clear()
       try {
         const res = await danmakuAPI.fetch(media.id, {
           kw: search ?? undefined,
@@ -144,14 +148,28 @@ export function DanmakuStage({
             .filter((c) => Number.isFinite(c.time) && c.time >= 0)
             .sort((a, b) => a.time - b.time)
           nextIndex = 0
+          loadedInfo = {
+            animeTitle: res.anime_title,
+            episodeTitle: res.episode_title,
+            episodeId: res.episode_id ?? (episodeId ? Number(episodeId) || episodeId : undefined),
+            matchMode: res.match_mode,
+            totalCount: comments.length,
+            sourceType: res.source_type,
+          }
         } else {
           comments = []
+          loadedInfo = {
+            totalCount: 0,
+          }
         }
       } catch {
         // 拉取失败时静默关闭弹幕，不打断播放。
         comments = []
+        loadedInfo = {
+          totalCount: 0,
+        }
       } finally {
-        if (!disposed) onLoaded?.()
+        if (!disposed) onLoaded?.(loadedInfo)
       }
     }
 

web/src/components/PlayerControls.tsx

@@ -16,11 +16,7 @@ import type { SubtitleTrack } from '../api/subtitles'
 // PlayerControls — custom bottom control bar replacing the native <video
 // controls> (which cannot host custom buttons). The danmaku toggle sits right
 // next to the volume control. The bar auto-hides while playing and reappears
-// on mouse movement; it stays visible while paused.
-//
-// Native keyboard shortcuts (space / arrows) still work because they are
-// element-level defaults on <video>. Subtitles from <track> elements keep
-// rendering; the CC button opens a track picker (关闭 / 各轨道).
+// on mouse movement; it stays visible while paused or when hovering/interacting.
 
 function formatTime(s: number): string {
   if (!Number.isFinite(s) || s < 0) s = 0
@@ -63,9 +59,32 @@ export function PlayerControls({
   const [fullscreen, setFullscreen] = useState(false)
   const [pip, setPip] = useState(false)
   const [uiVisible, setUiVisible] = useState(true)
+  const [controlsHovered, setControlsHovered] = useState(false)
+  const [isScrubbing, setIsScrubbing] = useState(false)
+  const [scrubValue, setScrubValue] = useState<number | null>(null)
   const [subtitleMenuOpen, setSubtitleMenuOpen] = useState(false)
   const subtitleMenuRef = useRef<HTMLDivElement | null>(null)
   const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const controlsHoveredRef = useRef(false)
+  const isScrubbingRef = useRef(false)
+  const subtitleMenuOpenRef = useRef(false)
+  const danmakuOpenRef = useRef(false)
+
+  useEffect(() => {
+    controlsHoveredRef.current = controlsHovered
+  }, [controlsHovered])
+
+  useEffect(() => {
+    isScrubbingRef.current = isScrubbing
+  }, [isScrubbing])
+
+  useEffect(() => {
+    subtitleMenuOpenRef.current = subtitleMenuOpen
+  }, [subtitleMenuOpen])
+
+  useEffect(() => {
+    danmakuOpenRef.current = danmakuOpen
+  }, [danmakuOpen])
 
   // 点击控制栏外部时关闭字幕菜单
   useEffect(() => {
@@ -79,42 +98,74 @@ export function PlayerControls({
     return () => document.removeEventListener('mousedown', onDocClick)
   }, [subtitleMenuOpen])
 
-  // 播放时 3 秒无操作自动隐藏控制栏；暂停时保持显示。监听挂在视频容器上，
-  // 控制栏隐藏（pointer-events-none）后移动鼠标仍能重新唤起。
+  // 播放时 3 秒无操作自动隐藏控制栏；暂停/悬停/拖动进度条/打开菜单时保持显示。
+  // 监听挂在整个播放器舞台容器（data-player-stage）上，避免光标移到控制栏时因离开视频画面而误触发 mouseleave。
   useEffect(() => {
     const el = video()
-    if (!el) return
-    const parent = el.parentElement
-    const onMove = () => {
-      setUiVisible(true)
+    const stage = container()
+    if (!el || !stage) return
+
+    const resetTimer = () => {
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
-      if (!el.paused) {
-        hideTimerRef.current = setTimeout(() => setUiVisible(false), 3000)
+      if (
+        !el.paused &&
+        !controlsHoveredRef.current &&
+        !isScrubbingRef.current &&
+        !subtitleMenuOpenRef.current &&
+        !danmakuOpenRef.current
+      ) {
+        hideTimerRef.current = setTimeout(() => {
+          if (
+            !controlsHoveredRef.current &&
+            !isScrubbingRef.current &&
+            !subtitleMenuOpenRef.current &&
+            !danmakuOpenRef.current
+          ) {
+            setUiVisible(false)
+          }
+        }, 3000)
       }
     }
-    const onLeave = () => {
-      if (el.paused) return
+
+    const onMove = () => {
+      setUiVisible(true)
+      resetTimer()
+    }
+
+    const onLeave = (e: MouseEvent) => {
+      // 仅当光标真正移出 stage 容器时才处理
+      if (e.relatedTarget && stage.contains(e.relatedTarget as Node)) {
+        return
+      }
+      if (el.paused || controlsHoveredRef.current || isScrubbingRef.current) return
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
       setUiVisible(false)
     }
+
     const syncPlay = () => {
       setPlaying(!el.paused)
       onMove()
     }
-    const syncTime = () => setCurrentTime(el.currentTime)
+    const syncTime = () => {
+      if (!isScrubbingRef.current) {
+        setCurrentTime(el.currentTime)
+      }
+    }
     const syncMeta = () => {
       setDuration(el.duration || 0)
-      setCurrentTime(el.currentTime)
+      if (!isScrubbingRef.current) {
+        setCurrentTime(el.currentTime)
+      }
     }
     const syncVolume = () => {
       setVolume(el.volume)
       setMuted(el.muted)
     }
-    const syncFullscreen = () => setFullscreen(document.fullscreenElement === parent)
+    const syncFullscreen = () => setFullscreen(Boolean(document.fullscreenElement))
     const syncPip = () => setPip(document.pictureInPictureElement === el)
 
-    parent?.addEventListener('mousemove', onMove)
-    parent?.addEventListener('mouseleave', onLeave)
+    stage.addEventListener('mousemove', onMove)
+    stage.addEventListener('mouseleave', onLeave)
 
     el.addEventListener('play', syncPlay)
     el.addEventListener('playing', syncPlay)
@@ -131,8 +182,8 @@ export function PlayerControls({
     syncVolume()
     syncFullscreen()
     return () => {
-      parent?.removeEventListener('mousemove', onMove)
-      parent?.removeEventListener('mouseleave', onLeave)
+      stage.removeEventListener('mousemove', onMove)
+      stage.removeEventListener('mouseleave', onLeave)
       el.removeEventListener('play', syncPlay)
       el.removeEventListener('playing', syncPlay)
       el.removeEventListener('pause', syncPlay)
@@ -148,6 +199,20 @@ export function PlayerControls({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [videoRef])
 
+  // 当悬停或菜单状态改变时，更新控制栏计时器
+  useEffect(() => {
+    if (controlsHovered || isScrubbing || subtitleMenuOpen || danmakuOpen) {
+      setUiVisible(true)
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
+    } else {
+      const el = video()
+      if (el && !el.paused) {
+        if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
+        hideTimerRef.current = setTimeout(() => setUiVisible(false), 3000)
+      }
+    }
+  }, [controlsHovered, isScrubbing, subtitleMenuOpen, danmakuOpen])
+
   const togglePlay = () => {
     const el = video()
     if (!el) return
@@ -155,11 +220,29 @@ export function PlayerControls({
     else el.pause()
   }
 
-  const seek = (v: number) => {
-    const el = video()
-    if (!el) return
-    el.currentTime = v
+  const handleSeekChange = (v: number) => {
+    setScrubValue(v)
     setCurrentTime(v)
+    const el = video()
+    if (el && !isScrubbing) {
+      el.currentTime = v
+    }
+  }
+
+  const handleSeekStart = () => {
+    setIsScrubbing(true)
+    setUiVisible(true)
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
+  }
+
+  const handleSeekEnd = (v: number) => {
+    const el = video()
+    if (el) {
+      el.currentTime = v
+      setCurrentTime(v)
+    }
+    setIsScrubbing(false)
+    setScrubValue(null)
   }
 
   const changeVolume = (v: number) => {
@@ -202,14 +285,18 @@ export function PlayerControls({
     'pictureInPictureEnabled' in document &&
     document.pictureInPictureEnabled
 
+  const displayTime = isScrubbing && scrubValue !== null ? scrubValue : currentTime
+
   return (
     <div
-      className={`pointer-events-auto absolute inset-x-0 bottom-0 z-20 px-3 pb-2 pt-12 transition-opacity duration-300 ${
+      className={`pointer-events-auto absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-3 pb-3 pt-14 transition-opacity duration-300 ${
         uiVisible ? 'opacity-100' : 'pointer-events-none opacity-0'
       }`}
+      onMouseEnter={() => setControlsHovered(true)}
+      onMouseLeave={() => setControlsHovered(false)}
       onClick={(e) => e.stopPropagation()}
     >
-      <div className="flex items-center gap-2 text-white">
+      <div className="flex items-center gap-2.5 text-white">
         <button
           onClick={togglePlay}
           className="rounded-full p-1.5 transition hover:bg-white/15"
@@ -223,14 +310,18 @@ export function PlayerControls({
           min={0}
           max={duration || 0}
           step={0.1}
-          value={currentTime}
-          onChange={(e) => seek(Number(e.target.value))}
-          className="min-w-0 flex-1 accent-rose-500"
+          value={displayTime}
+          onMouseDown={handleSeekStart}
+          onTouchStart={handleSeekStart}
+          onChange={(e) => handleSeekChange(Number(e.target.value))}
+          onMouseUp={(e) => handleSeekEnd(Number((e.target as HTMLInputElement).value))}
+          onTouchEnd={(e) => handleSeekEnd(Number((e.target as HTMLInputElement).value))}
+          className="min-w-0 flex-1 cursor-pointer accent-rose-500"
           aria-label="播放进度"
         />
 
         <span className="shrink-0 font-mono text-xs tabular-nums text-white/85">
-          {formatTime(currentTime)} / {formatTime(duration)}
+          {formatTime(displayTime)} / {formatTime(duration)}
         </span>
 
         {pipSupported && (

web/src/components/PlayerDanmakuPanel.tsx

@@ -1,18 +1,12 @@
 import { useEffect, useState } from 'react'
-import { Check, ChevronRight, Loader2, MessageSquareText, Search, X } from 'lucide-react'
+import { Check, ChevronRight, Film, Hash, Loader2, MessageSquareText, RefreshCw, Search, Sparkles, Tag, X } from 'lucide-react'
 
-import type { DanmakuAnime, DanmakuEpisode } from '../api/danmaku'
+import type { DanmakuAnime, DanmakuEpisode, DanmakuLoadedInfo } from '../api/danmaku'
 
-// PlayerDanmakuPanel — the on-player danmaku control panel. It toggles
-// loading, lets the user re-search by a custom keyword, and adjusts the
-// renderer knobs (display area / opacity / font size) live. Values are
-// controlled by PlayerPage so the panel is purely presentational.
-//
-// The knobs change immediately on drag; a "re-search" only fires when the
-// user clicks the search button (or presses Enter) so sliders don't trigger
-// network requests. When the backend returns multiple anime candidates
-// (disambiguation), the panel shows the picker so the user can choose the
-// right danmaku library by hand — mirroring danmaku-anywhere's selector.
+// PlayerDanmakuPanel — the on-player danmaku control panel. It displays
+// the matched danmaku details (anime title, episode title, comment count,
+// match mode), toggles loading, lets the user re-search by a custom keyword,
+// and adjusts the renderer knobs (display area / opacity / font size) live.
 type PlayerDanmakuPanelProps = {
   open: boolean
   onClose: () => void
@@ -30,7 +24,9 @@ type PlayerDanmakuPanelProps = {
   /** Multiple anime matched — user must pick one. */
   candidates: DanmakuAnime[]
   /** Human-readable label of the currently selected library. */
-  selectedSource: string
+  selectedSource?: string
+  /** Loaded danmaku metadata (title, episode, count, match mode). */
+  danmakuInfo?: DanmakuLoadedInfo | null
   onSelectEpisode: (episodeId: number, animeTitle: string, episodeTitle: string) => void
   onResetAuto: () => void
 }
@@ -51,6 +47,7 @@ export function PlayerDanmakuPanel({
   onFontSizeChange,
   candidates,
   selectedSource,
+  danmakuInfo,
   onSelectEpisode,
   onResetAuto,
 }: PlayerDanmakuPanelProps) {
@@ -80,15 +77,49 @@ export function PlayerDanmakuPanel({
     })
   }
 
+  // 匹配模式标签显示辅助
+  const renderMatchBadge = (mode?: string) => {
+    switch (mode) {
+      case 'hash':
+        return (
+          <span className="inline-flex items-center gap-0.5 rounded border border-emerald-500/30 bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-medium text-emerald-300">
+            <Hash size={10} /> 哈希精准匹配
+          </span>
+        )
+      case 'filename':
+        return (
+          <span className="inline-flex items-center gap-0.5 rounded border border-sky-500/30 bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-medium text-sky-300">
+            <Tag size={10} /> 文件名匹配
+          </span>
+        )
+      case 'search':
+        return (
+          <span className="inline-flex items-center gap-0.5 rounded border border-violet-500/30 bg-violet-500/15 px-1.5 py-0.5 text-[10px] font-medium text-violet-300">
+            <Sparkles size={10} /> 标题搜索匹配
+          </span>
+        )
+      case 'manual':
+        return (
+          <span className="inline-flex items-center gap-0.5 rounded border border-amber-500/30 bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-medium text-amber-300">
+            手动指定
+          </span>
+        )
+      default:
+        return null
+    }
+  }
+
+  const isCustomOrManual = Boolean(search || selectedSource || danmakuInfo?.matchMode === 'manual')
+
   return (
     // 面板悬浮于视频上方：阻止点击冒泡，避免触发视频区域的播放/暂停切换。
     <div
       onClick={(e) => e.stopPropagation()}
-      className="absolute right-4 top-16 z-30 w-72 rounded-2xl border border-white/15 bg-black/80 p-4 text-white shadow-2xl backdrop-blur"
+      className="absolute right-4 top-16 z-30 w-80 rounded-2xl border border-white/15 bg-black/85 p-4 text-white shadow-2xl backdrop-blur-md"
     >
       <div className="mb-3 flex items-center justify-between">
         <div className="flex items-center gap-2 text-sm font-semibold">
-          <MessageSquareText size={16} /> 弹幕设置
+          <MessageSquareText size={16} className="text-rose-400" /> 弹幕设置
         </div>
         <button
           onClick={onClose}
@@ -100,7 +131,7 @@ export function PlayerDanmakuPanel({
       </div>
 
       {/* 是否加载弹幕 */}
-      <label className="mb-3 flex cursor-pointer items-center justify-between text-sm">
+      <label className="mb-3 flex cursor-pointer items-center justify-between rounded-lg bg-white/5 px-2.5 py-2 text-sm transition hover:bg-white/10">
         <span className="text-white/85">加载弹幕</span>
         <input
           type="checkbox"
@@ -110,23 +141,83 @@ export function PlayerDanmakuPanel({
         />
       </label>
 
+      {/* 当前加载的弹幕信息卡片 */}
+      {enabled && (
+        <div className="mb-3">
+          {searching ? (
+            <div className="flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 py-3 text-xs text-white/70">
+              <Loader2 size={14} className="animate-spin text-rose-400" />
+              <span>正在匹配弹幕…</span>
+            </div>
+          ) : danmakuInfo && (danmakuInfo.totalCount > 0 || danmakuInfo.animeTitle) ? (
+            <div className="rounded-xl border border-white/15 bg-white/5 p-2.5">
+              <div className="mb-1 flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1 text-xs font-semibold text-white/95">
+                    <Film size={13} className="shrink-0 text-rose-400" />
+                    <span className="truncate" title={danmakuInfo.animeTitle || selectedSource || '未知番剧'}>
+                      {danmakuInfo.animeTitle || selectedSource || '未知番剧'}
+                    </span>
+                  </div>
+                  {danmakuInfo.episodeTitle && (
+                    <div className="mt-0.5 truncate pl-4 text-[11px] text-white/60" title={danmakuInfo.episodeTitle}>
+                      {danmakuInfo.episodeTitle}
+                    </div>
+                  )}
+                </div>
+                {isCustomOrManual && (
+                  <button
+                    onClick={onResetAuto}
+                    className="flex shrink-0 items-center gap-1 rounded bg-white/10 px-1.5 py-0.5 text-[10px] text-rose-300 transition hover:bg-white/15 hover:text-rose-200"
+                    title="清除手动搜索与选择，恢复自动匹配"
+                  >
+                    <RefreshCw size={10} />
+                    自动
+                  </button>
+                )}
+              </div>
+
+              <div className="mt-2 flex items-center justify-between border-t border-white/10 pt-1.5 text-[11px]">
+                <div>{renderMatchBadge(danmakuInfo.matchMode)}</div>
+                <div className="font-mono text-white/70">
+                  {danmakuInfo.totalCount > 0 ? `共 ${danmakuInfo.totalCount.toLocaleString()} 条弹幕` : '暂无弹幕内容'}
+                </div>
+              </div>
+            </div>
+          ) : candidates.length === 0 ? (
+            <div className="flex items-center justify-between rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 text-xs text-white/50">
+              <span>未匹配到弹幕，可在下方手动搜索</span>
+              {isCustomOrManual && (
+                <button
+                  onClick={onResetAuto}
+                  className="shrink-0 text-rose-300 transition hover:text-rose-200"
+                  title="恢复自动匹配"
+                >
+                  恢复自动
+                </button>
+              )}
+            </div>
+          ) : null}
+        </div>
+      )}
+
       {/* 搜索弹幕 */}
       <div className="mb-4">
-        <div className="mb-1 text-xs text-white/60">搜索弹幕（留空 = 按视频名）</div>
-        <div className="flex items-center gap-1">
+        <div className="mb-1 text-xs text-white/60">搜索弹幕（留空 = 按视频名自动匹配）</div>
+        <div className="flex items-center gap-1.5">
           <input
             value={draft}
             onChange={(e) => setDraft(e.target.value)}
             onKeyDown={(e) => {
               if (e.key === 'Enter') onSearch(draft.trim())
             }}
-            placeholder="输入番剧名…"
-            className="min-w-0 flex-1 rounded-lg border border-white/15 bg-white/5 px-2.5 py-1.5 text-sm outline-none placeholder:text-white/35 focus:border-rose-400/60"
+            placeholder="输入番剧或电影名…"
+            className="min-w-0 flex-1 rounded-lg border border-white/15 bg-white/5 px-2.5 py-1.5 text-xs outline-none placeholder:text-white/35 focus:border-rose-400/60"
           />
           <button
             onClick={() => onSearch(draft.trim())}
             disabled={searching}
-            className="flex items-center gap-1 rounded-lg bg-rose-500/90 px-2.5 py-1.5 text-xs font-medium transition hover:bg-rose-500 disabled:opacity-50"
+            className="flex items-center gap-1 rounded-lg bg-rose-500 px-2.5 py-1.5 text-xs font-medium text-white transition hover:bg-rose-600 disabled:opacity-50"
           >
             {searching ? <Loader2 size={13} className="animate-spin" /> : <Search size={13} />}
             搜索
@@ -134,33 +225,18 @@ export function PlayerDanmakuPanel({
         </div>
       </div>
 
-      {/* 当前来源 / 候选手动选取 */}
-      {selectedSource && (
-        <div className="mb-3 flex items-center justify-between rounded-lg border border-white/10 bg-white/5 px-2.5 py-1.5 text-xs">
-          <span className="min-w-0 truncate text-white/75" title={selectedSource}>
-            当前: {selectedSource}
-          </span>
-          <button
-            onClick={onResetAuto}
-            className="ml-2 shrink-0 text-rose-300 transition hover:text-rose-200"
-            title="清除手动选择，恢复自动匹配"
-          >
-            自动
-          </button>
-        </div>
-      )}
-
+      {/* 多番剧命中候选列表 */}
       {candidates.length > 0 && (
-        <div className="mb-4 rounded-lg border border-amber-400/25 bg-amber-400/5 p-2">
+        <div className="mb-4 rounded-xl border border-amber-400/25 bg-amber-400/5 p-2.5">
           <div className="mb-1.5 px-1 text-xs font-medium text-amber-200">
-            搜到多部番剧，请选择弹幕来源：
+            搜到多部番剧，请选择对应集数：
           </div>
           <div className="max-h-52 overflow-y-auto pr-1">
             {candidates.map((anime, i) => (
               <div key={anime.animeId} className="mb-1">
                 <button
                   onClick={() => toggleAnime(anime.animeId)}
-                  className="flex w-full items-center gap-1 rounded-md px-1.5 py-1 text-left text-sm text-white/85 transition hover:bg-white/10"
+                  className="flex w-full items-center gap-1 rounded-md px-1.5 py-1 text-left text-xs font-medium text-white/85 transition hover:bg-white/10"
                 >
                   <ChevronRight
                     size={13}
@@ -170,8 +246,7 @@ export function PlayerDanmakuPanel({
                     }
                   />
                   <span className="min-w-0 flex-1 truncate">
-                    {anime.animeTitle}
-                    {anime.animeTitle === '' && `番剧 ${i + 1}`}
+                    {anime.animeTitle || `番剧 ${i + 1}`}
                   </span>
                   <span className="shrink-0 text-[10px] text-white/40">
                     {anime.episodes.length} 集
@@ -248,7 +323,7 @@ function SliderRow({
   onChange: (v: number) => void
 }) {
   return (
-    <div className="mb-3">
+    <div className="mb-2.5">
       <div className="mb-1 flex items-center justify-between text-xs">
         <span className="text-white/60">{label}</span>
         <span className="font-mono text-white/85">{format(value)}</span>

web/src/pages/PlayerPage.tsx

@@ -5,7 +5,7 @@ import toast from 'react-hot-toast'
 
 import { mediaAPI } from '../api/library'
 import { api, hlsURL, streamURL } from '../api/client'
-import { danmakuAPI, type DanmakuAnime } from '../api/danmaku'
+import { danmakuAPI, type DanmakuAnime, type DanmakuLoadedInfo } from '../api/danmaku'
 import { playbackAPI } from '../api/playback'
 import { subtitlesAPI, type SubtitleTrack } from '../api/subtitles'
 import { systemAPI } from '../api/system'
@@ -72,6 +72,8 @@ export function PlayerPage() {
   const [danmakuEpisodeId, setDanmakuEpisodeId] = useState<number | string | null>(null)
   // 自动匹配歧义（多番剧命中）时的候选列表。
   const [danmakuCandidates, setDanmakuCandidates] = useState<DanmakuAnime[]>([])
+  // 已加载弹幕的元数据信息（番剧名、单集名、条数、匹配模式等）。
+  const [danmakuInfo, setDanmakuInfo] = useState<DanmakuLoadedInfo | null>(null)
   // 用户当前选定的弹幕来源描述（面板中展示）。
   const [danmakuSelectedSource, setDanmakuSelectedSource] = useState('')
   const [danmakuOpacity, setDanmakuOpacity] = useState(1)
@@ -129,17 +131,20 @@ export function PlayerPage() {
     setDanmakuSearching(true)
     setDanmakuCandidates([])
     setDanmakuEpisodeId(null)
+    setDanmakuInfo(null)
     setDanmakuSearch(kw || null)
   }, [])
 
-  const danmakuLoaded = useCallback(() => {
+  const danmakuLoaded = useCallback((info: DanmakuLoadedInfo | null) => {
     setDanmakuSearching(false)
+    setDanmakuInfo(info)
   }, [])
 
   // 多番剧命中（disambiguation）：展示候选让用户选择。
   const danmakuGotCandidates = useCallback((candidates: DanmakuAnime[]) => {
     setDanmakuCandidates(candidates)
     setDanmakuSearching(false)
+    setDanmakuInfo(null)
     // 候选是静默返回的（此时没有任何弹幕）；自动打开面板提示用户选择来源。
     if (candidates.length > 0) setDanmakuOpen(true)
   }, [])
@@ -150,7 +155,7 @@ export function PlayerPage() {
     setDanmakuCandidates([])
     setDanmakuSearching(true)
     // 展示当前所选来源（面板标题处可见）。
-    setDanmakuSelectedSource(`${animeTitle}・${episodeTitle}`)
+    setDanmakuSelectedSource(episodeTitle ? `${animeTitle}・${episodeTitle}` : animeTitle)
   }, [])
 
   // 回到自动匹配（清除用户手动选择）。
@@ -159,8 +164,21 @@ export function PlayerPage() {
     setDanmakuCandidates([])
     setDanmakuSearching(true)
     setDanmakuSearch(null)
+    setDanmakuSelectedSource('')
+    setDanmakuInfo(null)
   }, [])
 
+  // 切换视频时重置媒体与弹幕状态，确保新视频自动重新识别并加载弹幕
+  useEffect(() => {
+    setMedia(null)
+    setDanmakuEpisodeId(null)
+    setDanmakuCandidates([])
+    setDanmakuSearch(null)
+    setDanmakuSelectedSource('')
+    setDanmakuInfo(null)
+    setDanmakuSearching(true)
+  }, [id])
+
   // Load metadata and pick a default mode.
   useEffect(() => {
     if (!id) return
@@ -346,6 +364,7 @@ export function PlayerPage() {
             onFontSizeChange={setDanmakuFontSize}
             candidates={danmakuCandidates}
             selectedSource={danmakuSelectedSource}
+            danmakuInfo={danmakuInfo}
             onSelectEpisode={danmakuSelectEpisode}
             onResetAuto={danmakuResetAuto}
           />

web/src/pages/PlayerVideoStage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import type { ReactNode, RefObject } from 'react'
 
 import { subtitlesAPI, type SubtitleTrack } from '../api/subtitles'
-import { type DanmakuAnime } from '../api/danmaku'
+import { type DanmakuAnime, type DanmakuLoadedInfo } from '../api/danmaku'
 import type { Media } from '../types'
 import { DanmakuStage } from '../components/DanmakuStage'
 import { PlayerControls } from '../components/PlayerControls'
@@ -24,7 +24,7 @@ type PlayerVideoStageProps = {
   danmakuEpisodeId: number | string | null
   danmakuOpen: boolean
   onToggleDanmaku: () => void
-  onDanmakuLoaded: () => void
+  onDanmakuLoaded: (info: DanmakuLoadedInfo | null) => void
   onDanmakuCandidates: (candidates: DanmakuAnime[]) => void
   /** Danmaku settings panel; rendered inside the stage so it stays visible in fullscreen. */
   danmakuPanel: ReactNode
@@ -53,6 +53,8 @@ export function PlayerVideoStage({
   const stageRef = useRef<HTMLDivElement>(null)
   const [videoRatio, setVideoRatio] = useState<number | null>(null)
   const [stageRect, setStageRect] = useState<{ width: number; height: number } | null>(null)
+  // 当前展示的字幕文本（由自定义字幕层渲染，100% 透明无黑框）
+  const [activeCueText, setActiveCueText] = useState<string>('')
 
   // 监听舞台容器的真实尺寸（响应窗口大小调整和全屏切换）
   useEffect(() => {
@@ -103,51 +105,96 @@ export function PlayerVideoStage({
     else void stage.requestFullscreen?.()
   }
 
-  // 把用户选择的字幕轨道应用到 <video> 的 textTracks（跨浏览器显式设置
-  // mode；<track default> 只影响初始值，部分浏览器不会自动显示）。
-  //
-  // 通过 React 渲染的 <track> 元素定位而不是 textTracks 索引：hls.js 等
-  // 可能向 textTracks 注入内部轨道（如 CEA-608 captions），索引会错位。
+  // 自定义字幕驱动逻辑：
+  // 把所选轨道设为 mode = 'hidden'（让浏览器在后台静默解析时间轴，但不渲染原生带黑底的字幕框），
+  // 由下方的 React 自定义层输出 100% 纯透明背景、高清晰文字阴影的字幕。
   useEffect(() => {
     const video = videoRef.current
-    if (!video || subs.length === 0) return
+    if (!video || subs.length === 0 || subtitleIndex < 0 || !subs[subtitleIndex]) {
+      setActiveCueText('')
+      return
+    }
+
     const timers = new Set<ReturnType<typeof setTimeout>>()
     const delay = (fn: () => void, ms: number) => {
       const id = setTimeout(fn, ms)
       timers.add(id)
     }
 
+    const updateCue = () => {
+      const trackEls = Array.from(video.querySelectorAll('track'))
+      const selectedEl = trackEls[subtitleIndex]
+      const tt = selectedEl?.track
+      if (!tt) {
+        setActiveCueText('')
+        return
+      }
+
+      if (tt.activeCues && tt.activeCues.length > 0) {
+        const texts: string[] = []
+        for (let i = 0; i < tt.activeCues.length; i++) {
+          const cue = tt.activeCues[i] as VTTCue
+          if (cue && cue.text) texts.push(cue.text)
+        }
+        setActiveCueText(texts.join('\n'))
+      } else {
+        setActiveCueText('')
+      }
+    }
+
     const apply = () => {
       const trackEls = Array.from(video.querySelectorAll('track'))
       if (trackEls.length === 0) return
       trackEls.forEach((el, i) => {
         const tt = el.track
-        if (tt) tt.mode = i === subtitleIndex ? 'showing' : 'disabled'
+        if (tt) {
+          // 'hidden' 模式：浏览器解析 WebVTT 并触发 cuechange，但隐藏原生黑底 UI
+          tt.mode = i === subtitleIndex ? 'hidden' : 'disabled'
+        }
       })
-      // Chrome 把轨道从 disabled 切回 showing 时是异步重新拉取字幕；
-      // 若拉取因竞态没有发生（例如切换过程中视频重载），cues 会一直为空，
-      // 表现为「字幕已选中但不显示」。检测到空轨道后强制重载一次兜底。
+
       const selected = trackEls[subtitleIndex]
       if (!selected) return
+
+      const tt = selected.track
+      if (tt) {
+        tt.removeEventListener('cuechange', updateCue)
+        tt.addEventListener('cuechange', updateCue)
+      }
+
+      // 竞态兜底重载检测
       delay(() => {
-        const tt = selected.track
-        if (tt && tt.mode === 'showing' && (!tt.cues || tt.cues.length === 0)) {
+        const curTt = selected.track
+        if (curTt && curTt.mode === 'hidden' && (!curTt.cues || curTt.cues.length === 0)) {
           const src = selected.getAttribute('src')
           if (src) {
             selected.setAttribute('src', '')
             selected.setAttribute('src', src)
-            tt.mode = 'showing'
+            curTt.mode = 'hidden'
           }
         }
       }, 1200)
+
+      updateCue()
     }
 
     apply()
-    // 轨道元数据就绪后再应用一次，确保字幕真正可见
     video.addEventListener('loadedmetadata', apply)
+    video.addEventListener('timeupdate', updateCue)
+    video.addEventListener('seeking', updateCue)
+    video.addEventListener('seeked', updateCue)
+
     return () => {
       video.removeEventListener('loadedmetadata', apply)
+      video.removeEventListener('timeupdate', updateCue)
+      video.removeEventListener('seeking', updateCue)
+      video.removeEventListener('seeked', updateCue)
       timers.forEach(clearTimeout)
+      const trackEls = Array.from(video.querySelectorAll('track'))
+      const selected = trackEls[subtitleIndex]
+      if (selected?.track) {
+        selected.track.removeEventListener('cuechange', updateCue)
+      }
     }
   }, [subtitleIndex, subs, videoRef])
 
@@ -202,6 +249,7 @@ export function PlayerVideoStage({
               ))}
             </video>
             <DanmakuStage
+              key={media.id}
               media={media}
               videoRef={videoRef}
               enabled={danmakuEnabled}
@@ -213,6 +261,21 @@ export function PlayerVideoStage({
               onLoaded={onDanmakuLoaded}
               onCandidates={onDanmakuCandidates}
             />
+            {/* 自定义沉浸式字幕层：纯透明背景 + 柔和阴影，完全消除浏览器原生黑框 */}
+            {activeCueText ? (
+              <div className="pointer-events-none absolute inset-x-0 bottom-4 sm:bottom-6 md:bottom-8 z-10 flex justify-center text-center px-4">
+                <span
+                  className="inline-block max-w-[92%] whitespace-pre-line text-center font-sans font-medium text-white text-base sm:text-lg md:text-xl lg:text-2xl select-none"
+                  style={{
+                    textShadow:
+                      '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.65)',
+                    lineHeight: 1.35,
+                  }}
+                >
+                  {activeCueText}
+                </span>
+              </div>
+            ) : null}
           </div>
           <PlayerControls
             videoRef={videoRef}