pb-sxp-ui 1.15.41 → 1.15.42

package/dist/pb-ui.js

@@ -17818,6 +17818,26 @@ Made in Italy` })));
                 return;
             (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
         }, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
+        const handleEnd = () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            if (!videoRef.current)
+                return;
+            if (isDiyH5) {
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+                if (!loopPlayRef.current)
+                    return;
+                if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                    (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
+                }
+                else {
+                    const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
+                    (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
+                }
+            }
+            else {
+                (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
+            }
+        };
         const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
         const handlePlaying = React.useCallback(() => {
             if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -17842,11 +17862,6 @@ Made in Italy` })));
                 isFirstPlayRef.current = false;
             }
         }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
-        const setCurrentTimeByStartTime = React.useCallback(() => {
-            if (isDiyH5) {
-                videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
-            }
-        }, []);
         const handLoadeddata = React.useCallback(() => {
             if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
                 return;
@@ -17871,13 +17886,12 @@ Made in Italy` })));
         const handleLoadedmetadata = React.useCallback(() => {
             if (!videoRef.current)
                 return;
-            setCurrentTimeByStartTime();
             loadedTimeRef.current = new Date();
             handleStartPlay();
             handLoadeddata();
         }, [videoRef.current, handLoadeddata, handleStartPlay]);
         const handleClickVideo = React.useCallback((type) => () => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e;
             if (!videoRef.current)
                 return;
             if (!isLoadFinish)
@@ -17898,13 +17912,10 @@ Made in Italy` })));
                     break;
                 default:
                     if (isPause) {
-                        if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
-                            videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
-                        }
-                        (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
+                        (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
                     }
                     else {
-                        (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
+                        (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
                     }
                     setIsPauseVideo(!isPause);
                     break;
@@ -17942,27 +17953,8 @@ Made in Italy` })));
         const handleWaiting = React.useCallback(() => {
             setWaiting(true);
         }, []);
-        const handleTimeUpload = () => {
-            if (!videoRef.current || !isDiyH5)
-                return;
-            setTimeout(() => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
-                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-                    if (!loopPlayRef.current)
-                        return;
-                    if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
-                        (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
-                    }
-                    else {
-                        const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
-                        (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
-                    }
-                }
-            });
-        };
         React.useEffect(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (!isActive)
                 return;
             const videoSrc = videoUrl;
@@ -17983,7 +17975,6 @@ Made in Italy` })));
                 hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
                 hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
                     var _a;
-                    setCurrentTimeByStartTime();
                     (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
                 });
             }
@@ -17997,12 +17988,11 @@ Made in Italy` })));
             (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
             (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
             (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
-            (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
+            (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
             (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
             (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
-            (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
             return () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
                 if (!isPause)
                     handlePause();
@@ -18014,10 +18004,9 @@ Made in Italy` })));
                 (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
                 (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
                 (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
-                (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
+                (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
                 (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
                 (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
-                (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
             };
         }, [isActive]);
         React.useEffect(() => {
@@ -18228,19 +18217,43 @@ Made in Italy` })));
                 }, onLoad: onShowFirstImage }))));
     };
 
-    const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
+    const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
         var _a, _b;
         const { isActive } = useSwiperSlide();
-        const { sxpParameter, openHashtag } = useSxpDataSource();
+        const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
         const [isLoad, setIsLoad] = React.useState(false);
         const [imgInfo, setImgInfo] = React.useState();
         const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
-        const swiperRef = React.useRef();
+        const imgsSwiperRef = React.useRef();
         const isFirstPlayRef = React.useRef(true);
+        const loopPlayRef = React.useRef(true);
         const initTime = new Date();
+        React.useImperativeHandle(ref, () => {
+            return {
+                setLoopPlay(v) {
+                    loopPlayRef.current = v;
+                }
+            };
+        });
+        React.useEffect(() => {
+            if (isLoad && isActive && isDiyH5) {
+                setTimeout(() => {
+                    var _a, _b, _c, _d, _e, _f;
+                    if (!loopPlayRef.current)
+                        return;
+                    if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                        (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
+                    }
+                    else {
+                        const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
+                        (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
+                    }
+                }, 3000);
+            }
+        }, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
         React.useEffect(() => {
             if (isLoad && isActive) {
-                (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
+                (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
                 if (openHashtag) {
                     onViewImageEndEvent(rec);
                 }
@@ -18250,7 +18263,7 @@ Made in Italy` })));
                 }
             }
             else {
-                (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
+                (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
             }
         }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
         const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -18277,13 +18290,13 @@ Made in Italy` })));
             };
         }, [isActive, imgInfo]);
         const handleMouseEnter = React.useCallback(() => {
-            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
-                swiperRef.current.swiper.autoplay.stop();
+            if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
+                imgsSwiperRef.current.swiper.autoplay.stop();
             }
         }, []);
         const handleMouseLeave = React.useCallback(() => {
-            if (swiperRef.current && swiperRef.current.swiper && isAlly) {
-                swiperRef.current.swiper.autoplay.start();
+            if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
+                imgsSwiperRef.current.swiper.autoplay.start();
             }
         }, []);
         const handleSlideChange = React.useCallback((swiper) => {
@@ -18304,7 +18317,7 @@ Made in Italy` })));
                         enabled: true
                     }
                 }
-                : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
+                : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
                         bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
                         fontSize: '14px'
                     } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -18321,7 +18334,7 @@ Made in Italy` })));
                 return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
                     React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
             }))));
-    };
+    });
     var PictureGroup$5 = React.memo(PictureGroup$4);
 
     /*
@@ -18621,6 +18634,7 @@ Made in Italy` })));
         const skipLinkRef = React.useRef(false);
         const [pageNum, setPageNum] = React.useState(2);
         const videoWidgetRef = React.useRef(null);
+        const pictureGroupRef = React.useRef(null);
         const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
         const { backMainFeed, productView, jumpToWeb } = useEventReport();
         const isShowFingerTip = React.useMemo(() => {
@@ -18759,8 +18773,9 @@ Made in Italy` })));
             refreshFeSession
         ]);
         const handleSessionExpire = React.useCallback(lodash.debounce(() => {
-            var _a;
+            var _a, _b;
             (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
+            (_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
             refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
         }, 1000), [handleSessionCompleted, refreshFeSession]);
         React.useEffect(() => {
@@ -18838,7 +18853,7 @@ Made in Italy` })));
                 return (React.createElement(VideoWidget$5, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
             }
             if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
-                return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+                return (React.createElement(PictureGroup$5, Object.assign({ data: data }, (activeIndex === index && { ref: pictureGroupRef }), { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, swiperRef: swiperRef })));
             }
             if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
                 return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {