pb-sxp-ui 1.0.93 → 1.0.95

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 (17) hide show
  1. package/dist/index.cjs +21 -6
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +21 -6
  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 +21 -6
  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/PictureGroup/Picture.js +1 -1
  14. package/es/core/components/SxpPageRender/VideoWidget/index.js +19 -4
  15. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +1 -1
  16. package/lib/core/components/SxpPageRender/VideoWidget/index.js +19 -4
  17. package/package.json +1 -1
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -36,6 +36,6 @@ const Picture = (props) => {
36
36
  transform: translateY,
37
37
  left: 0,
38
38
  right: 0
39
- } }))));
39
+ }, onLoad: onShowFirstImage }))));
40
40
  };
41
41
  export default Picture;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -56,11 +56,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
56
56
  }, [videoRef]);
57
57
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
58
58
  const handlePlaying = useCallback(() => {
59
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
60
59
  if (!videoRef)
61
60
  return;
62
61
  setWaiting(false);
63
62
  setIsLoadFinish(true);
63
+ }, []);
64
+ const handleStartPlay = useCallback(() => {
65
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
66
+ if (!videoRef)
67
+ return;
64
68
  setIsPauseVideo(false);
65
69
  const item = data[index];
66
70
  if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
@@ -111,8 +115,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
111
115
  const handleLoadedmetadata = useCallback(() => {
112
116
  if (!videoRef)
113
117
  return;
118
+ handleStartPlay();
114
119
  handLoadeddata();
115
- }, [videoRef, handLoadeddata]);
120
+ }, [videoRef, handLoadeddata, handleStartPlay]);
116
121
  const handleClickVideo = useCallback((type) => () => {
117
122
  if (!videoRef)
118
123
  return;
@@ -202,6 +207,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
202
207
  videoRef.setAttribute('webkit-playsinline', 'true');
203
208
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
204
209
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
210
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
205
211
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
206
212
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
207
213
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
@@ -212,9 +218,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
212
218
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
213
219
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
214
220
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
221
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
215
222
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
216
223
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
217
224
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
225
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
218
226
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
219
227
  };
220
228
  }, [isActive, videoId, rec, videoRef]);
@@ -263,7 +271,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
263
271
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
264
272
  return null;
265
273
  }
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' }));
274
+ return (React.createElement("img", { style: {
275
+ position: 'absolute',
276
+ left: 0,
277
+ top: 0,
278
+ width: '100%',
279
+ height: '100%',
280
+ objectFit: 'cover'
281
+ }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
267
282
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
268
283
  const renderLoading = useMemo(() => {
269
284
  if (!waiting || !isLoadFinish)
@@ -298,7 +313,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
298
313
  return null;
299
314
  }
300
315
  return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
301
- !isBgColor && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
316
+ !isBgColor && isLoadFinish && blurBgSrc && (React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
302
317
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
303
318
  React.createElement("div", { style: {
304
319
  position: 'absolute',
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -39,6 +39,6 @@ const Picture = (props) => {
39
39
  transform: translateY,
40
40
  left: 0,
41
41
  right: 0
42
- } }))));
42
+ }, onLoad: onShowFirstImage }))));
43
43
  };
44
44
  exports.default = Picture;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -59,11 +59,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
59
59
  }, [videoRef]);
60
60
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
61
61
  const handlePlaying = (0, react_1.useCallback)(() => {
62
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
63
62
  if (!videoRef)
64
63
  return;
65
64
  setWaiting(false);
66
65
  setIsLoadFinish(true);
66
+ }, []);
67
+ const handleStartPlay = (0, react_1.useCallback)(() => {
68
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
69
+ if (!videoRef)
70
+ return;
67
71
  setIsPauseVideo(false);
68
72
  const item = data[index];
69
73
  if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
@@ -114,8 +118,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
114
118
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
115
119
  if (!videoRef)
116
120
  return;
121
+ handleStartPlay();
117
122
  handLoadeddata();
118
- }, [videoRef, handLoadeddata]);
123
+ }, [videoRef, handLoadeddata, handleStartPlay]);
119
124
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
120
125
  if (!videoRef)
121
126
  return;
@@ -205,6 +210,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
205
210
  videoRef.setAttribute('webkit-playsinline', 'true');
206
211
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
207
212
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
213
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
208
214
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
209
215
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
210
216
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
@@ -215,9 +221,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
215
221
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
216
222
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
217
223
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
224
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
218
225
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
219
226
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
220
227
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
228
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
221
229
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
222
230
  };
223
231
  }, [isActive, videoId, rec, videoRef]);
@@ -266,7 +274,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
266
274
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
267
275
  return null;
268
276
  }
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' }));
277
+ return (react_1.default.createElement("img", { style: {
278
+ position: 'absolute',
279
+ left: 0,
280
+ top: 0,
281
+ width: '100%',
282
+ height: '100%',
283
+ objectFit: 'cover'
284
+ }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
270
285
  }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
271
286
  const renderLoading = (0, react_1.useMemo)(() => {
272
287
  if (!waiting || !isLoadFinish)
@@ -301,7 +316,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
301
316
  return null;
302
317
  }
303
318
  return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
304
- !isBgColor && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
319
+ !isBgColor && isLoadFinish && blurBgSrc && (react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
305
320
  react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
306
321
  react_1.default.createElement("div", { style: {
307
322
  position: 'absolute',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.93",
3
+ "version": "1.0.95",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",