pb-sxp-ui 1.19.8 → 1.19.9

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 (16) hide show
  1. package/dist/index.cjs +24 -3
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +6 -2
  4. package/dist/index.js +24 -3
  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 +24 -3
  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 +22 -3
  15. package/lib/core/components/SxpPageRender/index.js +22 -3
  16. package/package.json +1 -1
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -212,8 +212,21 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
212
212
  }
213
213
  return minusHeight;
214
214
  }, [globalConfig]);
215
+ const getHeightWithSafeArea = () => {
216
+ const detector = document.createElement('div');
217
+ detector.style.position = 'fixed';
218
+ detector.style.bottom = '0';
219
+ detector.style.left = '0';
220
+ detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
221
+ detector.style.visibility = 'hidden';
222
+ document.body.appendChild(detector);
223
+ const computedStyle = window.getComputedStyle(detector);
224
+ const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
225
+ document.body.removeChild(detector);
226
+ return safeAreaBottom;
227
+ };
215
228
  const height = useMemo(() => {
216
- return containerHeight - minusHeight - tagHeight;
229
+ return containerHeight - minusHeight - tagHeight - getHeightWithSafeArea();
217
230
  }, [minusHeight, containerHeight, tagHeight]);
218
231
  const visList = useMemo(() => {
219
232
  var _a;
@@ -355,6 +368,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
355
368
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
356
369
  top += minusHeight;
357
370
  }
371
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
372
+ top += getHeightWithSafeArea();
373
+ }
358
374
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
359
375
  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: {
360
376
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -584,6 +600,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
584
600
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
585
601
  top += minusHeight;
586
602
  }
603
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
604
+ top += getHeightWithSafeArea();
605
+ }
587
606
  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: {
588
607
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
589
608
  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',
@@ -685,10 +704,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
685
704
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
686
705
  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)),
687
706
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
688
- 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 } }))))),
707
+ 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: 'env(safe-area-inset-bottom)' } }))))),
689
708
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
690
709
  position: 'fixed',
691
- bottom: 0,
710
+ bottom: 'env(safe-area-inset-bottom)',
692
711
  left: 0,
693
712
  right: 0,
694
713
  width: '100%',
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -215,8 +215,21 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
215
215
  }
216
216
  return minusHeight;
217
217
  }, [globalConfig]);
218
+ const getHeightWithSafeArea = () => {
219
+ const detector = document.createElement('div');
220
+ detector.style.position = 'fixed';
221
+ detector.style.bottom = '0';
222
+ detector.style.left = '0';
223
+ detector.style.paddingBottom = 'env(safe-area-inset-bottom)';
224
+ detector.style.visibility = 'hidden';
225
+ document.body.appendChild(detector);
226
+ const computedStyle = window.getComputedStyle(detector);
227
+ const safeAreaBottom = parseFloat(computedStyle.paddingBottom) || 0;
228
+ document.body.removeChild(detector);
229
+ return safeAreaBottom;
230
+ };
218
231
  const height = (0, react_1.useMemo)(() => {
219
- return containerHeight - minusHeight - tagHeight;
232
+ return containerHeight - minusHeight - tagHeight - getHeightWithSafeArea();
220
233
  }, [minusHeight, containerHeight, tagHeight]);
221
234
  const visList = (0, react_1.useMemo)(() => {
222
235
  var _a;
@@ -358,6 +371,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
358
371
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
359
372
  top += minusHeight;
360
373
  }
374
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
375
+ top += getHeightWithSafeArea();
376
+ }
361
377
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
362
378
  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: {
363
379
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -587,6 +603,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
587
603
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
588
604
  top += minusHeight;
589
605
  }
606
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
607
+ top += getHeightWithSafeArea();
608
+ }
590
609
  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: {
591
610
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
592
611
  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',
@@ -688,10 +707,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
688
707
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
689
708
  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)),
690
709
  react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig }),
691
- 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 } }))))),
710
+ 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: 'env(safe-area-inset-bottom)' } }))))),
692
711
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (react_1.default.createElement("div", { style: {
693
712
  position: 'fixed',
694
- bottom: 0,
713
+ bottom: 'env(safe-area-inset-bottom)',
695
714
  left: 0,
696
715
  right: 0,
697
716
  width: '100%',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.19.8",
3
+ "version": "1.19.9",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",