pb-sxp-ui 1.0.87 → 1.0.88

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 +148 -144
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +149 -145
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -4
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -4
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +148 -144
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -4
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/index.js +58 -56
  14. package/es/core/context/SxpDataSourceProvider.js +19 -16
  15. package/lib/core/components/SxpPageRender/index.js +58 -56
  16. package/lib/core/context/SxpDataSourceProvider.js +19 -16
  17. package/package.json +1 -1
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -21,9 +21,8 @@ import { useEventReport } from '../../../core/hooks/useEventReport';
21
21
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
22
22
  import Tagbar from './Tagbar';
23
23
  import { getFeUserId } from '../../../core/utils/localStore';
24
- import Consent from '../Consent';
25
24
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
26
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
25
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
27
26
  const { schema } = useEditor();
28
27
  const [activeIndex, setActiveIndex] = useState(0);
29
28
  const viewImageStartTime = useRef(0);
@@ -40,21 +39,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
40
39
  const isShowFingerTip = useMemo(() => {
41
40
  return data.length > 0 && !loading && getFeUserId();
42
41
  }, [data, loading]);
43
- const handleH5EnterLink = useCallback(() => {
44
- if (data.length <= 0) {
45
- return;
42
+ useEffect(() => {
43
+ refreshFeSessionId();
44
+ }, []);
45
+ useEffect(() => {
46
+ if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
47
+ const now = new Date();
48
+ viewTime.current = now;
49
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
50
+ eventName: 'PageView'
51
+ });
46
52
  }
53
+ }, [data === null || data === void 0 ? void 0 : data.length]);
54
+ const handleH5EnterLink = useCallback(() => {
47
55
  refreshFeSessionId();
48
- const now = new Date();
49
- viewTime.current = now;
50
- if (isInit) {
51
- h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
56
+ h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
57
+ if (data.length > 0) {
58
+ const now = new Date();
59
+ viewTime.current = now;
60
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
61
+ eventName: 'PageView'
62
+ });
52
63
  }
53
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
54
- eventName: 'PageView'
55
- });
56
- setIsInit(true);
57
- }, [data.length, bffFbReport, h5EnterLink, isInit]);
64
+ }, [data.length, bffFbReport, h5EnterLink]);
58
65
  const firstRef = useRef();
59
66
  useEffect(() => {
60
67
  var _a, _b, _c, _d;
@@ -82,10 +89,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
82
89
  });
83
90
  }
84
91
  }, [videoRef, licenseUrl, data]);
85
- useEffect(() => {
86
- if (!isInit)
87
- handleH5EnterLink();
88
- }, [handleH5EnterLink, isInit]);
89
92
  useEffect(() => {
90
93
  var _a;
91
94
  const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -412,45 +415,44 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
412
415
  const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
413
416
  const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
414
417
  return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
415
- isShowConsent ? (React.createElement(Consent, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (React.createElement(React.Fragment, null,
416
- waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
417
- setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
418
- } })),
419
- renderLogo,
420
- React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
421
- isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _d !== void 0 ? _d : 0)}%` } })) : null,
422
- React.createElement(Swiper, { style: {
423
- marginTop: tagHeight
424
- }, ref: swiperRef, onSlideChange: () => {
425
- swiperRef.current.swiper.allowTouchMove = false;
426
- setTimeout(() => {
427
- swiperRef.current.swiper.allowTouchMove = true;
428
- }, 500);
429
- }, onActiveIndexChange: (swiper) => {
430
- setActiveIndex(swiper.activeIndex);
431
- if (openHashtag)
432
- return;
433
- handleScrollEvent(swiper);
434
- if (waterFallData)
435
- return;
436
- if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
437
- if (!isLoadMore) {
438
- setIsLoadMore(true);
439
- loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
440
- setIsLoadMore(false);
441
- });
442
- }
418
+ waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
419
+ setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
420
+ } })),
421
+ renderLogo,
422
+ React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
423
+ isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
424
+ React.createElement(Swiper, { style: {
425
+ marginTop: tagHeight
426
+ }, ref: swiperRef, onSlideChange: () => {
427
+ swiperRef.current.swiper.allowTouchMove = false;
428
+ setTimeout(() => {
429
+ swiperRef.current.swiper.allowTouchMove = true;
430
+ }, 500);
431
+ }, onActiveIndexChange: (swiper) => {
432
+ setActiveIndex(swiper.activeIndex);
433
+ if (openHashtag)
434
+ return;
435
+ handleScrollEvent(swiper);
436
+ if (waterFallData)
437
+ return;
438
+ if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
439
+ if (!isLoadMore) {
440
+ setIsLoadMore(true);
441
+ loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
442
+ setIsLoadMore(false);
443
+ });
443
444
  }
444
- }, direction: 'vertical', height: height },
445
- React.createElement(ToggleButton, { style: {
446
- position: 'fixed',
447
- visibility: ((_f = (_e = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _e === void 0 ? void 0 : _e.video) === null || _f === void 0 ? void 0 : _f.url) ? 'visible' : 'hidden',
448
- zIndex: 999,
449
- [(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _g !== void 0 ? _g : 'right']: (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _h !== void 0 ? _h : 0,
450
- [(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _j !== void 0 ? _j : 'bottom']: (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _k !== void 0 ? _k : 23
451
- }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
452
- renderView))),
453
- React.createElement(WaterFall, Object.assign({}, (_o = (_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.item) === null || _o === void 0 ? void 0 : _o.props)),
445
+ }
446
+ }, direction: 'vertical', height: height },
447
+ React.createElement(ToggleButton, { style: {
448
+ position: 'fixed',
449
+ visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
450
+ zIndex: 999,
451
+ [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
452
+ [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
453
+ }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
454
+ renderView),
455
+ React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
454
456
  React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
455
457
  React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
456
458
  backgroundColor: 'transparent',
package/es/core/context/SxpDataSourceProvider.js CHANGED
@@ -5,6 +5,7 @@ import { storeAndLoadFeSessionId } from '../utils/sessionStore';
5
5
  import { storeAndLoadFeUserId, AGREE_POLICY } from '../utils/localStore';
6
6
  import { useIconLink } from '../components/SxpPageRender/useIconLink';
7
7
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
8
+ import Consent from '../components/Consent';
8
9
  export const SxpDataSourceContext = createContext({
9
10
  rtcList: [],
10
11
  tagList: []
@@ -16,6 +17,7 @@ var DataSourceType;
16
17
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
17
18
  export const DEFAULT_TAG = 'FOR U';
18
19
  const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
20
+ var _a, _b, _c;
19
21
  const [rtcList, setRtcList] = useState([]);
20
22
  const [tagList, setTagList] = useState([]);
21
23
  const [loading, setLoading] = useState(false);
@@ -76,10 +78,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
76
78
  .catch((err) => Promise.reject(err));
77
79
  }, [bffDataSource]);
78
80
  const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
79
- var _a, _b, _c, _d, _e;
81
+ var _d, _e, _f, _g, _h;
80
82
  query = {
81
- maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
82
- defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
83
+ maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
84
+ defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
83
85
  'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
84
86
  'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
85
87
  hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
@@ -87,10 +89,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
87
89
  themeTag: query === null || query === void 0 ? void 0 : query.themeTag
88
90
  };
89
91
  if (utmVal) {
90
- const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
92
+ const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
91
93
  const key = val.split('=')[0];
92
94
  return UTM_KEYS.includes(key);
93
- })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
95
+ })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
94
96
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
95
97
  }
96
98
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -102,7 +104,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
102
104
  return result === null || result === void 0 ? void 0 : result.data;
103
105
  }), [bffFetch, utmVal, maxSize, defaultSize]);
104
106
  const loadVideos = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
105
- var _f, _g;
107
+ var _j, _k;
106
108
  if (rtcList.length <= 0) {
107
109
  return;
108
110
  }
@@ -112,8 +114,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
112
114
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
113
115
  themeTag: themeTag.current
114
116
  });
115
- setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
116
- setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
117
+ setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
118
+ setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
117
119
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
118
120
  const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
119
121
  if (!enableReportEvent) {
@@ -171,16 +173,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
171
173
  return res === null || res === void 0 ? void 0 : res.success;
172
174
  }), [bffFetch]);
173
175
  const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
174
- var _h, _j, _k, _l, _m;
176
+ var _l, _m, _o, _p, _q;
175
177
  if (!utmVal || !isShowTag)
176
178
  return;
177
179
  try {
178
- const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
180
+ const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
179
181
  const key = val.split('=')[0];
180
182
  return UTM_KEYS.includes(key);
181
- })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
183
+ })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
182
184
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
183
- setTagList((_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []);
185
+ setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
184
186
  }
185
187
  catch (e) {
186
188
  console.log('e', e);
@@ -231,8 +233,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
231
233
  });
232
234
  }, [bffEventReport]);
233
235
  useEffect(() => {
234
- h5EnterLink();
235
- }, []);
236
+ if (!isShowConsent)
237
+ h5EnterLink();
238
+ }, [isShowConsent]);
236
239
  useEffect(() => {
237
240
  if (isShowConsent)
238
241
  return;
@@ -315,12 +318,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
315
318
  isShowConsent,
316
319
  selectTag,
317
320
  setSelectTag
318
- } }, render({
321
+ } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
319
322
  rtcList,
320
323
  mutateLike: bffMutateLike,
321
324
  mutateUnlike: bffMutateUnlike,
322
325
  submitForm: bffSubmitForm,
323
326
  tagList
324
- })));
327
+ }))));
325
328
  };
326
329
  export default memo(SxpDataSourceProvider);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -24,9 +24,8 @@ const useEventReport_1 = require("../../../core/hooks/useEventReport");
24
24
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
25
25
  const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
26
26
  const localStore_1 = require("../../../core/utils/localStore");
27
- const Consent_1 = tslib_1.__importDefault(require("../Consent"));
28
27
  const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
29
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
28
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
30
29
  const { schema } = (0, hooks_1.useEditor)();
31
30
  const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
32
31
  const viewImageStartTime = (0, react_1.useRef)(0);
@@ -43,21 +42,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
43
42
  const isShowFingerTip = (0, react_1.useMemo)(() => {
44
43
  return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
45
44
  }, [data, loading]);
46
- const handleH5EnterLink = (0, react_1.useCallback)(() => {
47
- if (data.length <= 0) {
48
- return;
45
+ (0, react_1.useEffect)(() => {
46
+ (0, sessionStore_1.refreshFeSessionId)();
47
+ }, []);
48
+ (0, react_1.useEffect)(() => {
49
+ if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
50
+ const now = new Date();
51
+ viewTime.current = now;
52
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
53
+ eventName: 'PageView'
54
+ });
49
55
  }
56
+ }, [data === null || data === void 0 ? void 0 : data.length]);
57
+ const handleH5EnterLink = (0, react_1.useCallback)(() => {
50
58
  (0, sessionStore_1.refreshFeSessionId)();
51
- const now = new Date();
52
- viewTime.current = now;
53
- if (isInit) {
54
- h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
59
+ h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
60
+ if (data.length > 0) {
61
+ const now = new Date();
62
+ viewTime.current = now;
63
+ bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
64
+ eventName: 'PageView'
65
+ });
55
66
  }
56
- bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
57
- eventName: 'PageView'
58
- });
59
- setIsInit(true);
60
- }, [data.length, bffFbReport, h5EnterLink, isInit]);
67
+ }, [data.length, bffFbReport, h5EnterLink]);
61
68
  const firstRef = (0, react_1.useRef)();
62
69
  (0, react_1.useEffect)(() => {
63
70
  var _a, _b, _c, _d;
@@ -85,10 +92,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
85
92
  });
86
93
  }
87
94
  }, [videoRef, licenseUrl, data]);
88
- (0, react_1.useEffect)(() => {
89
- if (!isInit)
90
- handleH5EnterLink();
91
- }, [handleH5EnterLink, isInit]);
92
95
  (0, react_1.useEffect)(() => {
93
96
  var _a;
94
97
  const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -415,45 +418,44 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
415
418
  const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
416
419
  const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
417
420
  return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
418
- isShowConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (react_1.default.createElement(react_1.default.Fragment, null,
419
- waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
420
- setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
421
- } })),
422
- renderLogo,
423
- react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
424
- isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _d !== void 0 ? _d : 0)}%` } })) : null,
425
- react_1.default.createElement(react_2.Swiper, { style: {
426
- marginTop: tagHeight
427
- }, ref: swiperRef, onSlideChange: () => {
428
- swiperRef.current.swiper.allowTouchMove = false;
429
- setTimeout(() => {
430
- swiperRef.current.swiper.allowTouchMove = true;
431
- }, 500);
432
- }, onActiveIndexChange: (swiper) => {
433
- setActiveIndex(swiper.activeIndex);
434
- if (openHashtag)
435
- return;
436
- handleScrollEvent(swiper);
437
- if (waterFallData)
438
- return;
439
- if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
440
- if (!isLoadMore) {
441
- setIsLoadMore(true);
442
- loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
443
- setIsLoadMore(false);
444
- });
445
- }
421
+ waterFallData && (react_1.default.createElement(Navbar_1.default, { icon: left_png_1.default, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
422
+ setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
423
+ } })),
424
+ renderLogo,
425
+ react_1.default.createElement(Tagbar_1.default, { tagList: tagList, setActiveIndex: setActiveIndex }),
426
+ isShowFingerTip ? (react_1.default.createElement(FingerSwipeTip_1.default, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
427
+ react_1.default.createElement(react_2.Swiper, { style: {
428
+ marginTop: tagHeight
429
+ }, ref: swiperRef, onSlideChange: () => {
430
+ swiperRef.current.swiper.allowTouchMove = false;
431
+ setTimeout(() => {
432
+ swiperRef.current.swiper.allowTouchMove = true;
433
+ }, 500);
434
+ }, onActiveIndexChange: (swiper) => {
435
+ setActiveIndex(swiper.activeIndex);
436
+ if (openHashtag)
437
+ return;
438
+ handleScrollEvent(swiper);
439
+ if (waterFallData)
440
+ return;
441
+ if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
442
+ if (!isLoadMore) {
443
+ setIsLoadMore(true);
444
+ loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
445
+ setIsLoadMore(false);
446
+ });
446
447
  }
447
- }, direction: 'vertical', height: height },
448
- react_1.default.createElement(ToggleButton_1.default, { style: {
449
- position: 'fixed',
450
- visibility: ((_f = (_e = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _e === void 0 ? void 0 : _e.video) === null || _f === void 0 ? void 0 : _f.url) ? 'visible' : 'hidden',
451
- zIndex: 999,
452
- [(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _g !== void 0 ? _g : 'right']: (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _h !== void 0 ? _h : 0,
453
- [(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _j !== void 0 ? _j : 'bottom']: (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _k !== void 0 ? _k : 23
454
- }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
455
- renderView))),
456
- react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_o = (_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.item) === null || _o === void 0 ? void 0 : _o.props)),
448
+ }
449
+ }, direction: 'vertical', height: height },
450
+ react_1.default.createElement(ToggleButton_1.default, { style: {
451
+ position: 'fixed',
452
+ visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
453
+ zIndex: 999,
454
+ [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
455
+ [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
456
+ }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
457
+ renderView),
458
+ react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
457
459
  react_1.default.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
458
460
  react_1.default.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
459
461
  backgroundColor: 'transparent',
package/lib/core/context/SxpDataSourceProvider.js CHANGED
@@ -8,6 +8,7 @@ const sessionStore_1 = require("../utils/sessionStore");
8
8
  const localStore_1 = require("../utils/localStore");
9
9
  const useIconLink_1 = require("../components/SxpPageRender/useIconLink");
10
10
  const event_1 = tslib_1.__importStar(require("../utils/event"));
11
+ const Consent_1 = tslib_1.__importDefault(require("../components/Consent"));
11
12
  exports.SxpDataSourceContext = (0, react_1.createContext)({
12
13
  rtcList: [],
13
14
  tagList: []
@@ -19,6 +20,7 @@ var DataSourceType;
19
20
  const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
20
21
  exports.DEFAULT_TAG = 'FOR U';
21
22
  const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
23
+ var _a, _b, _c;
22
24
  const [rtcList, setRtcList] = (0, react_1.useState)([]);
23
25
  const [tagList, setTagList] = (0, react_1.useState)([]);
24
26
  const [loading, setLoading] = (0, react_1.useState)(false);
@@ -79,10 +81,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
79
81
  .catch((err) => Promise.reject(err));
80
82
  }, [bffDataSource]);
81
83
  const getRecommendVideos = (0, react_1.useCallback)((query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
82
- var _a, _b, _c, _d, _e;
84
+ var _d, _e, _f, _g, _h;
83
85
  query = {
84
- maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
85
- defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
86
+ maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
87
+ defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
86
88
  'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
87
89
  'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
88
90
  hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
@@ -90,10 +92,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
90
92
  themeTag: query === null || query === void 0 ? void 0 : query.themeTag
91
93
  };
92
94
  if (utmVal) {
93
- const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
95
+ const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
94
96
  const key = val.split('=')[0];
95
97
  return UTM_KEYS.includes(key);
96
- })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
98
+ })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
97
99
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
98
100
  }
99
101
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -105,7 +107,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
105
107
  return result === null || result === void 0 ? void 0 : result.data;
106
108
  }), [bffFetch, utmVal, maxSize, defaultSize]);
107
109
  const loadVideos = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
108
- var _f, _g;
110
+ var _j, _k;
109
111
  if (rtcList.length <= 0) {
110
112
  return;
111
113
  }
@@ -115,8 +117,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
115
117
  'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
116
118
  themeTag: themeTag.current
117
119
  });
118
- setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
119
- setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
120
+ setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
121
+ setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
120
122
  }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
121
123
  const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
122
124
  if (!enableReportEvent) {
@@ -174,16 +176,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
174
176
  return res === null || res === void 0 ? void 0 : res.success;
175
177
  }), [bffFetch]);
176
178
  const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
177
- var _h, _j, _k, _l, _m;
179
+ var _l, _m, _o, _p, _q;
178
180
  if (!utmVal || !isShowTag)
179
181
  return;
180
182
  try {
181
- const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
183
+ const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
182
184
  const key = val.split('=')[0];
183
185
  return UTM_KEYS.includes(key);
184
- })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
186
+ })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
185
187
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
186
- setTagList((_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []);
188
+ setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
187
189
  }
188
190
  catch (e) {
189
191
  console.log('e', e);
@@ -234,8 +236,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
234
236
  });
235
237
  }, [bffEventReport]);
236
238
  (0, react_1.useEffect)(() => {
237
- h5EnterLink();
238
- }, []);
239
+ if (!isShowConsent)
240
+ h5EnterLink();
241
+ }, [isShowConsent]);
239
242
  (0, react_1.useEffect)(() => {
240
243
  if (isShowConsent)
241
244
  return;
@@ -318,12 +321,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
318
321
  isShowConsent,
319
322
  selectTag,
320
323
  setSelectTag
321
- } }, render({
324
+ } }, isShowConsent ? (react_1.default.createElement(Consent_1.default, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
322
325
  rtcList,
323
326
  mutateLike: bffMutateLike,
324
327
  mutateUnlike: bffMutateUnlike,
325
328
  submitForm: bffSubmitForm,
326
329
  tagList
327
- })));
330
+ }))));
328
331
  };
329
332
  exports.default = (0, react_1.memo)(SxpDataSourceProvider);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.87",
3
+ "version": "1.0.88",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",