pb-sxp-ui 1.0.27 → 1.0.29

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.
@@ -8,22 +8,24 @@ const Picture = (props) => {
8
8
  const translateY = useMemo(() => {
9
9
  var _a;
10
10
  return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
11
- ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
11
+ ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
12
12
  : 'translateY(-50%)';
13
13
  }, [imgUrlsPostConfig]);
14
+ const blurStyle = useMemo(() => {
15
+ return blur
16
+ ? {
17
+ filter: 'blur(10px)',
18
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
19
+ }
20
+ : {};
21
+ }, [blur]);
14
22
  return (React.createElement("div", { style: {
15
23
  overflow: 'hidden',
16
24
  height,
17
25
  width: '100%',
18
26
  position: 'relative'
19
27
  } },
20
- React.createElement(FormatImage, { src: src, style: {
21
- height: '100%',
22
- width: '100%',
23
- objectFit: 'cover',
24
- filter: blur ? 'blur(10px)' : 'none',
25
- transform: blur ? 'scale(1.2)' : 'none'
26
- } }),
28
+ React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
27
29
  blur && (React.createElement(FormatImage, { src: src, style: {
28
30
  width: '100%',
29
31
  objectFit: 'contain',
@@ -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)}%) translate3d(0px, 0px, 0px)`
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,14 @@ 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]);
212
+ const blurStyle = useMemo(() => {
213
+ return blur
214
+ ? {
215
+ filter: 'blur(10px)',
216
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
217
+ }
218
+ : {};
219
+ }, [blur]);
213
220
  if (!rec.video) {
214
221
  return null;
215
222
  }
@@ -219,13 +226,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
219
226
  height,
220
227
  overflow: 'hidden'
221
228
  } },
222
- React.createElement(FormatImage, { src: blurBgSrc, style: {
223
- height: '100%',
224
- width: '100%',
225
- objectFit: 'cover',
226
- filter: blur ? 'blur(10px)' : 'none',
227
- transform: blur ? 'scale(1.2)' : 'none'
228
- } }),
229
+ React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
229
230
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
230
231
  React.createElement("div", { style: {
231
232
  position: 'absolute',
@@ -237,7 +238,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
237
238
  right: 0
238
239
  } },
239
240
  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: {
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: {
241
242
  width: '100%',
242
243
  height: 'auto',
243
244
  objectFit: 'contain'
@@ -249,7 +250,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
249
250
  height,
250
251
  overflow: 'hidden'
251
252
  } },
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 }),
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 }),
253
254
  renderPoster,
254
255
  React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
255
256
  };
@@ -11,22 +11,24 @@ const Picture = (props) => {
11
11
  const translateY = (0, react_1.useMemo)(() => {
12
12
  var _a;
13
13
  return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2'
14
- ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%)`
14
+ ? `translateY(-${50 + ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
15
15
  : 'translateY(-50%)';
16
16
  }, [imgUrlsPostConfig]);
17
+ const blurStyle = (0, react_1.useMemo)(() => {
18
+ return blur
19
+ ? {
20
+ filter: 'blur(10px)',
21
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
22
+ }
23
+ : {};
24
+ }, [blur]);
17
25
  return (react_1.default.createElement("div", { style: {
18
26
  overflow: 'hidden',
19
27
  height,
20
28
  width: '100%',
21
29
  position: 'relative'
22
30
  } },
23
- react_1.default.createElement(FormatImage_1.default, { src: src, style: {
24
- height: '100%',
25
- width: '100%',
26
- objectFit: 'cover',
27
- filter: blur ? 'blur(10px)' : 'none',
28
- transform: blur ? 'scale(1.2)' : 'none'
29
- } }),
31
+ react_1.default.createElement(FormatImage_1.default, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
30
32
  blur && (react_1.default.createElement(FormatImage_1.default, { src: src, style: {
31
33
  width: '100%',
32
34
  objectFit: 'contain',
@@ -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)}%) translate3d(0px, 0px, 0px)`
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,14 @@ 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]);
215
+ const blurStyle = (0, react_1.useMemo)(() => {
216
+ return blur
217
+ ? {
218
+ filter: 'blur(10px)',
219
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
220
+ }
221
+ : {};
222
+ }, [blur]);
216
223
  if (!rec.video) {
217
224
  return null;
218
225
  }
@@ -222,13 +229,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
222
229
  height,
223
230
  overflow: 'hidden'
224
231
  } },
225
- react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: {
226
- height: '100%',
227
- width: '100%',
228
- objectFit: 'cover',
229
- filter: blur ? 'blur(10px)' : 'none',
230
- transform: blur ? 'scale(1.2)' : 'none'
231
- } }),
232
+ react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
232
233
  react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
233
234
  react_1.default.createElement("div", { style: {
234
235
  position: 'absolute',
@@ -240,7 +241,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
240
241
  right: 0
241
242
  } },
242
243
  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: {
244
+ 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
245
  width: '100%',
245
246
  height: 'auto',
246
247
  objectFit: 'contain'
@@ -252,7 +253,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
252
253
  height,
253
254
  overflow: 'hidden'
254
255
  } },
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 }),
256
+ 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
257
  renderPoster,
257
258
  react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
258
259
  };
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.29",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",