pb-sxp-ui 1.15.13-alpha.5 → 1.15.15-alpha.1

package/es/core/components/DiyStoryPreview/VideoWidget.d.ts

@@ -12,8 +12,10 @@ interface IVideoWidgetProps {
     videoPostConfig?: postConfigType;
     swiperRef?: any;
     videoPlayIcon?: string;
-    handleUpdateTimeline?: (index: number, v: number) => void;
+    onUpdateTimeLine?: (index: number, v: number) => void;
     loopPlay: any;
+    onPlay?: (index: number, v: number) => void;
+    onPause?: () => void;
 }
 export interface IVideoWidgetRef {
     play: () => void;

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

@@ -4,7 +4,7 @@ import { useIconLink } from '../SxpPageRender/useIconLink';
 import { mountVideoPlayerAtNode } from '../SxpPageRender/VideoWidget/VideoPlayer';
 import FormatImage from '../SxpPageRender/FormatImage';
 import { useSxpDataSource } from '../../../core/hooks';
-const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
+const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
     const { isActive } = useSwiperSlide();
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const videoRef = useRef(null);
@@ -108,15 +108,6 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
                 break;
         }
     }, [isLoadFinish]);
-    const onPause = useCallback(() => {
-        var _a, _b, _c, _d, _e, _f;
-        const item = data[index];
-        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-            const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
-        }
-    }, [data, index, bffEventReport]);
     const blur = useMemo(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -144,7 +135,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
         if (!videoRef.current)
             return;
         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);
+        onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(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)) {
@@ -167,9 +158,15 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
     };
     const handlePause = () => {
         setIsPauseVideo(true);
+        onPause === null || onPause === void 0 ? void 0 : onPause();
+    };
+    const handlePlay = () => {
+        var _a;
+        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);
+        onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
     };
     useEffect(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!isActive)
             return;
         const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
@@ -199,15 +196,17 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
         }
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
         (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
+        (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
         return () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
                 (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
             setIsLoadFinish(false);
             (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
             (_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);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
+            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
         };
     }, [isActive]);
     const renderPoster = useMemo(() => {

package/es/core/components/DiyStoryPreview/index.d.ts

@@ -26,6 +26,8 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
     loopPlay?: boolean;
     pointerEvents?: any;
     onUpdateTimeLine: (index: number, curTime: number) => void;
+    onPlay: (index: number, curTime: number) => void;
+    onPause: () => void;
     disabledListener?: boolean;
 };
 export interface IDiyStoryPreviewRef {
@@ -33,7 +35,6 @@ export interface IDiyStoryPreviewRef {
     pause: () => void;
     slideTo: (n: number) => void;
     isPlaying: () => boolean;
-    setLoopPlay: (v: boolean) => void;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
     appDomain?: string | undefined;
@@ -43,6 +44,8 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     loopPlay?: boolean | undefined;
     pointerEvents?: any;
     onUpdateTimeLine: (index: number, curTime: number) => void;
+    onPlay: (index: number, curTime: number) => void;
+    onPause: () => void;
     disabledListener?: boolean | undefined;
 } & React.RefAttributes<IDiyStoryPreviewRef>>>;
 export default _default;

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

@@ -194,7 +194,7 @@ Object.values(_materials_).forEach((v) => {
 });
 const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
 const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-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 DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener, onPlay, onPause }, ref) => {
     const videoWidgetRef = useRef(null);
     const swiperRef = useRef(null);
     const [curIndex, setCurIndex] = useState(0);
@@ -227,10 +227,6 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
             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);
             }
         };
     });
@@ -247,7 +243,7 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
     const renderContent = (rec, index) => {
         const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
         if (isVideo) {
-            return (React.createElement(VideoWidget, 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 })));
+            return (React.createElement(VideoWidget, 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, onUpdateTimeLine: onUpdateTimeLine, onPlay: onPlay, onPause: onPause })));
         }
         else {
             return (React.createElement(PictureGroup, { 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 }));

package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts

@@ -12,8 +12,10 @@ interface IVideoWidgetProps {
     videoPostConfig?: postConfigType;
     swiperRef?: any;
     videoPlayIcon?: string;
-    handleUpdateTimeline?: (index: number, v: number) => void;
+    onUpdateTimeLine?: (index: number, v: number) => void;
     loopPlay: any;
+    onPlay?: (index: number, v: number) => void;
+    onPause?: () => void;
 }
 export interface IVideoWidgetRef {
     play: () => void;

package/lib/core/components/DiyStoryPreview/VideoWidget.js

@@ -7,7 +7,7 @@ const useIconLink_1 = require("../SxpPageRender/useIconLink");
 const VideoPlayer_1 = require("../SxpPageRender/VideoWidget/VideoPlayer");
 const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
 const hooks_1 = require("../../../core/hooks");
-const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
+const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
     const { isActive } = (0, react_2.useSwiperSlide)();
     const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
     const videoRef = (0, react_1.useRef)(null);
@@ -111,15 +111,6 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
                 break;
         }
     }, [isLoadFinish]);
-    const onPause = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f;
-        const item = data[index];
-        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-            const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
-        }
-    }, [data, index, bffEventReport]);
     const blur = (0, react_1.useMemo)(() => {
         return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
     }, [videoPostConfig]);
@@ -147,7 +138,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
         if (!videoRef.current)
             return;
         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);
+        onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(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)) {
@@ -170,9 +161,15 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
     };
     const handlePause = () => {
         setIsPauseVideo(true);
+        onPause === null || onPause === void 0 ? void 0 : onPause();
+    };
+    const handlePlay = () => {
+        var _a;
+        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);
+        onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
     };
     (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!isActive)
             return;
         const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
@@ -202,15 +199,17 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
         }
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
         (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
+        (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
         return () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
                 (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
             setIsLoadFinish(false);
             (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
             (_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);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
+            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
         };
     }, [isActive]);
     const renderPoster = (0, react_1.useMemo)(() => {

package/lib/core/components/DiyStoryPreview/index.d.ts

@@ -26,6 +26,8 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
     loopPlay?: boolean;
     pointerEvents?: any;
     onUpdateTimeLine: (index: number, curTime: number) => void;
+    onPlay: (index: number, curTime: number) => void;
+    onPause: () => void;
     disabledListener?: boolean;
 };
 export interface IDiyStoryPreviewRef {
@@ -33,7 +35,6 @@ export interface IDiyStoryPreviewRef {
     pause: () => void;
     slideTo: (n: number) => void;
     isPlaying: () => boolean;
-    setLoopPlay: (v: boolean) => void;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
     appDomain?: string | undefined;
@@ -43,6 +44,8 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     loopPlay?: boolean | undefined;
     pointerEvents?: any;
     onUpdateTimeLine: (index: number, curTime: number) => void;
+    onPlay: (index: number, curTime: number) => void;
+    onPause: () => void;
     disabledListener?: boolean | undefined;
 } & React.RefAttributes<IDiyStoryPreviewRef>>>;
 export default _default;

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

@@ -197,7 +197,7 @@ Object.values(_materials_).forEach((v) => {
 });
 const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
 const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-const DiyStoryPreview = (0, react_1.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 DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener, onPlay, onPause }, ref) => {
     const videoWidgetRef = (0, react_1.useRef)(null);
     const swiperRef = (0, react_1.useRef)(null);
     const [curIndex, setCurIndex] = (0, react_1.useState)(0);
@@ -230,10 +230,6 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
             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);
             }
         };
     });
@@ -250,7 +246,7 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
     const renderContent = (rec, index) => {
         const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
         if (isVideo) {
-            return (react_1.default.createElement(VideoWidget_1.default, 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 })));
+            return (react_1.default.createElement(VideoWidget_1.default, 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, onUpdateTimeLine: onUpdateTimeLine, onPlay: onPlay, onPause: onPause })));
         }
         else {
             return (react_1.default.createElement(PictureGroup_1.default, { 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 }));

package/package.json

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