pb-sxp-ui 1.19.16 → 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 -121
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +3 -11
  4. package/dist/index.js +59 -121
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +4 -4
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +4 -4
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +59 -121
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +4 -4
  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 -88
  16. package/lib/core/components/SxpPageRender/index.js +7 -31
  17. package/lib/core/hooks/useVisibleHeight.js +26 -88
  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,73 +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 systemInfo = {
54
- visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
55
- innerHeight: window.innerHeight,
56
- clientHeight: document.documentElement.clientHeight,
57
- screenHeight: window.screen.height,
58
- bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
59
- agent: navigator.userAgent,
60
- version: '1.19.16',
61
- safeArea: getHeightWithSafeArea(),
62
- dvh: dvhToPx(100),
63
- dvhInPx: getDvhInPx(),
64
- vhInPx: getVhInPx(),
65
- fillAvailableInPx: getFillAvailableInPx()
66
- };
67
- console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
68
- if ('fundebug' in window) {
69
- window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
70
- }
71
4
  const getVisibleContentHeight = () => {
72
5
  if (typeof window === 'undefined')
73
6
  return 0;
@@ -84,28 +17,35 @@ export const useVisibleHeight = () => {
84
17
  return height;
85
18
  };
86
19
  const updateHeight = useCallback(() => {
87
- var _a, _b, _c;
88
- const systemInfo = {
89
- visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
90
- innerHeight: window.innerHeight,
91
- clientHeight: document.documentElement.clientHeight,
92
- screenHeight: window.screen.height,
93
- bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
94
- agent: navigator.userAgent,
95
- version: '1.19.15',
96
- safeArea: getHeightWithSafeArea(),
97
- dvh: dvhToPx(100),
98
- dvhInPx: getDvhInPx(),
99
- vhInPx: getVhInPx(),
100
- fillAvailableInPx: getFillAvailableInPx()
101
- };
102
- 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);
103
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
+ };
104
45
  window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
105
46
  }
106
- 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);
107
- setVisibleHeight(height);
108
- }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
47
+ setVisibleHeight(finalHeight);
48
+ }, [getVisibleContentHeight]);
109
49
  useEffect(() => {
110
50
  updateHeight();
111
51
  const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
@@ -119,7 +59,6 @@ export const useVisibleHeight = () => {
119
59
  if ('virtualKeyboard' in navigator) {
120
60
  navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
121
61
  }
122
- const interval = setInterval(updateHeight, 1000);
123
62
  return () => {
124
63
  events.forEach((event) => {
125
64
  window.removeEventListener(event, updateHeight);
@@ -131,7 +70,6 @@ export const useVisibleHeight = () => {
131
70
  if ('virtualKeyboard' in navigator) {
132
71
  navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
133
72
  }
134
- clearInterval(interval);
135
73
  };
136
74
  }, [updateHeight]);
137
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,74 +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 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.16',
64
- safeArea: getHeightWithSafeArea(),
65
- dvh: dvhToPx(100),
66
- dvhInPx: getDvhInPx(),
67
- vhInPx: getVhInPx(),
68
- fillAvailableInPx: getFillAvailableInPx()
69
- };
70
- console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
71
- if ('fundebug' in window) {
72
- window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
73
- }
74
7
  const getVisibleContentHeight = () => {
75
8
  if (typeof window === 'undefined')
76
9
  return 0;
@@ -87,28 +20,35 @@ const useVisibleHeight = () => {
87
20
  return height;
88
21
  };
89
22
  const updateHeight = (0, react_1.useCallback)(() => {
90
- var _a, _b, _c;
91
- const systemInfo = {
92
- visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
93
- innerHeight: window.innerHeight,
94
- clientHeight: document.documentElement.clientHeight,
95
- screenHeight: window.screen.height,
96
- bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
97
- agent: navigator.userAgent,
98
- version: '1.19.15',
99
- safeArea: getHeightWithSafeArea(),
100
- dvh: dvhToPx(100),
101
- dvhInPx: getDvhInPx(),
102
- vhInPx: getVhInPx(),
103
- fillAvailableInPx: getFillAvailableInPx()
104
- };
105
- 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);
106
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
+ };
107
48
  window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
108
49
  }
109
- 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);
110
- setVisibleHeight(height);
111
- }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
50
+ setVisibleHeight(finalHeight);
51
+ }, [getVisibleContentHeight]);
112
52
  (0, react_1.useEffect)(() => {
113
53
  updateHeight();
114
54
  const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
@@ -122,7 +62,6 @@ const useVisibleHeight = () => {
122
62
  if ('virtualKeyboard' in navigator) {
123
63
  navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
124
64
  }
125
- const interval = setInterval(updateHeight, 1000);
126
65
  return () => {
127
66
  events.forEach((event) => {
128
67
  window.removeEventListener(event, updateHeight);
@@ -134,7 +73,6 @@ const useVisibleHeight = () => {
134
73
  if ('virtualKeyboard' in navigator) {
135
74
  navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
136
75
  }
137
- clearInterval(interval);
138
76
  };
139
77
  }, [updateHeight]);
140
78
  return visibleHeight;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.19.16",
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",