pb-sxp-ui 1.19.17 → 1.19.19

package/dist/pb-ui.js

@@ -10320,6 +10320,106 @@
     };
     var CommodityGroup$1 = React.memo(CommodityGroup);
 
+    function useVisibleHeight() {
+        const [visibleHeight, setVisibleHeight] = React.useState(0);
+        const [bottomHeight, setBottomHeight] = React.useState(0);
+        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;
+        };
+        const updateHeight = React.useCallback(() => {
+            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 isRatio = ratio >= threshold && ratio !== 1;
+            const finalHeight = isRatio ? Math.round(h) : visibleHeight;
+            if (isRatio) {
+                setBottomHeight(screenHeight - Math.round(h));
+            }
+            else {
+                setBottomHeight(0);
+            }
+            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: {} } });
+            }
+            setVisibleHeight(finalHeight);
+        }, [getVisibleContentHeight]);
+        React.useEffect(() => {
+            // 初始计算
+            updateHeight();
+            // 事件监听
+            const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
+            events.forEach((event) => {
+                window.addEventListener(event, updateHeight);
+            });
+            // visualViewport 监听（最重要）
+            if (window.visualViewport) {
+                window.visualViewport.addEventListener('resize', updateHeight);
+                window.visualViewport.addEventListener('scroll', updateHeight);
+            }
+            // 键盘弹出/收起监听（移动端重要）
+            if ('virtualKeyboard' in navigator) {
+                navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
+            }
+            return () => {
+                events.forEach((event) => {
+                    window.removeEventListener(event, updateHeight);
+                });
+                if (window.visualViewport) {
+                    window.visualViewport.removeEventListener('resize', updateHeight);
+                    window.visualViewport.removeEventListener('scroll', updateHeight);
+                }
+                if ('virtualKeyboard' in navigator) {
+                    navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
+                }
+            };
+        }, [updateHeight]);
+        return { visibleHeight, bottomHeight };
+    }
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-11-02 18:34:34
@@ -10329,15 +10429,17 @@
      *
      */
     const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-    const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
+    const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState }) => {
         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;
+        const { visibleHeight, bottomHeight } = useVisibleHeight();
         const touchRef = React.useRef(null);
         const fTouchRef = React.useRef(null);
         const touchMoveRef = React.useRef(null);
         const ref = React.useRef(null);
         const modalRef = React.useRef(null);
-        const MODAL_DEF_TRANS = fullHeight * 0.2;
-        const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
+        const modalHeight = fullHeight || visibleHeight;
+        const MODAL_DEF_TRANS = modalHeight * 0.2;
+        const MODAL_DEF_CON_H = isFullScreen ? modalHeight : modalHeight * 0.8;
         const [modalTrans, setModalTrans] = React.useState(MODAL_DEF_TRANS);
         const [isShow, setIsShow] = React.useState(false);
         const modalEleRef = React.useRef(null);
@@ -10385,17 +10487,17 @@
         }, [_popup, openState, globalConfig, schema]);
         React.useEffect(() => {
             const trapFocus = (element) => {
-                var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
-                var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
-                var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
-                var KEYCODE_TAB = 9;
+                const focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+                const firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
+                const lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
+                const KEYCODE_TAB = 9;
                 element.addEventListener('keydown', function (e) {
                     if (e.key === 'Escape' || e.key === 'Esc') {
                         // 在这里执行按下 Esc 键时的操作
                         handleClose();
                         e.preventDefault();
                     }
-                    var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
+                    const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
                     if (!isTabPressed) {
                         return;
                     }
@@ -10477,12 +10579,12 @@
             }
             touchMoveRef.current = false;
         };
-        return ReactDOM__namespace.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
+        return ReactDOM__namespace.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)', bottom: bottomHeight + 'px' }, modalStyle), onClick: handleClose },
             React.createElement("div", { style: {
                     position: 'relative',
                     left: `${(_d = (_c = (_b = (_a = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.popupBg) === null || _c === void 0 ? void 0 : _c.horizontalMargin) !== null && _d !== void 0 ? _d : 0}px`,
                     right: `${(_h = (_g = (_f = (_e = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.popupBg) === null || _g === void 0 ? void 0 : _g.horizontalMargin) !== null && _h !== void 0 ? _h : 0}px`,
-                    bottom: `${(_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0}px`,
+                    bottom: `${((_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0) + bottomHeight}px`,
                     overflow: 'hidden',
                     width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
                     height: '100%'
@@ -10498,7 +10600,7 @@
                     onTouchEnd: handleTouchEnd
                 })),
                     React.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
-                            height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
+                            height: isScrollFullScreen ? modalHeight : MODAL_DEF_CON_H,
                             overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
                             zIndex: 1
                         } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
@@ -18133,7 +18235,7 @@ Made in Italy` })));
         };
     })();
 
-    const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
+    const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef, visibleHeight }, ref) => {
         var _a, _b;
         const [isPauseVideo, setIsPauseVideo] = React.useState(false);
         const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
@@ -18241,7 +18343,7 @@ Made in Italy` })));
                 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;
+                const targetHeight = visibleHeight || (window === null || window === void 0 ? void 0 : window.innerHeight);
                 canvas.height = targetHeight;
                 canvas.width = targetWidth;
                 ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
@@ -18251,7 +18353,7 @@ Made in Italy` })));
             setTimeout(() => {
                 setFrameImg();
             }, 500);
-        }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur]);
+        }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur, visibleHeight]);
         const handleLoadedmetadata = React.useCallback(() => {
             if (!videoRef.current)
                 return;
@@ -18993,148 +19095,6 @@ 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}`
-        };
-        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');
-            if ('fundebug' in window) {
-                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]);
-        React.useEffect(() => {
-            // 初始计算
-            updateHeight();
-            // 事件监听
-            const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
-            events.forEach((event) => {
-                window.addEventListener(event, updateHeight);
-            });
-            // visualViewport 监听（最重要）
-            if (window.visualViewport) {
-                window.visualViewport.addEventListener('resize', updateHeight);
-                window.visualViewport.addEventListener('scroll', updateHeight);
-            }
-            // 键盘弹出/收起监听（移动端重要）
-            if ('virtualKeyboard' in navigator) {
-                navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
-            }
-            // 定期检查（应对某些特殊情况）
-            const interval = setInterval(updateHeight, 1000);
-            return () => {
-                events.forEach((event) => {
-                    window.removeEventListener(event, updateHeight);
-                });
-                if (window.visualViewport) {
-                    window.visualViewport.removeEventListener('resize', updateHeight);
-                    window.visualViewport.removeEventListener('scroll', updateHeight);
-                }
-                if ('virtualKeyboard' in navigator) {
-                    navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
-                }
-                clearInterval(interval);
-            };
-        }, [updateHeight]);
-        return visibleHeight;
-    };
-
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
@@ -19143,7 +19103,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');
@@ -19163,7 +19123,7 @@ Made in Italy` })));
         const fbcRef = React.useRef('');
         const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5, pixelPvStatusRef } = useSxpDataSource();
         const { backMainFeed, productView, jumpToWeb } = useEventReport();
-        const visibleHeight = useVisibleHeight();
+        const { visibleHeight, bottomHeight } = useVisibleHeight();
         const isShowFingerTip = React.useMemo(() => {
             return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
         }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -19332,29 +19292,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
@@ -19396,7 +19337,7 @@ Made in Italy` })));
                 return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
             }
             if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
-                return (React.createElement(VideoWidget$5, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
+                return (React.createElement(VideoWidget$5, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef, visibleHeight: visibleHeight })));
             }
             if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
                 return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -19423,7 +19364,8 @@ Made in Italy` })));
             tipText,
             resolver,
             schema,
-            isReload
+            isReload,
+            visibleHeight
         ]);
         const onExpandableChange = React.useCallback((v) => {
             setIsShowMore(v);
@@ -19496,7 +19438,7 @@ Made in Italy` })));
                 top += minusHeight;
             }
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
-                top += getHeightWithSafeArea();
+                top += bottomHeight;
             }
             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: {
@@ -19506,7 +19448,7 @@ Made in Italy` })));
                     }, position: index }));
             }
             return null;
-        }, [globalConfig, waterFallData]);
+        }, [globalConfig, waterFallData, bottomHeight]);
         const handleViewImageStartEnd = (item) => {
             var _a, _b, _c, _d, _e, _f;
             if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
@@ -19733,7 +19675,7 @@ Made in Italy` })));
                 top += minusHeight;
             }
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
-                top += getHeightWithSafeArea();
+                top += bottomHeight;
             }
             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',
@@ -19743,7 +19685,7 @@ Made in Italy` })));
                     [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
                     [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
                 }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })));
-        }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
+        }, [globalConfig, visList, activeIndex, isMuted, waterFallData, bottomHeight]);
         const renderView = React.useMemo(() => {
             if (loading) {
                 return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -19775,7 +19717,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 +19779,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, bottom: bottomHeight + 'px' } }))))),
             (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
                     position: 'fixed',
-                    bottom: 'var(--safe-area-inset-bottom,0px)',
+                    bottom: bottomHeight + 'px',
                     left: 0,
                     right: 0,
                     width: '100%',