pb-sxp-ui 1.15.13-alpha.4 → 1.15.13-alpha.5

package/dist/pb-ui.js

@@ -19475,7 +19475,7 @@ Made in Italy` })));
     };
     var PictureGroup$1 = React.memo(PictureGroup);
 
-    const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
+    const VideoWidget = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
         const { isActive } = useSwiperSlide();
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
         const videoRef = React.useRef(null);
@@ -19487,6 +19487,38 @@ Made in Italy` })));
         const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
         const videoId = `pb-cache-video-${index}`;
         const hlsRef = React.useRef(null);
+        const loopPlayRef = React.useRef(loopPlay);
+        React.useEffect(() => {
+            loopPlayRef.current = loopPlay;
+        }, [loopPlay]);
+        React.useImperativeHandle(ref, () => {
+            return {
+                play() {
+                    var _a;
+                    if (!videoRef.current)
+                        return;
+                    handleTimeUpload();
+                    (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+                    setIsPauseVideo(false);
+                },
+                pause() {
+                    var _a;
+                    if (!videoRef.current)
+                        return;
+                    (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+                    setIsPauseVideo(true);
+                },
+                setLoopPlay(v) {
+                    if (!videoRef.current)
+                        return;
+                    loopPlayRef.current = v;
+                },
+                isPlaying() {
+                    var _a;
+                    return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
+                }
+            };
+        });
         React.useEffect(() => {
             if (!videoRef.current)
                 return;
@@ -19497,7 +19529,7 @@ Made in Italy` })));
             (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
         }, []);
         const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-        const handlePlaying = React.useCallback(() => {
+        React.useCallback(() => {
             var _a, _b, _c, _d, _e, _f;
             setIsPauseVideo(false);
             const item = data[index];
@@ -19514,9 +19546,9 @@ Made in Italy` })));
             (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
             setIsLoadFinish(true);
         }, []);
-        React.useCallback((type) => () => {
-            var _a, _b, _c, _d, _e;
-            if (!isLoadFinish)
+        const handleClickVideo = React.useCallback((type) => () => {
+            var _a, _b, _c, _d, _e, _f;
+            if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
                 return;
             const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
             switch (type) {
@@ -19534,13 +19566,13 @@ Made in Italy` })));
                     break;
                 default:
                     if (isPause) {
-                        // if (videoRef?.current?.currentTime >= rec?.endTime) {
-                        //   videoRef.current.currentTime = rec?.startTime;
-                        // }
-                        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                        if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
+                            videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
+                        }
+                        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
                     }
                     else {
-                        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                        (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
                     }
                     setIsPauseVideo(!isPause);
                     break;
@@ -19564,7 +19596,7 @@ Made in Italy` })));
                 ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
                 : 'translateY(-50%)';
         }, [videoPostConfig]);
-        const handLoadeddata = React.useCallback(() => {
+        React.useCallback(() => {
             if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
                 return;
             const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
@@ -19578,35 +19610,34 @@ Made in Italy` })));
             setFirstFrameSrc(canvas.toDataURL());
         }, []);
         const handleTimeUpload = React.useCallback(() => {
-            var _a, _b, _c;
+            var _a;
             if (!videoRef.current)
                 return;
-            if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
-                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-            }
+            const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
+            handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
+            setTimeout(() => {
+                var _a, _b;
+                if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
+                    slideSwiper();
+                }
+            });
         }, []);
-        // useEffect(() => {
-        //   if (!videoRef.current || !isActive) return;
-        //   if (isPlay) {
-        //     videoRef.current?.play();
-        //   } else {
-        //     videoRef.current?.pause();
-        //   }
-        // }, [isPlay, isActive]);
-        const handlePause = () => {
-            var _a, _b, _c, _d, _e, _f;
-            if (!videoRef.current || !isActive)
-                return;
-            if (!loopPlay)
+        const slideSwiper = () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            (_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) {
-                (_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);
+                (_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 = (_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);
+                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);
             }
         };
+        const handlePause = () => {
+            setIsPauseVideo(true);
+        };
         React.useEffect(() => {
             var _a, _b, _c;
             if (!isActive)
@@ -19652,7 +19683,7 @@ Made in Italy` })));
                 (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
                 (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
             };
-        }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
+        }, [isActive]);
         const renderPoster = React.useMemo(() => {
             if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
                 return null;
@@ -19695,18 +19726,18 @@ Made in Italy` })));
                 width: '100%',
                 height,
                 overflow: 'hidden'
-            } },
+            }, onClick: handleClickVideo() },
             React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
             renderPoster,
             isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
-    };
+    });
     var VideoWidget$1 = React.memo(VideoWidget);
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2025-03-25 13:54:27
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-03-28 18:08:02
+     * @LastEditTime: 2025-03-31 14:29:21
      * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
      *
      */
@@ -19894,9 +19925,10 @@ Made in Italy` })));
     });
     const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
     const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-    const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
-        const [loopPlaySwiper, setLooPlaySwiper] = React.useState(loopPlay);
+    const DiyStoryPreview = React.forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
+        const videoWidgetRef = React.useRef(null);
         const swiperRef = React.useRef(null);
+        const [curIndex, setCurIndex] = React.useState(0);
         React.useMemo(() => {
             let minusHeight = 0;
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -19907,6 +19939,32 @@ Made in Italy` })));
             }
             return containerHeight - minusHeight;
         }, [globalConfig, containerHeight, tagList]);
+        React.useImperativeHandle(ref, () => {
+            return {
+                play() {
+                    var _a;
+                    (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
+                },
+                pause() {
+                    var _a;
+                    (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+                },
+                slideTo(n) {
+                    var _a, _b;
+                    if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+                        return;
+                    (_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(n);
+                },
+                isPlaying() {
+                    var _a, _b;
+                    return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
+                },
+                setLoopPlay(v) {
+                    var _a;
+                    (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
+                }
+            };
+        });
         // 判断是否是视频
         const isVideoUrl = (url) => {
             if (url && url !== '' && typeof url === 'string') {
@@ -19921,10 +19979,10 @@ Made in Italy` })));
         const renderContent = (rec, index) => {
             const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
             if (isVideo) {
-                return (React.createElement(VideoWidget$1, { isPlay: isPlay, rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
+                return (React.createElement(VideoWidget$1, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, handleUpdateTimeline: onUpdateTimeLine })));
             }
             else {
-                return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
+                return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef }));
             }
         };
         React.useMemo(() => {
@@ -20062,16 +20120,13 @@ Made in Italy` })));
                 return;
             (_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(activeIndex);
         }, [activeIndex]);
-        React.useEffect(() => {
-            if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
-                return;
-            // swiperRef?.current?.swiper?.slideTo(0);
-            setLooPlaySwiper(loopPlay);
-        }, [loopPlay]);
         const handleSessionExpire = React.useCallback(lodash.debounce(() => {
-            setLooPlaySwiper(false);
+            var _a;
+            (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
         }, 1000), []);
         React.useEffect(() => {
+            if (disabledListener)
+                return;
             const events = ['touchstart', 'touchcancel'];
             events.forEach((event) => {
                 window.addEventListener(event, handleSessionExpire);
@@ -20081,7 +20136,7 @@ Made in Italy` })));
                     window.removeEventListener(event, handleSessionExpire);
                 });
             };
-        }, [handleSessionExpire]);
+        }, [handleSessionExpire, disabledListener]);
         return (React.createElement("div", { id: 'sxp-render', 
             // className={style['clc-sxp-container']}
             style: { height: containerHeight, position: 'relative', pointerEvents } },
@@ -20091,12 +20146,12 @@ Made in Italy` })));
                         swiperRef.current.swiper.allowTouchMove = true;
                     }, 500);
                 }, onActiveIndexChange: (swiper) => {
-                    // setActiveIndex(swiper.activeIndex);
+                    setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
                     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
                 }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
                 return renderView(rec, index);
             }))));
-    };
+    });
     var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
 
     /*