pb-sxp-ui 1.0.22 → 1.0.24

package/dist/index.cjs

@@ -8248,7 +8248,7 @@ var Modal$1 = React.memo(Modal);
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 13:49:29
+ * @LastEditTime: 2024-04-18 14:33:15
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
  *
  */
@@ -8293,7 +8293,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
         }
         multiRowCopy.current.style.display = 'none';
     }, [isPost]);
-    return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
+    return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
         React.createElement("div", { ref: multiRow, style: {
                 overflow: 'hidden',
                 WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
@@ -9702,7 +9702,7 @@ var Scroll$1 = React.memo(Scroll);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-16 14:50:13
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 19:03:01
+ * @LastEditTime: 2024-04-18 12:32:49
  * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
  *
  */
@@ -9718,7 +9718,7 @@ const Img = ({ src, rec, item, index }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (React.createElement("div", { ref: ref, hidden: !src },
+    return (React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
         React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
 };
 var Img$1 = React.memo(Img);
@@ -11994,7 +11994,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
     const videoRef = React.useRef(null);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
     const videoStartTime = React.useRef(0);
-    const [isLoad, setIsLoad] = React.useState(false);
+    const [isLoadFinish, setIsLoadFinish] = React.useState(false);
+    const [isFirstPlay, setIsFirstPlay] = React.useState(true);
     const { isActive } = useSwiperSlide();
     React.useEffect(() => {
         if (!videoRef.current)
@@ -12010,11 +12011,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         setIsPauseVideo(false);
         const item = data[index];
-        if (item && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
+        if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
             videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
             const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
             const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-            const playType = '1';
+            const playType = isFirstPlay ? '0' : '1';
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playVideo',
@@ -12030,72 +12031,41 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
                     traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                 }
             });
+            setIsFirstPlay(false);
         }
-        if (!isLoad) {
-            setIsLoad(true);
-        }
-    }, [bffEventReport, data, index, isLoad]);
+    }, [bffEventReport, data, index, isFirstPlay]);
     const handleLoadedMetadata = React.useCallback(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const item = data[index];
-        if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-            const playType = '0';
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'playVideo',
-                    eventDescription: 'User played the video',
-                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                    playType,
-                    startTime: videoCurrentTime,
-                    videoDuration,
-                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                    position: index + '',
-                    contentFormat: 'video',
-                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                }
-            });
-        }
-        setTimeout(() => {
-            var _a;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }, 0);
-    }, [index, bffEventReport, data, isLoad]);
+        setIsLoadFinish(true);
+    }, []);
     const handleClickVideo = React.useCallback((type) => () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!isLoad)
+        var _a, _b, _c, _d, _e;
+        if (!isLoadFinish)
             return;
-        data[index];
-        ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
                     return;
-                (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
                 setIsPauseVideo(false);
                 break;
             case 'pause':
                 if (isPause)
                     return;
-                (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
                 setIsPauseVideo(true);
                 break;
             default:
                 if (isPause) {
-                    (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
+                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
                 }
                 else {
-                    (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
         }
-    }, [data, index, isLoad]);
+    }, [isLoadFinish]);
     const onPause = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const item = data[index];
@@ -12121,16 +12091,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         }
     }, [data, index, bffEventReport]);
     React.useEffect(() => {
-        var _a, _b, _c;
-        if (data.length <= 0)
-            return;
+        var _a, _b;
         if (!videoRef.current)
             return;
         setIsPauseVideo(false);
-        if (!isActive) {
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
-            return;
-        }
         if (!videoRef.current.src) {
             const videoSrc = rec.video.url;
             // if (videoSrc.includes('.m3u8')) {
@@ -12150,25 +12114,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             videoRef.current.setAttribute('x5-playsinline', 'true');
             videoRef.current.setAttribute('webkit-playsinline', 'true');
         }
-        else {
-            videoRef.current.play();
-        }
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
+        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
         return () => {
             var _a, _b;
             (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
             (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
         };
-    }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
+    }, [handleLoadedMetadata, handlePlaying, rec.video]);
+    React.useEffect(() => {
+        var _a;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
+            return;
+        if (isActive) {
+            videoRef.current.play();
+        }
+        else {
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+    }, [isActive, isLoadFinish]);
     /*
     打开/关闭hashtag暂停/播放视频
     */
     React.useEffect(() => {
         var _a, _b, _c;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-        if (!isActive)
+        if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         if (!isPause && openHashtag) {
             (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
         }
@@ -12189,11 +12161,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         };
     }, [handleClickVideo, isActive]);
     const renderPoster = React.useMemo(() => {
-        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
+        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
             return null;
         }
-        return (React.createElement("img", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
-    }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+        return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
+    }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
     React.useEffect(() => {
         const handleBeforeUnload = () => {
             var _a, _b;
@@ -12269,35 +12241,21 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 18:59:40
+ * @LastEditTime: 2024-04-18 10:30:17
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
  *
  */
 const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = React.useState(false);
-    useSxpDataSource();
     const onLoad = (img) => {
-        const aspectRatio = img.height / img.width;
+        const aspectRatio = img.naturalHeight / img.naturalWidth;
         const targetAspectRatio = 16 / 9;
         const tolerance = 0.05; // 允许的宽高比误差范围
         if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
             setBlur(true);
         }
     };
-    React.useCallback((src, style) => {
-        if (src === '' || !src)
-            return;
-        return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (React.createElement("picture", null,
-            React.createElement("source", { type: 'image/avif', srcSet: src }),
-            React.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
-            React.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
-            React.createElement("img", { src: src, style: style, onLoad: (e) => {
-                    onLoad(e.target);
-                } }))) : (React.createElement("img", { src: src, style: style, onLoad: (e) => {
-                onLoad(e.target);
-            } }));
-    }, []);
     return (React.createElement("div", { style: {
             overflow: 'hidden',
             height,
@@ -12468,7 +12426,7 @@ function withBindDataSource(Component) {
  * @Author: binruan@chatlabs.com
  * @Date: 2023-12-26 16:11:34
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-11 18:14:05
+ * @LastEditTime: 2024-04-18 14:36:53
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
  *
  */
@@ -12502,7 +12460,7 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
             const Component = withBindDataSource(t);
             const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
             const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
-            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
+            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
         }
         else {
             return null;
@@ -12536,7 +12494,7 @@ const Nudge = ({ nudge }) => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-17 10:30:08
+ * @LastEditTime: 2024-04-18 16:49:34
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -12737,10 +12695,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     React.createElement("div", { className: 'clc-sxp-bottom-card' },
                         React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
                     React.createElement("div", null,
-                        React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign({}, descStyle
-                            // textShadow: globalConfig?.isOpenTextShadow ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none'
-                            ), onChange: onExpandableChange }),
-                        React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
+                        React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
+                        React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
         }
         return null;
     }, [