pb-sxp-ui 1.0.41 → 1.0.43

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 (48) hide show
  1. package/dist/index.cjs +218 -497
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +1 -6
  4. package/dist/index.js +218 -496
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -4
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -4
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +222 -500
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -4
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  16. package/es/core/components/SxpPageRender/WaterFall/index.js +1 -1
  17. package/es/core/components/SxpPageRender/index.js +58 -11
  18. package/es/core/context/SxpDataSourceProvider.d.ts +2 -0
  19. package/es/core/context/SxpDataSourceProvider.js +5 -2
  20. package/es/core/hooks/useEventReport.js +4 -4
  21. package/es/index.d.ts +0 -1
  22. package/es/index.js +0 -1
  23. package/es/materials/sxp/popup/CommodityDetail/index.js +6 -6
  24. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  25. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +1 -0
  26. package/lib/core/components/SxpPageRender/VideoWidget/index.js +119 -88
  27. package/lib/core/components/SxpPageRender/WaterFall/index.js +1 -1
  28. package/lib/core/components/SxpPageRender/index.js +58 -11
  29. package/lib/core/context/SxpDataSourceProvider.d.ts +2 -0
  30. package/lib/core/context/SxpDataSourceProvider.js +5 -2
  31. package/lib/core/hooks/useEventReport.js +4 -4
  32. package/lib/index.d.ts +0 -1
  33. package/lib/index.js +1 -3
  34. package/lib/materials/sxp/popup/CommodityDetail/index.js +6 -6
  35. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +9 -9
  36. package/package.json +1 -2
  37. package/es/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  38. package/es/core/components/DiyPortalPreview/PictureGroup.js +0 -11
  39. package/es/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  40. package/es/core/components/DiyPortalPreview/VideoWidget.js +0 -236
  41. package/es/core/components/DiyPortalPreview/index.d.ts +0 -6
  42. package/es/core/components/DiyPortalPreview/index.js +0 -112
  43. package/lib/core/components/DiyPortalPreview/PictureGroup.d.ts +0 -13
  44. package/lib/core/components/DiyPortalPreview/PictureGroup.js +0 -14
  45. package/lib/core/components/DiyPortalPreview/VideoWidget.d.ts +0 -15
  46. package/lib/core/components/DiyPortalPreview/VideoWidget.js +0 -239
  47. package/lib/core/components/DiyPortalPreview/index.d.ts +0 -6
  48. package/lib/core/components/DiyPortalPreview/index.js +0 -115
package/es/core/components/SxpPageRender/VideoWidget/index.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IVideoWidgetProps {
9
9
  muted: boolean;
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
+ videoRef?: any;
12
13
  }
13
14
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
14
15
  export default _default;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -4,9 +4,8 @@ import { useIconLink } from '../useIconLink';
4
4
  import FormatImage from '../FormatImage';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
7
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
7
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
8
8
  const [isPauseVideo, setIsPauseVideo] = useState(false);
9
- const videoRef = useRef(null);
10
9
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
11
10
  const videoStartTime = useRef(0);
12
11
  const [isLoadFinish, setIsLoadFinish] = useState(false);
@@ -14,99 +13,118 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
14
13
  const { isActive } = useSwiperSlide();
15
14
  const canvasRef = useRef(null);
16
15
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
16
+ const videoId = `pb-cache-video-${index}`;
17
+ const videoEleRef = useRef(null);
17
18
  useEffect(() => {
18
- if (!videoRef.current)
19
+ if (!videoRef)
19
20
  return;
20
- videoRef.current.muted = muted;
21
- }, [muted]);
22
- const handleVideoStart = useCallback(() => {
23
- var _a;
24
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
25
- }, []);
21
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
22
+ }, [muted, videoRef]);
23
+ const handleEnded = useCallback(() => {
24
+ if (!videoRef)
25
+ return;
26
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
27
+ }, [videoRef]);
26
28
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
27
29
  const handlePlaying = useCallback(() => {
28
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
30
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
31
+ if (!videoRef)
32
+ return;
29
33
  setIsPauseVideo(false);
30
34
  const item = data[index];
31
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
32
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
33
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
34
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
35
+ if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
36
+ videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
37
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
38
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
35
39
  const playType = isFirstPlay ? '0' : '1';
36
40
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
37
41
  eventInfo: {
38
42
  eventSubject: 'playVideo',
39
43
  eventDescription: 'User played the video',
40
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
41
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
44
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
45
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
42
46
  playType,
43
47
  startTime: videoCurrentTime,
44
48
  videoDuration,
45
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
49
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
46
50
  position: index + '',
47
51
  contentFormat: 'video',
48
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
52
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
49
53
  }
50
54
  });
51
55
  setIsFirstPlay(false);
52
56
  }
53
- }, [bffEventReport, data, index, isFirstPlay]);
54
- const handleLoadedMetadata = useCallback(() => {
57
+ }, [bffEventReport, data, index, isFirstPlay, videoRef]);
58
+ const handleLoadedmetadata = useCallback(() => {
59
+ if (!videoRef)
60
+ return;
61
+ if (activeIndex !== index) {
62
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
63
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
64
+ }
65
+ setIsLoadFinish(true);
66
+ }, [activeIndex, index, videoRef]);
67
+ const handleCanplay = useCallback(() => {
55
68
  setIsLoadFinish(true);
56
69
  }, []);
57
70
  const handleClickVideo = useCallback((type) => () => {
58
- var _a, _b, _c, _d, _e;
71
+ if (!videoRef)
72
+ return;
59
73
  if (!isLoadFinish)
60
74
  return;
61
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
75
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
62
76
  switch (type) {
63
77
  case 'start':
64
78
  if (!isPause)
65
79
  return;
66
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
80
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
67
81
  setIsPauseVideo(false);
68
82
  break;
69
83
  case 'pause':
70
84
  if (isPause)
71
85
  return;
72
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
86
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
73
87
  setIsPauseVideo(true);
74
88
  break;
75
89
  default:
76
90
  if (isPause) {
77
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
91
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
78
92
  }
79
93
  else {
80
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
94
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
81
95
  }
82
96
  setIsPauseVideo(!isPause);
83
97
  break;
84
98
  }
85
- }, [isLoadFinish]);
86
- const onPause = useCallback(() => {
87
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
99
+ }, [isLoadFinish, videoRef]);
100
+ const handlePause = useCallback(() => {
101
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
102
+ if (!videoRef)
103
+ return;
104
+ if (activeIndex !== index)
105
+ return;
88
106
  const item = data[index];
89
- const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
90
- const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
91
- if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
92
- const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
107
+ const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
108
+ const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
109
+ if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
110
+ const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
93
111
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
94
112
  eventInfo: {
95
113
  eventSubject: 'playOverVideo',
96
114
  eventDescription: 'User finished playing the video',
97
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
98
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
115
+ contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
116
+ contentName: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
99
117
  endTime: videoCurrentTime,
100
118
  videoDuration,
101
119
  playDuration,
102
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
120
+ contentTags: JSON.stringify((_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
103
121
  position: index + '',
104
122
  contentFormat: 'video',
105
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
123
+ traceInfo: (_j = item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
106
124
  }
107
125
  });
108
126
  }
109
- }, [data, index, bffEventReport]);
127
+ }, [data, index, bffEventReport, videoRef]);
110
128
  const blur = useMemo(() => {
111
129
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
112
130
  }, [videoPostConfig]);
@@ -121,64 +139,79 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
121
139
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
122
140
  }, [firstFrameSrc, rec]);
123
141
  const handLoadeddata = useCallback(() => {
124
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
142
+ var _a;
143
+ if (!videoRef)
125
144
  return;
126
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
127
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
128
- const ctx = canvas.getContext('2d');
129
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
130
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
131
- canvas.height = targetHeight;
132
- canvas.width = targetWidth;
133
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
134
- setFirstFrameSrc(canvas.toDataURL());
135
- }, []);
145
+ const videoDomRef = document.getElementById(`${videoId}_html5_api`);
146
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
147
+ return;
148
+ const setFrameImg = () => {
149
+ const video = videoDomRef;
150
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
151
+ const ctx = canvas.getContext('2d');
152
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
153
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
154
+ canvas.height = targetHeight;
155
+ canvas.width = targetWidth;
156
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
157
+ setFirstFrameSrc(canvas.toDataURL());
158
+ };
159
+ setFrameImg();
160
+ setTimeout(() => {
161
+ setFrameImg();
162
+ }, 500);
163
+ }, [videoRef]);
136
164
  useEffect(() => {
137
- var _a, _b, _c, _d;
138
- if (!videoRef.current)
165
+ if (!isActive || !videoRef)
166
+ return;
167
+ const videoSrc = rec.video.url;
168
+ if (!videoSrc)
139
169
  return;
140
170
  setIsPauseVideo(false);
141
- if (!videoRef.current.src) {
142
- const videoSrc = rec.video.url;
143
- videoRef.current.src = videoSrc;
144
- videoRef.current.setAttribute('x5-playsinline', 'true');
145
- videoRef.current.setAttribute('webkit-playsinline', 'true');
146
- }
147
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
148
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
149
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
150
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
171
+ const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
172
+ const dom = document.querySelector('#player-container-id');
173
+ const dom2 = document.querySelector('#player-container-id-copy');
174
+ if (!dom && !dom2)
175
+ return;
176
+ videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
177
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
178
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
179
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
180
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('canplay', handleCanplay);
181
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
182
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
183
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
151
184
  return () => {
152
- var _a, _b, _c, _d;
153
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
154
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
155
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
156
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
185
+ dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
186
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
187
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
188
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('canplay', handleCanplay);
189
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
190
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
191
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
157
192
  };
158
- }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
193
+ }, [isActive, videoId, rec, videoRef]);
159
194
  useEffect(() => {
160
- var _a;
161
- if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
195
+ if (!videoRef || !isLoadFinish)
162
196
  return;
163
197
  if (isActive) {
164
- videoRef.current.play();
198
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
165
199
  }
166
200
  else {
167
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
201
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
168
202
  }
169
- }, [isActive, isLoadFinish]);
203
+ }, [isActive, isLoadFinish, videoRef]);
170
204
  useEffect(() => {
171
- var _a, _b, _c;
172
- if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
205
+ if (!isActive || !videoRef)
173
206
  return;
174
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
207
+ const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
175
208
  if (!isPause && openHashtag) {
176
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
209
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
177
210
  }
178
211
  else if (!openHashtag) {
179
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
212
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
180
213
  }
181
- }, [openHashtag, isActive]);
214
+ }, [openHashtag, isActive, videoRef]);
182
215
  useEffect(() => {
183
216
  if (!isActive)
184
217
  return;
@@ -198,9 +231,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
198
231
  return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
199
232
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
200
233
  useEffect(() => {
234
+ if (!videoRef)
235
+ return;
201
236
  const handleBeforeUnload = () => {
202
- var _a, _b;
203
- if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
237
+ var _a;
238
+ if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && videoRef && !isPauseVideo) {
204
239
  handleClickVideo('pause')();
205
240
  }
206
241
  };
@@ -238,19 +273,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
238
273
  right: 0
239
274
  } },
240
275
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
241
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
242
- width: '100%',
243
- height: '100%',
244
- objectFit: 'contain'
245
- } }),
276
+ React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
246
277
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
247
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
278
+ renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
248
279
  position: 'relative',
249
280
  width: '100%',
250
281
  height,
251
282
  overflow: 'hidden'
252
- } },
253
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
283
+ }, onClick: handleClickVideo() },
284
+ React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
254
285
  renderPoster,
255
286
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
256
287
  };
package/es/core/components/SxpPageRender/WaterFall/index.js CHANGED
@@ -63,7 +63,7 @@ const WaterFall = (props) => {
63
63
  }
64
64
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
65
65
  eventInfo: {
66
- contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
66
+ relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
67
67
  position: cacheActiveIndex + '',
68
68
  contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
69
69
  traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -33,6 +33,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
33
33
  const [isLoadMore, setIsLoadMore] = useState(false);
34
34
  const [isShowMore, setIsShowMore] = useState(false);
35
35
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
36
+ const [videoRef, setVideoRef] = useState(null);
37
+ const playerRef = useRef();
36
38
  const { productView } = useEventReport();
37
39
  const isShowFingerTip = useMemo(() => {
38
40
  return data.length > 0 && !loading && getFeUserId();
@@ -68,6 +70,25 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
68
70
  viewTime.current = new Date();
69
71
  refreshFeSessionId();
70
72
  };
73
+ const firstRef = useRef();
74
+ useEffect(() => {
75
+ if (!firstRef.current && !videoRef) {
76
+ firstRef.current = true;
77
+ const player = TCPlayer('player-container-id', {
78
+ licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
79
+ controls: false,
80
+ autoplay: false,
81
+ loop: false,
82
+ muted: true,
83
+ preload: 'auto',
84
+ posterImage: false,
85
+ bigPlayButton: true
86
+ });
87
+ player === null || player === void 0 ? void 0 : player.ready(() => {
88
+ setVideoRef(player);
89
+ });
90
+ }
91
+ }, [videoRef]);
71
92
  useEffect(() => {
72
93
  if (!isInit)
73
94
  handleH5EnterLink();
@@ -120,12 +141,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
120
141
  sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
121
142
  eventSubject: 'sessionCompleted',
122
143
  eventDescription: 'Session completed',
123
- contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
124
- productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
144
+ relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
145
+ relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
125
146
  position: activeIndex + '',
126
147
  fromKName,
127
148
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
128
- ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
149
+ relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
129
150
  }
130
151
  });
131
152
  }
@@ -153,7 +174,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
153
174
  const renderContent = useCallback((rec, index) => {
154
175
  var _a, _b, _c, _d;
155
176
  if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
156
- 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 }));
177
+ 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, videoRef: videoRef }));
157
178
  }
158
179
  if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
159
180
  return (React.createElement(PictureGroup, { key: rec.video.itemId, imgUrls: 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 }));
@@ -168,7 +189,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
168
189
  });
169
190
  }
170
191
  return null;
171
- }, [containerWidth, data, height, isMuted, activeIndex, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost, viewTime, tipText, resolver, schema]);
192
+ }, [
193
+ containerWidth,
194
+ data,
195
+ height,
196
+ isMuted,
197
+ activeIndex,
198
+ globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost,
199
+ viewTime,
200
+ tipText,
201
+ resolver,
202
+ schema,
203
+ videoRef
204
+ ]);
172
205
  const onExpandableChange = useCallback((v) => {
173
206
  setIsShowMore(v);
174
207
  }, []);
@@ -258,8 +291,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
258
291
  eventInfo: {
259
292
  eventSubject: 'scrollDown',
260
293
  eventDescription: 'User scroll down',
261
- contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
262
- productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
294
+ relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
295
+ relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
263
296
  requestId: null
264
297
  }
265
298
  });
@@ -270,8 +303,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
270
303
  eventInfo: {
271
304
  eventSubject: 'scrollUp',
272
305
  eventDescription: 'User scroll up',
273
- contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
274
- productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
306
+ relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
307
+ relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
275
308
  requestId: null
276
309
  }
277
310
  });
@@ -349,7 +382,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
349
382
  } })),
350
383
  renderLogo,
351
384
  isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
352
- React.createElement(Swiper, { ref: swiperRef, onActiveIndexChange: (swiper) => {
385
+ React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
386
+ swiperRef.current.swiper.allowTouchMove = false;
387
+ setTimeout(() => {
388
+ swiperRef.current.swiper.allowTouchMove = true;
389
+ }, 500);
390
+ }, onActiveIndexChange: (swiper) => {
353
391
  setActiveIndex(swiper.activeIndex);
354
392
  if (openHashtag)
355
393
  return;
@@ -373,6 +411,15 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
373
411
  zIndex: 999
374
412
  }, 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 }),
375
413
  renderView),
376
- React.createElement(WaterFall, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))));
414
+ React.createElement(WaterFall, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props)),
415
+ React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
416
+ React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
417
+ backgroundColor: 'transparent',
418
+ width: '100%',
419
+ height: '100%',
420
+ objectFit: 'cover',
421
+ pointerEvents: 'none'
422
+ } }),
423
+ React.createElement("div", { id: 'player-container-id-copy' }))));
377
424
  };
378
425
  export default SxpPageRender;
package/es/core/context/SxpDataSourceProvider.d.ts CHANGED
@@ -60,6 +60,8 @@ export interface ISxpDataSourceContext {
60
60
  hashTagSize?: number;
61
61
  loadingImage?: string;
62
62
  isOpenHashTag?: boolean;
63
+ videoRef?: any;
64
+ setVideoRef?: React.Dispatch<React.SetStateAction<any>>;
63
65
  }
64
66
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
65
67
  export interface SxpDataSourceProviderProps {
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -24,6 +24,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
24
24
  const [cacheRtcList, setCacheRtcList] = useState([]);
25
25
  const [cacheActiveIndex, setCacheActiveIndex] = useState(0);
26
26
  const [isFromHashtag, setIsFromHashtag] = useState(false);
27
+ const [videoRef, setVideoRef] = useState(null);
27
28
  useEffect(() => {
28
29
  setOpenHashtag(isOpenHashTag);
29
30
  }, [isOpenHashTag]);
@@ -141,7 +142,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
141
142
  fromKName = 'imagePage';
142
143
  }
143
144
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
144
- eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
145
+ eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
145
146
  });
146
147
  }, [bffEventReport, isFromHashtag]);
147
148
  useEffect(() => {
@@ -202,7 +203,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
202
203
  appDomain,
203
204
  hashTagSize,
204
205
  loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
205
- isOpenHashTag
206
+ isOpenHashTag,
207
+ videoRef,
208
+ setVideoRef
206
209
  } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
207
210
  };
208
211
  export default memo(SxpDataSourceProvider);
package/es/core/hooks/useEventReport.js CHANGED
@@ -32,8 +32,8 @@ export function useEventReport() {
32
32
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
33
33
  contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
34
34
  position: position + '',
35
- contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
36
- ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
35
+ relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
36
+ relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
37
37
  traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
38
38
  }
39
39
  });
@@ -57,8 +57,8 @@ export function useEventReport() {
57
57
  fromKPage: location === null || location === void 0 ? void 0 : location.href,
58
58
  contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
59
59
  position: position + '',
60
- contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
- ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
60
+ relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
61
+ relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
62
62
  traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
63
63
  timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
64
64
  eventSubject: 'productView',
package/es/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import { Pagebuilder } from './core/Pagebuilder';
2
2
  export * as core from './core';
3
3
  export * as materials from './materials';
4
4
  export { default as SxpPageRender } from './core/components/SxpPageRender';
5
- export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
6
5
  export { default as Modal } from './core/components/SxpPageRender/Modal';
7
6
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
8
7
  export { default as SxpPageCore } from './core/components/SxpPageCore';
package/es/index.js CHANGED
@@ -4,7 +4,6 @@ export { core_1 as core };
4
4
  import * as materials_1 from './materials';
5
5
  export { materials_1 as materials };
6
6
  export { default as SxpPageRender } from './core/components/SxpPageRender';
7
- export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
8
7
  export { default as Modal } from './core/components/SxpPageRender/Modal';
9
8
  export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
10
9
  export { default as SxpPageCore } from './core/components/SxpPageCore';
package/es/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -10,7 +10,7 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
10
10
  import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
11
11
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
12
12
  const CommodityDetail = (_a) => {
13
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
13
+ var _b, _c, _d, _e, _f, _g, _h, _j;
14
14
  var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
15
15
  const { sxpParameter } = useSxpDataSource();
16
16
  const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
@@ -51,7 +51,7 @@ const CommodityDetail = (_a) => {
51
51
  return '$7,000';
52
52
  }
53
53
  }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
54
- const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
54
+ const width = isPreview ? 375 : window.innerWidth;
55
55
  const renderContent = ({ isPost }) => {
56
56
  var _a, _b, _c;
57
57
  return (React.createElement("div", null,
@@ -71,7 +71,7 @@ const CommodityDetail = (_a) => {
71
71
  };
72
72
  return (React.createElement("div", { className: 'pb-commondity' },
73
73
  React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
74
- product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
74
+ product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
75
75
  clickable: true,
76
76
  bulletActiveClass: 'swipe-item-active-bullet',
77
77
  clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -79,7 +79,7 @@ const CommodityDetail = (_a) => {
79
79
  : 'commondityDetail-swiper-clickable-center'
80
80
  }, loop: true, autoplay: {
81
81
  delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
82
- } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
82
+ } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
83
83
  return (React.createElement(SwiperSlide, { key: src },
84
84
  React.createElement("div", { style: {
85
85
  overflow: 'hidden',
@@ -88,7 +88,7 @@ const CommodityDetail = (_a) => {
88
88
  } },
89
89
  React.createElement(FormatImage, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
90
90
  }))),
91
- !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
91
+ !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement("div", { className: css({
92
92
  position: 'relative',
93
93
  height: 0,
94
94
  width: '100%',
@@ -101,7 +101,7 @@ const CommodityDetail = (_a) => {
101
101
  top: 0,
102
102
  objectFit: 'cover',
103
103
  width: '100%'
104
- }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
104
+ }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
105
105
  React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
106
106
  renderBtn(),
107
107
  React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },