pb-sxp-ui 1.2.7 → 1.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/index.cjs +76 -77
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +76 -77
  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 +76 -77
  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/FormatImage.d.ts +1 -0
  14. package/es/core/components/SxpPageRender/FormatImage.js +17 -3
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +2 -2
  16. package/es/core/components/SxpPageRender/index.js +11 -3
  17. package/es/core/context/SxpDataSourceProvider.js +2 -2
  18. package/es/materials/sxp/cta/AniLink/index.js +1 -1
  19. package/es/materials/sxp/cta/AniLink/interactionRender.d.ts +0 -3
  20. package/es/materials/sxp/cta/AniLink/interactionRender.js +1 -2
  21. package/es/materials/sxp/cta/AniLink/material.js +9 -1
  22. package/es/materials/sxp/cta/AniLinkPopup/index.js +2 -2
  23. package/es/materials/sxp/cta/AniLinkPopup/interactionRender.d.ts +0 -10
  24. package/es/materials/sxp/cta/AniLinkPopup/interactionRender.js +1 -7
  25. package/es/materials/sxp/cta/AniLinkPopup/material.js +19 -11
  26. package/lib/core/components/SxpPageRender/FormatImage.d.ts +1 -0
  27. package/lib/core/components/SxpPageRender/FormatImage.js +17 -3
  28. package/lib/core/components/SxpPageRender/VideoWidget/index.js +2 -2
  29. package/lib/core/components/SxpPageRender/index.js +11 -3
  30. package/lib/core/context/SxpDataSourceProvider.js +2 -2
  31. package/lib/materials/sxp/cta/AniLink/index.js +1 -1
  32. package/lib/materials/sxp/cta/AniLink/interactionRender.d.ts +0 -3
  33. package/lib/materials/sxp/cta/AniLink/interactionRender.js +1 -2
  34. package/lib/materials/sxp/cta/AniLink/material.js +9 -1
  35. package/lib/materials/sxp/cta/AniLinkPopup/index.js +2 -2
  36. package/lib/materials/sxp/cta/AniLinkPopup/interactionRender.d.ts +0 -10
  37. package/lib/materials/sxp/cta/AniLinkPopup/interactionRender.js +1 -7
  38. package/lib/materials/sxp/cta/AniLinkPopup/material.js +19 -11
  39. package/package.json +1 -1
package/es/core/components/SxpPageRender/FormatImage.d.ts CHANGED
@@ -5,6 +5,7 @@ interface IFormatImageProps {
5
5
  style?: CSSProperties;
6
6
  className?: any;
7
7
  loading?: 'eager' | 'lazy';
8
+ alt?: string;
8
9
  }
9
10
  interface IFormatImageRefProps {
10
11
  setSrc: (v: string) => void;
package/es/core/components/SxpPageRender/FormatImage.js CHANGED
@@ -1,6 +1,7 @@
1
+ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
1
2
  import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
2
3
  const FormatImage = forwardRef((props, ref) => {
3
- const { src, onLoad, style, className, loading } = props;
4
+ const { src, onLoad, style, className, loading, alt = 'image' } = props;
4
5
  const [imgSrc, setImgSrc] = useState();
5
6
  const imgRef = useRef(null);
6
7
  useImperativeHandle(ref, () => ({
@@ -11,6 +12,19 @@ const FormatImage = forwardRef((props, ref) => {
11
12
  useEffect(() => {
12
13
  setImgSrc(src);
13
14
  }, [src]);
15
+ useEffect(() => {
16
+ const onShow = () => {
17
+ var _a, _b;
18
+ if (src && ((_b = (_a = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === 'none') {
19
+ imgRef.current.src = '';
20
+ imgRef.current.src = src;
21
+ }
22
+ };
23
+ SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
24
+ return () => {
25
+ SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
26
+ };
27
+ }, [src]);
14
28
  return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
15
29
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
16
30
  React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -19,10 +33,10 @@ const FormatImage = forwardRef((props, ref) => {
19
33
  if (imgRef.current)
20
34
  imgRef.current.style.display = 'block';
21
35
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
22
- }, alt: 'image' }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
36
+ }, alt: alt }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
23
37
  if (imgRef.current)
24
38
  imgRef.current.style.display = 'block';
25
39
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
26
- }, alt: 'image' }))));
40
+ }, alt: alt }))));
27
41
  });
28
42
  export default memo(FormatImage);
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -340,7 +340,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
340
340
  } },
341
341
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
342
342
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
343
- React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON }))),
343
+ isPauseVideo && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))),
344
344
  renderPoster,
345
345
  renderLoading)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
346
346
  position: 'relative',
@@ -351,6 +351,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
351
351
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
352
352
  renderPoster,
353
353
  renderLoading,
354
- React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
354
+ isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
355
355
  };
356
356
  export default memo(VideoWidget);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -30,6 +30,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
30
30
  const viewTime = useRef();
31
31
  const [isLoadMore, setIsLoadMore] = useState(false);
32
32
  const [isShowMore, setIsShowMore] = useState(false);
33
+ const [isReload, setIsReload] = useState(new Date().getTime());
34
+ const skipLinkRef = useRef(false);
33
35
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview } = useSxpDataSource();
34
36
  const { backMainFeed } = useEventReport();
35
37
  const { productView } = useEventReport();
@@ -121,6 +123,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
121
123
  });
122
124
  }
123
125
  else if (document.visibilityState === 'visible') {
126
+ if (skipLinkRef.current === true) {
127
+ setIsReload(new Date().getTime());
128
+ skipLinkRef.current = false;
129
+ }
124
130
  handleH5EnterLink();
125
131
  if (repCond) {
126
132
  handleViewImageStartEvent(activeIndex);
@@ -177,7 +183,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
177
183
  const renderContent = useCallback((rec, index) => {
178
184
  var _a, _b, _c, _d;
179
185
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
180
- return (React.createElement(VideoWidget, { 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 }));
186
+ 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 }));
181
187
  }
182
188
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
183
189
  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 }));
@@ -203,7 +209,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
203
209
  viewTime,
204
210
  tipText,
205
211
  resolver,
206
- schema
212
+ schema,
213
+ isReload
207
214
  ]);
208
215
  const onExpandableChange = useCallback((v) => {
209
216
  setIsShowMore(v);
@@ -309,6 +316,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
309
316
  }
310
317
  });
311
318
  setSlideSkipState();
319
+ skipLinkRef.current = true;
312
320
  window.location.href = window.getJointUtmLink(link);
313
321
  }
314
322
  }
@@ -421,7 +429,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
421
429
  renderBottom(rec, index),
422
430
  renderLikeButton(rec, index)))))));
423
431
  });
424
- }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
432
+ }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage, isReload]);
425
433
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
426
434
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
427
435
  return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -128,8 +128,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
128
128
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
129
129
  themeTag: themeTag.current
130
130
  });
131
- setRtcList(getFilterRecList(data));
132
- setCacheRtcList(getFilterRecList(data));
131
+ setRtcList(rtcList.concat(getFilterRecList(data)));
132
+ setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
133
133
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
134
134
  const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
135
135
  if (!enableReportEvent) {
package/es/materials/sxp/cta/AniLink/index.js CHANGED
@@ -35,7 +35,7 @@ const AniLink = (_a) => {
35
35
  onClick === null || onClick === void 0 ? void 0 : onClick();
36
36
  }
37
37
  };
38
- const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
38
+ const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
39
39
  const aniTimStyle = useMemo(() => {
40
40
  var _a, _b;
41
41
  const ani = event === null || event === void 0 ? void 0 : event.animation;
package/es/materials/sxp/cta/AniLink/interactionRender.d.ts CHANGED
@@ -11,7 +11,6 @@ declare const _default: ({
11
11
  name: string[];
12
12
  label: string;
13
13
  options?: undefined;
14
- initialValue?: undefined;
15
14
  fieldProps?: undefined;
16
15
  addonAfter?: undefined;
17
16
  } | {
@@ -22,7 +21,6 @@ declare const _default: ({
22
21
  label: string;
23
22
  value: number;
24
23
  }[];
25
- initialValue: number;
26
24
  fieldProps: {
27
25
  style: {
28
26
  width: string;
@@ -35,7 +33,6 @@ declare const _default: ({
35
33
  name: string[];
36
34
  addonAfter: string;
37
35
  options?: undefined;
38
- initialValue?: undefined;
39
36
  fieldProps?: undefined;
40
37
  })[];
41
38
  })[];
package/es/materials/sxp/cta/AniLink/interactionRender.js CHANGED
@@ -22,11 +22,10 @@ export default [
22
22
  label: '动画',
23
23
  options: [
24
24
  {
25
- label: '由左向右/中间扩散',
25
+ label: '默认',
26
26
  value: 1
27
27
  }
28
28
  ],
29
- initialValue: 1,
30
29
  fieldProps: {
31
30
  style: {
32
31
  width: '100%'
package/es/materials/sxp/cta/AniLink/material.js CHANGED
@@ -18,7 +18,15 @@ const AniLink = createMaterial(AniLinkComponent, {
18
18
  ctaTitle: {
19
19
  fontSize: 15,
20
20
  color: '#fff',
21
- textAlign: 'left'
21
+ textAlign: 'center'
22
+ }
23
+ },
24
+ event: {
25
+ animation: {
26
+ backgroundColor: '#F40082',
27
+ name: 1,
28
+ delay: 1000,
29
+ duration: 2000
22
30
  }
23
31
  }
24
32
  },
package/es/materials/sxp/cta/AniLinkPopup/index.js CHANGED
@@ -35,7 +35,7 @@ const AniLinkPopup = (_a) => {
35
35
  onClick === null || onClick === void 0 ? void 0 : onClick();
36
36
  }
37
37
  };
38
- const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
38
+ const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
39
39
  const aniTimStyle = useMemo(() => {
40
40
  const ani = event === null || event === void 0 ? void 0 : event.animation;
41
41
  if (ani) {
@@ -67,7 +67,7 @@ const AniLinkPopup = (_a) => {
67
67
  React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
68
68
  React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
69
69
  React.createElement(Img, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
70
- (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
70
+ (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
71
71
  __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
72
72
  } })),
73
73
  React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
package/es/materials/sxp/cta/AniLinkPopup/interactionRender.d.ts CHANGED
@@ -7,14 +7,6 @@ declare const _default: ({
7
7
  } | {
8
8
  title: string;
9
9
  child: ({
10
- type: string;
11
- name: string[];
12
- label: string;
13
- options?: undefined;
14
- initialValue?: undefined;
15
- fieldProps?: undefined;
16
- addonAfter?: undefined;
17
- } | {
18
10
  type: string;
19
11
  name: string[];
20
12
  label: string;
@@ -22,7 +14,6 @@ declare const _default: ({
22
14
  label: string;
23
15
  value: number;
24
16
  }[];
25
- initialValue: number;
26
17
  fieldProps: {
27
18
  style: {
28
19
  width: string;
@@ -35,7 +26,6 @@ declare const _default: ({
35
26
  name: string[];
36
27
  addonAfter: string;
37
28
  options?: undefined;
38
- initialValue?: undefined;
39
29
  fieldProps?: undefined;
40
30
  })[];
41
31
  })[];
package/es/materials/sxp/cta/AniLinkPopup/interactionRender.js CHANGED
@@ -11,22 +11,16 @@ export default [
11
11
  {
12
12
  title: '动画效果',
13
13
  child: [
14
- {
15
- type: 'Color',
16
- name: ['animation', 'backgroundColor'],
17
- label: '动画颜色'
18
- },
19
14
  {
20
15
  type: 'Select',
21
16
  name: ['animation', 'name'],
22
17
  label: '动画',
23
18
  options: [
24
19
  {
25
- label: '由左向右/中间扩散',
20
+ label: '默认',
26
21
  value: 1
27
22
  }
28
23
  ],
29
- initialValue: 1,
30
24
  fieldProps: {
31
25
  style: {
32
26
  width: '100%'
package/es/materials/sxp/cta/AniLinkPopup/material.js CHANGED
@@ -17,32 +17,40 @@ const AniLinkPopup = createMaterial(AniLinkPopupComponent, {
17
17
  ctaTempStyles: {
18
18
  img: {
19
19
  borderRadius: 3,
20
- width: 76,
21
- height: 76,
22
- marginBottom: 10
20
+ width: 108,
21
+ height: 108,
22
+ marginBottom: 0
23
23
  },
24
24
  title: {
25
- fontSize: 12,
25
+ fontSize: 14,
26
26
  color: '#000',
27
- textAlign: 'left'
27
+ textAlign: 'left',
28
+ lineHeight: 2.6
28
29
  },
29
30
  ctaTitle: {
30
- fontSize: 10,
31
+ width: 108,
32
+ height: 22,
33
+ fontSize: 12,
31
34
  color: '#fff',
32
35
  textAlign: 'center',
33
- width: 76,
34
- height: 20,
35
36
  backgroundColor: 'rgba(0,0,0,1)'
36
37
  }
38
+ },
39
+ event: {
40
+ animation: {
41
+ name: 1,
42
+ delay: 1000,
43
+ duration: 2000
44
+ }
37
45
  }
38
46
  },
39
47
  style: {
40
- width: 90,
41
- height: 160,
48
+ width: 120,
49
+ height: 185,
42
50
  borderRadius: 3,
43
51
  backgroundColor: 'rgba(255,255,255,1)',
44
52
  padding: 7,
45
- margin: 10
53
+ margin: 15
46
54
  }
47
55
  },
48
56
  w: 100,
package/lib/core/components/SxpPageRender/FormatImage.d.ts CHANGED
@@ -5,6 +5,7 @@ interface IFormatImageProps {
5
5
  style?: CSSProperties;
6
6
  className?: any;
7
7
  loading?: 'eager' | 'lazy';
8
+ alt?: string;
8
9
  }
9
10
  interface IFormatImageRefProps {
10
11
  setSrc: (v: string) => void;
package/lib/core/components/SxpPageRender/FormatImage.js CHANGED
@@ -1,9 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
+ const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
4
5
  const react_1 = tslib_1.__importStar(require("react"));
5
6
  const FormatImage = (0, react_1.forwardRef)((props, ref) => {
6
- const { src, onLoad, style, className, loading } = props;
7
+ const { src, onLoad, style, className, loading, alt = 'image' } = props;
7
8
  const [imgSrc, setImgSrc] = (0, react_1.useState)();
8
9
  const imgRef = (0, react_1.useRef)(null);
9
10
  (0, react_1.useImperativeHandle)(ref, () => ({
@@ -14,6 +15,19 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
14
15
  (0, react_1.useEffect)(() => {
15
16
  setImgSrc(src);
16
17
  }, [src]);
18
+ (0, react_1.useEffect)(() => {
19
+ const onShow = () => {
20
+ var _a, _b;
21
+ if (src && ((_b = (_a = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === 'none') {
22
+ imgRef.current.src = '';
23
+ imgRef.current.src = src;
24
+ }
25
+ };
26
+ event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
27
+ return () => {
28
+ event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
29
+ };
30
+ }, [src]);
17
31
  return (react_1.default.createElement(react_1.default.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
18
32
  react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
19
33
  react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -22,10 +36,10 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
22
36
  if (imgRef.current)
23
37
  imgRef.current.style.display = 'block';
24
38
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
25
- }, alt: 'image' }))) : (react_1.default.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
39
+ }, alt: alt }))) : (react_1.default.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
26
40
  if (imgRef.current)
27
41
  imgRef.current.style.display = 'block';
28
42
  onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
29
- }, alt: 'image' }))));
43
+ }, alt: alt }))));
30
44
  });
31
45
  exports.default = (0, react_1.memo)(FormatImage);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -343,7 +343,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
343
343
  } },
344
344
  react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
345
345
  react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
346
- react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON }))),
346
+ isPauseVideo && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))),
347
347
  renderPoster,
348
348
  renderLoading)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
349
349
  position: 'relative',
@@ -354,6 +354,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
354
354
  react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
355
355
  renderPoster,
356
356
  renderLoading,
357
- react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
357
+ isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
358
358
  };
359
359
  exports.default = (0, react_1.memo)(VideoWidget);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -33,6 +33,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
33
33
  const viewTime = (0, react_1.useRef)();
34
34
  const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
35
35
  const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
36
+ const [isReload, setIsReload] = (0, react_1.useState)(new Date().getTime());
37
+ const skipLinkRef = (0, react_1.useRef)(false);
36
38
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview } = (0, hooks_1.useSxpDataSource)();
37
39
  const { backMainFeed } = (0, useEventReport_1.useEventReport)();
38
40
  const { productView } = (0, useEventReport_1.useEventReport)();
@@ -124,6 +126,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
124
126
  });
125
127
  }
126
128
  else if (document.visibilityState === 'visible') {
129
+ if (skipLinkRef.current === true) {
130
+ setIsReload(new Date().getTime());
131
+ skipLinkRef.current = false;
132
+ }
127
133
  handleH5EnterLink();
128
134
  if (repCond) {
129
135
  handleViewImageStartEvent(activeIndex);
@@ -180,7 +186,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
180
186
  const renderContent = (0, react_1.useCallback)((rec, index) => {
181
187
  var _a, _b, _c, _d;
182
188
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
183
- return (react_1.default.createElement(VideoWidget_1.default, { 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 }));
189
+ return (react_1.default.createElement(VideoWidget_1.default, { 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 }));
184
190
  }
185
191
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
186
192
  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, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -206,7 +212,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
206
212
  viewTime,
207
213
  tipText,
208
214
  resolver,
209
- schema
215
+ schema,
216
+ isReload
210
217
  ]);
211
218
  const onExpandableChange = (0, react_1.useCallback)((v) => {
212
219
  setIsShowMore(v);
@@ -312,6 +319,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
312
319
  }
313
320
  });
314
321
  (0, localStore_1.setSlideSkipState)();
322
+ skipLinkRef.current = true;
315
323
  window.location.href = window.getJointUtmLink(link);
316
324
  }
317
325
  }
@@ -424,7 +432,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
424
432
  renderBottom(rec, index),
425
433
  renderLikeButton(rec, index)))))));
426
434
  });
427
- }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
435
+ }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage, isReload]);
428
436
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
429
437
  const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
430
438
  return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -131,8 +131,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
131
131
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
132
132
  themeTag: themeTag.current
133
133
  });
134
- setRtcList(getFilterRecList(data));
135
- setCacheRtcList(getFilterRecList(data));
134
+ setRtcList(rtcList.concat(getFilterRecList(data)));
135
+ setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
136
136
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
137
137
  const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
138
138
  if (!enableReportEvent) {
package/lib/materials/sxp/cta/AniLink/index.js CHANGED
@@ -37,7 +37,7 @@ const AniLink = (_a) => {
37
37
  onClick === null || onClick === void 0 ? void 0 : onClick();
38
38
  }
39
39
  };
40
- const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
40
+ const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
41
41
  const aniTimStyle = (0, react_1.useMemo)(() => {
42
42
  var _a, _b;
43
43
  const ani = event === null || event === void 0 ? void 0 : event.animation;
package/lib/materials/sxp/cta/AniLink/interactionRender.d.ts CHANGED
@@ -11,7 +11,6 @@ declare const _default: ({
11
11
  name: string[];
12
12
  label: string;
13
13
  options?: undefined;
14
- initialValue?: undefined;
15
14
  fieldProps?: undefined;
16
15
  addonAfter?: undefined;
17
16
  } | {
@@ -22,7 +21,6 @@ declare const _default: ({
22
21
  label: string;
23
22
  value: number;
24
23
  }[];
25
- initialValue: number;
26
24
  fieldProps: {
27
25
  style: {
28
26
  width: string;
@@ -35,7 +33,6 @@ declare const _default: ({
35
33
  name: string[];
36
34
  addonAfter: string;
37
35
  options?: undefined;
38
- initialValue?: undefined;
39
36
  fieldProps?: undefined;
40
37
  })[];
41
38
  })[];
package/lib/materials/sxp/cta/AniLink/interactionRender.js CHANGED
@@ -24,11 +24,10 @@ exports.default = [
24
24
  label: '动画',
25
25
  options: [
26
26
  {
27
- label: '由左向右/中间扩散',
27
+ label: '默认',
28
28
  value: 1
29
29
  }
30
30
  ],
31
- initialValue: 1,
32
31
  fieldProps: {
33
32
  style: {
34
33
  width: '100%'
package/lib/materials/sxp/cta/AniLink/material.js CHANGED
@@ -22,7 +22,15 @@ const AniLink = (0, create_1.createMaterial)(_1.default, {
22
22
  ctaTitle: {
23
23
  fontSize: 15,
24
24
  color: '#fff',
25
- textAlign: 'left'
25
+ textAlign: 'center'
26
+ }
27
+ },
28
+ event: {
29
+ animation: {
30
+ backgroundColor: '#F40082',
31
+ name: 1,
32
+ delay: 1000,
33
+ duration: 2000
26
34
  }
27
35
  }
28
36
  },
package/lib/materials/sxp/cta/AniLinkPopup/index.js CHANGED
@@ -37,7 +37,7 @@ const AniLinkPopup = (_a) => {
37
37
  onClick === null || onClick === void 0 ? void 0 : onClick();
38
38
  }
39
39
  };
40
- const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
40
+ const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
41
41
  const aniTimStyle = (0, react_1.useMemo)(() => {
42
42
  const ani = event === null || event === void 0 ? void 0 : event.animation;
43
43
  if (ani) {
@@ -69,7 +69,7 @@ const AniLinkPopup = (_a) => {
69
69
  react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
70
70
  react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
71
71
  react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
72
- (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
72
+ (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
73
73
  __html: (0, tool_1.setFontForText)((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
74
74
  } })),
75
75
  react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {
package/lib/materials/sxp/cta/AniLinkPopup/interactionRender.d.ts CHANGED
@@ -7,14 +7,6 @@ declare const _default: ({
7
7
  } | {
8
8
  title: string;
9
9
  child: ({
10
- type: string;
11
- name: string[];
12
- label: string;
13
- options?: undefined;
14
- initialValue?: undefined;
15
- fieldProps?: undefined;
16
- addonAfter?: undefined;
17
- } | {
18
10
  type: string;
19
11
  name: string[];
20
12
  label: string;
@@ -22,7 +14,6 @@ declare const _default: ({
22
14
  label: string;
23
15
  value: number;
24
16
  }[];
25
- initialValue: number;
26
17
  fieldProps: {
27
18
  style: {
28
19
  width: string;
@@ -35,7 +26,6 @@ declare const _default: ({
35
26
  name: string[];
36
27
  addonAfter: string;
37
28
  options?: undefined;
38
- initialValue?: undefined;
39
29
  fieldProps?: undefined;
40
30
  })[];
41
31
  })[];
package/lib/materials/sxp/cta/AniLinkPopup/interactionRender.js CHANGED
@@ -13,22 +13,16 @@ exports.default = [
13
13
  {
14
14
  title: '动画效果',
15
15
  child: [
16
- {
17
- type: 'Color',
18
- name: ['animation', 'backgroundColor'],
19
- label: '动画颜色'
20
- },
21
16
  {
22
17
  type: 'Select',
23
18
  name: ['animation', 'name'],
24
19
  label: '动画',
25
20
  options: [
26
21
  {
27
- label: '由左向右/中间扩散',
22
+ label: '默认',
28
23
  value: 1
29
24
  }
30
25
  ],
31
- initialValue: 1,
32
26
  fieldProps: {
33
27
  style: {
34
28
  width: '100%'