优化网页播放跳转

web/src/pages/PlayerPage.tsx

@@ -36,7 +36,8 @@ import {
   type SubtitleStylePreset,
 } from '../utils/subtitleDisplay'
 import { pickPlayerMode, needsTranscodeForBrowser, isDirectStreamMedia, isStrmMedia, type PlayerMode } from './playerPageModel'
-import { classifyDirectPlayError } from './directPlayError'
+import { classifyDirectPlayError, DIRECT_SEEK_GRACE_MS } from './directPlayError'
+import { canSeekDirectNow, DIRECT_SEEK_WAIT_MS } from './directPlaySeek'
 import { apiErrorMessage } from './StrmManagePage'
 import { PlayerTopBar } from './PlayerTopBar'
 import { PlayerVideoStage } from './PlayerVideoStage'
@@ -106,6 +107,13 @@ export function PlayerPage() {
   const progressSessionRef = useRef<PlaybackProgressSession | null>(null)
   const directRetryRef = useRef(false)
   const retryingDirectRef = useRef(false)
+  // 程序化续播 seek 后的宽限截止时间；期内直连误报不升到 HLS。
+  const directSeekGraceUntilRef = useRef(0)
+  // STRM 直连跳转目标；seekable 未覆盖时会等到可跳再写 currentTime。
+  const pendingDirectSeekRef = useRef<number | null>(null)
+  const directSeekWaitCleanupRef = useRef<(() => void) | null>(null)
+  // 切集时清掉旧 ?mode= 的同一轮渲染里，先挡住 modeParam effect 把 hls 写回来。
+  const ignoreModeParamRef = useRef(false)
   const fallbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const [media, setMedia] = useState<Media | null>(null)
@@ -485,6 +493,18 @@ export function PlayerPage() {
     setDanmakuSearching(true)
     directRetryRef.current = false
     retryingDirectRef.current = false
+    directSeekGraceUntilRef.current = 0
+    pendingDirectSeekRef.current = null
+    directSeekWaitCleanupRef.current?.()
+    directSeekWaitCleanupRef.current = null
+    // 新片子清掉上一部失败回退留下的 ?mode=hls，避免「一直 HLS」。
+    ignoreModeParamRef.current = true
+    setMode('direct')
+    const nextParams = new URLSearchParams(window.location.search)
+    if (nextParams.has('mode')) {
+      nextParams.delete('mode')
+      setParams(nextParams, { replace: true })
+    }
     if (fallbackTimerRef.current) {
       clearTimeout(fallbackTimerRef.current)
       fallbackTimerRef.current = null
@@ -495,7 +515,7 @@ export function PlayerPage() {
         fallbackTimerRef.current = null
       }
     }
-  }, [id])
+  }, [id, setParams])
 
   // 依赖收敛为 mode 参数的字符串值：避免 params 对象引用每次变化都重复拉取元数据
   const modeParam = params.get('mode') as PlayerMode | null
@@ -517,6 +537,143 @@ export function PlayerPage() {
     }
   }, [])
 
+  const clearDirectSeekWait = useCallback(() => {
+    directSeekWaitCleanupRef.current?.()
+    directSeekWaitCleanupRef.current = null
+  }, [])
+
+  /**
+   * STRM/115 直连跳转：等 seekable 覆盖目标再写 currentTime，避免被钳回 0；
+   * 同时打开误报宽限期，防止 seek 触发 video.load() 从头播。
+   */
+  const seekStrmDirectTo = useCallback(
+    (absoluteSec: number, options?: { onSettled?: () => void }) => {
+      const video = ref.current
+      if (!video) return false
+      const target = Math.max(0, absoluteSec)
+      pendingDirectSeekRef.current = target
+      directSeekGraceUntilRef.current = Date.now() + DIRECT_SEEK_GRACE_MS
+      directRetryRef.current = false
+      clearFallbackTimer()
+      clearDirectSeekWait()
+
+      let pollTimer: ReturnType<typeof setInterval> | null = null
+      let finishTimer: ReturnType<typeof setTimeout> | null = null
+      let forced = false
+      let forceAttempts = 0
+      let applied = false
+      let toastShown = false
+      const startedAt = Date.now()
+
+      const cleanup = () => {
+        video.removeEventListener('progress', tick)
+        video.removeEventListener('durationchange', tick)
+        video.removeEventListener('loadedmetadata', tick)
+        video.removeEventListener('seeked', onSeeked)
+        if (pollTimer) {
+          clearInterval(pollTimer)
+          pollTimer = null
+        }
+        if (finishTimer) {
+          clearTimeout(finishTimer)
+          finishTimer = null
+        }
+        if (directSeekWaitCleanupRef.current === cleanup) {
+          directSeekWaitCleanupRef.current = null
+        }
+      }
+
+      const settleIfMatched = () => {
+        const el = ref.current
+        if (!el || pendingDirectSeekRef.current === null) return false
+        const want = pendingDirectSeekRef.current
+        if (Math.abs(el.currentTime - want) <= 2.5) {
+          pendingDirectSeekRef.current = null
+          cleanup()
+          options?.onSettled?.()
+          return true
+        }
+        return false
+      }
+
+      const writeCurrentTime = (want: number) => {
+        const el = ref.current
+        if (!el) return false
+        selfSkipSeekRef.current = true
+        try {
+          el.currentTime = want
+        } catch {
+          return false
+        }
+        applied = true
+        directSeekGraceUntilRef.current = Date.now() + DIRECT_SEEK_GRACE_MS
+        return true
+      }
+
+      const onSeeked = () => {
+        if (settleIfMatched()) return
+        const el = ref.current
+        if (!el || pendingDirectSeekRef.current === null) return
+        const want = pendingDirectSeekRef.current
+        if (el.currentTime < 1.5 && want > 3) {
+          // 被钳回 0：允许在 seekable 就绪后再写一次。
+          applied = false
+          forced = false
+          directSeekGraceUntilRef.current = Date.now() + DIRECT_SEEK_GRACE_MS
+          if (canSeekDirectNow(el.seekable, want)) {
+            writeCurrentTime(want)
+          }
+        }
+      }
+
+      const tick = () => {
+        const el = ref.current
+        if (!el || pendingDirectSeekRef.current === null) {
+          cleanup()
+          return
+        }
+        const want = pendingDirectSeekRef.current
+        if (!applied && canSeekDirectNow(el.seekable, want)) {
+          writeCurrentTime(want)
+          return
+        }
+        if (!toastShown && Date.now() - startedAt > 600) {
+          toastShown = true
+          toast('正在定位播放位置…', { duration: 2200 })
+        }
+        if (!applied && !forced && Date.now() - startedAt >= DIRECT_SEEK_WAIT_MS) {
+          if (forceAttempts >= 2) {
+            pendingDirectSeekRef.current = null
+            cleanup()
+            return
+          }
+          forced = true
+          forceAttempts += 1
+          writeCurrentTime(want)
+          finishTimer = setTimeout(() => {
+            if (!settleIfMatched() && forceAttempts >= 2) {
+              pendingDirectSeekRef.current = null
+              cleanup()
+            } else if (pendingDirectSeekRef.current !== null) {
+              forced = false
+              applied = false
+            }
+          }, 2500)
+        }
+      }
+
+      video.addEventListener('progress', tick)
+      video.addEventListener('durationchange', tick)
+      video.addEventListener('loadedmetadata', tick)
+      video.addEventListener('seeked', onSeeked)
+      pollTimer = setInterval(tick, 350)
+      directSeekWaitCleanupRef.current = cleanup
+      tick()
+      return true
+    },
+    [clearDirectSeekWait, clearFallbackTimer],
+  )
+
   // Load metadata and pick a default mode.
   useEffect(() => {
     if (!id) return
@@ -526,12 +683,18 @@ export function PlayerPage() {
       .then((m) => {
         if (cancelled) return
         setMedia(m)
-        const isDirect = isDirectStreamMedia(m)
-        const auto = pickPlayerMode(m)
-        // 直连解码模式以及远程 Emby 挂载忽略 ?mode=hls。STRM 默认直连，但允许手动/失败后切 HLS。
-        setMode(directOnly || isDirect ? 'direct' : (modeParam ?? auto))
         setPlayerError('')
         setLoadError('')
+        const isDirect = isDirectStreamMedia(m)
+        const auto = pickPlayerMode(m)
+        // 直连解码 / 远程 Emby：强制直连。
+        // 不把 modeParam 放进依赖：失败回退写 ?mode=hls 时不应重拉 metadata，
+        // 也不要用滞后的 get 回调把 hls 盖回 direct。
+        if (directOnly || isDirect) {
+          setMode('direct')
+          return
+        }
+        setMode((prev) => (prev === 'hls' ? prev : auto))
       })
       .catch((err: unknown) => {
         if (cancelled) return
@@ -541,7 +704,21 @@ export function PlayerPage() {
     return () => {
       cancelled = true
     }
-  }, [id, modeParam, directOnly])
+  }, [id, directOnly])
+
+  // 仅在用户手动切换 / 回退写入 URL 后，把 ?mode= 同步回 state（切集时 id effect 已清掉旧 mode）。
+  useEffect(() => {
+    if (ignoreModeParamRef.current) {
+      ignoreModeParamRef.current = false
+      return
+    }
+    if (directOnly) {
+      setMode('direct')
+      return
+    }
+    if (modeParam !== 'direct' && modeParam !== 'hls') return
+    setMode(modeParam)
+  }, [modeParam, directOnly, id])
 
   // VR 全景素材识别：只在用户没手动改过开关时自动进入 VR 模式。
   // 识别完全基于文件名/路径关键词与画幅比例，误判时点一下 VR 按钮即可退出。
@@ -1083,32 +1260,83 @@ export function PlayerPage() {
     }
     const video = ref.current
     if (!video) return
-    let onSeeked: (() => void) | undefined
-    const applyResume = () => {
-      if (resumePosition > 0 && Math.abs(video.currentTime - resumePosition) > 2) {
-        onSeeked = () => {
-          setInitialSeekDone(true)
-          const m = Math.floor(resumePosition / 60)
-          const s = Math.floor(resumePosition % 60)
-          const timeStr = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
-          toast.success(`已恢复上次播放进度至 ${timeStr}`, { duration: 2500 })
-        }
-        video.addEventListener('seeked', onSeeked, { once: true })
-        video.currentTime = resumePosition
+
+    let cancelled = false
+    let seekStarted = false
+    let onPlaying: (() => void) | undefined
+    let onCanPlay: (() => void) | undefined
+
+    const notifyResume = () => {
+      const m = Math.floor(resumePosition / 60)
+      const s = Math.floor(resumePosition % 60)
+      const timeStr = `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+      toast.success(`已恢复上次播放进度至 ${timeStr}`, { duration: 2500 })
+    }
+
+    const performResumeSeek = () => {
+      if (cancelled || seekStarted) return
+      if (Math.abs(video.currentTime - resumePosition) <= 2) {
+        seekStarted = true
+        setInitialSeekDone(true)
         return
       }
-      setInitialSeekDone(true)
+      seekStarted = true
+      if (isStrmMedia(mediaRef.current)) {
+        seekStrmDirectTo(resumePosition, {
+          onSettled: () => {
+            if (!cancelled) {
+              setInitialSeekDone(true)
+              notifyResume()
+            }
+          },
+        })
+        // 即使定位较慢，也不要卡住「未完成续播」状态太久。
+        window.setTimeout(() => {
+          if (!cancelled) setInitialSeekDone(true)
+        }, DIRECT_SEEK_WAIT_MS + 3000)
+        return
+      }
+      directSeekGraceUntilRef.current = Date.now() + DIRECT_SEEK_GRACE_MS
+      directRetryRef.current = false
+      clearFallbackTimer()
+      const onSeeked = () => {
+        setInitialSeekDone(true)
+        notifyResume()
+      }
+      video.addEventListener('seeked', onSeeked, { once: true })
+      try {
+        video.currentTime = resumePosition
+      } catch {
+        setInitialSeekDone(true)
+      }
     }
-    if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
-      applyResume()
+
+    // STRM/云盘：等真正起播后再续播跳转，避免 302 未完成就 seek。
+    const deferForStrm = isStrmMedia(mediaRef.current)
+    if (deferForStrm) {
+      onPlaying = () => {
+        performResumeSeek()
+      }
+      if (!video.paused && video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+        performResumeSeek()
+      } else {
+        video.addEventListener('playing', onPlaying, { once: true })
+      }
+    } else if (video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
+      performResumeSeek()
     } else {
-      video.addEventListener('canplay', applyResume, { once: true })
+      onCanPlay = () => {
+        performResumeSeek()
+      }
+      video.addEventListener('canplay', onCanPlay, { once: true })
     }
+
     return () => {
-      video.removeEventListener('canplay', applyResume)
-      if (onSeeked) video.removeEventListener('seeked', onSeeked)
+      cancelled = true
+      if (onPlaying) video.removeEventListener('playing', onPlaying)
+      if (onCanPlay) video.removeEventListener('canplay', onCanPlay)
     }
-  }, [resumePosition, initialSeekDone, mode, hlsStartSec])
+  }, [resumePosition, initialSeekDone, mode, hlsStartSec, clearFallbackTimer, seekStrmDirectTo])
 
   // 使用 ref 实时同步进度计算所需的状态，避免每次 hlsStartSec 改变都触发 cleanup 并误上报旧进度
   const hlsStartSecRef = useRef(hlsStartSec)
@@ -1588,10 +1816,27 @@ export function PlayerPage() {
         video.currentTime = Math.max(0, target - hlsStartSec)
         return
       }
+      if (isStrmMedia(mediaRef.current)) {
+        seekStrmDirectTo(target)
+        return
+      }
       selfSkipSeekRef.current = true
       video.currentTime = target
     },
-    [handleSeekAbsolute, hlsSource, hlsStartSec, mode],
+    [handleSeekAbsolute, hlsSource, hlsStartSec, mode, seekStrmDirectTo],
+  )
+
+  const handlePlayerSeekAbsolute = useCallback(
+    (absoluteSec: number) => {
+      if (mode === 'hls' && hlsSource === 'local') {
+        return handleSeekAbsolute(absoluteSec)
+      }
+      if (mode === 'direct' && isStrmMedia(mediaRef.current)) {
+        return seekStrmDirectTo(absoluteSec)
+      }
+      return false
+    },
+    [handleSeekAbsolute, hlsSource, mode, seekStrmDirectTo],
   )
 
   const showSkipNotice = useCallback(
@@ -1762,6 +2007,7 @@ export function PlayerPage() {
       elementSrc: video?.src ?? '',
       expectedSrc,
       alreadyRetried: directRetryRef.current,
+      seekGraceActive: Date.now() < directSeekGraceUntilRef.current,
     })
     if (action === 'ignore') return
 
@@ -1769,8 +2015,17 @@ export function PlayerPage() {
       directRetryRef.current = true
       retryingDirectRef.current = true
       try {
-        video.load()
-        void video.play().catch(() => undefined)
+        // STRM/115 直连：load() 会清空进度从头播。软恢复即可。
+        if (isStrmMedia(mediaRef.current) || pendingDirectSeekRef.current !== null) {
+          const pending = pendingDirectSeekRef.current
+          void video.play().catch(() => undefined)
+          if (pending !== null && pending > 1) {
+            seekStrmDirectTo(pending)
+          }
+        } else {
+          video.load()
+          void video.play().catch(() => undefined)
+        }
       } finally {
         retryingDirectRef.current = false
       }
@@ -1779,6 +2034,8 @@ export function PlayerPage() {
 
     const fallbackDirectPlay = () => {
       if (modeRef.current !== 'direct') return
+      // 宽限期内又触发的迟到 fallback 定时器：直接丢掉。
+      if (Date.now() < directSeekGraceUntilRef.current) return
       const current = ref.current
       if (current && current.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) return
       if (isRemoteEmbyID(mediaRef.current?.id) || isDirectStreamMedia(mediaRef.current)) {
@@ -1813,7 +2070,9 @@ export function PlayerPage() {
     }
 
     clearFallbackTimer()
-    fallbackTimerRef.current = setTimeout(fallbackDirectPlay, 1500)
+    // STRM/115 直链冷启动比本地文件慢，给足缓冲时间再判定失败。
+    const fallbackDelayMs = isStrmMedia(mediaRef.current) ? 4000 : 1500
+    fallbackTimerRef.current = setTimeout(fallbackDirectPlay, fallbackDelayMs)
   }, [
     clearFallbackTimer,
     directOnly,
@@ -1821,6 +2080,7 @@ export function PlayerPage() {
     mediaId,
     mode,
     playbackInfo,
+    seekStrmDirectTo,
     selectedQuality,
     setPlaybackMode,
     startCloudTranscode,
@@ -1903,7 +2163,11 @@ export function PlayerPage() {
         onTogglePlaylist={isMobileTheater ? openPlaylistEntry : togglePlaylistOpen}
         knownDuration={media?.duration_sec || 0}
         streamOffset={mode === 'hls' && hlsSource === 'local' ? hlsStartSec : 0}
-        onSeekAbsolute={mode === 'hls' && hlsSource === 'local' ? handleSeekAbsolute : undefined}
+        onSeekAbsolute={
+          (mode === 'hls' && hlsSource === 'local') || (mode === 'direct' && isStrmMedia(media))
+            ? handlePlayerSeekAbsolute
+            : undefined
+        }
         qualities={qualityOptions}
         qualityLabel={qualityLabel}
         selectedQuality={selectedQuality}

web/src/pages/directPlayError.ts

@@ -3,9 +3,15 @@ export type DirectPlayErrorAction = 'ignore' | 'retry' | 'fallback'
 const MEDIA_ERR_ABORTED = 1
 const HAVE_CURRENT_DATA = 2
 
+/** 程序化续播/跳转后忽略直连误报的宽限期（毫秒）。 */
+export const DIRECT_SEEK_GRACE_MS = 12_000
+
 /**
  * Chromium 常把被中断的直连（换 src、插入 track、302 未完成就 seek）
  * 报成 error。真正不兼容应 fallback；瞬时中断应忽略或静默重试一次。
+ *
+ * seekGraceActive：程序化续播/跳转后的宽限期。115 STRM 在 302 直链上
+ * seek 时 Chromium 经常误报 decode/network error，此时绝不能升到 HLS。
  */
 export function classifyDirectPlayError(input: {
   errorCode: number | undefined | null
@@ -13,12 +19,15 @@ export function classifyDirectPlayError(input: {
   elementSrc: string
   expectedSrc: string
   alreadyRetried: boolean
+  seekGraceActive?: boolean
 }): DirectPlayErrorAction {
   const code = input.errorCode ?? 0
   if (code === MEDIA_ERR_ABORTED) return 'ignore'
   if (input.readyState >= HAVE_CURRENT_DATA) return 'ignore'
   if (!input.elementSrc) return 'ignore'
   if (input.expectedSrc && input.elementSrc !== input.expectedSrc) return 'ignore'
+  // 续播 seek 宽限期内：误报很常见，且 retry 会 video.load() 把进度清零，直接忽略。
+  if (input.seekGraceActive) return 'ignore'
   if (!input.alreadyRetried) return 'retry'
   return 'fallback'
 }

web/src/pages/directPlaySeek.test.ts

@@ -0,0 +1,52 @@
+import {
+  canSeekDirectNow,
+  seekableEndSec,
+  timeInSeekableRanges,
+} from './directPlaySeek.ts'
+
+function check(name: string, cond: boolean) {
+  if (!cond) throw new Error(`directPlaySeek: ${name}`)
+}
+
+function ranges(parts: Array<[number, number]>) {
+  return {
+    length: parts.length,
+    start: (i: number) => parts[i][0],
+    end: (i: number) => parts[i][1],
+  }
+}
+
+check('empty seekable rejects mid seek', !timeInSeekableRanges(null, 120))
+check('empty seekable end is 0', seekableEndSec(undefined) === 0)
+
+check(
+  'covered range accepts target',
+  timeInSeekableRanges(ranges([[0, 600]]), 120),
+)
+
+check(
+  'target beyond end is rejected',
+  !timeInSeekableRanges(ranges([[0, 30]]), 120),
+)
+
+check(
+  'multi-range uses any segment',
+  timeInSeekableRanges(
+    ranges([
+      [0, 10],
+      [100, 200],
+    ]),
+    150,
+  ),
+)
+
+check('seekableEndSec takes max end', seekableEndSec(ranges([[0, 10], [5, 80]])) === 80)
+
+check('canSeekDirectNow allows near-zero without seekable', canSeekDirectNow(null, 0.2))
+check('canSeekDirectNow blocks mid when not seekable', !canSeekDirectNow(null, 90))
+check(
+  'canSeekDirectNow allows mid when covered',
+  canSeekDirectNow(ranges([[0, 900]]), 90),
+)
+
+console.log('directPlaySeek.test.ts ok')

web/src/pages/directPlaySeek.ts

@@ -0,0 +1,60 @@
+/** STRM/115 直连跳转：等 seekable 覆盖目标后再写 currentTime，避免被钳回 0。 */
+
+export const DIRECT_SEEK_WAIT_MS = 10_000
+export const DIRECT_SEEK_MARGIN_SEC = 0.35
+
+type SeekableLike = {
+  length: number
+  start: (index: number) => number
+  end: (index: number) => number
+}
+
+/** 目标时间是否落在任一 seekable 区间内（末端留一点边距）。 */
+export function timeInSeekableRanges(
+  seekable: SeekableLike | null | undefined,
+  time: number,
+  margin = DIRECT_SEEK_MARGIN_SEC,
+): boolean {
+  if (!seekable || seekable.length <= 0) return false
+  if (!Number.isFinite(time) || time < 0) return false
+  for (let i = 0; i < seekable.length; i += 1) {
+    try {
+      const start = seekable.start(i)
+      const end = seekable.end(i)
+      if (!Number.isFinite(start) || !Number.isFinite(end)) continue
+      if (time + margin >= start && time <= end + margin) return true
+    } catch {
+      // TimeRanges 在部分浏览器上可能抛 InvalidStateError，跳过该段。
+    }
+  }
+  return false
+}
+
+/** seekable 已覆盖的最右端（秒）；没有可用区间时返回 0。 */
+export function seekableEndSec(seekable: SeekableLike | null | undefined): number {
+  if (!seekable || seekable.length <= 0) return 0
+  let max = 0
+  for (let i = 0; i < seekable.length; i += 1) {
+    try {
+      const end = seekable.end(i)
+      if (Number.isFinite(end) && end > max) max = end
+    } catch {
+      // ignore
+    }
+  }
+  return max
+}
+
+/**
+ * 直连是否可以立刻跳到 target。
+ * - seekable 已覆盖 → 可以
+ * - 目标接近 0 → 可以（不需要等）
+ * - 否则应等待 progress / durationchange
+ */
+export function canSeekDirectNow(
+  seekable: SeekableLike | null | undefined,
+  time: number,
+): boolean {
+  if (!Number.isFinite(time) || time <= 1) return true
+  return timeInSeekableRanges(seekable, time)
+}

web/src/pages/playerPageModel.test.ts

@@ -72,4 +72,28 @@ check(
   }) === 'fallback',
 )
 
+check(
+  'seek grace ignores decode miss without retrying',
+  classifyDirectPlayError({
+    errorCode: 4,
+    readyState: 0,
+    elementSrc: src,
+    expectedSrc: src,
+    alreadyRetried: false,
+    seekGraceActive: true,
+  }) === 'ignore',
+)
+
+check(
+  'seek grace never falls back to HLS',
+  classifyDirectPlayError({
+    errorCode: 4,
+    readyState: 0,
+    elementSrc: src,
+    expectedSrc: src,
+    alreadyRetried: true,
+    seekGraceActive: true,
+  }) === 'ignore',
+)
+
 console.log('playerPageModel.test.ts ok')