Compare commits

...

4 Commits

Author SHA1 Message Date
truewhile 9c1f9a6e7e bug处理 2026-09-17 11:19:38 +08:00
truewhile ec7be38266 优化vr播放逻辑 2026-09-17 09:22:00 +08:00
truewhile ebf791c436 优化 2026-09-17 01:29:10 +08:00
truewhile 83c0b65a0b 优化360播放 2026-09-17 01:08:28 +08:00
18 changed files with 886 additions and 165 deletions
+33
View File
@@ -174,6 +174,39 @@ func TestUpdateDanmakuSettingsPersistsAllPlayerPreferences(t *testing.T) {
}
}
func TestUpdateDanmakuSettingsPersistsVr360GuideSeen(t *testing.T) {
svc := newDanmakuSettingsService(t)
// 默认未看过:配置接口必须先如实告知前端,否则首次操作说明会被跳过。
initial := svc.Danmaku.ConfigForUser(t.Context(), "user-1")
if initial.Vr360GuideSeen {
t.Fatal("vr360 guide should be unread for a fresh user")
}
c, w := newDanmakuSettingsContext(t, svc, http.MethodPut, "/danmaku/settings",
`{"vr360_guide_seen":true}`, "user-1")
updateDanmakuSettingsHandler(svc)(c)
if w.Code != http.StatusOK {
t.Fatalf("status = %d, want 200 (body=%s)", w.Code, w.Body.String())
}
var cfg service.DanmakuRenderConfig
if err := json.Unmarshal(w.Body.Bytes(), &cfg); err != nil {
t.Fatalf("decode: %v", err)
}
if !cfg.Vr360GuideSeen {
t.Fatalf("config should reflect the persisted guide flag: %+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.PlayerVr360GuideSeen {
t.Fatalf("guide flag not persisted on the user: %+v", user)
}
}
func TestUpdateDanmakuSettingsRejectsInvalidPlaybackRate(t *testing.T) {
svc := newDanmakuSettingsService(t)
+12 -1
View File
@@ -722,7 +722,9 @@ func streamHandler(svc *service.Container) gin.HandlerFunc {
c.JSON(http.StatusNotFound, gin.H{"error": "not found"})
return
}
if mount.ProxyPlay {
// 远程 Emby 条目的同源转发:VR 全景需要浏览器读帧(见 stream_proxy.go),
// 与挂载账号的 proxy_play 开关等价。
if mount.ProxyPlay || wantSameOriginProxy(c) {
if err := svc.Emby.ProxyRemoteVideoStream(ctx, c.Writer, c.Request, mountID, remoteID); err != nil {
if !c.Writer.Written() {
c.JSON(http.StatusBadGateway, gin.H{"error": err.Error()})
@@ -758,6 +760,15 @@ func streamHandler(svc *service.Container) gin.HandlerFunc {
if !enforceScopedPlaybackToken(c, m.ID) {
return
}
// ?proxy=1:把网盘/STRM 直链改为服务端同源转发(网页端读帧、VR 全景用),
// 画质与原文件一致,不触发转码。
if wantSameOriginProxy(c) {
handled, proxyErr := proxySTRMStream(c, svc, m)
if handled {
writeProxyError(c, proxyErr)
return
}
}
err = svc.Stream.ServeFile(c.Writer, c.Request, c.Param("id"))
if errors.Is(err, service.ErrMediaNotFound) {
c.JSON(http.StatusNotFound, gin.H{"error": "not found"})
+56
View File
@@ -0,0 +1,56 @@
// 直连流的同源转发:网页端需要读取视频帧的场景(VR 全景渲染走 WebGL 纹理)
// 不能使用会跳到网盘 CDN 的跨域直链,这里把直链改为服务端转发。
//
// 只在客户端显式带上 ?proxy=1 时生效,普通播放仍走原来的 302 直连,
// 避免把网盘流量无谓地压到服务器上。
package handler
import (
"errors"
"net/http"
"strings"
"github.com/gin-gonic/gin"
"github.com/truewhile/MeBox/internal/model"
"github.com/truewhile/MeBox/internal/service"
)
// wantSameOriginProxy 客户端是否要求把直连流改为服务端同源转发。
func wantSameOriginProxy(c *gin.Context) bool {
if c == nil {
return false
}
switch strings.ToLower(strings.TrimSpace(c.Query("proxy"))) {
case "1", "true", "yes":
return true
default:
return false
}
}
// proxySTRMStream 处理 STRM/网盘媒体的同源转发请求。返回 handled=false 表示
// 该媒体不需要(或无法)代理,调用方继续按原有逻辑处理。
func proxySTRMStream(c *gin.Context, svc *service.Container, m *model.Media) (bool, error) {
if c == nil || svc == nil || svc.Strm == nil || m == nil {
return false, nil
}
if !service.IsStrmMediaRow(m) {
return false, nil
}
if err := svc.Strm.ProxyMediaDirect(c.Request.Context(), c.Writer, c.Request, m); err != nil {
if errors.Is(err, service.ErrStrmProxyNotApplicable) {
return false, nil
}
return true, err
}
return true, nil
}
// writeProxyError 在尚未写入任何响应内容时回一个明确的网关错误。
func writeProxyError(c *gin.Context, err error) {
if c == nil || err == nil || c.Writer.Written() {
return
}
c.JSON(http.StatusBadGateway, gin.H{"error": err.Error()})
}
+12 -9
View File
@@ -37,15 +37,18 @@ type User struct {
// original / simplified / traditional。
SubtitleChineseMode string `gorm:"size:16;not null;default:original" json:"subtitle_chinese_mode"`
// 网页播放器偏好按用户存储,切换媒体对象后继续沿用。
PlayerVolume float64 `gorm:"not null;default:1" json:"player_volume"`
PlayerPlaybackRate float64 `gorm:"not null;default:1" json:"player_playback_rate"`
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"`
PlayerVolume float64 `gorm:"not null;default:1" json:"player_volume"`
PlayerPlaybackRate float64 `gorm:"not null;default:1" json:"player_playback_rate"`
// PlayerVr360GuideSeen 记录用户是否已经看过 VR 全景播放的首次操作说明,
// 按用户保存:看过一次之后不再弹出。
PlayerVr360GuideSeen bool `gorm:"not null;default:false" json:"player_vr360_guide_seen"`
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
+8
View File
@@ -71,6 +71,8 @@ type DanmakuRenderConfig struct {
Volume float64 `json:"volume"`
// PlaybackRate 是当前用户的播放倍速偏好(按用户存储)。
PlaybackRate float64 `json:"playback_rate"`
// Vr360GuideSeen 表示当前用户是否已经看过 VR 全景播放的首次操作说明。
Vr360GuideSeen bool `json:"vr360_guide_seen"`
// MergeSources 是当前用户的弹幕合并偏好(按用户存储)。
MergeSources bool `json:"merge_sources"`
// AppKeyConfigured 只表明用户是否保存了应用密钥,不回传密钥明文。
@@ -98,6 +100,8 @@ type DanmakuSettingsPatch struct {
MergeSources *bool `json:"merge_sources"`
Volume *float64 `json:"volume"`
PlaybackRate *float64 `json:"playback_rate"`
// Vr360GuideSeen 标记 VR 全景播放的首次操作说明是否已经看过。
Vr360GuideSeen *bool `json:"vr360_guide_seen"`
}
type danmakuUserContextKey struct{}
@@ -447,6 +451,7 @@ func danmakuConfigFromUser(user *model.User) DanmakuRenderConfig {
Area: strconv.FormatFloat(area, 'f', -1, 64),
Volume: volume,
PlaybackRate: playbackRate,
Vr360GuideSeen: user.PlayerVr360GuideSeen,
MergeSources: user.DanmakuMergeSources,
AppKeyConfigured: strings.TrimSpace(user.DanmakuAppKey) != "",
}
@@ -528,6 +533,9 @@ func (s *DanmakuService) UpdateUserSettings(ctx context.Context, userID string,
}
updates["player_playback_rate"] = *patch.PlaybackRate
}
if patch.Vr360GuideSeen != nil {
updates["player_vr360_guide_seen"] = *patch.Vr360GuideSeen
}
if len(updates) == 0 {
return DanmakuRenderConfig{}, ErrNoDanmakuSettings
}
+12 -3
View File
@@ -182,10 +182,13 @@ func (s *MediaService) listVersionSiblings(ctx context.Context, media *model.Med
// 没有 douban_id/thetvdb_id(MetaTube 刮削出来的那几个才有)。若仍按外部
// ID 预先收窄候选集,同番号的其它分片会被 SQL 直接排除,表现就是库里折叠
// 出了 N 个版本、详情页却只列出带 ID 的那几个。因此成人条目不预先收窄,
// 直接在该库范围内比对版本键。
// 直接在该库范围内比对版本键。未刮削但文件名带番号的分片同理:同一部片的
// 各分片元数据来源不一致(刮削 vs pending),收窄后标题也对不上。
var candidates []model.Media
narrowed := false
if mediaAdultGroupCode(*media) == "" {
hasAdultCode := mediaAdultGroupCode(*media) != "" ||
canonicalAdultGroupCode(AdultCodeFromMediaPath(media.Path)) != ""
if !hasAdultCode {
candidates, narrowed, err = s.repo.Media.ListVersionCandidates(ctx, libraryIDs, *media, 5000)
if err != nil {
return nil, err
@@ -198,9 +201,15 @@ func (s *MediaService) listVersionSiblings(ctx context.Context, media *model.Med
}
}
s.attachLibraryMetadata(ctx, candidates)
// 同番号只要有一个分片被确认为成人内容,尚未刮削的分片也按番号折叠,
// 与列表页的分组结果保持一致。
vouched := adultCodesVouchedByNSFW(candidates)
if vouchKey := adultVouchedGroupKey(*media, vouched); vouchKey != "" {
key = vouchKey
}
matched := make([]model.Media, 0, 4)
for _, row := range candidates {
if mediaVersionGroupKey(row) == key {
if mediaVersionGroupKeyWithAdultVouch(row, vouched) == key {
matched = append(matched, row)
}
}
+60 -7
View File
@@ -77,6 +77,10 @@ func groupMediaVersions(items []model.Media) []MediaItem {
if len(items) == 0 {
return nil
}
// 同一番号只要有一个分片被刮削标记为成人内容,就认定整部片都是成人条目:
// 未刮削的分片(nsfw=false)也按番号折叠。否则「一个分片刮削成功、其余仍
// pending」时,已刮削的走番号分组、其余落到标题分组,整部片被拆成两张卡。
adultCodes := adultCodesVouchedByNSFW(items)
type group struct {
key string
rows []model.Media
@@ -84,7 +88,7 @@ func groupMediaVersions(items []model.Media) []MediaItem {
groups := make([]group, 0, len(items))
byKey := make(map[string]int, len(items))
for _, item := range items {
key := mediaVersionGroupKey(item)
key := mediaVersionGroupKeyWithAdultVouch(item, adultCodes)
if key == "" {
groups = append(groups, group{rows: []model.Media{item}})
continue
@@ -135,16 +139,65 @@ func GroupEpisodeVersionsForDisplay(items []model.Media) []MediaItem {
return grouped
}
func mediaVersionGroupKey(m model.Media) string {
// 远程 Emby 挂载条目保持独立,不与其它远程条目或本地条目折叠合并。
if IsEmbyRemoteID(m.ID) {
return fmt.Sprintf("embyremote:%s", m.ID)
}
// mediaVersionLibraryKey 返回版本身份里使用的库标识。
func mediaVersionLibraryKey(m model.Media) string {
libKey := strings.ToLower(strings.TrimSpace(m.LibraryID))
if libKey == "" {
libKey = strings.ToLower(strings.TrimSpace(m.DisplayLibraryID))
}
return libKey
}
// adultCodesVouchedByNSFW 收集「已被刮削确认为成人内容」的番号。
func adultCodesVouchedByNSFW(items []model.Media) map[string]bool {
codes := map[string]bool{}
for _, item := range items {
if !item.NSFW {
continue
}
if code := canonicalAdultGroupCode(AdultCodeFromMediaPath(item.Path)); code != "" {
codes[code] = true
continue
}
if code := mediaAdultGroupCode(item); code != "" {
codes[code] = true
}
}
return codes
}
// mediaVersionGroupKeyWithAdultVouch 是版本身份的统一入口:番号已被同组分片
// 确认时优先按番号折叠,否则沿用 mediaVersionGroupKey 的原判定。
func mediaVersionGroupKeyWithAdultVouch(m model.Media, vouched map[string]bool) string {
if key := adultVouchedGroupKey(m, vouched); key != "" {
return key
}
return mediaVersionGroupKey(m)
}
// adultVouchedGroupKey 在番号已被同组分片确认时,返回番号分组键;
// 其余情况返回空串,表示沿用 mediaVersionGroupKey 的原判定。
func adultVouchedGroupKey(m model.Media, vouched map[string]bool) string {
if len(vouched) == 0 || m.NSFW {
return ""
}
code := canonicalAdultGroupCode(AdultCodeFromMediaPath(m.Path))
if code == "" || !vouched[code] {
return ""
}
libKey := mediaVersionLibraryKey(m)
if libKey == "" {
libKey = "_"
}
return fmt.Sprintf("adult:%s:%s", libKey, code)
}
func mediaVersionGroupKey(m model.Media) string { // 远程 Emby 挂载条目保持独立,不与其它远程条目或本地条目折叠合并。
if IsEmbyRemoteID(m.ID) {
return fmt.Sprintf("embyremote:%s", m.ID)
}
libKey := mediaVersionLibraryKey(m)
specialKind := mediaSpecialKind(m.Path)
season, episode := m.SeasonNum, m.EpisodeNum
if specialKind != "" && specialKind != mediaSpecialTheatrical && episode <= 0 {
@@ -0,0 +1,66 @@
package service
import (
"strconv"
"testing"
"github.com/truewhile/MeBox/internal/model"
)
// 真实场景:同一部片的分片里只有第 4 个被刮削成功(nsfw=true),其余仍是 pending。
// 修复前:已刮削的分片走「番号」分组、其余落到「标题」分组,7 个分片会裂成两张卡
// (一张只有第 4 个,另一张是其余 6 个)。
func TestGroupMediaVersionsKeepsUnscrapedPartsWithScrapedSibling(t *testing.T) {
const libID = "lib-1"
const dir = "/media/云下载/sivr-270/"
parts := func(nums ...int) []model.Media {
out := make([]model.Media, 0, len(nums))
for _, n := range nums {
out = append(out, model.Media{
LibraryID: libID,
Title: "sivr 270",
Path: dir + "sivr-270-" + strconv.Itoa(n) + ".strm",
Container: "strm",
})
}
return out
}
items := parts(1, 2, 3)
items = append(items, model.Media{
LibraryID: libID,
Title: "SIVR-270-【VR】河北彩花×ご奉仕ナース",
OriginalName: "SIVR-270",
Path: dir + "sivr-270-4.strm",
NSFW: true,
ScrapeStatus: "matched",
Container: "strm",
})
items = append(items, parts(5, 6, 7)...)
grouped := GroupMediaVersions(items)
if len(grouped) != 1 {
paths := make([]string, 0, len(grouped))
for _, g := range grouped {
paths = append(paths, g.Path)
}
t.Fatalf("分成 %d 张卡 %v,期望折叠成 1 张", len(grouped), paths)
}
if len(grouped[0].Versions) != 7 {
t.Fatalf("版本数 = %d,期望 7", len(grouped[0].Versions))
}
}
// 反向保护:没有任何分片被确认为成人内容时,不能仅凭文件名里的番号形态折叠,
// 否则普通媒体也可能被误并进同一张卡。
func TestGroupMediaVersionsIgnoresUnvouchedAdultCode(t *testing.T) {
items := []model.Media{
{LibraryID: "lib-2", Title: "Alpha Movie", Path: "/media/movies/Alpha Movie/ABC-123-1080p.mkv"},
{LibraryID: "lib-2", Title: "Beta Movie", Path: "/media/movies/Beta Movie/ABC-123-2160p.mkv"},
}
grouped := GroupMediaVersions(items)
if len(grouped) != 2 {
t.Fatalf("分成 %d 张卡,期望 2 张(未被确认成人内容的番号不参与折叠)", len(grouped))
}
}
+84 -11
View File
@@ -174,38 +174,111 @@ func (s *StrmService) firstEnabledAccountOf(ctx context.Context, provider string
return nil, nil
}
// ErrStrmProxyNotApplicable 表示该媒体没有需要服务端转发的直链(本地文件本身同源)。
var ErrStrmProxyNotApplicable = errors.New("strm proxy not applicable")
// ProxyMediaDirect 把媒体行的网盘/STRM 直链解析为真实地址后由服务端反向代理给
// 客户端,让浏览器拿到「同源」数据。画质与原文件完全一致,不触发任何转码。
//
// 用途:VR 全景播放要把视频帧读进 WebGL 纹理,而跨域直链(网盘 302 跳到 CDN)
// 在浏览器里属于被污染的资源,WebGL 读取会抛 SecurityError;把流量经服务端转发
// 是「原画 + VR」唯一可行的办法。
func (s *StrmService) ProxyMediaDirect(ctx context.Context, w http.ResponseWriter, r *http.Request, m *model.Media) error {
if s == nil || m == nil {
return ErrStrmProxyNotApplicable
}
raw := strings.TrimSpace(m.STRMURL)
if raw == "" {
path := strings.TrimSpace(m.Path)
if !strings.HasSuffix(strings.ToLower(path), ".strm") {
return ErrStrmProxyNotApplicable
}
target, err := readLocalSTRMTarget(path)
if err != nil {
return err
}
raw = strings.TrimSpace(target)
}
if raw == "" {
return ErrStrmProxyNotApplicable
}
result, err := s.ResolvePlayTarget(ctx, raw)
if err != nil {
return err
}
switch {
case result.Link != nil && result.Link.URL != "":
return s.ProxyDirect(ctx, w, r, result.Link)
case result.RedirectURL != "":
return s.ProxyDirect(ctx, w, r, &cloud.DirectLink{URL: result.RedirectURL})
default:
// 本地文件(LocalPath)由静态文件处理器提供,本身就是同源。
return ErrStrmProxyNotApplicable
}
}
// ProxyDirect 反向代理渲染直链内容(保留 Range 请求头以支持拖动播放)。
func (s *StrmService) ProxyDirect(ctx context.Context, w http.ResponseWriter, r *http.Request, link *cloud.DirectLink) error {
if link == nil || link.URL == "" {
return errors.New("空直链")
}
req, err := http.NewRequestWithContext(ctx, http.MethodGet, link.URL, nil)
method := http.MethodGet
if r != nil && r.Method == http.MethodHead {
method = http.MethodHead
}
req, err := http.NewRequestWithContext(ctx, method, link.URL, nil)
if err != nil {
return err
}
for k, v := range link.Headers {
req.Header.Set(k, v)
}
if rangeHeader := r.Header.Get("Range"); rangeHeader != "" {
req.Header.Set("Range", rangeHeader)
if r != nil {
if rangeHeader := r.Header.Get("Range"); rangeHeader != "" {
req.Header.Set("Range", rangeHeader)
}
// 部分网盘直链按 UA 防盗链;解析时未绑定 UA 的直链沿用浏览器 UA 更稳。
if ua := strings.TrimSpace(r.Header.Get("User-Agent")); ua != "" && req.Header.Get("User-Agent") == "" {
req.Header.Set("User-Agent", ua)
}
}
resp, err := s.http.Do(req)
if err != nil {
return err
}
defer resp.Body.Close()
for _, header := range []string{"Content-Type", "Content-Length", "Content-Range", "Accept-Ranges", "ETag"} {
for _, header := range []string{"Content-Type", "Content-Length", "Content-Range", "Accept-Ranges", "ETag", "Last-Modified"} {
if value := resp.Header.Get(header); value != "" {
w.Header().Set(header, value)
}
}
if resp.StatusCode >= 200 && resp.StatusCode < 300 {
w.WriteHeader(http.StatusOK)
} else {
w.WriteHeader(resp.StatusCode)
// 原样透传上游状态码:Range 请求必须回 206,改写成 200 会让浏览器误判
// 响应长度,拖动进度条时反复重新拉流。
w.WriteHeader(resp.StatusCode)
if resp.StatusCode != http.StatusPartialContent && resp.StatusCode != http.StatusOK {
return nil
}
if resp.StatusCode == http.StatusPartialContent || resp.StatusCode == http.StatusOK {
_, _ = io.Copy(w, resp.Body)
if method == http.MethodHead {
return nil
}
return nil
// 边转发边 flush,避免大体积视频被 net/http 的写缓冲切成一段段卡顿。
writer := io.Writer(w)
if flusher, ok := w.(http.Flusher); ok {
writer = &flushWriter{writer: w, flusher: flusher}
}
_, err = io.Copy(writer, resp.Body)
return err
}
type flushWriter struct {
writer io.Writer
flusher http.Flusher
}
func (f *flushWriter) Write(p []byte) (int, error) {
n, err := f.writer.Write(p)
if f.flusher != nil {
f.flusher.Flush()
}
return n, err
}
+74
View File
@@ -0,0 +1,74 @@
package service
import (
"context"
"errors"
"net/http"
"net/http/httptest"
"path/filepath"
"testing"
"github.com/truewhile/MeBox/internal/model"
)
// 同源转发必须原样保留 Range 语义:把 206 改写成 200 会让浏览器误判响应长度,
// 拖动进度条时反复重新拉流。
func TestProxyMediaDirectForwardsRangeAndStatus(t *testing.T) {
var gotRange string
var gotUA string
upstream := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
gotRange = r.Header.Get("Range")
gotUA = r.Header.Get("User-Agent")
w.Header().Set("Content-Type", "video/mp4")
w.Header().Set("Accept-Ranges", "bytes")
w.Header().Set("Content-Range", "bytes 10-19/100")
w.WriteHeader(http.StatusPartialContent)
_, _ = w.Write([]byte("0123456789"))
}))
defer upstream.Close()
svc := testStrmService(t)
media := &model.Media{STRMURL: upstream.URL + "/video.mp4"}
rec := httptest.NewRecorder()
req := httptest.NewRequest(http.MethodGet, "/api/stream/media-1?proxy=1", nil)
req.Header.Set("Range", "bytes=10-19")
req.Header.Set("User-Agent", "MeBoxTest/1.0")
if err := svc.ProxyMediaDirect(context.Background(), rec, req, media); err != nil {
t.Fatalf("ProxyMediaDirect: %v", err)
}
if rec.Code != http.StatusPartialContent {
t.Fatalf("status = %d, want 206", rec.Code)
}
if gotRange != "bytes=10-19" {
t.Fatalf("upstream Range = %q, want bytes=10-19", gotRange)
}
if gotUA != "MeBoxTest/1.0" {
t.Fatalf("upstream User-Agent = %q, want MeBoxTest/1.0", gotUA)
}
if rec.Header().Get("Content-Range") != "bytes 10-19/100" {
t.Fatalf("Content-Range = %q", rec.Header().Get("Content-Range"))
}
if rec.Body.String() != "0123456789" {
t.Fatalf("body = %q", rec.Body.String())
}
}
// 本地文件本身就是同源资源,不应该被代理(调用方按原静态文件逻辑处理)。
func TestProxyMediaDirectSkipsLocalFile(t *testing.T) {
svc := testStrmService(t)
dir := t.TempDir()
path := filepath.Join(dir, "movie.mkv")
writeFile(t, path, "not-a-video")
rec := httptest.NewRecorder()
req := httptest.NewRequest(http.MethodGet, "/api/stream/media-1?proxy=1", nil)
err := svc.ProxyMediaDirect(context.Background(), rec, req, &model.Media{Path: path})
if !errors.Is(err, ErrStrmProxyNotApplicable) {
t.Fatalf("err = %v, want ErrStrmProxyNotApplicable", err)
}
if rec.Body.Len() != 0 {
t.Fatalf("local file must not be proxied, body = %q", rec.Body.String())
}
}
+7 -2
View File
@@ -141,8 +141,13 @@ const profileQuery = () => {
// streamURL returns a direct-play URL for <video src>. The JWT is added as
// a query parameter because <video> elements cannot send Authorization
// headers.
export function streamURL(mediaId: string): string {
return `/api/stream/${encodeURIComponent(mediaId)}?${tokenQuery()}${profileQuery()}`
//
// proxy=true 时由服务端把网盘/STRM 直链转发为同源数据(画质与原文件一致、
// 不转码)。VR 全景渲染需要把视频帧读进 WebGL 纹理,跨域直链会被浏览器
// 判定为污染资源而禁止读取,因此只有这种场景才需要开启。
export function streamURL(mediaId: string, options: { proxy?: boolean } = {}): string {
const proxy = options.proxy ? '&proxy=1' : ''
return `/api/stream/${encodeURIComponent(mediaId)}?${tokenQuery()}${profileQuery()}${proxy}`
}
// hlsURL returns the m3u8 playlist URL fed into hls.js.
+4
View File
@@ -72,6 +72,8 @@ export interface DanmakuConfig {
area: string
volume: number
playback_rate: number
/** 当前用户是否已经看过 VR 全景播放的首次操作说明(按用户存储)。 */
vr360_guide_seen: boolean
/** Per-user preference: merge the same episode's multiple sources. */
merge_sources: boolean
}
@@ -89,6 +91,8 @@ export interface DanmakuSettingsPatch {
merge_sources?: boolean
volume?: number
playback_rate?: number
/** 看过 VR 操作说明后置为 true,之后不再弹出。 */
vr360_guide_seen?: boolean
}
// danmakuAPI fetches danmaku comments for a media item. The backend resolves
+108 -84
View File
@@ -44,6 +44,10 @@ import {
// controls> (which cannot host custom buttons). The danmaku toggle sits right
// next to the volume control. The bar auto-hides while playing and reappears
// on mouse movement; it stays visible while paused or when hovering/interacting.
//
// VR 全景播放里这条规则要反过来:按住拖动就是转动视角,属于观看动作而不是
// 操作意图,所以这类鼠标/触摸移动既不唤出控制栏,还会在开始转视角时立刻把
// 浮层收掉(见 onVrPointerDown / onVrPointerMove)。
function formatTime(s: number): string {
if (!Number.isFinite(s) || s < 0) s = 0
@@ -58,6 +62,12 @@ const SEEK_APPLY_MS = 220
const SEEK_HINT_MS = 700
const PLAYBACK_RATE_REPEAT_MS = 140
const PLAYBACK_RATE_HINT_MS = 900
/** 播放中控制栏无操作自动隐藏的延时。 */
const CONTROLS_HIDE_DELAY_MS = 3000
/** VR 全景播放的隐藏延时更短:浮层由单击唤出,收得越快越不打扰观看。 */
const VR_CONTROLS_HIDE_DELAY_MS = 3000
/** VR 视角拖拽超过这个距离才算「真的在转动视角」,轻触不受影响。 */
const VR_VIEW_DRAG_DISTANCE = 6
type SeekHint = {
dir: 'back' | 'forward'
@@ -92,6 +102,8 @@ type PlayerControlsProps = {
onPlaybackRateCommit?: (rate: number) => void
uiVisible: boolean
onUiVisibleChange: (visible: boolean) => void
/** 外部浮层(VR 工具条/设置面板)正被鼠标悬停:此时控制栏不自动隐藏。 */
uiHold?: boolean
subs: SubtitleTrack[]
/** 当前激活字幕轨道:-1=关闭,0..n-1=对应轨道。 */
subtitleIndex: number
@@ -141,6 +153,7 @@ export function PlayerControls({
onPlaybackRateCommit,
uiVisible,
onUiVisibleChange,
uiHold = false,
subs,
subtitleIndex,
onSelectSubtitle,
@@ -196,13 +209,13 @@ export function PlayerControls({
const [speedMenuOpen, setSpeedMenuOpen] = useState(false)
const speedMenuRef = useRef<HTMLDivElement | null>(null)
const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const controlsHoveredRef = useRef(false)
const isScrubbingRef = useRef(false)
const subtitleMenuOpenRef = useRef(false)
const qualityMenuOpenRef = useRef(false)
const speedMenuOpenRef = useRef(false)
const danmakuOpenRef = useRef(false)
const playlistOpenRef = useRef(false)
/** 控制栏当前是否处于「必须保持显示」的状态(悬停/拖进度/菜单或面板打开)。 */
const holdControlsRef = useRef(false)
/** 当前是否在 VR 全景播放中。 */
const vr360ActiveRef = useRef(Boolean(vr360))
/** VR 画布上的按下状态:按住拖动 = 转动视角,不唤出控制栏。 */
const vrDragRef = useRef<{ x: number; y: number; moved: boolean } | null>(null)
const pendingSeekRef = useRef<number | null>(null)
const applySeekRef = useRef<(absolute: number) => void>(() => undefined)
const durationRef = useRef(0)
@@ -217,33 +230,28 @@ export function PlayerControls({
const [playbackRateHint, setPlaybackRateHint] = useState<number | null>(null)
const [stageEl, setStageEl] = useState<HTMLElement | null>(null)
useEffect(() => {
controlsHoveredRef.current = controlsHovered
}, [controlsHovered])
useEffect(() => {
isScrubbingRef.current = isScrubbing
}, [isScrubbing])
useEffect(() => {
subtitleMenuOpenRef.current = subtitleMenuOpen
}, [subtitleMenuOpen])
vr360ActiveRef.current = Boolean(vr360)
}, [vr360])
// 「保持显示」条件集中在这里:悬停控制栏、拖动进度条、打开任何菜单或面板。
// 事件回调里读 ref,渲染里读派生值,两边始终一致。
const keepControlsVisible =
uiHold ||
controlsHovered ||
isScrubbing ||
subtitleMenuOpen ||
qualityMenuOpen ||
speedMenuOpen ||
danmakuOpen ||
playlistOpen
useEffect(() => {
qualityMenuOpenRef.current = qualityMenuOpen
}, [qualityMenuOpen])
useEffect(() => {
speedMenuOpenRef.current = speedMenuOpen
}, [speedMenuOpen])
useEffect(() => {
danmakuOpenRef.current = danmakuOpen
}, [danmakuOpen])
useEffect(() => {
playlistOpenRef.current = playlistOpen
}, [playlistOpen])
holdControlsRef.current = keepControlsVisible
}, [keepControlsVisible])
useEffect(() => {
durationRef.current = duration
@@ -303,45 +311,64 @@ export function PlayerControls({
const stage = container()
if (!el || !stage) return
const holdControls = () => holdControlsRef.current
const hideDelay = () =>
vr360ActiveRef.current ? VR_CONTROLS_HIDE_DELAY_MS : CONTROLS_HIDE_DELAY_MS
const resetTimer = () => {
if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
if (
!el.paused &&
!controlsHoveredRef.current &&
!isScrubbingRef.current &&
!subtitleMenuOpenRef.current &&
!qualityMenuOpenRef.current &&
!speedMenuOpenRef.current &&
!danmakuOpenRef.current &&
!playlistOpenRef.current
) {
hideTimerRef.current = setTimeout(() => {
if (
!controlsHoveredRef.current &&
!isScrubbingRef.current &&
!subtitleMenuOpenRef.current &&
!qualityMenuOpenRef.current &&
!speedMenuOpenRef.current &&
!danmakuOpenRef.current &&
!playlistOpenRef.current
) {
onUiVisibleChange(false)
}
}, 3000)
}
if (el.paused || holdControls()) return
hideTimerRef.current = setTimeout(() => {
if (holdControls()) return
onUiVisibleChange(false)
}, hideDelay())
}
// 通用「用户活动」入口:显示控制栏并重新计时。播放/暂停等事件也走这里。
const onMove = () => {
onUiVisibleChange(true)
resetTimer()
}
// VR 全景播放里鼠标/触摸移动是「转动视角」的观看动作,不是操作控制栏的意图:
// · 移动一律不唤出控制栏(拖动结束后的轻微抖动、手机上轻触产生的兼容
// mousemove 都不会让进度条又冒出来);
// · 一旦判定用户真的在转视角,就立刻收起浮层,还给用户一个干净的画面。
// 需要控制栏时用轻触/单击画面唤出(见 PlayerVideoStage 的 handleSurfaceActivate)。
const onStageMouseMove = () => {
if (vr360ActiveRef.current) return
onMove()
}
const onVrPointerDown = (event: PointerEvent) => {
if (!vr360ActiveRef.current) return
const target = event.target
if (!(target instanceof Element) || !target.closest('[data-vr360-surface]')) return
vrDragRef.current = { x: event.clientX, y: event.clientY, moved: false }
}
const onVrPointerMove = (event: PointerEvent) => {
const drag = vrDragRef.current
if (!drag || drag.moved) return
if (Math.hypot(event.clientX - drag.x, event.clientY - drag.y) <= VR_VIEW_DRAG_DISTANCE) return
drag.moved = true
if (holdControls()) return
if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
onUiVisibleChange(false)
}
const endVrDrag = () => {
vrDragRef.current = null
}
const onLeave = (e: MouseEvent) => {
endVrDrag()
// 仅当光标真正移出 stage 容器时才处理
if (e.relatedTarget && stage.contains(e.relatedTarget as Node)) {
return
}
if (el.paused || controlsHoveredRef.current || isScrubbingRef.current || playlistOpenRef.current) return
if (el.paused || holdControls()) return
if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
onUiVisibleChange(false)
}
@@ -381,8 +408,14 @@ export function PlayerControls({
const syncFullscreen = () => setFullscreen(Boolean(document.fullscreenElement))
const syncPip = () => setPip(document.pictureInPictureElement === el)
stage.addEventListener('mousemove', onMove)
stage.addEventListener('mousemove', onStageMouseMove)
stage.addEventListener('mouseleave', onLeave)
// VR 视角拖拽:pointer 事件比 mouse 事件先到达,可以在同一次移动里
// 先判定「这是转动视角」,避免鼠标移动先把控制栏唤出来再收掉。
stage.addEventListener('pointerdown', onVrPointerDown)
stage.addEventListener('pointermove', onVrPointerMove)
stage.addEventListener('pointerup', endVrDrag)
stage.addEventListener('pointercancel', endVrDrag)
el.addEventListener('play', syncPlay)
el.addEventListener('playing', syncPlay)
@@ -399,8 +432,12 @@ export function PlayerControls({
syncVolume()
syncFullscreen()
return () => {
stage.removeEventListener('mousemove', onMove)
stage.removeEventListener('mousemove', onStageMouseMove)
stage.removeEventListener('mouseleave', onLeave)
stage.removeEventListener('pointerdown', onVrPointerDown)
stage.removeEventListener('pointermove', onVrPointerMove)
stage.removeEventListener('pointerup', endVrDrag)
stage.removeEventListener('pointercancel', endVrDrag)
el.removeEventListener('play', syncPlay)
el.removeEventListener('playing', syncPlay)
el.removeEventListener('pause', syncPlay)
@@ -422,19 +459,23 @@ export function PlayerControls({
setDuration(Math.max(knownDuration || 0, streamOffset + streamDur))
}, [knownDuration, streamOffset, video])
// 当悬停或菜单状态改变时,更新控制栏计时器
// 控制栏的自动隐藏计时器:只要控制栏处于显示状态,就始终安排一次隐藏。
// 之前只在「悬停/菜单状态变化」时才安排,用轻触或点击唤出控制栏后如果没有
// 鼠标移动,计时器永远不会被安排,控制栏就会一直留在画面上。
useEffect(() => {
if (controlsHovered || isScrubbing || subtitleMenuOpen || qualityMenuOpen || speedMenuOpen || danmakuOpen || playlistOpen) {
if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
if (keepControlsVisible) {
onUiVisibleChange(true)
if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
} else {
const el = video()
if (el && !el.paused) {
if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
hideTimerRef.current = setTimeout(() => onUiVisibleChange(false), 3000)
}
return
}
}, [controlsHovered, isScrubbing, subtitleMenuOpen, qualityMenuOpen, speedMenuOpen, danmakuOpen, playlistOpen, onUiVisibleChange, video])
if (!uiVisible) return
const el = video()
if (!el || el.paused) return
hideTimerRef.current = setTimeout(() => {
if (holdControlsRef.current) return
onUiVisibleChange(false)
}, vr360ActiveRef.current ? VR_CONTROLS_HIDE_DELAY_MS : CONTROLS_HIDE_DELAY_MS)
}, [uiVisible, keepControlsVisible, onUiVisibleChange, video])
const togglePlay = () => {
const el = video()
@@ -516,30 +557,13 @@ export function PlayerControls({
onUiVisibleChange(true)
if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
const el = video()
if (
!el ||
el.paused ||
controlsHoveredRef.current ||
isScrubbingRef.current ||
subtitleMenuOpenRef.current ||
qualityMenuOpenRef.current ||
danmakuOpenRef.current ||
playlistOpenRef.current
) {
if (!el || el.paused || holdControlsRef.current) {
return
}
hideTimerRef.current = setTimeout(() => {
if (
!controlsHoveredRef.current &&
!isScrubbingRef.current &&
!subtitleMenuOpenRef.current &&
!qualityMenuOpenRef.current &&
!danmakuOpenRef.current &&
!playlistOpenRef.current
) {
onUiVisibleChange(false)
}
}, 3000)
if (holdControlsRef.current) return
onUiVisibleChange(false)
}, vr360ActiveRef.current ? VR_CONTROLS_HIDE_DELAY_MS : CONTROLS_HIDE_DELAY_MS)
}, [onUiVisibleChange, video])
const queueRelativeSeek = useCallback((delta: number, immediate: boolean) => {
+42 -3
View File
@@ -66,10 +66,19 @@ type Vr360StageProps = {
uiVisible: boolean
/** 轻触画面(未发生拖拽)时回调,与普通播放一致:唤出控制栏或切换播放。 */
onSurfaceTap: () => void
/**
* 第一帧真正画出来时回调,每次挂载只上报一次(改投影方式/画幅布局不会重新上报),
* 调用方据此结束「正在启动」提示。
*/
onReady: () => void
onError: (message: string) => void
/** 用户调整投影方式/立体布局时回调,由播放页保存为下次进入的默认值。 */
onProfileChange?: (profile: Vr360Profile) => void
/**
* 鼠标是否停留在 VR 工具条/设置面板上。由播放页转给控制栏:悬停这些浮层时
* 控制栏不应该自动隐藏(否则设置面板会在点击前消失)。
*/
onUiHoldChange?: (hold: boolean) => void
}
/** 每像素拖拽对应的转角(弧度)。视场角越小时画面越「拉近」,拖拽也应更细腻。 */
@@ -113,6 +122,7 @@ export function Vr360Stage({
onReady,
onError,
onProfileChange,
onUiHoldChange,
}: Vr360StageProps) {
const canvasRef = useRef<HTMLCanvasElement>(null)
const rendererRef = useRef<Vr360Renderer | null>(null)
@@ -368,6 +378,15 @@ export function Vr360Stage({
useEffect(() => () => stopGyro(), [stopGyro])
// 控制栏/浮层隐藏时收起「画面」设置面板:它属于同一套浮层,下次唤出控制栏时
// 不应该自动弹回来挡住画面。
useEffect(() => {
if (uiVisible) return
setSettingsOpen(false)
// 浮层不可见时鼠标离开事件不会再触发,这里主动解除「悬停保持显示」。
onUiHoldChange?.(false)
}, [uiVisible, onUiHoldChange])
const zoomBy = useCallback(
(factor: number) => {
const view = viewRef.current
@@ -483,7 +502,10 @@ export function Vr360Stage({
<canvas
ref={canvasRef}
data-vr360-surface
className="absolute inset-0 h-full w-full cursor-grab touch-none select-none active:cursor-grabbing"
className={`absolute inset-0 h-full w-full touch-none select-none ${
// 浮层隐藏时连鼠标指针一起藏起来:全景画面里光标一直悬在画面中间很出戏。
uiVisible ? 'cursor-grab active:cursor-grabbing' : 'cursor-none'
}`}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={endPointer}
@@ -493,11 +515,22 @@ export function Vr360Stage({
onClick={(event) => event.stopPropagation()}
/>
<div
// 阻止浮层内按钮/面板的点击冒泡到舞台的 handleSurfaceActivate:否则点击
// 投影方式/画幅布局等设置项会被误判为「单击收起控制栏」,面板在切换后立即消失。
onClick={(event) => event.stopPropagation()}
className={`pointer-events-none absolute inset-x-0 top-2 z-20 flex flex-col items-center gap-1.5 px-2 transition-opacity duration-300 ${
uiVisible ? 'opacity-100' : 'opacity-0'
}`}
>
<div className="pointer-events-auto flex flex-wrap items-center justify-center gap-1.5 rounded-2xl border border-white/15 bg-black/65 px-2 py-1.5 text-white shadow-2xl backdrop-blur">
<div
className={`flex flex-wrap items-center justify-center gap-1.5 rounded-2xl border border-white/15 bg-black/65 px-2 py-1.5 text-white shadow-2xl backdrop-blur ${
// 浮层隐藏时必须彻底不接收指针事件:否则看不见的按钮既会在画面顶部
// 抢走拖动转视角的手势,也可能被误点(例如误开陀螺仪、误开设置面板)。
uiVisible ? 'pointer-events-auto' : 'pointer-events-none'
}`}
onMouseEnter={() => onUiHoldChange?.(true)}
onMouseLeave={() => onUiHoldChange?.(false)}
>
<button
type="button"
onClick={toggleGyro}
@@ -560,7 +593,13 @@ export function Vr360Stage({
{hint || '拖动旋转视角 · 滚轮或双指缩放'}
</p>
{settingsOpen ? (
<div className="pointer-events-auto w-[min(92vw,420px)] rounded-2xl border border-white/15 bg-black/75 px-3 py-2.5 text-white shadow-2xl backdrop-blur">
<div
className={`w-[min(92vw,420px)] rounded-2xl border border-white/15 bg-black/75 px-3 py-2.5 text-white shadow-2xl backdrop-blur ${
uiVisible ? 'pointer-events-auto' : 'pointer-events-none'
}`}
onMouseEnter={() => onUiHoldChange?.(true)}
onMouseLeave={() => onUiHoldChange?.(false)}
>
<p className="mb-1.5 text-[10px] uppercase tracking-wide text-white/45">投影方式</p>
<div className="flex flex-wrap gap-1.5">
{VR360_PROJECTION_OPTIONS.map(([value, label]) => (
+137 -30
View File
@@ -33,7 +33,7 @@ import {
type SubtitlePosition,
type SubtitleStylePreset,
} from '../utils/subtitleDisplay'
import { pickPlayerMode, needsTranscodeForBrowser, isDirectStreamMedia, type PlayerMode } from './playerPageModel'
import { pickPlayerMode, needsTranscodeForBrowser, isDirectStreamMedia, isStrmMedia, type PlayerMode } from './playerPageModel'
import { classifyDirectPlayError } from './directPlayError'
import { apiErrorMessage } from './StrmManagePage'
import { PlayerTopBar } from './PlayerTopBar'
@@ -45,6 +45,7 @@ import { mediaVersionsOf } from '../utils/mediaVersion'
import {
detectVr360Profile,
loadVr360Preference,
sameVr360Profile,
saveVr360Preference,
type Vr360Detection,
type Vr360Profile,
@@ -108,6 +109,17 @@ export function PlayerPage() {
const [vr360, setVr360] = useState<Vr360Profile | null>(null)
const [vr360Detected, setVr360Detected] = useState(false)
const vr360TouchedRef = useRef(false)
// VR 取帧失败后的自愈:只尝试一次「切到 HLS」,并在切换窗口内忽略重复报错。
const vr360TextureRetryUsedRef = useRef(false)
const vr360TextureRetryUntilRef = useRef(0)
// VR 全景下 STRM/网盘直连必须由服务端同源转发,浏览器才允许 WebGL 读取画面;
// 普通播放仍然 302 直连,避免把网盘流量压到服务器。放在 ref 里是为了让
// handleVideoError 里的 src 比对始终拿到最新值。
const vr360DirectProxy = Boolean(vr360) && isStrmMedia(media)
const vr360DirectProxyRef = useRef(vr360DirectProxy)
useEffect(() => {
vr360DirectProxyRef.current = vr360DirectProxy
}, [vr360DirectProxy])
const [mode, setMode] = useState<PlayerMode>('direct')
const [subs, setSubs] = useState<SubtitleTrack[]>([])
const [subtitleIndex, setSubtitleIndex] = useState<number>(0)
@@ -126,6 +138,9 @@ export function PlayerPage() {
normalizePlaybackRate(authUser?.player_playback_rate),
)
const persistedSubtitleChineseModeRef = useRef(subtitleChineseMode)
// VR 全景播放的首次操作说明是否已经看过:null = 服务端配置还没读回来,
// 这时不弹说明,避免给老用户闪一下。
const [vr360GuideSeen, setVr360GuideSeen] = useState<boolean | null>(null)
const playerVolumeTouchedRef = useRef(false)
const playerPlaybackRateTouchedRef = useRef(false)
const playerPlaybackRateSaveSeqRef = useRef(0)
@@ -272,6 +287,7 @@ export function PlayerPage() {
setDanmakuFontSize(Number(cfg.font_size) || 24)
setDanmakuArea(Number(cfg.area) || 1)
setDanmakuMergeSources(Boolean(cfg.merge_sources))
setVr360GuideSeen(Boolean(cfg.vr360_guide_seen))
applyDanmakuConnectionConfig(cfg)
if (!playerVolumeTouchedRef.current) {
const current = useAuthStore.getState().user
@@ -471,6 +487,8 @@ export function PlayerPage() {
setMedia(null)
setLoadError('')
vr360TouchedRef.current = false
vr360TextureRetryUsedRef.current = false
vr360TextureRetryUntilRef.current = 0
setVr360(null)
setVr360Detected(false)
setHlsStartSec(0)
@@ -578,6 +596,35 @@ export function PlayerPage() {
setVr360(detection.profile)
}, [id, media])
// 远端 Emby 挂载的媒体常常没有宽高元数据(width/height 为 0),等播放器拿到
// 真实画面尺寸后再补一次识别。HLS 转码是等比缩放,所以比例依然可信。
useEffect(() => {
if (!media || media.id !== id) return
if (media.width > 0 && media.height > 0) return
const video = ref.current
if (!video) return
const refine = () => {
if (vr360TouchedRef.current || video.videoWidth <= 0 || video.videoHeight <= 0) return
const detection = detectVr360Profile({
title: media.title,
originalName: media.original_name,
path: media.path,
relativePath: media.relative_path,
width: video.videoWidth,
height: video.videoHeight,
})
setVr360Detected(detection.confident)
const preference = loadVr360Preference()
if (!preference.autoDetect || !detection.confident) return
setVr360((current) =>
current && sameVr360Profile(current, detection.profile) ? current : detection.profile,
)
}
video.addEventListener('loadedmetadata', refine)
refine()
return () => video.removeEventListener('loadedmetadata', refine)
}, [id, media])
const toggleVr360 = useCallback(() => {
vr360TouchedRef.current = true
if (vr360) {
@@ -607,11 +654,11 @@ export function PlayerPage() {
saveVr360Preference({ ...loadVr360Preference(), profile })
}, [])
const handleVr360Error = useCallback((message: string) => {
vr360TouchedRef.current = true
setVr360(null)
setPlayerError(message)
toast.error(message)
// VR 操作说明是「按用户只弹一次」:用户关掉说明时就落库,之后进入 VR 不再显示。
// 保存失败只影响下次是否再弹一次,不打断播放,所以本地状态不回滚。
const dismissVr360Guide = useCallback(() => {
setVr360GuideSeen(true)
void danmakuAPI.updateSettings({ vr360_guide_seen: true }).catch(() => undefined)
}, [])
// Wire up the actual <video> element when we know the mode.
@@ -685,6 +732,33 @@ export function PlayerPage() {
[mediaId, setPlaybackMode, switchToLocalHLS],
)
// 切到 HLS 播放(优先 115 云端,其次本地转码)。toggleMode 与「VR 需要同源帧」
// 的自愈逻辑共用,避免两处各写一遍云端/本地选择。
const enterHlsPlayback = useCallback(
(startSec: number) => {
setHlsStartSec(startSec)
const preferred =
playbackInfo?.provider === 'cloud115'
? findPlaybackQualityById(playbackInfo, selectedQuality) ??
findPlaybackQualityById(playbackInfo, playbackInfo.default_quality)
: undefined
if (preferred?.source === 'cloud') {
setHlsSource('cloud')
if (preferred.available) {
setCloudWaiting(false)
} else {
setCloudWaiting(true)
setCloudWaitMessage(preferred.note || `正在等待 115 转码 ${preferred.label}…`)
void startCloudTranscode(Number(preferred.id) || 4)
}
} else {
switchToLocalHLS(startSec)
}
setPlaybackMode('hls')
},
[playbackInfo, selectedQuality, setPlaybackMode, startCloudTranscode, switchToLocalHLS],
)
// 云端转码等待:按后端建议间隔轮询,完成后自动切到云 HLS。
useEffect(() => {
if (!cloudWaiting || !mediaId) return
@@ -869,13 +943,30 @@ export function PlayerPage() {
setPlaybackMode('direct')
})
} else {
const url = streamURL(mediaId)
// VR 全景需要浏览器能读帧:STRM/网盘直链会被 302 到跨域 CDN,此时改为
// 服务端同源转发(原画,不转码);普通播放仍走 302 直连,省服务器流量。
const url = streamURL(mediaId, { proxy: vr360DirectProxyRef.current })
const absoluteURL = new URL(url, window.location.href).href
// 其它异步播放器状态更新不应重启同一个直连请求;STRM 的重定向/换链
// 比本地文件慢,重启请求可能产生一个短暂但会触发 onError 的中断。
if (video.src !== absoluteURL) {
directRetryRef.current = false
clearFallbackTimer()
// 进出 VR 会切换播放源地址,这里保住当前播放位置。
const resumeAt = video.currentTime > 2 ? video.currentTime : 0
if (resumeAt > 0) {
video.addEventListener(
'loadedmetadata',
() => {
try {
video.currentTime = resumeAt
} catch {
// ignore
}
},
{ once: true },
)
}
video.src = url
void video.play().catch(() => undefined)
}
@@ -904,6 +995,7 @@ export function PlayerPage() {
setPlaybackMode,
switchToLocalHLS,
teardownHls,
vr360DirectProxy,
])
// Stop host ffmpeg when leaving this HLS player. The keepalive request also
@@ -1263,38 +1355,49 @@ export function PlayerPage() {
}
const next = mode === 'hls' ? 'direct' : 'hls'
if (next === 'hls') {
setHlsStartSec(0)
const preferred =
playbackInfo?.provider === 'cloud115'
? findPlaybackQualityById(playbackInfo, selectedQuality) ??
findPlaybackQualityById(playbackInfo, playbackInfo.default_quality)
: undefined
if (preferred?.source === 'cloud') {
setHlsSource('cloud')
if (preferred.available) {
setCloudWaiting(false)
} else {
setCloudWaiting(true)
setCloudWaitMessage(preferred.note || `正在等待 115 转码 ${preferred.label}…`)
void startCloudTranscode(Number(preferred.id) || 4)
}
} else {
switchToLocalHLS()
}
enterHlsPlayback(0)
} else {
setCloudWaiting(false)
}
setPlaybackMode(next)
}, [
enterHlsPlayback,
isDirectStream,
mode,
playbackInfo,
selectedQuality,
setPlaybackMode,
startCloudTranscode,
switchToLocalHLS,
])
// VR 渲染取不到帧时:网盘/STRM 的直连会 302 跳到 CDN,视频就变成跨域资源,
// 浏览器禁止 WebGL 读取(texImage2D 抛 SecurityError)。此时自动切到同源的
// HLS(云端优先)再继续 VR,只有确实做不到时才如实报错并退出 VR。
const handleVr360Error = useCallback(
(message: string) => {
const now = Date.now()
// 切换 HLS 的过程中旧的直连帧还会继续上报失败,先忽略这一窗口内的重复错误。
if (now < vr360TextureRetryUntilRef.current) return
const canRetryWithHls =
!vr360TextureRetryUsedRef.current &&
modeRef.current === 'direct' &&
!directOnly &&
!isRemoteEmbyID(mediaRef.current?.id)
if (canRetryWithHls) {
vr360TextureRetryUsedRef.current = true
vr360TextureRetryUntilRef.current = now + 15_000
setPlayerError('')
toast('直连源跨域,浏览器无法取帧;正在切到 HLS 转码后继续 VR 全景')
enterHlsPlayback(ref.current?.currentTime || 0)
return
}
vr360TouchedRef.current = true
setVr360(null)
setPlayerError(
`${message}。若当前是网盘/STRM 直连(会 302 跳转到 CDN),浏览器不允许 WebGL 读取跨域画面,请改用 HLS 播放后再开启 VR。`,
)
toast.error(message)
},
[directOnly, enterHlsPlayback],
)
const handleSeekAbsolute = useCallback(
(absoluteSec: number) => {
if (mode !== 'hls') return false
@@ -1420,7 +1523,9 @@ export function PlayerPage() {
if (retryingDirectRef.current) return
const expectedSrc = mediaId ? new URL(streamURL(mediaId), window.location.href).href : ''
const expectedSrc = mediaId
? new URL(streamURL(mediaId, { proxy: vr360DirectProxyRef.current }), window.location.href).href
: ''
const action = classifyDirectPlayError({
errorCode: video?.error?.code,
readyState: video?.readyState ?? 0,
@@ -1581,6 +1686,8 @@ export function PlayerPage() {
onToggleVr360={toggleVr360}
onVr360ProfileChange={changeVr360Profile}
onVr360Error={handleVr360Error}
showVr360Guide={Boolean(vr360) && vr360GuideSeen === false}
onDismissVr360Guide={dismissVr360Guide}
playlistPanel={
<PlayerPlaylistPanel
open={playlistOpen}
+141 -10
View File
@@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import type { CSSProperties, PointerEvent, ReactNode, RefObject } from 'react'
import { Loader2 } from 'lucide-react'
import { Hand, Loader2, MousePointerClick, Rotate3d, Settings2, Smartphone, ZoomIn } from 'lucide-react'
import { subtitlesAPI, type SubtitleTrack } from '../api/subtitles'
import { type DanmakuAnime, type DanmakuLoadedInfo } from '../api/danmaku'
@@ -27,6 +27,13 @@ type SubtitleRenderGroup = {
style: CSSProperties
}
/** VR 模式下必须连续点击这么多次才唤出控制栏:单击太容易在转视角时误触。 */
const VR_TAP_COUNT = 3
/** 相邻两次点击间隔超过该毫秒数就重新开始计数。 */
const VR_TAP_GAP_MS = 900
/** 首次操作说明的最长停留时间:到这里仍未点「知道了」也自动收起并记录为已看过。 */
const VR_GUIDE_AUTO_DISMISS_MS = 20_000
function uniqueSubtitleCues(cues: SubtitleCue[]): SubtitleCue[] {
const seen = new Set<string>()
const unique: SubtitleCue[] = []
@@ -195,6 +202,9 @@ type PlayerVideoStageProps = {
onToggleVr360?: () => void
onVr360ProfileChange?: (profile: Vr360Profile) => void
onVr360Error?: (message: string) => void
/** 是否展示 VR 全景播放的首次操作说明(按用户只弹一次)。 */
showVr360Guide?: boolean
onDismissVr360Guide?: () => void
waiting?: boolean
waitingMessage?: string
}
@@ -255,6 +265,8 @@ export function PlayerVideoStage({
onToggleVr360,
onVr360ProfileChange,
onVr360Error,
showVr360Guide = false,
onDismissVr360Guide,
waiting = false,
waitingMessage = '',
}: PlayerVideoStageProps) {
@@ -262,8 +274,18 @@ export function PlayerVideoStage({
const [videoRatio, setVideoRatio] = useState<number | null>(null)
const [stageRect, setStageRect] = useState<{ width: number; height: number } | null>(null)
const [controlsVisible, setControlsVisible] = useState(true)
// 鼠标是否停在 VR 工具条/设置面板上:停住时控制栏不自动隐藏,否则设置面板会在点击前消失。
const [vrUiHovered, setVrUiHovered] = useState(false)
// VR 下「连续点击唤出控制栏」已累计的次数(0 表示没在计数)。
const [vrTapCount, setVrTapCount] = useState(0)
const vrTapCountRef = useRef(0)
const vrTapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
const vrActive = Boolean(vr360)
// VR 渲染器是否已经画出第一帧(在此之前给出「正在启动」提示,避免只看到黑屏)。
const [vrReady, setVrReady] = useState(false)
// 只按「媒体 ID」记录:切换投影方式/画幅布局不会重建画布,也就不能清掉这个
// 状态——渲染器只在挂载后上报一次就绪,清掉之后提示会一直停在「正在启动」。
const [vrReadyMediaId, setVrReadyMediaId] = useState<string | null>(null)
const vrReady = Boolean(media && vrReadyMediaId === media.id)
const revealControlsOnlyRef = useRef(false)
// 当前展示的字幕文本(由自定义字幕层渲染,100% 透明无黑框)
const [activeCues, setActiveCues] = useState<SubtitleCue[]>([])
@@ -286,11 +308,6 @@ export function PlayerVideoStage({
setAssFallbackPath(null)
}, [media?.id, activeSubtitleTrack?.path, subs])
// 切换媒体或 VR 配置后重新等待渲染器的第一帧。
useEffect(() => {
setVrReady(false)
}, [media?.id, vr360?.projection, vr360?.stereo])
useEffect(() => {
const selectedTrack = subs[subtitleIndex]
let cancelled = false
@@ -411,10 +428,23 @@ export function PlayerVideoStage({
else video.pause()
}
const handleStagePointerDown = (event: PointerEvent<HTMLDivElement>) => {
revealControlsOnlyRef.current = event.pointerType === 'touch' && !controlsVisible
// VR 模式下单击不再负责唤出控制栏(改成连续 3 次点击),所以这里不预置开关。
revealControlsOnlyRef.current = !vrActive && event.pointerType === 'touch' && !controlsVisible
}
const resetVrTapCount = useCallback(() => {
vrTapCountRef.current = 0
setVrTapCount(0)
if (vrTapTimerRef.current) {
clearTimeout(vrTapTimerRef.current)
vrTapTimerRef.current = null
}
}, [])
// 舞台任意位置的「激活」(轻触/单击):移动端控制栏隐藏时首次轻触只唤出
// 控制栏,控制栏已显示时再次轻触才切换播放/暂停。
// VR 模式下单击不切换播放,也不唤出控制栏:单击太容易误触,必须连续点击
// VR_TAP_COUNT 次才会显示控制栏;控制栏已显示时单击即收起。
const handleSurfaceActivate = () => {
if (revealControlsOnlyRef.current) {
revealControlsOnlyRef.current = false
@@ -422,8 +452,60 @@ export function PlayerVideoStage({
return
}
revealControlsOnlyRef.current = false
if (vrActive) {
if (controlsVisible) {
resetVrTapCount()
setControlsVisible(false)
return
}
const next = vrTapCountRef.current + 1
vrTapCountRef.current = next
setVrTapCount(next)
if (vrTapTimerRef.current) {
clearTimeout(vrTapTimerRef.current)
vrTapTimerRef.current = null
}
if (next >= VR_TAP_COUNT) {
resetVrTapCount()
setControlsVisible(true)
return
}
// 相邻两次点击间隔超过 VR_TAP_GAP_MS 就重新计数,避免把零散点击累加起来。
vrTapTimerRef.current = setTimeout(() => {
vrTapTimerRef.current = null
vrTapCountRef.current = 0
setVrTapCount(0)
}, VR_TAP_GAP_MS)
return
}
togglePlay()
}
// 进入 VR 全景播放时先亮一次控制栏与 VR 工具条,让用户知道入口在哪;
// 之后完全由自动隐藏和「连点画面」控制。退出 VR 时要清掉 VR 浮层的悬停状态,
// 否则控制栏会以为还有浮层被悬停而一直不隐藏。
useEffect(() => {
resetVrTapCount()
if (vrActive) {
setControlsVisible(true)
return
}
setVrUiHovered(false)
}, [vrActive, resetVrTapCount])
useEffect(
() => () => {
if (vrTapTimerRef.current) clearTimeout(vrTapTimerRef.current)
},
[],
)
// 首次操作说明只出现一次:读完了点「知道了」会立即落库;放着不管也会在
// VR_GUIDE_AUTO_DISMISS_MS 之后自动收起并同样记录为已看过,避免每次进 VR 都弹。
const vrGuideVisible = vrActive && vrReady && showVr360Guide
useEffect(() => {
if (!vrGuideVisible) return
const timer = setTimeout(() => onDismissVr360Guide?.(), VR_GUIDE_AUTO_DISMISS_MS)
return () => clearTimeout(timer)
}, [vrGuideVisible, onDismissVr360Guide])
const toggleFullscreen = () => {
const stage = stageRef.current
if (!stage) return
@@ -639,9 +721,10 @@ export function PlayerVideoStage({
profile={vr360}
uiVisible={controlsVisible}
onSurfaceTap={handleSurfaceActivate}
onReady={() => setVrReady(true)}
onReady={() => setVrReadyMediaId(media.id)}
onError={(message) => onVr360Error?.(message)}
onProfileChange={onVr360ProfileChange}
onUiHoldChange={setVrUiHovered}
/>
) : null}
<DanmakuStage
@@ -706,6 +789,7 @@ export function PlayerVideoStage({
onPlaybackRateCommit={onPlayerPlaybackRateCommit}
uiVisible={controlsVisible}
onUiVisibleChange={setControlsVisible}
uiHold={vrUiHovered}
subs={subs}
subtitleIndex={subtitleIndex}
onSelectSubtitle={onSelectSubtitle}
@@ -754,6 +838,53 @@ export function PlayerVideoStage({
</div>
</div>
) : null}
{/* VR 首次操作说明:按用户只弹一次。刻意不铺全屏遮罩,用户可以一边看说明
一边拖动画面试操作。 */}
{vrGuideVisible ? (
<div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center px-4">
<div className="pointer-events-auto w-[min(92vw,400px)] rounded-2xl border border-white/15 bg-black/85 px-5 py-4 text-white shadow-2xl backdrop-blur">
<p className="flex items-center gap-2 text-sm font-semibold">
<Rotate3d size={16} className="text-rose-400" />
VR 全景播放
</p>
<ul className="mt-3 space-y-2 text-xs leading-relaxed text-white/80">
<li className="flex items-start gap-2">
<Hand size={14} className="mt-0.5 shrink-0 text-white/45" />
按住拖动画面:转动视角
</li>
<li className="flex items-start gap-2">
<ZoomIn size={14} className="mt-0.5 shrink-0 text-white/45" />
滚轮 / 双指捏合:缩放视野
</li>
<li className="flex items-start gap-2">
<MousePointerClick size={14} className="mt-0.5 shrink-0 text-white/45" />
连续点击画面 {VR_TAP_COUNT} 次:显示控制栏(进度条、音量、画质、倍速、VR 设置)
</li>
<li className="flex items-start gap-2">
<Settings2 size={14} className="mt-0.5 shrink-0 text-white/45" />
控制栏显示时单击画面即可收起
</li>
<li className="flex items-start gap-2">
<Smartphone size={14} className="mt-0.5 shrink-0 text-white/45" />
手机上点顶部「陀螺仪」:转动设备就能转动视角
</li>
</ul>
<button
type="button"
onClick={onDismissVr360Guide}
className="mt-4 w-full rounded-xl bg-rose-500 px-4 py-2 text-xs font-medium text-white transition hover:bg-rose-600"
>
知道了,不再提示
</button>
</div>
</div>
) : null}
{/* 连点计数反馈:没有反馈时用户连点两次会觉得没反应。 */}
{vrActive && !vrGuideVisible && !controlsVisible && vrTapCount > 0 ? (
<div className="pointer-events-none absolute bottom-24 left-1/2 z-30 -translate-x-1/2 rounded-full border border-white/15 bg-black/75 px-4 py-1.5 text-xs text-white/90 shadow-xl backdrop-blur">
再连点 {VR_TAP_COUNT - vrTapCount} 次显示控制栏
</div>
) : null}
{playerError ? (
<div className="absolute bottom-20 left-1/2 w-[min(92vw,720px)] -translate-x-1/2 rounded-2xl border border-white/15 bg-black/75 px-5 py-4 text-sm text-white shadow-2xl backdrop-blur">
{playerError}
+17
View File
@@ -78,6 +78,23 @@ check('VR180 的 1:2 画幅为上下并排', vr180Ou.profile.stereo === 'ou')
const topBottom = detectVr360Profile({ path: '/media/vr/vr360-top-bottom.mp4' })
check('top-bottom 关键词为上下并排', topBottom.profile.stereo === 'ou')
// 回归:真实媒体库里出现过的误判(单词里含 vr、分辨率写法含 360)。
const valvrave = detectVr360Profile({
title: '革命机Valvrave',
path: '/media/anime/2013/[革命机] Valvrave the Liberator (2013)/01.mkv',
})
check('单词里的 vr 不误判(Valvrave)', !valvrave.confident)
check('误判时仍给出可用的默认配置', profileOf(valvrave.profile) === 'equirect360/mono')
const resolution360p = detectVr360Profile({ path: '/media/movie/movie-360p.mp4', width: 640, height: 360 })
check('360p 分辨率写法不误判', !resolution360p.confident)
const titleWithVrWord = detectVr360Profile({ title: '某动画 VR 特别篇', path: '/media/anime/01.mkv' })
check('标题里的独立 VR 词元可识别', titleWithVrWord.confident)
const ipvr = detectVr360Profile({ path: '/media/云下载/ipvr00192pl/ipvr00192.part2.mp4' })
check('编号形态 ipvr00192 可识别', ipvr.confident && ipvr.profile.projection === 'equirect180')
// ---------- 立体裁切与偏好归一化 ----------
check('单眼不裁切', closeAll(vr360FrameUv('mono').scale, [1, 1]))
+13 -5
View File
@@ -93,16 +93,22 @@ export type Vr360Detection = {
}
// 关键词分两类:明确的关键词按子串匹配("vr360" 里也含 "360"),
// 容易误伤的两字母缩写按独立词元匹配(避免 "1ou" / "sivr" 之类误判)。
const PANORAMA_SUBSTRINGS = ['360', 'equirect', 'insta360', 'pano', 'vuze', 'theta', '全景']
// 容易误伤的两字母缩写按作品编号形态匹配。
const PANORAMA_SUBSTRINGS = ['equirect', 'insta360', 'pano', 'vuze', 'theta', '全景']
const FISHEYE_SUBSTRINGS = ['fisheye', '鱼眼']
const VR180_SUBSTRINGS = ['vr180', '180vr', '180°', '180度', '半景']
const SBS_SUBSTRINGS = ['side-by-side', 'sidebyside', 'side_by_side', '左右']
const OU_SUBSTRINGS = ['over-under', 'top-bottom', 'topbottom', '上下']
const VR_TOKENS = ['vr']
const SBS_TOKENS = ['sbs', 'hsbs', 'lr']
const OU_TOKENS = ['ou', 'tb', 'vou', 'tou']
// 「VR」必须落在作品编号形态上,不能只是单词里的字母组合:
// vr180 / vr00192(后面跟数字)、sivr-270 / kmvr.mkv(跟在字母后并以非字母数字收尾)。
// 这样 "Valvrave"、"VRoid" 这类单词不会被误判成 VR 素材。
const VR_NAME_PATTERN = /vr[0-9]|[a-z]vr(?![a-z0-9])/
// 「360」需要排除 "360p" 之类的分辨率写法和 "1360" 之类的数字片段。
const PANORAMA_360_PATTERN = /(?<![0-9])360(?![0-9p])/
function detectText(input: Vr360DetectInput): string {
return [input.path, input.relativePath, input.originalName, input.title]
.filter((value): value is string => Boolean(value))
@@ -152,8 +158,10 @@ export function detectVr360Profile(input: Vr360DetectInput): Vr360Detection {
const fisheye = hasSubstring(text, FISHEYE_SUBSTRINGS)
const vr180 = hasSubstring(text, VR180_SUBSTRINGS)
const panorama = hasSubstring(text, PANORAMA_SUBSTRINGS)
const vrToken = hasToken(tokens, VR_TOKENS) || nameText.includes('vr')
const panorama =
hasSubstring(text, PANORAMA_SUBSTRINGS) || PANORAMA_360_PATTERN.test(text)
// 标题里只认独立的 "vr" 词元;文件名/路径里允许作品编号形态。
const vrToken = tokens.has('vr') || VR_NAME_PATTERN.test(nameText)
const confident = fisheye || vr180 || panorama || vrToken
let projection: Vr360Projection = DEFAULT_VR360_PROFILE.projection