pb-sxp-ui 1.15.22-alpha.1 → 1.15.22-alpha.3

package/dist/pb-ui.js

@@ -1260,7 +1260,8 @@
                 multiPostTimeRef,
                 refreshFeSession,
                 getAccount,
-                accountSonsent
+                accountSonsent,
+                isDiyH5
             } }, isShowConsent ? (React.createElement(Consent$4, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
             rtcList,
             mutateLike: bffMutateLike,
@@ -1494,7 +1495,7 @@
             React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
     });
 
-    var index$2 = /*#__PURE__*/Object.freeze({
+    var index$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         EditorCore: EditorCore
     });
@@ -17675,9 +17676,9 @@ Made in Italy` })));
         };
     })();
 
-    const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
+    const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
-        const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
+        const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
         const videoStartTime = React.useRef(0);
         const [isLoadFinish, setIsLoadFinish] = React.useState(false);
         const { isActive } = useSwiperSlide();
@@ -17691,6 +17692,18 @@ Made in Italy` })));
         const initTimeRef = React.useRef();
         const loadedTimeRef = React.useRef();
         const isFirstPlayRef = React.useRef(true);
+        const loopPlayRef = React.useRef(loopPlay);
+        const scene = rec.video.scene;
+        React.useImperativeHandle(ref, () => {
+            return {
+                setLoopPlay(v) {
+                    loopPlayRef.current = v;
+                }
+            };
+        });
+        React.useEffect(() => {
+            loopPlayRef.current = loopPlay;
+        }, [loopPlay]);
         const blur = React.useMemo(() => {
             return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
         }, [videoPostConfig]);
@@ -17778,12 +17791,15 @@ Made in Italy` })));
         const handleLoadedmetadata = React.useCallback(() => {
             if (!videoRef.current)
                 return;
+            if (isDiyH5) {
+                videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
+            }
             loadedTimeRef.current = new Date();
             handleStartPlay();
             handLoadeddata();
         }, [videoRef.current, handLoadeddata, handleStartPlay]);
         const handleClickVideo = React.useCallback((type) => () => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             if (!videoRef.current)
                 return;
             if (!isLoadFinish)
@@ -17804,10 +17820,13 @@ Made in Italy` })));
                     break;
                 default:
                     if (isPause) {
-                        (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                        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();
                     }
                     else {
-                        (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                        (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
                     }
                     setIsPauseVideo(!isPause);
                     break;
@@ -17819,6 +17838,7 @@ Made in Italy` })));
                 return;
             if (activeIndex !== index)
                 return;
+            setIsPauseVideo(true);
             const item = data[index];
             const videoDuration = ((_b = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
             const videoCurrentTime = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
@@ -17844,8 +17864,27 @@ 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;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             if (!isActive)
                 return;
             const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
@@ -17866,6 +17905,7 @@ 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;
+                    videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
                     (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
                 });
             }
@@ -17882,8 +17922,9 @@ Made in Italy` })));
             (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
             (_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;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                 const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
                 if (!isPause)
                     handlePause();
@@ -17898,6 +17939,7 @@ Made in Italy` })));
                 (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
                 (_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(() => {
@@ -17920,8 +17962,8 @@ Made in Italy` })));
             }
         }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
         /*
-        打开/关闭hashtag暂停/播放视频
-        */
+      打开/关闭hashtag暂停/播放视频
+      */
         React.useEffect(() => {
             var _a, _b, _c;
             if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -17949,7 +17991,8 @@ Made in Italy` })));
             };
         }, [handleClickVideo, isActive]);
         const renderPoster = React.useMemo(() => {
-            if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
+            var _a, _b;
+            if ((!((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) && !(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) || isLoadFinish) {
                 return null;
             }
             return (React.createElement("img", { style: {
@@ -17959,8 +18002,8 @@ Made in Italy` })));
                     width: '100%',
                     height: '100%',
                     objectFit: 'cover'
-                }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
-        }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+                }, src: ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover) || (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image), alt: 'placeholder image' }));
+        }, [rec, isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
         const renderLoading = React.useMemo(() => {
             if (!waiting || !isLoadFinish)
                 return;
@@ -18018,8 +18061,8 @@ Made in Italy` })));
             React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
             renderPoster,
             renderLoading,
-            isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
-    };
+            isPauseVideo && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' }))))));
+    });
     var VideoWidget$5 = React.memo(VideoWidget$4);
 
     const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
@@ -18482,7 +18525,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-02-25 16:50:19
+     * @LastEditTime: 2025-05-07 13:33:18
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -18501,7 +18544,8 @@ Made in Italy` })));
         const [isReload, setIsReload] = React.useState(new Date().getTime());
         const skipLinkRef = React.useRef(false);
         const [pageNum, setPageNum] = React.useState(2);
-        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 } = useSxpDataSource();
+        const videoWidgetRef = 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(() => {
             return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -18639,6 +18683,8 @@ Made in Italy` })));
             refreshFeSession
         ]);
         const handleSessionExpire = React.useCallback(lodash.debounce(() => {
+            var _a;
+            (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
             refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
         }, 1000), [handleSessionCompleted, refreshFeSession]);
         React.useEffect(() => {
@@ -18674,7 +18720,7 @@ Made in Italy` })));
         }, [minusHeight, containerHeight, tagHeight]);
         const visList = React.useMemo(() => {
             var _a;
-            const list = activeIndex === 0 && !waterFallData && !isEditor
+            const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
                 ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
                 : data === null || data === void 0 ? void 0 : data.map((item, index) => {
                     if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
@@ -18686,8 +18732,8 @@ Made in Italy` })));
                 });
             if (!(list === null || list === void 0 ? void 0 : list.length))
                 return [];
-            return !waterFallData && !isNoMoreData ? list.concat([{ loading: true }]) : list;
-        }, [data, activeIndex, waterFallData, isEditor, isNoMoreData]);
+            return !waterFallData && !isNoMoreData && !isDiyH5 ? list.concat([{ loading: true }]) : list;
+        }, [data, activeIndex, waterFallData, isEditor, isNoMoreData, isDiyH5]);
         const renderLogo = React.useMemo(() => {
             var _a, _b, _c, _d;
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -18713,7 +18759,7 @@ Made in Italy` })));
                 return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
             }
             if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
-                return (React.createElement(VideoWidget$5, { key: isReload, 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 }));
+                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 }));
@@ -19062,7 +19108,7 @@ Made in Italy` })));
                         return;
                     // 处理上滑下滑事件
                     handleScrollEvent(swiper);
-                    if (waterFallData || isEditor)
+                    if (waterFallData || isEditor || isDiyH5)
                         return;
                     if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
                         if (!isLoadMore) {
@@ -19448,7 +19494,7 @@ Made in Italy` })));
             return renderView(rec, index);
         })));
     };
-    var index$1 = React.memo(DiyPortalPreview);
+    var index$2 = React.memo(DiyPortalPreview);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -19709,7 +19755,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2025-03-25 13:54:27
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-04-28 14:08:59
+     * @LastEditTime: 2025-05-06 18:10:44
      * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
      *
      */
@@ -19941,7 +19987,7 @@ Made in Italy` })));
                 return renderView(rec, index);
             }))));
     });
-    var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
+    var index$1 = React.memo(DiyStoryPreview);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -20041,7 +20087,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-04-28 14:33:34
+     * @LastEditTime: 2025-05-06 15:49:04
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
      *
      */
@@ -20069,9 +20115,9 @@ Made in Italy` })));
         const [channel, setChannel] = React.useState();
         return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
             React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, isDiyH5: isDiyH5, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
-                    var _a, _b;
+                    var _a;
                     return (React.createElement(React.Fragment, null,
-                        isDiyH5 ? (React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: 'all', loopPlay: true }))) : (React.createElement(SxpPageRender$1, Object.assign({ defaultData: data }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER }))),
+                        React.createElement(SxpPageRender$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
                         React.createElement(Popup, null)));
                 } })));
     };
@@ -20085,14 +20131,14 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\index.ts
      */
 
-    exports.DiyPortalPreview = index$1;
-    exports.DiyStoryPreview = DiyStoryPreview$1;
+    exports.DiyPortalPreview = index$2;
+    exports.DiyStoryPreview = index$1;
     exports.EditorDataProvider = EditorDataProvider;
     exports.Modal = Modal$1;
     exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
     exports.SxpPageCore = index;
     exports.SxpPageRender = SxpPageRender$1;
-    exports.core = index$2;
+    exports.core = index$3;
     exports.default = Pagebuilder;
     exports.materials = _materials_;
     exports.useEditorDataProvider = useEditorDataProvider;