pb-sxp-ui 1.19.18 → 1.19.20

package/dist/index.cjs

@@ -10327,6 +10327,126 @@ const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailDat
 };
 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;
+        const finalHeight = isRatio ? Math.round(h) : visibleHeight;
+        const b = screenHeight - Math.round(h);
+        if (isRatio) {
+            const banner = document.querySelector('#onetrust-banner-sdk');
+            if (banner) {
+                banner.style.bottom = `${b}px`;
+            }
+            const styleElement = document.createElement('style');
+            styleElement.id = 'onetrust-pc-sdk';
+            styleElement.setAttribute('type', 'text/css');
+            document.head.appendChild(styleElement);
+            const css = `
+      #onetrust-pc-sdk {
+        height: ${finalHeight}px !important;
+      }
+      #onetrust-pc-sdk #ot-pc-content{
+        bottom: ${b}px !important;
+      }
+      `;
+            styleElement.textContent = css;
+        }
+        if (isRatio) {
+            setBottomHeight(b);
+        }
+        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
@@ -10336,15 +10456,17 @@ var CommodityGroup$1 = React.memo(CommodityGroup);
  *
  */
 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);
@@ -10392,17 +10514,17 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
     }, [_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;
                 }
@@ -10484,12 +10606,12 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
         }
         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%'
@@ -10505,7 +10627,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 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) && {
@@ -18140,7 +18262,7 @@ const mountVideoPlayerAtNode = (() => {
     };
 })();
 
-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();
@@ -18248,7 +18370,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
             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);
@@ -18258,7 +18380,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
         setTimeout(() => {
             setFrameImg();
         }, 500);
-    }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur]);
+    }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur, visibleHeight]);
     const handleLoadedmetadata = React.useCallback(() => {
         if (!videoRef.current)
             return;
@@ -19000,98 +19122,6 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
 };
 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(() => {
-        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: {} } });
-        }
-        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;
-};
-
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
@@ -19120,7 +19150,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
     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]);
@@ -19334,7 +19364,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
             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 }));
@@ -19361,7 +19391,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
         tipText,
         resolver,
         schema,
-        isReload
+        isReload,
+        visibleHeight
     ]);
     const onExpandableChange = React.useCallback((v) => {
         setIsShowMore(v);
@@ -19433,6 +19464,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
         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 += 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: {
                     position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -19441,7 +19475,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
                 }, 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)) {
@@ -19667,6 +19701,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
         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 += 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',
                 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',
@@ -19675,7 +19712,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
                 [(_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' } },
@@ -19769,10 +19806,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
                 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: bottomHeight + 'px' } }))))),
         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
                 position: 'fixed',
-                bottom: 0,
+                bottom: bottomHeight + 'px',
                 left: 0,
                 right: 0,
                 width: '100%',