pb-sxp-ui 1.0.90 → 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 +19 -16
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +19 -16
  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 +23 -19
  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 +13 -13
  14. package/es/materials/sxp/template/components/Img.js +5 -2
  15. package/lib/core/components/SxpPageRender/VideoWidget/index.js +13 -13
  16. package/lib/materials/sxp/template/components/Img.js +4 -1
  17. package/package.json +1 -2
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -4,7 +4,6 @@ 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 Hls from 'hls.js';
8
7
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
9
8
  const [isPauseVideo, setIsPauseVideo] = useState(false);
10
9
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
@@ -48,7 +47,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
48
47
  return;
49
48
  videoRef.muted = muted;
50
49
  }, [muted, videoRef]);
51
- const handleEnded = useCallback(() => {
50
+ const handlePlay = useCallback(() => {
52
51
  if (!videoRef)
53
52
  return;
54
53
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
@@ -175,15 +174,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
175
174
  const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
176
175
  if (!videoSrc)
177
176
  return;
178
- if (videoSrc.includes('.m3u8')) {
179
- if (Hls.isSupported()) {
180
- const hls = new Hls();
181
- hls.loadSource(videoSrc);
182
- hls.attachMedia(videoRef);
183
- }
184
- else {
185
- videoRef.src = videoSrc;
186
- }
177
+ const Hls = window === null || window === void 0 ? void 0 : window.Hls;
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
@@ -7,7 +7,6 @@ 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 hls_js_1 = tslib_1.__importDefault(require("hls.js"));
11
10
  const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef }) => {
12
11
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
13
12
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
@@ -51,7 +50,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
51
50
  return;
52
51
  videoRef.muted = muted;
53
52
  }, [muted, videoRef]);
54
- const handleEnded = (0, react_1.useCallback)(() => {
53
+ const handlePlay = (0, react_1.useCallback)(() => {
55
54
  if (!videoRef)
56
55
  return;
57
56
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
@@ -178,15 +177,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
178
177
  const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
179
178
  if (!videoSrc)
180
179
  return;
181
- if (videoSrc.includes('.m3u8')) {
182
- if (hls_js_1.default.isSupported()) {
183
- const hls = new hls_js_1.default();
184
- hls.loadSource(videoSrc);
185
- hls.attachMedia(videoRef);
186
- }
187
- else {
188
- videoRef.src = videoSrc;
189
- }
180
+ const Hls = window === null || window === void 0 ? void 0 : window.Hls;
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.90",
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",
@@ -39,7 +39,6 @@
39
39
  "@emotion/css": "^11.11.2",
40
40
  "eslint": "^8.48.0",
41
41
  "eventemitter3": "^5.0.1",
42
- "hls.js": "^1.5.11",
43
42
  "less": "^4.2.0",
44
43
  "lodash": "^4.17.21",
45
44
  "pako": "^2.1.0",