pb-sxp-ui 1.19.8 → 1.19.10

package/dist/pb-ui.js

@@ -18993,6 +18993,70 @@ Made in Italy` })));
     };
     var NavBack$1 = React.memo(NavBack);
 
+    const useVisibleHeight = () => {
+        const [visibleHeight, setVisibleHeight] = 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(() => {
+            const height = getVisibleContentHeight();
+            setVisibleHeight(height);
+        }, []);
+        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
@@ -19021,6 +19085,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 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]);
@@ -19189,9 +19254,24 @@ Made in Italy` })));
             }
             return minusHeight;
         }, [globalConfig]);
+        const getHeightWithSafeArea = () => {
+            // 获取窗口高度
+            // 动态检测安全区域
+            const detector = document.createElement('div');
+            detector.style.position = 'fixed';
+            detector.style.bottom = '0';
+            detector.style.left = '0';
+            detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
+            detector.style.visibility = 'hidden';
+            document.body.appendChild(detector);
+            const computedStyle = window.getComputedStyle(detector);
+            const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
+            document.body.removeChild(detector);
+            return safeAreaBottom;
+        };
         const height = React.useMemo(() => {
-            return containerHeight - minusHeight - tagHeight;
-        }, [minusHeight, containerHeight, tagHeight]);
+            return visibleHeight - minusHeight - tagHeight;
+        }, [minusHeight, visibleHeight, tagHeight]);
         const visList = React.useMemo(() => {
             var _a;
             const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -19332,6 +19412,9 @@ 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',
@@ -19566,6 +19649,9 @@ 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',
@@ -19668,10 +19754,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 } }))))),
+                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: 'env(safe-area-inset-bottom)' } }))))),
             (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
                     position: 'fixed',
-                    bottom: 0,
+                    bottom: 'env(safe-area-inset-bottom)',
                     left: 0,
                     right: 0,
                     width: '100%',