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

package/es/core/components/DiyStoryPreview/index.js

@@ -10,184 +10,6 @@ import PictureGroup from './PictureGroup';
 import VideoWidget from './VideoWidget';
 import * as _materials_ from '../../../materials';
 import '../SxpPageRender/index.less';
-const recData = {
-    position: 0,
-    isCollected: false,
-    product: null,
-    video: {
-        appId: null,
-        itemId: 'VIDEOSsRgI1695278974368',
-        title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
-        enTitle: null,
-        icon: null,
-        cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
-        link: null,
-        linkTitle: null,
-        linkType: null,
-        menuCategoryId: null,
-        remark: null,
-        tags: [
-            'Gift-Giving',
-            'Daily Wear',
-            'Business Formal',
-            'Sports/Casual',
-            'Anniversary Gifts',
-            'Wedding/Engagement',
-            'Formal Dinner/Party'
-        ],
-        traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-        value: 385,
-        weight: null,
-        bindCta: null,
-        bindProduct: null,
-        bindProducts: [
-            {
-                appId: 'wx448578f8851f3dce',
-                itemId: 'test02178888',
-                title: 'christian dior小包包 新CDN',
-                enTitle: null,
-                icon: null,
-                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
-                link: '/pages/details/index?spu_id=1702262707659534338',
-                linkTitle: '',
-                linkType: 'MP',
-                menuCategoryId: null,
-                remark: null,
-                tags: [],
-                traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                value: null,
-                weight: null,
-                bindCta: {
-                    appId: 'wx448578f8851f3dce',
-                    itemId: 'CTA3KofE1716186622249',
-                    title: 'SHOP NOW 立即购买',
-                    enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
-                    icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
-                    cover: null,
-                    link: '/pages/details/index?spu_id=1702262707659534338',
-                    linkTitle: '',
-                    linkType: 'MP',
-                    menuCategoryId: '64b60b202caf0e1c1ce1e17d',
-                    remark: null,
-                    tags: [
-                        "Woman's Perfumes",
-                        'Plates & Bowls',
-                        'Glasses',
-                        'Multicolor',
-                        'Carafes',
-                        'Tea & Coffee',
-                        'Green',
-                        'Grey',
-                        'Cutlery'
-                    ],
-                    traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                    value: null,
-                    weight: null
-                },
-                collection: 'Ricco',
-                currency: 'INR-₹',
-                homePage: [
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
-                ],
-                info: 'test',
-                price: 53200,
-                shippingInfo: null,
-                taxInfo: null
-            },
-            {
-                appId: null,
-                itemId: '113J631A0684_C520',
-                title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
-                enTitle: null,
-                icon: null,
-                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
-                link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
-                linkTitle: null,
-                linkType: 'WEB',
-                menuCategoryId: null,
-                remark: null,
-                tags: [],
-                traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                value: null,
-                weight: null,
-                bindCta: {
-                    appId: null,
-                    itemId: 'CTAAfaKf1730796437032',
-                    title: 'test',
-                    enTitle: 'test',
-                    icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
-                    cover: null,
-                    link: null,
-                    linkTitle: null,
-                    linkType: null,
-                    menuCategoryId: '64b60b202caf0e1c1ce1e17d',
-                    remark: '',
-                    tags: [],
-                    traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                    value: null,
-                    weight: null
-                },
-                collection: 'Jacquard de coton éponge bleu',
-                currency: 'EUR-€',
-                homePage: [
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
-                ],
-                info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
-                price: 1800,
-                shippingInfo: null,
-                taxInfo: null
-            },
-            {
-                appId: null,
-                itemId: 'S5573CRIW_M928',
-                title: 'Mini Dior Book Tote',
-                enTitle: null,
-                icon: null,
-                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
-                link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
-                linkTitle: null,
-                linkType: 'WEB',
-                menuCategoryId: null,
-                remark: null,
-                tags: ['ダイヤモンド'],
-                traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                value: null,
-                weight: null,
-                bindCta: null,
-                collection: null,
-                currency: 'GBP-￡',
-                homePage: [
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
-                ],
-                info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
-                price: 1950,
-                shippingInfo: null,
-                taxInfo: null
-            }
-        ],
-        url: null,
-        blockCta: 1,
-        blockProduct: 1,
-        hashTags: [
-            'Sports/Casual',
-            'Formal Dinner/Party',
-            'Business Formal',
-            'Wedding/Engagement',
-            'Gift-Giving',
-            'Daily Wear',
-            'Anniversary Gifts'
-        ]
-    }
-};
 const RESOLVER = {};
 Object.values(_materials_).forEach((v) => {
     RESOLVER[v.extend.type] = v;

package/es/core/components/SxpPageCore/index.js

@@ -1,7 +1,6 @@
 import React, { memo, useMemo, useState } from 'react';
 import SxpPageRender from '../SxpPageRender';
 import Popup from '../SxpPageRender/Popup';
-import DiyStoryPreview from '../DiyStoryPreview';
 import * as _materials_ from '../../../materials';
 import { EditorCore } from '../../../core';
 import SxpDataSourceProvider from '../../../core/context/SxpDataSourceProvider';
@@ -21,9 +20,9 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
     const [channel, setChannel] = useState();
     return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
         React.createElement(SxpDataSourceProvider, { 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, 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, 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, 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)));
             } })));
 };

package/es/core/components/SxpPageRender/VideoWidget/index.d.ts

@@ -10,6 +10,11 @@ interface IVideoWidgetProps {
     activeIndex?: number;
     videoPostConfig?: postConfigType;
     videoPlayIcon?: string;
+    loopPlay: any;
+    swiperRef?: any;
 }
-declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
+export interface IVideoWidgetRef {
+    setLoopPlay: (v: boolean) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
 export default _default;

package/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -1,15 +1,15 @@
 import { __awaiter } from "tslib";
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useSwiperSlide } from 'swiper/react';
 import { useIconLink } from '../useIconLink';
 import FormatImage from '../FormatImage';
-import { useSxpDataSource } from '../../../../core/hooks';
-import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
 import loading_gif from './loading.gif';
 import { mountVideoPlayerAtNode } from './VideoPlayer';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
+import { useSxpDataSource } from '../../../../core/hooks';
+import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
+const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
     const [isPauseVideo, setIsPauseVideo] = useState(false);
-    const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
+    const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
     const videoStartTime = useRef(0);
     const [isLoadFinish, setIsLoadFinish] = useState(false);
     const { isActive } = useSwiperSlide();
@@ -23,6 +23,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const initTimeRef = useRef();
     const loadedTimeRef = useRef();
     const isFirstPlayRef = useRef(true);
+    const loopPlayRef = useRef(loopPlay);
+    const scene = rec.video.scene;
+    useImperativeHandle(ref, () => {
+        return {
+            setLoopPlay(v) {
+                loopPlayRef.current = v;
+            }
+        };
+    });
+    useEffect(() => {
+        loopPlayRef.current = loopPlay;
+    }, [loopPlay]);
     const blur = useMemo(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -110,12 +122,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const handleLoadedmetadata = 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 = useCallback((type) => () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (!videoRef.current)
             return;
         if (!isLoadFinish)
@@ -136,10 +151,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 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;
@@ -151,6 +169,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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);
@@ -176,8 +195,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const handleWaiting = 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);
+                }
+            }
+        });
+    };
     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;
@@ -198,6 +236,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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();
             });
         }
@@ -214,8 +253,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         (_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();
@@ -230,6 +270,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             (_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]);
     useEffect(() => {
@@ -278,7 +319,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         };
     }, [handleClickVideo, isActive]);
     const renderPoster = 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: {
@@ -288,8 +330,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 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 = useMemo(() => {
         if (!waiting || !isLoadFinish)
             return;
@@ -347,6 +389,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         renderLoading,
-        isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
-};
+        isPauseVideo && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' }))))));
+});
 export default memo(VideoWidget);

package/es/core/components/SxpPageRender/index.js

@@ -41,7 +41,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isReload, setIsReload] = useState(new Date().getTime());
     const skipLinkRef = useRef(false);
     const [pageNum, setPageNum] = 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 = 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 = useMemo(() => {
         return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -176,6 +177,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         refreshFeSession
     ]);
     const handleSessionExpire = useCallback(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]);
     useEffect(() => {
@@ -211,7 +214,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [minusHeight, containerHeight, tagHeight]);
     const visList = 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) {
@@ -223,8 +226,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         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 = 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)) {
@@ -250,7 +253,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             return (React.createElement(MultiPosts, 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, { 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, 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, { 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 }));
@@ -594,7 +597,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 if (openHashtag)
                     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) {

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -92,6 +92,7 @@ export interface ISxpDataSourceContext {
     refreshFeSession?: (enableReSid?: boolean, event?: (fk: string) => void) => void;
     getAccount?: () => Promise<any>;
     accountSonsent?: (v: boolean) => Promise<boolean>;
+    isDiyH5?: boolean;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {

package/es/core/context/SxpDataSourceProvider.js

@@ -625,7 +625,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             multiPostTimeRef,
             refreshFeSession,
             getAccount,
-            accountSonsent
+            accountSonsent,
+            isDiyH5
         } }, isShowConsent ? (React.createElement(Consent, 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,