pb-sxp-ui 1.0.12 → 1.0.14

package/dist/pb-ui.js

@@ -392,6 +392,10 @@
         }
         return fakeUserId;
     };
+    const getFeUserId = () => {
+        const fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
+        return lodash.isEmpty(fakeUserId);
+    };
 
     /*
      * @Author: binruan@chatlabs.com
@@ -8232,7 +8236,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 16:11:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-09 11:00:07
+     * @LastEditTime: 2024-04-16 19:27:48
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ExpandableText.tsx
      *
      */
@@ -8254,48 +8258,47 @@
         const _words = newWords.length > 1 && newWords.length < words.length ? newWords.slice(0, newWords.length - 1) : newWords;
         return _words.join(' ') + ' ';
     };
-    const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost }) => {
-        const [isShowMore, setIsShowMore] = React.useState(true);
-        const [isShow, setIsShow] = React.useState(false);
+    const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldText, unfoldText, isPost, onChange }) => {
+        const [isShowMore, setIsShowMore] = React.useState(false);
+        React.useState(false);
         const lineClamp = Number((style === null || style === void 0 ? void 0 : style.lineClamp) || 2);
         const multiRow = React.useRef(null);
         const handleClick = React.useCallback(() => {
             setIsShowMore(!isShowMore);
-        }, [isShowMore]);
+            onChange === null || onChange === void 0 ? void 0 : onChange(!isShowMore);
+        }, [isShowMore, onChange]);
         React.useMemo(() => {
             return !isShowMore && text.length > maxStr ? limitTextLastWholeWord(text, maxStr) + '...' : text;
         }, [text, maxStr, isShowMore]);
         React.useEffect(() => {
-            if (multiRow.current && isPost) {
-                setIsShowMore(true);
-                setTimeout(() => {
-                    var _a;
-                    setIsShow(false);
-                    try {
-                        const cs = (_a = window === null || window === void 0 ? void 0 : window.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, multiRow.current);
-                        const height = parseFloat(cs === null || cs === void 0 ? void 0 : cs.height);
-                        const lh = parseFloat(cs === null || cs === void 0 ? void 0 : cs.lineHeight);
-                        const fs = parseFloat(cs === null || cs === void 0 ? void 0 : cs.fontSize) + 6;
-                        const lineHeight = isNaN(lh) ? fs : lh;
-                        if (text && height > lineHeight * lineClamp) {
-                            setIsShowMore(false);
-                            setIsShow(true);
-                        }
-                    }
-                    catch (_b) { }
-                }, 100);
-            }
+            // if (multiRow.current && isPost) {
+            //   setIsShowMore(true);
+            //   setTimeout(() => {
+            //     setIsShow(false);
+            //     try {
+            //       const cs = window?.getComputedStyle?.(multiRow.current);
+            //       const height = parseFloat(cs?.height);
+            //       const lh = parseFloat(cs?.lineHeight);
+            //       const fs = parseFloat(cs?.fontSize) + 6;
+            //       const lineHeight = isNaN(lh) ? fs : lh;
+            //       if (text && height > lineHeight * lineClamp) {
+            //         setIsShowMore(false);
+            //         setIsShow(true);
+            //       }
+            //     } catch {}
+            //   }, 100);
+            // }
         }, [multiRow, text, lineClamp, style, isPost]);
         return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
             React.createElement("div", { ref: multiRow, style: {
                     overflow: 'hidden',
-                    WebkitLineClamp: !isShowMore ? lineClamp : '',
+                    WebkitLineClamp: isShowMore ? '' : lineClamp,
                     textOverflow: 'ellipsis',
                     display: '-webkit-box',
                     WebkitBoxOrient: 'vertical',
                     wordBreak: 'break-word'
                 }, dangerouslySetInnerHTML: { __html: text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>') } }),
-            isShow && text && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
+            text && isPost && (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick }, isShowMore ? unfoldText || 'show less' : foldText || 'show more'))));
     };
     var ExpandableText$1 = React.memo(ExpandableText);
 
@@ -11584,7 +11587,7 @@ Made in Italy` })));
             };
         }, [src, showVideo]);
         const handleClickToDetail = () => {
-            reportTagsView(index);
+            reportTagsView();
             setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
             setTimeout(() => {
                 var _a;
@@ -11692,7 +11695,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-10 10:58:24
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-15 16:48:54
+     * @LastEditTime: 2024-04-15 17:57:59
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
      *
      */
@@ -11719,7 +11722,7 @@ Made in Italy` })));
             if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
                 setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
             }
-            reportTagsView(cacheActiveIndex || 0);
+            reportTagsView();
             setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
             setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
             setTimeout(() => {
@@ -11736,7 +11739,7 @@ Made in Italy` })));
                 setRecData(waterFallData);
             }
         }, [waterFallData]);
-        const reportTagsView = React.useCallback((index) => {
+        const reportTagsView = React.useCallback(() => {
             var _a, _b, _c, _d, _e, _f;
             const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
             if (!rec)
@@ -11754,7 +11757,7 @@ Made in Italy` })));
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                    position: index + '',
+                    position: cacheActiveIndex + '',
                     contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
                     traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
                     hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
@@ -11765,7 +11768,7 @@ Made in Italy` })));
                     eventDescription: 'User click tags view contents'
                 }
             });
-        }, [recData, bffEventReport, viewTime, isFromHashtag]);
+        }, [recData, bffEventReport, viewTime, isFromHashtag, cacheActiveIndex]);
         React.useEffect(() => {
             if (openHashtag) {
                 setViewTime(new Date());
@@ -12229,7 +12232,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-08 18:44:58
+     * @LastEditTime: 2024-04-15 18:10:26
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
      *
      */
@@ -12282,7 +12285,7 @@ Made in Italy` })));
      * @Author: lewinlu@chatlabs.com
      * @Date: 2024-01-03 14:39:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-25 15:08:11
+     * @LastEditTime: 2024-04-15 18:08:25
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
      */
     const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
@@ -12302,9 +12305,9 @@ Made in Italy` })));
                 setIsLoad(true);
             }
         }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-        if (!isActive) {
-            return React.createElement("img", { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: { width, height, objectFit: 'cover' } });
-        }
+        // if (!isActive) {
+        //   return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
+        // }
         return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
             return (React.createElement(SwiperSlide, { key: url },
                 React.createElement(Picture, { src: url, width: width, height: height })));
@@ -12489,7 +12492,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-15 17:07:42
+     * @LastEditTime: 2024-04-16 18:26:41
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -12503,10 +12506,11 @@ Made in Italy` })));
         const curTime = React.useRef();
         const viewTime = React.useRef();
         const [isLoadMore, setIsLoadMore] = React.useState(false);
+        const [isShowMore, setIsShowMore] = React.useState(false);
         const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
         const { productView } = useEventReport();
         const isShowFingerTip = React.useMemo(() => {
-            return data.length > 0 && !loading;
+            return data.length > 0 && !loading && !getFeUserId;
         }, [data, loading]);
         const handleH5EnterLink = React.useCallback(() => {
             if (data.length <= 0) {
@@ -12665,20 +12669,47 @@ Made in Italy` })));
             }
             return null;
         }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
+        const onExpandableChange = React.useCallback((v) => {
+            setIsShowMore(v);
+        }, []);
+        const lineGradStyle = React.useMemo(() => {
+            return !isShowMore
+                ? {
+                    padding: '20px 0'
+                }
+                : {
+                    background: 'linear-gradient( 180deg, rgba(129,129,129,0) 0%, rgba(121,121,121,0.5) 5%, #616161 100%)',
+                    paddingTop: 20,
+                    paddingBottom: 20
+                };
+        }, [isShowMore]);
         const renderBottom = React.useCallback((rec, index) => {
             var _a, _b, _c, _d, _e, _f, _g;
             if (rec.video) {
                 return (React.createElement(React.Fragment, null,
-                    ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                    ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                     React.createElement("div", { className: 'clc-sxp-bottom' },
                         React.createElement(Nudge, { nudge: nudge }),
                         React.createElement("div", { className: 'clc-sxp-bottom-card' },
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
-                        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' }) }),
-                        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("div", { style: lineGradStyle },
+                            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.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
             }
             return null;
-        }, [descStyle, activeIndex, tempMap, resolver, tipText, nudge, hashTagStyle, globalConfig]);
+        }, [
+            descStyle,
+            activeIndex,
+            tempMap,
+            resolver,
+            tipText,
+            nudge,
+            hashTagStyle,
+            globalConfig,
+            onExpandableChange,
+            isShowMore,
+            lineGradStyle
+        ]);
         const renderLikeButton = React.useCallback((rec, index) => {
             var _a, _b;
             if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))