pb-sxp-ui 1.19.8 → 1.19.9

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

@@ -19174,8 +19174,23 @@ 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;
+        return containerHeight - minusHeight - tagHeight - getHeightWithSafeArea();
     }, [minusHeight, containerHeight, tagHeight]);
     const visList = useMemo(() => {
         var _a;
@@ -19317,6 +19332,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 +19569,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 +19674,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%',