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

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

@@ -5,13 +5,13 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const useIconLink_1 = require("../useIconLink");
 const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
-const hooks_1 = require("../../../../core/hooks");
-const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
 const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
 const VideoPlayer_1 = require("./VideoPlayer");
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
+const hooks_1 = require("../../../../core/hooks");
+const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
+const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
-    const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
+    const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
     const videoStartTime = (0, react_1.useRef)(0);
     const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
     const { isActive } = (0, react_2.useSwiperSlide)();
@@ -25,6 +25,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const initTimeRef = (0, react_1.useRef)();
     const loadedTimeRef = (0, react_1.useRef)();
     const isFirstPlayRef = (0, react_1.useRef)(true);
+    const loopPlayRef = (0, react_1.useRef)(loopPlay);
+    const scene = rec.video.scene;
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            setLoopPlay(v) {
+                loopPlayRef.current = v;
+            }
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        loopPlayRef.current = loopPlay;
+    }, [loopPlay]);
     const blur = (0, react_1.useMemo)(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -112,12 +124,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const handleLoadedmetadata = (0, react_1.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 = (0, react_1.useCallback)((type) => () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (!videoRef.current)
             return;
         if (!isLoadFinish)
@@ -138,10 +153,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;
@@ -178,8 +196,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const handleWaiting = (0, react_1.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);
+                }
+            }
+        });
+    };
     (0, react_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;
@@ -200,6 +237,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();
             });
         }
@@ -216,8 +254,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();
@@ -232,6 +271,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]);
     (0, react_1.useEffect)(() => {
@@ -349,6 +389,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         renderLoading,
-        isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
-};
+        isPauseVideo && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' }))))));
+});
 exports.default = (0, react_1.memo)(VideoWidget);

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

@@ -44,7 +44,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isReload, setIsReload] = (0, react_1.useState)(new Date().getTime());
     const skipLinkRef = (0, react_1.useRef)(false);
     const [pageNum, setPageNum] = (0, react_1.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 } = (0, hooks_1.useSxpDataSource)();
+    const videoWidgetRef = (0, react_1.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 } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
         return data.length > 0 && !loading && ((0, localStore_1.getFeUserState)() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -179,6 +180,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         refreshFeSession
     ]);
     const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.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]);
     (0, react_1.useEffect)(() => {
@@ -253,7 +256,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             return (react_1.default.createElement(MultiPosts_1.default, 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_1.default.createElement(VideoWidget_1.default, { 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_1.default.createElement(VideoWidget_1.default, 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_1.default.createElement(PictureGroup_1.default, { 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 }));
@@ -597,7 +600,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/lib/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/lib/core/context/SxpDataSourceProvider.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.15.22-alpha.1",
+  "version": "1.15.22-alpha.2",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",