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

package/dist/index.js

@@ -19460,7 +19460,7 @@ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, s
 };
 var PictureGroup$1 = memo(PictureGroup);
 
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
+const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
     const { isActive } = useSwiperSlide();
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const videoRef = useRef(null);
@@ -19472,6 +19472,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
     const videoId = `pb-cache-video-${index}`;
     const hlsRef = useRef(null);
+    const loopPlayRef = useRef(loopPlay);
+    useEffect(() => {
+        loopPlayRef.current = loopPlay;
+    }, [loopPlay]);
+    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);
+            }
+        };
+    });
     useEffect(() => {
         if (!videoRef.current)
             return;
@@ -19482,7 +19514,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
     }, []);
     const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-    const handlePlaying = useCallback(() => {
+    useCallback(() => {
         var _a, _b, _c, _d, _e, _f;
         setIsPauseVideo(false);
         const item = data[index];
@@ -19499,9 +19531,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
         setIsLoadFinish(true);
     }, []);
-    useCallback((type) => () => {
-        var _a, _b, _c, _d, _e;
-        if (!isLoadFinish)
+    const handleClickVideo = 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) {
@@ -19519,13 +19551,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 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;
@@ -19549,7 +19581,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             ? `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 = useCallback(() => {
+    useCallback(() => {
         if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
             return;
         const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
@@ -19563,35 +19595,34 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         setFirstFrameSrc(canvas.toDataURL());
     }, []);
     const handleTimeUpload = 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);
+    };
     useEffect(() => {
         var _a, _b, _c;
         if (!isActive)
@@ -19637,7 +19668,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             (_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 = useMemo(() => {
         if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
             return null;
@@ -19680,18 +19711,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             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 = 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
  *
  */
@@ -19879,9 +19910,10 @@ Object.values(_materials_).forEach((v) => {
 });
 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] = useState(loopPlay);
+const DiyStoryPreview = 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 = useRef(null);
     const swiperRef = useRef(null);
+    const [curIndex, setCurIndex] = useState(0);
     useMemo(() => {
         let minusHeight = 0;
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -19892,6 +19924,32 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
         }
         return containerHeight - minusHeight;
     }, [globalConfig, containerHeight, tagList]);
+    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') {
@@ -19906,10 +19964,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
     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 }));
         }
     };
     useMemo(() => {
@@ -20047,16 +20105,13 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
             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]);
-    useEffect(() => {
-        if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
-            return;
-        // swiperRef?.current?.swiper?.slideTo(0);
-        setLooPlaySwiper(loopPlay);
-    }, [loopPlay]);
     const handleSessionExpire = useCallback(debounce(() => {
-        setLooPlaySwiper(false);
+        var _a;
+        (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
     }, 1000), []);
     useEffect(() => {
+        if (disabledListener)
+            return;
         const events = ['touchstart', 'touchcancel'];
         events.forEach((event) => {
             window.addEventListener(event, handleSessionExpire);
@@ -20066,7 +20121,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
                 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 } },
@@ -20076,12 +20131,12 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
                     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 = memo(DiyStoryPreview);
 
 /*