pb-sxp-ui 1.15.40 → 1.15.42

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 +108 -53
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +108 -53
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +108 -53
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  14. package/es/core/components/SxpPageRender/PictureGroup/index.js +37 -13
  15. package/es/core/components/SxpPageRender/VideoWidget/index.js +27 -38
  16. package/es/core/components/SxpPageRender/index.js +4 -2
  17. package/es/materials/sxp/popup/CommodityDetail/material.js +2 -1
  18. package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts +16 -0
  19. package/es/materials/sxp/popup/CommodityDetail/settingRender.js +19 -0
  20. package/es/materials/sxp/popup/CommodityDetailDiroNew/material.js +2 -1
  21. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +16 -0
  22. package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +19 -0
  23. package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
  24. package/lib/core/components/SxpPageRender/PictureGroup/index.js +36 -12
  25. package/lib/core/components/SxpPageRender/VideoWidget/index.js +27 -38
  26. package/lib/core/components/SxpPageRender/index.js +4 -2
  27. package/lib/materials/sxp/popup/CommodityDetail/material.js +2 -1
  28. package/lib/materials/sxp/popup/CommodityDetail/settingRender.d.ts +16 -0
  29. package/lib/materials/sxp/popup/CommodityDetail/settingRender.js +19 -0
  30. package/lib/materials/sxp/popup/CommodityDetailDiroNew/material.js +2 -1
  31. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts +16 -0
  32. package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js +19 -0
  33. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -12,6 +12,11 @@ interface IPictureGroupProps {
12
12
  loadTime: string;
13
13
  }, enableCapi?: boolean) => void;
14
14
  imgUrlsPostConfig?: postConfigType;
15
+ data: RecItemType[];
16
+ swiperRef?: any;
17
+ }
18
+ export interface IPictureGroupRef {
19
+ setLoopPlay: (v: boolean) => void;
15
20
  }
16
21
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
17
22
  export default _default;
package/es/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -1,25 +1,49 @@
1
1
  import { __awaiter } from "tslib";
2
- import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
+ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
3
3
  import { Autoplay, Pagination, Navigation, A11y, Mousewheel, Keyboard } from 'swiper/modules';
4
4
  import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
5
+ import { css } from '@emotion/css';
5
6
  import Picture from './Picture';
6
7
  import { useSxpDataSource } from '../../../../core/hooks';
7
- import { css } from '@emotion/css';
8
8
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
9
9
  import { getScreenReader } from '../../../../core/utils/tool';
10
- const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
10
+ const PictureGroup = forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
11
11
  var _a, _b;
12
12
  const { isActive } = useSwiperSlide();
13
- const { sxpParameter, openHashtag } = useSxpDataSource();
13
+ const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
14
14
  const [isLoad, setIsLoad] = useState(false);
15
15
  const [imgInfo, setImgInfo] = useState();
16
16
  const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
17
- const swiperRef = useRef();
17
+ const imgsSwiperRef = useRef();
18
18
  const isFirstPlayRef = useRef(true);
19
+ const loopPlayRef = useRef(true);
19
20
  const initTime = new Date();
21
+ useImperativeHandle(ref, () => {
22
+ return {
23
+ setLoopPlay(v) {
24
+ loopPlayRef.current = v;
25
+ }
26
+ };
27
+ });
28
+ useEffect(() => {
29
+ if (isLoad && isActive && isDiyH5) {
30
+ setTimeout(() => {
31
+ var _a, _b, _c, _d, _e, _f;
32
+ if (!loopPlayRef.current)
33
+ return;
34
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
35
+ (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
36
+ }
37
+ else {
38
+ const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
39
+ (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
40
+ }
41
+ }, 3000);
42
+ }
43
+ }, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
20
44
  useEffect(() => {
21
45
  if (isLoad && isActive) {
22
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
46
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
23
47
  if (openHashtag) {
24
48
  onViewImageEndEvent(rec);
25
49
  }
@@ -29,7 +53,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
29
53
  }
30
54
  }
31
55
  else {
32
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
56
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
33
57
  }
34
58
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
35
59
  const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
@@ -53,13 +77,13 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
53
77
  };
54
78
  }, [isActive, imgInfo]);
55
79
  const handleMouseEnter = useCallback(() => {
56
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
57
- swiperRef.current.swiper.autoplay.stop();
80
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
81
+ imgsSwiperRef.current.swiper.autoplay.stop();
58
82
  }
59
83
  }, []);
60
84
  const handleMouseLeave = useCallback(() => {
61
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
62
- swiperRef.current.swiper.autoplay.start();
85
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
86
+ imgsSwiperRef.current.swiper.autoplay.start();
63
87
  }
64
88
  }, []);
65
89
  const handleSlideChange = useCallback((swiper) => {
@@ -80,7 +104,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
80
104
  enabled: true
81
105
  }
82
106
  }
83
- : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
107
+ : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
84
108
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
85
109
  fontSize: '14px'
86
110
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -97,5 +121,5 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
97
121
  return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
98
122
  React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
99
123
  }))));
100
- };
124
+ });
101
125
  export default memo(PictureGroup);
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -76,6 +76,26 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
76
76
  return;
77
77
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
78
78
  }, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
79
+ const handleEnd = () => {
80
+ var _a, _b, _c, _d, _e, _f, _g, _h;
81
+ if (!videoRef.current)
82
+ return;
83
+ if (isDiyH5) {
84
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
85
+ if (!loopPlayRef.current)
86
+ return;
87
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
88
+ (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
89
+ }
90
+ else {
91
+ const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
92
+ (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
93
+ }
94
+ }
95
+ else {
96
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
97
+ }
98
+ };
79
99
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
80
100
  const handlePlaying = useCallback(() => {
81
101
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
@@ -100,11 +120,6 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
100
120
  isFirstPlayRef.current = false;
101
121
  }
102
122
  }), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
103
- const setCurrentTimeByStartTime = useCallback(() => {
104
- if (isDiyH5) {
105
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
106
- }
107
- }, []);
108
123
  const handLoadeddata = useCallback(() => {
109
124
  if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
110
125
  return;
@@ -129,13 +144,12 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
129
144
  const handleLoadedmetadata = useCallback(() => {
130
145
  if (!videoRef.current)
131
146
  return;
132
- setCurrentTimeByStartTime();
133
147
  loadedTimeRef.current = new Date();
134
148
  handleStartPlay();
135
149
  handLoadeddata();
136
150
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
137
151
  const handleClickVideo = useCallback((type) => () => {
138
- var _a, _b, _c, _d, _e, _f;
152
+ var _a, _b, _c, _d, _e;
139
153
  if (!videoRef.current)
140
154
  return;
141
155
  if (!isLoadFinish)
@@ -156,13 +170,10 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
156
170
  break;
157
171
  default:
158
172
  if (isPause) {
159
- if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
160
- videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
161
- }
162
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
173
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
163
174
  }
164
175
  else {
165
- (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
176
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
166
177
  }
167
178
  setIsPauseVideo(!isPause);
168
179
  break;
@@ -200,27 +211,8 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
200
211
  const handleWaiting = useCallback(() => {
201
212
  setWaiting(true);
202
213
  }, []);
203
- const handleTimeUpload = () => {
204
- if (!videoRef.current || !isDiyH5)
205
- return;
206
- setTimeout(() => {
207
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
208
- if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
209
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
210
- if (!loopPlayRef.current)
211
- return;
212
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
213
- (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
214
- }
215
- else {
216
- const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
217
- (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
218
- }
219
- }
220
- });
221
- };
222
214
  useEffect(() => {
223
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
215
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
224
216
  if (!isActive)
225
217
  return;
226
218
  const videoSrc = videoUrl;
@@ -241,7 +233,6 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
241
233
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
242
234
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
243
235
  var _a;
244
- setCurrentTimeByStartTime();
245
236
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
246
237
  });
247
238
  }
@@ -255,12 +246,11 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
255
246
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
256
247
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
257
248
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
258
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
249
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
259
250
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
260
251
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
261
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
262
252
  return () => {
263
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
253
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
264
254
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
265
255
  if (!isPause)
266
256
  handlePause();
@@ -272,10 +262,9 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
272
262
  (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
273
263
  (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
274
264
  (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
275
- (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
265
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
276
266
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
277
267
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
278
- (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
279
268
  };
280
269
  }, [isActive]);
281
270
  useEffect(() => {
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -42,6 +42,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
42
42
  const skipLinkRef = useRef(false);
43
43
  const [pageNum, setPageNum] = useState(2);
44
44
  const videoWidgetRef = useRef(null);
45
+ const pictureGroupRef = useRef(null);
45
46
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
46
47
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
47
48
  const isShowFingerTip = useMemo(() => {
@@ -177,8 +178,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
177
178
  refreshFeSession
178
179
  ]);
179
180
  const handleSessionExpire = useCallback(debounce(() => {
180
- var _a;
181
+ var _a, _b;
181
182
  (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
183
+ (_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
182
184
  refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
183
185
  }, 1000), [handleSessionCompleted, refreshFeSession]);
184
186
  useEffect(() => {
@@ -256,7 +258,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
256
258
  return (React.createElement(VideoWidget, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
257
259
  }
258
260
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
259
- 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 }));
261
+ return (React.createElement(PictureGroup, Object.assign({ data: data }, (activeIndex === index && { ref: pictureGroupRef }), { 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, swiperRef: swiperRef })));
260
262
  }
261
263
  if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
262
264
  return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
package/es/materials/sxp/popup/CommodityDetail/material.js CHANGED
@@ -50,7 +50,8 @@ const CommodityDetail = createMaterial(CommodityDetailComponent, {
50
50
  height: 45,
51
51
  fontWeight: 'bold',
52
52
  textAlign: 'center',
53
- color: 'rgba(255, 255, 255, 0.9)'
53
+ color: 'rgba(255, 255, 255, 0.9)',
54
+ textTransform: 'unset'
54
55
  },
55
56
  commodityImgRatio: {
56
57
  w: 1,
package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts CHANGED
@@ -166,10 +166,21 @@ declare const _default: ({
166
166
  } | {
167
167
  title: string;
168
168
  child: ({
169
+ label: string;
170
+ type: string;
171
+ name: string[];
172
+ options: {
173
+ label: string;
174
+ value: string;
175
+ }[];
176
+ initialValue?: undefined;
177
+ child?: undefined;
178
+ } | {
169
179
  type: string;
170
180
  label: string;
171
181
  name: string[];
172
182
  initialValue: string;
183
+ options?: undefined;
173
184
  child?: undefined;
174
185
  } | {
175
186
  type: string;
@@ -186,11 +197,13 @@ declare const _default: ({
186
197
  max: number;
187
198
  })[];
188
199
  name?: undefined;
200
+ options?: undefined;
189
201
  initialValue?: undefined;
190
202
  } | {
191
203
  type: string;
192
204
  name: string[];
193
205
  label?: undefined;
206
+ options?: undefined;
194
207
  initialValue?: undefined;
195
208
  child?: undefined;
196
209
  } | {
@@ -202,6 +215,7 @@ declare const _default: ({
202
215
  bottomText: string;
203
216
  }[];
204
217
  name?: undefined;
218
+ options?: undefined;
205
219
  initialValue?: undefined;
206
220
  } | {
207
221
  type: string;
@@ -218,11 +232,13 @@ declare const _default: ({
218
232
  initialValue?: undefined;
219
233
  })[];
220
234
  name?: undefined;
235
+ options?: undefined;
221
236
  initialValue?: undefined;
222
237
  } | {
223
238
  label: string;
224
239
  type: string;
225
240
  name: string[];
241
+ options?: undefined;
226
242
  initialValue?: undefined;
227
243
  child?: undefined;
228
244
  })[];
package/es/materials/sxp/popup/CommodityDetail/settingRender.js CHANGED
@@ -244,6 +244,25 @@ export default [
244
244
  {
245
245
  title: '购买按钮样式',
246
246
  child: [
247
+ {
248
+ label: '英文大小写',
249
+ type: 'Select',
250
+ name: ['props', 'buttonStyle', 'textTransform'],
251
+ options: [
252
+ {
253
+ label: '默认',
254
+ value: 'unset'
255
+ },
256
+ {
257
+ label: '小写',
258
+ value: 'lowercase'
259
+ },
260
+ {
261
+ label: '大写',
262
+ value: 'uppercase'
263
+ }
264
+ ]
265
+ },
247
266
  {
248
267
  type: 'Color',
249
268
  label: '背景色',
package/es/materials/sxp/popup/CommodityDetailDiroNew/material.js CHANGED
@@ -50,7 +50,8 @@ const CommodityDetailDiroNew = createMaterial(CommodityDetailDiroNewComponent, {
50
50
  color: '#fff',
51
51
  borderRadius: 25,
52
52
  marginTop: 16,
53
- marginBottom: 16
53
+ marginBottom: 16,
54
+ textTransform: 'unset'
54
55
  },
55
56
  commodityImgRatio: {
56
57
  w: 1,
package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.d.ts CHANGED
@@ -153,10 +153,21 @@ declare const _default: ({
153
153
  } | {
154
154
  title: string;
155
155
  child: ({
156
+ label: string;
157
+ type: string;
158
+ name: string[];
159
+ options: {
160
+ label: string;
161
+ value: string;
162
+ }[];
163
+ initialValue?: undefined;
164
+ child?: undefined;
165
+ } | {
156
166
  type: string;
157
167
  label: string;
158
168
  name: string[];
159
169
  initialValue: string;
170
+ options?: undefined;
160
171
  child?: undefined;
161
172
  } | {
162
173
  type: string;
@@ -173,11 +184,13 @@ declare const _default: ({
173
184
  max: number;
174
185
  })[];
175
186
  name?: undefined;
187
+ options?: undefined;
176
188
  initialValue?: undefined;
177
189
  } | {
178
190
  type: string;
179
191
  name: string[];
180
192
  label?: undefined;
193
+ options?: undefined;
181
194
  initialValue?: undefined;
182
195
  child?: undefined;
183
196
  } | {
@@ -189,6 +202,7 @@ declare const _default: ({
189
202
  bottomText: string;
190
203
  }[];
191
204
  name?: undefined;
205
+ options?: undefined;
192
206
  initialValue?: undefined;
193
207
  } | {
194
208
  type: string;
@@ -205,11 +219,13 @@ declare const _default: ({
205
219
  initialValue?: undefined;
206
220
  })[];
207
221
  name?: undefined;
222
+ options?: undefined;
208
223
  initialValue?: undefined;
209
224
  } | {
210
225
  label: string;
211
226
  type: string;
212
227
  name: string[];
228
+ options?: undefined;
213
229
  initialValue?: undefined;
214
230
  child?: undefined;
215
231
  })[];
package/es/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js CHANGED
@@ -227,6 +227,25 @@ export default [
227
227
  {
228
228
  title: '购买按钮样式',
229
229
  child: [
230
+ {
231
+ label: '英文大小写',
232
+ type: 'Select',
233
+ name: ['props', 'buttonStyle', 'textTransform'],
234
+ options: [
235
+ {
236
+ label: '默认',
237
+ value: 'unset'
238
+ },
239
+ {
240
+ label: '小写',
241
+ value: 'lowercase'
242
+ },
243
+ {
244
+ label: '大写',
245
+ value: 'uppercase'
246
+ }
247
+ ]
248
+ },
230
249
  {
231
250
  type: 'Color',
232
251
  label: '背景色',
package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts CHANGED
@@ -12,6 +12,11 @@ interface IPictureGroupProps {
12
12
  loadTime: string;
13
13
  }, enableCapi?: boolean) => void;
14
14
  imgUrlsPostConfig?: postConfigType;
15
+ data: RecItemType[];
16
+ swiperRef?: any;
17
+ }
18
+ export interface IPictureGroupRef {
19
+ setLoopPlay: (v: boolean) => void;
15
20
  }
16
21
  declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
17
22
  export default _default;
package/lib/core/components/SxpPageRender/PictureGroup/index.js CHANGED
@@ -4,24 +4,48 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const modules_1 = require("swiper/modules");
6
6
  const react_2 = require("swiper/react");
7
+ const css_1 = require("@emotion/css");
7
8
  const Picture_1 = tslib_1.__importDefault(require("./Picture"));
8
9
  const hooks_1 = require("../../../../core/hooks");
9
- const css_1 = require("@emotion/css");
10
10
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
11
11
  const tool_1 = require("../../../../core/utils/tool");
12
- const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
12
+ const PictureGroup = (0, react_1.forwardRef)(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
13
13
  var _a, _b;
14
14
  const { isActive } = (0, react_2.useSwiperSlide)();
15
- const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
15
+ const { sxpParameter, openHashtag, isDiyH5 } = (0, hooks_1.useSxpDataSource)();
16
16
  const [isLoad, setIsLoad] = (0, react_1.useState)(false);
17
17
  const [imgInfo, setImgInfo] = (0, react_1.useState)();
18
18
  const [swiperActiveIndex, setSwiperActiveIndex] = (0, react_1.useState)(0);
19
- const swiperRef = (0, react_1.useRef)();
19
+ const imgsSwiperRef = (0, react_1.useRef)();
20
20
  const isFirstPlayRef = (0, react_1.useRef)(true);
21
+ const loopPlayRef = (0, react_1.useRef)(true);
21
22
  const initTime = new Date();
23
+ (0, react_1.useImperativeHandle)(ref, () => {
24
+ return {
25
+ setLoopPlay(v) {
26
+ loopPlayRef.current = v;
27
+ }
28
+ };
29
+ });
30
+ (0, react_1.useEffect)(() => {
31
+ if (isLoad && isActive && isDiyH5) {
32
+ setTimeout(() => {
33
+ var _a, _b, _c, _d, _e, _f;
34
+ if (!loopPlayRef.current)
35
+ return;
36
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
37
+ (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
38
+ }
39
+ else {
40
+ const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
41
+ (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
42
+ }
43
+ }, 3000);
44
+ }
45
+ }, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
22
46
  (0, react_1.useEffect)(() => {
23
47
  if (isLoad && isActive) {
24
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
48
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
25
49
  if (openHashtag) {
26
50
  onViewImageEndEvent(rec);
27
51
  }
@@ -31,7 +55,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
31
55
  }
32
56
  }
33
57
  else {
34
- (swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
58
+ (imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
35
59
  }
36
60
  }, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
37
61
  const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
@@ -55,13 +79,13 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
55
79
  };
56
80
  }, [isActive, imgInfo]);
57
81
  const handleMouseEnter = (0, react_1.useCallback)(() => {
58
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
59
- swiperRef.current.swiper.autoplay.stop();
82
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
83
+ imgsSwiperRef.current.swiper.autoplay.stop();
60
84
  }
61
85
  }, []);
62
86
  const handleMouseLeave = (0, react_1.useCallback)(() => {
63
- if (swiperRef.current && swiperRef.current.swiper && isAlly) {
64
- swiperRef.current.swiper.autoplay.start();
87
+ if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
88
+ imgsSwiperRef.current.swiper.autoplay.start();
65
89
  }
66
90
  }, []);
67
91
  const handleSlideChange = (0, react_1.useCallback)((swiper) => {
@@ -82,7 +106,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
82
106
  enabled: true
83
107
  }
84
108
  }
85
- : {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
109
+ : {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: (0, css_1.css)(Object.assign(Object.assign({ '.swiper-pagination': {
86
110
  bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
87
111
  fontSize: '14px'
88
112
  } }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
@@ -99,5 +123,5 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
99
123
  return (react_1.default.createElement(react_2.SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
100
124
  react_1.default.createElement(Picture_1.default, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
101
125
  }))));
102
- };
126
+ });
103
127
  exports.default = (0, react_1.memo)(PictureGroup);