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.
- package/dist/index.cjs +148 -144
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +149 -145
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +148 -144
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/index.js +58 -56
- package/es/core/context/SxpDataSourceProvider.js +19 -16
- package/lib/core/components/SxpPageRender/index.js +58 -56
- package/lib/core/context/SxpDataSourceProvider.js +19 -16
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
@@ -438,6 +438,70 @@ var SXP_EVENT_TYPE;
|
|
438
438
|
SXP_EVENT_TYPE["CHANGE_THEME_TAG"] = "changeThemeTag";
|
439
439
|
})(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
|
440
440
|
|
441
|
+
/*
|
442
|
+
* @Author: binruan@chatlabs.com
|
443
|
+
* @Date: 2024-06-13 15:16:53
|
444
|
+
* @LastEditors: binruan@chatlabs.com
|
445
|
+
* @LastEditTime: 2024-06-19 14:13:50
|
446
|
+
* @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
|
447
|
+
*
|
448
|
+
*/
|
449
|
+
const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
|
450
|
+
const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
|
451
|
+
const channelObj = React.useMemo(() => {
|
452
|
+
const queryString = location.search.slice(1);
|
453
|
+
const params = qs.parse(queryString.replace(/\+/g, '%2B'));
|
454
|
+
for (const key in params) {
|
455
|
+
params[key] = params[key].replace(/%2B/g, '+');
|
456
|
+
}
|
457
|
+
return params;
|
458
|
+
}, []);
|
459
|
+
const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
|
460
|
+
React.useEffect(() => {
|
461
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
462
|
+
eventInfo: {
|
463
|
+
eventSubject: 'privacyEnter',
|
464
|
+
eventDescription: 'User enter privacy page',
|
465
|
+
utmSource: getUtmValue('utm_source'),
|
466
|
+
utmMedium: getUtmValue('utm_medium'),
|
467
|
+
utmCampaign: getUtmValue('utm_campaign'),
|
468
|
+
utmId: getUtmValue('utm_id'),
|
469
|
+
utmContent: getUtmValue('utm_content'),
|
470
|
+
clSource: getUtmValue('cl_source'),
|
471
|
+
enterTime: `${Date.now()}`,
|
472
|
+
enterUrl: window.location.href,
|
473
|
+
rtc: null,
|
474
|
+
requestId: null,
|
475
|
+
sessionID: null
|
476
|
+
}
|
477
|
+
});
|
478
|
+
}, []);
|
479
|
+
const handleAgree = () => {
|
480
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
481
|
+
eventInfo: {
|
482
|
+
eventSubject: 'userConsent',
|
483
|
+
eventDescription: '用户授权【操作结果】',
|
484
|
+
consentResult: '0',
|
485
|
+
consentTags: '["系统运营"]',
|
486
|
+
rtc: null,
|
487
|
+
requestId: null,
|
488
|
+
sessionID: null
|
489
|
+
}
|
490
|
+
});
|
491
|
+
setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
|
492
|
+
window.localStorage.setItem(AGREE_POLICY, 'yes');
|
493
|
+
};
|
494
|
+
return (React.createElement("div", { className: 'consent-bg' },
|
495
|
+
React.createElement("div", { className: 'consent' },
|
496
|
+
React.createElement("div", { className: 'consent-col' },
|
497
|
+
React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
|
498
|
+
React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
|
499
|
+
React.createElement("div", { className: 'consent-col' },
|
500
|
+
React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
|
501
|
+
React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
|
502
|
+
};
|
503
|
+
var Consent$3 = React.memo(Consent$2);
|
504
|
+
|
441
505
|
const SxpDataSourceContext = React.createContext({
|
442
506
|
rtcList: [],
|
443
507
|
tagList: []
|
@@ -449,6 +513,7 @@ var DataSourceType;
|
|
449
513
|
const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
|
450
514
|
const DEFAULT_TAG = 'FOR U';
|
451
515
|
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 }) => {
|
516
|
+
var _a, _b, _c;
|
452
517
|
const [rtcList, setRtcList] = React.useState([]);
|
453
518
|
const [tagList, setTagList] = React.useState([]);
|
454
519
|
const [loading, setLoading] = React.useState(false);
|
@@ -515,10 +580,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
515
580
|
}, [bffDataSource]);
|
516
581
|
// 获取推荐视频数据
|
517
582
|
const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
518
|
-
var
|
583
|
+
var _d, _e, _f, _g, _h;
|
519
584
|
query = {
|
520
|
-
maxSize: (
|
521
|
-
defaultSize: (
|
585
|
+
maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
|
586
|
+
defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
|
522
587
|
'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
|
523
588
|
'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
|
524
589
|
hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
|
@@ -526,10 +591,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
526
591
|
themeTag: query === null || query === void 0 ? void 0 : query.themeTag
|
527
592
|
};
|
528
593
|
if (utmVal) {
|
529
|
-
const val = (
|
594
|
+
const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
|
530
595
|
const key = val.split('=')[0];
|
531
596
|
return UTM_KEYS.includes(key);
|
532
|
-
})) === null ||
|
597
|
+
})) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
|
533
598
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
534
599
|
}
|
535
600
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
|
@@ -541,7 +606,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
541
606
|
return result === null || result === void 0 ? void 0 : result.data;
|
542
607
|
}), [bffFetch, utmVal, maxSize, defaultSize]);
|
543
608
|
const loadVideos = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
544
|
-
var
|
609
|
+
var _j, _k;
|
545
610
|
if (rtcList.length <= 0) {
|
546
611
|
return;
|
547
612
|
}
|
@@ -551,8 +616,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
551
616
|
'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
|
552
617
|
themeTag: themeTag.current
|
553
618
|
});
|
554
|
-
setRtcList(rtcList.concat((
|
555
|
-
setCacheRtcList(cacheRtcList.concat((
|
619
|
+
setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
|
620
|
+
setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
|
556
621
|
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
557
622
|
const bffEventReport = React.useCallback(({ userInfo, eventInfo }) => {
|
558
623
|
// 关闭 BFF 事件上报
|
@@ -616,16 +681,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
616
681
|
}), [bffFetch]);
|
617
682
|
// 获取 Tag
|
618
683
|
const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
619
|
-
var
|
684
|
+
var _l, _m, _o, _p, _q;
|
620
685
|
if (!utmVal || !isShowTag)
|
621
686
|
return;
|
622
687
|
try {
|
623
|
-
const val = (
|
688
|
+
const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
|
624
689
|
const key = val.split('=')[0];
|
625
690
|
return UTM_KEYS.includes(key);
|
626
|
-
})) === null ||
|
691
|
+
})) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
|
627
692
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
628
|
-
setTagList((
|
693
|
+
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 : []);
|
629
694
|
}
|
630
695
|
catch (e) {
|
631
696
|
console.log('e', e);
|
@@ -676,8 +741,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
676
741
|
});
|
677
742
|
}, [bffEventReport]);
|
678
743
|
React.useEffect(() => {
|
679
|
-
|
680
|
-
|
744
|
+
if (!isShowConsent)
|
745
|
+
h5EnterLink();
|
746
|
+
}, [isShowConsent]);
|
681
747
|
React.useEffect(() => {
|
682
748
|
if (isShowConsent)
|
683
749
|
return;
|
@@ -760,13 +826,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
760
826
|
isShowConsent,
|
761
827
|
selectTag,
|
762
828
|
setSelectTag
|
763
|
-
} }, render({
|
829
|
+
} }, isShowConsent ? (React.createElement(Consent$3, 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({
|
764
830
|
rtcList,
|
765
831
|
mutateLike: bffMutateLike,
|
766
832
|
mutateUnlike: bffMutateUnlike,
|
767
833
|
submitForm: bffSubmitForm,
|
768
834
|
tagList
|
769
|
-
})));
|
835
|
+
}))));
|
770
836
|
};
|
771
837
|
var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
|
772
838
|
|
@@ -12729,10 +12795,10 @@ var settingRender = [
|
|
12729
12795
|
}
|
12730
12796
|
];
|
12731
12797
|
|
12732
|
-
const Consent$
|
12733
|
-
return React.createElement(Consent$
|
12798
|
+
const Consent$1 = (props) => {
|
12799
|
+
return React.createElement(Consent$1, Object.assign({}, props));
|
12734
12800
|
};
|
12735
|
-
var ConsentComponent = React.memo(Consent$
|
12801
|
+
var ConsentComponent = React.memo(Consent$1);
|
12736
12802
|
|
12737
12803
|
/*
|
12738
12804
|
* @Author: binruan@chatlabs.com
|
@@ -12742,7 +12808,7 @@ var ConsentComponent = React.memo(Consent$3);
|
|
12742
12808
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\material.tsx
|
12743
12809
|
*
|
12744
12810
|
*/
|
12745
|
-
const Consent
|
12811
|
+
const Consent = createMaterial(ConsentComponent, {
|
12746
12812
|
displayName: 'Consent',
|
12747
12813
|
icon: '',
|
12748
12814
|
category: 'base',
|
@@ -12777,7 +12843,7 @@ var _materials_ = /*#__PURE__*/Object.freeze({
|
|
12777
12843
|
CommodityDetailDiroNew: CommodityDetailDiroNew,
|
12778
12844
|
CommodityDiro: CommodityDiro,
|
12779
12845
|
CommodityDiroNew: CommodityDiroNew,
|
12780
|
-
Consent: Consent
|
12846
|
+
Consent: Consent,
|
12781
12847
|
HashTag: HashTag,
|
12782
12848
|
Link: Link,
|
12783
12849
|
MultiCommodity: MultiCommodity,
|
@@ -13506,84 +13572,20 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
|
|
13506
13572
|
};
|
13507
13573
|
var Tagbar$1 = React.memo(Tagbar);
|
13508
13574
|
|
13509
|
-
/*
|
13510
|
-
* @Author: binruan@chatlabs.com
|
13511
|
-
* @Date: 2024-06-13 15:16:53
|
13512
|
-
* @LastEditors: binruan@chatlabs.com
|
13513
|
-
* @LastEditTime: 2024-06-19 14:13:50
|
13514
|
-
* @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
|
13515
|
-
*
|
13516
|
-
*/
|
13517
|
-
const Consent = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
|
13518
|
-
const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
|
13519
|
-
const channelObj = React.useMemo(() => {
|
13520
|
-
const queryString = location.search.slice(1);
|
13521
|
-
const params = qs.parse(queryString.replace(/\+/g, '%2B'));
|
13522
|
-
for (const key in params) {
|
13523
|
-
params[key] = params[key].replace(/%2B/g, '+');
|
13524
|
-
}
|
13525
|
-
return params;
|
13526
|
-
}, []);
|
13527
|
-
const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
|
13528
|
-
React.useEffect(() => {
|
13529
|
-
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
13530
|
-
eventInfo: {
|
13531
|
-
eventSubject: 'privacyEnter',
|
13532
|
-
eventDescription: 'User enter privacy page',
|
13533
|
-
utmSource: getUtmValue('utm_source'),
|
13534
|
-
utmMedium: getUtmValue('utm_medium'),
|
13535
|
-
utmCampaign: getUtmValue('utm_campaign'),
|
13536
|
-
utmId: getUtmValue('utm_id'),
|
13537
|
-
utmContent: getUtmValue('utm_content'),
|
13538
|
-
clSource: getUtmValue('cl_source'),
|
13539
|
-
enterTime: `${Date.now()}`,
|
13540
|
-
enterUrl: window.location.href,
|
13541
|
-
rtc: null,
|
13542
|
-
requestId: null,
|
13543
|
-
sessionID: null
|
13544
|
-
}
|
13545
|
-
});
|
13546
|
-
}, []);
|
13547
|
-
const handleAgree = () => {
|
13548
|
-
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
13549
|
-
eventInfo: {
|
13550
|
-
eventSubject: 'userConsent',
|
13551
|
-
eventDescription: '用户授权【操作结果】',
|
13552
|
-
consentResult: '0',
|
13553
|
-
consentTags: '["系统运营"]',
|
13554
|
-
rtc: null,
|
13555
|
-
requestId: null,
|
13556
|
-
sessionID: null
|
13557
|
-
}
|
13558
|
-
});
|
13559
|
-
setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
|
13560
|
-
window.localStorage.setItem(AGREE_POLICY, 'yes');
|
13561
|
-
};
|
13562
|
-
return (React.createElement("div", { className: 'consent-bg' },
|
13563
|
-
React.createElement("div", { className: 'consent' },
|
13564
|
-
React.createElement("div", { className: 'consent-col' },
|
13565
|
-
React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
|
13566
|
-
React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
|
13567
|
-
React.createElement("div", { className: 'consent-col' },
|
13568
|
-
React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
|
13569
|
-
React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
|
13570
|
-
};
|
13571
|
-
var Consent$1 = React.memo(Consent);
|
13572
|
-
|
13573
13575
|
/*
|
13574
13576
|
* @Author: binruan@chatlabs.com
|
13575
13577
|
* @Date: 2024-01-15 19:03:09
|
13576
13578
|
* @LastEditors: binruan@chatlabs.com
|
13577
|
-
* @LastEditTime: 2024-06-20
|
13579
|
+
* @LastEditTime: 2024-06-20 15:54:53
|
13578
13580
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
13579
13581
|
*
|
13580
13582
|
*/
|
13581
13583
|
const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
|
13582
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
13584
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
13583
13585
|
const { schema } = useEditor();
|
13584
13586
|
const [activeIndex, setActiveIndex] = React.useState(0);
|
13585
13587
|
const viewImageStartTime = React.useRef(0);
|
13586
|
-
|
13588
|
+
React.useState(false);
|
13587
13589
|
const [isMuted, setIsMuted] = React.useState(true);
|
13588
13590
|
const viewTime = React.useRef();
|
13589
13591
|
const [isLoadMore, setIsLoadMore] = React.useState(false);
|
@@ -13596,21 +13598,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13596
13598
|
const isShowFingerTip = React.useMemo(() => {
|
13597
13599
|
return data.length > 0 && !loading && getFeUserId();
|
13598
13600
|
}, [data, loading]);
|
13599
|
-
|
13600
|
-
|
13601
|
-
|
13601
|
+
React.useEffect(() => {
|
13602
|
+
refreshFeSessionId();
|
13603
|
+
}, []);
|
13604
|
+
React.useEffect(() => {
|
13605
|
+
if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
|
13606
|
+
const now = new Date();
|
13607
|
+
viewTime.current = now;
|
13608
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
13609
|
+
eventName: 'PageView'
|
13610
|
+
});
|
13602
13611
|
}
|
13612
|
+
}, [data === null || data === void 0 ? void 0 : data.length]);
|
13613
|
+
const handleH5EnterLink = React.useCallback(() => {
|
13603
13614
|
refreshFeSessionId();
|
13604
|
-
|
13605
|
-
|
13606
|
-
|
13607
|
-
|
13615
|
+
h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
|
13616
|
+
if (data.length > 0) {
|
13617
|
+
const now = new Date();
|
13618
|
+
viewTime.current = now;
|
13619
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
13620
|
+
eventName: 'PageView'
|
13621
|
+
});
|
13608
13622
|
}
|
13609
|
-
|
13610
|
-
eventName: 'PageView'
|
13611
|
-
});
|
13612
|
-
setIsInit(true);
|
13613
|
-
}, [data.length, bffFbReport, h5EnterLink, isInit]);
|
13623
|
+
}, [data.length, bffFbReport, h5EnterLink]);
|
13614
13624
|
const firstRef = React.useRef();
|
13615
13625
|
React.useEffect(() => {
|
13616
13626
|
var _a, _b, _c, _d;
|
@@ -13638,10 +13648,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13638
13648
|
});
|
13639
13649
|
}
|
13640
13650
|
}, [videoRef, licenseUrl, data]);
|
13641
|
-
React.useEffect(() => {
|
13642
|
-
if (!isInit)
|
13643
|
-
handleH5EnterLink();
|
13644
|
-
}, [handleH5EnterLink, isInit]);
|
13645
13651
|
React.useEffect(() => {
|
13646
13652
|
var _a;
|
13647
13653
|
const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
|
@@ -13975,46 +13981,45 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13975
13981
|
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
|
13976
13982
|
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
|
13977
13983
|
return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
|
13978
|
-
|
13979
|
-
|
13980
|
-
|
13981
|
-
|
13982
|
-
|
13983
|
-
|
13984
|
-
|
13985
|
-
|
13986
|
-
|
13987
|
-
|
13988
|
-
|
13989
|
-
|
13990
|
-
|
13991
|
-
|
13992
|
-
|
13993
|
-
|
13994
|
-
|
13995
|
-
|
13996
|
-
|
13997
|
-
|
13998
|
-
|
13999
|
-
|
14000
|
-
if (
|
14001
|
-
|
14002
|
-
|
14003
|
-
|
14004
|
-
|
14005
|
-
});
|
14006
|
-
}
|
13984
|
+
waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
|
13985
|
+
setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
|
13986
|
+
} })),
|
13987
|
+
renderLogo,
|
13988
|
+
React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex }),
|
13989
|
+
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,
|
13990
|
+
React.createElement(Swiper, { style: {
|
13991
|
+
marginTop: tagHeight
|
13992
|
+
}, ref: swiperRef, onSlideChange: () => {
|
13993
|
+
swiperRef.current.swiper.allowTouchMove = false;
|
13994
|
+
setTimeout(() => {
|
13995
|
+
swiperRef.current.swiper.allowTouchMove = true;
|
13996
|
+
}, 500);
|
13997
|
+
}, onActiveIndexChange: (swiper) => {
|
13998
|
+
setActiveIndex(swiper.activeIndex);
|
13999
|
+
if (openHashtag)
|
14000
|
+
return;
|
14001
|
+
// 处理上滑下滑事件
|
14002
|
+
handleScrollEvent(swiper);
|
14003
|
+
if (waterFallData)
|
14004
|
+
return;
|
14005
|
+
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
14006
|
+
if (!isLoadMore) {
|
14007
|
+
setIsLoadMore(true);
|
14008
|
+
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
|
14009
|
+
setIsLoadMore(false);
|
14010
|
+
});
|
14007
14011
|
}
|
14008
|
-
}
|
14009
|
-
|
14010
|
-
|
14011
|
-
|
14012
|
-
|
14013
|
-
|
14014
|
-
|
14015
|
-
|
14016
|
-
|
14017
|
-
|
14012
|
+
}
|
14013
|
+
}, direction: 'vertical', height: height },
|
14014
|
+
React.createElement(ToggleButton$1, { style: {
|
14015
|
+
position: 'fixed',
|
14016
|
+
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',
|
14017
|
+
zIndex: 999,
|
14018
|
+
[(_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,
|
14019
|
+
[(_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
|
14020
|
+
}, 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 }),
|
14021
|
+
renderView),
|
14022
|
+
React.createElement(WaterFall$1, 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)),
|
14018
14023
|
React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
|
14019
14024
|
React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
|
14020
14025
|
backgroundColor: 'transparent',
|
@@ -14549,4 +14554,3 @@ exports.default = Pagebuilder;
|
|
14549
14554
|
exports.defaultSetting = defaultSetting;
|
14550
14555
|
exports.materials = _materials_;
|
14551
14556
|
exports.useEditorDataProvider = useEditorDataProvider;
|
14552
|
-
//# sourceMappingURL=index.cjs.map
|