优化

支持按用户保存播放器与弹幕偏好
在 user 记录上新增播放器音量、弹幕开关、透明度、字号、显示区域、合并偏好、自定义弹幕源以及 dandanplay 应用凭据字段，并提供 PUT /danmaku/settings 局部更新接口，带取值校验。返回脱敏后的完整渲染配置，绝不回传应用密钥，仅在响应中标记密钥是否已配置。结果缓存键加入用户 ID 与凭据指纹，避免不同用户或凭据串用缓存；旧版实例级设置仅作为未登录与迁移期的回退。
2026-09-28 11:16:37 +08:00 · 2026-09-13 23:11:28 +08:00 · 2026-09-13 23:01:43 +08:00
17 changed files with 857 additions and 210 deletions
@@ -2,6 +2,7 @@
 package handler

 import (
+	"errors"
 	"net/http"
 	"strings"

@@ -16,10 +17,8 @@ import (
 func getDanmakuHandler(svc *service.Container) gin.HandlerFunc {
 	return func(c *gin.Context) {
 		uid := currentUserID(c)
-		// 弹幕合并偏好按用户存储：这里读取后作为本次抓取的选项传入。
-		opts := service.DanmakuFetchOptions{
-			MergeSources: svc.Danmaku.MergeSourcesEnabled(c.Request.Context(), uid),
-		}
+		// 按用户读取弹幕源、凭据、合并偏好和渲染参数。
+		opts := service.DanmakuFetchOptions{UserID: uid}
 		res, err := svc.Danmaku.FetchWithOptions(
 			c.Request.Context(), c.Param("id"), c.Query("kw"), c.Query("episodeId"), opts)
 		if err != nil {
@@ -30,17 +29,15 @@ func getDanmakuHandler(svc *service.Container) gin.HandlerFunc {
 	}
 }

-// getDanmakuConfigHandler exposes the danmaku renderer knobs (opacity, font
-// size, area, enabled) so the player can initialize its control panel without
-// admin privileges.
+// getDanmakuConfigHandler exposes the current user's player volume and danmaku
+// preferences so the player can initialize without admin privileges.
 func getDanmakuConfigHandler(svc *service.Container) gin.HandlerFunc {
 	return func(c *gin.Context) {
 		c.JSON(http.StatusOK, svc.Danmaku.ConfigForUser(c.Request.Context(), currentUserID(c)))
 	}
 }

-// updateDanmakuSettingsHandler 持久化当前用户的弹幕偏好。目前只有合并开关，
-// 落在 user 表上（与字幕简繁偏好同样按用户存储）。
+// updateDanmakuSettingsHandler 持久化当前用户的播放器音量与弹幕偏好。
 func updateDanmakuSettingsHandler(svc *service.Container) gin.HandlerFunc {
 	return func(c *gin.Context) {
 		uid := currentUserID(c)
@@ -48,21 +45,20 @@ func updateDanmakuSettingsHandler(svc *service.Container) gin.HandlerFunc {
 			c.JSON(http.StatusUnauthorized, gin.H{"error": "not authenticated"})
 			return
 		}
-		var req struct {
-			MergeSources *bool `json:"merge_sources"`
-		}
+		var req service.DanmakuSettingsPatch
 		if err := c.ShouldBindJSON(&req); err != nil {
 			c.JSON(http.StatusBadRequest, gin.H{"error": "invalid body"})
 			return
 		}
-		if req.MergeSources == nil {
-			c.JSON(http.StatusBadRequest, gin.H{"error": "merge_sources is required"})
+		cfg, err := svc.Danmaku.UpdateUserSettings(c.Request.Context(), uid, req)
+		if errors.Is(err, service.ErrNoDanmakuSettings) || errors.Is(err, service.ErrInvalidDanmakuSettings) {
+			c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
 			return
 		}
-		if err := svc.Danmaku.SetMergeSources(c.Request.Context(), uid, *req.MergeSources); err != nil {
+		if err != nil {
 			c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 			return
 		}
-		c.JSON(http.StatusOK, gin.H{"merge_sources": *req.MergeSources})
+		c.JSON(http.StatusOK, cfg)
 	}
 }
@@ -133,3 +133,58 @@ func TestGetDanmakuConfigIncludesPerUserMergePreference(t *testing.T) {
 		t.Fatal("config should reflect the persisted merge preference")
 	}
 }
+
+func TestUpdateDanmakuSettingsPersistsAllPlayerPreferences(t *testing.T) {
+	svc := newDanmakuSettingsService(t)
+
+	body := "{\"enabled\":false,\"opacity\":0.6,\"font_size\":32,\"area\":0.7,\"merge_sources\":true,\"volume\":0.35,\"source\":\"https://dm.example/base/\",\"app_id\":\"my-app-id\",\"app_key\":\"my-app-secret\"}"
+	c, w := newDanmakuSettingsContext(t, svc, http.MethodPut, "/danmaku/settings", body, "user-1")
+	updateDanmakuSettingsHandler(svc)(c)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200 (body=%s)", w.Code, w.Body.String())
+	}
+	if bytes.Contains(w.Body.Bytes(), []byte("my-app-secret")) {
+		t.Fatal("response must never expose the application secret")
+	}
+	var cfg service.DanmakuRenderConfig
+	if err := json.Unmarshal(w.Body.Bytes(), &cfg); err != nil {
+		t.Fatalf("decode: %v", err)
+	}
+	if cfg.Enabled || cfg.Opacity != "0.6" || cfg.FontSize != "32" || cfg.Area != "0.7" {
+		t.Fatalf("unexpected render config: %+v", cfg)
+	}
+	if !cfg.MergeSources || cfg.Volume != 0.35 {
+		t.Fatalf("unexpected user preferences: %+v", cfg)
+	}
+	if cfg.Source != "https://dm.example/base" || cfg.AppID != "my-app-id" || !cfg.AppKeyConfigured {
+		t.Fatalf("unexpected service config: %+v", cfg)
+	}
+
+	user, err := svc.Repo.User.FindByID(t.Context(), "user-1")
+	if err != nil || user == nil {
+		t.Fatalf("read persisted user: %v", err)
+	}
+	if user.DanmakuAppKey != "my-app-secret" || user.PlayerVolume != 0.35 || user.DanmakuSource != "https://dm.example/base" {
+		t.Fatalf("preferences not persisted: %+v", user)
+	}
+}
+
+func TestUpdateDanmakuSettingsRejectsInvalidSource(t *testing.T) {
+	svc := newDanmakuSettingsService(t)
+
+	c, w := newDanmakuSettingsContext(t, svc, http.MethodPut, "/danmaku/settings",
+		`{"source":"ftp://dm.example.com"}`, "user-1")
+	updateDanmakuSettingsHandler(svc)(c)
+
+	if w.Code != http.StatusBadRequest {
+		t.Fatalf("status = %d, want 400 (body=%s)", w.Code, w.Body.String())
+	}
+	user, err := svc.Repo.User.FindByID(t.Context(), "user-1")
+	if err != nil || user == nil {
+		t.Fatalf("read user: %v", err)
+	}
+	if user.DanmakuSource != "" {
+		t.Fatalf("invalid source was persisted: %q", user.DanmakuSource)
+	}
+}
@@ -31,10 +31,17 @@ type User struct {
 	// SubtitleChineseMode 是网页播放器外挂字幕的简繁转换偏好：
 	// original / simplified / traditional。
 	SubtitleChineseMode string `gorm:"size:16;not null;default:original" json:"subtitle_chinese_mode"`
-	// DanmakuMergeSources 是网页播放器的弹幕偏好：开启后，同一集的多个弹幕
-	// 来源会被合并并按「时间 + 内容」去重后一起展示。按用户存储，避免一个
-	// 用户的开关影响其他人。
-	DanmakuMergeSources bool `gorm:"default:false" json:"danmaku_merge_sources"`
+	// 网页播放器偏好按用户存储，切换媒体对象后继续沿用。
+	PlayerVolume        float64 `gorm:"not null;default:1" json:"player_volume"`
+	DanmakuEnabled      bool    `gorm:"not null;default:true" json:"danmaku_enabled"`
+	DanmakuOpacity      float64 `gorm:"not null;default:1" json:"danmaku_opacity"`
+	DanmakuFontSize     int     `gorm:"not null;default:24" json:"danmaku_font_size"`
+	DanmakuArea         float64 `gorm:"not null;default:1" json:"danmaku_area"`
+	DanmakuMergeSources bool    `gorm:"not null;default:false" json:"danmaku_merge_sources"`
+	DanmakuSource       string  `gorm:"size:512" json:"danmaku_source,omitempty"`
+	DanmakuAppID        string  `gorm:"size:128" json:"danmaku_app_id,omitempty"`
+	// DanmakuAppKey 只在服务端读取并用于请求签名，绝不通过用户资料接口下发。
+	DanmakuAppKey string `gorm:"size:256" json:"-"`
 	// ExpiredAt is the account expiry time. Nil means the account never
 	// expires. When set and in the past, the account is treated as expired
 	// (login blocked) until an admin or a redemption code renews it.
@@ -28,9 +28,9 @@ import (
 	"github.com/truewhile/MeBox/internal/repository"
 )

-// Danmaku setting keys, managed through the admin settings UI (PUT
-// /admin/settings). They are stored in the Setting table so the playback
-// page can pull them without admin privileges.
+// Legacy instance-level danmaku settings. Playback preferences now live on
+// model.User; these keys remain only as a fallback for unauthenticated/legacy
+// service paths and tests.
 const (
 	DanmakuEnabledKey  = "danmaku.enabled"
 	DanmakuSourceKey   = "danmaku.source"
@@ -56,21 +56,55 @@ var danmakuOfficialBase = DanmakuDefaultSource

 // DanmakuRenderConfig carries the renderer knobs to the web player.
 type DanmakuRenderConfig struct {
-	Enabled  bool   `json:"enabled"`
-	Source   string `json:"source,omitempty"`
-	Opacity  string `json:"opacity"`
-	FontSize string `json:"font_size"`
-	Area     string `json:"area"`
+	Enabled  bool    `json:"enabled"`
+	Source   string  `json:"source,omitempty"`
+	AppID    string  `json:"app_id,omitempty"`
+	Opacity  string  `json:"opacity"`
+	FontSize string  `json:"font_size"`
+	Area     string  `json:"area"`
+	Volume   float64 `json:"volume"`
 	// MergeSources 是当前用户的弹幕合并偏好（按用户存储）。
 	MergeSources bool `json:"merge_sources"`
+	// AppKeyConfigured 只表明用户是否保存了应用密钥，不回传密钥明文。
+	AppKeyConfigured bool `json:"app_key_configured"`
 }

 // DanmakuFetchOptions 承载单次抓取的调用方偏好。
 type DanmakuFetchOptions struct {
 	// MergeSources 为真时，同一集的多个来源会被合并去重后一起返回。
 	MergeSources bool
+	// UserID 非空时使用该用户的弹幕源、凭据与渲染偏好。
+	UserID string
 }

+// DanmakuSettingsPatch 是播放器弹幕设置的局部更新。nil 字段保持不变。
+type DanmakuSettingsPatch struct {
+	Enabled      *bool    `json:"enabled"`
+	Source       *string  `json:"source"`
+	AppID        *string  `json:"app_id"`
+	AppKey       *string  `json:"app_key"`
+	ClearAppKey  bool     `json:"clear_app_key"`
+	Opacity      *float64 `json:"opacity"`
+	FontSize     *int     `json:"font_size"`
+	Area         *float64 `json:"area"`
+	MergeSources *bool    `json:"merge_sources"`
+	Volume       *float64 `json:"volume"`
+}
+
+type danmakuUserContextKey struct{}
+
+type danmakuUserContext struct {
+	source string
+	appID  string
+	appKey string
+}
+
+// ErrNoDanmakuSettings 表示更新请求没有包含任何可写字段。
+var ErrNoDanmakuSettings = errors.New("no settings to update")
+
+// ErrInvalidDanmakuSettings 表示更新请求包含非法值。
+var ErrInvalidDanmakuSettings = errors.New("invalid player settings")
+
 // DanmakuFetchResult is what /api/danmaku/:id returns. Raw holds the upstream
 // comment payload; parsing happens client-side. The dandanplay protocol has
 // two payload shapes in the wild — the classic Bilibili-style XML and the
@@ -197,9 +231,11 @@ type danmakuResultCacheEntry struct {
 	storedAt  time.Time
 }

-func danmakuResultCacheKey(source, mediaID, keyword, episodeID string, merge bool) string {
+func danmakuResultCacheKey(userID, source, credentialFingerprint, mediaID, keyword, episodeID string, merge bool) string {
 	return strings.Join([]string{
+		strings.TrimSpace(userID),
 		strings.TrimSpace(source),
+		strings.TrimSpace(credentialFingerprint),
 		mediaID,
 		strings.TrimSpace(keyword),
 		strings.TrimSpace(episodeID),
@@ -207,6 +243,18 @@ func danmakuResultCacheKey(source, mediaID, keyword, episodeID string, merge boo
 	}, "\x00")
 }

+// danmakuCredentialFingerprint keeps credential changes in the result cache
+// key without persisting the AppSecret in plain text.
+func danmakuCredentialFingerprint(appID, appKey string) string {
+	appID = strings.TrimSpace(appID)
+	appKey = strings.TrimSpace(appKey)
+	if appID == "" && appKey == "" {
+		return ""
+	}
+	sum := md5.Sum([]byte(appID + "\x00" + appKey))
+	return hex.EncodeToString(sum[:])
+}
+
 func (s *DanmakuService) resultCacheGet(key string) (*DanmakuFetchResult, bool) {
 	if s == nil || key == "" {
 		return nil, false
@@ -300,6 +348,7 @@ func (s *DanmakuService) Config(ctx context.Context) DanmakuRenderConfig {
 		Opacity:  "1",
 		FontSize: "24",
 		Area:     "1",
+		Volume:   1,
 	}
 	if s == nil || s.repo == nil || s.repo.Setting == nil {
 		return cfg
@@ -319,39 +368,164 @@ func (s *DanmakuService) Config(ctx context.Context) DanmakuRenderConfig {
 	return cfg
 }

-// ConfigForUser 在全局渲染设置之外附加当前用户的个性化偏好。
+// ConfigForUser 返回当前用户的播放器与弹幕偏好。用户不存在时回退到旧版
+// 全局配置，便于旧客户端和迁移期平滑工作。
 func (s *DanmakuService) ConfigForUser(ctx context.Context, userID string) DanmakuRenderConfig {
-	cfg := s.Config(ctx)
-	cfg.MergeSources = s.MergeSourcesEnabled(ctx, userID)
-	return cfg
+	if user, ok := s.findUser(ctx, userID); ok {
+		return danmakuConfigFromUser(user)
+	}
+	return s.Config(ctx)
 }

 // MergeSourcesEnabled 返回该用户的弹幕合并偏好，读取失败时回退为关闭。
 func (s *DanmakuService) MergeSourcesEnabled(ctx context.Context, userID string) bool {
-	if s == nil || s.repo == nil || s.repo.User == nil {
-		return false
+	if user, ok := s.findUser(ctx, userID); ok {
+		return user.DanmakuMergeSources
 	}
-	userID = strings.TrimSpace(userID)
-	if userID == "" {
-		return false
-	}
-	user, err := s.repo.User.FindByID(ctx, userID)
-	if err != nil || user == nil {
-		return false
-	}
-	return user.DanmakuMergeSources
+	return false
 }

-// SetMergeSources 持久化该用户的弹幕合并偏好。
-func (s *DanmakuService) SetMergeSources(ctx context.Context, userID string, enabled bool) error {
+func (s *DanmakuService) findUser(ctx context.Context, userID string) (*model.User, bool) {
 	if s == nil || s.repo == nil || s.repo.User == nil {
-		return errors.New("danmaku settings unavailable")
+		return nil, false
 	}
 	userID = strings.TrimSpace(userID)
 	if userID == "" {
-		return errors.New("missing user")
+		return nil, false
 	}
-	return s.repo.User.UpdateFields(ctx, userID, map[string]any{"danmaku_merge_sources": enabled})
+	user, err := s.repo.User.FindByID(ctx, userID)
+	return user, err == nil && user != nil
+}
+
+func danmakuConfigFromUser(user *model.User) DanmakuRenderConfig {
+	if user == nil {
+		return DanmakuRenderConfig{Enabled: true, Opacity: "1", FontSize: "24", Area: "1", Volume: 1}
+	}
+	opacity := user.DanmakuOpacity
+	if opacity < 0.1 || opacity > 1 {
+		opacity = 1
+	}
+	fontSize := user.DanmakuFontSize
+	if fontSize < 10 || fontSize > 96 {
+		fontSize = 24
+	}
+	area := user.DanmakuArea
+	if area < 0.1 || area > 1 {
+		area = 1
+	}
+	volume := user.PlayerVolume
+	if volume < 0 || volume > 1 {
+		volume = 1
+	}
+	return DanmakuRenderConfig{
+		Enabled:          user.DanmakuEnabled,
+		Source:           strings.TrimSpace(user.DanmakuSource),
+		AppID:            strings.TrimSpace(user.DanmakuAppID),
+		Opacity:          strconv.FormatFloat(opacity, 'f', -1, 64),
+		FontSize:         strconv.Itoa(fontSize),
+		Area:             strconv.FormatFloat(area, 'f', -1, 64),
+		Volume:           volume,
+		MergeSources:     user.DanmakuMergeSources,
+		AppKeyConfigured: strings.TrimSpace(user.DanmakuAppKey) != "",
+	}
+}
+
+// UpdateUserSettings 持久化当前用户的播放器与弹幕设置，并返回脱敏后的完整配置。
+func (s *DanmakuService) UpdateUserSettings(ctx context.Context, userID string, patch DanmakuSettingsPatch) (DanmakuRenderConfig, error) {
+	if s == nil || s.repo == nil || s.repo.User == nil {
+		return DanmakuRenderConfig{}, errors.New("player settings unavailable")
+	}
+	userID = strings.TrimSpace(userID)
+	if userID == "" {
+		return DanmakuRenderConfig{}, errors.New("missing user")
+	}
+
+	updates := map[string]any{}
+	if patch.Enabled != nil {
+		updates["danmaku_enabled"] = *patch.Enabled
+	}
+	if patch.Source != nil {
+		source, err := normalizeDanmakuSource(*patch.Source)
+		if err != nil {
+			return DanmakuRenderConfig{}, err
+		}
+		updates["danmaku_source"] = source
+	}
+	if patch.AppID != nil {
+		appID := strings.TrimSpace(*patch.AppID)
+		if len(appID) > 128 {
+			return DanmakuRenderConfig{}, fmt.Errorf("%w: app_id is too long", ErrInvalidDanmakuSettings)
+		}
+		updates["danmaku_app_id"] = appID
+	}
+	if patch.ClearAppKey {
+		updates["danmaku_app_key"] = ""
+	} else if patch.AppKey != nil {
+		if key := strings.TrimSpace(*patch.AppKey); key != "" {
+			if len(key) > 256 {
+				return DanmakuRenderConfig{}, fmt.Errorf("%w: app_key is too long", ErrInvalidDanmakuSettings)
+			}
+			updates["danmaku_app_key"] = key
+		}
+	}
+	if patch.Opacity != nil {
+		if *patch.Opacity < 0.1 || *patch.Opacity > 1 {
+			return DanmakuRenderConfig{}, fmt.Errorf("%w: opacity must be between 0.1 and 1", ErrInvalidDanmakuSettings)
+		}
+		updates["danmaku_opacity"] = *patch.Opacity
+	}
+	if patch.FontSize != nil {
+		if *patch.FontSize < 10 || *patch.FontSize > 96 {
+			return DanmakuRenderConfig{}, fmt.Errorf("%w: font_size must be between 10 and 96", ErrInvalidDanmakuSettings)
+		}
+		updates["danmaku_font_size"] = *patch.FontSize
+	}
+	if patch.Area != nil {
+		if *patch.Area < 0.1 || *patch.Area > 1 {
+			return DanmakuRenderConfig{}, fmt.Errorf("%w: area must be between 0.1 and 1", ErrInvalidDanmakuSettings)
+		}
+		updates["danmaku_area"] = *patch.Area
+	}
+	if patch.MergeSources != nil {
+		updates["danmaku_merge_sources"] = *patch.MergeSources
+	}
+	if patch.Volume != nil {
+		if *patch.Volume < 0 || *patch.Volume > 1 {
+			return DanmakuRenderConfig{}, fmt.Errorf("%w: volume must be between 0 and 1", ErrInvalidDanmakuSettings)
+		}
+		updates["player_volume"] = *patch.Volume
+	}
+	if len(updates) == 0 {
+		return DanmakuRenderConfig{}, ErrNoDanmakuSettings
+	}
+	if err := s.repo.User.UpdateFields(ctx, userID, updates); err != nil {
+		return DanmakuRenderConfig{}, err
+	}
+	return s.ConfigForUser(ctx, userID), nil
+}
+
+// normalizeDanmakuSource validates a user-configured dandanplay endpoint. An
+// empty value means the official endpoint; only explicit HTTP(S) origins are
+// accepted so malformed values never reach the outbound request layer.
+func normalizeDanmakuSource(raw string) (string, error) {
+	source := strings.TrimRight(strings.TrimSpace(raw), "/")
+	if source == "" {
+		return "", nil
+	}
+	if len(source) > 512 {
+		return "", fmt.Errorf("%w: source is too long", ErrInvalidDanmakuSettings)
+	}
+	u, err := url.Parse(source)
+	if err != nil || u.Host == "" || (!strings.EqualFold(u.Scheme, "http") && !strings.EqualFold(u.Scheme, "https")) || u.User != nil {
+		return "", fmt.Errorf("%w: source must be an http(s) URL", ErrInvalidDanmakuSettings)
+	}
+	return source, nil
+}
+
+// SetMergeSources 持久化该用户的弹幕合并偏好，保留旧调用点兼容性。
+func (s *DanmakuService) SetMergeSources(ctx context.Context, userID string, enabled bool) error {
+	_, err := s.UpdateUserSettings(ctx, userID, DanmakuSettingsPatch{MergeSources: &enabled})
+	return err
 }

 // Fetch retrieves danmaku for the given media. keyword overrides the
@@ -388,11 +562,23 @@ func (s *DanmakuService) FetchWithOptions(ctx context.Context, mediaID, keyword,
 		return nil, errors.New("danmaku service unavailable")
 	}
 	cfg := s.Config(ctx)
+	credentialFingerprint := ""
+	if user, ok := s.findUser(ctx, opts.UserID); ok {
+		cfg = danmakuConfigFromUser(user)
+		opts.MergeSources = cfg.MergeSources
+		credentialFingerprint = danmakuCredentialFingerprint(user.DanmakuAppID, user.DanmakuAppKey)
+		ctx = context.WithValue(ctx, danmakuUserContextKey{}, danmakuUserContext{
+			source: cfg.Source,
+			appID:  strings.TrimSpace(user.DanmakuAppID),
+			appKey: strings.TrimSpace(user.DanmakuAppKey),
+		})
+	}
 	if !cfg.Enabled {
 		return &DanmakuFetchResult{DanmakuRenderConfig: cfg, SourceType: "auto"}, nil
 	}
-	key := danmakuResultCacheKey(cfg.Source, mediaID, keyword, episodeID, opts.MergeSources)
+	key := danmakuResultCacheKey(opts.UserID, cfg.Source, credentialFingerprint, mediaID, keyword, episodeID, opts.MergeSources)
 	if cached, ok := s.resultCacheGet(key); ok {
+		cached.DanmakuRenderConfig = cfg
 		return cached, nil
 	}
 	value, err, _ := s.fetchGroup.Do(key, func() (any, error) {
@@ -400,7 +586,7 @@ func (s *DanmakuService) FetchWithOptions(ctx context.Context, mediaID, keyword,
 		if cached, ok := s.resultCacheGet(key); ok {
 			return cached, nil
 		}
-		res, err := s.fetchWithOptionsUncached(ctx, mediaID, keyword, episodeID, opts)
+		res, err := s.fetchWithOptionsUncached(ctx, cfg, mediaID, keyword, episodeID, opts)
 		if err != nil {
 			// 与原实现一致：失败时仍把已填充的渲染配置/匹配信息交给调用方。
 			return res, err
@@ -409,6 +595,9 @@ func (s *DanmakuService) FetchWithOptions(ctx context.Context, mediaID, keyword,
 		return res, nil
 	})
 	res, _ := value.(*DanmakuFetchResult)
+	if res != nil {
+		res.DanmakuRenderConfig = cfg
+	}
 	if err != nil {
 		return cloneDanmakuFetchResult(res), err
 	}
@@ -416,8 +605,8 @@ func (s *DanmakuService) FetchWithOptions(ctx context.Context, mediaID, keyword,
 }

 // fetchWithOptionsUncached 是未命中缓存时执行的原始抓取流程。
-func (s *DanmakuService) fetchWithOptionsUncached(ctx context.Context, mediaID, keyword, episodeID string, opts DanmakuFetchOptions) (*DanmakuFetchResult, error) {
-	res := &DanmakuFetchResult{DanmakuRenderConfig: s.Config(ctx), SourceType: "auto"}
+func (s *DanmakuService) fetchWithOptionsUncached(ctx context.Context, cfg DanmakuRenderConfig, mediaID, keyword, episodeID string, opts DanmakuFetchOptions) (*DanmakuFetchResult, error) {
+	res := &DanmakuFetchResult{DanmakuRenderConfig: cfg, SourceType: "auto"}
 	if !res.Enabled {
 		return res, nil
 	}
@@ -870,19 +1059,37 @@ func (s *DanmakuService) fetchBody(ctx context.Context, sourceURL string, follow
 	return string(body), nil
 }

-// danmakuCredentials resolves the application credentials for the official
-// dandanplay API. Admin-configured values (danmaku.app_id / danmaku.app_key)
-// win; otherwise the built-in obfuscated fallback pair is used. Returns
-// ok=false for any other host so credentials — including the built-in pair —
-// are never sent to third-party dandanplay protocol mirrors. The "official"
-// host follows danmakuOfficialBase (overridable in tests).
+// danmakuCredentials resolves application credentials. Per-user explicit
+// credentials are used for any configured source. Legacy global credentials
+// and the built-in fallback pair are only sent to the official host, never to
+// third-party dandanplay protocol mirrors.
 func (s *DanmakuService) danmakuCredentials(ctx context.Context, sourceURL string) (appID, appKey string, ok bool) {
 	u, err := url.Parse(sourceURL)
 	if err != nil {
 		return "", "", false
 	}
 	official, err := url.Parse(danmakuOfficialBase)
-	if err != nil || !strings.EqualFold(u.Hostname(), official.Hostname()) {
+	if err != nil {
+		return "", "", false
+	}
+	isOfficial := strings.EqualFold(u.Hostname(), official.Hostname())
+	if userCtx, ok := ctx.Value(danmakuUserContextKey{}).(danmakuUserContext); ok {
+		userSource := strings.TrimSpace(userCtx.source)
+		if userSource == "" {
+			userSource = danmakuOfficialBase
+		}
+		if sameDanmakuBase(sourceURL, userSource) {
+			id, key := strings.TrimSpace(userCtx.appID), strings.TrimSpace(userCtx.appKey)
+			if id != "" && key != "" {
+				return id, key, true
+			}
+			if id != "" || key != "" {
+				s.log.Warn("danmaku user credentials incomplete, ignoring them",
+					zap.Bool("has_app_id", id != ""), zap.Bool("has_app_key", key != ""))
+			}
+		}
+	}
+	if !isOfficial {
 		return "", "", false
 	}
 	var id, key string
@@ -60,6 +60,7 @@ func seedDanmakuMedia(t *testing.T, svc *DanmakuService, id, title, originalName
 type danmakuSourceServer struct {
 	server         *httptest.Server
 	lastSearch     string // full query (anime=...&episode=...)
+	lastHeaders    http.Header
 	searchResponse string // JSON body served for /api/v2/search/episodes
 }

@@ -76,6 +77,7 @@ func newDanmakuSourceServerWithSearch(t *testing.T, searchResponse string) *danm
 	mux := http.NewServeMux()
 	mux.HandleFunc("/api/v2/search/episodes", func(w http.ResponseWriter, r *http.Request) {
 		ds.lastSearch = r.URL.RawQuery
+		ds.lastHeaders = r.Header.Clone()
 		w.Header().Set("Content-Type", "application/json")
 		fmt.Fprint(w, ds.searchResponse)
 	})
@@ -404,3 +406,41 @@ func TestDanmakuFetchCoalescesConcurrentRequests(t *testing.T) {
 	}
 	require.EqualValues(t, 1, atomic.LoadInt32(&searchCalls))
 }
+
+func TestDanmakuFetchUsesPerUserSourceAndCredentials(t *testing.T) {
+	srv := newDanmakuSourceServer(t)
+	svc := newDanmakuTestService(t)
+	ctx := context.Background()
+
+	user := model.User{Username: "danmaku-user", PasswordHash: "x", Role: "user", IsActive: true}
+	user.ID = "danmaku-user-1"
+	user.DanmakuEnabled = true
+	user.DanmakuSource = srv.URL()
+	user.DanmakuAppID = "user-app-id"
+	user.DanmakuAppKey = "user-app-secret"
+	user.DanmakuOpacity = 0.65
+	user.DanmakuFontSize = 30
+	user.DanmakuArea = 0.7
+	user.PlayerVolume = 0.42
+	require.NoError(t, svc.repo.User.Create(ctx, &user))
+	seedDanmakuMedia(t, svc, "per-user-media", "测试动画", "", 0)
+
+	res, err := svc.FetchWithOptions(ctx, "per-user-media", "", "", DanmakuFetchOptions{UserID: user.ID})
+	require.NoError(t, err)
+	require.Contains(t, res.Raw, "弹幕A")
+	require.Equal(t, srv.URL(), res.Source)
+	require.Equal(t, 0.42, res.Volume)
+	require.Equal(t, "0.65", res.Opacity)
+	require.Equal(t, "30", res.FontSize)
+	require.Equal(t, srv.lastHeaders.Get("X-AppId"), "user-app-id")
+	require.NotEmpty(t, srv.lastHeaders.Get("X-Signature"))
+
+	// Credential rotation must invalidate the cached fetch for the same user.
+	require.NoError(t, svc.repo.User.UpdateFields(ctx, user.ID, map[string]any{
+		"danmaku_app_id":  "user-app-id-2",
+		"danmaku_app_key": "user-app-secret-2",
+	}))
+	_, err = svc.FetchWithOptions(ctx, "per-user-media", "", "", DanmakuFetchOptions{UserID: user.ID})
+	require.NoError(t, err)
+	require.Equal(t, "user-app-id-2", srv.lastHeaders.Get("X-AppId"))
+}
@@ -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),
 }
@@ -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) {
@@ -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.
@@ -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="音量"
        />
@@ -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

@@ -143,11 +196,12 @@ export function PlayerDanmakuPanel({
    // 面板悬浮于视频上方：阻止点击冒泡，避免触发视频区域的播放/暂停切换。
    <div
      onClick={(e) => e.stopPropagation()}
-      className="absolute inset-x-3 top-12 bottom-3 z-30 w-auto overflow-y-auto rounded-2xl border border-white/15 bg-black/85 p-4 text-white shadow-2xl backdrop-blur-md sm:inset-x-auto sm:right-4 sm:top-16 sm:bottom-auto sm:w-80"
+      className="absolute inset-x-3 top-12 bottom-3 z-30 w-auto overflow-y-auto overscroll-contain rounded-2xl border border-white/15 bg-black/85 p-4 text-white shadow-2xl backdrop-blur-md sm:inset-x-auto sm:bottom-auto sm:right-4 sm:top-16 sm:w-80 sm:max-h-[calc(100%-5rem)]"
    >
      <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>
@@ -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}
@@ -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}
@@ -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',
-    },
-  ],
-}
@@ -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,
 ]
@@ -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[]
@@ -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')
@@ -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
+    }
+  }
+}