pb-sxp-ui 1.0.27 → 1.0.28

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 (15) hide show
  1. package/dist/index.cjs +32 -28
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +32 -28
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +4 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +4 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +32 -28
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +4 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/VideoWidget/index.js +27 -28
  14. package/lib/core/components/SxpPageRender/VideoWidget/index.js +27 -28
  15. package/package.json +1 -1
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -107,13 +107,24 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
107
107
  });
108
108
  }
109
109
  }, [data, index, bffEventReport]);
110
+ const blur = useMemo(() => {
111
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
112
+ }, [videoPostConfig]);
113
+ const translateY = useMemo(() => {
114
+ var _a;
115
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
116
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
117
+ : 'translateY(-50%)';
118
+ }, [videoPostConfig]);
119
+ const blurBgSrc = useMemo(() => {
120
+ var _a;
121
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
122
+ }, [firstFrameSrc, rec]);
110
123
  const handLoadeddata = useCallback(() => {
111
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
112
- if (!video)
124
+ if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
113
125
  return;
126
+ const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
114
127
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
115
- if (!canvas)
116
- return;
117
128
  const ctx = canvas.getContext('2d');
118
129
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
119
130
  const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
@@ -121,10 +132,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
121
132
  canvas.width = targetWidth;
122
133
  ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
123
134
  setFirstFrameSrc(canvas.toDataURL());
124
- canvas.remove();
125
135
  }, []);
126
136
  useEffect(() => {
127
- var _a, _b, _c;
137
+ var _a, _b, _c, _d;
128
138
  if (!videoRef.current)
129
139
  return;
130
140
  setIsPauseVideo(false);
@@ -134,14 +144,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
134
144
  videoRef.current.setAttribute('x5-playsinline', 'true');
135
145
  videoRef.current.setAttribute('webkit-playsinline', 'true');
136
146
  }
137
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
138
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
139
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('loadeddata', handLoadeddata);
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);
140
151
  return () => {
141
- var _a, _b, _c;
142
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
143
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
144
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
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);
145
157
  };
146
158
  }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
147
159
  useEffect(() => {
@@ -197,19 +209,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
197
209
  window.removeEventListener('beforeunload', handleBeforeUnload);
198
210
  };
199
211
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
200
- const blur = useMemo(() => {
201
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
202
- }, [videoPostConfig]);
203
- const translateY = useMemo(() => {
204
- var _a;
205
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
206
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
207
- : 'translateY(-50%)';
208
- }, [videoPostConfig]);
209
- const blurBgSrc = useMemo(() => {
210
- var _a;
211
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
212
- }, [firstFrameSrc, rec]);
213
212
  if (!rec.video) {
214
213
  return null;
215
214
  }
@@ -237,7 +236,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
237
236
  right: 0
238
237
  } },
239
238
  React.createElement("div", { style: { position: 'relative' } },
240
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
239
+ 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: {
241
240
  width: '100%',
242
241
  height: 'auto',
243
242
  objectFit: 'contain'
@@ -249,7 +248,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
249
248
  height,
250
249
  overflow: 'hidden'
251
250
  } },
252
- React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
251
+ 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 }),
253
252
  renderPoster,
254
253
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
255
254
  };
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -110,13 +110,24 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
110
110
  });
111
111
  }
112
112
  }, [data, index, bffEventReport]);
113
+ const blur = (0, react_1.useMemo)(() => {
114
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
115
+ }, [videoPostConfig]);
116
+ const translateY = (0, react_1.useMemo)(() => {
117
+ var _a;
118
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
119
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
120
+ : 'translateY(-50%)';
121
+ }, [videoPostConfig]);
122
+ const blurBgSrc = (0, react_1.useMemo)(() => {
123
+ var _a;
124
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
125
+ }, [firstFrameSrc, rec]);
113
126
  const handLoadeddata = (0, react_1.useCallback)(() => {
114
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
115
- if (!video)
127
+ if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
116
128
  return;
129
+ const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
117
130
  const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
118
- if (!canvas)
119
- return;
120
131
  const ctx = canvas.getContext('2d');
121
132
  const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
122
133
  const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
@@ -124,10 +135,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
124
135
  canvas.width = targetWidth;
125
136
  ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
126
137
  setFirstFrameSrc(canvas.toDataURL());
127
- canvas.remove();
128
138
  }, []);
129
139
  (0, react_1.useEffect)(() => {
130
- var _a, _b, _c;
140
+ var _a, _b, _c, _d;
131
141
  if (!videoRef.current)
132
142
  return;
133
143
  setIsPauseVideo(false);
@@ -137,14 +147,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
137
147
  videoRef.current.setAttribute('x5-playsinline', 'true');
138
148
  videoRef.current.setAttribute('webkit-playsinline', 'true');
139
149
  }
140
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
141
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
142
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('loadeddata', handLoadeddata);
150
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
151
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
152
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
153
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
143
154
  return () => {
144
- var _a, _b, _c;
145
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
146
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
147
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
155
+ var _a, _b, _c, _d;
156
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
157
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
158
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
159
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
148
160
  };
149
161
  }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
150
162
  (0, react_1.useEffect)(() => {
@@ -200,19 +212,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
200
212
  window.removeEventListener('beforeunload', handleBeforeUnload);
201
213
  };
202
214
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
203
- const blur = (0, react_1.useMemo)(() => {
204
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
205
- }, [videoPostConfig]);
206
- const translateY = (0, react_1.useMemo)(() => {
207
- var _a;
208
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
209
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
210
- : 'translateY(-50%)';
211
- }, [videoPostConfig]);
212
- const blurBgSrc = (0, react_1.useMemo)(() => {
213
- var _a;
214
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
215
- }, [firstFrameSrc, rec]);
216
215
  if (!rec.video) {
217
216
  return null;
218
217
  }
@@ -240,7 +239,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
240
239
  right: 0
241
240
  } },
242
241
  react_1.default.createElement("div", { style: { position: 'relative' } },
243
- react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
242
+ react_1.default.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: {
244
243
  width: '100%',
245
244
  height: 'auto',
246
245
  objectFit: 'contain'
@@ -252,7 +251,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
252
251
  height,
253
252
  overflow: 'hidden'
254
253
  } },
255
- react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
254
+ react_1.default.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 }),
256
255
  renderPoster,
257
256
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
258
257
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.27",
3
+ "version": "1.0.28",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",