pb-sxp-ui 1.7.3 → 1.7.5

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 (33) hide show
  1. package/dist/index.cjs +60 -67
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +60 -67
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +60 -67
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/Modal/index.d.ts +1 -0
  14. package/es/core/components/SxpPageRender/Modal/index.js +2 -2
  15. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -3
  16. package/es/core/components/SxpPageRender/PictureGroup/index.js +5 -8
  17. package/es/core/components/SxpPageRender/RenderCard.js +2 -1
  18. package/es/core/components/SxpPageRender/VideoWidget/index.js +15 -17
  19. package/es/core/components/SxpPageRender/index.js +25 -20
  20. package/es/core/context/SxpDataSourceProvider.js +9 -6
  21. package/es/core/utils/tool.d.ts +1 -2
  22. package/es/core/utils/tool.js +1 -11
  23. package/lib/core/components/SxpPageRender/Modal/index.d.ts +1 -0
  24. package/lib/core/components/SxpPageRender/Modal/index.js +2 -2
  25. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +2 -3
  26. package/lib/core/components/SxpPageRender/PictureGroup/index.js +5 -8
  27. package/lib/core/components/SxpPageRender/RenderCard.js +2 -1
  28. package/lib/core/components/SxpPageRender/VideoWidget/index.js +15 -17
  29. package/lib/core/components/SxpPageRender/index.js +25 -20
  30. package/lib/core/context/SxpDataSourceProvider.js +9 -6
  31. package/lib/core/utils/tool.d.ts +1 -2
  32. package/lib/core/utils/tool.js +1 -12
  33. package/package.json +1 -1
package/es/core/components/SxpPageRender/Modal/index.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IModalProps {
9
9
  schema?: any;
10
10
  fullHeight?: number;
11
11
  isFullScreen?: boolean;
12
+ openState?: IPopupType;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IModalProps>>;
14
15
  export default _default;
package/es/core/components/SxpPageRender/Modal/index.js CHANGED
@@ -3,7 +3,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
3
3
  import * as ReactDOM from 'react-dom';
4
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
5
5
  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 }) => {
6
+ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
7
7
  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;
8
8
  const touchRef = useRef(null);
9
9
  const fTouchRef = useRef(null);
@@ -55,7 +55,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
55
55
  }, [isOpen, popup]);
56
56
  const child = useCallback(() => {
57
57
  return children;
58
- }, [_popup]);
58
+ }, [_popup, openState]);
59
59
  if (!modalEleRef.current)
60
60
  return null;
61
61
  const handleClose = debounce(() => {
package/es/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -7,11 +7,10 @@ interface IPictureGroupProps {
7
7
  height: number;
8
8
  rec: RecItemType;
9
9
  index: number;
10
- onReportViewImageEnd: (rec: RecItemType) => void;
10
+ onViewImageEndEvent: (rec: RecItemType) => void;
11
11
  onViewImageStartEvent: (index: number, imgInfo?: {
12
- contentSize: string;
13
12
  loadTime: string;
14
- }) => void;
13
+ }, enableCapi?: boolean) => void;
15
14
  imgUrlsPostConfig?: postConfigType;
16
15
  }
17
16
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -6,8 +6,7 @@ import Picture from './Picture';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import { css } from '@emotion/css';
8
8
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
9
- import { getResFileSizeFromSrc } from '../../../../core/utils/tool';
10
- const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
9
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
11
10
  var _a, _b;
12
11
  const ref = useRef();
13
12
  const { isActive } = useSwiperSlide();
@@ -19,21 +18,19 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
19
18
  if (isLoad && isActive) {
20
19
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
21
20
  if (openHashtag) {
22
- onReportViewImageEnd(rec);
21
+ onViewImageEndEvent(rec);
23
22
  }
24
23
  else {
25
- onViewImageStartEvent(index, imgInfo);
24
+ onViewImageStartEvent(index, imgInfo, true);
26
25
  }
27
26
  }
28
27
  else {
29
28
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
30
29
  }
31
- }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
30
+ }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
32
31
  const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
33
32
  if (!isLoad) {
34
- const contentSize = yield getResFileSizeFromSrc(e.src);
35
33
  setImgInfo({
36
- contentSize,
37
34
  loadTime: (new Date() - initTime).toFixed(2) + ''
38
35
  });
39
36
  setIsLoad(true);
@@ -41,7 +38,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
41
38
  }), [isLoad]);
42
39
  useEffect(() => {
43
40
  const onShow = () => onViewImageStartEvent(index, imgInfo);
44
- const onHide = () => onReportViewImageEnd(rec);
41
+ const onHide = () => onViewImageEndEvent(rec);
45
42
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
46
43
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
47
44
  return () => {
package/es/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -2,6 +2,7 @@ import React, { memo, useMemo } from 'react';
2
2
  import './index.less';
3
3
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
4
4
  import { useEditor } from '../../../core/hooks';
5
+ import { cloneDeep } from 'lodash';
5
6
  const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }) => {
6
7
  var _a, _b, _c, _d, _e;
7
8
  const { schema } = useEditor();
@@ -49,7 +50,7 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }
49
50
  const Component = withBindDataSource(t);
50
51
  const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
51
52
  const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
52
- let style = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style;
53
+ let style = cloneDeep((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style);
53
54
  if (style.hasOwnProperty('backdropFilter')) {
54
55
  let sbf = style['backdropFilter'];
55
56
  style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -7,7 +7,6 @@ import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
8
8
  import loading_gif from './loading.gif';
9
9
  import { mountVideoPlayerAtNode } from './VideoPlayer';
10
- import { getResFileSizeFromSrc } from '../../../../core/utils/tool';
11
10
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
12
11
  const [isPauseVideo, setIsPauseVideo] = useState(false);
13
12
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
@@ -23,6 +22,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
23
22
  const videoEleRef = useRef(null);
24
23
  const hlsRef = useRef(null);
25
24
  const initTimeRef = useRef();
25
+ const loadedTimeRef = useRef();
26
26
  const blur = useMemo(() => {
27
27
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
28
28
  }, [videoPostConfig]);
@@ -69,7 +69,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
69
69
  setIsLoadFinish(true);
70
70
  }, []);
71
71
  const handleStartPlay = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
72
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
72
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
73
73
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
74
74
  return;
75
75
  setIsPauseVideo(false);
@@ -79,22 +79,20 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
79
79
  const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
80
80
  const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
81
81
  const playType = isFirstPlay ? '0' : '1';
82
- const contentSize = yield getResFileSizeFromSrc((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url);
83
82
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
84
83
  eventInfo: {
85
84
  eventSubject: 'playVideo',
86
85
  eventDescription: 'User played the video',
87
- contentId: (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.itemId) !== null && _j !== void 0 ? _j : '',
88
- contentName: (_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '',
86
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
87
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
89
88
  playType,
90
89
  startTime: videoCurrentTime,
91
90
  videoDuration,
92
- contentTags: JSON.stringify((_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.tags) !== null && _o !== void 0 ? _o : []),
91
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
93
92
  position: index + '',
94
93
  contentFormat: 'video',
95
- traceInfo: (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.traceInfo,
96
- contentSize,
97
- loadTime: (new Date() - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
94
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
95
+ loadTime: ((loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
98
96
  }
99
97
  });
100
98
  setIsFirstPlay(false);
@@ -125,6 +123,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
125
123
  const handleLoadedmetadata = useCallback(() => {
126
124
  if (!videoRef.current)
127
125
  return;
126
+ loadedTimeRef.current = new Date();
128
127
  handleStartPlay();
129
128
  handLoadeddata();
130
129
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
@@ -247,7 +246,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
247
246
  };
248
247
  }, [isActive]);
249
248
  useEffect(() => {
250
- var _a, _b, _c, _d;
249
+ var _a, _b, _c, _d, _e, _f;
251
250
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
252
251
  return;
253
252
  if (isActive) {
@@ -255,10 +254,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
255
254
  eventName: 'ViewContent',
256
255
  product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
257
256
  });
258
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
257
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
258
+ eventName: 'PageView',
259
+ product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProduct
260
+ });
261
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
259
262
  }
260
263
  else {
261
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
264
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
262
265
  }
263
266
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
264
267
  useEffect(() => {
@@ -277,12 +280,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
277
280
  if (!isActive)
278
281
  return;
279
282
  const onShow = () => {
280
- var _a, _b;
281
283
  handleClickVideo('start')();
282
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
283
- eventName: 'ViewContent',
284
- product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
285
- });
286
284
  };
287
285
  const onHide = handleClickVideo('pause');
288
286
  SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -213,7 +213,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
213
213
  return (React.createElement(VideoWidget, { key: isReload, 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 }));
214
214
  }
215
215
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
216
- 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, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
216
+ 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 }));
217
217
  }
218
218
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
219
219
  return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -287,7 +287,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
287
287
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
288
288
  return;
289
289
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
290
- if (waterFallData && top < 40) {
290
+ if (waterFallData && top < 40 && globalConfig.likeIconYPosit === 'top') {
291
291
  top += 40;
292
292
  }
293
293
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -299,7 +299,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
299
299
  }
300
300
  return null;
301
301
  }, [globalConfig, waterFallData]);
302
- const handleReportViewImageEnd = (item) => {
302
+ const handleViewImageStartEnd = (item) => {
303
303
  var _a, _b, _c, _d, _e, _f;
304
304
  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)) {
305
305
  const endTime = Date.now();
@@ -382,7 +382,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
382
382
  position: ((_k = swiper.previousIndex) !== null && _k !== void 0 ? _k : 0) + ''
383
383
  }
384
384
  });
385
- handleReportViewImageEnd(item);
385
+ handleViewImageStartEnd(item);
386
386
  handleSlideSkip(item, swiper.previousIndex);
387
387
  }
388
388
  else {
@@ -398,7 +398,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
398
398
  position: ((_s = swiper.previousIndex) !== null && _s !== void 0 ? _s : 0) + ''
399
399
  }
400
400
  });
401
- handleReportViewImageEnd(item);
401
+ handleViewImageStartEnd(item);
402
402
  }
403
403
  handleReportProductView(item);
404
404
  viewTime.current = new Date();
@@ -418,7 +418,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
418
418
  viewTime.current = new Date();
419
419
  }
420
420
  }, [openHashtag, data, activeIndex]);
421
- const handleViewImageStartEvent = (activeIndex, imgInfo) => {
421
+ const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
422
422
  var _a, _b, _c, _d, _e, _f, _g, _h;
423
423
  const item = data[activeIndex];
424
424
  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)) {
@@ -435,33 +435,38 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
435
435
  position: activeIndex + '',
436
436
  contentFormat: 'image',
437
437
  traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
438
- contentSize: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.contentSize,
439
438
  loadTime: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.loadTime
440
439
  }
441
440
  });
442
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
443
- eventName: 'ViewContent',
444
- product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
445
- });
446
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
447
- eventName: 'PageView',
448
- product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
449
- });
441
+ if (enableCapi) {
442
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
443
+ eventName: 'ViewContent',
444
+ product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
445
+ });
446
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
447
+ eventName: 'PageView',
448
+ product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
449
+ });
450
+ }
450
451
  }
451
452
  };
452
453
  const renderToggleButton = useCallback((visible) => {
453
454
  var _a, _b, _c, _d, _e, _f;
454
455
  if (!visible)
455
456
  return;
457
+ let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
458
+ if (waterFallData && top < 40 && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
459
+ top += 40;
460
+ }
456
461
  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: {
457
462
  position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
458
- visibility: ((_b = (_a = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) ? 'visible' : 'hidden',
463
+ 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',
459
464
  zIndex: 999,
460
465
  transform: 'translate3d(0px,0px,0px)',
461
- [(_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _c !== void 0 ? _c : 'right']: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _d !== void 0 ? _d : 0,
462
- [(_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _e !== void 0 ? _e : 'bottom']: (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _f !== void 0 ? _f : 23
466
+ [(_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,
467
+ [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
463
468
  }, 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 })));
464
- }, [globalConfig, visList, activeIndex, isMuted]);
469
+ }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
465
470
  const renderView = useMemo(() => {
466
471
  if (loading) {
467
472
  return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -494,7 +499,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
494
499
  renderToggleButton
495
500
  ]);
496
501
  return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
497
- waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, 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: () => {
502
+ 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: () => {
498
503
  const isEq = isEqual(rtcList, cacheRtcList);
499
504
  if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
500
505
  setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -190,17 +190,20 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
190
190
  });
191
191
  }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
192
192
  const bffFbReport = useCallback(({ eventName, product }) => {
193
- var _a, _b, _c, _d;
194
- if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
193
+ var _a, _b, _c, _d, _e;
194
+ if (!enableReportEvent ||
195
+ !enabledMetaConversionApi ||
196
+ (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
197
+ !((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName])) {
195
198
  return;
196
199
  }
197
- let jsonParams = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _a === void 0 ? void 0 : _a[eventName];
200
+ let jsonParams = JSON.parse(JSON.stringify((_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _b === void 0 ? void 0 : _b[eventName]));
198
201
  const urlParams = new URLSearchParams(window.location.search);
199
202
  const fbclid = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('fbclid');
200
203
  const fix_par = {
201
- event_source_url: (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href,
204
+ event_source_url: (_c = window === null || window === void 0 ? void 0 : window.location) === null || _c === void 0 ? void 0 : _c.href,
202
205
  external_id: storeAndLoadFeUserId(),
203
- client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '',
206
+ client_user_agent: (_e = (_d = window === null || window === void 0 ? void 0 : window.navigator) === null || _d === void 0 ? void 0 : _d.userAgent) !== null && _e !== void 0 ? _e : '',
204
207
  fbc: fbclid ? `fb.2.${new Date().getTime()}.${fbclid}` : '',
205
208
  fbp: getCookie('_fbp') ? `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` : '',
206
209
  time: new Date().getTime()
@@ -225,7 +228,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
225
228
  matches.forEach((match) => {
226
229
  const prop = match.substring(2, match.length - 2);
227
230
  try {
228
- const replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
231
+ let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product);
229
232
  if (replaceValue) {
230
233
  obj[key] = replaceValue;
231
234
  }
package/es/core/utils/tool.d.ts CHANGED
@@ -11,5 +11,4 @@ declare function getBrowserInfo(): string | null;
11
11
  declare function getSystem(): string | null;
12
12
  declare function getDevice(): string | null;
13
13
  declare function getCookie(val: string): string;
14
- declare const getResFileSizeFromSrc: (imageSrc?: string) => "" | Promise<string>;
15
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getResFileSizeFromSrc };
14
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
package/es/core/utils/tool.js CHANGED
@@ -156,14 +156,4 @@ function getCookie(val) {
156
156
  });
157
157
  return value !== null && value !== void 0 ? value : '';
158
158
  }
159
- const getResFileSizeFromSrc = (imageSrc) => {
160
- if (!imageSrc)
161
- return '';
162
- return fetch(imageSrc)
163
- .then((response) => response.blob())
164
- .then((blob) => {
165
- const fileSizeInMB = blob.size / (1024 * 1024);
166
- return fileSizeInMB.toFixed(2) + '';
167
- });
168
- };
169
- export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getResFileSizeFromSrc };
159
+ export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
package/lib/core/components/SxpPageRender/Modal/index.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IModalProps {
9
9
  schema?: any;
10
10
  fullHeight?: number;
11
11
  isFullScreen?: boolean;
12
+ openState?: IPopupType;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<React.PropsWithChildren<IModalProps>>;
14
15
  export default _default;
package/lib/core/components/SxpPageRender/Modal/index.js CHANGED
@@ -6,7 +6,7 @@ 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
8
  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 }) => {
9
+ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
10
10
  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;
11
11
  const touchRef = (0, react_1.useRef)(null);
12
12
  const fTouchRef = (0, react_1.useRef)(null);
@@ -58,7 +58,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
58
58
  }, [isOpen, popup]);
59
59
  const child = (0, react_1.useCallback)(() => {
60
60
  return children;
61
- }, [_popup]);
61
+ }, [_popup, openState]);
62
62
  if (!modalEleRef.current)
63
63
  return null;
64
64
  const handleClose = (0, lodash_1.debounce)(() => {
package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -7,11 +7,10 @@ interface IPictureGroupProps {
7
7
  height: number;
8
8
  rec: RecItemType;
9
9
  index: number;
10
- onReportViewImageEnd: (rec: RecItemType) => void;
10
+ onViewImageEndEvent: (rec: RecItemType) => void;
11
11
  onViewImageStartEvent: (index: number, imgInfo?: {
12
- contentSize: string;
13
12
  loadTime: string;
14
- }) => void;
13
+ }, enableCapi?: boolean) => void;
15
14
  imgUrlsPostConfig?: postConfigType;
16
15
  }
17
16
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -8,8 +8,7 @@ const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
- const tool_1 = require("../../../../core/utils/tool");
12
- const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
11
+ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
13
12
  var _a, _b;
14
13
  const ref = (0, react_1.useRef)();
15
14
  const { isActive } = (0, react_2.useSwiperSlide)();
@@ -21,21 +20,19 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
21
20
  if (isLoad && isActive) {
22
21
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.start();
23
22
  if (openHashtag) {
24
- onReportViewImageEnd(rec);
23
+ onViewImageEndEvent(rec);
25
24
  }
26
25
  else {
27
- onViewImageStartEvent(index, imgInfo);
26
+ onViewImageStartEvent(index, imgInfo, true);
28
27
  }
29
28
  }
30
29
  else {
31
30
  (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
32
31
  }
33
- }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
32
+ }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
34
33
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
35
34
  if (!isLoad) {
36
- const contentSize = yield (0, tool_1.getResFileSizeFromSrc)(e.src);
37
35
  setImgInfo({
38
- contentSize,
39
36
  loadTime: (new Date() - initTime).toFixed(2) + ''
40
37
  });
41
38
  setIsLoad(true);
@@ -43,7 +40,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd
43
40
  }), [isLoad]);
44
41
  (0, react_1.useEffect)(() => {
45
42
  const onShow = () => onViewImageStartEvent(index, imgInfo);
46
- const onHide = () => onReportViewImageEnd(rec);
43
+ const onHide = () => onViewImageEndEvent(rec);
47
44
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
48
45
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
49
46
  return () => {
package/lib/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
5
5
  require("./index.less");
6
6
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
7
7
  const hooks_1 = require("../../../core/hooks");
8
+ const lodash_1 = require("lodash");
8
9
  const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }) => {
9
10
  var _a, _b, _c, _d, _e;
10
11
  const { schema } = (0, hooks_1.useEditor)();
@@ -52,7 +53,7 @@ const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive }
52
53
  const Component = (0, withBindDataSource_1.default)(t);
53
54
  const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
54
55
  const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
55
- let style = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style;
56
+ let style = (0, lodash_1.cloneDeep)((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style);
56
57
  if (style.hasOwnProperty('backdropFilter')) {
57
58
  let sbf = style['backdropFilter'];
58
59
  style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -9,7 +9,6 @@ const hooks_1 = require("../../../../core/hooks");
9
9
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
10
10
  const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
11
11
  const VideoPlayer_1 = require("./VideoPlayer");
12
- const tool_1 = require("../../../../core/utils/tool");
13
12
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
14
13
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
15
14
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
@@ -25,6 +24,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
25
24
  const videoEleRef = (0, react_1.useRef)(null);
26
25
  const hlsRef = (0, react_1.useRef)(null);
27
26
  const initTimeRef = (0, react_1.useRef)();
27
+ const loadedTimeRef = (0, react_1.useRef)();
28
28
  const blur = (0, react_1.useMemo)(() => {
29
29
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
30
30
  }, [videoPostConfig]);
@@ -71,7 +71,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
71
71
  setIsLoadFinish(true);
72
72
  }, []);
73
73
  const handleStartPlay = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
74
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
74
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
75
75
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
76
76
  return;
77
77
  setIsPauseVideo(false);
@@ -81,22 +81,20 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
81
81
  const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
82
82
  const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
83
83
  const playType = isFirstPlay ? '0' : '1';
84
- const contentSize = yield (0, tool_1.getResFileSizeFromSrc)((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url);
85
84
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
86
85
  eventInfo: {
87
86
  eventSubject: 'playVideo',
88
87
  eventDescription: 'User played the video',
89
- contentId: (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.itemId) !== null && _j !== void 0 ? _j : '',
90
- contentName: (_l = (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '',
88
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
89
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
91
90
  playType,
92
91
  startTime: videoCurrentTime,
93
92
  videoDuration,
94
- contentTags: JSON.stringify((_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.tags) !== null && _o !== void 0 ? _o : []),
93
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
95
94
  position: index + '',
96
95
  contentFormat: 'video',
97
- traceInfo: (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.traceInfo,
98
- contentSize,
99
- loadTime: (new Date() - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
96
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
97
+ loadTime: ((loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
100
98
  }
101
99
  });
102
100
  setIsFirstPlay(false);
@@ -127,6 +125,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
127
125
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
128
126
  if (!videoRef.current)
129
127
  return;
128
+ loadedTimeRef.current = new Date();
130
129
  handleStartPlay();
131
130
  handLoadeddata();
132
131
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
@@ -249,7 +248,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
249
248
  };
250
249
  }, [isActive]);
251
250
  (0, react_1.useEffect)(() => {
252
- var _a, _b, _c, _d;
251
+ var _a, _b, _c, _d, _e, _f;
253
252
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
254
253
  return;
255
254
  if (isActive) {
@@ -257,10 +256,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
257
256
  eventName: 'ViewContent',
258
257
  product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
259
258
  });
260
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
259
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
260
+ eventName: 'PageView',
261
+ product: (_d = (_c = data === null || data === void 0 ? void 0 : data[index]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.bindProduct
262
+ });
263
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
261
264
  }
262
265
  else {
263
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
266
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
264
267
  }
265
268
  }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
266
269
  (0, react_1.useEffect)(() => {
@@ -279,12 +282,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
279
282
  if (!isActive)
280
283
  return;
281
284
  const onShow = () => {
282
- var _a, _b;
283
285
  handleClickVideo('start')();
284
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
285
- eventName: 'ViewContent',
286
- product: (_b = (_a = data === null || data === void 0 ? void 0 : data[index]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.bindProduct
287
- });
288
286
  };
289
287
  const onHide = handleClickVideo('pause');
290
288
  event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);