pb-sxp-ui 1.0.92 → 1.0.93

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 (19) hide show
  1. package/dist/index.cjs +37 -12
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +37 -12
  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 +37 -12
  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/VideoWidget/index.js +27 -3
  14. package/es/core/components/SxpPageRender/index.js +1 -1
  15. package/es/materials/sxp/template/Commodity/index.js +2 -2
  16. package/lib/core/components/SxpPageRender/VideoWidget/index.js +27 -3
  17. package/lib/core/components/SxpPageRender/index.js +1 -1
  18. package/lib/materials/sxp/template/Commodity/index.js +2 -2
  19. package/package.json +1 -1
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -4,6 +4,7 @@ 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
+ import loading_gif from './loading.gif';
7
8
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
8
9
  const [isPauseVideo, setIsPauseVideo] = useState(false);
9
10
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
@@ -13,6 +14,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
13
14
  const { isActive } = useSwiperSlide();
14
15
  const canvasRef = useRef(null);
15
16
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
17
+ const [waiting, setWaiting] = useState(false);
16
18
  const videoId = `pb-cache-video-${index}`;
17
19
  const videoEleRef = useRef(null);
18
20
  const blur = useMemo(() => {
@@ -57,6 +59,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
57
59
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
58
60
  if (!videoRef)
59
61
  return;
62
+ setWaiting(false);
60
63
  setIsLoadFinish(true);
61
64
  setIsPauseVideo(false);
62
65
  const item = data[index];
@@ -168,6 +171,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
168
171
  });
169
172
  }
170
173
  }, [data, index, bffEventReport, videoRef, activeIndex]);
174
+ const handleWaiting = useCallback(() => {
175
+ setWaiting(true);
176
+ }, []);
171
177
  useEffect(() => {
172
178
  if (!isActive || !videoRef)
173
179
  return;
@@ -186,7 +192,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
186
192
  else {
187
193
  videoRef.src = videoSrc;
188
194
  }
189
- setIsPauseVideo(false);
190
195
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
191
196
  const dom = document.querySelector('#player-container-id');
192
197
  const dom2 = document.querySelector('#player-container-id-copy');
@@ -201,14 +206,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
201
206
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
202
207
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
203
208
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
209
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
204
210
  return () => {
211
+ setIsLoadFinish(false);
205
212
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
206
213
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
207
214
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
208
215
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
209
216
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
210
217
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
211
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
218
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
212
219
  };
213
220
  }, [isActive, videoId, rec, videoRef]);
214
221
  useEffect(() => {
@@ -258,6 +265,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
258
265
  }
259
266
  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, alt: 'placeholder image' }));
260
267
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
268
+ const renderLoading = useMemo(() => {
269
+ if (!waiting || !isLoadFinish)
270
+ return;
271
+ return (React.createElement("img", { style: {
272
+ position: 'absolute',
273
+ top: '50%',
274
+ left: 0,
275
+ right: 0,
276
+ transform: 'translateY(-100%)',
277
+ margin: 'auto',
278
+ width: '50px',
279
+ height: '50px',
280
+ objectFit: 'contain'
281
+ }, src: loading_gif, alt: 'placeholder image' }));
282
+ }, [waiting, isLoadFinish]);
261
283
  useEffect(() => {
262
284
  if (!videoRef)
263
285
  return;
@@ -290,7 +312,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
290
312
  React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
291
313
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
292
314
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
293
- renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
315
+ renderPoster,
316
+ renderLoading)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
294
317
  position: 'relative',
295
318
  width: '100%',
296
319
  height,
@@ -298,6 +321,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
298
321
  }, onClick: handleClickVideo() },
299
322
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
300
323
  renderPoster,
324
+ renderLoading,
301
325
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
302
326
  };
303
327
  export default memo(VideoWidget);
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -366,7 +366,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
366
366
  };
367
367
  const visList = useMemo(() => {
368
368
  var _a;
369
- const list = activeIndex === 0
369
+ const list = activeIndex === 0 && !waterFallData
370
370
  ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
371
371
  : data === null || data === void 0 ? void 0 : data.map((item, index) => {
372
372
  if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
package/es/materials/sxp/template/Commodity/index.js CHANGED
@@ -6,7 +6,7 @@ import styles from './index.module.less';
6
6
  import { useSxpDataSource } from '../../../../core/hooks';
7
7
  import Img from '../components/Img';
8
8
  const Commodity = (_a) => {
9
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
9
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
10
10
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
11
11
  const { sxpParameter } = useSxpDataSource();
12
12
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
@@ -22,6 +22,6 @@ const Commodity = (_a) => {
22
22
  overflow: 'hidden'
23
23
  }) },
24
24
  React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
25
- React.createElement("div", { className: css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
25
+ React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now'))));
26
26
  };
27
27
  export default memo(Commodity);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -7,6 +7,7 @@ const useIconLink_1 = require("../useIconLink");
7
7
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
10
+ const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
10
11
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
11
12
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
12
13
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
@@ -16,6 +17,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
16
17
  const { isActive } = (0, react_2.useSwiperSlide)();
17
18
  const canvasRef = (0, react_1.useRef)(null);
18
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
20
+ const [waiting, setWaiting] = (0, react_1.useState)(false);
19
21
  const videoId = `pb-cache-video-${index}`;
20
22
  const videoEleRef = (0, react_1.useRef)(null);
21
23
  const blur = (0, react_1.useMemo)(() => {
@@ -60,6 +62,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
60
62
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
61
63
  if (!videoRef)
62
64
  return;
65
+ setWaiting(false);
63
66
  setIsLoadFinish(true);
64
67
  setIsPauseVideo(false);
65
68
  const item = data[index];
@@ -171,6 +174,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
171
174
  });
172
175
  }
173
176
  }, [data, index, bffEventReport, videoRef, activeIndex]);
177
+ const handleWaiting = (0, react_1.useCallback)(() => {
178
+ setWaiting(true);
179
+ }, []);
174
180
  (0, react_1.useEffect)(() => {
175
181
  if (!isActive || !videoRef)
176
182
  return;
@@ -189,7 +195,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
189
195
  else {
190
196
  videoRef.src = videoSrc;
191
197
  }
192
- setIsPauseVideo(false);
193
198
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
194
199
  const dom = document.querySelector('#player-container-id');
195
200
  const dom2 = document.querySelector('#player-container-id-copy');
@@ -204,14 +209,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
204
209
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
205
210
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
206
211
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
212
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
207
213
  return () => {
214
+ setIsLoadFinish(false);
208
215
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
209
216
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
210
217
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
211
218
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
212
219
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
213
220
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
214
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
221
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
215
222
  };
216
223
  }, [isActive, videoId, rec, videoRef]);
217
224
  (0, react_1.useEffect)(() => {
@@ -261,6 +268,21 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
261
268
  }
262
269
  return (react_1.default.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, alt: 'placeholder image' }));
263
270
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
271
+ const renderLoading = (0, react_1.useMemo)(() => {
272
+ if (!waiting || !isLoadFinish)
273
+ return;
274
+ return (react_1.default.createElement("img", { style: {
275
+ position: 'absolute',
276
+ top: '50%',
277
+ left: 0,
278
+ right: 0,
279
+ transform: 'translateY(-100%)',
280
+ margin: 'auto',
281
+ width: '50px',
282
+ height: '50px',
283
+ objectFit: 'contain'
284
+ }, src: loading_gif_1.default, alt: 'placeholder image' }));
285
+ }, [waiting, isLoadFinish]);
264
286
  (0, react_1.useEffect)(() => {
265
287
  if (!videoRef)
266
288
  return;
@@ -293,7 +315,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
293
315
  react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
294
316
  react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
295
317
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
296
- renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
318
+ renderPoster,
319
+ renderLoading)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
297
320
  position: 'relative',
298
321
  width: '100%',
299
322
  height,
@@ -301,6 +324,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
301
324
  }, onClick: handleClickVideo() },
302
325
  react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
303
326
  renderPoster,
327
+ renderLoading,
304
328
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
305
329
  };
306
330
  exports.default = (0, react_1.memo)(VideoWidget);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -369,7 +369,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
369
369
  };
370
370
  const visList = (0, react_1.useMemo)(() => {
371
371
  var _a;
372
- const list = activeIndex === 0
372
+ const list = activeIndex === 0 && !waterFallData
373
373
  ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
374
374
  : data === null || data === void 0 ? void 0 : data.map((item, index) => {
375
375
  if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
package/lib/materials/sxp/template/Commodity/index.js CHANGED
@@ -8,7 +8,7 @@ const index_module_less_1 = tslib_1.__importDefault(require("./index.module.less
8
8
  const hooks_1 = require("../../../../core/hooks");
9
9
  const Img_1 = tslib_1.__importDefault(require("../components/Img"));
10
10
  const Commodity = (_a) => {
11
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
11
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
12
12
  var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
13
13
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
14
14
  const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
@@ -24,6 +24,6 @@ const Commodity = (_a) => {
24
24
  overflow: 'hidden'
25
25
  }) },
26
26
  react_1.default.createElement("div", { className: index_module_less_1.default['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
27
- react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
27
+ react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now'))));
28
28
  };
29
29
  exports.default = (0, react_1.memo)(Commodity);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.92",
3
+ "version": "1.0.93",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",