pb-sxp-ui 1.0.91 → 1.0.92

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 +18 -15
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +18 -15
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +1 -1
  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 +18 -15
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +1 -1
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/VideoWidget/index.js +12 -12
  14. package/es/materials/sxp/template/components/Img.js +5 -2
  15. package/lib/core/components/SxpPageRender/VideoWidget/index.js +12 -12
  16. package/lib/materials/sxp/template/components/Img.js +4 -1
  17. package/package.json +1 -1
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -47,7 +47,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
47
47
  return;
48
48
  videoRef.muted = muted;
49
49
  }, [muted, videoRef]);
50
- const handleEnded = useCallback(() => {
50
+ const handlePlay = useCallback(() => {
51
51
  if (!videoRef)
52
52
  return;
53
53
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
@@ -175,15 +175,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
175
175
  if (!videoSrc)
176
176
  return;
177
177
  const Hls = window === null || window === void 0 ? void 0 : window.Hls;
178
- if (videoSrc.includes('.m3u8')) {
179
- if (Hls && Hls.isSupported()) {
180
- const hls = new Hls();
181
- hls.loadSource(videoSrc);
182
- hls.attachMedia(videoRef);
183
- }
184
- else {
185
- videoRef.src = videoSrc;
186
- }
178
+ if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
179
+ const hls = new Hls();
180
+ hls.loadSource(videoSrc);
181
+ hls.attachMedia(videoRef);
182
+ hls.on(Hls.Events.MANIFEST_PARSED, function () {
183
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
184
+ });
187
185
  }
188
186
  else {
189
187
  videoRef.src = videoSrc;
@@ -201,14 +199,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
201
199
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
202
200
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
203
201
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
204
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
202
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
203
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
205
204
  return () => {
206
205
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
207
206
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
208
207
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
209
208
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
210
209
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
211
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
210
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
211
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
212
212
  };
213
213
  }, [isActive, videoId, rec, videoRef]);
214
214
  useEffect(() => {
package/es/materials/sxp/template/components/Img.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { css } from '@emotion/css';
2
- import React, { memo, useEffect, useRef } from 'react';
2
+ import React, { memo, useEffect, useMemo, useRef } from 'react';
3
3
  import useOnScreen from '../../../../core/hooks/useOnScreen';
4
4
  import { useSxpDataSource } from '../../../../core/hooks';
5
5
  import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
@@ -15,8 +15,11 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
15
15
  }, rec, item, index);
16
16
  }
17
17
  }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
18
+ const imgSrc = useMemo(() => {
19
+ return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/40`;
20
+ }, [src]);
18
21
  return (React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
19
22
  React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
20
- React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
23
+ React.createElement(FormatImage, { className: css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: imgSrc }))));
21
24
  };
22
25
  export default memo(Img);
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -50,7 +50,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
50
50
  return;
51
51
  videoRef.muted = muted;
52
52
  }, [muted, videoRef]);
53
- const handleEnded = (0, react_1.useCallback)(() => {
53
+ const handlePlay = (0, react_1.useCallback)(() => {
54
54
  if (!videoRef)
55
55
  return;
56
56
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
@@ -178,15 +178,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
178
178
  if (!videoSrc)
179
179
  return;
180
180
  const Hls = window === null || window === void 0 ? void 0 : window.Hls;
181
- if (videoSrc.includes('.m3u8')) {
182
- if (Hls && Hls.isSupported()) {
183
- const hls = new Hls();
184
- hls.loadSource(videoSrc);
185
- hls.attachMedia(videoRef);
186
- }
187
- else {
188
- videoRef.src = videoSrc;
189
- }
181
+ if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
182
+ const hls = new Hls();
183
+ hls.loadSource(videoSrc);
184
+ hls.attachMedia(videoRef);
185
+ hls.on(Hls.Events.MANIFEST_PARSED, function () {
186
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
187
+ });
190
188
  }
191
189
  else {
192
190
  videoRef.src = videoSrc;
@@ -204,14 +202,16 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
204
202
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
205
203
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
206
204
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
207
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
205
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
206
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
208
207
  return () => {
209
208
  dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
210
209
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
211
210
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
212
211
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
213
212
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
214
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
213
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
214
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
215
215
  };
216
216
  }, [isActive, videoId, rec, videoRef]);
217
217
  (0, react_1.useEffect)(() => {
package/lib/materials/sxp/template/components/Img.js CHANGED
@@ -18,8 +18,11 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
18
18
  }, rec, item, index);
19
19
  }
20
20
  }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
21
+ const imgSrc = (0, react_1.useMemo)(() => {
22
+ return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? src : `${src}?imrquality/rquality/40`;
23
+ }, [src]);
21
24
  return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
22
25
  react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
23
- react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
26
+ react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: imgSrc }))));
24
27
  };
25
28
  exports.default = (0, react_1.memo)(Img);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.91",
3
+ "version": "1.0.92",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",