pb-sxp-ui 1.0.63 → 1.0.65

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.
@@ -1,5 +1,4 @@
1
1
  import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
- import Hls from 'hls.js';
3
2
  import { useIconLink } from '../SxpPageRender/useIconLink';
4
3
  import FormatImage from '../SxpPageRender/FormatImage';
5
4
  import { useSxpDataSource } from '../../../core/hooks';
@@ -139,8 +138,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
139
138
  if (!videoRef.current.src) {
140
139
  const videoSrc = rec.video.url;
141
140
  if (videoSrc.includes('.m3u8')) {
142
- if (Hls.isSupported()) {
143
- const hls = new Hls();
141
+ if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
142
+ const hls = new window.Hls();
144
143
  hls.loadSource(videoSrc);
145
144
  hls.attachMedia(videoRef.current);
146
145
  }
@@ -9,14 +9,14 @@ Object.values(_materials_).forEach((v) => {
9
9
  RESOLVER[v.extend.type] = v;
10
10
  });
11
11
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
12
- var _a, _b, _c, _d, _e, _f;
12
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
13
13
  const utmVal = useMemo(() => {
14
14
  var _a;
15
15
  const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
16
16
  return searchParams;
17
17
  }, []);
18
18
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
19
- React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, render: ({ rtcList, tagList }) => {
19
+ React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
20
20
  var _a;
21
21
  return (React.createElement(React.Fragment, null,
22
22
  React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
@@ -1,4 +1,4 @@
1
- import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
1
+ import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
2
2
  const FormatImage = forwardRef((props, ref) => {
3
3
  const { src, onLoad, style, className, loading } = props;
4
4
  const [imgSrc, setImgSrc] = useState();
@@ -7,10 +7,28 @@ const FormatImage = forwardRef((props, ref) => {
7
7
  setImgSrc(v);
8
8
  }
9
9
  }));
10
+ const imgRef = useRef(null);
10
11
  useEffect(() => {
11
- setImgSrc(src);
12
+ let observer = null;
13
+ const { current } = imgRef;
14
+ if (current) {
15
+ observer = new IntersectionObserver((entries) => {
16
+ entries.forEach((entry) => {
17
+ if (entry.isIntersecting) {
18
+ setImgSrc(src);
19
+ observer.unobserve(current);
20
+ }
21
+ });
22
+ }, { threshold: 0.1 });
23
+ observer.observe(current);
24
+ }
25
+ return () => {
26
+ if (observer && current) {
27
+ observer.unobserve(current);
28
+ }
29
+ };
12
30
  }, [src]);
13
- return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
31
+ return (React.createElement("div", { ref: imgRef }, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
14
32
  React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
15
33
  React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
16
34
  React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
@@ -181,6 +181,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
181
181
  const videoSrc = rec.video.url;
182
182
  if (!videoSrc)
183
183
  return;
184
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
184
185
  setIsPauseVideo(false);
185
186
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
186
187
  const dom = document.querySelector('#player-container-id');
@@ -188,7 +189,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
188
189
  if (!dom && !dom2)
189
190
  return;
190
191
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
191
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
192
192
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
193
193
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
194
194
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
@@ -76,7 +76,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
76
76
  };
77
77
  const firstRef = useRef();
78
78
  useEffect(() => {
79
- if (!firstRef.current && !videoRef) {
79
+ if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current)) {
80
80
  firstRef.current = true;
81
81
  const player = TCPlayer('player-container-id', {
82
82
  licenseUrl,
@@ -102,6 +102,7 @@ export interface SxpDataSourceProviderProps {
102
102
  loadingImage?: string;
103
103
  isOpenHashTag?: boolean;
104
104
  enabledMetaConversionApi?: boolean;
105
+ isShowTag?: boolean;
105
106
  }
106
107
  declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
107
108
  export default _default;
@@ -14,7 +14,7 @@ var DataSourceType;
14
14
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
15
15
  })(DataSourceType || (DataSourceType = {}));
16
16
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
17
- const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
17
+ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
18
18
  const [rtcList, setRtcList] = useState([]);
19
19
  const [tagList, setTagList] = useState([]);
20
20
  const [loading, setLoading] = useState(false);
@@ -156,7 +156,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
156
156
  }), [bffFetch]);
157
157
  const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
158
158
  var _h, _j, _k, _l, _m;
159
- if (!utmVal)
159
+ if (!utmVal || !isShowTag)
160
160
  return;
161
161
  try {
162
162
  const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -169,7 +169,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
169
169
  catch (e) {
170
170
  console.log('e', e);
171
171
  }
172
- }), [bffFetch, utmVal]);
172
+ }), [bffFetch, utmVal, isShowTag]);
173
173
  const ctaEvent = useCallback((eventInfo, rec, product, position) => {
174
174
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
175
175
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
- const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
6
5
  const useIconLink_1 = require("../SxpPageRender/useIconLink");
7
6
  const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
8
7
  const hooks_1 = require("../../../core/hooks");
@@ -142,8 +141,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
142
141
  if (!videoRef.current.src) {
143
142
  const videoSrc = rec.video.url;
144
143
  if (videoSrc.includes('.m3u8')) {
145
- if (hls_js_1.default.isSupported()) {
146
- const hls = new hls_js_1.default();
144
+ if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
145
+ const hls = new window.Hls();
147
146
  hls.loadSource(videoSrc);
148
147
  hls.attachMedia(videoRef.current);
149
148
  }
@@ -12,14 +12,14 @@ Object.values(_materials_).forEach((v) => {
12
12
  RESOLVER[v.extend.type] = v;
13
13
  });
14
14
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
15
- var _a, _b, _c, _d, _e, _f;
15
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
16
16
  const utmVal = (0, react_1.useMemo)(() => {
17
17
  var _a;
18
18
  const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
19
19
  return searchParams;
20
20
  }, []);
21
21
  return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
22
- react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, render: ({ rtcList, tagList }) => {
22
+ react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
23
23
  var _a;
24
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
25
25
  react_1.default.createElement(SxpPageRender_1.default, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
@@ -10,10 +10,28 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
10
10
  setImgSrc(v);
11
11
  }
12
12
  }));
13
+ const imgRef = (0, react_1.useRef)(null);
13
14
  (0, react_1.useEffect)(() => {
14
- setImgSrc(src);
15
+ let observer = null;
16
+ const { current } = imgRef;
17
+ if (current) {
18
+ observer = new IntersectionObserver((entries) => {
19
+ entries.forEach((entry) => {
20
+ if (entry.isIntersecting) {
21
+ setImgSrc(src);
22
+ observer.unobserve(current);
23
+ }
24
+ });
25
+ }, { threshold: 0.1 });
26
+ observer.observe(current);
27
+ }
28
+ return () => {
29
+ if (observer && current) {
30
+ observer.unobserve(current);
31
+ }
32
+ };
15
33
  }, [src]);
16
- return (react_1.default.createElement(react_1.default.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
34
+ return (react_1.default.createElement("div", { ref: imgRef }, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
17
35
  react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
18
36
  react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
19
37
  react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
@@ -184,6 +184,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
184
184
  const videoSrc = rec.video.url;
185
185
  if (!videoSrc)
186
186
  return;
187
+ videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
187
188
  setIsPauseVideo(false);
188
189
  const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
189
190
  const dom = document.querySelector('#player-container-id');
@@ -191,7 +192,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
191
192
  if (!dom && !dom2)
192
193
  return;
193
194
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
194
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
195
195
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
196
196
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
197
197
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
@@ -79,7 +79,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
79
79
  };
80
80
  const firstRef = (0, react_1.useRef)();
81
81
  (0, react_1.useEffect)(() => {
82
- if (!firstRef.current && !videoRef) {
82
+ if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current)) {
83
83
  firstRef.current = true;
84
84
  const player = TCPlayer('player-container-id', {
85
85
  licenseUrl,
@@ -102,6 +102,7 @@ export interface SxpDataSourceProviderProps {
102
102
  loadingImage?: string;
103
103
  isOpenHashTag?: boolean;
104
104
  enabledMetaConversionApi?: boolean;
105
+ isShowTag?: boolean;
105
106
  }
106
107
  declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
107
108
  export default _default;
@@ -17,7 +17,7 @@ var DataSourceType;
17
17
  DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
18
18
  })(DataSourceType || (DataSourceType = {}));
19
19
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
20
- const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
20
+ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
21
21
  const [rtcList, setRtcList] = (0, react_1.useState)([]);
22
22
  const [tagList, setTagList] = (0, react_1.useState)([]);
23
23
  const [loading, setLoading] = (0, react_1.useState)(false);
@@ -159,7 +159,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
159
159
  }), [bffFetch]);
160
160
  const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
161
161
  var _h, _j, _k, _l, _m;
162
- if (!utmVal)
162
+ if (!utmVal || !isShowTag)
163
163
  return;
164
164
  try {
165
165
  const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -172,7 +172,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
172
172
  catch (e) {
173
173
  console.log('e', e);
174
174
  }
175
- }), [bffFetch, utmVal]);
175
+ }), [bffFetch, utmVal, isShowTag]);
176
176
  const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
177
177
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
178
178
  const cta = product === null || product === void 0 ? void 0 : product.bindCta;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.63",
3
+ "version": "1.0.65",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -42,7 +42,6 @@
42
42
  "antd": "^5.15.3",
43
43
  "eslint": "^8.48.0",
44
44
  "eventemitter3": "^5.0.1",
45
- "hls.js": "^1.5.8",
46
45
  "less": "^4.2.0",
47
46
  "lodash": "^4.17.21",
48
47
  "pako": "^2.1.0",