pb-sxp-ui 1.19.17 → 1.19.19

package/lib/core/components/SxpPageRender/index.js

@@ -31,7 +31,7 @@ const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider")
 const NavBack_1 = tslib_1.__importDefault(require("./NavBack"));
 const tool_1 = require("../../../core/utils/tool");
 const useVisibleHeight_1 = require("../../../core/hooks/useVisibleHeight");
-const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
+const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
     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, _0;
     const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
@@ -51,7 +51,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const fbcRef = (0, react_1.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 } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
-    const visibleHeight = (0, useVisibleHeight_1.useVisibleHeight)();
+    const { visibleHeight, bottomHeight } = (0, useVisibleHeight_1.useVisibleHeight)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
         return data.length > 0 && !loading && ((0, localStore_1.getFeUserState)() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
     }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -217,28 +217,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         return minusHeight;
     }, [globalConfig]);
-    const getHeightWithSafeArea = () => {
-        const root = document.documentElement;
-        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
-        const numericValue = parseInt(value) || 0;
-        return numericValue;
-    };
-    const getDvhInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '100dvh';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
     const height = (0, react_1.useMemo)(() => {
-        return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
-    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
+        const h = containerHeight || visibleHeight;
+        return h - minusHeight - tagHeight;
+    }, [containerHeight, visibleHeight, minusHeight, tagHeight]);
     const visList = (0, react_1.useMemo)(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -280,7 +262,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             return (react_1.default.createElement(MultiPosts_1.default, 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_1.default.createElement(VideoWidget_1.default, 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_1.default.createElement(VideoWidget_1.default, 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_1.default.createElement(PictureGroup_1.default, { 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 }));
@@ -307,7 +289,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         tipText,
         resolver,
         schema,
-        isReload
+        isReload,
+        visibleHeight
     ]);
     const onExpandableChange = (0, react_1.useCallback)((v) => {
         setIsShowMore(v);
@@ -380,7 +363,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             top += minusHeight;
         }
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
-            top += getHeightWithSafeArea();
+            top += bottomHeight;
         }
         if (rec === null || rec === void 0 ? void 0 : rec.video) {
             return (react_1.default.createElement(LikeButton_1.default, { 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: {
@@ -390,7 +373,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 }, 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)) {
@@ -612,7 +595,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             top += minusHeight;
         }
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
-            top += getHeightWithSafeArea();
+            top += bottomHeight;
         }
         return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
                 position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
@@ -622,7 +605,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 [(_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 = (0, react_1.useMemo)(() => {
         if (loading) {
             return (react_1.default.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -654,7 +637,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         isReload,
         renderToggleButton
     ]);
-    return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
+    return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
         (data === null || data === void 0 ? void 0 : data.length) < 1 && loading ? (react_1.default.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
             react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement("div", { style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
             waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
@@ -715,10 +698,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
             react_1.default.createElement(WaterFall_1.default, 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_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig }),
-            openMultiPosts && (react_1.default.createElement(MultiPosts_1.default, 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: 'var(--safe-area-inset-bottom,0px)' } }))))),
+            openMultiPosts && (react_1.default.createElement(MultiPosts_1.default, 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_1.default.createElement("div", { style: {
                 position: 'fixed',
-                bottom: 'var(--safe-area-inset-bottom,0px)',
+                bottom: bottomHeight + 'px',
                 left: 0,
                 right: 0,
                 width: '100%',

package/lib/core/hooks/useVisibleHeight.d.ts

@@ -1 +1,4 @@
-export declare const useVisibleHeight: () => number;
+export declare function useVisibleHeight(): {
+    visibleHeight: number;
+    bottomHeight: number;
+};

package/lib/core/hooks/useVisibleHeight.js

@@ -2,81 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVisibleHeight = void 0;
 const react_1 = require("react");
-const useVisibleHeight = () => {
-    var _a, _b;
+function useVisibleHeight() {
     const [visibleHeight, setVisibleHeight] = (0, react_1.useState)(0);
-    const getDvhInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '100dvh';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
-    const getVhInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '100vh';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
-    const getFillAvailableInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '-webkit-fill-available';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
-    const getHeightWithSafeArea = () => {
-        const root = document.documentElement;
-        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
-        const numericValue = parseInt(value) || 0;
-        return numericValue;
-    };
-    const dvhToPx = (dvh) => {
-        return Math.round((dvh / 100) * document.documentElement.clientHeight);
-    };
-    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    const isScaled = fontSize !== 52;
-    const isZoomed = screen.width <= 375 && screen.height <= 667 && window.devicePixelRatio < 3;
-    const systemInfo = {
-        visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
-        innerHeight: window.innerHeight,
-        clientHeight: document.documentElement.clientHeight,
-        screenHeight: window.screen.height,
-        bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
-        agent: navigator.userAgent,
-        version: '1.19.17',
-        safeArea: getHeightWithSafeArea(),
-        dvh: dvhToPx(100),
-        dvhInPx: getDvhInPx(),
-        vhInPx: getVhInPx(),
-        fillAvailableInPx: getFillAvailableInPx(),
-        isScaled,
-        isZoomed,
-        meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
-    };
-    console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
-    if ('fundebug' in window) {
-        window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
-    }
+    const [bottomHeight, setBottomHeight] = (0, react_1.useState)(0);
     const getVisibleContentHeight = () => {
         if (typeof window === 'undefined')
             return 0;
@@ -93,33 +21,42 @@ const useVisibleHeight = () => {
         return height;
     };
     const updateHeight = (0, react_1.useCallback)(() => {
-        var _a, _b, _c;
-        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        const isScaled = fontSize !== 52;
-        const systemInfo = {
-            visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
-            innerHeight: window.innerHeight,
-            clientHeight: document.documentElement.clientHeight,
-            screenHeight: window.screen.height,
-            bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
-            agent: navigator.userAgent,
-            version: '1.19.17',
-            safeArea: getHeightWithSafeArea(),
-            dvh: dvhToPx(100),
-            dvhInPx: getDvhInPx(),
-            vhInPx: getVhInPx(),
-            fillAvailableInPx: getFillAvailableInPx(),
-            isScaled,
-            isZoomed,
-            meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
-        };
-        console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
+        var _a;
+        const visibleHeight = getVisibleContentHeight();
+        const screenHeight = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.height;
+        const ua = navigator.userAgent;
+        const isInstagram = /Instagram/i.test(ua);
+        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;
+        const isRatio = ratio >= threshold && ratio !== 1;
+        const finalHeight = isRatio ? Math.round(h) : visibleHeight;
+        if (isRatio) {
+            setBottomHeight(screenHeight - Math.round(h));
+        }
+        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: {} } });
         }
-        const height = ((_c = document === null || document === void 0 ? void 0 : document.documentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
-        setVisibleHeight(height);
-    }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
+        setVisibleHeight(finalHeight);
+    }, [getVisibleContentHeight]);
     (0, react_1.useEffect)(() => {
         updateHeight();
         const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
@@ -133,7 +70,6 @@ const useVisibleHeight = () => {
         if ('virtualKeyboard' in navigator) {
             navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
         }
-        const interval = setInterval(updateHeight, 1000);
         return () => {
             events.forEach((event) => {
                 window.removeEventListener(event, updateHeight);
@@ -145,9 +81,8 @@ const useVisibleHeight = () => {
             if ('virtualKeyboard' in navigator) {
                 navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
             }
-            clearInterval(interval);
         };
     }, [updateHeight]);
-    return visibleHeight;
-};
+    return { visibleHeight, bottomHeight };
+}
 exports.useVisibleHeight = useVisibleHeight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.19.17",
+  "version": "1.19.19",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -39,7 +39,6 @@
     "@emotion/css": "^11.11.2",
     "eslint": "^8.48.0",
     "eventemitter3": "^5.0.1",
-    "fundebug-javascript": "^2.8.8",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",