pb-sxp-ui 1.19.17 → 1.19.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/index.cjs +59 -134
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +3 -11
  4. package/dist/index.js +59 -134
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +5 -5
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +5 -5
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +59 -134
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +5 -5
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/index.js +7 -31
  15. package/es/core/hooks/useVisibleHeight.js +26 -99
  16. package/lib/core/components/SxpPageRender/index.js +7 -31
  17. package/lib/core/hooks/useVisibleHeight.js +26 -99
  18. package/package.json +1 -2
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -28,7 +28,7 @@ import { useEditorDataProvider } from '../../../core/context/EditorDataProvider'
28
28
  import NavBack from './NavBack';
29
29
  import { deleteCookie, getCookie } from '../../../core/utils/tool';
30
30
  import { useVisibleHeight } from '../../../core/hooks/useVisibleHeight';
31
- const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
31
+ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
32
32
  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;
33
33
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
34
34
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
@@ -214,28 +214,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
214
214
  }
215
215
  return minusHeight;
216
216
  }, [globalConfig]);
217
- const getHeightWithSafeArea = () => {
218
- const root = document.documentElement;
219
- const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
220
- const numericValue = parseInt(value) || 0;
221
- return numericValue;
222
- };
223
- const getDvhInPx = () => {
224
- const detector = document.createElement('div');
225
- detector.style.position = 'fixed';
226
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
227
- detector.style.left = '0';
228
- detector.style.height = '100dvh';
229
- detector.style.visibility = 'hidden';
230
- detector.style.zIndex = '-1';
231
- document.body.appendChild(detector);
232
- const dvhInPx = detector.clientHeight;
233
- document.body.removeChild(detector);
234
- return dvhInPx;
235
- };
236
217
  const height = useMemo(() => {
237
- return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
238
- }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
218
+ const h = containerHeight || visibleHeight;
219
+ return h - minusHeight - tagHeight;
220
+ }, [containerHeight, visibleHeight, minusHeight, tagHeight]);
239
221
  const visList = useMemo(() => {
240
222
  var _a;
241
223
  const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -376,9 +358,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
376
358
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
377
359
  top += minusHeight;
378
360
  }
379
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
380
- top += getHeightWithSafeArea();
381
- }
382
361
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
383
362
  return (React.createElement(LikeButton, { 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: {
384
363
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -608,9 +587,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
608
587
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
609
588
  top += minusHeight;
610
589
  }
611
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
612
- top += getHeightWithSafeArea();
613
- }
614
590
  return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton, { style: {
615
591
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
616
592
  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',
@@ -651,7 +627,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
651
627
  isReload,
652
628
  renderToggleButton
653
629
  ]);
654
- return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
630
+ return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
655
631
  (data === null || data === void 0 ? void 0 : data.length) < 1 && loading ? (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
656
632
  React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.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` })) },
657
633
  waterFallData && (React.createElement(Navbar, { icon: left, 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: () => {
@@ -712,10 +688,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
712
688
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
713
689
  React.createElement(WaterFall, 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)),
714
690
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
715
- openMultiPosts && (React.createElement(MultiPosts, 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)' } }))))),
691
+ openMultiPosts && (React.createElement(MultiPosts, 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 } }))))),
716
692
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
717
693
  position: 'fixed',
718
- bottom: 'var(--safe-area-inset-bottom,0px)',
694
+ bottom: 0,
719
695
  left: 0,
720
696
  right: 0,
721
697
  width: '100%',
package/es/core/hooks/useVisibleHeight.js CHANGED
@@ -1,79 +1,6 @@
1
1
  import { useState, useEffect, useCallback } from 'react';
2
2
  export const useVisibleHeight = () => {
3
- var _a, _b;
4
3
  const [visibleHeight, setVisibleHeight] = useState(0);
5
- const getDvhInPx = () => {
6
- const detector = document.createElement('div');
7
- detector.style.position = 'fixed';
8
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
9
- detector.style.left = '0';
10
- detector.style.height = '100dvh';
11
- detector.style.visibility = 'hidden';
12
- detector.style.zIndex = '-1';
13
- document.body.appendChild(detector);
14
- const dvhInPx = detector.clientHeight;
15
- document.body.removeChild(detector);
16
- return dvhInPx;
17
- };
18
- const getVhInPx = () => {
19
- const detector = document.createElement('div');
20
- detector.style.position = 'fixed';
21
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
22
- detector.style.left = '0';
23
- detector.style.height = '100vh';
24
- detector.style.visibility = 'hidden';
25
- detector.style.zIndex = '-1';
26
- document.body.appendChild(detector);
27
- const dvhInPx = detector.clientHeight;
28
- document.body.removeChild(detector);
29
- return dvhInPx;
30
- };
31
- const getFillAvailableInPx = () => {
32
- const detector = document.createElement('div');
33
- detector.style.position = 'fixed';
34
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
35
- detector.style.left = '0';
36
- detector.style.height = '-webkit-fill-available';
37
- detector.style.visibility = 'hidden';
38
- detector.style.zIndex = '-1';
39
- document.body.appendChild(detector);
40
- const dvhInPx = detector.clientHeight;
41
- document.body.removeChild(detector);
42
- return dvhInPx;
43
- };
44
- const getHeightWithSafeArea = () => {
45
- const root = document.documentElement;
46
- const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
47
- const numericValue = parseInt(value) || 0;
48
- return numericValue;
49
- };
50
- const dvhToPx = (dvh) => {
51
- return Math.round((dvh / 100) * document.documentElement.clientHeight);
52
- };
53
- const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
54
- const isScaled = fontSize !== 52;
55
- const isZoomed = screen.width <= 375 && screen.height <= 667 && window.devicePixelRatio < 3;
56
- const systemInfo = {
57
- visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
58
- innerHeight: window.innerHeight,
59
- clientHeight: document.documentElement.clientHeight,
60
- screenHeight: window.screen.height,
61
- bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
62
- agent: navigator.userAgent,
63
- version: '1.19.17',
64
- safeArea: getHeightWithSafeArea(),
65
- dvh: dvhToPx(100),
66
- dvhInPx: getDvhInPx(),
67
- vhInPx: getVhInPx(),
68
- fillAvailableInPx: getFillAvailableInPx(),
69
- isScaled,
70
- isZoomed,
71
- meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
72
- };
73
- console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
74
- if ('fundebug' in window) {
75
- window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
76
- }
77
4
  const getVisibleContentHeight = () => {
78
5
  if (typeof window === 'undefined')
79
6
  return 0;
@@ -90,33 +17,35 @@ export const useVisibleHeight = () => {
90
17
  return height;
91
18
  };
92
19
  const updateHeight = useCallback(() => {
93
- var _a, _b, _c;
94
- const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
95
- const isScaled = fontSize !== 52;
96
- const systemInfo = {
97
- visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
98
- innerHeight: window.innerHeight,
99
- clientHeight: document.documentElement.clientHeight,
100
- screenHeight: window.screen.height,
101
- bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
102
- agent: navigator.userAgent,
103
- version: '1.19.17',
104
- safeArea: getHeightWithSafeArea(),
105
- dvh: dvhToPx(100),
106
- dvhInPx: getDvhInPx(),
107
- vhInPx: getVhInPx(),
108
- fillAvailableInPx: getFillAvailableInPx(),
109
- isScaled,
110
- isZoomed,
111
- meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
112
- };
113
- console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
20
+ var _a;
21
+ const visibleHeight = getVisibleContentHeight();
22
+ const screenHeight = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.height;
23
+ const ua = navigator.userAgent;
24
+ const isInstagram = /Instagram/i.test(ua);
25
+ const isFacebook = /FBAV|FBAN|FBSN/i.test(ua);
26
+ if (!screenHeight || visibleHeight <= 0 || (!isInstagram && !isFacebook)) {
27
+ setVisibleHeight(visibleHeight);
28
+ return;
29
+ }
30
+ const ratio = visibleHeight / screenHeight;
31
+ const threshold = 0.9;
32
+ const h = screenHeight >= 900 ? screenHeight * 0.8 : screenHeight * 0.79;
33
+ const finalHeight = Math.round(ratio >= threshold ? h : visibleHeight);
114
34
  if ('fundebug' in window) {
35
+ const systemInfo = {
36
+ ratio,
37
+ h,
38
+ finalHeight,
39
+ visibleHeight,
40
+ screenHeight,
41
+ isInstagram,
42
+ isFacebook,
43
+ ua
44
+ };
115
45
  window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
116
46
  }
117
- 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);
118
- setVisibleHeight(height);
119
- }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
47
+ setVisibleHeight(finalHeight);
48
+ }, [getVisibleContentHeight]);
120
49
  useEffect(() => {
121
50
  updateHeight();
122
51
  const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
@@ -130,7 +59,6 @@ export const useVisibleHeight = () => {
130
59
  if ('virtualKeyboard' in navigator) {
131
60
  navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
132
61
  }
133
- const interval = setInterval(updateHeight, 1000);
134
62
  return () => {
135
63
  events.forEach((event) => {
136
64
  window.removeEventListener(event, updateHeight);
@@ -142,7 +70,6 @@ export const useVisibleHeight = () => {
142
70
  if ('virtualKeyboard' in navigator) {
143
71
  navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
144
72
  }
145
- clearInterval(interval);
146
73
  };
147
74
  }, [updateHeight]);
148
75
  return visibleHeight;
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -31,7 +31,7 @@ const EditorDataProvider_1 = require("../../../core/context/EditorDataProvider")
31
31
  const NavBack_1 = tslib_1.__importDefault(require("./NavBack"));
32
32
  const tool_1 = require("../../../core/utils/tool");
33
33
  const useVisibleHeight_1 = require("../../../core/hooks/useVisibleHeight");
34
- const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
34
+ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
35
35
  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;
36
36
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
37
37
  const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
@@ -217,28 +217,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
217
217
  }
218
218
  return minusHeight;
219
219
  }, [globalConfig]);
220
- const getHeightWithSafeArea = () => {
221
- const root = document.documentElement;
222
- const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
223
- const numericValue = parseInt(value) || 0;
224
- return numericValue;
225
- };
226
- const getDvhInPx = () => {
227
- const detector = document.createElement('div');
228
- detector.style.position = 'fixed';
229
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
230
- detector.style.left = '0';
231
- detector.style.height = '100dvh';
232
- detector.style.visibility = 'hidden';
233
- detector.style.zIndex = '-1';
234
- document.body.appendChild(detector);
235
- const dvhInPx = detector.clientHeight;
236
- document.body.removeChild(detector);
237
- return dvhInPx;
238
- };
239
220
  const height = (0, react_1.useMemo)(() => {
240
- return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
241
- }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
221
+ const h = containerHeight || visibleHeight;
222
+ return h - minusHeight - tagHeight;
223
+ }, [containerHeight, visibleHeight, minusHeight, tagHeight]);
242
224
  const visList = (0, react_1.useMemo)(() => {
243
225
  var _a;
244
226
  const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -379,9 +361,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
379
361
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
380
362
  top += minusHeight;
381
363
  }
382
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
383
- top += getHeightWithSafeArea();
384
- }
385
364
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
386
365
  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: {
387
366
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -611,9 +590,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
611
590
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
612
591
  top += minusHeight;
613
592
  }
614
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
615
- top += getHeightWithSafeArea();
616
- }
617
593
  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: {
618
594
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
619
595
  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',
@@ -654,7 +630,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
654
630
  isReload,
655
631
  renderToggleButton
656
632
  ]);
657
- return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
633
+ return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
658
634
  (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' } },
659
635
  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` })) },
660
636
  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 +691,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
715
691
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
716
692
  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)),
717
693
  react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig }),
718
- 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)' } }))))),
694
+ 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 } }))))),
719
695
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (react_1.default.createElement("div", { style: {
720
696
  position: 'fixed',
721
- bottom: 'var(--safe-area-inset-bottom,0px)',
697
+ bottom: 0,
722
698
  left: 0,
723
699
  right: 0,
724
700
  width: '100%',
package/lib/core/hooks/useVisibleHeight.js CHANGED
@@ -3,80 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useVisibleHeight = void 0;
4
4
  const react_1 = require("react");
5
5
  const useVisibleHeight = () => {
6
- var _a, _b;
7
6
  const [visibleHeight, setVisibleHeight] = (0, react_1.useState)(0);
8
- const getDvhInPx = () => {
9
- const detector = document.createElement('div');
10
- detector.style.position = 'fixed';
11
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
12
- detector.style.left = '0';
13
- detector.style.height = '100dvh';
14
- detector.style.visibility = 'hidden';
15
- detector.style.zIndex = '-1';
16
- document.body.appendChild(detector);
17
- const dvhInPx = detector.clientHeight;
18
- document.body.removeChild(detector);
19
- return dvhInPx;
20
- };
21
- const getVhInPx = () => {
22
- const detector = document.createElement('div');
23
- detector.style.position = 'fixed';
24
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
25
- detector.style.left = '0';
26
- detector.style.height = '100vh';
27
- detector.style.visibility = 'hidden';
28
- detector.style.zIndex = '-1';
29
- document.body.appendChild(detector);
30
- const dvhInPx = detector.clientHeight;
31
- document.body.removeChild(detector);
32
- return dvhInPx;
33
- };
34
- const getFillAvailableInPx = () => {
35
- const detector = document.createElement('div');
36
- detector.style.position = 'fixed';
37
- detector.style.bottom = `${getHeightWithSafeArea()}px`;
38
- detector.style.left = '0';
39
- detector.style.height = '-webkit-fill-available';
40
- detector.style.visibility = 'hidden';
41
- detector.style.zIndex = '-1';
42
- document.body.appendChild(detector);
43
- const dvhInPx = detector.clientHeight;
44
- document.body.removeChild(detector);
45
- return dvhInPx;
46
- };
47
- const getHeightWithSafeArea = () => {
48
- const root = document.documentElement;
49
- const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
50
- const numericValue = parseInt(value) || 0;
51
- return numericValue;
52
- };
53
- const dvhToPx = (dvh) => {
54
- return Math.round((dvh / 100) * document.documentElement.clientHeight);
55
- };
56
- const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
57
- const isScaled = fontSize !== 52;
58
- const isZoomed = screen.width <= 375 && screen.height <= 667 && window.devicePixelRatio < 3;
59
- const systemInfo = {
60
- visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
61
- innerHeight: window.innerHeight,
62
- clientHeight: document.documentElement.clientHeight,
63
- screenHeight: window.screen.height,
64
- bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
65
- agent: navigator.userAgent,
66
- version: '1.19.17',
67
- safeArea: getHeightWithSafeArea(),
68
- dvh: dvhToPx(100),
69
- dvhInPx: getDvhInPx(),
70
- vhInPx: getVhInPx(),
71
- fillAvailableInPx: getFillAvailableInPx(),
72
- isScaled,
73
- isZoomed,
74
- meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
75
- };
76
- console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
77
- if ('fundebug' in window) {
78
- window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
79
- }
80
7
  const getVisibleContentHeight = () => {
81
8
  if (typeof window === 'undefined')
82
9
  return 0;
@@ -93,33 +20,35 @@ const useVisibleHeight = () => {
93
20
  return height;
94
21
  };
95
22
  const updateHeight = (0, react_1.useCallback)(() => {
96
- var _a, _b, _c;
97
- const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
98
- const isScaled = fontSize !== 52;
99
- const systemInfo = {
100
- visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
101
- innerHeight: window.innerHeight,
102
- clientHeight: document.documentElement.clientHeight,
103
- screenHeight: window.screen.height,
104
- bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
105
- agent: navigator.userAgent,
106
- version: '1.19.17',
107
- safeArea: getHeightWithSafeArea(),
108
- dvh: dvhToPx(100),
109
- dvhInPx: getDvhInPx(),
110
- vhInPx: getVhInPx(),
111
- fillAvailableInPx: getFillAvailableInPx(),
112
- isScaled,
113
- isZoomed,
114
- meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
115
- };
116
- console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
23
+ var _a;
24
+ const visibleHeight = getVisibleContentHeight();
25
+ const screenHeight = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.height;
26
+ const ua = navigator.userAgent;
27
+ const isInstagram = /Instagram/i.test(ua);
28
+ const isFacebook = /FBAV|FBAN|FBSN/i.test(ua);
29
+ if (!screenHeight || visibleHeight <= 0 || (!isInstagram && !isFacebook)) {
30
+ setVisibleHeight(visibleHeight);
31
+ return;
32
+ }
33
+ const ratio = visibleHeight / screenHeight;
34
+ const threshold = 0.9;
35
+ const h = screenHeight >= 900 ? screenHeight * 0.8 : screenHeight * 0.79;
36
+ const finalHeight = Math.round(ratio >= threshold ? h : visibleHeight);
117
37
  if ('fundebug' in window) {
38
+ const systemInfo = {
39
+ ratio,
40
+ h,
41
+ finalHeight,
42
+ visibleHeight,
43
+ screenHeight,
44
+ isInstagram,
45
+ isFacebook,
46
+ ua
47
+ };
118
48
  window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
119
49
  }
120
- 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);
121
- setVisibleHeight(height);
122
- }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
50
+ setVisibleHeight(finalHeight);
51
+ }, [getVisibleContentHeight]);
123
52
  (0, react_1.useEffect)(() => {
124
53
  updateHeight();
125
54
  const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
@@ -133,7 +62,6 @@ const useVisibleHeight = () => {
133
62
  if ('virtualKeyboard' in navigator) {
134
63
  navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
135
64
  }
136
- const interval = setInterval(updateHeight, 1000);
137
65
  return () => {
138
66
  events.forEach((event) => {
139
67
  window.removeEventListener(event, updateHeight);
@@ -145,7 +73,6 @@ const useVisibleHeight = () => {
145
73
  if ('virtualKeyboard' in navigator) {
146
74
  navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
147
75
  }
148
- clearInterval(interval);
149
76
  };
150
77
  }, [updateHeight]);
151
78
  return visibleHeight;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.19.17",
3
+ "version": "1.19.18",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -39,7 +39,6 @@
39
39
  "@emotion/css": "^11.11.2",
40
40
  "eslint": "^8.48.0",
41
41
  "eventemitter3": "^5.0.1",
42
- "fundebug-javascript": "^2.8.8",
43
42
  "less": "^4.2.0",
44
43
  "lodash": "^4.17.21",
45
44
  "pako": "^2.1.0",