pb-sxp-ui 1.20.44 → 1.20.45

package/dist/index.cjs

@@ -19611,15 +19611,19 @@ const CTAButton = ({ ctaData, style, onClick, onExposure }) => {
     });
     return (React.createElement("button", { ref: buttonRef, style: style, onClick: onClick }, ctaData.title));
 };
-const ProductView = ({ children, onExposure }) => {
+const ProductView = ({ children, onExposure, onLeave }) => {
     const productRef = React.useRef(null);
     // 使用高级曝光检测：2/3区域 + 1000ms延迟
     useAdvancedOnScreen(productRef, {
         threshold: 0.67, // 2/3 区域可见才开始计时
         delay: 1000,
         onVisible: () => {
-            // 每次进入2/3可视区域并停留1秒后都触发上报
+            // 每次进入2/3可视区域并停留1秒后记录开始浏览时间
             onExposure();
+        },
+        onHidden: () => {
+            // 离开可视区域时上报productView事件
+            onLeave === null || onLeave === void 0 ? void 0 : onLeave();
         }
     });
     return (React.createElement("div", { ref: productRef, style: { width: '100%' } }, children));
@@ -20037,6 +20041,7 @@ const StructurePage = (_a) => {
     const isFirstPlay = React.useRef({});
     const videoLoadTime = React.useRef({});
     const videoAutoPlayReported = React.useRef(new Set()); // 追踪哪些视频已通过自动播放上报
+    const videoPlayReportTime = React.useRef({}); // 追踪视频播放上报的时间戳，防止短时间内重复上报
     // 自动播放触发标记（用于区分自动播放和用户手动播放）
     const heroAutoPlayTrigger = React.useRef(false);
     const carouselAutoPlayTriggers = React.useRef({});
@@ -20285,6 +20290,16 @@ const StructurePage = (_a) => {
             return;
         }
         const videoId = `${videoData === null || videoData === void 0 ? void 0 : videoData.itemId}-${viewPosition}-${sectionIndex}`;
+        const now = Date.now();
+        // 防止短时间内重复上报（play 和 playing 事件可能连续触发）
+        // 如果距离上次上报不到500ms，则跳过
+        const lastReportTime = videoPlayReportTime.current[videoId];
+        if (lastReportTime && (now - lastReportTime) < 500) {
+            console.log('[handleVideoPlay] 跳过上报：距离上次上报时间过短', {
+                timeSinceLastReport: now - lastReportTime
+            });
+            return;
+        }
         // 检查是否是自动播放触发的
         let isAutoPlay = false;
         if (viewPosition === 'heroSection' && heroAutoPlayTrigger.current) {
@@ -20314,6 +20329,8 @@ const StructurePage = (_a) => {
         }
         // 记录视频开始播放时间
         videoStartTime.current[videoId] = videoRef.currentTime || 0;
+        // 记录本次上报时间
+        videoPlayReportTime.current[videoId] = now;
         // 判断是否首次播放
         const playType = isFirstPlay.current[videoId] === false ? '1' : '0';
         isFirstPlay.current[videoId] = false;
@@ -20385,20 +20402,40 @@ const StructurePage = (_a) => {
             }
         });
     }, [bffEventReport, data]);
-    // 产品浏览事件处理
+    // 产品进入可视区域时记录开始浏览时间
     const handleProductViewExposure = React.useCallback((productData, viewPosition, sectionIndex) => {
+        // 生成唯一标识
+        const productId = `${productData === null || productData === void 0 ? void 0 : productData.itemId}-${viewPosition}-${sectionIndex}`;
+        // 如果已经记录过开始时间，不再重复记录
+        if (productViewStartTime.current[productId]) {
+            return;
+        }
+        // 记录开始浏览时间
+        productViewStartTime.current[productId] = Date.now();
+        console.log('[handleProductViewExposure] 记录产品开始浏览时间:', {
+            productId,
+            startTime: productViewStartTime.current[productId]
+        });
+    }, []);
+    // 产品离开可视区域时上报 productView 事件
+    const handleProductViewLeave = React.useCallback((productData, viewPosition, sectionIndex) => {
         var _a;
-        // 生成唯一标识，避免重复上报
+        // 生成唯一标识
         const productId = `${productData === null || productData === void 0 ? void 0 : productData.itemId}-${viewPosition}-${sectionIndex}`;
-        // 如果已经上报过，不再上报
+        // 如果已经上报过，不再重复上报
         if (exposedProductRefs.current.has(productId)) {
             return;
         }
-        // 标记为已上报并记录开始浏览时间
+        // 获取开始浏览时间
+        const startTime = productViewStartTime.current[productId];
+        if (!startTime) {
+            console.warn('[handleProductViewLeave] 未找到开始浏览时间，跳过上报:', productId);
+            return;
+        }
+        // 计算停留时长（秒）
+        const timeOnSite = Math.floor((Date.now() - startTime) / 1000);
+        // 标记为已上报
         exposedProductRefs.current.add(productId);
-        productViewStartTime.current[productId] = Date.now();
-        // 计算在页面停留时间（从产品出现到现在）
-        const timeOnSite = 0; // 首次曝光时为0
         // 根据 viewPosition 确定 fromKName
         let fromKName = 'productPage';
         if (viewPosition === 'heroSection') {
@@ -20413,6 +20450,11 @@ const StructurePage = (_a) => {
         else if (viewPosition === 'footerSection') {
             fromKName = 'pdpPage';
         }
+        console.log('[handleProductViewLeave] 上报 productView 事件:', {
+            productId,
+            timeOnSite,
+            fromKName
+        });
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
                 eventSubject: 'productView',
@@ -21008,19 +21050,40 @@ const StructurePage = (_a) => {
                     })()) }, data.heroSection.text))),
             React.createElement("div", { style: baseStyles.heroImageContainer },
                 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: () => {
+                    React.createElement("video", { ref: (el) => {
+                            if (heroVideoRef) {
+                                heroVideoRef.current = el;
+                            }
+                            // 添加 addEventListener 监听事件，确保网络慢时也能触发
+                            if (el && !el.dataset.playListenerAdded) {
+                                el.dataset.playListenerAdded = 'true';
+                                // play 事件：视频开始播放时触发（可能还在缓冲）
+                                el.addEventListener('play', (e) => {
+                                    console.log('[Hero Video] play event triggered');
+                                    handleVideoPlay(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                                // playing 事件：视频真正开始播放时触发（已缓冲足够数据）
+                                // 这是网络慢时更可靠的事件
+                                el.addEventListener('playing', (e) => {
+                                    console.log('[Hero Video] playing event triggered (backup)');
+                                    // playing 也触发一次，防止 play 事件没触发
+                                    handleVideoPlay(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                                el.addEventListener('pause', (e) => {
+                                    console.log('[Hero Video] pause event triggered');
+                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                                el.addEventListener('ended', (e) => {
+                                    console.log('[Hero Video] ended event triggered');
+                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                            }
+                        }, 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`;
                             const loadTime = Date.now();
                             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);
-                        }, onEnded: (e) => {
-                            handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
                         } }),
                     isHeroVideoPaused && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_f = data.heroSection.imgUrls) === null || _f === void 0 ? void 0 : _f[0]) ? (React.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null),
                 React.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_h = (_g = data.heroSection.bindProducts) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.bindCta, (_j = data.heroSection.bindProducts) === null || _j === void 0 ? void 0 : _j[0], baseStyles.heroButton, 'heroSection', 0))))),
@@ -21059,34 +21122,66 @@ const StructurePage = (_a) => {
                         React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
                             React.createElement("video", { ref: (el) => {
                                     carouselVideoRefs.current[index] = el;
+                                    // 添加 addEventListener 监听事件，确保网络慢时也能触发
+                                    if (el && !el.dataset.playListenerAdded) {
+                                        el.dataset.playListenerAdded = 'true';
+                                        // play 事件：视频开始播放时触发（可能还在缓冲）
+                                        el.addEventListener('play', (e) => {
+                                            console.log('[Carousel Video] play event triggered, index:', index);
+                                            handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                        // playing 事件：视频真正开始播放时触发（已缓冲足够数据）
+                                        el.addEventListener('playing', (e) => {
+                                            console.log('[Carousel Video] playing event triggered (backup), index:', index);
+                                            handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                        el.addEventListener('pause', (e) => {
+                                            console.log('[Carousel Video] pause event triggered, index:', index);
+                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                        el.addEventListener('ended', (e) => {
+                                            console.log('[Carousel Video] ended event triggered, index:', index);
+                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                    }
                                 }, 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;
+                                // 添加 addEventListener 监听事件，确保网络慢时也能触发
+                                if (el && !el.dataset.playListenerAdded) {
+                                    el.dataset.playListenerAdded = 'true';
+                                    // play 事件：视频开始播放时触发（可能还在缓冲）
+                                    el.addEventListener('play', (e) => {
+                                        console.log('[Carousel Video (non-current)] play event triggered, index:', index);
+                                        handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                    // playing 事件：视频真正开始播放时触发（已缓冲足够数据）
+                                    el.addEventListener('playing', (e) => {
+                                        console.log('[Carousel Video (non-current)] playing event triggered (backup), index:', index);
+                                        handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                    el.addEventListener('pause', (e) => {
+                                        console.log('[Carousel Video (non-current)] pause event triggered, index:', index);
+                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                    el.addEventListener('ended', (e) => {
+                                        console.log('[Carousel Video (non-current)] ended event triggered, index:', index);
+                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                }
                             }, 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' }))))) : ((_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: () => {
                             // 记录图片加载完成时间
@@ -21142,7 +21237,7 @@ const StructurePage = (_a) => {
                             return textStyle;
                         })()) }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text))),
                 renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton, 'carouselSection', carouselIndex)))),
-        data.highlightRevealSection && (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(data.highlightRevealSection, 'highlightRevealSection', 0) },
+        data.highlightRevealSection && (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(data.highlightRevealSection, 'highlightRevealSection', 0), onLeave: () => handleProductViewLeave(data.highlightRevealSection, 'highlightRevealSection', 0) },
             React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection', { excludeBorder: true }) },
                 React.createElement("div", { style: baseStyles.highlightImageContainer },
                     React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
@@ -21228,7 +21323,7 @@ const StructurePage = (_a) => {
                 // 使用产品在数据数组中的实际索引来确定 buttonKey
                 const productDataIndex = productIndexMap[gridIndex];
                 const buttonKey = `productButton${productDataIndex || gridIndex + 1}`;
-                return (React.createElement("div", { key: (product === null || product === void 0 ? void 0 : product.itemId) || `empty-${gridIndex}`, style: baseStyles.productItem }, product ? (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(product, 'productGridSection', gridIndex) },
+                return (React.createElement("div", { key: (product === null || product === void 0 ? void 0 : product.itemId) || `empty-${gridIndex}`, style: baseStyles.productItem }, product ? (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(product, 'productGridSection', gridIndex), onLeave: () => handleProductViewLeave(product, 'productGridSection', gridIndex) },
                     React.createElement(React.Fragment, null,
                         React.createElement("div", { style: baseStyles.productImageContainer },
                             React.createElement("img", { src: product.landingImageUrl || product.cover,