pb-sxp-ui 1.19.17 → 1.19.18

package/dist/pb-ui.js

@@ -18994,111 +18994,64 @@ Made in Italy` })));
     var NavBack$1 = React.memo(NavBack);
 
     const useVisibleHeight = () => {
-        var _a, _b;
         const [visibleHeight, setVisibleHeight] = React.useState(0);
-        const getDvhInPx = () => {
-            const detector = document.createElement('div');
-            detector.style.position = 'fixed';
-            detector.style.bottom = `${getHeightWithSafeArea()}px`;
-            detector.style.left = '0';
-            detector.style.height = '100dvh';
-            detector.style.visibility = 'hidden';
-            detector.style.zIndex = '-1';
-            document.body.appendChild(detector);
-            const dvhInPx = detector.clientHeight;
-            document.body.removeChild(detector);
-            return dvhInPx;
-        };
-        const getVhInPx = () => {
-            const detector = document.createElement('div');
-            detector.style.position = 'fixed';
-            detector.style.bottom = `${getHeightWithSafeArea()}px`;
-            detector.style.left = '0';
-            detector.style.height = '100vh';
-            detector.style.visibility = 'hidden';
-            detector.style.zIndex = '-1';
-            document.body.appendChild(detector);
-            const dvhInPx = detector.clientHeight;
-            document.body.removeChild(detector);
-            return dvhInPx;
-        };
-        const getFillAvailableInPx = () => {
-            const detector = document.createElement('div');
-            detector.style.position = 'fixed';
-            detector.style.bottom = `${getHeightWithSafeArea()}px`;
-            detector.style.left = '0';
-            detector.style.height = '-webkit-fill-available';
-            detector.style.visibility = 'hidden';
-            detector.style.zIndex = '-1';
-            document.body.appendChild(detector);
-            const dvhInPx = detector.clientHeight;
-            document.body.removeChild(detector);
-            return dvhInPx;
-        };
-        const getHeightWithSafeArea = () => {
-            const root = document.documentElement;
-            const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
-            // 处理可能的值（可能是 '0px', '34px' 等）
-            const numericValue = parseInt(value) || 0;
-            return numericValue;
-        };
-        const dvhToPx = (dvh) => {
-            return Math.round((dvh / 100) * document.documentElement.clientHeight);
-        };
-        // 检测是否启用了系统字体缩放
-        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        const isScaled = fontSize !== 52; // 默认 1rem = 16px
-        // 检测是否处于 Display Zoom 模式（通过屏幕宽高比间接判断）
-        const isZoomed = screen.width <= 375 && screen.height <= 667 && window.devicePixelRatio < 3;
-        const systemInfo = {
-            visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
-            innerHeight: window.innerHeight,
-            clientHeight: document.documentElement.clientHeight,
-            screenHeight: window.screen.height,
-            bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
-            agent: navigator.userAgent,
-            version: '1.19.17',
-            safeArea: getHeightWithSafeArea(),
-            dvh: dvhToPx(100),
-            dvhInPx: getDvhInPx(),
-            vhInPx: getVhInPx(),
-            fillAvailableInPx: getFillAvailableInPx(),
-            isScaled,
-            isZoomed,
-            meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
+        const getVisibleContentHeight = () => {
+            // 方法优先级：
+            // 1. visualViewport.height (最准确)
+            // 2. window.innerHeight (次之)
+            // 3. document.documentElement.clientHeight (fallback)
+            if (typeof window === 'undefined')
+                return 0;
+            let height = window.innerHeight;
+            // 优先使用 visualViewport
+            if (window.visualViewport) {
+                height = window.visualViewport.height;
+            }
+            // 验证高度合理性
+            if (height <= 0 || height > window.screen.height) {
+                height = window.innerHeight;
+            }
+            // 最终 fallback
+            if (height <= 0) {
+                height = document.documentElement.clientHeight;
+            }
+            return height;
         };
-        console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
-        if ('fundebug' in window) {
-            window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
-        }
         const updateHeight = React.useCallback(() => {
-            var _a, _b, _c;
-            const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-            const isScaled = fontSize !== 52; // 默认 1rem = 16px
-            const systemInfo = {
-                visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
-                innerHeight: window.innerHeight,
-                clientHeight: document.documentElement.clientHeight,
-                screenHeight: window.screen.height,
-                bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
-                agent: navigator.userAgent,
-                version: '1.19.17',
-                safeArea: getHeightWithSafeArea(),
-                dvh: dvhToPx(100),
-                dvhInPx: getDvhInPx(),
-                vhInPx: getVhInPx(),
-                fillAvailableInPx: getFillAvailableInPx(),
-                isScaled,
-                isZoomed,
-                meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
-            };
-            console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
+            var _a;
+            const visibleHeight = getVisibleContentHeight();
+            const screenHeight = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.height;
+            const ua = navigator.userAgent;
+            // Instagram 检测
+            const isInstagram = /Instagram/i.test(ua);
+            // Facebook 检测
+            const isFacebook = /FBAV|FBAN|FBSN/i.test(ua);
+            // 安全检查
+            if (!screenHeight || visibleHeight <= 0 || (!isInstagram && !isFacebook)) {
+                setVisibleHeight(visibleHeight);
+                return;
+            }
+            const ratio = visibleHeight / screenHeight;
+            const threshold = 0.9;
+            const h = screenHeight >= 900 ? screenHeight * 0.8 : screenHeight * 0.79;
+            // 当内容高度占屏幕高度90%以上时，使用按比例计算的高度
+            // 否则使用实际内容高度
+            const finalHeight = Math.round(ratio >= threshold ? h : visibleHeight);
             if ('fundebug' in window) {
+                const systemInfo = {
+                    ratio,
+                    h,
+                    finalHeight,
+                    visibleHeight,
+                    screenHeight,
+                    isInstagram,
+                    isFacebook,
+                    ua
+                };
                 window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
             }
-            const height = ((_c = document === null || document === void 0 ? void 0 : document.documentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
-            setVisibleHeight(height);
-        }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
+            setVisibleHeight(finalHeight);
+        }, [getVisibleContentHeight]);
         React.useEffect(() => {
             // 初始计算
             updateHeight();
@@ -19116,8 +19069,6 @@ Made in Italy` })));
             if ('virtualKeyboard' in navigator) {
                 navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
             }
-            // 定期检查（应对某些特殊情况）
-            const interval = setInterval(updateHeight, 1000);
             return () => {
                 events.forEach((event) => {
                     window.removeEventListener(event, updateHeight);
@@ -19129,7 +19080,6 @@ Made in Italy` })));
                 if ('virtualKeyboard' in navigator) {
                     navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
                 }
-                clearInterval(interval);
             };
         }, [updateHeight]);
         return visibleHeight;
@@ -19143,7 +19093,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, hashTagRightMargin, tagList = [], defaultData }) => {
+    const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
         const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
@@ -19332,29 +19282,10 @@ Made in Italy` })));
             }
             return minusHeight;
         }, [globalConfig]);
-        const getHeightWithSafeArea = () => {
-            const root = document.documentElement;
-            const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
-            // 处理可能的值（可能是 '0px', '34px' 等）
-            const numericValue = parseInt(value) || 0;
-            return numericValue;
-        };
-        const getDvhInPx = () => {
-            const detector = document.createElement('div');
-            detector.style.position = 'fixed';
-            detector.style.bottom = `${getHeightWithSafeArea()}px`;
-            detector.style.left = '0';
-            detector.style.height = '100dvh';
-            detector.style.visibility = 'hidden';
-            detector.style.zIndex = '-1';
-            document.body.appendChild(detector);
-            const dvhInPx = detector.clientHeight;
-            document.body.removeChild(detector);
-            return dvhInPx;
-        };
         const height = React.useMemo(() => {
-            return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
-        }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
+            const h = containerHeight || visibleHeight;
+            return h - minusHeight - tagHeight;
+        }, [containerHeight, visibleHeight, minusHeight, tagHeight]);
         const visList = React.useMemo(() => {
             var _a;
             const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -19495,9 +19426,6 @@ Made in Italy` })));
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
                 top += minusHeight;
             }
-            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
-                top += getHeightWithSafeArea();
-            }
             if (rec === null || rec === void 0 ? void 0 : rec.video) {
                 return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
                         position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -19732,9 +19660,6 @@ Made in Italy` })));
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
                 top += minusHeight;
             }
-            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
-                top += getHeightWithSafeArea();
-            }
             return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
                     position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
                     visibility: ((_c = (_b = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
@@ -19775,7 +19700,7 @@ Made in Italy` })));
             isReload,
             renderToggleButton
         ]);
-        return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
+        return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
             (data === null || data === void 0 ? void 0 : data.length) < 1 && loading ? (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
                 React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
                 waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
@@ -19837,10 +19762,10 @@ Made in Italy` })));
                     renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
                 React.createElement(WaterFall$1, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props)),
                 React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
-                openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'var(--safe-area-inset-bottom,0px)' } }))))),
+                openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0 } }))))),
             (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
                     position: 'fixed',
-                    bottom: 'var(--safe-area-inset-bottom,0px)',
+                    bottom: 0,
                     left: 0,
                     right: 0,
                     width: '100%',