pb-sxp-ui 1.15.13-alpha.2 → 1.15.13-alpha.4
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 +146 -111
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +144 -109
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +146 -111
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +2 -0
- package/es/core/components/DiyStoryPreview/VideoWidget.js +6 -4
- package/es/core/components/DiyStoryPreview/index.d.ts +3 -0
- package/es/core/components/DiyStoryPreview/index.js +36 -24
- package/es/core/components/SxpPageCore/index.d.ts +1 -0
- package/es/core/components/SxpPageCore/index.js +7 -7
- package/es/core/context/EditorContext.js +1 -1
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/es/core/context/SxpDataSourceProvider.js +23 -24
- package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +2 -0
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +6 -4
- package/lib/core/components/DiyStoryPreview/index.d.ts +3 -0
- package/lib/core/components/DiyStoryPreview/index.js +34 -22
- package/lib/core/components/SxpPageCore/index.d.ts +1 -0
- package/lib/core/components/SxpPageCore/index.js +7 -7
- package/lib/core/context/EditorContext.js +1 -1
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/lib/core/context/SxpDataSourceProvider.js +23 -24
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -429,39 +429,6 @@ const Pagebuilder = {
|
|
429
429
|
})
|
430
430
|
};
|
431
431
|
|
432
|
-
function useEditor() {
|
433
|
-
return useContext(EditorContext);
|
434
|
-
}
|
435
|
-
|
436
|
-
function useDataSource() {
|
437
|
-
return useContext(DataSourceContext);
|
438
|
-
}
|
439
|
-
|
440
|
-
const feRealSessionIdKey = 'feRealSessionIdKey';
|
441
|
-
const generateFeSessionId = () => {
|
442
|
-
const uid = getUid(); // 32位长度
|
443
|
-
const timestamp = Date.now(); // 13位长度
|
444
|
-
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
445
|
-
return result;
|
446
|
-
};
|
447
|
-
// 生成或者获取sessionID
|
448
|
-
const storeAndLoadFeSessionId = () => {
|
449
|
-
let result = getFeSessionId();
|
450
|
-
if (!result) {
|
451
|
-
result = generateFeSessionId();
|
452
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
453
|
-
}
|
454
|
-
return result;
|
455
|
-
};
|
456
|
-
const refreshFeSessionId = () => {
|
457
|
-
const result = generateFeSessionId();
|
458
|
-
window.localStorage.setItem(feRealSessionIdKey, result);
|
459
|
-
};
|
460
|
-
// 获取 sessionID
|
461
|
-
const getFeSessionId = () => {
|
462
|
-
return window.localStorage.getItem(feRealSessionIdKey);
|
463
|
-
};
|
464
|
-
|
465
432
|
/*
|
466
433
|
* @Author: binruan@chatlabs.com
|
467
434
|
* @Date: 2024-03-20 10:27:31
|
@@ -513,6 +480,39 @@ const setUserConsentResult = () => {
|
|
513
480
|
window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
|
514
481
|
};
|
515
482
|
|
483
|
+
function useEditor() {
|
484
|
+
return useContext(EditorContext);
|
485
|
+
}
|
486
|
+
|
487
|
+
function useDataSource() {
|
488
|
+
return useContext(DataSourceContext);
|
489
|
+
}
|
490
|
+
|
491
|
+
const feRealSessionIdKey = 'feRealSessionIdKey';
|
492
|
+
const generateFeSessionId = () => {
|
493
|
+
const uid = getUid(); // 32位长度
|
494
|
+
const timestamp = Date.now(); // 13位长度
|
495
|
+
const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
|
496
|
+
return result;
|
497
|
+
};
|
498
|
+
// 生成或者获取sessionID
|
499
|
+
const storeAndLoadFeSessionId = () => {
|
500
|
+
let result = getFeSessionId();
|
501
|
+
if (!result) {
|
502
|
+
result = generateFeSessionId();
|
503
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
504
|
+
}
|
505
|
+
return result;
|
506
|
+
};
|
507
|
+
const refreshFeSessionId = () => {
|
508
|
+
const result = generateFeSessionId();
|
509
|
+
window.localStorage.setItem(feRealSessionIdKey, result);
|
510
|
+
};
|
511
|
+
// 获取 sessionID
|
512
|
+
const getFeSessionId = () => {
|
513
|
+
return window.localStorage.getItem(feRealSessionIdKey);
|
514
|
+
};
|
515
|
+
|
516
516
|
/*
|
517
517
|
* @Author: binruan@chatlabs.com
|
518
518
|
* @Date: 2024-03-20 10:27:31
|
@@ -757,17 +757,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
757
757
|
}, [bffDataSource]);
|
758
758
|
// 获取推荐视频数据
|
759
759
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
760
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
761
|
-
query = Object.assign({ maxSize:
|
760
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
761
|
+
query = Object.assign({ maxSize: 50, defaultSize: 50, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
|
762
762
|
if (channel) {
|
763
763
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
764
764
|
}
|
765
765
|
else if (utmVal) {
|
766
|
-
const val = (
|
767
|
-
var _a, _b;
|
766
|
+
const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
|
768
767
|
const key = val.split('=')[0];
|
769
|
-
return
|
770
|
-
})) === null ||
|
768
|
+
return key;
|
769
|
+
})) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
|
771
770
|
if (val)
|
772
771
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
773
772
|
}
|
@@ -781,19 +780,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
781
780
|
let list = [];
|
782
781
|
let result = null;
|
783
782
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
784
|
-
var _v, _w, _x, _y
|
783
|
+
var _t, _u, _v, _w, _x, _y;
|
785
784
|
query.pageNum = pageNum;
|
786
785
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
787
786
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
788
787
|
return undefined;
|
789
788
|
}
|
790
789
|
setLoading(false);
|
791
|
-
list = list.concat((
|
790
|
+
list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
|
792
791
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
793
792
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
794
793
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
795
794
|
}
|
796
|
-
const isNotNullList = (
|
795
|
+
const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
797
796
|
if (isNotNullList) {
|
798
797
|
pageNum = pageNum + 1;
|
799
798
|
yield recurveRecList(query);
|
@@ -801,13 +800,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
801
800
|
});
|
802
801
|
yield recurveRecList(query);
|
803
802
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
804
|
-
setCurReqInfo({ rtc: (
|
803
|
+
setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
|
805
804
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
806
805
|
}
|
807
806
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
808
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
807
|
+
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
|
809
808
|
}
|
810
|
-
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('
|
809
|
+
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
|
811
810
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
812
811
|
return undefined;
|
813
812
|
}
|
@@ -815,8 +814,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
815
814
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
816
815
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
817
816
|
let list = [];
|
818
|
-
list = list.concat((
|
819
|
-
const isNotNullList = (
|
817
|
+
list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
|
818
|
+
const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
820
819
|
if (!isNotNullList) {
|
821
820
|
setIsNoMoreData(true);
|
822
821
|
}
|
@@ -825,12 +824,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
825
824
|
return result === null || result === void 0 ? void 0 : result.data;
|
826
825
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
827
826
|
const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
828
|
-
var
|
827
|
+
var _z, _0, _1, _2;
|
829
828
|
if (rtcList.length <= 0) {
|
830
829
|
return;
|
831
830
|
}
|
832
831
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
833
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
832
|
+
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
834
833
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
835
834
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
836
835
|
return data;
|
@@ -995,18 +994,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
995
994
|
}), [bffFetch]);
|
996
995
|
// 获取 Tag
|
997
996
|
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
998
|
-
var _5, _6, _7, _8, _9, _10
|
999
|
-
const isShowTag = !!((
|
997
|
+
var _3, _4, _5, _6, _7, _8, _9, _10;
|
998
|
+
const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
|
1000
999
|
if (!utmVal || !isShowTag)
|
1001
1000
|
return;
|
1002
1001
|
try {
|
1003
|
-
const val = (
|
1002
|
+
const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
|
1004
1003
|
var _a, _b;
|
1005
1004
|
const key = val.split('=')[0];
|
1006
1005
|
return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
|
1007
|
-
})) === null ||
|
1006
|
+
})) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
|
1008
1007
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
1009
|
-
setTagList((
|
1008
|
+
setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
|
1010
1009
|
}
|
1011
1010
|
catch (e) {
|
1012
1011
|
console.log('e', e);
|
@@ -1066,10 +1065,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1066
1065
|
});
|
1067
1066
|
}, [bffEventReport]);
|
1068
1067
|
const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
1069
|
-
var
|
1068
|
+
var _11, _12;
|
1070
1069
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
1071
|
-
setChatlabsId((
|
1072
|
-
return ((
|
1070
|
+
setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
|
1071
|
+
return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
|
1073
1072
|
}), [bffFetch]);
|
1074
1073
|
const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
1075
1074
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -18299,7 +18298,7 @@ function withBindDataSource(Component) {
|
|
18299
18298
|
* @Author: binruan@chatlabs.com
|
18300
18299
|
* @Date: 2023-12-26 16:11:34
|
18301
18300
|
* @LastEditors: binruan@chatlabs.com
|
18302
|
-
* @LastEditTime: 2025-03-
|
18301
|
+
* @LastEditTime: 2025-03-28 14:46:08
|
18303
18302
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18304
18303
|
*
|
18305
18304
|
*/
|
@@ -19064,7 +19063,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19064
19063
|
React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
|
19065
19064
|
openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0 } })))))));
|
19066
19065
|
};
|
19067
|
-
var
|
19066
|
+
var index$2 = memo(SxpPageRender);
|
19068
19067
|
|
19069
19068
|
const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
|
19070
19069
|
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
@@ -19428,7 +19427,7 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
|
|
19428
19427
|
return renderView(rec, index);
|
19429
19428
|
})));
|
19430
19429
|
};
|
19431
|
-
var index$
|
19430
|
+
var index$1 = memo(DiyPortalPreview);
|
19432
19431
|
|
19433
19432
|
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
|
19434
19433
|
const { isActive } = useSwiperSlide();
|
@@ -19461,7 +19460,7 @@ const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, s
|
|
19461
19460
|
};
|
19462
19461
|
var PictureGroup$1 = memo(PictureGroup);
|
19463
19462
|
|
19464
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
|
19463
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
|
19465
19464
|
const { isActive } = useSwiperSlide();
|
19466
19465
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
19467
19466
|
const videoRef = useRef(null);
|
@@ -19482,7 +19481,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19482
19481
|
var _a;
|
19483
19482
|
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
19484
19483
|
}, []);
|
19485
|
-
useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19484
|
+
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19486
19485
|
const handlePlaying = useCallback(() => {
|
19487
19486
|
var _a, _b, _c, _d, _e, _f;
|
19488
19487
|
setIsPauseVideo(false);
|
@@ -19520,6 +19519,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19520
19519
|
break;
|
19521
19520
|
default:
|
19522
19521
|
if (isPause) {
|
19522
|
+
// if (videoRef?.current?.currentTime >= rec?.endTime) {
|
19523
|
+
// videoRef.current.currentTime = rec?.startTime;
|
19524
|
+
// }
|
19523
19525
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
19524
19526
|
}
|
19525
19527
|
else {
|
@@ -19568,6 +19570,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19568
19570
|
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
19569
19571
|
}
|
19570
19572
|
}, []);
|
19573
|
+
// useEffect(() => {
|
19574
|
+
// if (!videoRef.current || !isActive) return;
|
19575
|
+
// if (isPlay) {
|
19576
|
+
// videoRef.current?.play();
|
19577
|
+
// } else {
|
19578
|
+
// videoRef.current?.pause();
|
19579
|
+
// }
|
19580
|
+
// }, [isPlay, isActive]);
|
19571
19581
|
const handlePause = () => {
|
19572
19582
|
var _a, _b, _c, _d, _e, _f;
|
19573
19583
|
if (!videoRef.current || !isActive)
|
@@ -19582,15 +19592,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19582
19592
|
(_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
|
19583
19593
|
}
|
19584
19594
|
};
|
19585
|
-
// useEffect(() => {
|
19586
|
-
// if (!videoRef.current) return;
|
19587
|
-
// if (!isActive) return;
|
19588
|
-
// if (!loopPlay) {
|
19589
|
-
// videoRef?.current?.pause();
|
19590
|
-
// } else {
|
19591
|
-
// videoRef?.current?.play();
|
19592
|
-
// }
|
19593
|
-
// }, [loopPlay, isActive]);
|
19594
19595
|
useEffect(() => {
|
19595
19596
|
var _a, _b, _c;
|
19596
19597
|
if (!isActive)
|
@@ -19637,7 +19638,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19637
19638
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
19638
19639
|
};
|
19639
19640
|
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
|
19640
|
-
useMemo(() => {
|
19641
|
+
const renderPoster = useMemo(() => {
|
19641
19642
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
19642
19643
|
return null;
|
19643
19644
|
}
|
@@ -19654,14 +19655,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
19654
19655
|
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
19655
19656
|
return null;
|
19656
19657
|
}
|
19658
|
+
// const renderLoading = useMemo(() => {
|
19659
|
+
// if (!waiting || !isLoadFinish) return;
|
19660
|
+
// return (
|
19661
|
+
// <img
|
19662
|
+
// style={{
|
19663
|
+
// position: 'absolute',
|
19664
|
+
// top: '50%',
|
19665
|
+
// left: 0,
|
19666
|
+
// right: 0,
|
19667
|
+
// transform: 'translateY(-100%)',
|
19668
|
+
// margin: 'auto',
|
19669
|
+
// width: '50px',
|
19670
|
+
// height: '50px',
|
19671
|
+
// objectFit: 'contain'
|
19672
|
+
// }}
|
19673
|
+
// src={loading_gif}
|
19674
|
+
// alt='placeholder image'
|
19675
|
+
// />
|
19676
|
+
// );
|
19677
|
+
// }, [waiting, isLoadFinish]);
|
19657
19678
|
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
19658
19679
|
position: 'relative',
|
19659
19680
|
width: '100%',
|
19660
19681
|
height,
|
19661
|
-
overflow: 'hidden'
|
19662
|
-
pointerEvents: 'none'
|
19682
|
+
overflow: 'hidden'
|
19663
19683
|
} },
|
19664
|
-
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })
|
19684
|
+
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
19685
|
+
renderPoster,
|
19686
|
+
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
19665
19687
|
};
|
19666
19688
|
var VideoWidget$1 = memo(VideoWidget);
|
19667
19689
|
|
@@ -19669,16 +19691,10 @@ var VideoWidget$1 = memo(VideoWidget);
|
|
19669
19691
|
* @Author: binruan@chatlabs.com
|
19670
19692
|
* @Date: 2025-03-25 13:54:27
|
19671
19693
|
* @LastEditors: binruan@chatlabs.com
|
19672
|
-
* @LastEditTime: 2025-03-
|
19694
|
+
* @LastEditTime: 2025-03-28 18:08:02
|
19673
19695
|
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
19674
19696
|
*
|
19675
19697
|
*/
|
19676
|
-
const RESOLVER$1 = {};
|
19677
|
-
Object.values(_materials_).forEach((v) => {
|
19678
|
-
RESOLVER$1[v.extend.type] = v;
|
19679
|
-
});
|
19680
|
-
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19681
|
-
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19682
19698
|
const recData = {
|
19683
19699
|
position: 0,
|
19684
19700
|
isCollected: false,
|
@@ -19857,7 +19873,14 @@ const recData = {
|
|
19857
19873
|
]
|
19858
19874
|
}
|
19859
19875
|
};
|
19860
|
-
const
|
19876
|
+
const RESOLVER$1 = {};
|
19877
|
+
Object.values(_materials_).forEach((v) => {
|
19878
|
+
RESOLVER$1[v.extend.type] = v;
|
19879
|
+
});
|
19880
|
+
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
19881
|
+
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
19882
|
+
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
|
19883
|
+
const [loopPlaySwiper, setLooPlaySwiper] = useState(loopPlay);
|
19861
19884
|
const swiperRef = useRef(null);
|
19862
19885
|
useMemo(() => {
|
19863
19886
|
let minusHeight = 0;
|
@@ -19883,10 +19906,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
19883
19906
|
const renderContent = (rec, index) => {
|
19884
19907
|
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
19885
19908
|
if (isVideo) {
|
19886
|
-
return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay:
|
19909
|
+
return (React.createElement(VideoWidget$1, { isPlay: isPlay, rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
|
19887
19910
|
}
|
19888
19911
|
else {
|
19889
|
-
return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay:
|
19912
|
+
return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
|
19890
19913
|
}
|
19891
19914
|
};
|
19892
19915
|
useMemo(() => {
|
@@ -19919,7 +19942,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
19919
19942
|
width: '100%',
|
19920
19943
|
willChange: 'transform',
|
19921
19944
|
zIndex: 2,
|
19922
|
-
pointerEvents
|
19945
|
+
pointerEvents
|
19923
19946
|
} })),
|
19924
19947
|
React.createElement("div", { style: {
|
19925
19948
|
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
@@ -20003,6 +20026,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
20003
20026
|
var _a, _b, _c, _d;
|
20004
20027
|
const rec = cloneDeep(recData);
|
20005
20028
|
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
20029
|
+
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
20006
20030
|
return (React.createElement("div", { style: { position: 'relative' } },
|
20007
20031
|
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
20008
20032
|
renderBottom(rec, index),
|
@@ -20024,28 +20048,47 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
20024
20048
|
(_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
|
20025
20049
|
}, [activeIndex]);
|
20026
20050
|
useEffect(() => {
|
20027
|
-
var _a, _b;
|
20028
20051
|
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
20029
20052
|
return;
|
20030
|
-
|
20053
|
+
// swiperRef?.current?.swiper?.slideTo(0);
|
20054
|
+
setLooPlaySwiper(loopPlay);
|
20031
20055
|
}, [loopPlay]);
|
20056
|
+
const handleSessionExpire = useCallback(debounce(() => {
|
20057
|
+
setLooPlaySwiper(false);
|
20058
|
+
}, 1000), []);
|
20059
|
+
useEffect(() => {
|
20060
|
+
const events = ['touchstart', 'touchcancel'];
|
20061
|
+
events.forEach((event) => {
|
20062
|
+
window.addEventListener(event, handleSessionExpire);
|
20063
|
+
});
|
20064
|
+
return () => {
|
20065
|
+
events.forEach((event) => {
|
20066
|
+
window.removeEventListener(event, handleSessionExpire);
|
20067
|
+
});
|
20068
|
+
};
|
20069
|
+
}, [handleSessionExpire]);
|
20032
20070
|
return (React.createElement("div", { id: 'sxp-render',
|
20033
20071
|
// className={style['clc-sxp-container']}
|
20034
|
-
style: { height: containerHeight, position: 'relative', pointerEvents
|
20035
|
-
React.createElement(Swiper, { ref: swiperRef, allowTouchMove:
|
20072
|
+
style: { height: containerHeight, position: 'relative', pointerEvents } },
|
20073
|
+
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
20074
|
+
swiperRef.current.swiper.allowTouchMove = false;
|
20075
|
+
setTimeout(() => {
|
20076
|
+
swiperRef.current.swiper.allowTouchMove = true;
|
20077
|
+
}, 500);
|
20078
|
+
}, onActiveIndexChange: (swiper) => {
|
20036
20079
|
// setActiveIndex(swiper.activeIndex);
|
20037
20080
|
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
20038
20081
|
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
20039
20082
|
return renderView(rec, index);
|
20040
20083
|
}))));
|
20041
20084
|
};
|
20042
|
-
var
|
20085
|
+
var DiyStoryPreview$1 = memo(DiyStoryPreview);
|
20043
20086
|
|
20044
20087
|
/*
|
20045
20088
|
* @Author: binruan@chatlabs.com
|
20046
20089
|
* @Date: 2023-10-31 10:56:01
|
20047
20090
|
* @LastEditors: binruan@chatlabs.com
|
20048
|
-
* @LastEditTime:
|
20091
|
+
* @LastEditTime: 2025-03-28 17:15:47
|
20049
20092
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
|
20050
20093
|
*
|
20051
20094
|
*/
|
@@ -20137,17 +20180,9 @@ const Popup = () => {
|
|
20137
20180
|
|
20138
20181
|
/*
|
20139
20182
|
* @Author: binruan@chatlabs.com
|
20140
|
-
* @Date: 2024-
|
20141
|
-
* @LastEditors: binruan@chatlabs.com
|
20142
|
-
* @LastEditTime: 2025-02-24 15:47:44
|
20143
|
-
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20144
|
-
*
|
20145
|
-
*/
|
20146
|
-
/*
|
20147
|
-
* @Author: binruan@chatlabs.com
|
20148
|
-
* @Date: 2023-11-24 15:58:00
|
20183
|
+
* @Date: 2024-03-20 10:27:31
|
20149
20184
|
* @LastEditors: binruan@chatlabs.com
|
20150
|
-
* @LastEditTime:
|
20185
|
+
* @LastEditTime: 2025-03-28 16:55:21
|
20151
20186
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
|
20152
20187
|
*
|
20153
20188
|
*/
|
@@ -20155,20 +20190,20 @@ const RESOLVER = {};
|
|
20155
20190
|
Object.values(_materials_).forEach((v) => {
|
20156
20191
|
RESOLVER[v.extend.type] = v;
|
20157
20192
|
});
|
20158
|
-
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
|
20159
|
-
var _a, _b, _c, _d, _e, _f;
|
20193
|
+
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
|
20194
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
20160
20195
|
const utmVal = useMemo(() => {
|
20161
20196
|
var _a;
|
20162
20197
|
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('?', '') : '';
|
20163
20198
|
return searchParams;
|
20164
20199
|
}, []);
|
20165
|
-
const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
|
20200
|
+
const [_schema, setSchema] = useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
|
20166
20201
|
const [channel, setChannel] = useState();
|
20167
20202
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
20168
|
-
React.createElement(SxpDataSourceProvider$1, { 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: (
|
20169
|
-
var _a;
|
20203
|
+
React.createElement(SxpDataSourceProvider$1, { 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: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
|
20204
|
+
var _a, _b;
|
20170
20205
|
return (React.createElement(React.Fragment, null,
|
20171
|
-
React.createElement(
|
20206
|
+
React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
|
20172
20207
|
React.createElement(Popup, null)));
|
20173
20208
|
} })));
|
20174
20209
|
};
|
@@ -20182,5 +20217,5 @@ var index = memo(SxpPageCore);
|
|
20182
20217
|
* @FilePath: \pb-sxp-ui\src\index.ts
|
20183
20218
|
*/
|
20184
20219
|
|
20185
|
-
export { index$
|
20220
|
+
export { index$1 as DiyPortalPreview, DiyStoryPreview$1 as DiyStoryPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, index$2 as SxpPageRender, index$3 as core, Pagebuilder as default, _materials_ as materials, useEditorDataProvider };
|
20186
20221
|
//# sourceMappingURL=index.js.map
|