pb-sxp-ui 1.19.17 → 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 (26) hide show
  1. package/dist/index.cjs +131 -189
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +3 -11
  4. package/dist/index.js +131 -189
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +6 -6
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +6 -6
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +131 -189
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +6 -6
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/Modal/index.js +14 -11
  15. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  16. package/es/core/components/SxpPageRender/VideoWidget/index.js +3 -3
  17. package/es/core/components/SxpPageRender/index.js +15 -32
  18. package/es/core/hooks/useVisibleHeight.d.ts +4 -1
  19. package/es/core/hooks/useVisibleHeight.js +37 -102
  20. package/lib/core/components/SxpPageRender/Modal/index.js +14 -11
  21. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  22. package/lib/core/components/SxpPageRender/VideoWidget/index.js +3 -3
  23. package/lib/core/components/SxpPageRender/index.js +15 -32
  24. package/lib/core/hooks/useVisibleHeight.d.ts +4 -1
  25. package/lib/core/hooks/useVisibleHeight.js +37 -102
  26. package/package.json +1 -2
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
@@ -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');
@@ -48,7 +48,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
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]);
@@ -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
@@ -277,7 +259,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
277
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)));
278
260
  }
279
261
  if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
280
- 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 })));
281
263
  }
282
264
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
283
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 }));
@@ -304,7 +286,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
304
286
  tipText,
305
287
  resolver,
306
288
  schema,
307
- isReload
289
+ isReload,
290
+ visibleHeight
308
291
  ]);
309
292
  const onExpandableChange = useCallback((v) => {
310
293
  setIsShowMore(v);
@@ -377,7 +360,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
377
360
  top += minusHeight;
378
361
  }
379
362
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
380
- top += getHeightWithSafeArea();
363
+ top += bottomHeight;
381
364
  }
382
365
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
383
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: {
@@ -387,7 +370,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
387
370
  }, position: index }));
388
371
  }
389
372
  return null;
390
- }, [globalConfig, waterFallData]);
373
+ }, [globalConfig, waterFallData, bottomHeight]);
391
374
  const handleViewImageStartEnd = (item) => {
392
375
  var _a, _b, _c, _d, _e, _f;
393
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)) {
@@ -609,7 +592,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
609
592
  top += minusHeight;
610
593
  }
611
594
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
612
- top += getHeightWithSafeArea();
595
+ top += bottomHeight;
613
596
  }
614
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: {
615
598
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
@@ -619,7 +602,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
619
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,
620
603
  [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
621
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 })));
622
- }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
605
+ }, [globalConfig, visList, activeIndex, isMuted, waterFallData, bottomHeight]);
623
606
  const renderView = useMemo(() => {
624
607
  if (loading) {
625
608
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -651,7 +634,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
651
634
  isReload,
652
635
  renderToggleButton
653
636
  ]);
654
- return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
637
+ return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
655
638
  (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
639
  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
640
  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 +695,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
712
695
  renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
713
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)),
714
697
  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)' } }))))),
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' } }))))),
716
699
  (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
717
700
  position: 'fixed',
718
- bottom: 'var(--safe-area-inset-bottom,0px)',
701
+ bottom: bottomHeight + 'px',
719
702
  left: 0,
720
703
  right: 0,
721
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,79 +1,7 @@
1
1
  import { useState, useEffect, useCallback } from 'react';
2
- export const useVisibleHeight = () => {
3
- var _a, _b;
2
+ export function useVisibleHeight() {
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
- }
4
+ const [bottomHeight, setBottomHeight] = useState(0);
77
5
  const getVisibleContentHeight = () => {
78
6
  if (typeof window === 'undefined')
79
7
  return 0;
@@ -90,33 +18,42 @@ export const useVisibleHeight = () => {
90
18
  return height;
91
19
  };
92
20
  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');
21
+ var _a;
22
+ const visibleHeight = getVisibleContentHeight();
23
+ const screenHeight = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.height;
24
+ const ua = navigator.userAgent;
25
+ const isInstagram = /Instagram/i.test(ua);
26
+ const isFacebook = /FBAV|FBAN|FBSN/i.test(ua);
27
+ if (!screenHeight || visibleHeight <= 0 || (!isInstagram && !isFacebook)) {
28
+ setVisibleHeight(visibleHeight);
29
+ return;
30
+ }
31
+ const ratio = visibleHeight / screenHeight;
32
+ const threshold = 0.9;
33
+ const h = screenHeight >= 900 ? screenHeight * 0.8 : screenHeight * 0.79;
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
+ }
114
42
  if ('fundebug' in window) {
43
+ const systemInfo = {
44
+ ratio,
45
+ h,
46
+ finalHeight,
47
+ visibleHeight,
48
+ screenHeight,
49
+ isInstagram,
50
+ isFacebook,
51
+ ua
52
+ };
115
53
  window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
116
54
  }
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]);
55
+ setVisibleHeight(finalHeight);
56
+ }, [getVisibleContentHeight]);
120
57
  useEffect(() => {
121
58
  updateHeight();
122
59
  const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
@@ -130,7 +67,6 @@ export const useVisibleHeight = () => {
130
67
  if ('virtualKeyboard' in navigator) {
131
68
  navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
132
69
  }
133
- const interval = setInterval(updateHeight, 1000);
134
70
  return () => {
135
71
  events.forEach((event) => {
136
72
  window.removeEventListener(event, updateHeight);
@@ -142,8 +78,7 @@ export const useVisibleHeight = () => {
142
78
  if ('virtualKeyboard' in navigator) {
143
79
  navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
144
80
  }
145
- clearInterval(interval);
146
81
  };
147
82
  }, [updateHeight]);
148
- return visibleHeight;
149
- };
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;