pb-sxp-ui 1.19.18 → 1.19.19

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 (25) hide show
  1. package/dist/index.cjs +130 -113
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +130 -113
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +130 -113
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/Modal/index.js +14 -11
  14. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +3 -3
  16. package/es/core/components/SxpPageRender/index.js +14 -7
  17. package/es/core/hooks/useVisibleHeight.d.ts +4 -1
  18. package/es/core/hooks/useVisibleHeight.js +12 -4
  19. package/lib/core/components/SxpPageRender/Modal/index.js +14 -11
  20. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  21. package/lib/core/components/SxpPageRender/VideoWidget/index.js +3 -3
  22. package/lib/core/components/SxpPageRender/index.js +14 -7
  23. package/lib/core/hooks/useVisibleHeight.d.ts +4 -1
  24. package/lib/core/hooks/useVisibleHeight.js +12 -4
  25. package/package.json +1 -1
package/es/core/components/SxpPageRender/Modal/index.js CHANGED
@@ -2,16 +2,19 @@ import { debounce } from 'lodash';
2
2
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import * as ReactDOM from 'react-dom';
4
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
5
+ import { useVisibleHeight } from '../../../../core/hooks/useVisibleHeight';
5
6
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
6
- const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
7
+ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState }) => {
7
8
  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;
9
+ const { visibleHeight, bottomHeight } = useVisibleHeight();
8
10
  const touchRef = useRef(null);
9
11
  const fTouchRef = useRef(null);
10
12
  const touchMoveRef = useRef(null);
11
13
  const ref = useRef(null);
12
14
  const modalRef = useRef(null);
13
- const MODAL_DEF_TRANS = fullHeight * 0.2;
14
- const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
15
+ const modalHeight = fullHeight || visibleHeight;
16
+ const MODAL_DEF_TRANS = modalHeight * 0.2;
17
+ const MODAL_DEF_CON_H = isFullScreen ? modalHeight : modalHeight * 0.8;
15
18
  const [modalTrans, setModalTrans] = useState(MODAL_DEF_TRANS);
16
19
  const [isShow, setIsShow] = useState(false);
17
20
  const modalEleRef = useRef(null);
@@ -59,16 +62,16 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
59
62
  }, [_popup, openState, globalConfig, schema]);
60
63
  useEffect(() => {
61
64
  const trapFocus = (element) => {
62
- var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
63
- var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
64
- var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
65
- var KEYCODE_TAB = 9;
65
+ const focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
66
+ const firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
67
+ const lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
68
+ const KEYCODE_TAB = 9;
66
69
  element.addEventListener('keydown', function (e) {
67
70
  if (e.key === 'Escape' || e.key === 'Esc') {
68
71
  handleClose();
69
72
  e.preventDefault();
70
73
  }
71
- var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
74
+ const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
72
75
  if (!isTabPressed) {
73
76
  return;
74
77
  }
@@ -145,12 +148,12 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
145
148
  }
146
149
  touchMoveRef.current = false;
147
150
  };
148
- return ReactDOM.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
151
+ return ReactDOM.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)', bottom: bottomHeight + 'px' }, modalStyle), onClick: handleClose },
149
152
  React.createElement("div", { style: {
150
153
  position: 'relative',
151
154
  left: `${(_d = (_c = (_b = (_a = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.popupBg) === null || _c === void 0 ? void 0 : _c.horizontalMargin) !== null && _d !== void 0 ? _d : 0}px`,
152
155
  right: `${(_h = (_g = (_f = (_e = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.popupBg) === null || _g === void 0 ? void 0 : _g.horizontalMargin) !== null && _h !== void 0 ? _h : 0}px`,
153
- bottom: `${(_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0}px`,
156
+ bottom: `${((_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0) + bottomHeight}px`,
154
157
  overflow: 'hidden',
155
158
  width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
156
159
  height: '100%'
@@ -166,7 +169,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
166
169
  onTouchEnd: handleTouchEnd
167
170
  })),
168
171
  React.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
169
- height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
172
+ height: isScrollFullScreen ? modalHeight : MODAL_DEF_CON_H,
170
173
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
171
174
  zIndex: 1
172
175
  } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
package/es/core/components/SxpPageRender/VideoWidget/index.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IVideoWidgetProps {
12
12
  videoPlayIcon?: string;
13
13
  loopPlay: any;
14
14
  swiperRef?: any;
15
+ visibleHeight?: number;
15
16
  }
16
17
  export interface IVideoWidgetRef {
17
18
  setLoopPlay: (v: boolean) => void;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -7,7 +7,7 @@ import loading_gif from './loading.gif';
7
7
  import { mountVideoPlayerAtNode } from './VideoPlayer';
8
8
  import { useSxpDataSource } from '../../../../core/hooks';
9
9
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
10
- const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
10
+ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef, visibleHeight }, ref) => {
11
11
  var _a, _b;
12
12
  const [isPauseVideo, setIsPauseVideo] = useState(false);
13
13
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
@@ -115,7 +115,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
115
115
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
116
116
  const ctx = canvas.getContext('2d');
117
117
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
118
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
118
+ const targetHeight = visibleHeight || (window === null || window === void 0 ? void 0 : window.innerHeight);
119
119
  canvas.height = targetHeight;
120
120
  canvas.width = targetWidth;
121
121
  ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
@@ -125,7 +125,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
125
125
  setTimeout(() => {
126
126
  setFrameImg();
127
127
  }, 500);
128
- }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur]);
128
+ }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur, visibleHeight]);
129
129
  const handleLoadedmetadata = useCallback(() => {
130
130
  if (!videoRef.current)
131
131
  return;
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -48,7 +48,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
48
48
  const fbcRef = useRef('');
49
49
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5, pixelPvStatusRef } = useSxpDataSource();
50
50
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
51
- const visibleHeight = useVisibleHeight();
51
+ const { visibleHeight, bottomHeight } = useVisibleHeight();
52
52
  const isShowFingerTip = useMemo(() => {
53
53
  return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
54
54
  }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -259,7 +259,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
259
259
  return (React.createElement(MultiPosts, 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)));
260
260
  }
261
261
  if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
262
- return (React.createElement(VideoWidget, 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 })));
262
+ return (React.createElement(VideoWidget, 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 })));
263
263
  }
264
264
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
265
265
  return (React.createElement(PictureGroup, { 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 }));
@@ -286,7 +286,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
286
286
  tipText,
287
287
  resolver,
288
288
  schema,
289
- isReload
289
+ isReload,
290
+ visibleHeight
290
291
  ]);
291
292
  const onExpandableChange = useCallback((v) => {
292
293
  setIsShowMore(v);
@@ -358,6 +359,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
358
359
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
359
360
  top += minusHeight;
360
361
  }
362
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
363
+ top += bottomHeight;
364
+ }
361
365
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
362
366
  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: {
363
367
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -366,7 +370,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
366
370
  }, position: index }));
367
371
  }
368
372
  return null;
369
- }, [globalConfig, waterFallData]);
373
+ }, [globalConfig, waterFallData, bottomHeight]);
370
374
  const handleViewImageStartEnd = (item) => {
371
375
  var _a, _b, _c, _d, _e, _f;
372
376
  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)) {
@@ -587,6 +591,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
587
591
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
588
592
  top += minusHeight;
589
593
  }
594
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
595
+ top += bottomHeight;
596
+ }
590
597
  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: {
591
598
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
592
599
  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',
@@ -595,7 +602,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
595
602
  [(_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,
596
603
  [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
597
604
  }, 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 })));
598
- }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
605
+ }, [globalConfig, visList, activeIndex, isMuted, waterFallData, bottomHeight]);
599
606
  const renderView = useMemo(() => {
600
607
  if (loading) {
601
608
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -688,10 +695,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
688
695
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
689
696
  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)),
690
697
  React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
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 } }))))),
698
+ 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: bottomHeight + 'px' } }))))),
692
699
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
693
700
  position: 'fixed',
694
- bottom: 0,
701
+ bottom: bottomHeight + 'px',
695
702
  left: 0,
696
703
  right: 0,
697
704
  width: '100%',
package/es/core/hooks/useVisibleHeight.d.ts CHANGED
@@ -1 +1,4 @@
1
- export declare const useVisibleHeight: () => number;
1
+ export declare function useVisibleHeight(): {
2
+ visibleHeight: number;
3
+ bottomHeight: number;
4
+ };
package/es/core/hooks/useVisibleHeight.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useState, useEffect, useCallback } from 'react';
2
- export const useVisibleHeight = () => {
2
+ export function useVisibleHeight() {
3
3
  const [visibleHeight, setVisibleHeight] = useState(0);
4
+ const [bottomHeight, setBottomHeight] = useState(0);
4
5
  const getVisibleContentHeight = () => {
5
6
  if (typeof window === 'undefined')
6
7
  return 0;
@@ -30,7 +31,14 @@ export const useVisibleHeight = () => {
30
31
  const ratio = visibleHeight / screenHeight;
31
32
  const threshold = 0.9;
32
33
  const h = screenHeight >= 900 ? screenHeight * 0.8 : screenHeight * 0.79;
33
- const finalHeight = Math.round(ratio >= threshold ? h : visibleHeight);
34
+ const isRatio = ratio >= threshold && ratio !== 1;
35
+ const finalHeight = isRatio ? Math.round(h) : visibleHeight;
36
+ if (isRatio) {
37
+ setBottomHeight(screenHeight - Math.round(h));
38
+ }
39
+ else {
40
+ setBottomHeight(0);
41
+ }
34
42
  if ('fundebug' in window) {
35
43
  const systemInfo = {
36
44
  ratio,
@@ -72,5 +80,5 @@ export const useVisibleHeight = () => {
72
80
  }
73
81
  };
74
82
  }, [updateHeight]);
75
- return visibleHeight;
76
- };
83
+ return { visibleHeight, bottomHeight };
84
+ }
package/lib/core/components/SxpPageRender/Modal/index.js CHANGED
@@ -5,16 +5,19 @@ const lodash_1 = require("lodash");
5
5
  const react_1 = tslib_1.__importStar(require("react"));
6
6
  const ReactDOM = tslib_1.__importStar(require("react-dom"));
7
7
  const hooks_1 = require("../../../../core/hooks");
8
+ const useVisibleHeight_1 = require("../../../../core/hooks/useVisibleHeight");
8
9
  const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
9
- const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
10
+ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState }) => {
10
11
  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;
12
+ const { visibleHeight, bottomHeight } = (0, useVisibleHeight_1.useVisibleHeight)();
11
13
  const touchRef = (0, react_1.useRef)(null);
12
14
  const fTouchRef = (0, react_1.useRef)(null);
13
15
  const touchMoveRef = (0, react_1.useRef)(null);
14
16
  const ref = (0, react_1.useRef)(null);
15
17
  const modalRef = (0, react_1.useRef)(null);
16
- const MODAL_DEF_TRANS = fullHeight * 0.2;
17
- const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
18
+ const modalHeight = fullHeight || visibleHeight;
19
+ const MODAL_DEF_TRANS = modalHeight * 0.2;
20
+ const MODAL_DEF_CON_H = isFullScreen ? modalHeight : modalHeight * 0.8;
18
21
  const [modalTrans, setModalTrans] = (0, react_1.useState)(MODAL_DEF_TRANS);
19
22
  const [isShow, setIsShow] = (0, react_1.useState)(false);
20
23
  const modalEleRef = (0, react_1.useRef)(null);
@@ -62,16 +65,16 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
62
65
  }, [_popup, openState, globalConfig, schema]);
63
66
  (0, react_1.useEffect)(() => {
64
67
  const trapFocus = (element) => {
65
- var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
66
- var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
67
- var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
68
- var KEYCODE_TAB = 9;
68
+ const focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
69
+ const firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
70
+ const lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
71
+ const KEYCODE_TAB = 9;
69
72
  element.addEventListener('keydown', function (e) {
70
73
  if (e.key === 'Escape' || e.key === 'Esc') {
71
74
  handleClose();
72
75
  e.preventDefault();
73
76
  }
74
- var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
77
+ const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
75
78
  if (!isTabPressed) {
76
79
  return;
77
80
  }
@@ -148,12 +151,12 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
148
151
  }
149
152
  touchMoveRef.current = false;
150
153
  };
151
- return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null, isShow && (react_1.default.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
154
+ return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null, isShow && (react_1.default.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)', bottom: bottomHeight + 'px' }, modalStyle), onClick: handleClose },
152
155
  react_1.default.createElement("div", { style: {
153
156
  position: 'relative',
154
157
  left: `${(_d = (_c = (_b = (_a = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.popupBg) === null || _c === void 0 ? void 0 : _c.horizontalMargin) !== null && _d !== void 0 ? _d : 0}px`,
155
158
  right: `${(_h = (_g = (_f = (_e = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.popupBg) === null || _g === void 0 ? void 0 : _g.horizontalMargin) !== null && _h !== void 0 ? _h : 0}px`,
156
- bottom: `${(_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0}px`,
159
+ bottom: `${((_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0) + bottomHeight}px`,
157
160
  overflow: 'hidden',
158
161
  width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
159
162
  height: '100%'
@@ -169,7 +172,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
169
172
  onTouchEnd: handleTouchEnd
170
173
  })),
171
174
  react_1.default.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
172
- height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
175
+ height: isScrollFullScreen ? modalHeight : MODAL_DEF_CON_H,
173
176
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
174
177
  zIndex: 1
175
178
  } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IVideoWidgetProps {
12
12
  videoPlayIcon?: string;
13
13
  loopPlay: any;
14
14
  swiperRef?: any;
15
+ visibleHeight?: number;
15
16
  }
16
17
  export interface IVideoWidgetRef {
17
18
  setLoopPlay: (v: boolean) => void;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -9,7 +9,7 @@ const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
9
9
  const VideoPlayer_1 = require("./VideoPlayer");
10
10
  const hooks_1 = require("../../../../core/hooks");
11
11
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
12
- const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
12
+ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef, visibleHeight }, ref) => {
13
13
  var _a, _b;
14
14
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
15
15
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
@@ -117,7 +117,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
117
117
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
118
118
  const ctx = canvas.getContext('2d');
119
119
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
120
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
120
+ const targetHeight = visibleHeight || (window === null || window === void 0 ? void 0 : window.innerHeight);
121
121
  canvas.height = targetHeight;
122
122
  canvas.width = targetWidth;
123
123
  ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
@@ -127,7 +127,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
127
127
  setTimeout(() => {
128
128
  setFrameImg();
129
129
  }, 500);
130
- }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur]);
130
+ }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur, visibleHeight]);
131
131
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
132
132
  if (!videoRef.current)
133
133
  return;
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -51,7 +51,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
51
51
  const fbcRef = (0, react_1.useRef)('');
52
52
  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)();
53
53
  const { backMainFeed, productView, jumpToWeb } = (0, useEventReport_1.useEventReport)();
54
- const visibleHeight = (0, useVisibleHeight_1.useVisibleHeight)();
54
+ const { visibleHeight, bottomHeight } = (0, useVisibleHeight_1.useVisibleHeight)();
55
55
  const isShowFingerTip = (0, react_1.useMemo)(() => {
56
56
  return data.length > 0 && !loading && ((0, localStore_1.getFeUserState)() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
57
57
  }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -262,7 +262,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
262
262
  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)));
263
263
  }
264
264
  if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
265
- 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 })));
265
+ 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 })));
266
266
  }
267
267
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
268
268
  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 }));
@@ -289,7 +289,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
289
289
  tipText,
290
290
  resolver,
291
291
  schema,
292
- isReload
292
+ isReload,
293
+ visibleHeight
293
294
  ]);
294
295
  const onExpandableChange = (0, react_1.useCallback)((v) => {
295
296
  setIsShowMore(v);
@@ -361,6 +362,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
361
362
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) === 'top') {
362
363
  top += minusHeight;
363
364
  }
365
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
366
+ top += bottomHeight;
367
+ }
364
368
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
365
369
  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: {
366
370
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
@@ -369,7 +373,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
369
373
  }, position: index }));
370
374
  }
371
375
  return null;
372
- }, [globalConfig, waterFallData]);
376
+ }, [globalConfig, waterFallData, bottomHeight]);
373
377
  const handleViewImageStartEnd = (item) => {
374
378
  var _a, _b, _c, _d, _e, _f;
375
379
  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)) {
@@ -590,6 +594,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
590
594
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
591
595
  top += minusHeight;
592
596
  }
597
+ if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
598
+ top += bottomHeight;
599
+ }
593
600
  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: {
594
601
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
595
602
  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',
@@ -598,7 +605,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
598
605
  [(_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,
599
606
  [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
600
607
  }, 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 })));
601
- }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
608
+ }, [globalConfig, visList, activeIndex, isMuted, waterFallData, bottomHeight]);
602
609
  const renderView = (0, react_1.useMemo)(() => {
603
610
  if (loading) {
604
611
  return (react_1.default.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -691,10 +698,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidt
691
698
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
692
699
  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)),
693
700
  react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig }),
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 } }))))),
701
+ 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' } }))))),
695
702
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (react_1.default.createElement("div", { style: {
696
703
  position: 'fixed',
697
- bottom: 0,
704
+ bottom: bottomHeight + 'px',
698
705
  left: 0,
699
706
  right: 0,
700
707
  width: '100%',
package/lib/core/hooks/useVisibleHeight.d.ts CHANGED
@@ -1 +1,4 @@
1
- export declare const useVisibleHeight: () => number;
1
+ export declare function useVisibleHeight(): {
2
+ visibleHeight: number;
3
+ bottomHeight: number;
4
+ };
package/lib/core/hooks/useVisibleHeight.js CHANGED
@@ -2,8 +2,9 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useVisibleHeight = void 0;
4
4
  const react_1 = require("react");
5
- const useVisibleHeight = () => {
5
+ function useVisibleHeight() {
6
6
  const [visibleHeight, setVisibleHeight] = (0, react_1.useState)(0);
7
+ const [bottomHeight, setBottomHeight] = (0, react_1.useState)(0);
7
8
  const getVisibleContentHeight = () => {
8
9
  if (typeof window === 'undefined')
9
10
  return 0;
@@ -33,7 +34,14 @@ const useVisibleHeight = () => {
33
34
  const ratio = visibleHeight / screenHeight;
34
35
  const threshold = 0.9;
35
36
  const h = screenHeight >= 900 ? screenHeight * 0.8 : screenHeight * 0.79;
36
- const finalHeight = Math.round(ratio >= threshold ? h : visibleHeight);
37
+ const isRatio = ratio >= threshold && ratio !== 1;
38
+ const finalHeight = isRatio ? Math.round(h) : visibleHeight;
39
+ if (isRatio) {
40
+ setBottomHeight(screenHeight - Math.round(h));
41
+ }
42
+ else {
43
+ setBottomHeight(0);
44
+ }
37
45
  if ('fundebug' in window) {
38
46
  const systemInfo = {
39
47
  ratio,
@@ -75,6 +83,6 @@ const useVisibleHeight = () => {
75
83
  }
76
84
  };
77
85
  }, [updateHeight]);
78
- return visibleHeight;
79
- };
86
+ return { visibleHeight, bottomHeight };
87
+ }
80
88
  exports.useVisibleHeight = useVisibleHeight;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.19.18",
3
+ "version": "1.19.19",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",