Compare commits

..

3 Commits

Author SHA1 Message Date
truewhile 8bfdd75d47 优化 2026-10-04 22:17:19 +08:00
truewhile 1a3248f4bb 优化 2026-10-04 21:31:09 +08:00
truewhile 0be7f8b97e 优化 2026-10-04 17:50:26 +08:00
12 changed files with 665 additions and 33 deletions
+94 -5
View File
@@ -21,6 +21,7 @@ import (
"errors"
"fmt"
"io"
"net"
"net/http"
"net/url"
"regexp"
@@ -237,6 +238,88 @@ func (r *EmbyRemoteService) ConfiguredRemoteHosts(ctx context.Context) []string
return hosts
}
// findAccountByHost 返回某条线路主机名匹配 host 的启用远程 Emby 账号(无则 nil)。
func (r *EmbyRemoteService) findAccountByHost(ctx context.Context, host string) *model.StrmAccount {
host = normalizeHostKey(host)
if host == "" || r == nil || r.repo == nil || r.repo.StrmAccount == nil {
return nil
}
accounts, err := r.ListAccounts(ctx)
if err != nil {
return nil
}
for i := range accounts {
lines, _, err := r.LinesOf(&accounts[i])
if err != nil {
continue
}
for _, line := range lines {
u, err := url.Parse(line.URL)
if err != nil {
continue
}
if normalizeHostKey(u.Hostname()) == host {
return &accounts[i]
}
}
}
return nil
}
// normalizeHostKey 去掉端口并小写化,便于主机名字符串比较。
func normalizeHostKey(host string) string {
host = strings.ToLower(strings.TrimSpace(host))
if host == "" {
return ""
}
if h, _, err := net.SplitHostPort(host); err == nil {
return strings.ToLower(strings.TrimSpace(h))
}
return host
}
// RemoteEmbyImageTokenForHost 返回图片代理回源某个远程 Emby 主机所需的当前
// api_key。host 不属于任何已配置账号时返回 ok=false。
func (r *EmbyRemoteService) RemoteEmbyImageTokenForHost(ctx context.Context, host string) (string, bool) {
if r == nil || r.repo == nil {
return "", false
}
acct := r.findAccountByHost(ctx, host)
if acct == nil {
return "", false
}
cfg, err := r.configOf(acct)
if err != nil || strings.TrimSpace(cfg.Token) == "" {
return "", false
}
return cfg.Token, true
}
// RefreshRemoteEmbyImageTokenForHost 强制用用户名/密码重新登录拥有该主机的账号
// 并持久化新 token,供图片代理在上游 401 时自愈。仅配置了 api_key、没有登录
// 凭据的账号无法自动刷新,返回错误由调用方按原失败处理。
func (r *EmbyRemoteService) RefreshRemoteEmbyImageTokenForHost(ctx context.Context, host string) (string, error) {
if r == nil || r.repo == nil {
return "", errors.New("远程 Emby 服务不可用")
}
acct := r.findAccountByHost(ctx, host)
if acct == nil {
return "", fmt.Errorf("未找到主机 %s 对应的远程 Emby 账号", host)
}
cfg, err := r.configOf(acct)
if err != nil {
return "", err
}
if strings.TrimSpace(cfg.Username) == "" || strings.TrimSpace(cfg.Password) == "" {
return "", errors.New("远程 Emby 账号未配置用户名/密码,无法自动刷新 api_key")
}
cfg.Token = "" // 强制走登录流程,忽略已失效的 api_key
if err := r.ensureToken(ctx, acct, cfg); err != nil {
return "", err
}
return cfg.Token, nil
}
// AccountByID 按 ID 查找远程 Emby 挂载账号(不存在或类型不符返回 nil)。
func (r *EmbyRemoteService) AccountByID(ctx context.Context, id string) *model.StrmAccount {
if strings.TrimSpace(id) == "" {
@@ -699,17 +782,23 @@ func (r *EmbyRemoteService) doGetOnLine(ctx context.Context, acct *model.StrmAcc
return err
}
if status == http.StatusUnauthorized && attempt == 0 {
// 401:只清当前线路的内存 token 并立即重认证;不在此时删除
// DB 里的 api_key——①外层还会按线路故障转移(其他线路可能
// 存有自己的 token);②纯 api_key 账号删除后无法再认证,一次
// 线路误报就会把账号“砖化”。重认证成功后 persistToken 会用
// 新 token 覆盖 api_key。
// 401:只清当前线路的内存 token 并立即重认证;不先删 DB 里的
// api_key——纯 api_key 账号删除后无法再认证,一次线路误报就会
// 把账号“砖化”。重认证成功后把新 token 写回:既让重试用上正确
// 凭据,也避免每个后续请求都重新登录一次。
previous := cfg.Token
cfg.Token = ""
if err := r.ensureTokenOnLine(ctx, acct, cfg); err != nil {
return fmt.Errorf("认证重试失败: %w", err)
}
if q != nil {
q.Set("api_key", cfg.Token)
}
master.Token = cfg.Token
master.RemoteUserID = cfg.RemoteUserID
if cfg.Token != "" && cfg.Token != previous {
_ = r.persistToken(ctx, acct, cfg)
}
continue
}
if status >= 300 {
@@ -0,0 +1,100 @@
package service
import (
"net/http"
"net/http/httptest"
"net/url"
"testing"
"go.uber.org/zap"
"github.com/truewhile/MeBox/internal/config"
"github.com/truewhile/MeBox/internal/model"
"github.com/truewhile/MeBox/internal/repository"
)
func TestRemoteEmbyImageTokenForHostUnknownHost(t *testing.T) {
svc, _, _ := newImageTagTestService(t)
if token, ok := svc.RemoteEmbyImageTokenForHost(t.Context(), "nope.example"); ok || token != "" {
t.Fatalf("got (%q,%v), want no token for a host not owned by any account", token, ok)
}
}
func TestRemoteEmbyImageTokenForHostMatchesConfiguredLine(t *testing.T) {
svc, _, _ := newImageTagTestService(t)
token, ok := svc.RemoteEmbyImageTokenForHost(t.Context(), "emby.test")
if !ok || token != "fake-token" {
t.Fatalf("got (%q,%v), want the account token for the configured line host", token, ok)
}
}
func TestRefreshRemoteEmbyImageTokenForHostRequiresCredentials(t *testing.T) {
svc, _, _ := newImageTagTestService(t)
// The account carries only an api_key — there is nothing to re-authenticate with.
if _, err := svc.RefreshRemoteEmbyImageTokenForHost(t.Context(), "emby.test"); err == nil {
t.Fatal("expected an error when the account has no username/password to re-authenticate with")
}
}
// TestRefreshRemoteEmbyImageTokenForHostRelogins 覆盖「token 被撤销后自动恢复」:
// 用用户名/密码重新登录拿到新 token,并持久化,后续请求不再重复登录。
func TestRefreshRemoteEmbyImageTokenForHostRelogins(t *testing.T) {
const fresh = "fresh-token"
logins := 0
upstream := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
if r.URL.Path != "/emby/Users/AuthenticateByName" {
http.NotFound(w, r)
return
}
logins++
w.Header().Set("Content-Type", "application/json")
_, _ = w.Write([]byte(`{"AccessToken":"` + fresh + `","User":{"Id":"remote-user"}}`))
}))
defer upstream.Close()
db := newServiceTestDB(t, &model.StrmAccount{}, &model.EmbyMount{})
repos := repository.New(db)
svc := NewEmbyRemoteService(&config.Config{}, zap.NewNop(), repos, NewCryptoService("", zap.NewNop()))
acct := &model.StrmAccount{
Base: model.Base{ID: "acct-refresh"},
Name: "refresh-emby",
Provider: model.StrmProviderEmbyRemote,
Enabled: true,
Config: `{"url":"` + upstream.URL + `","api_key":"stale-token","username":"u","password":"p"}`,
}
if err := repos.StrmAccount.Create(t.Context(), acct); err != nil {
t.Fatalf("create account: %v", err)
}
u, err := url.Parse(upstream.URL)
if err != nil {
t.Fatal(err)
}
host := u.Hostname()
if token, ok := svc.RemoteEmbyImageTokenForHost(t.Context(), host); !ok || token != "stale-token" {
t.Fatalf("token before refresh = (%q,%v), want the stale stored token", token, ok)
}
token, err := svc.RefreshRemoteEmbyImageTokenForHost(t.Context(), host)
if err != nil {
t.Fatalf("refresh: %v", err)
}
if token != fresh {
t.Fatalf("refreshed token = %q, want %q", token, fresh)
}
if logins != 1 {
t.Fatalf("logins = %d, want 1", logins)
}
// 新 token 必须落库,否则每个请求都要重新登录一次。
if token, ok := svc.RemoteEmbyImageTokenForHost(t.Context(), host); !ok || token != fresh {
t.Fatalf("token after refresh = (%q,%v), want the persisted %q", token, ok, fresh)
}
if logins != 1 {
t.Fatalf("logins = %d, want 1 after the refresh was persisted", logins)
}
}
+11
View File
@@ -13,6 +13,7 @@
package service
import (
"context"
"errors"
"net"
"net/http"
@@ -65,6 +66,16 @@ type ImageProxy struct {
allowedHostsMu sync.Mutex
allowedHostsCache map[string]bool
allowedHostsAt time.Time
// remoteEmbyTokenFn / refreshRemoteEmbyTokenFn let the proxy carry a fresh
// credential for configured remote-Emby mounts. Image URLs are minted from
// whatever token the account had when the payload was built, so a URL can
// outlive its api_key; these hooks re-supply the current one and force a
// re-login when the mount rejects it.
remoteEmbyTokenFn func(ctx context.Context, host string) (string, bool)
refreshRemoteEmbyTokenFn func(ctx context.Context, host string) (string, error)
remoteEmbyTokenMu sync.Mutex
remoteEmbyTokenCache map[string]remoteEmbyImageToken
}
const (
+42 -9
View File
@@ -14,6 +14,10 @@ import (
var errImageProxyRequestSetup = errors.New("image proxy request setup failed")
var errImageProxyNonImageContent = errors.New("upstream returned non-image content")
// errImageProxyUnauthorized 表示上游以 401/403 拒绝了回源凭据。它与普通失败
// 分开,是为了让调用方对挂载 Emby 做一次重认证再重试,而不是直接下发占位图。
var errImageProxyUnauthorized = errors.New("upstream rejected image credentials")
// prefetchCardResizeOptions 对应前端 ARTWORK.posterCard(见 web/src/api/client.ts):
// 卡片是海报墙最常请求的档位,刮削阶段预生成它能让首个列表请求直接命中缓存。
// 若前端调整该预设,这里只是白生成一份用不到的档位(约几十 KB),不影响正确性。
@@ -183,16 +187,27 @@ func (p *ImageProxy) removeUnusableImageCache(cachePath, failPath string) {
}
func (p *ImageProxy) fetchAndCacheRemoteImage(ctx context.Context, raw, host, cachePath, failPath string) (remoteImageFetchResult, error) {
var lastErr error
for _, candidate := range p.remoteImageFetchClients(host) {
result, err := p.fetchRemoteImageOnce(ctx, raw, host, candidate, cachePath, failPath)
if err == nil {
return result, nil
result, lastErr := p.fetchRemoteImageAcrossClients(ctx, raw, host, cachePath, failPath)
if lastErr == nil {
return result, nil
}
if errors.Is(lastErr, errImageProxyRequestSetup) {
return remoteImageFetchResult{}, lastErr
}
// 已挂载的远程 Emby 认 X-Emby-Token 请求头,但轮换前生成的图片 URL 里还留着
// 旧 api_key。上游拒绝时重新登录拥有该主机的账号一次再重试,而不是一直下发
// 占位图、等人工去改账号配置。
if errors.Is(lastErr, errImageProxyUnauthorized) {
token, refreshErr := p.refreshRemoteEmbyTokenForHost(ctx, host)
if refreshErr != nil {
logImageFetchError(p.log, "imageproxy: remote emby re-auth failed", host, "reauth", refreshErr)
} else if token != "" {
retried, retryErr := p.fetchRemoteImageAcrossClients(ctx, raw, host, cachePath, failPath)
if retryErr == nil {
return retried, nil
}
lastErr = retryErr
}
if errors.Is(err, errImageProxyRequestSetup) {
return remoteImageFetchResult{}, err
}
lastErr = err
}
if p.canUseExternalImageFallback() && isDoubanImageHost(host) {
data, ctype, _, err := fetchRemoteImageWithCurl(ctx, raw, host)
@@ -210,6 +225,24 @@ func (p *ImageProxy) fetchAndCacheRemoteImage(ctx context.Context, raw, host, ca
return remoteImageFetchResult{}, redactSensitiveError(lastErr)
}
// fetchRemoteImageAcrossClients 按直连/代理顺序依次尝试,返回首个成功结果。
// 请求构造失败立即中止(重试无意义);401/403 会继续尝试另一个客户端,并把
// errImageProxyUnauthorized 作为最终错误交给调用方去刷新挂载 token。
func (p *ImageProxy) fetchRemoteImageAcrossClients(ctx context.Context, raw, host, cachePath, failPath string) (remoteImageFetchResult, error) {
var lastErr error
for _, candidate := range p.remoteImageFetchClients(host) {
result, err := p.fetchRemoteImageOnce(ctx, raw, host, candidate, cachePath, failPath)
if err == nil {
return result, nil
}
if errors.Is(err, errImageProxyRequestSetup) {
return remoteImageFetchResult{}, err
}
lastErr = err
}
return remoteImageFetchResult{}, lastErr
}
// fetchAndCacheRemoteImageShared coalesces concurrent requests for the same
// upstream image. A poster can appear in the hero, a shelf and the detail page
// at the same time; without this guard every resize variant may fetch the same
+102
View File
@@ -0,0 +1,102 @@
package service
import (
"context"
"net/http"
"strings"
"time"
)
// remoteEmbyImageTokenTTL 是 host → api_key 的缓存时长。海报墙首屏一口气请求
// 几十张图,逐个回读数据库不值得;token 轮换时 401 重认证会立即覆盖这份缓存。
const remoteEmbyImageTokenTTL = 60 * time.Second
type remoteEmbyImageToken struct {
token string
at time.Time
}
// SetRemoteEmbyAuthProvider 注入「按主机名取当前远程 Emby api_key」的回调。
// 图片代理回源已挂载的远程 Emby 时用它替换 URL 里可能已过期的凭据。
func (p *ImageProxy) SetRemoteEmbyAuthProvider(fn func(ctx context.Context, host string) (string, bool)) {
if p == nil {
return
}
p.remoteEmbyTokenFn = fn
}
// SetRemoteEmbyAuthRefresher 注入「强制重新登录并返回新 api_key」的回调。上游以
// 401/403 拒绝旧 token 时调用一次,再重试拉图,从而不需要人工改账号配置。
func (p *ImageProxy) SetRemoteEmbyAuthRefresher(fn func(ctx context.Context, host string) (string, error)) {
if p == nil {
return
}
p.refreshRemoteEmbyTokenFn = fn
}
// remoteEmbyTokenForHost 返回挂载 Emby 的当前 token,短期缓存避免每张图都查库。
// 「不是挂载主机」的结果同样缓存,否则普通图床(TMDb/Douban 等)的每张海报都会
// 白白查一次账号表。
func (p *ImageProxy) remoteEmbyTokenForHost(ctx context.Context, host string) string {
if p == nil || p.remoteEmbyTokenFn == nil || strings.TrimSpace(host) == "" {
return ""
}
p.remoteEmbyTokenMu.Lock()
if cached, ok := p.remoteEmbyTokenCache[host]; ok && time.Since(cached.at) < remoteEmbyImageTokenTTL {
p.remoteEmbyTokenMu.Unlock()
return cached.token
}
p.remoteEmbyTokenMu.Unlock()
token, ok := p.remoteEmbyTokenFn(ctx, host)
if !ok {
token = ""
}
p.cacheRemoteEmbyToken(host, token)
return token
}
func (p *ImageProxy) cacheRemoteEmbyToken(host, token string) {
if p == nil || strings.TrimSpace(host) == "" {
return
}
p.remoteEmbyTokenMu.Lock()
if p.remoteEmbyTokenCache == nil {
p.remoteEmbyTokenCache = make(map[string]remoteEmbyImageToken, 8)
}
p.remoteEmbyTokenCache[host] = remoteEmbyImageToken{token: token, at: time.Now()}
p.remoteEmbyTokenMu.Unlock()
}
// refreshRemoteEmbyTokenForHost 强制重认证一次并刷新缓存。没有配置刷新器、或
// 账号无法自动刷新(如仅填了 api_key)时返回空串,调用方按原错误处理。
func (p *ImageProxy) refreshRemoteEmbyTokenForHost(ctx context.Context, host string) (string, error) {
if p == nil || p.refreshRemoteEmbyTokenFn == nil || strings.TrimSpace(host) == "" {
return "", nil
}
token, err := p.refreshRemoteEmbyTokenFn(ctx, host)
if err != nil {
return "", err
}
if token != "" {
p.cacheRemoteEmbyToken(host, token)
}
return token, nil
}
// applyRemoteEmbyAuth 用账号当前 token 覆盖回源请求上的凭据。已配置的远程 Emby
// 以 X-Emby-Token 请求头为准,所以图片 URL 里带的是轮换前的旧 api_key 也不会再
// 被采纳;同时把查询参数里的 api_key 一并改写,避免旧值干扰。
func (p *ImageProxy) applyRemoteEmbyAuth(ctx context.Context, req *http.Request, host string) {
if p == nil || p.remoteEmbyTokenFn == nil || req == nil || req.URL == nil {
return
}
token := p.remoteEmbyTokenForHost(ctx, host)
if token == "" {
return
}
req.Header.Set("X-Emby-Token", token)
q := req.URL.Query()
q.Set("api_key", token)
req.URL.RawQuery = q.Encode()
}
@@ -0,0 +1,126 @@
package service
import (
"bytes"
"context"
"net/http"
"net/http/httptest"
"net/url"
"sync"
"testing"
)
// TestImageProxyInjectsRemoteEmbyToken 覆盖封面空白问题:图片 URL 里签发时的
// api_key 已经失效,但账号当前 token 有效。代理回源必须用当前 token 覆盖旧值,
// 否则挂载 Emby 的封面会一直 401、下发占位图。
func TestImageProxyInjectsRemoteEmbyToken(t *testing.T) {
const current = "current-token"
upstream := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
if r.Header.Get("X-Emby-Token") != current {
http.Error(w, "unauthorized", http.StatusUnauthorized)
return
}
w.Header().Set("Content-Type", "image/jpeg")
_, _ = w.Write(testJPEG)
}))
defer upstream.Close()
u, err := url.Parse(upstream.URL)
if err != nil {
t.Fatal(err)
}
proxy := newUpstreamImageProxy(t, u.Host)
proxy.SetRemoteEmbyAuthProvider(func(context.Context, string) (string, bool) {
return current, true
})
raw := upstream.URL + "/emby/Items/abc/Images/Primary?api_key=stale-token"
rec := httptest.NewRecorder()
if err := proxy.Serve(t.Context(), rec, httptest.NewRequest(http.MethodGet, "/api/img", nil), raw); err != nil {
t.Fatal(err)
}
if !bytes.Equal(rec.Body.Bytes(), testJPEG) {
t.Fatalf("body = %x, want the upstream image served with the current token", rec.Body.Bytes())
}
}
// TestImageProxyRefreshesRemoteEmbyTokenOn401 覆盖 token 在运行中被撤销的场景:
// 账号当前 token 也被上游拒绝时,代理应重新登录一次并重试,且只刷新一次。
func TestImageProxyRefreshesRemoteEmbyTokenOn401(t *testing.T) {
const (
stale = "stale-token"
fresh = "fresh-token"
)
var mu sync.Mutex
refreshes := 0
upstream := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
if r.Header.Get("X-Emby-Token") != fresh {
http.Error(w, "unauthorized", http.StatusUnauthorized)
return
}
w.Header().Set("Content-Type", "image/jpeg")
_, _ = w.Write(testJPEG)
}))
defer upstream.Close()
u, err := url.Parse(upstream.URL)
if err != nil {
t.Fatal(err)
}
proxy := newUpstreamImageProxy(t, u.Host)
proxy.SetRemoteEmbyAuthProvider(func(context.Context, string) (string, bool) {
return stale, true
})
proxy.SetRemoteEmbyAuthRefresher(func(context.Context, string) (string, error) {
mu.Lock()
refreshes++
mu.Unlock()
return fresh, nil
})
raw := upstream.URL + "/emby/Items/abc/Images/Primary?api_key=" + stale
rec := httptest.NewRecorder()
if err := proxy.Serve(t.Context(), rec, httptest.NewRequest(http.MethodGet, "/api/img", nil), raw); err != nil {
t.Fatal(err)
}
if !bytes.Equal(rec.Body.Bytes(), testJPEG) {
t.Fatalf("body = %x, want the upstream image served after re-auth", rec.Body.Bytes())
}
mu.Lock()
got := refreshes
mu.Unlock()
if got != 1 {
t.Fatalf("refreshes = %d, want exactly 1 re-auth", got)
}
}
// TestImageProxyLeavesNonEmbyHostsUntouched 确认新的凭据注入只作用于已配置的
// 远程 Emby 主机:普通图床(这里用 provider 返回 ok=false 模拟)不受影响。
func TestImageProxyDoesNotInjectForUnknownHost(t *testing.T) {
var gotHeader string
upstream := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
gotHeader = r.Header.Get("X-Emby-Token")
w.Header().Set("Content-Type", "image/jpeg")
_, _ = w.Write(testJPEG)
}))
defer upstream.Close()
u, err := url.Parse(upstream.URL)
if err != nil {
t.Fatal(err)
}
proxy := newUpstreamImageProxy(t, u.Host)
proxy.SetRemoteEmbyAuthProvider(func(context.Context, string) (string, bool) {
return "", false
})
raw := upstream.URL + "/img/cover.jpg"
rec := httptest.NewRecorder()
if err := proxy.Serve(t.Context(), rec, httptest.NewRequest(http.MethodGet, "/api/img", nil), raw); err != nil {
t.Fatal(err)
}
if gotHeader != "" {
t.Fatalf("X-Emby-Token = %q, want no credential header for a non-Emby host", gotHeader)
}
}
@@ -71,6 +71,8 @@ func (p *ImageProxy) fetchRemoteImageOnce(ctx context.Context, raw, host string,
return remoteImageFetchResult{}, errImageProxyRequestSetup
}
applyRemoteImageHeaders(req, host, raw)
// 已挂载的远程 Emby:用账号当前 token 覆盖旧凭据,返回头形式对端优先采纳。
p.applyRemoteEmbyAuth(ctx, req, host)
resp, err := candidate.client.Do(req)
if err != nil {
@@ -80,6 +82,9 @@ func (p *ImageProxy) fetchRemoteImageOnce(ctx context.Context, raw, host string,
defer resp.Body.Close()
if resp.StatusCode >= 400 {
p.log.Warn("imageproxy: upstream returned non-OK", zap.String("host", host), zap.String("client", candidate.name), zap.String("status", resp.Status))
if resp.StatusCode == http.StatusUnauthorized || resp.StatusCode == http.StatusForbidden {
return remoteImageFetchResult{}, errImageProxyUnauthorized
}
return remoteImageFetchResult{}, errors.New("upstream returned " + resp.Status)
}
if err := p.streamImageToCache(cachePath, failPath, resp.Body); err != nil {
+9
View File
@@ -237,6 +237,15 @@ func (b *serviceContainerBuilder) initImageProxy() {
b.c.ImageProxy.SetAllowedRemoteHostsProvider(func() []string {
return b.c.EmbyRemote.ConfiguredRemoteHosts(context.Background())
})
// 远程 Emby 的图片 URL 会带着签发时的 api_key 长期缓存/下发;轮换后
// URL 里的旧值必然过期。回源时改用账号当前 token,并在上游 401/403 时
// 重新登录一次再重试,封面图不再依赖人工改账号。
b.c.ImageProxy.SetRemoteEmbyAuthProvider(func(ctx context.Context, host string) (string, bool) {
return b.c.EmbyRemote.RemoteEmbyImageTokenForHost(ctx, host)
})
b.c.ImageProxy.SetRemoteEmbyAuthRefresher(func(ctx context.Context, host string) (string, error) {
return b.c.EmbyRemote.RefreshRemoteEmbyImageTokenForHost(ctx, host)
})
}
b.c.Scan.SetImageProxy(b.c.ImageProxy)
b.c.Scraper.SetImageProxy(b.c.ImageProxy)
+23 -15
View File
@@ -41,10 +41,10 @@ export const MediaCard = memo(function MediaCard({
const card = (
<div
ref={ref}
className="relative overflow-hidden rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)] transition-all duration-300 hover:scale-[1.04] hover:-translate-y-1.5 hover:border-brand-500/40 hover:shadow-[0_12px_32px_var(--app-shadow)]"
className="relative flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)] transition-all duration-300 hover:scale-[1.04] hover:-translate-y-1.5 hover:border-brand-500/40 hover:shadow-[0_12px_32px_var(--app-shadow)]"
>
{/* Poster Wrapper */}
<div className="relative aspect-[2/3] w-full overflow-hidden bg-[var(--app-panel-soft)]">
<div className="relative aspect-[2/3] w-full shrink-0 overflow-hidden bg-[var(--app-panel-soft)]">
{media.poster_url ? (
<>
{posterFit === 'contain' && (
@@ -120,26 +120,34 @@ export const MediaCard = memo(function MediaCard({
{/* Media Metadata Info */}
<div className={`space-y-1 border-t border-[var(--app-border)] bg-[var(--app-panel)] ${
compact ? 'p-2' : 'p-4'
compact ? 'p-2' : 'p-2.5 sm:p-4'
}`}>
<p className={`truncate font-bold text-[var(--app-text)] transition-colors duration-200 group-hover:text-brand-500 ${
compact ? 'text-xs' : 'text-sm'
{/* 手机端一张卡只有 ~100px 宽:标题放开到两行,并预留两行高度,
这样同一行的卡片不会因为标题行数不同而参差不齐。 */}
<p className={`font-bold text-[var(--app-text)] transition-colors duration-200 group-hover:text-brand-500 ${
compact
? 'truncate text-xs'
: 'line-clamp-2 min-h-[2.75em] text-[13px] leading-snug sm:line-clamp-none sm:min-h-0 sm:truncate sm:text-sm sm:leading-normal'
}`}>
{media.title}
</p>
<div className="flex items-center justify-between gap-2 text-[11px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
<span>{media.year > 0 ? media.year : "未知年份"}</span>
<span className="flex items-center gap-1.5">
{/* 单行、不折行:年份可截断,徽标永不压缩。折行会让同一行里各卡片的
徽标落位高低不一,看起来就是「错位」,所以宁可极窄屏上截断年份。
min-h 统一行高,避免有/无徽标的卡片年份基线差几像素。 */}
<div className="flex min-h-[21px] items-center text-[10px] font-bold uppercase text-[var(--app-muted)] sm:min-h-0 sm:gap-x-2 sm:text-[11px] sm:tracking-wider">
<span className="truncate">{media.year > 0 ? media.year : "未知年份"}</span>
<span className="ml-auto flex shrink-0 items-center gap-0.5 sm:gap-1.5">
{/* 集数/版本数徽标:放在海报下方的信息行而不是压在画面上。海报底部通常
自带片名,角标会盖住它(Game of Thrones / Breaking Bad 都很明显)。 */}
{(count !== undefined && count > 1) || (count === undefined && versionCount > 1) ? (
<span className="inline-flex items-center gap-1 rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1.5 py-0.5 text-[var(--app-subtle)]">
<span className="inline-flex items-center gap-0.5 whitespace-nowrap rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1 py-0.5 text-[var(--app-subtle)] sm:gap-1 sm:px-1.5">
<Layers size={10} className="shrink-0 text-[#c9954a]" />
<span>{count !== undefined && count > 1 ? `${count} 集` : `${versionCount} 版本`}</span>
</span>
) : null}
{/* 编码格式在小卡片上没有信息价值,手机上直接隐藏,避免挤掉集数徽标。 */}
{media.video_codec && (
<span className="rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1.5 py-0.5 text-[var(--app-subtle)]">
<span className="hidden whitespace-nowrap rounded-xl border border-[var(--app-border)] bg-[var(--app-panel-soft)] px-1.5 py-0.5 text-[var(--app-subtle)] sm:inline-block">
{media.video_codec}
</span>
)}
@@ -151,8 +159,8 @@ export const MediaCard = memo(function MediaCard({
if (onClick) {
return (
<div className="group relative block w-full">
<button type="button" onClick={onClick} className="block w-full text-left">
<div className="group relative block h-full w-full">
<button type="button" onClick={onClick} className="block h-full w-full text-left">
{card}
</button>
{actionContent && (
@@ -166,8 +174,8 @@ export const MediaCard = memo(function MediaCard({
if (actionContent) {
return (
<div className="group relative block">
<Link to={href} state={linkState} className="block">
<div className="group relative block h-full">
<Link to={href} state={linkState} className="block h-full">
{card}
</Link>
<div className={ACTION_OVERLAY_CLASS}>
@@ -178,7 +186,7 @@ export const MediaCard = memo(function MediaCard({
}
return (
<Link to={href} state={linkState} className="group block">
<Link to={href} state={linkState} className="group block h-full">
{card}
</Link>
)
+3 -2
View File
@@ -3,8 +3,9 @@ import { Virtuoso } from 'react-virtuoso'
import clsx from 'clsx'
// 与 LibraryMediaSections 等处的海报网格保持同一套响应式列配置。
// 手机上单卡只有约 100px 宽,间距收到 gap-3 给标题和徽标多留一点宽度。
export const MEDIA_GRID_CLASS =
'grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8'
'grid grid-cols-3 gap-3 sm:gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8'
function getFallbackColumns(width: number): number {
if (width >= 1536) return 8
@@ -105,7 +106,7 @@ export function VirtualMediaGrid({
itemContent={(rowIndex) => {
const start = rowIndex * columns
return (
<div className={clsx(MEDIA_GRID_CLASS, rowIndex < rowCount - 1 && 'pb-4')}>
<div className={clsx(MEDIA_GRID_CLASS, rowIndex < rowCount - 1 && 'pb-3 sm:pb-4')}>
{Array.from({ length: columns }, (_, colIndex) => {
const itemIndex = start + colIndex
if (itemIndex >= totalCount) {
+144 -2
View File
@@ -64,6 +64,14 @@ class ReaderAudioEngine {
private detaching = false
/** 加载批次号:动态 import hls.js 期间被新的加载打断时用来丢弃旧结果。 */
private loadToken = 0
/** 预取缓存:章序号 → 已解析的音轨。命中的切章可以同步开播,不用等网络。 */
private prefetched = new Map<number, { track: string; transcoding: boolean }>()
/** 预取在途的章序号,避免同一章重复请求。 */
private prefetching = new Set<number>()
/** 预热下一章字节的隐藏播放器(只下载,从不 play())。 */
private warmer: HTMLAudioElement | null = null
/** warmer 当前装载的音轨,避免重复赋值。 */
private warmedTrack = ''
constructor() {
const audio = new Audio()
@@ -93,7 +101,13 @@ class ReaderAudioEngine {
}
// 换章前把上一章的最后位置补报掉(此时 store 里还是上一章的上下文)
this.commitProgress()
// 换书:预取的音轨属于上一本,全部作废
if (s.bookId !== input.bookId) this.clearPrefetch()
this.applyChapter(input)
}
/** 真正把一章装上播放器(同步部分):预取命中的续播也走这里。 */
private applyChapter(input: LoadChapterInput): void {
const chapterTitle = input.chapters[input.chapterIndex]?.title ?? ''
useReaderAudioStore.setState({
bookId: input.bookId,
@@ -128,6 +142,9 @@ class ReaderAudioEngine {
}
void this.attachSource(input.track)
// 提前解析下一章的音轨并在后台预热字节:息屏自动续播时才能立刻接上
const nextIndex = this.neighborChapterIndex(1)
if (nextIndex !== null) this.prefetchChapter(nextIndex)
}
play(): void {
@@ -222,6 +239,7 @@ class ReaderAudioEngine {
stop(): void {
this.commitProgress()
this.detachSource()
this.clearPrefetch()
this.timerDeadline = 0
this.pausedAt = 0
// 下一次开播重新套用「上次的定时设置」,否则关掉再听一本书时定时不会自动开
@@ -242,12 +260,22 @@ class ReaderAudioEngine {
private async attachSource(src: string): Promise<void> {
const token = ++this.loadToken
this.detachSource()
this.setSessionMetadata(src)
// 只销毁上一章的 hls,不再 removeAttribute('src') + load()。load() 会把媒体
// 元素彻底卸载、释放系统音频会话,息屏时紧接着的 play() 就会被浏览器当成
// 「无用户手势」拦下——表现正是切章卡住、解锁后必须手动点播放。直接覆盖 src,
// 元素始终持有媒体,会话才接得上。
this.hls?.destroy()
this.hls = null
if (!src) {
this.audio.removeAttribute('src')
this.audio.load()
this.setSessionMetadata(null)
this.fail('本章没有可播放的音频')
return
}
// 先停住上一章:HLS 分支要 await 动态 import,不先停会有一小段两章叠播
if (!this.audio.paused) this.audio.pause()
this.setSessionMetadata(src)
if (src.includes('.m3u8')) {
const mod = await import('hls.js')
// 动态 import 期间可能已经切到别的章:丢弃这次结果
@@ -270,6 +298,7 @@ class ReaderAudioEngine {
this.audio.src = src
}
/** 彻底卸载音源(停止播放时用)。换章不走这里,见 attachSource 的说明。 */
private detachSource(): void {
this.detaching = true
this.hls?.destroy()
@@ -279,9 +308,117 @@ class ReaderAudioEngine {
this.detaching = false
}
// ─── 预取与续播 ───────────────────────────────────────────────────────
/**
* 提前解析某章的音轨并预热字节。息屏时 ended 与 play() 之间不能有网络空档,
* 否则系统收走音频会话、标签页被冻结,浏览器就拒绝自动播放了。
*/
private prefetchChapter(index: number): void {
const { bookId, chapters } = useReaderAudioStore.getState()
if (!bookId || index < 0 || index >= chapters.length || chapters[index].is_volume) return
if (this.prefetched.has(index) || this.prefetching.has(index)) return
// 反复跳章时旧的预取会变成垃圾,做个上限兜底
if (this.prefetched.size > 32) this.prefetched.clear()
this.prefetching.add(index)
const forBook = bookId
readerAPI
.bookContent(bookId, index)
.then((ct) => {
// 期间换了书:结果作废
if (useReaderAudioStore.getState().bookId !== forBook) return
const track = ct.tracks?.[0]
if (ct.type !== 'audio' || !track) return
this.prefetched.set(index, { track, transcoding: ct.transcoding ?? false })
// 要服务端转码的音轨立刻预热(把转码提前跑掉);直链等到本章快播完再拉字节,
// 避免用户中途停下时白下整章的流量。
if (ct.transcoding) this.warmNextBytes(track)
})
.catch(() => undefined)
.finally(() => this.prefetching.delete(index))
}
/** 用隐藏播放器把下一章的字节(以及服务端转码)提前拉起来,减少切章等待。 */
private warmNextBytes(track: string): void {
// HLS 交给 hls.js 按需拉流,二次下载没有意义
if (!track || track.includes('.m3u8') || this.warmedTrack === track) return
this.warmedTrack = track
if (!this.warmer) {
const a = new Audio()
a.preload = 'auto'
this.warmer = a
}
this.warmer.src = track
}
/** 本章快播完时把下一章的字节预热起来(30 秒足够开头缓冲)。 */
private maybeWarmNext(): void {
const audio = this.audio
if (!Number.isFinite(audio.duration) || audio.duration <= 0) return
if (audio.duration - audio.currentTime > 30) return
const nextIndex = this.neighborChapterIndex(1)
if (nextIndex === null) return
const hit = this.prefetched.get(nextIndex)
if (hit) this.warmNextBytes(hit.track)
}
/** 用预取结果接续下一章;命中返回 true(未命中由调用方走异步加载兜底)。 */
private playPrefetched(index: number): boolean {
const hit = this.prefetched.get(index)
if (!hit) return false
this.prefetched.delete(index)
const s = useReaderAudioStore.getState()
this.applyChapter({
bookId: s.bookId,
bookName: s.bookName,
cover: s.cover,
chapters: s.chapters,
chapterIndex: index,
track: hit.track,
transcoding: hit.transcoding,
openCredits: s.openCredits,
closeCredits: s.closeCredits,
initialPos: 0,
})
// 立刻在 ended 的同一次事件里发起 play(),保证没有空档。片头跳转由
// loadedmetadata 处理器完成:音频在 loadedmetadata 之前不会出声,所以
// 先 play() 也不会漏出片头。HLS 交给 hls.js 承载,无法同帧开播。
if (!hit.track.includes('.m3u8')) this.play()
return true
}
private clearPrefetch(): void {
this.prefetched.clear()
this.prefetching.clear()
this.warmedTrack = ''
if (this.warmer) {
this.warmer.removeAttribute('src')
this.warmer.load()
}
}
private async goToChapter(index: number, initialPos: number): Promise<void> {
const { bookId, chapters } = useReaderAudioStore.getState()
if (!bookId || index < 0 || index >= chapters.length || chapters[index].is_volume) return
// 命中预取:直接装,不等网络(片尾自动续播大多走这里)
const hit = this.prefetched.get(index)
if (hit) {
useReaderAudioStore.setState({ status: 'loading', error: '' })
const s = useReaderAudioStore.getState()
this.loadChapter({
bookId,
bookName: s.bookName,
cover: s.cover,
chapters,
chapterIndex: index,
track: hit.track,
transcoding: hit.transcoding,
openCredits: s.openCredits,
closeCredits: s.closeCredits,
initialPos,
})
return
}
useReaderAudioStore.setState({ status: 'loading', error: '' })
try {
const ct = await readerAPI.bookContent(bookId, index)
@@ -344,6 +481,10 @@ class ReaderAudioEngine {
this.lastTime = Number.isFinite(audio.duration) ? audio.duration : this.lastTime
this.commitProgress()
if (useReaderAudioStore.getState().hasNext) {
// 预取命中:在 ended 的同一次事件里同步接上下一章。息屏时这段「零空档」
// 很关键——空太久系统会收走音频会话、冻结标签页,浏览器随后拒绝自动播放。
const nextIndex = this.neighborChapterIndex(1)
if (nextIndex !== null && this.playPrefetched(nextIndex)) return
this.next()
return
}
@@ -389,6 +530,7 @@ class ReaderAudioEngine {
this.checkCreditsEnd()
// 后台播放时 timeupdate 仍会触发,这是「到点暂停」最可靠的位置
this.checkTimer()
this.maybeWarmNext()
})
audio.addEventListener('error', () => {
+6
View File
@@ -1,6 +1,12 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
future: {
// hover 样式只对真正能悬停的设备(鼠标/触控板)生效。触屏点击会让浏览器
// 保留 :hover 状态,导致海报墙上的卡片被放大、上移、盖上「立即观影」遮罩,
// 看起来像是整行错位、海报显示不全。
hoverOnlyWhenSupported: true,
},
theme: {
extend: {
fontFamily: {