@orderg-x/dsh-video-preview 0.5.3 → 0.5.5

package/README.md

@@ -38,7 +38,7 @@
 
 装完**重启 DSH**（客户端代码在 DSH 启动时打包，不重启看不到播放器）。DSH「插件」页里显示为「视频播放」。
 
-**更新**：在「插件」页把它卸载，再按上面添加一次。新版发布后大约一天按包名才装得到（DSH 装插件用的 pnpm 默认不装刚发布的版本），急的话填发布包地址。
+**更新**：DSH 0.2.2 起，在「插件」页点开它，点「更新到 …」；更老的 DSH 先卸载，再按上面添加一次。新版发布后大约一天才装得到（DSH 装插件用的 pnpm 默认不装刚发布的版本）；急的话卸载后填发布包地址，不过这样装的以后不能点更新。
 
 > **从 0.3.x 升级**：0.4.0 起包名改成 `@orderg-x/dsh-video-preview`（npm 上的 `dsh-video-preview` 是别人的包）。装上新版后，到「插件」页把旧的「dsh-video-preview」移除，再重启 DSH。旧版还在时新版不会启动，旧版照常能用；以前对话里的视频链接都还能播。
 

package/lib/client.js

@@ -191,6 +191,46 @@ window.__ModuleLoader__.load({
       try { return new URL(url, location.href).searchParams.get('p') || '' } catch (_) { return '' }
     }
 
+    // DSH 桌面版的页面在 dsh-app:// 下，媒体请求经它转发；Chromium 认定这种非 http 的来源不能跳转，
+    // 进度条一拖就弹回去。桌面版下先问服务端要一个直连本机的地址，拿不到就照旧走转发。
+    const VIA_SHELL = (() => { try { return !/^https?:$/.test(new URL(location.href).protocol) } catch (_) { return false } })()
+    const directs = new Map()
+
+    function directUrl(url) {
+      const p = pathOfUrl(url)
+      if (!VIA_SHELL || !p || !/\/dsh-video-preview\/(media|preview)\?/.test(url)) return Promise.resolve('')
+      if (!directs.has(p)) {
+        directs.set(p, fetch('/dsh-video-preview/direct?p=' + encodeURIComponent(p), { credentials: 'same-origin', cache: 'no-store' })
+          .then((r) => (r.ok ? r.json() : null))
+          .then((j) => (j && typeof j.src === 'string' ? j.src : ''))
+          .catch(() => ''))
+      }
+      return directs.get(p)
+    }
+
+    /**
+     * 播放器的 src：桌面版换成直连地址，拿到之前先不给 src（免得先按转发地址加载一遍）。
+     * 返回 [src, fallback]：直连地址出错时调 fallback() 退回原地址，退过了就返回 false。
+     */
+    function usePlayable(url) {
+      const [s, setS] = react.useState({ url, src: VIA_SHELL ? '' : url, direct: false })
+      react.useEffect(() => {
+        if (!VIA_SHELL) return
+        let alive = true
+        setS({ url, src: '', direct: false })
+        directUrl(url).then((d) => { if (alive) setS({ url, src: d || url, direct: !!d }) })
+        return () => { alive = false }
+      }, [url])
+      const src = s.url === url ? s.src : (VIA_SHELL ? '' : url)
+      const fallback = () => {
+        if (s.url !== url || !s.direct) return false
+        directs.delete(pathOfUrl(url))
+        setS({ url, src: url, direct: false })
+        return true
+      }
+      return [src, fallback]
+    }
+
     /** shell 单引号：文件名里的 $(...)、反引号、双引号都原样当字面，单引号写成 '\'' */
     function shq(s) {
       return "'" + String(s).replace(/'/g, "'\\''") + "'"
@@ -262,6 +302,7 @@ window.__ModuleLoader__.load({
       const ref = react.useRef(null)
       const [reason, onError, setReason] = useMediaError(media.url)
       const meta = useProbe(media.url, setReason)
+      const [src, fallback] = usePlayable(media.url)
       const [state, setState] = react.useState({ active: false, previewing: false, duration: 0, at: 0 })
       const set = (patch) => setState((s) => ({ ...s, ...patch }))
       if (reason) return h(ErrorCard, { reason, media, t })
@@ -310,7 +351,7 @@ window.__ModuleLoader__.load({
           ref,
           className: 'dvp-media',
           // #t=0.1：没开播时也画出第一帧当封面，不是一块黑
-          src: media.url + '#t=0.1',
+          src: src ? src + '#t=0.1' : undefined,
           controls: state.active,
           autoPlay: !!media.autoplay,
           loop: !!media.loop,
@@ -320,7 +361,7 @@ window.__ModuleLoader__.load({
           onDurationChange: (e) => set({ duration: e.currentTarget.duration || 0 }),
           onTimeUpdate: (e) => { if (state.previewing) set({ at: e.currentTarget.currentTime || 0 }) },
           onPlay: (e) => { if (!e.currentTarget.muted) { solo(e.currentTarget); if (!state.active) set({ active: true, previewing: false }) } },
-          onError,
+          onError: () => { if (!fallback()) onError() },
         }),
         h('span', { className: 'dvp-play' }, icon(PLAY, 18)),
         h('div', { className: 'dvp-top' },
@@ -341,6 +382,7 @@ window.__ModuleLoader__.load({
       const trackRef = react.useRef(null)
       const [reason, onError, setReason] = useMediaError(media.url)
       const meta = useProbe(media.url, setReason)
+      const [src, fallback] = usePlayable(media.url)
       const [state, setState] = react.useState({ playing: false, duration: 0, at: 0, drag: false })
       const set = (patch) => setState((s) => ({ ...s, ...patch }))
       if (reason) return h(ErrorCard, { reason, media, t })
@@ -370,7 +412,7 @@ window.__ModuleLoader__.load({
         h('audio', {
           ref,
           className: 'dvp-media',
-          src: media.url,
+          src: src || undefined,
           preload: 'metadata',
           autoPlay: !!media.autoplay,
           loop: !!media.loop,
@@ -380,7 +422,7 @@ window.__ModuleLoader__.load({
           onPlay: (e) => { solo(e.currentTarget); set({ playing: true }) },
           onPause: () => set({ playing: false }),
           onEnded: () => set({ playing: false, at: 0 }),
-          onError,
+          onError: () => { if (!fallback()) onError() },
         }),
         h('button', {
           className: 'dvp-btn', type: 'button', onClick: toggle,
@@ -566,6 +608,8 @@ window.__ModuleLoader__.load({
       const p = hostPath || (isAbsPath(raw) ? raw : '')
       const src = p ? '/dsh-video-preview/preview?p=' + encodeURIComponent(p) : ''
       const [reason, onError] = useMediaError(src)
+      const [playSrc, fallback] = usePlayable(src)
+      const onMediaError = () => { if (!fallback()) onError() }
       if (!p) {
         // 相对路径还在等宿主解析 / 宿主说文件不在 / 压根没有路径
         const status = res ? res.status : ''
@@ -579,9 +623,9 @@ window.__ModuleLoader__.load({
       }
       const player = audio
         ? h('div', { style: { flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', padding: '0 16px' } },
-            h('audio', { src, controls: true, preload: 'metadata', onError, className: 'dvp-media', style: { width: '100%' } }))
+            h('audio', { src: playSrc || undefined, controls: true, preload: 'metadata', onError: onMediaError, className: 'dvp-media', style: { width: '100%' } }))
         : h('video', {
-            src, controls: true, playsInline: true, preload: 'metadata', onError, className: 'dvp-media',
+            src: playSrc || undefined, controls: true, playsInline: true, preload: 'metadata', onError: onMediaError, className: 'dvp-media',
             onPlay: (e) => solo(e.currentTarget),
             style: { flex: 1, width: '100%', minHeight: 0, objectFit: 'contain', background: '#000' },
           })

package/lib/index.js

@@ -8,6 +8,7 @@
  *           照官方 present 工具的机制 append deliverables/presented 事件
  *   路由    /dsh-video-preview/media   签名 token 鉴权，HTTP Range 流式（能拖进度条）
  *           /dsh-video-preview/preview 宿主登录态鉴权（DSH 自己的 connection 服务验 cookie），供侧边栏/turnTail 用
+ *           /dsh-video-preview/direct  桌面版专用：登录后换一个直连本机的短期地址（见 direct 处理函数）
  *   自动    这一轮新生成的媒体（录屏、转码、TTS…），模型不调工具也自动呈现（见 auto-present.js）
  *   客户端  turnTail 槽 → 播放器渲染在最终输出正下方（Claude/Codex 同款位置）
  *           documentPreviews 渲染器 → 侧边栏预览面板变播放器
@@ -18,7 +19,8 @@
  * 把门（webServer 本身不鉴权，浏览器里任何网页都摸得到 127.0.0.1）：
  *   - 两条路由都只给媒体文件（按扩展名，软链接按真实文件算），别的文件一律不给
  *   - Host 必须是本机名或 DSH 自己的地址（防 DNS 重绑定）；跨站请求、Origin 不是自己的都拒
- *   - preview 没有 token，靠 DSH 的登录 cookie；拿不到 connection 服务时只收本机连接
+ *     （direct 换来的直连地址例外：桌面版的请求一律跨站，只查 Host，靠登录后才拿得到、七天过期的 token）
+ *   - preview、direct 没有 token，靠 DSH 的登录 cookie；拿不到 connection 服务时只收本机连接
  */
 
 import fs from 'node:fs'
@@ -56,6 +58,9 @@ export function oldCopyLoaded(ctx) {
 
 const ROUTE = '/dsh-video-preview/media'
 const PREVIEW_ROUTE = '/dsh-video-preview/preview'
+const DIRECT_ROUTE = '/dsh-video-preview/direct'
+/** 直连地址的有效期（秒）：只活在打开着的页面里，不写进会话历史 */
+const DIRECT_TTL = 7 * 24 * 3600
 
 const LOOPBACK = new Set(['127.0.0.1', '::1', '::ffff:127.0.0.1'])
 const LOOPBACK_HOST = /^(127\.0\.0\.1|localhost|\[::1\])(:\d+)?$/i
@@ -86,9 +91,25 @@ function tokenFor(file) {
 }
 
 function tokenOk(file, t) {
-  const want = Buffer.from(tokenFor(file))
-  const got = Buffer.from(String(t || ''))
-  return got.length === want.length && crypto.timingSafeEqual(got, want)
+  return sameToken(tokenFor(file), t)
+}
+
+function sameToken(want, got) {
+  const a = Buffer.from(want)
+  const b = Buffer.from(String(got || ''))
+  return a.length === b.length && crypto.timingSafeEqual(a, b)
+}
+
+/** 直连 token：和到期时间绑在一起，跟会话历史里的 t 不是一回事 */
+function directTokenFor(file, exp) {
+  return crypto.createHmac('sha256', SECRET).update(`direct\n${exp}\n${file}`).digest('hex').slice(0, 32)
+}
+
+function directOk(file, d, e) {
+  const exp = Number(e)
+  const now = Math.floor(Date.now() / 1000)
+  if (!Number.isInteger(exp) || exp < now || exp > now + DIRECT_TTL + 60) return false
+  return sameToken(directTokenFor(file, exp), d)
 }
 
 // DSH 的播放器是 Chromium 内核，这些能直接播（mkv / 3gp 要看里面的编码，播不了前端会说清楚）
@@ -152,10 +173,16 @@ function ownHost(ctx) {
   try { return new URL(ctx.webServer.getOrigin()).host } catch { return '' }
 }
 
+/** Host 必须是本机名或 DSH 自己的地址（防 DNS 重绑定） */
+function hostOk(req, own) {
+  const host = String(req.headers.host || '')
+  return LOOPBACK_HOST.test(host) || !!(own && host === own)
+}
+
 /** Host / Sec-Fetch-Site / Origin 三道，照 DSH 自家路由的规矩 */
 function fenceOk(req, own) {
   const host = String(req.headers.host || '')
-  if (!LOOPBACK_HOST.test(host) && !(own && host === own)) return false
+  if (!hostOk(req, own)) return false
   if (req.headers['sec-fetch-site'] === 'cross-site') return false
   const origin = req.headers.origin
   if (origin === undefined) return true
@@ -214,32 +241,67 @@ async function mediaFile(file, res) {
 // ── 两条路由 ────────────────────────────────────────────────────────────────
 
 function makeHandlers(ctx) {
-  /** 带签名的地址：token 对得上才给（工具输出里的链接、工具块里的小播放器走这条） */
+  /**
+   * 带签名的地址：token 对得上才给（工具输出里的链接、工具块里的小播放器走这条）。
+   * d + e 是 direct 换来的直连地址：桌面版页面在 dsh-app:// 下，这种请求一律是跨站，
+   * 所以只查 Host 不查跨站；token 只有登录过的页面拿得到，七天就过期。
+   */
   async function media(req, res) {
     const url = new URL(req.url, 'http://127.0.0.1')
     const file = url.searchParams.get('p') || ''
-    if (!fenceOk(req, ownHost(ctx)) || !tokenOk(file, url.searchParams.get('t'))) return reply(res, 403, 'forbidden')
+    const d = url.searchParams.get('d')
+    const ok = d === null
+      ? fenceOk(req, ownHost(ctx)) && tokenOk(file, url.searchParams.get('t'))
+      : hostOk(req, ownHost(ctx)) && directOk(file, d, url.searchParams.get('e'))
+    if (!ok) return reply(res, 403, 'forbidden')
     const f = await mediaFile(file, res)
     if (f) stream(req, res, f)
   }
 
-  /** 没 token 的地址（turnTail、侧边栏只知道路径）：要 DSH 的登录态 */
-  async function preview(req, res) {
-    const url = new URL(req.url, 'http://127.0.0.1')
-    const file = url.searchParams.get('p') || ''
+  /** 要 DSH 的登录态；拿不到 connection 服务时只收本机、同站的连接。不过关就回好错误，返回 false */
+  function signedIn(req, res) {
     const conn = connectionOf(ctx)
     if (conn) {
       const rejected = conn.requestRejection(req)
-      if (rejected) return reply(res, rejected, rejected === 401 ? 'unauthorized' : 'forbidden')
+      if (rejected) { reply(res, rejected, rejected === 401 ? 'unauthorized' : 'forbidden'); return false }
     } else if (!LOOPBACK.has(req.socket.remoteAddress) || !fenceOk(req, ownHost(ctx))) {
-      return reply(res, 403, 'forbidden')
+      reply(res, 403, 'forbidden')
+      return false
     }
+    return true
+  }
+
+  /** 没 token 的地址（turnTail、侧边栏只知道路径）：要 DSH 的登录态 */
+  async function preview(req, res) {
+    const url = new URL(req.url, 'http://127.0.0.1')
+    const file = url.searchParams.get('p') || ''
+    if (!signedIn(req, res)) return
     const f = await mediaFile(file, res)
     if (f) stream(req, res, f)
   }
 
+  /**
+   * 桌面版专用：给一个直连本机的地址。
+   * 桌面版的页面在 dsh-app:// 下，媒体请求经它转发后，Chromium 认定这种非 http 的来源不能跳转
+   * （seekable 只有 0），进度条一拖就弹回去。直接走 http://127.0.0.1 就正常。
+   * 要登录态（和 preview 一样），只给媒体文件；宿主不在本机地址上就不给，前端照旧走转发。
+   */
+  async function direct(req, res) {
+    const url = new URL(req.url, 'http://127.0.0.1')
+    const file = url.searchParams.get('p') || ''
+    if (!signedIn(req, res)) return
+    if (!file || !path.isAbsolute(file) || !kindOf(file)) return reply(res, 403, 'forbidden')
+    let origin = ''
+    try { origin = new URL(ctx.webServer.getOrigin()).origin } catch { /* 还没开始监听 */ }
+    if (!/^http:\/\/(127\.0\.0\.1|localhost|\[::1\])(:\d+)?$/i.test(origin)) return reply(res, 404, 'no direct origin')
+    const exp = Math.floor(Date.now() / 1000) + DIRECT_TTL
+    const src = `${origin}${ROUTE}?d=${directTokenFor(file, exp)}&e=${exp}&p=${encodeURIComponent(file)}`
+    res.writeHead(200, { ...MARK, 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' })
+    res.end(JSON.stringify({ src }))
+  }
+
   // 宿主会 await 处理函数、接住抛出的错（读盘的错 mediaFile 自己已经接住）
-  return { media, preview }
+  return { media, preview, direct }
 }
 
 /** 只认单段 Range；格式不对或多段就当没带（回整个文件），起点越界才 416 */
@@ -331,6 +393,11 @@ export function apply(ctx) {
     path: PREVIEW_ROUTE,
     handler: handlers.preview,
   }), 'dsh-video-preview: preview route')
+  ctx.effect(() => ctx.webServer.register({
+    kind: 'exact',
+    path: DIRECT_ROUTE,
+    handler: handlers.direct,
+  }), 'dsh-video-preview: direct route')
 
   const tool = defineTool({
     name: 'play_video',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderg-x/dsh-video-preview",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1 test/*.mjs"