pb-sxp-ui 1.0.45 → 1.0.46

package/dist/pb-ui.js

@@ -10076,7 +10076,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-04-07 14:07:12
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-12 17:39:45
+     * @LastEditTime: 2024-04-29 19:55:53
      * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
      *
      */
@@ -10116,6 +10116,10 @@ Made in Italy` })));
                                     label: 'hashtag描述',
                                     value: 'hashTagDesc'
                                 },
+                                {
+                                    label: 'hashtag描述超链',
+                                    value: 'hashTagLink'
+                                },
                                 {
                                     label: '标题',
                                     value: 'title'
@@ -10199,8 +10203,8 @@ Made in Italy` })));
                     ]
                 },
                 {
-                    type: 'TextMargin',
-                    name: ['props', 'buttonStyle']
+                    type: 'TextPadding',
+                    name: ['props', 'buttonBgStyle']
                 },
                 {
                     type: 'Group',
@@ -10233,6 +10237,28 @@ Made in Italy` })));
                     name: ['props', 'buttonStyle']
                 }
             ]
+        },
+        {
+            title: '按钮背景样式',
+            child: [
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['props', 'buttonBgStyle', 'backgroundColor'],
+                    initialValue: '#fff'
+                },
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'buttonBgStyle', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
+                }
+            ]
         }
     ];
 
@@ -11664,7 +11690,7 @@ Made in Italy` })));
                 React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
     };
     function WaterfallList(_a) {
-        var _b, _c, _d, _e, _f, _g, _h;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
         const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
         const [list, setList] = React.useState();
@@ -11734,17 +11760,23 @@ Made in Italy` })));
         };
         return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
             React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
-            React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
-                    bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
-                } },
-                React.createElement("div", { className: 'list-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
-                React.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'list-collection', onClick: handleClickLink, style: { marginBottom: props === null || props === void 0 ? void 0 : props.space } }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
+            React.createElement("div", { className: 'list-scroll', ref: containerRef },
+                React.createElement("div", { className: 'list-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
+                React.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), { marginBottom: props === null || props === void 0 ? void 0 : props.space }) }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
                 React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
                     return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
                 })),
-                React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
-            React.createElement("div", { className: 'list-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
-                React.createElement("button", { className: 'list-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'))))));
+                React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
+                React.createElement("div", { 
+                    // hidden={!data?.tag?.link}
+                    style: {
+                        height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
+                    } })),
+            React.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+            React.createElement("div", { 
+                // hidden={!data?.tag?.link}
+                className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+                React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
     }
 
     var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -11855,7 +11887,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-07 15:42:10
+     * @LastEditTime: 2024-04-29 19:08:34
      * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\index.tsx
      *
      */
@@ -11868,7 +11900,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-07 16:22:28
+     * @LastEditTime: 2024-04-30 10:13:13
      * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\material.tsx
      *
      */
@@ -11895,6 +11927,12 @@ Made in Italy` })));
                         textAlign: 'center',
                         color: '#000'
                     },
+                    hashTagLink: {
+                        textAlign: 'center',
+                        color: '#757575',
+                        fontSize: 12,
+                        textDecoration: 'underline'
+                    },
                     title: {
                         fontSize: 12,
                         color: '#000'
@@ -11913,6 +11951,14 @@ Made in Italy` })));
                     textAlign: 'center',
                     color: '#fff',
                     borderRadius: 25
+                },
+                buttonBgStyle: {
+                    backgroundColor: '#fff',
+                    height: 52,
+                    paddingTop: 20,
+                    paddingLeft: 20,
+                    paddingRight: 20,
+                    paddingBottom: 20
                 }
             }
         },
@@ -12144,11 +12190,25 @@ Made in Italy` })));
             var _a;
             return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
         }, [firstFrameSrc, rec]);
+        const blurStyle = React.useMemo(() => {
+            return blur
+                ? {
+                    filter: 'blur(10px)',
+                    transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+                }
+                : {};
+        }, [blur]);
+        const isBgColor = React.useMemo(() => {
+            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
+        }, [videoPostConfig]);
+        const bgStyle = React.useMemo(() => {
+            return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
+        }, [videoPostConfig, isBgColor]);
         const handLoadeddata = React.useCallback(() => {
             var _a;
-            if (!videoRef)
+            if (!videoRef || isBgColor)
                 return;
-            const videoDomRef = document.getElementById(`${videoId}_html5_api`);
+            const videoDomRef = document.getElementById('player-container-id_html5_api');
             if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
                 return;
             const setFrameImg = () => {
@@ -12166,7 +12226,7 @@ Made in Italy` })));
             setTimeout(() => {
                 setFrameImg();
             }, 500);
-        }, [videoRef]);
+        }, [videoRef, isBgColor, rec]);
         React.useEffect(() => {
             if (!isActive || !videoRef)
                 return;
@@ -12253,24 +12313,11 @@ Made in Italy` })));
                 window.removeEventListener('beforeunload', handleBeforeUnload);
             };
         }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-        const blurStyle = React.useMemo(() => {
-            return blur
-                ? {
-                    filter: 'blur(10px)',
-                    transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
-                }
-                : {};
-        }, [blur]);
         if (!rec.video) {
             return null;
         }
-        return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-                position: 'relative',
-                width: '100%',
-                height,
-                overflow: 'hidden'
-            } },
-            React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
+        return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
+            !isBgColor && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
             React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
             React.createElement("div", { style: {
                     position: 'absolute',
@@ -12345,7 +12392,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-26 14:33:25
+     * @LastEditTime: 2024-04-29 18:57:05
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
      *
      */
@@ -12368,13 +12415,14 @@ Made in Italy` })));
                 }
                 : {};
         }, [blur]);
-        return (React.createElement("div", { style: {
-                overflow: 'hidden',
-                height,
-                width: '100%',
-                position: 'relative'
-            } },
-            React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
+        const isBgColor = React.useMemo(() => {
+            return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgWay) === '1';
+        }, [imgUrlsPostConfig]);
+        const bgStyle = React.useMemo(() => {
+            return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
+        }, [imgUrlsPostConfig, isBgColor]);
+        return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
+            !isBgColor && (React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
             blur && (React.createElement(FormatImage$1, { src: src, style: {
                     width: '100%',
                     height: '100%',