xxf_react 0.6.0 → 0.6.1

package/dist/media/components/XVideo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XVideo.d.ts","sourceRoot":"","sources":["../../../src/media/components/XVideo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAMV,SAAS,EACT,mBAAmB,EACnB,SAAS,EACZ,MAAM,OAAO,CAAA;AAOd;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IACtF;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAA;IAEX;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAE3B;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;;;;;;;;;;;;;OAkBG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC,GAAG,IAAI,CAAA;IAE1D;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAE7C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,MAAM,CAAC,EACI,GAAG,EACH,MAAM,EACN,qBAA2B,EAC3B,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EACP,OAAgB,EAChB,WAAkB,EAClB,WAAyB,EACzB,GAAG,UAAU,EAChB,EAAE,WAAW,qBAiWpC"}
+{"version":3,"file":"XVideo.d.ts","sourceRoot":"","sources":["../../../src/media/components/XVideo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAMV,SAAS,EACT,mBAAmB,EACnB,SAAS,EACZ,MAAM,OAAO,CAAA;AAOd;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IACtF;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAA;IAEX;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAE3B;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B;;;;;;;;;;;;;;;;;;OAkBG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC,GAAG,IAAI,CAAA;IAE1D;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAE7C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,MAAM,CAAC,EACI,GAAG,EACH,MAAM,EACN,qBAA2B,EAC3B,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,EACP,OAAgB,EAChB,WAAkB,EAClB,WAAyB,EACzB,GAAG,UAAU,EAChB,EAAE,WAAW,qBAgXpC"}

package/dist/media/components/XVideo.js

@@ -156,21 +156,29 @@ export function XVideo({ src, poster, posterFadeOutDuration = 300, bufferingIndi
         checkAndSetReady();
     }, [playState.canPlay, checkAndSetReady]);
     /**
-     * Effect: 播放结束或出错时显示封面
+     * Effect: 暂停、播放结束或出错时显示封面
      *
+     * 视频暂停时，重新显示封面
      * 视频播放结束时，重新显示封面，避免最后一帧可能是黑屏的问题
      * 视频播放出错时，重新显示封面，作为错误指示器的背景
      *
-     * 当视频重新播放时（ended 从 true 变为 false），封面会通过
-     * 正常的 checkAndSetReady 流程再次淡出
+     * 当视频重新播放时，封面会通过正常的 checkAndSetReady 流程再次淡出
+     *
+     * 注意：必须同时重置 firstFrameRenderedRef，否则 checkAndSetReady 会立即再次隐藏封面
      */
     useEffect(() => {
-        if ((playState.ended || playState.error) && poster) {
-            // 播放结束或出错，显示封面
+        if (poster && (playState.ended || playState.error || !playState.playing)) {
+            // 清理淡出定时器，防止正在进行的淡出继续执行
+            if (fadeOutTimerRef.current) {
+                clearTimeout(fadeOutTimerRef.current);
+                fadeOutTimerRef.current = null;
+            }
+            // 重置第一帧标记，防止 checkAndSetReady 立即隐藏封面
+            firstFrameRenderedRef.current = false;
             setShowPoster(true);
             setIsReady(false);
         }
-    }, [playState.ended, playState.error, poster]);
+    }, [playState.ended, playState.error, playState.playing, poster]);
     /**
      * Effect: 通过 currentTime 检测第一帧（回退方案）
      *
@@ -178,13 +186,15 @@ export function XVideo({ src, poster, posterFadeOutDuration = 300, bufferingIndi
      * 使用 currentTime > 0 作为第一帧渲染的近似检测
      *
      * 原理：currentTime > 0 表示视频已开始播放，此时第一帧大概率已渲染
+     *
+     * 注意：必须检查 playState.playing，否则暂停时 currentTime > 0 会立即触发封面隐藏
      */
     useEffect(() => {
-        if (!firstFrameRenderedRef.current && playState.currentTime > 0) {
+        if (!firstFrameRenderedRef.current && playState.currentTime > 0 && playState.playing) {
             firstFrameRenderedRef.current = true;
             checkAndSetReady();
         }
-    }, [playState.currentTime, checkAndSetReady]);
+    }, [playState.currentTime, playState.playing, checkAndSetReady]);
     /**
      * Effect: 第一帧检测 - 优先使用 requestVideoFrameCallback
      *
@@ -197,7 +207,9 @@ export function XVideo({ src, poster, posterFadeOutDuration = 300, bufferingIndi
      * 3. 第一帧渲染时标记 firstFrameRendered 并检查就绪状态
      * 4. cleanup 时取消回调，防止组件卸载后执行
      *
-     * 注意：cleanedUp flag 用于防止组件卸载后的状态更新（React 严格模式下的竞态条件）
+     * 注意：
+     * - cleanedUp flag 用于防止组件卸载后的状态更新（React 严格模式下的竞态条件）
+     * - 必须检查 playState.playing，否则暂停时可能错误触发
      */
     useEffect(() => {
         const video = videoRef.current;
@@ -206,6 +218,9 @@ export function XVideo({ src, poster, posterFadeOutDuration = 300, bufferingIndi
         // 如果已经检测到第一帧，无需重复检测
         if (firstFrameRenderedRef.current)
             return;
+        // 视频未播放时不注册回调
+        if (!playState.playing)
+            return;
         // 检查浏览器是否支持 requestVideoFrameCallback
         const supportsVideoFrameCallback = 'requestVideoFrameCallback' in HTMLVideoElement.prototype;
         if (supportsVideoFrameCallback) {
@@ -226,7 +241,7 @@ export function XVideo({ src, poster, posterFadeOutDuration = 300, bufferingIndi
             };
         }
         // 不支持 requestVideoFrameCallback 的浏览器由 currentTime effect 处理
-    }, [src, videoRef, checkAndSetReady]);
+    }, [src, videoRef, playState.playing, checkAndSetReady]);
     // ==================== 渲染逻辑 ====================
     /**
      * 封面元素 - 使用 useMemo 优化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xxf_react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "type": "module",
   "main": "dist/index.js",