pb-sxp-ui 1.19.18 → 1.19.20

package/dist/pb-ui.js

@@ -10320,6 +10320,126 @@
     };
     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
@@ -10329,15 +10449,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 +10507,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 +10599,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 +10620,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 +18255,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 +18363,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 +18373,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,98 +19115,6 @@ 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(() => {
-            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
@@ -19113,7 +19143,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]);
@@ -19327,7 +19357,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 }));
@@ -19354,7 +19384,8 @@ Made in Italy` })));
             tipText,
             resolver,
             schema,
-            isReload
+            isReload,
+            visibleHeight
         ]);
         const onExpandableChange = React.useCallback((v) => {
             setIsShowMore(v);
@@ -19426,6 +19457,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 += 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',
@@ -19434,7 +19468,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)) {
@@ -19660,6 +19694,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 += 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',
@@ -19668,7 +19705,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' } },
@@ -19762,10 +19799,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: 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%',