mirror of
https://github.com/truewhile/MeBox.git
synced 2026-09-28 11:16:37 +08:00
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9c1f9a6e7e | |||
| ec7be38266 | |||
| ebf791c436 | |||
| 83c0b65a0b |
@@ -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)
|
||||
|
||||
|
||||
@@ -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"})
|
||||
|
||||
@@ -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
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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))
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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())
|
||||
}
|
||||
}
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user