pb-sxp-ui 1.20.43 → 1.20.44

package/dist/index.cjs

@@ -2224,7 +2224,7 @@ const EditorCore = React.forwardRef(({ children, resolver, isSsr, schema, enable
  * @returns isVisible 是否可见
  */
 function useAdvancedOnScreen(ref, options = {}) {
-    const { threshold = 0, delay = 0, onVisible, onHidden } = options;
+    const { threshold = 0, delay = 0, onVisible, onHidden, name = 'unknown' } = options;
     const observerRef = React.useRef(null);
     const [isVisible, setIsVisible] = React.useState(false);
     const timerRef = React.useRef(null);
@@ -2250,7 +2250,7 @@ function useAdvancedOnScreen(ref, options = {}) {
             var _a, _b;
             const isIntersecting = entry.isIntersecting;
             const intersectionRatio = entry.intersectionRatio;
-            console.log('[useAdvancedOnScreen] IntersectionObserver callback:', {
+            console.log(`[useAdvancedOnScreen ${name}] IntersectionObserver callback:`, {
                 isIntersecting,
                 threshold,
                 delay,
@@ -2262,18 +2262,18 @@ function useAdvancedOnScreen(ref, options = {}) {
             if (isIntersecting && intersectionRatio >= threshold) {
                 // 元素进入可视区域且达到阈值
                 setIsVisible(true);
-                // 如果已经在等待中，不要重复设置定时器
+                // 如果已经在等待中，清除旧的定时器，重新开始计时
                 if (isWaitingRef.current) {
-                    console.log('[useAdvancedOnScreen] 已在等待中，跳过');
-                    return;
+                    console.log(`[useAdvancedOnScreen ${name}] 已在等待中，清除旧定时器并重新计时`);
+                    clearTimer();
                 }
                 // 如果设置了延迟时间
                 if (delay > 0) {
-                    console.log(`[useAdvancedOnScreen] 设置延迟定时器: ${delay}ms`);
+                    console.log(`[useAdvancedOnScreen ${name}] 设置延迟定时器: ${delay}ms`);
                     isWaitingRef.current = true;
                     timerRef.current = setTimeout(() => {
                         var _a;
-                        console.log('[useAdvancedOnScreen] 延迟时间到，触发 onVisible');
+                        console.log(`[useAdvancedOnScreen ${name}] 延迟时间到，触发 onVisible`);
                         isWaitingRef.current = false;
                         timerRef.current = null;
                         (_a = onVisibleRef.current) === null || _a === void 0 ? void 0 : _a.call(onVisibleRef);
@@ -2281,13 +2281,13 @@ function useAdvancedOnScreen(ref, options = {}) {
                 }
                 else {
                     // 没有延迟，立即触发
-                    console.log('[useAdvancedOnScreen] 无延迟，立即触发 onVisible');
+                    console.log(`[useAdvancedOnScreen ${name}] 无延迟，立即触发 onVisible`);
                     (_a = onVisibleRef.current) === null || _a === void 0 ? void 0 : _a.call(onVisibleRef);
                 }
             }
             else if (!isIntersecting || intersectionRatio < threshold) {
                 // 元素离开可视区域或未达到阈值
-                console.log('[useAdvancedOnScreen] 元素离开可视区域或未达到阈值，清除定时器');
+                console.log(`[useAdvancedOnScreen ${name}] 元素离开可视区域或未达到阈值，清除定时器`);
                 setIsVisible(false);
                 clearTimer();
                 (_b = onHiddenRef.current) === null || _b === void 0 ? void 0 : _b.call(onHiddenRef);
@@ -19624,32 +19624,54 @@ const ProductView = ({ children, onExposure }) => {
     });
     return (React.createElement("div", { ref: productRef, style: { width: '100%' } }, children));
 };
-const PostView = ({ children, videoRef, isVideo, onExposure, onVideoAutoPlay }) => {
+const PostView = ({ children, videoRef, isVideo, onExposure, autoPlayTriggerRef, onVideoPlay, onVideoPause }) => {
     const postRef = React.useRef(null);
     // 使用高级曝光检测：2/3区域（threshold=0.67）+ 1000ms延迟
     useAdvancedOnScreen(postRef, {
         threshold: 0.67,
         delay: 1000,
         onVisible: () => {
+            console.log('[PostView onVisible] 触发，isVideo:', isVideo, 'hasVideoRef:', !!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current));
             // 每次进入2/3区域并停留1秒后都触发曝光上报
             if (onExposure) {
                 onExposure();
             }
             // 如果是视频，自动播放
             if (isVideo && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current)) {
-                videoRef.current.play().catch(err => {
+                console.log('[PostView onVisible] 准备播放视频');
+                // 标记这次播放是自动触发的
+                if (autoPlayTriggerRef) {
+                    autoPlayTriggerRef.current = true;
+                    console.log('[PostView onVisible] 已设置自动播放标记');
+                }
+                videoRef.current.play().then(() => {
+                    console.log('[PostView onVisible] 视频 play() 成功');
+                    // 触发播放回调，更新暂停图标状态
+                    if (onVideoPlay) {
+                        onVideoPlay();
+                    }
+                }).catch(err => {
                     console.warn('[PostView] Video autoplay failed:', err);
+                    // 播放失败时重置标记
+                    if (autoPlayTriggerRef) {
+                        autoPlayTriggerRef.current = false;
+                    }
                 });
-                // 触发自动播放回调（用于上报 playVideo 事件）
-                onVideoAutoPlay === null || onVideoAutoPlay === void 0 ? void 0 : onVideoAutoPlay();
             }
         },
         onHidden: () => {
+            console.log('[PostView onHidden] 触发，isVideo:', isVideo, 'hasVideoRef:', !!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current));
             // 如果是视频，离开2/3区域时自动暂停
             if (isVideo && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current)) {
+                console.log('[PostView onHidden] 暂停视频');
                 videoRef.current.pause();
+                // 触发暂停回调，更新暂停图标状态
+                if (onVideoPause) {
+                    onVideoPause();
+                }
             }
-        }
+        },
+        name: 'PostView(Hero)'
     });
     return (React.createElement("div", { ref: postRef, style: { width: '100%', height: '100%' } }, children));
 };
@@ -20015,6 +20037,11 @@ const StructurePage = (_a) => {
     const isFirstPlay = React.useRef({});
     const videoLoadTime = React.useRef({});
     const videoAutoPlayReported = React.useRef(new Set()); // 追踪哪些视频已通过自动播放上报
+    // 自动播放触发标记（用于区分自动播放和用户手动播放）
+    const heroAutoPlayTrigger = React.useRef(false);
+    const carouselAutoPlayTriggers = React.useRef({});
+    // 追踪当前正在播放的 Carousel 视频索引（用于 onHidden 回调）
+    const currentPlayingCarouselIndex = React.useRef(-1);
     // 调试日志
     console.log('[StructurePage] Props:', {
         editorMode,
@@ -20251,17 +20278,35 @@ const StructurePage = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent(Object.assign({ eventSubject: 'ctaExposure', eventDescription: 'The cta was shown to the user' }, (viewPosition && { viewPosition })), rec, productData, sectionIndex !== undefined ? sectionIndex : 0);
     }, [ctaEvent, data]);
     // 视频播放事件处理
-    const handleVideoPlay = React.useCallback((videoData, viewPosition, sectionIndex, videoRef, isAutoPlay = false) => {
-        if (!videoRef || !videoRef.duration)
+    const handleVideoPlay = React.useCallback((videoData, viewPosition, sectionIndex, videoRef) => {
+        console.log('[handleVideoPlay] 调用，viewPosition:', viewPosition, 'sectionIndex:', sectionIndex, 'hasDuration:', !!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration));
+        if (!videoRef || !videoRef.duration) {
+            console.log('[handleVideoPlay] 返回：没有 videoRef 或 duration');
             return;
+        }
         const videoId = `${videoData === null || videoData === void 0 ? void 0 : videoData.itemId}-${viewPosition}-${sectionIndex}`;
-        // 如果是自动播放调用，标记为已上报
+        // 检查是否是自动播放触发的
+        let isAutoPlay = false;
+        if (viewPosition === 'heroSection' && heroAutoPlayTrigger.current) {
+            isAutoPlay = true;
+            console.log('[handleVideoPlay] Hero Section 自动播放标记为 true');
+            heroAutoPlayTrigger.current = false; // 重置标记
+        }
+        else if (viewPosition === 'carouselSection' && sectionIndex !== undefined && carouselAutoPlayTriggers.current[sectionIndex]) {
+            isAutoPlay = true;
+            console.log('[handleVideoPlay] Carousel Section 自动播放标记为 true, index:', sectionIndex);
+            carouselAutoPlayTriggers.current[sectionIndex] = false; // 重置标记
+        }
+        console.log('[handleVideoPlay] isAutoPlay:', isAutoPlay, 'videoId:', videoId);
+        // 如果是自动播放，标记为已上报
         if (isAutoPlay) {
             videoAutoPlayReported.current.add(videoId);
+            console.log('[handleVideoPlay] 标记为已通过自动播放上报');
         }
         else {
             // 如果不是自动播放，但已经通过自动播放上报过，则跳过
             if (videoAutoPlayReported.current.has(videoId)) {
+                console.log('[handleVideoPlay] 跳过上报：已经通过自动播放上报过');
                 // 只记录播放时间，不上报
                 videoStartTime.current[videoId] = videoRef.currentTime || 0;
                 return;
@@ -20274,6 +20319,14 @@ const StructurePage = (_a) => {
         isFirstPlay.current[videoId] = false;
         const videoDuration = videoRef.duration.toFixed(2);
         const startTime = videoRef.currentTime.toFixed(2);
+        console.log('[handleVideoPlay] 准备上报 playVideo 事件:', {
+            videoId,
+            isAutoPlay,
+            playType,
+            viewPosition,
+            sectionIndex,
+            duration: videoDuration
+        });
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', sceneId: '', contentId: (videoData === null || videoData === void 0 ? void 0 : videoData.itemId) || '', contentName: (videoData === null || videoData === void 0 ? void 0 : videoData.title) || '', playType,
                 startTime,
@@ -20584,13 +20637,18 @@ const StructurePage = (_a) => {
     // 2. propMultiCTAConfig 只是样式配置，不是数据源
     // 3. 数据获取只应该在组件挂载时执行一次（除非 apiUrl/storyId 等关键参数变化）
     // Hero Section 视频自动播放
-    React.useEffect(() => {
-        var _a;
-        if (heroVideoRef.current && ((_a = data === null || data === void 0 ? void 0 : data.heroSection) === null || _a === void 0 ? void 0 : _a.url)) {
-            heroVideoRef.current.play().catch((err) => console.log('Video autoplay failed:', err));
-            setIsHeroVideoPaused(false);
-        }
-    }, [data === null || data === void 0 ? void 0 : data.heroSection]);
+    // 注意：视频的自动播放逻辑由 PostView 组件处理（进入2/3可视区域并停留1秒后播放）
+    // 移除了初始播放逻辑，避免与 PostView 冲突，确保视频加载完成后再播放
+    // useEffect(() => {
+    //   if (heroVideoRef.current && data?.heroSection?.url) {
+    //     heroAutoPlayTrigger.current = true;
+    //     heroVideoRef.current.play().catch((err) => {
+    //       console.log('Video autoplay failed:', err);
+    //       heroAutoPlayTrigger.current = false;
+    //     });
+    //     setIsHeroVideoPaused(false);
+    //   }
+    // }, [data?.heroSection]);
     // 初始化 carousel 视频暂停状态
     React.useEffect(() => {
         if (data === null || data === void 0 ? void 0 : data.carouselSection) {
@@ -20635,7 +20693,7 @@ const StructurePage = (_a) => {
     }, []);
     // Post 图片/视频曝光上报（用于 Hero Section 等非轮播的 Post）
     const postExposureReported = React.useRef(new Set());
-    const handlePostExposure = React.useCallback((postData, viewPosition, sectionIndex) => {
+    React.useCallback((postData, viewPosition, sectionIndex) => {
         var _a;
         const postId = `${postData === null || postData === void 0 ? void 0 : postData.itemId}-${viewPosition}-${sectionIndex}`;
         // 防止重复上报
@@ -20732,26 +20790,87 @@ const StructurePage = (_a) => {
     // Carousel Section 的曝光检测 ref
     const carouselSectionRef = React.useRef(null);
     const hasCarouselReported = React.useRef(false);
-    // Carousel Section 进入可视区域时上报第一张图片的浏览事件
+    // Carousel Section 进入可视区域时的回调
+    const handleCarouselVisible = React.useCallback(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || data.carouselSection.length === 0)
+            return;
+        const currentItem = data.carouselSection[carouselIndex];
+        console.log('[Carousel onVisible] 当前索引:', carouselIndex, '是否是视频:', !!(currentItem === null || currentItem === void 0 ? void 0 : currentItem.url));
+        // 只在首次进入可视区域时上报第一张图片
+        if (!hasCarouselReported.current) {
+            hasCarouselReported.current = true;
+            // 只对图片类型上报（不包括视频）
+            if (!currentItem.url) {
+                handleCarouselImageStartEvent(carouselIndex);
+            }
+        }
+        // 如果当前项是视频，自动播放
+        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.url) && carouselVideoRefs.current[carouselIndex]) {
+            const currentVideo = carouselVideoRefs.current[carouselIndex];
+            if (currentVideo) {
+                console.log('[Carousel onVisible] 开始播放视频，索引:', carouselIndex);
+                // 更新当前正在播放的视频索引
+                currentPlayingCarouselIndex.current = carouselIndex;
+                // 标记这次播放是自动触发的
+                carouselAutoPlayTriggers.current[carouselIndex] = true;
+                currentVideo.play().catch(err => {
+                    console.warn('[Carousel] Video autoplay failed (onVisible):', err);
+                    // 播放失败时重置标记
+                    carouselAutoPlayTriggers.current[carouselIndex] = false;
+                });
+                // 更新播放状态
+                setCarouselVideoPausedStates(prev => {
+                    const newStates = [...prev];
+                    newStates[carouselIndex] = false;
+                    return newStates;
+                });
+            }
+        }
+    }, [data === null || data === void 0 ? void 0 : data.carouselSection, carouselIndex, handleCarouselImageStartEvent]);
+    // Carousel Section 离开可视区域时的回调
+    const handleCarouselHidden = React.useCallback(() => {
+        // Carousel Section 离开可视区域时，暂停当前正在播放的视频
+        // 使用 ref 来获取当前正在播放的视频索引，避免闭包问题
+        const playingIndex = currentPlayingCarouselIndex.current;
+        console.log('[Carousel onHidden] 被调用');
+        console.log('[Carousel onHidden] 正在播放的视频索引:', playingIndex);
+        console.log('[Carousel onHidden] carouselVideoRefs.current 长度:', carouselVideoRefs.current.length);
+        console.log('[Carousel onHidden] carouselVideoRefs.current[playingIndex] 存在:', !!carouselVideoRefs.current[playingIndex]);
+        if (playingIndex >= 0 && carouselVideoRefs.current[playingIndex]) {
+            const currentVideo = carouselVideoRefs.current[playingIndex];
+            if (currentVideo) {
+                console.log('[Carousel onHidden] 准备暂停视频，索引:', playingIndex, '当前播放状态:', !currentVideo.paused);
+                currentVideo.pause();
+                console.log('[Carousel onHidden] 已调用 pause()');
+                // 更新暂停状态
+                setCarouselVideoPausedStates(prev => {
+                    const newStates = [...prev];
+                    newStates[playingIndex] = true;
+                    return newStates;
+                });
+            }
+            else {
+                console.log('[Carousel onHidden] currentVideo 为空');
+            }
+        }
+        else {
+            console.log('[Carousel onHidden] 条件不满足，不暂停视频');
+        }
+    }, []);
+    // Carousel Section 进入可视区域时上报第一张图片的浏览事件，并自动播放视频
     useAdvancedOnScreen(carouselSectionRef, {
         threshold: 0.67,
         delay: 1000,
-        onVisible: () => {
-            // 只在首次进入可视区域时上报第一张图片
-            if (!hasCarouselReported.current && (data === null || data === void 0 ? void 0 : data.carouselSection) && data.carouselSection.length > 0) {
-                hasCarouselReported.current = true;
-                const currentItem = data.carouselSection[carouselIndex];
-                // 只对图片类型上报（不包括视频）
-                if (!currentItem.url) {
-                    handleCarouselImageStartEvent(carouselIndex);
-                }
-            }
-        }
+        onVisible: handleCarouselVisible,
+        onHidden: handleCarouselHidden,
+        name: 'Carousel'
     });
-    // Carousel 切换时自动播放/暂停视频（Post 2/3/4）
+    // Carousel 切换时暂停其他视频
+    // 注意：不再在切换时立即播放当前视频，而是由 PostView 组件处理（进入2/3可视区域并停留1秒后播放）
     React.useEffect(() => {
         if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || data.carouselSection.length === 0)
             return;
+        console.log('[Carousel useEffect] 切换到索引:', carouselIndex);
         // 暂停所有其他视频
         carouselVideoRefs.current.forEach((videoRef, index) => {
             if (videoRef && index !== carouselIndex) {
@@ -20764,22 +20883,6 @@ const StructurePage = (_a) => {
                 });
             }
         });
-        // 如果当前项是视频，自动播放
-        const currentItem = data.carouselSection[carouselIndex];
-        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.url) && carouselVideoRefs.current[carouselIndex]) {
-            const currentVideo = carouselVideoRefs.current[carouselIndex];
-            if (currentVideo) {
-                currentVideo.play().catch(err => {
-                    console.warn('[Carousel] Video autoplay failed:', err);
-                });
-                // 更新播放状态
-                setCarouselVideoPausedStates(prev => {
-                    const newStates = [...prev];
-                    newStates[carouselIndex] = false;
-                    return newStates;
-                });
-            }
-        }
     }, [carouselIndex, data]);
     // 触摸滑动处理
     const handleTouchStart = (e) => {
@@ -20904,15 +21007,7 @@ const StructurePage = (_a) => {
                         return textStyle;
                     })()) }, data.heroSection.text))),
             React.createElement("div", { style: baseStyles.heroImageContainer },
-                React.createElement(PostView, { videoRef: heroVideoRef, isVideo: !!data.heroSection.url, onExposure: () => {
-                        // 图片或视频的曝光上报
-                        handlePostExposure(data.heroSection, 'heroSection', 0);
-                    }, onVideoAutoPlay: () => {
-                        // 视频自动播放时上报 playVideo 事件（2/3区域 + 300ms后）
-                        if (heroVideoRef.current) {
-                            handleVideoPlay(data.heroSection, 'heroSection', 0, heroVideoRef.current, true);
-                        }
-                    } }, data.heroSection.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: handleHeroVideoClick },
+                React.createElement(PostView, { videoRef: heroVideoRef, isVideo: !!data.heroSection.url, autoPlayTriggerRef: heroAutoPlayTrigger }, data.heroSection.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: handleHeroVideoClick },
                     React.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, muted: true, loop: true, playsInline: true, controls: false, onLoadedMetadata: () => {
                             var _a;
                             const videoId = `${(_a = data.heroSection) === null || _a === void 0 ? void 0 : _a.itemId}-heroSection-0`;
@@ -20920,6 +21015,7 @@ const StructurePage = (_a) => {
                             const initTime = videoLoadTime.current[videoId] || loadTime;
                             videoLoadTime.current[videoId] = loadTime - initTime;
                         }, onPlay: (e) => {
+                            // 视频真正开始播放时才上报（考虑网速问题）
                             handleVideoPlay(data.heroSection, 'heroSection', 0, e.currentTarget);
                         }, onPause: (e) => {
                             handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
@@ -20932,7 +21028,52 @@ const StructurePage = (_a) => {
             React.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
                 React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
                     var _a;
-                    return (React.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
+                    // 只有当前显示的 slide 才应用曝光检测
+                    const isCurrentSlide = index === carouselIndex;
+                    return (React.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (
+                    // 视频：使用 PostView 包裹，但只在当前显示时生效
+                    isCurrentSlide ? (React.createElement(PostView, { videoRef: { current: carouselVideoRefs.current[index] }, isVideo: true, autoPlayTriggerRef: {
+                            get current() {
+                                return carouselAutoPlayTriggers.current[index] || false;
+                            },
+                            set current(value) {
+                                carouselAutoPlayTriggers.current[index] = value;
+                            }
+                        }, onVideoPlay: () => {
+                            // 视频开始播放，隐藏暂停图标
+                            console.log('[Carousel PostView] onVideoPlay 回调，索引:', index);
+                            setCarouselVideoPausedStates(prev => {
+                                const newStates = [...prev];
+                                newStates[index] = false;
+                                return newStates;
+                            });
+                        }, onVideoPause: () => {
+                            // 视频暂停，显示暂停图标
+                            console.log('[Carousel PostView] onVideoPause 回调，索引:', index);
+                            setCarouselVideoPausedStates(prev => {
+                                const newStates = [...prev];
+                                newStates[index] = true;
+                                return newStates;
+                            });
+                        } },
+                        React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
+                            React.createElement("video", { ref: (el) => {
+                                    carouselVideoRefs.current[index] = el;
+                                }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault(), onLoadedMetadata: () => {
+                                    const videoId = `${item.itemId}-carouselSection-${index}`;
+                                    const loadTime = Date.now();
+                                    const initTime = videoLoadTime.current[videoId] || loadTime;
+                                    videoLoadTime.current[videoId] = loadTime - initTime;
+                                }, onPlay: (e) => {
+                                    handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                }, onPause: (e) => {
+                                    handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                }, onEnded: (e) => {
+                                    handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                } }),
+                            carouselVideoPausedStates[index] && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' }))))) : (
+                    // 非当前 slide，不使用 PostView
+                    React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
                         React.createElement("video", { ref: (el) => {
                                 carouselVideoRefs.current[index] = el;
                             }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault(), onLoadedMetadata: () => {
@@ -20947,7 +21088,7 @@ const StructurePage = (_a) => {
                             }, onEnded: (e) => {
                                 handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
                             } }),
-                        carouselVideoPausedStates[index] && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (React.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage, draggable: false, onDragStart: (e) => e.preventDefault(), onLoad: () => {
+                        carouselVideoPausedStates[index] && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' }))))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (React.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage, draggable: false, onDragStart: (e) => e.preventDefault(), onLoad: () => {
                             // 记录图片加载完成时间
                             if (!carouselImageLoadTime.current[index]) {
                                 carouselImageLoadTime.current[index] = Date.now();