pb-sxp-ui 1.0.46 → 1.0.48

package/dist/pb-ui.js

@@ -11690,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, _j, _k;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
         const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
         const [list, setList] = React.useState();
@@ -11767,16 +11767,12 @@ Made in Italy` })));
                     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", { 
-                    // 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", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
+                        height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.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'))))));
+            React.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+            React.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.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 }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
     }
 
     var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -12067,6 +12063,33 @@ Made in Italy` })));
         const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
         const videoId = `pb-cache-video-${index}`;
         const videoEleRef = React.useRef(null);
+        const blur = React.useMemo(() => {
+            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+        }, [videoPostConfig]);
+        const translateY = React.useMemo(() => {
+            var _a;
+            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
+                ? `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 blurBgSrc = React.useMemo(() => {
+            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]);
         React.useEffect(() => {
             if (!videoRef)
                 return;
@@ -12107,15 +12130,39 @@ Made in Italy` })));
                 setIsFirstPlay(false);
             }
         }, [bffEventReport, data, index, isFirstPlay, videoRef]);
+        const handLoadeddata = React.useCallback(() => {
+            var _a;
+            if (!videoRef || isBgColor || firstFrameSrc)
+                return;
+            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 = () => {
+                const video = videoDomRef;
+                const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+                const ctx = canvas.getContext('2d');
+                const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
+                const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+                canvas.height = targetHeight;
+                canvas.width = targetWidth;
+                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                setFirstFrameSrc(canvas.toDataURL());
+            };
+            setFrameImg();
+            setTimeout(() => {
+                setFrameImg();
+            }, 500);
+        }, [videoRef, isBgColor, rec, firstFrameSrc]);
         const handleLoadedmetadata = React.useCallback(() => {
             if (!videoRef)
                 return;
-            if (activeIndex !== index) {
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
-                videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
-            }
+            handLoadeddata();
+            // if (activeIndex !== index) {
+            //   videoRef?.play();
+            //   videoRef?.pause();
+            // }
             setIsLoadFinish(true);
-        }, [activeIndex, index, videoRef]);
+        }, [videoRef, handLoadeddata]);
         const handleCanplay = React.useCallback(() => {
             setIsLoadFinish(true);
         }, []);
@@ -12176,57 +12223,7 @@ Made in Italy` })));
                     }
                 });
             }
-        }, [data, index, bffEventReport, videoRef]);
-        const blur = React.useMemo(() => {
-            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-        }, [videoPostConfig]);
-        const translateY = React.useMemo(() => {
-            var _a;
-            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
-                ? `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 blurBgSrc = React.useMemo(() => {
-            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 || isBgColor)
-                return;
-            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 = () => {
-                const video = videoDomRef;
-                const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-                const ctx = canvas.getContext('2d');
-                const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
-                const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
-                canvas.height = targetHeight;
-                canvas.width = targetWidth;
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                setFirstFrameSrc(canvas.toDataURL());
-            };
-            setFrameImg();
-            setTimeout(() => {
-                setFrameImg();
-            }, 500);
-        }, [videoRef, isBgColor, rec]);
+        }, [data, index, bffEventReport, videoRef, activeIndex]);
         React.useEffect(() => {
             if (!isActive || !videoRef)
                 return;
@@ -12240,6 +12237,7 @@ Made in Italy` })));
             if (!dom && !dom2)
                 return;
             videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
+            videoRef.poster('https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240218/fsTan2fgYKJWrCpJtGZPogm0NnvdT1708239153661.jpeg');
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
@@ -12691,7 +12689,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
-    const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [] }) => {
+    const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
         var _a, _b, _c, _d, _e, _f, _g;
         const { schema } = useEditor();
         const [activeIndex, setActiveIndex] = React.useState(0);
@@ -12747,7 +12745,7 @@ Made in Italy` })));
             if (!firstRef.current && !videoRef) {
                 firstRef.current = true;
                 const player = TCPlayer('player-container-id', {
-                    licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+                    licenseUrl, // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
                     controls: false,
                     autoplay: false,
                     loop: false,
@@ -12760,7 +12758,7 @@ Made in Italy` })));
                     setVideoRef(player);
                 });
             }
-        }, [videoRef]);
+        }, [videoRef, licenseUrl]);
         React.useEffect(() => {
             if (!isInit)
                 handleH5EnterLink();
@@ -13493,15 +13491,16 @@ Made in Italy` })));
                 renderBottom(rec, index),
                 renderLikeButton(rec, index)));
         };
-        return (React.createElement("div", { style: {
+        return (React.createElement("div", { className: css.css({
                 width: '100%',
                 height: containerHeight,
                 display: 'flex',
                 boxSizing: 'border-box',
                 gap: 16,
                 pointerEvents: 'none',
-                userSelect: 'none'
-            } }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
+                userSelect: 'none',
+                transform: 'scale(0.7) translateX(-22%) translateY(-140px)'
+            }) }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
             return renderView(rec, index);
         })));
     };
@@ -13576,7 +13575,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-25 17:24:59
+     * @LastEditTime: 2024-04-30 11:06:08
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
      *
      */
@@ -13592,7 +13591,7 @@ Made in Italy` })));
     Object.values(_materials_).forEach((v) => {
         RESOLVER[v.extend.type] = v;
     });
-    const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain }) => {
+    const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl }) => {
         var _a, _b, _c, _d, _e, _f;
         const utmVal = React.useMemo(() => {
             var _a;
@@ -13603,7 +13602,7 @@ Made in Italy` })));
             React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList, tagList }) => {
                     var _a;
                     return (React.createElement(React.Fragment, null,
-                        React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
+                        React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
                         React.createElement(Popup, null)));
                 } })));
     };