pb-sxp-ui 1.19.8 → 1.19.10

package/dist/index.css

@@ -1068,7 +1068,10 @@ a:active {
           flex: 1;
   height: 100vh;
   overflow-y: auto;
-  padding: 18px;
+  padding-top: 18px;
+  padding-left: 18px;
+  padding-right: 18px;
+  padding-bottom: calc(18px + env(safe-area-inset-bottom));
 }
 .waterfallFlow__title {
   text-align: center;
@@ -1547,6 +1550,7 @@ a:active {
   top: 0;
   left: 0;
   right: 0;
+  bottom: env(safe-area-inset-bottom);
   width: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -2458,7 +2462,7 @@ button.swiper-pagination-bullet {
   left: 0;
   top: 0;
   right: 0;
-  bottom: 0;
+  bottom: env(safe-area-inset-bottom);
   z-index: 100;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;

package/dist/index.js

@@ -18978,6 +18978,70 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
 };
 var NavBack$1 = memo(NavBack);
 
+const useVisibleHeight = () => {
+    const [visibleHeight, setVisibleHeight] = 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 = useCallback(() => {
+        const height = getVisibleContentHeight();
+        setVisibleHeight(height);
+    }, []);
+    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
@@ -19006,6 +19070,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const fbcRef = 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 = 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]);
@@ -19174,9 +19239,24 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         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 = useMemo(() => {
-        return containerHeight - minusHeight - tagHeight;
-    }, [minusHeight, containerHeight, tagHeight]);
+        return visibleHeight - minusHeight - tagHeight;
+    }, [minusHeight, visibleHeight, tagHeight]);
     const visList = useMemo(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -19317,6 +19397,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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',
@@ -19551,6 +19634,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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',
@@ -19653,10 +19739,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 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%',