支持按用户保存播放器与弹幕偏好

在 user 记录上新增播放器音量、弹幕开关、透明度、字号、显示区域、合并偏好、自定义弹幕源以及 dandanplay 应用凭据字段，并提供 PUT /danmaku/settings 局部更新接口，带取值校验。
返回脱敏后的完整渲染配置，绝不回传应用密钥，仅在响应中标记密钥是否已配置。
结果缓存键加入用户 ID 与凭据指纹，避免不同用户或凭据串用缓存；旧版实例级设置仅作为未登录与迁移期的回退。

web/src/api/danmaku.ts

@@ -62,6 +62,33 @@ export type DanmakuFetchOptions = {
   episodeId?: number | string
 }
 
+export interface DanmakuConfig {
+  enabled: boolean
+  source?: string
+  app_id?: string
+  app_key_configured: boolean
+  opacity: string
+  font_size: string
+  area: string
+  volume: number
+  /** Per-user preference: merge the same episode's multiple sources. */
+  merge_sources: boolean
+}
+
+export interface DanmakuSettingsPatch {
+  enabled?: boolean
+  source?: string
+  app_id?: string
+  /** 留空不会修改密钥；清空请使用 clear_app_key。 */
+  app_key?: string
+  clear_app_key?: boolean
+  opacity?: number
+  font_size?: number
+  area?: number
+  merge_sources?: boolean
+  volume?: number
+}
+
 // danmakuAPI fetches danmaku comments for a media item. The backend resolves
 // the configured dandanplay source by the video's name (search for episode,
 // then fetch its comment library) and returns the raw Bilibili-format XML;
@@ -75,26 +102,11 @@ export const danmakuAPI = {
       })
       .then((r) => r.data),
 
-  // config returns the renderer knobs so the player can initialize its
-  // danmaku control panel without admin privileges.
+  // config returns the current user's player volume and danmaku preferences.
   config: () =>
-    api
-      .get<{
-        enabled: boolean
-        source?: string
-        opacity: string
-        font_size: string
-        area: string
-        /** Per-user preference: merge the same episode's multiple sources. */
-        merge_sources: boolean
-      }>('/danmaku/config')
-      .then((r) => r.data),
+    api.get<DanmakuConfig>('/danmaku/config').then((r) => r.data),
 
-  // updateSettings persists per-user danmaku preferences (survives reload).
-  updateSettings: (settings: { mergeSources: boolean }) =>
-    api
-      .put<{ merge_sources: boolean }>('/danmaku/settings', {
-        merge_sources: settings.mergeSources,
-      })
-      .then((r) => r.data),
+  // updateSettings persists a partial per-user player/danmaku settings patch.
+  updateSettings: (settings: DanmakuSettingsPatch) =>
+    api.put<DanmakuConfig>('/danmaku/settings', settings).then((r) => r.data),
 }

web/src/components/AssSubtitleStage.tsx

@@ -10,6 +10,7 @@ import {
   type SubtitleChineseMode,
 } from '../utils/subtitleChinese'
 import { convertASSContent } from '../utils/subtitleASS'
+import { runWithoutGlobalVideoFrame } from '../utils/withoutVideoFrame'
 
 type AssSubtitleStageProps = {
   videoRef: React.RefObject<HTMLVideoElement>
@@ -60,18 +61,21 @@ export function AssSubtitleStage({
         if (!body.trim()) throw new Error('empty subtitle payload')
         if (cancelled) return
 
-        instance = new JASSUB({
-          video,
-          subContent: convertASSContent(body, converter),
-          timeOffset: timeOffsetRef.current,
-          workerUrl: jassubWorkerUrl,
-          wasmUrl: jassubWasmUrl,
-          modernWasmUrl: jassubModernWasmUrl,
-          fonts: [notoSansSCUrl],
-          defaultFont: 'Noto Sans SC',
-          queryFonts: 'local',
-          prescaleFactor: 1,
-        })
+        instance = runWithoutGlobalVideoFrame(
+          () =>
+            new JASSUB({
+              video,
+              subContent: convertASSContent(body, converter),
+              timeOffset: timeOffsetRef.current,
+              workerUrl: jassubWorkerUrl,
+              wasmUrl: jassubWasmUrl,
+              modernWasmUrl: jassubModernWasmUrl,
+              fonts: [notoSansSCUrl],
+              defaultFont: 'Noto Sans SC',
+              queryFonts: 'local',
+              prescaleFactor: 1,
+            }),
+        )
         instanceRef.current = instance
         await instance.ready
         if (cancelled) {

web/src/components/DanmakuStage.tsx

@@ -264,7 +264,7 @@ export function DanmakuStage({
       managerRef.current = null
     }
     // search / episodeId / searchTrigger 变化时重新拉取弹幕（含媒体/开关切换）。
-  }, [media, videoRef, enabled, search, episodeId, searchTrigger, onLoaded, onCandidates])
+  }, [media, videoRef, enabled, search, episodeId, searchTrigger, onLoaded, onCandidates, onAlternatives])
 
   // Live renderer knobs: opacity / area / font size without recreating the
   // engine. font size additionally rescales currently visible comments.

web/src/components/PlayerControls.tsx

@@ -58,6 +58,10 @@ function isEditableTarget(target: EventTarget | null): boolean {
 
 type PlayerControlsProps = {
   videoRef: React.RefObject<HTMLVideoElement>
+  /** 用户级播放器音量（0 ~ 1），由播放页从数据库读取。 */
+  volume?: number
+  onVolumeChange?: (volume: number) => void
+  onVolumeCommit?: (volume: number) => void
   uiVisible: boolean
   onUiVisibleChange: (visible: boolean) => void
   subs: SubtitleTrack[]
@@ -92,6 +96,9 @@ type PlayerControlsProps = {
 
 export function PlayerControls({
   videoRef,
+  volume: volumeProp = 1,
+  onVolumeChange,
+  onVolumeCommit,
   uiVisible,
   onUiVisibleChange,
   subs,
@@ -128,8 +135,8 @@ export function PlayerControls({
   const [playing, setPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
-  const [volume, setVolume] = useState(1)
-  const [muted, setMuted] = useState(false)
+  const [volume, setVolume] = useState(volumeProp)
+  const [muted, setMuted] = useState(volumeProp === 0)
   const [fullscreen, setFullscreen] = useState(false)
   const [pip, setPip] = useState(false)
   const [controlsHovered, setControlsHovered] = useState(false)
@@ -181,6 +188,17 @@ export function PlayerControls({
     setStageEl(container())
   }, [container])
 
+  // 音量由播放页按用户持久化；配置加载或切换对象后同步到当前 video。
+  useEffect(() => {
+    const el = video()
+    if (!el) return
+    const next = Math.min(1, Math.max(0, volumeProp))
+    el.volume = next
+    el.muted = next === 0
+    setVolume(next)
+    setMuted(next === 0)
+  }, [video, volumeProp])
+
   // 点击控制栏外部时关闭字幕菜单
   useEffect(() => {
     if (!subtitleMenuOpen) return
@@ -336,19 +354,25 @@ export function PlayerControls({
     else el.pause()
   }
 
-  const applyAbsoluteSeek = (absolute: number) => {
-    const el = video()
-    if (!el) return
-    if (onSeekAbsolute?.(absolute)) {
-      pendingSeekRef.current = absolute
-      setCurrentTime(absolute)
-      return
-    }
-    const local = Math.max(0, absolute - streamOffset)
-    el.currentTime = local
-    setCurrentTime(streamOffset + local)
-  }
-  applySeekRef.current = applyAbsoluteSeek
+  const applyAbsoluteSeek = useCallback(
+    (absolute: number) => {
+      const el = video()
+      if (!el) return
+      if (onSeekAbsolute?.(absolute)) {
+        pendingSeekRef.current = absolute
+        setCurrentTime(absolute)
+        return
+      }
+      const local = Math.max(0, absolute - streamOffset)
+      el.currentTime = local
+      setCurrentTime(streamOffset + local)
+    },
+    [onSeekAbsolute, streamOffset, video],
+  )
+
+  useEffect(() => {
+    applySeekRef.current = applyAbsoluteSeek
+  }, [applyAbsoluteSeek])
 
   const handleSeekChange = (v: number) => {
     setScrubValue(v)
@@ -474,10 +498,17 @@ export function PlayerControls({
   const changeVolume = (v: number) => {
     const el = video()
     if (!el) return
-    el.volume = v
-    el.muted = v === 0
-    setVolume(v)
-    setMuted(v === 0)
+    const next = Math.min(1, Math.max(0, v))
+    el.volume = next
+    el.muted = next === 0
+    setVolume(next)
+    setMuted(next === 0)
+    onVolumeChange?.(next)
+  }
+
+  const commitVolume = () => {
+    const el = video()
+    onVolumeCommit?.(el?.volume ?? volume)
   }
 
   const toggleMute = () => {
@@ -803,6 +834,9 @@ export function PlayerControls({
           step={0.05}
           value={muted ? 0 : volume}
           onChange={(e) => changeVolume(Number(e.target.value))}
+          onPointerUp={commitVolume}
+          onKeyUp={commitVolume}
+          onTouchEnd={commitVolume}
           className="hidden w-16 accent-rose-500 sm:block"
           aria-label="音量"
         />

web/src/components/PlayerDanmakuPanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Check, ChevronRight, Film, Hash, Loader2, MessageSquareText, RefreshCw, Search, Sparkles, Tag, X } from 'lucide-react'
+import { Check, ChevronDown, ChevronRight, Eye, EyeOff, Film, Hash, KeyRound, Loader2, MessageSquareText, RefreshCw, Search, Server, Settings2, Sparkles, Tag, X } from 'lucide-react'
 
 import type { DanmakuAnime, DanmakuEpisode, DanmakuLoadedInfo } from '../api/danmaku'
 
@@ -17,10 +17,24 @@ type PlayerDanmakuPanelProps = {
   searching: boolean
   area: number
   onAreaChange: (v: number) => void
+  onAreaCommit: (v: number) => void
   opacity: number
   onOpacityChange: (v: number) => void
+  onOpacityCommit: (v: number) => void
   fontSize: number
   onFontSizeChange: (v: number) => void
+  onFontSizeCommit: (v: number) => void
+  /** Per-user danmaku service endpoint and optional application credentials. */
+  source: string
+  appId: string
+  appKeyConfigured: boolean
+  settingsSaving?: boolean
+  onSaveAdvanced: (values: {
+    source: string
+    appId: string
+    appKey: string
+    clearAppKey: boolean
+  }) => Promise<void>
   /** Multiple anime matched — user must pick one. */
   candidates: DanmakuAnime[]
   /**
@@ -53,10 +67,18 @@ export function PlayerDanmakuPanel({
   searching,
   area,
   onAreaChange,
+  onAreaCommit,
   opacity,
   onOpacityChange,
+  onOpacityCommit,
   fontSize,
   onFontSizeChange,
+  onFontSizeCommit,
+  source,
+  appId,
+  appKeyConfigured,
+  settingsSaving = false,
+  onSaveAdvanced,
   candidates,
   alternatives,
   mergeSources,
@@ -69,6 +91,13 @@ export function PlayerDanmakuPanel({
   onResetAuto,
 }: PlayerDanmakuPanelProps) {
   const [draft, setDraft] = useState(search)
+  const [advancedOpen, setAdvancedOpen] = useState(false)
+  const [sourceDraft, setSourceDraft] = useState(source)
+  const [appIdDraft, setAppIdDraft] = useState(appId)
+  const [appKeyDraft, setAppKeyDraft] = useState('')
+  const [showAppKey, setShowAppKey] = useState(false)
+  const [clearAppKey, setClearAppKey] = useState(false)
+  const [advancedSaving, setAdvancedSaving] = useState(false)
   // 展开的番剧（动画 → 集数两级树），默认全展开便于选择。
   const [openAnime, setOpenAnime] = useState<Set<number>>(new Set())
 
@@ -77,8 +106,32 @@ export function PlayerDanmakuPanel({
     if (open) {
       setDraft(search)
       setOpenAnime(new Set(candidates.map((c) => c.animeId)))
+      setSourceDraft(source)
+      setAppIdDraft(appId)
+      setAppKeyDraft('')
+      setShowAppKey(false)
+      setClearAppKey(false)
     }
-  }, [open, search, candidates])
+  }, [open, search, candidates, source, appId])
+
+  const saveAdvanced = async () => {
+    setAdvancedSaving(true)
+    try {
+      await onSaveAdvanced({
+        source: sourceDraft,
+        appId: appIdDraft,
+        appKey: appKeyDraft,
+        clearAppKey,
+      })
+      setAppKeyDraft('')
+      setShowAppKey(false)
+      setClearAppKey(false)
+    } catch {
+      // 父组件已展示错误提示，这里保持面板打开以便修正后重试。
+    } finally {
+      setAdvancedSaving(false)
+    }
+  }
 
   if (!open) return null
 
@@ -148,6 +201,7 @@ export function PlayerDanmakuPanel({
       <div className="mb-3 flex items-center justify-between">
         <div className="flex items-center gap-2 text-sm font-semibold">
           <MessageSquareText size={16} className="text-rose-400" /> 弹幕设置
+          {settingsSaving && <Loader2 size={12} className="animate-spin text-rose-300" />}
         </div>
         <button
           onClick={onClose}
@@ -397,6 +451,7 @@ export function PlayerDanmakuPanel({
         step={0.05}
         format={(v) => `${Math.round(v * 100)}%`}
         onChange={onAreaChange}
+        onCommit={onAreaCommit}
       />
       {/* 透明度 */}
       <SliderRow
@@ -407,6 +462,7 @@ export function PlayerDanmakuPanel({
         step={0.05}
         format={(v) => `${Math.round(v * 100)}%`}
         onChange={onOpacityChange}
+        onCommit={onOpacityCommit}
       />
       {/* 字体大小 */}
       <SliderRow
@@ -417,7 +473,106 @@ export function PlayerDanmakuPanel({
         step={1}
         format={(v) => `${Math.round(v)}px`}
         onChange={onFontSizeChange}
+        onCommit={onFontSizeCommit}
       />
+      <div className="mt-3 border-t border-white/10 pt-3">
+        <button
+          type="button"
+          onClick={() => setAdvancedOpen((value) => !value)}
+          className="flex w-full items-center justify-between rounded-lg bg-white/5 px-2.5 py-2 text-xs font-medium text-white/75 transition hover:bg-white/10 hover:text-white"
+        >
+          <span className="flex items-center gap-1.5">
+            <Settings2 size={13} className="text-rose-300" /> 高级
+          </span>
+          <ChevronDown
+            size={14}
+            className={'transition-transform ' + (advancedOpen ? 'rotate-180' : '')}
+          />
+        </button>
+
+        {advancedOpen && (
+          <div className="mt-2 space-y-2.5 rounded-xl border border-white/10 bg-black/30 p-2.5">
+            <label className="block">
+              <span className="mb-1 flex items-center gap-1 text-[11px] text-white/55">
+                <Server size={11} /> 弹幕服务地址
+              </span>
+              <input
+                value={sourceDraft}
+                onChange={(e) => setSourceDraft(e.target.value)}
+                placeholder="留空使用 https://api.dandanplay.net"
+                className="w-full rounded-lg border border-white/15 bg-white/5 px-2.5 py-2 text-xs outline-none placeholder:text-white/30 focus:border-rose-400/60"
+              />
+            </label>
+
+            <label className="block">
+              <span className="mb-1 flex items-center gap-1 text-[11px] text-white/55">
+                <KeyRound size={11} /> 开放 API AppId
+              </span>
+              <input
+                value={appIdDraft}
+                onChange={(e) => setAppIdDraft(e.target.value)}
+                placeholder="官方源可留空；第三方源按需填写"
+                className="w-full rounded-lg border border-white/15 bg-white/5 px-2.5 py-2 text-xs outline-none placeholder:text-white/30 focus:border-rose-400/60"
+              />
+            </label>
+
+            <label className="block">
+              <span className="mb-1 flex items-center justify-between gap-2 text-[11px] text-white/55">
+                <span className="flex items-center gap-1">
+                  <KeyRound size={11} /> 应用密钥 AppSecret
+                </span>
+                {appKeyConfigured && !clearAppKey && (
+                  <span className="text-[10px] text-emerald-300">已保存</span>
+                )}
+              </span>
+              <span className="relative block">
+                <input
+                  type={showAppKey ? 'text' : 'password'}
+                  value={appKeyDraft}
+                  disabled={clearAppKey}
+                  onChange={(e) => setAppKeyDraft(e.target.value)}
+                  placeholder={appKeyConfigured ? '留空保持不变' : '仅保存在服务端'}
+                  className="w-full rounded-lg border border-white/15 bg-white/5 px-2.5 py-2 pr-8 text-xs outline-none placeholder:text-white/30 focus:border-rose-400/60 disabled:opacity-40"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowAppKey((value) => !value)}
+                  disabled={clearAppKey}
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-white/45 hover:text-white disabled:opacity-30"
+                  title={showAppKey ? '隐藏密钥' : '显示密钥'}
+                >
+                  {showAppKey ? <EyeOff size={12} /> : <Eye size={12} />}
+                </button>
+              </span>
+            </label>
+
+            {appKeyConfigured && (
+              <label className="flex cursor-pointer items-center gap-2 text-[10px] text-amber-200/75">
+                <input
+                  type="checkbox"
+                  checked={clearAppKey}
+                  onChange={(e) => setClearAppKey(e.target.checked)}
+                  className="h-3.5 w-3.5 accent-amber-500"
+                />
+                清除已保存的应用密钥
+              </label>
+            )}
+
+            <button
+              type="button"
+              onClick={() => void saveAdvanced()}
+              disabled={advancedSaving || settingsSaving}
+              className="flex w-full items-center justify-center gap-1.5 rounded-lg bg-rose-500 px-2.5 py-2 text-xs font-medium text-white transition hover:bg-rose-600 disabled:opacity-50"
+            >
+              {(advancedSaving || settingsSaving) && <Loader2 size={12} className="animate-spin" />}
+              保存服务设置
+            </button>
+            <p className="text-[10px] leading-relaxed text-white/35">
+              密钥不会回传到浏览器，留空时保持数据库中的原值；官方源留空凭据会使用内置回退，自定义源需自行提供。修改后仅对当前账号生效。
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   )
 }
@@ -430,6 +585,7 @@ function SliderRow({
   step,
   format,
   onChange,
+  onCommit,
 }: {
   label: string
   value: number
@@ -438,6 +594,7 @@ function SliderRow({
   step: number
   format: (v: number) => string
   onChange: (v: number) => void
+  onCommit: (v: number) => void
 }) {
   return (
     <div className="mb-2.5">
@@ -452,6 +609,8 @@ function SliderRow({
         step={step}
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}
+        onPointerUp={(e) => onCommit(Number(e.currentTarget.value))}
+        onKeyUp={(e) => onCommit(Number(e.currentTarget.value))}
         className="w-full accent-rose-500"
       />
     </div>

web/src/pages/PlayerPage.tsx

@@ -5,7 +5,13 @@ import toast from 'react-hot-toast'
 
 import { mediaAPI, libraryAPI } from '../api/library'
 import { hlsURL, postPlaybackProgressKeepalive, stopHLSJob, streamURL } from '../api/client'
-import { danmakuAPI, type DanmakuAnime, type DanmakuLoadedInfo } from '../api/danmaku'
+import {
+  danmakuAPI,
+  type DanmakuAnime,
+  type DanmakuConfig,
+  type DanmakuLoadedInfo,
+  type DanmakuSettingsPatch,
+} from '../api/danmaku'
 import { playbackAPI } from '../api/playback'
 import { subtitlesAPI, type SubtitleTrack } from '../api/subtitles'
 import { systemAPI } from '../api/system'
@@ -55,6 +61,12 @@ type PlaybackProgressSession = {
   sequence: number
 }
 
+function normalizePlayerVolume(value: unknown): number {
+  const parsed = Number(value)
+  if (!Number.isFinite(parsed)) return 1
+  return Math.min(1, Math.max(0, parsed))
+}
+
 function newPlaybackProgressSession(mediaId: string): PlaybackProgressSession {
   const randomID =
     typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
@@ -94,7 +106,11 @@ export function PlayerPage() {
     )
   const [subtitlePosition, setSubtitlePosition] = useState<SubtitlePosition>(loadSubtitlePosition)
   const [subtitleStyle, setSubtitleStyle] = useState<SubtitleStylePreset>(loadSubtitleStyle)
+  const [playerVolume, setPlayerVolume] = useState(() =>
+    normalizePlayerVolume(authUser?.player_volume),
+  )
   const persistedSubtitleChineseModeRef = useRef(subtitleChineseMode)
+  const playerVolumeTouchedRef = useRef(false)
   const subtitlePreferenceTouchedRef = useRef(false)
   const subtitlePreferenceSaveQueueRef = useRef<Promise<void>>(Promise.resolve())
   const [hlsUnavailable, setHlsUnavailable] = useState(false)
@@ -131,6 +147,10 @@ export function PlayerPage() {
   const [danmakuOpacity, setDanmakuOpacity] = useState(1)
   const [danmakuFontSize, setDanmakuFontSize] = useState(24)
   const [danmakuArea, setDanmakuArea] = useState(1)
+  const [danmakuSource, setDanmakuSource] = useState('')
+  const [danmakuAppID, setDanmakuAppID] = useState('')
+  const [danmakuAppKeyConfigured, setDanmakuAppKeyConfigured] = useState(false)
+  const [playerSettingsSaving, setPlayerSettingsSaving] = useState(false)
 
   // 选集 / 播放列表状态
   const [playlistEpisodes, setPlaylistEpisodes] = useState<Media[]>([])
@@ -181,51 +201,151 @@ export function PlayerPage() {
     }
   }, [setAuthUser])
 
-  // 读取宿主机已保存的弹幕参数作为面板初始值（无 admin 权限也可读）。
-  useEffect(() => {
-    danmakuAPI
-      .config()
-      .then((cfg) => {
-        setDanmakuEnabled(cfg.enabled)
-        setDanmakuOpacity(Number(cfg.opacity) || 1)
-        setDanmakuFontSize(Number(cfg.font_size) || 24)
-        setDanmakuArea(Number(cfg.area) || 1)
-      })
-      .catch(() => undefined)
+  const applyDanmakuConnectionConfig = useCallback((cfg: DanmakuConfig) => {
+    setDanmakuSource(cfg.source ?? '')
+    setDanmakuAppID(cfg.app_id ?? '')
+    setDanmakuAppKeyConfigured(Boolean(cfg.app_key_configured))
   }, [])
 
-  // 读取弹幕配置（含按用户存储的合并偏好），初始化面板。
+  const saveDanmakuSettings = useCallback(
+    async (patch: DanmakuSettingsPatch, failureMessage = '播放器设置保存失败，请重试') => {
+      setPlayerSettingsSaving(true)
+      try {
+        const cfg = await danmakuAPI.updateSettings(patch)
+        applyDanmakuConnectionConfig(cfg)
+        return cfg
+      } catch (error) {
+        toast.error(failureMessage)
+        throw error
+      } finally {
+        setPlayerSettingsSaving(false)
+      }
+    },
+    [applyDanmakuConnectionConfig],
+  )
+
+  // 一次读取当前用户的音量、弹幕渲染参数、服务地址和凭据配置状态。
   useEffect(() => {
     let cancelled = false
     danmakuAPI
       .config()
       .then((cfg) => {
         if (cancelled) return
+        const volume = normalizePlayerVolume(cfg.volume)
+        if (!playerVolumeTouchedRef.current) {
+          setPlayerVolume(volume)
+        }
+        setDanmakuEnabled(cfg.enabled)
+        setDanmakuOpacity(Number(cfg.opacity) || 1)
+        setDanmakuFontSize(Number(cfg.font_size) || 24)
+        setDanmakuArea(Number(cfg.area) || 1)
         setDanmakuMergeSources(Boolean(cfg.merge_sources))
+        applyDanmakuConnectionConfig(cfg)
+        if (!playerVolumeTouchedRef.current) {
+          const current = useAuthStore.getState().user
+          if (current) setAuthUser({ ...current, player_volume: volume })
+        }
       })
       .catch(() => {
-        // 配置读取失败时保持默认（不合并），不影响播放。
+        // 配置读取失败时保持本地默认值，不影响播放。
       })
     return () => {
       cancelled = true
     }
+  }, [applyDanmakuConnectionConfig, setAuthUser, authUser?.id])
+
+  const changePlayerVolume = useCallback((next: number) => {
+    playerVolumeTouchedRef.current = true
+    setPlayerVolume(normalizePlayerVolume(next))
   }, [])
 
+  const commitPlayerVolume = useCallback(
+    (next: number) => {
+      playerVolumeTouchedRef.current = true
+      const volume = normalizePlayerVolume(next)
+      setPlayerVolume(volume)
+      void danmakuAPI
+        .updateSettings({ volume })
+        .then((cfg) => {
+          const saved = normalizePlayerVolume(cfg.volume)
+          setPlayerVolume(saved)
+          const current = useAuthStore.getState().user
+          if (current) setAuthUser({ ...current, player_volume: saved })
+        })
+        .catch(() => {
+          toast.error('音量保存失败，请重试')
+        })
+    },
+    [setAuthUser],
+  )
+
+  const saveDanmakuAdvanced = useCallback(
+    async (values: { source: string; appId: string; appKey: string; clearAppKey: boolean }) => {
+      const patch: DanmakuSettingsPatch = {
+        source: values.source.trim(),
+        app_id: values.appId.trim(),
+      }
+      if (values.clearAppKey) {
+        patch.clear_app_key = true
+      } else if (values.appKey.trim()) {
+        patch.app_key = values.appKey.trim()
+      }
+      const cfg = await saveDanmakuSettings(patch, '弹幕服务设置保存失败，请重试')
+      setDanmakuSource(cfg.source ?? '')
+      setDanmakuAppID(cfg.app_id ?? '')
+      setDanmakuAppKeyConfigured(Boolean(cfg.app_key_configured))
+      // 地址或凭据变化后立即按新配置重新抓取当前对象的弹幕。
+      setDanmakuSearching(true)
+      setDanmakuSearchTrigger((prev) => prev + 1)
+      toast.success('弹幕服务设置已保存')
+    },
+    [saveDanmakuSettings],
+  )
+
   // 切换合并开关：先落库，成功后再重新抓取，避免与后端读到的偏好不一致。
-  const danmakuChangeMergeSources = useCallback((next: boolean) => {
-    setDanmakuMergeSaving(true)
-    danmakuAPI
-      .updateSettings({ mergeSources: next })
-      .then(() => {
-        setDanmakuMergeSources(next)
-        setDanmakuSearching(true)
-        setDanmakuSearchTrigger((prev) => prev + 1)
-      })
-      .catch(() => {
-        // 保存失败时保持原值，用户可重试。
-      })
-      .finally(() => setDanmakuMergeSaving(false))
-  }, [])
+  const danmakuChangeMergeSources = useCallback(
+    (next: boolean) => {
+      setDanmakuMergeSaving(true)
+      saveDanmakuSettings({ merge_sources: next })
+        .then(() => {
+          setDanmakuMergeSources(next)
+          setDanmakuSearching(true)
+          setDanmakuSearchTrigger((prev) => prev + 1)
+        })
+        .catch(() => undefined)
+        .finally(() => setDanmakuMergeSaving(false))
+    },
+    [saveDanmakuSettings],
+  )
+
+  const danmakuChangeEnabled = useCallback(
+    (next: boolean) => {
+      setDanmakuEnabled(next)
+      void saveDanmakuSettings({ enabled: next }).catch(() => undefined)
+    },
+    [saveDanmakuSettings],
+  )
+
+  const commitDanmakuArea = useCallback(
+    (next: number) => {
+      void saveDanmakuSettings({ area: next }).catch(() => undefined)
+    },
+    [saveDanmakuSettings],
+  )
+
+  const commitDanmakuOpacity = useCallback(
+    (next: number) => {
+      void saveDanmakuSettings({ opacity: next }).catch(() => undefined)
+    },
+    [saveDanmakuSettings],
+  )
+
+  const commitDanmakuFontSize = useCallback(
+    (next: number) => {
+      void saveDanmakuSettings({ font_size: next }).catch(() => undefined)
+    },
+    [saveDanmakuSettings],
+  )
 
   // 用户手动搜索：带关键词重新拉取（search=null 时按视频名）。
   // loading 状态由 DanmakuStage 拉取完成回调（onLoaded）驱动。
@@ -1038,6 +1158,9 @@ export function PlayerPage() {
         onSubtitleStyleChange={changeSubtitleStyle}
         videoRef={ref}
         onVideoError={handleVideoError}
+        playerVolume={playerVolume}
+        onPlayerVolumeChange={changePlayerVolume}
+        onPlayerVolumeCommit={commitPlayerVolume}
         danmakuEnabled={danmakuEnabled}
         danmakuOpacity={danmakuOpacity}
         danmakuFontSize={danmakuFontSize}
@@ -1076,16 +1199,24 @@ export function PlayerPage() {
             open={danmakuOpen}
             onClose={() => setDanmakuOpen(false)}
             enabled={danmakuEnabled}
-            onToggleEnabled={setDanmakuEnabled}
+            onToggleEnabled={danmakuChangeEnabled}
             search={danmakuSearch ?? ''}
             onSearch={searchDanmaku}
             searching={danmakuSearching}
             area={danmakuArea}
             onAreaChange={setDanmakuArea}
+            onAreaCommit={commitDanmakuArea}
             opacity={danmakuOpacity}
             onOpacityChange={setDanmakuOpacity}
+            onOpacityCommit={commitDanmakuOpacity}
             fontSize={danmakuFontSize}
             onFontSizeChange={setDanmakuFontSize}
+            onFontSizeCommit={commitDanmakuFontSize}
+            source={danmakuSource}
+            appId={danmakuAppID}
+            appKeyConfigured={danmakuAppKeyConfigured}
+            settingsSaving={playerSettingsSaving}
+            onSaveAdvanced={saveDanmakuAdvanced}
             candidates={danmakuCandidates}
             alternatives={danmakuAlternatives}
             mergeSources={danmakuMergeSources}

web/src/pages/PlayerVideoStage.tsx

@@ -147,6 +147,9 @@ type PlayerVideoStageProps = {
   onSubtitleStyleChange: (style: SubtitleStylePreset) => void
   videoRef: RefObject<HTMLVideoElement>
   onVideoError: () => void
+  playerVolume: number
+  onPlayerVolumeChange: (volume: number) => void
+  onPlayerVolumeCommit: (volume: number) => void
   danmakuEnabled: boolean
   danmakuOpacity: number
   danmakuFontSize: number
@@ -192,6 +195,9 @@ export function PlayerVideoStage({
   onSubtitleStyleChange,
   videoRef,
   onVideoError,
+  playerVolume,
+  onPlayerVolumeChange,
+  onPlayerVolumeCommit,
   danmakuEnabled,
   danmakuOpacity,
   danmakuFontSize,
@@ -631,6 +637,9 @@ export function PlayerVideoStage({
           </div>
           <PlayerControls
             videoRef={videoRef}
+            volume={playerVolume}
+            onVolumeChange={onPlayerVolumeChange}
+            onVolumeCommit={onPlayerVolumeCommit}
             uiVisible={controlsVisible}
             onUiVisibleChange={setControlsVisible}
             subs={subs}

web/src/pages/settingsGroupDanmaku.ts

@@ -1,64 +0,0 @@
-import type { SettingGroup } from './settingsGroupTypes'
-
-// 弹幕配置：对接 dandanplay（弹弹play）协议弹幕源 + 渲染通用功能。
-// 来源地址留空时使用官方 https://api.dandanplay.net；填写任何符合
-// dandanplay 协议（/api/v2/search/episodes + /api/v2/comment/:id）的服务地址均可。
-export const danmakuSettingsGroup: SettingGroup = {
-  key: 'danmaku',
-  label: '弹幕',
-  description: '弹幕来源（dandanplay 协议）与渲染参数（透明度 / 字号 / 显示区域）',
-  items: [
-    {
-      key: 'danmaku.enabled',
-      label: '启用弹幕',
-      type: 'toggle',
-      hint: '关闭后播放页不拉取、不渲染弹幕',
-      defaultValue: 'true',
-    },
-    {
-      key: 'danmaku.source',
-      label: '弹幕服务地址（dandanplay 协议）',
-      type: 'text',
-      hint: '留空使用官方 https://api.dandanplay.net。可填写自建或第三方符合 dandanplay 协议的服务地址（含 /api/v2/search/episodes 搜索与 /api/v2/comment/:id 弹幕接口）。播放时按视频名称搜索番剧并拉取 Bilibili 格式 XML 弹幕。',
-      placeholder: 'https://api.dandanplay.net',
-    },
-    {
-      key: 'danmaku.app_id',
-      label: 'AppId（弹弹play 开放 API）',
-      type: 'text',
-      hint: '弹弹play DevCenter 申请的应用 ID（https://doc.dandanplay.com/open/）。官方接口要求应用认证，留空使用内置凭据（签名认证，开箱即用）；填写自己的 AppId/AppKey 可覆盖内置凭据。仅对官方 api.dandanplay.net 生效，第三方协议源不会携带凭据。',
-      placeholder: '在 DevCenter 申请的应用 ID',
-    },
-    {
-      key: 'danmaku.app_key',
-      label: 'AppKey（弹弹play 应用密钥）',
-      type: 'text',
-      hint: '与 AppId 配套的 AppSecret，只保存在服务器上用于计算请求签名（base64(sha256(AppId+Timestamp+Path+Secret))），不会下发到播放器。',
-      placeholder: '在 DevCenter 申请的应用密钥',
-    },
-    {
-      key: 'danmaku.opacity',
-      label: '弹幕透明度',
-      type: 'number',
-      hint: '0.1 ~ 1，数值越小越透明（1 为完全不透明）',
-      defaultValue: '1',
-      placeholder: '1',
-    },
-    {
-      key: 'danmaku.font_size',
-      label: '弹幕字号',
-      type: 'number',
-      hint: '弹幕渲染字号（px），默认 24',
-      defaultValue: '24',
-      placeholder: '24',
-    },
-    {
-      key: 'danmaku.area',
-      label: '弹幕显示区域',
-      type: 'number',
-      hint: '0 ~ 1，弹幕占视频高度比例（1 为全屏，0.5 为上半屏）',
-      defaultValue: '1',
-      placeholder: '1',
-    },
-  ],
-}

web/src/pages/settingsGroups.ts

@@ -1,6 +1,5 @@
 import { adultSettingsGroup } from './settingsGroupAccess'
 import { apiConfigsSettingsGroup } from './settingsGroupAPIConfigs'
-import { danmakuSettingsGroup } from './settingsGroupDanmaku'
 import { generalSettingsGroup } from './settingsGroupGeneral'
 import { recognitionWordsSettingsGroup } from './settingsGroupRecognitionWords'
 import type { SettingGroup } from './settingsGroupTypes'
@@ -26,7 +25,6 @@ export const GROUPS: SettingGroup[] = [
   databaseSettingsGroup,
   apiConfigsSettingsGroup,
   recognitionWordsSettingsGroup,
-  danmakuSettingsGroup,
   adultSettingsGroup,
   aboutSettingsGroup,
 ]

web/src/types/auth.ts

@@ -8,6 +8,8 @@ export interface User {
   avatar_url?: string
   hide_adult?: boolean
   subtitle_chinese_mode?: 'original' | 'simplified' | 'traditional'
+  /** 本地缓存的播放器音量，服务端配置接口会刷新。 */
+  player_volume?: number
   force_password_reset: boolean
   is_active: boolean
   allowed_library_ids?: string[]

web/src/utils/withoutVideoFrame.test.ts

@@ -0,0 +1,30 @@
+import { runWithoutGlobalVideoFrame } from './withoutVideoFrame.ts'
+
+function check(name: string, cond: boolean) {
+  if (!cond) throw new Error(`runWithoutGlobalVideoFrame: ${name}`)
+}
+
+const FakeVideoFrame = function VideoFrame() {
+  return undefined
+}
+
+Object.defineProperty(globalThis, 'VideoFrame', {
+  configurable: true,
+  writable: true,
+  value: FakeVideoFrame,
+})
+
+let seenInside = typeof (globalThis as { VideoFrame?: unknown }).VideoFrame
+const result = runWithoutGlobalVideoFrame(() => {
+  seenInside = typeof (globalThis as { VideoFrame?: unknown }).VideoFrame
+  return 7
+})
+
+check('hides VideoFrame inside the callback', seenInside === 'undefined')
+check('returns the callback result', result === 7)
+check(
+  'restores VideoFrame afterwards',
+  (globalThis as { VideoFrame?: unknown }).VideoFrame === FakeVideoFrame,
+)
+
+console.log('withoutVideoFrame.test.ts ok')

web/src/utils/withoutVideoFrame.ts

@@ -0,0 +1,27 @@
+/**
+ * JASSUB probes color space with `new VideoFrame(video)` during construct.
+ * Direct-play 302s to a CDN / remote Emby taint <video>, and Chrome throws
+ * SecurityError. Overlay rendering uses requestVideoFrameCallback metadata,
+ * not pixels, so hide VideoFrame for the sync constructor call.
+ *
+ * ponytail: skips color-space matching for all ASS playback, not only tainted
+ * sources. 302 completes after construct, so we cannot probe currentSrc first.
+ * Upgrade: canvas-only JASSUB driven by rVFC metadata when the element taints.
+ */
+export function runWithoutGlobalVideoFrame<T>(fn: () => T): T {
+  const desc = Object.getOwnPropertyDescriptor(globalThis, 'VideoFrame')
+  Object.defineProperty(globalThis, 'VideoFrame', {
+    configurable: true,
+    writable: true,
+    value: undefined,
+  })
+  try {
+    return fn()
+  } finally {
+    if (desc) {
+      Object.defineProperty(globalThis, 'VideoFrame', desc)
+    } else {
+      delete (globalThis as { VideoFrame?: unknown }).VideoFrame
+    }
+  }
+}