pb-sxp-ui 1.20.45 → 1.20.47

package/dist/index.cjs

@@ -19648,18 +19648,23 @@ const PostView = ({ children, videoRef, isVideo, onExposure, autoPlayTriggerRef,
                     autoPlayTriggerRef.current = true;
                     console.log('[PostView onVisible] 已设置自动播放标记');
                 }
+                // 立即更新暂停图标状态，不等待 play() Promise
+                // 这样可以确保图标状态与视频播放状态同步
+                if (onVideoPlay) {
+                    onVideoPlay();
+                }
                 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;
                     }
+                    // 播放失败，恢复暂停图标
+                    if (onVideoPause) {
+                        onVideoPause();
+                    }
                 });
             }
         },
@@ -20042,6 +20047,7 @@ const StructurePage = (_a) => {
     const videoLoadTime = React.useRef({});
     const videoAutoPlayReported = React.useRef(new Set()); // 追踪哪些视频已通过自动播放上报
     const videoPlayReportTime = React.useRef({}); // 追踪视频播放上报的时间戳，防止短时间内重复上报
+    const videoLastCurrentTime = React.useRef({}); // 追踪视频的上一次播放时间，用于检测循环
     // 自动播放触发标记（用于区分自动播放和用户手动播放）
     const heroAutoPlayTrigger = React.useRef(false);
     const carouselAutoPlayTriggers = React.useRef({});
@@ -20318,15 +20324,6 @@ const StructurePage = (_a) => {
             videoAutoPlayReported.current.add(videoId);
             console.log('[handleVideoPlay] 标记为已通过自动播放上报');
         }
-        else {
-            // 如果不是自动播放，但已经通过自动播放上报过，则跳过
-            if (videoAutoPlayReported.current.has(videoId)) {
-                console.log('[handleVideoPlay] 跳过上报：已经通过自动播放上报过');
-                // 只记录播放时间，不上报
-                videoStartTime.current[videoId] = videoRef.currentTime || 0;
-                return;
-            }
-        }
         // 记录视频开始播放时间
         videoStartTime.current[videoId] = videoRef.currentTime || 0;
         // 记录本次上报时间
@@ -20352,8 +20349,48 @@ const StructurePage = (_a) => {
             }))
         });
     }, [bffEventReport]);
+    // 视频时间更新事件处理（用于检测循环播放）
+    const handleVideoTimeUpdate = React.useCallback((videoData, viewPosition, sectionIndex, videoRef) => {
+        if (!videoRef || !videoRef.duration)
+            return;
+        const videoId = `${videoData === null || videoData === void 0 ? void 0 : videoData.itemId}-${viewPosition}-${sectionIndex}`;
+        const currentTime = videoRef.currentTime;
+        const lastTime = videoLastCurrentTime.current[videoId] || 0;
+        // 检测视频循环（当前时间明显小于上次时间，说明视频重新开始了）
+        if (lastTime > 0 && currentTime < lastTime && lastTime > videoRef.duration * 0.9) {
+            console.log('[handleVideoTimeUpdate] 检测到视频循环，currentTime:', currentTime, 'lastTime:', lastTime);
+            // 上报 playOverVideo（循环结束）
+            const videoDuration = videoRef.duration.toFixed(2);
+            const startTime = videoStartTime.current[videoId] || 0;
+            const playDuration = (lastTime - startTime).toFixed(2);
+            if (parseFloat(playDuration) >= 0.1) {
+                console.log('[handleVideoTimeUpdate] 上报循环结束的 playOverVideo 事件');
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'playOverVideo',
+                        eventDescription: 'User finished playing the video',
+                        sceneId: '',
+                        contentId: (videoData === null || videoData === void 0 ? void 0 : videoData.itemId) || '',
+                        contentName: (videoData === null || videoData === void 0 ? void 0 : videoData.title) || '',
+                        endTime: videoDuration,
+                        videoDuration,
+                        playDuration,
+                        contentTags: (videoData === null || videoData === void 0 ? void 0 : videoData.tags) ? JSON.stringify(videoData.tags) : '[]',
+                        position: `${sectionIndex || 0}`,
+                        contentFormat: 'video',
+                        rtc: '',
+                        traceInfo: (videoData === null || videoData === void 0 ? void 0 : videoData.traceInfo) || ''
+                    }
+                });
+            }
+            // 重置上次上报时间，让下次 play 事件可以上报
+            delete videoPlayReportTime.current[videoId];
+        }
+        // 更新上次播放时间
+        videoLastCurrentTime.current[videoId] = currentTime;
+    }, [bffEventReport]);
     // 视频播放结束/暂停事件处理
-    const handleVideoPlayOver = React.useCallback((videoData, viewPosition, sectionIndex, videoRef) => {
+    const handleVideoPlayOver = React.useCallback((videoData, viewPosition, sectionIndex, videoRef, isEndedEvent) => {
         if (!videoRef || !videoRef.duration)
             return;
         const videoId = `${videoData === null || videoData === void 0 ? void 0 : videoData.itemId}-${viewPosition}-${sectionIndex}`;
@@ -20362,6 +20399,18 @@ const StructurePage = (_a) => {
         // 计算播放时长
         const startTime = videoStartTime.current[videoId] || 0;
         const playDuration = (videoRef.currentTime - startTime).toFixed(2);
+        // 如果播放时长过短（小于100ms），可能是误触发，不上报
+        if (parseFloat(playDuration) < 0.1) {
+            console.log('[handleVideoPlayOver] 播放时长过短，跳过上报:', playDuration);
+            return;
+        }
+        console.log('[handleVideoPlayOver] 上报 playOverVideo 事件:', {
+            videoId,
+            isEndedEvent,
+            endTime,
+            playDuration,
+            videoDuration
+        });
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
                 eventSubject: 'playOverVideo',
@@ -20569,8 +20618,8 @@ const StructurePage = (_a) => {
                 return;
             }
             // 构建 CMS 接口的 URL 和请求体
-            // apiUrl 应该是域名（如 http://localhost:8001），然后拼接 /api/console/ad/multiCta/rec/detail
-            finalApiUrl = `${apiUrl}/api/console/ad/multiCta/rec/detail`;
+            // apiUrl 应该是域名（如 https://us-sxp3-be.chatlabs.net），然后拼接 /console/ad/multiCta/rec/detail
+            finalApiUrl = `${apiUrl}/console/ad/multiCta/rec/detail`;
             bodyToSend = { storyId };
         }
         else {
@@ -21049,7 +21098,15 @@ const StructurePage = (_a) => {
                         return textStyle;
                     })()) }, 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(PostView, { videoRef: heroVideoRef, isVideo: !!data.heroSection.url, autoPlayTriggerRef: heroAutoPlayTrigger, onVideoPlay: () => {
+                        // 视频开始播放，隐藏暂停图标
+                        console.log('[Hero PostView] onVideoPlay 回调');
+                        setIsHeroVideoPaused(false);
+                    }, onVideoPause: () => {
+                        // 视频暂停，显示暂停图标
+                        console.log('[Hero PostView] onVideoPause 回调');
+                        setIsHeroVideoPaused(true);
+                    } }, data.heroSection.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: handleHeroVideoClick },
                     React.createElement("video", { ref: (el) => {
                             if (heroVideoRef) {
                                 heroVideoRef.current = el;
@@ -21075,7 +21132,10 @@ const StructurePage = (_a) => {
                                 });
                                 el.addEventListener('ended', (e) => {
                                     console.log('[Hero Video] ended event triggered');
-                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget, true);
+                                });
+                                el.addEventListener('timeupdate', (e) => {
+                                    handleVideoTimeUpdate(data.heroSection, 'heroSection', 0, e.currentTarget);
                                 });
                             }
                         }, src: data.heroSection.url, style: baseStyles.heroVideo, muted: true, loop: true, playsInline: true, controls: false, onLoadedMetadata: () => {
@@ -21141,7 +21201,10 @@ const StructurePage = (_a) => {
                                         });
                                         el.addEventListener('ended', (e) => {
                                             console.log('[Carousel Video] ended event triggered, index:', index);
-                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget, true);
+                                        });
+                                        el.addEventListener('timeupdate', (e) => {
+                                            handleVideoTimeUpdate(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: () => {
@@ -21174,7 +21237,10 @@ const StructurePage = (_a) => {
                                     });
                                     el.addEventListener('ended', (e) => {
                                         console.log('[Carousel Video (non-current)] ended event triggered, index:', index);
-                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget, true);
+                                    });
+                                    el.addEventListener('timeupdate', (e) => {
+                                        handleVideoTimeUpdate(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: () => {