pb-sxp-ui 1.16.9 → 1.16.11
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 +184 -133
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +184 -133
- 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 +184 -133
- 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/DiyPortalPreview/VideoWidget.js +10 -8
- package/es/core/components/SxpPageRender/LikeButton/index.js +17 -15
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/es/core/components/SxpPageRender/PictureGroup/index.js +41 -13
- package/es/core/components/SxpPageRender/VideoWidget/index.js +33 -44
- package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/es/core/components/SxpPageRender/index.js +53 -37
- package/es/core/context/SxpDataSourceProvider.js +22 -8
- package/es/core/hooks/useEventReport.js +6 -5
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +10 -8
- package/lib/core/components/SxpPageRender/LikeButton/index.js +17 -15
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +40 -12
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +33 -44
- package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/lib/core/components/SxpPageRender/index.js +53 -37
- package/lib/core/context/SxpDataSourceProvider.js +22 -8
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -622,6 +622,7 @@ const DEFAULT_TAG = 'FOR U';
|
|
622
622
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
|
623
623
|
var _a, _b, _c, _d, _e;
|
624
624
|
const [rtcList, setRtcList] = useState([]);
|
625
|
+
const [firstRtcList, setFirstRtcList] = useState([]);
|
625
626
|
const [tagList, setTagList] = useState([]);
|
626
627
|
const [loading, setLoading] = useState(true);
|
627
628
|
const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
|
@@ -792,6 +793,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
792
793
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
793
794
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
794
795
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
796
|
+
if (isDiyH5) {
|
797
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
798
|
+
}
|
795
799
|
}
|
796
800
|
const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
797
801
|
if (isNotNullList) {
|
@@ -817,27 +821,31 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
817
821
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag))
|
818
822
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
819
823
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
820
|
-
|
821
|
-
list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
|
822
|
-
const isNotNullList = (_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.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
824
|
+
const isNotNullList = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
823
825
|
if (!isNotNullList) {
|
824
826
|
setIsNoMoreData(true);
|
825
827
|
}
|
826
|
-
return Object.assign(Object.assign({}, result.data), { recList: list });
|
827
828
|
}
|
828
|
-
|
829
|
+
let list = [];
|
830
|
+
list = list.concat((_u = (_t = (_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.filter) === null || _t === void 0 ? void 0 : _t.call(_s, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _u !== void 0 ? _u : []);
|
831
|
+
return Object.assign(Object.assign({}, result.data), { recList: list });
|
829
832
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
830
833
|
const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
831
834
|
var _1, _2, _3, _4;
|
832
835
|
if (rtcList.length <= 0) {
|
833
836
|
return;
|
834
837
|
}
|
838
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
839
|
+
setRtcList(rtcList.concat(firstRtcList));
|
840
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
841
|
+
return;
|
842
|
+
}
|
835
843
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
836
844
|
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
837
845
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
838
846
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
839
847
|
return data;
|
840
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
848
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
841
849
|
const refreshFeSession = useCallback((enableReSid, event) => {
|
842
850
|
var _a, _b, _c, _d, _e;
|
843
851
|
let expire = false;
|
@@ -1064,7 +1072,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1064
1072
|
}
|
1065
1073
|
}), [bffFetch, utmVal]);
|
1066
1074
|
const ctaEvent = useCallback((eventInfo, rec, product, position) => {
|
1067
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
1075
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
|
1068
1076
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1069
1077
|
const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
|
1070
1078
|
let fromKName = '';
|
@@ -1082,7 +1090,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1082
1090
|
}
|
1083
1091
|
const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
|
1084
1092
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1085
|
-
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (
|
1093
|
+
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', sceneId: (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.scene) === null || _w === void 0 ? void 0 : _w.sceneId) !== null && _x !== void 0 ? _x : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_13 = (_10 = (_5 = (_1 = (_y = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.bindCta) === null || _4 === void 0 ? void 0 : _4.traceInfo) !== null && _5 !== void 0 ? _5 : (_9 = (_8 = (_7 = (_6 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _6 === void 0 ? void 0 : _6.bindProducts) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '', fromKName, fromKPage: (_14 = location === null || location === void 0 ? void 0 : location.href) !== null && _14 !== void 0 ? _14 : '', contentFormat })
|
1086
1094
|
});
|
1087
1095
|
}, [bffEventReport, isFromHashtag]);
|
1088
1096
|
const h5EnterLink = useCallback(() => {
|
@@ -1184,6 +1192,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1184
1192
|
}
|
1185
1193
|
setRtcList(list);
|
1186
1194
|
setCacheRtcList(list);
|
1195
|
+
if (isDiyH5) {
|
1196
|
+
setFirstRtcList(list);
|
1197
|
+
}
|
1187
1198
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1188
1199
|
if (channel) {
|
1189
1200
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1219,6 +1230,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1219
1230
|
}
|
1220
1231
|
setRtcList(list);
|
1221
1232
|
setCacheRtcList(list);
|
1233
|
+
if (isDiyH5) {
|
1234
|
+
setFirstRtcList(list);
|
1235
|
+
}
|
1222
1236
|
}
|
1223
1237
|
})
|
1224
1238
|
.finally(() => {
|
@@ -1743,14 +1757,14 @@ var settingRender$f = [
|
|
1743
1757
|
* @Author: binruan@chatlabs.com
|
1744
1758
|
* @Date: 2024-03-12 10:59:06
|
1745
1759
|
* @LastEditors: binruan@chatlabs.com
|
1746
|
-
* @LastEditTime:
|
1760
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
1747
1761
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1748
1762
|
*
|
1749
1763
|
*/
|
1750
1764
|
function useEventReport() {
|
1751
1765
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1752
1766
|
const jumpToWeb = useCallback((e, data, product, cta, position, traceInfo) => {
|
1753
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
|
1767
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
|
1754
1768
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1755
1769
|
if (i !== -1) {
|
1756
1770
|
return;
|
@@ -1783,11 +1797,11 @@ function useEventReport() {
|
|
1783
1797
|
contentFormat = 'image';
|
1784
1798
|
}
|
1785
1799
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1786
|
-
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '',
|
1800
|
+
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', sceneId: (_2 = (_1 = (_0 = data === null || data === void 0 ? void 0 : data.video) === null || _0 === void 0 ? void 0 : _0.scene) === null || _1 === void 0 ? void 0 : _1.sceneId) !== null && _2 !== void 0 ? _2 : '', ctatId: (_3 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _3 !== void 0 ? _3 : '', traceInfo: (_16 = (_13 = (_11 = (_7 = (_4 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProduct) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = data === null || data === void 0 ? void 0 : data.video) === null || _8 === void 0 ? void 0 : _8.bindProducts) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : (_12 = data === null || data === void 0 ? void 0 : data.product) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : (_15 = (_14 = data === null || data === void 0 ? void 0 : data.video) === null || _14 === void 0 ? void 0 : _14.bindCta) === null || _15 === void 0 ? void 0 : _15.traceInfo) !== null && _16 !== void 0 ? _16 : '' }, (contentFormat && { contentFormat }))
|
1787
1801
|
});
|
1788
1802
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1789
1803
|
const productView = useCallback((data, product, cta, viewTime, position) => {
|
1790
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
1804
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
1791
1805
|
let fromKName = '';
|
1792
1806
|
if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
|
1793
1807
|
fromKName = 'pdpPage';
|
@@ -1806,8 +1820,9 @@ function useEventReport() {
|
|
1806
1820
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
1807
1821
|
position: position + '',
|
1808
1822
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
1823
|
+
sceneId: (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
1809
1824
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
1810
|
-
traceInfo: (
|
1825
|
+
traceInfo: (_s = (_q = (_l = (_h = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _h !== void 0 ? _h : (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : (_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.video) === null || _m === void 0 ? void 0 : _m.bindProducts) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_r = data === null || data === void 0 ? void 0 : data.product) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : '',
|
1811
1826
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
1812
1827
|
eventSubject: 'productView',
|
1813
1828
|
eventDescription: 'User browsed the product'
|
@@ -15610,7 +15625,7 @@ function WaterfallList(_a) {
|
|
15610
15625
|
* @Author: binruan@chatlabs.com
|
15611
15626
|
* @Date: 2024-01-10 10:58:24
|
15612
15627
|
* @LastEditors: binruan@chatlabs.com
|
15613
|
-
* @LastEditTime: 2025-
|
15628
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
15614
15629
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15615
15630
|
*
|
15616
15631
|
*/
|
@@ -15648,7 +15663,7 @@ const WaterFall = (props) => {
|
|
15648
15663
|
}
|
15649
15664
|
}, [waterFallData]);
|
15650
15665
|
const reportTagsView = useCallback(() => {
|
15651
|
-
var _a, _b, _c, _d, _e, _f;
|
15666
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
15652
15667
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15653
15668
|
if (!rec)
|
15654
15669
|
return;
|
@@ -15668,9 +15683,10 @@ const WaterFall = (props) => {
|
|
15668
15683
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15669
15684
|
eventInfo: {
|
15670
15685
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15686
|
+
sceneId: (_g = (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
15671
15687
|
position: cacheActiveIndex + '',
|
15672
|
-
contentTags: JSON.stringify((
|
15673
|
-
traceInfo: (
|
15688
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
15689
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
15674
15690
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15675
15691
|
fromKName,
|
15676
15692
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17752,7 +17768,7 @@ const LikeButton = (_a) => {
|
|
17752
17768
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17753
17769
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17754
17770
|
const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17755
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17771
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
|
17756
17772
|
if (state) {
|
17757
17773
|
// 先设置状态
|
17758
17774
|
setState(false);
|
@@ -17762,11 +17778,12 @@ const LikeButton = (_a) => {
|
|
17762
17778
|
eventSubject: 'favoriteContentCanceled',
|
17763
17779
|
eventDescription: 'This content was unfavorite by the user',
|
17764
17780
|
contentId: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
|
17765
|
-
|
17766
|
-
|
17781
|
+
sceneId: (_k = (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.scene) === null || _j === void 0 ? void 0 : _j.sceneId) !== null && _k !== void 0 ? _k : '',
|
17782
|
+
contentName: (_m = (_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '',
|
17783
|
+
contentTags: JSON.stringify((_p = (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []),
|
17767
17784
|
position: position + '',
|
17768
|
-
contentFormat: ((
|
17769
|
-
traceInfo: (
|
17785
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
17786
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
17770
17787
|
}
|
17771
17788
|
});
|
17772
17789
|
// 如果接口调用失败,则回滚状态
|
@@ -17774,40 +17791,41 @@ const LikeButton = (_a) => {
|
|
17774
17791
|
setState(true);
|
17775
17792
|
}
|
17776
17793
|
else {
|
17777
|
-
const nRtcList = (
|
17794
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17778
17795
|
if (index === position) {
|
17779
17796
|
item.isCollected = false;
|
17780
17797
|
}
|
17781
17798
|
return item;
|
17782
|
-
})) !== null &&
|
17799
|
+
})) !== null && _s !== void 0 ? _s : [];
|
17783
17800
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17784
17801
|
}
|
17785
17802
|
}
|
17786
17803
|
else {
|
17787
17804
|
setState(true);
|
17788
|
-
const result = (
|
17805
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
17789
17806
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17790
17807
|
eventInfo: {
|
17791
17808
|
eventSubject: 'favoriteContent',
|
17792
17809
|
eventDescription: 'This content was favorite by the user',
|
17793
|
-
contentId: (
|
17794
|
-
|
17795
|
-
|
17810
|
+
contentId: (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.itemId) !== null && _v !== void 0 ? _v : '',
|
17811
|
+
sceneId: (_y = (_x = (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.scene) === null || _x === void 0 ? void 0 : _x.sceneId) !== null && _y !== void 0 ? _y : '',
|
17812
|
+
contentName: (_0 = (_z = recData === null || recData === void 0 ? void 0 : recData.video) === null || _z === void 0 ? void 0 : _z.title) !== null && _0 !== void 0 ? _0 : '',
|
17813
|
+
contentTags: JSON.stringify((_2 = (_1 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _1 === void 0 ? void 0 : _1.tags) !== null && _2 !== void 0 ? _2 : []),
|
17796
17814
|
position: position + '',
|
17797
|
-
contentFormat: ((
|
17798
|
-
traceInfo: (
|
17815
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
17816
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
17799
17817
|
}
|
17800
17818
|
});
|
17801
17819
|
if (!result) {
|
17802
17820
|
setState(false);
|
17803
17821
|
}
|
17804
17822
|
else {
|
17805
|
-
const nRtcList = (
|
17823
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17806
17824
|
if (index === position) {
|
17807
17825
|
item.isCollected = true;
|
17808
17826
|
}
|
17809
17827
|
return item;
|
17810
|
-
})) !== null &&
|
17828
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
17811
17829
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17812
17830
|
}
|
17813
17831
|
}
|
@@ -17910,6 +17928,24 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17910
17928
|
return;
|
17911
17929
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17912
17930
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17931
|
+
const handleEnd = () => {
|
17932
|
+
var _a, _b, _c, _d, _e, _f;
|
17933
|
+
if (!videoRef.current)
|
17934
|
+
return;
|
17935
|
+
if (isDiyH5) {
|
17936
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
17937
|
+
if (!loopPlayRef.current)
|
17938
|
+
return;
|
17939
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) ;
|
17940
|
+
else {
|
17941
|
+
const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
|
17942
|
+
(_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(i + 1);
|
17943
|
+
}
|
17944
|
+
}
|
17945
|
+
else {
|
17946
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
17947
|
+
}
|
17948
|
+
};
|
17913
17949
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
17914
17950
|
const handlePlaying = useCallback(() => {
|
17915
17951
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -17918,7 +17954,7 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17918
17954
|
setIsLoadFinish(true);
|
17919
17955
|
}, []);
|
17920
17956
|
const handleStartPlay = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17921
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
17957
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
17922
17958
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17923
17959
|
return;
|
17924
17960
|
setIsPauseVideo(false);
|
@@ -17929,16 +17965,11 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17929
17965
|
const videoCurrentTime = ((_h = (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) !== null && _h !== void 0 ? _h : 0).toFixed(2);
|
17930
17966
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17931
17967
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17932
|
-
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
|
17968
|
+
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', sceneId: (_o = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.scene) === null || _m === void 0 ? void 0 : _m.sceneId) !== null && _o !== void 0 ? _o : '', contentName: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []), position: index + '', contentFormat: 'video', traceInfo: (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
|
17933
17969
|
});
|
17934
17970
|
isFirstPlayRef.current = false;
|
17935
17971
|
}
|
17936
17972
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17937
|
-
const setCurrentTimeByStartTime = useCallback(() => {
|
17938
|
-
if (isDiyH5) {
|
17939
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17940
|
-
}
|
17941
|
-
}, []);
|
17942
17973
|
const handLoadeddata = useCallback(() => {
|
17943
17974
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17944
17975
|
return;
|
@@ -17963,13 +17994,12 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17963
17994
|
const handleLoadedmetadata = useCallback(() => {
|
17964
17995
|
if (!videoRef.current)
|
17965
17996
|
return;
|
17966
|
-
setCurrentTimeByStartTime();
|
17967
17997
|
loadedTimeRef.current = new Date();
|
17968
17998
|
handleStartPlay();
|
17969
17999
|
handLoadeddata();
|
17970
18000
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
17971
18001
|
const handleClickVideo = useCallback((type) => () => {
|
17972
|
-
var _a, _b, _c, _d, _e
|
18002
|
+
var _a, _b, _c, _d, _e;
|
17973
18003
|
if (!videoRef.current)
|
17974
18004
|
return;
|
17975
18005
|
if (!isLoadFinish)
|
@@ -17990,20 +18020,17 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17990
18020
|
break;
|
17991
18021
|
default:
|
17992
18022
|
if (isPause) {
|
17993
|
-
|
17994
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17995
|
-
}
|
17996
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18023
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
17997
18024
|
}
|
17998
18025
|
else {
|
17999
|
-
(
|
18026
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
18000
18027
|
}
|
18001
18028
|
setIsPauseVideo(!isPause);
|
18002
18029
|
break;
|
18003
18030
|
}
|
18004
18031
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18005
18032
|
const handlePause = useCallback(() => {
|
18006
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18033
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
18007
18034
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18008
18035
|
return;
|
18009
18036
|
if (activeIndex !== index)
|
@@ -18019,14 +18046,15 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18019
18046
|
eventSubject: 'playOverVideo',
|
18020
18047
|
eventDescription: 'User finished playing the video',
|
18021
18048
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
18022
|
-
|
18049
|
+
sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
|
18050
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
18023
18051
|
endTime: videoCurrentTime,
|
18024
18052
|
videoDuration,
|
18025
18053
|
playDuration,
|
18026
|
-
contentTags: JSON.stringify((
|
18054
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
18027
18055
|
position: index + '',
|
18028
18056
|
contentFormat: 'video',
|
18029
|
-
traceInfo: (
|
18057
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
18030
18058
|
}
|
18031
18059
|
});
|
18032
18060
|
}
|
@@ -18034,27 +18062,8 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18034
18062
|
const handleWaiting = useCallback(() => {
|
18035
18063
|
setWaiting(true);
|
18036
18064
|
}, []);
|
18037
|
-
const handleTimeUpload = () => {
|
18038
|
-
if (!videoRef.current || !isDiyH5)
|
18039
|
-
return;
|
18040
|
-
setTimeout(() => {
|
18041
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18042
|
-
if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
|
18043
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18044
|
-
if (!loopPlayRef.current)
|
18045
|
-
return;
|
18046
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18047
|
-
(_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
|
18048
|
-
}
|
18049
|
-
else {
|
18050
|
-
const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
|
18051
|
-
(_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
|
18052
|
-
}
|
18053
|
-
}
|
18054
|
-
});
|
18055
|
-
};
|
18056
18065
|
useEffect(() => {
|
18057
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18066
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18058
18067
|
if (!isActive)
|
18059
18068
|
return;
|
18060
18069
|
const videoSrc = videoUrl;
|
@@ -18075,7 +18084,6 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18075
18084
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18076
18085
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18077
18086
|
var _a;
|
18078
|
-
setCurrentTimeByStartTime();
|
18079
18087
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18080
18088
|
});
|
18081
18089
|
}
|
@@ -18089,12 +18097,11 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18089
18097
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18090
18098
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18091
18099
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18092
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18100
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
18093
18101
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18094
18102
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18095
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18096
18103
|
return () => {
|
18097
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18104
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18098
18105
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18099
18106
|
if (!isPause)
|
18100
18107
|
handlePause();
|
@@ -18106,10 +18113,9 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18106
18113
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18107
18114
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18108
18115
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18109
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18116
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
18110
18117
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18111
18118
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18112
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18113
18119
|
};
|
18114
18120
|
}, [isActive]);
|
18115
18121
|
useEffect(() => {
|
@@ -18320,19 +18326,46 @@ const Picture = (props) => {
|
|
18320
18326
|
}, onLoad: onShowFirstImage }))));
|
18321
18327
|
};
|
18322
18328
|
|
18323
|
-
const PictureGroup$4 = ({ imgUrls,
|
18329
|
+
const PictureGroup$4 = forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
18324
18330
|
var _a, _b;
|
18325
18331
|
const { isActive } = useSwiperSlide();
|
18326
|
-
const { sxpParameter, openHashtag } = useSxpDataSource();
|
18332
|
+
const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
|
18327
18333
|
const [isLoad, setIsLoad] = useState(false);
|
18328
18334
|
const [imgInfo, setImgInfo] = useState();
|
18329
18335
|
const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
|
18330
|
-
const
|
18336
|
+
const imgsSwiperRef = useRef();
|
18331
18337
|
const isFirstPlayRef = useRef(true);
|
18338
|
+
const loopPlayRef = useRef(true);
|
18332
18339
|
const initTime = new Date();
|
18340
|
+
useImperativeHandle(ref, () => {
|
18341
|
+
return {
|
18342
|
+
setLoopPlay(v) {
|
18343
|
+
loopPlayRef.current = v;
|
18344
|
+
}
|
18345
|
+
};
|
18346
|
+
});
|
18347
|
+
useEffect(() => {
|
18348
|
+
let timerId;
|
18349
|
+
if (isLoad && isActive && isDiyH5) {
|
18350
|
+
timerId = setTimeout(() => {
|
18351
|
+
var _a, _b, _c, _d;
|
18352
|
+
if (!loopPlayRef.current)
|
18353
|
+
return;
|
18354
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) ;
|
18355
|
+
else {
|
18356
|
+
const i = (_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.activeIndex;
|
18357
|
+
(_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.slideTo(i + 1);
|
18358
|
+
}
|
18359
|
+
}, 3000);
|
18360
|
+
}
|
18361
|
+
return () => {
|
18362
|
+
if (timerId)
|
18363
|
+
clearTimeout(timerId);
|
18364
|
+
};
|
18365
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef]);
|
18333
18366
|
useEffect(() => {
|
18334
18367
|
if (isLoad && isActive) {
|
18335
|
-
(
|
18368
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
18336
18369
|
if (openHashtag) {
|
18337
18370
|
onViewImageEndEvent(rec);
|
18338
18371
|
}
|
@@ -18342,7 +18375,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18342
18375
|
}
|
18343
18376
|
}
|
18344
18377
|
else {
|
18345
|
-
(
|
18378
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
18346
18379
|
}
|
18347
18380
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18348
18381
|
const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18369,13 +18402,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18369
18402
|
};
|
18370
18403
|
}, [isActive, imgInfo]);
|
18371
18404
|
const handleMouseEnter = useCallback(() => {
|
18372
|
-
if (
|
18373
|
-
|
18405
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18406
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
18374
18407
|
}
|
18375
18408
|
}, []);
|
18376
18409
|
const handleMouseLeave = useCallback(() => {
|
18377
|
-
if (
|
18378
|
-
|
18410
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18411
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
18379
18412
|
}
|
18380
18413
|
}, []);
|
18381
18414
|
const handleSlideChange = useCallback((swiper) => {
|
@@ -18396,7 +18429,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18396
18429
|
enabled: true
|
18397
18430
|
}
|
18398
18431
|
}
|
18399
|
-
: {}), { loop: true, ref:
|
18432
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18400
18433
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18401
18434
|
fontSize: '14px'
|
18402
18435
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18413,7 +18446,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18413
18446
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18414
18447
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18415
18448
|
}))));
|
18416
|
-
};
|
18449
|
+
});
|
18417
18450
|
var PictureGroup$5 = memo(PictureGroup$4);
|
18418
18451
|
|
18419
18452
|
/*
|
@@ -18693,7 +18726,7 @@ var NavBack$1 = memo(NavBack);
|
|
18693
18726
|
* @Author: binruan@chatlabs.com
|
18694
18727
|
* @Date: 2024-03-20 10:27:31
|
18695
18728
|
* @LastEditors: binruan@chatlabs.com
|
18696
|
-
* @LastEditTime: 2025-05-
|
18729
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
18697
18730
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18698
18731
|
*
|
18699
18732
|
*/
|
@@ -18713,6 +18746,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18713
18746
|
const skipLinkRef = useRef(false);
|
18714
18747
|
const [pageNum, setPageNum] = useState(2);
|
18715
18748
|
const videoWidgetRef = useRef(null);
|
18749
|
+
const pictureGroupRef = useRef(null);
|
18716
18750
|
const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
|
18717
18751
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18718
18752
|
const isShowFingerTip = useMemo(() => {
|
@@ -18760,7 +18794,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18760
18794
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18761
18795
|
}, [data, ctaType, swiperRef]);
|
18762
18796
|
const handleSessionCompleted = useCallback((fk) => {
|
18763
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18797
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
18764
18798
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18765
18799
|
let fromKName = '';
|
18766
18800
|
if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
|
@@ -18787,12 +18821,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18787
18821
|
eventSubject: 'sessionCompleted',
|
18788
18822
|
eventDescription: 'Session completed',
|
18789
18823
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18790
|
-
|
18824
|
+
sceneId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.scene) === null || _p === void 0 ? void 0 : _p.sceneId) !== null && _q !== void 0 ? _q : '',
|
18825
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18791
18826
|
position: activeIndex + '',
|
18792
18827
|
fromKName: fk || fromKName,
|
18793
18828
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18794
|
-
ctatId: (
|
18795
|
-
traceInfo: (
|
18829
|
+
ctatId: (_u = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.bindCta) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '',
|
18830
|
+
traceInfo: (_y = (_w = (_v = item === null || item === void 0 ? void 0 : item.video) === null || _v === void 0 ? void 0 : _v.traceInfo) !== null && _w !== void 0 ? _w : (_x = item === null || item === void 0 ? void 0 : item.product) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : ''
|
18796
18831
|
}
|
18797
18832
|
});
|
18798
18833
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -18851,8 +18886,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18851
18886
|
refreshFeSession
|
18852
18887
|
]);
|
18853
18888
|
const handleSessionExpire = useCallback(debounce(() => {
|
18854
|
-
var _a;
|
18889
|
+
var _a, _b;
|
18855
18890
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
18891
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
18856
18892
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18857
18893
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18858
18894
|
useEffect(() => {
|
@@ -18922,18 +18958,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18922
18958
|
return null;
|
18923
18959
|
}, [globalConfig, activeIndex, visList]);
|
18924
18960
|
const renderContent = useCallback((rec, index) => {
|
18925
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18961
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
18926
18962
|
if (rec === 'organic menu') {
|
18927
18963
|
return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
|
18928
18964
|
}
|
18929
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
18965
|
+
if (((_h = (_g = rec.video) === null || _g === void 0 ? void 0 : _g.scene) === null || _h === void 0 ? void 0 : _h.mediaUrl) || ((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.url)) {
|
18930
18966
|
return (React.createElement(VideoWidget$5, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
|
18931
18967
|
}
|
18932
|
-
if ((
|
18933
|
-
return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
18968
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
18969
|
+
return (React.createElement(PictureGroup$5, Object.assign({ data: data }, (activeIndex === index && { ref: pictureGroupRef }), { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, swiperRef: swiperRef })));
|
18934
18970
|
}
|
18935
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
18936
|
-
return (
|
18971
|
+
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _l === void 0 ? void 0 : _l.length) > 0) {
|
18972
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
18937
18973
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
18938
18974
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
18939
18975
|
const Component = withBindDataSource(t);
|
@@ -18971,7 +19007,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18971
19007
|
};
|
18972
19008
|
}, [isShowMore]);
|
18973
19009
|
const renderBottom = useCallback((rec, index) => {
|
18974
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19010
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
18975
19011
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
18976
19012
|
let cta = null;
|
18977
19013
|
if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
|
@@ -18980,24 +19016,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18980
19016
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
18981
19017
|
cta = '商品CTA';
|
18982
19018
|
}
|
19019
|
+
else if (tempMap && ((_d = Object.keys(tempMap)) === null || _d === void 0 ? void 0 : _d.includes('服务CTA')) && ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId)) {
|
19020
|
+
cta = '服务CTA';
|
19021
|
+
}
|
18983
19022
|
else {
|
18984
|
-
cta = (
|
19023
|
+
cta = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) === null || _h === void 0 ? void 0 : _h.itemId;
|
18985
19024
|
}
|
18986
19025
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
18987
19026
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
18988
19027
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
18989
|
-
((
|
19028
|
+
((_j = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _j === void 0 ? void 0 : _j.includes((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type));
|
18990
19029
|
return (React.createElement(React.Fragment, null,
|
18991
19030
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
18992
|
-
((
|
18993
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19031
|
+
((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
19032
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _m !== void 0 ? _m : 40}px` } },
|
18994
19033
|
React.createElement(Nudge, { nudge: nudge }),
|
18995
19034
|
((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) && !isNineProduct ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
18996
19035
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
18997
19036
|
React.createElement("div", null,
|
18998
|
-
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (
|
19037
|
+
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.title) !== null && _p !== void 0 ? _p : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
|
18999
19038
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19000
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19039
|
+
React.createElement(Hashtag$1, { index: activeIndex, tags: (_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.hashTags) !== null && _r !== void 0 ? _r : [], itemId: (_s = rec === null || rec === void 0 ? void 0 : rec.video) === null || _s === void 0 ? void 0 : _s.itemId, itemType: ((_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
19001
19040
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19002
19041
|
}
|
19003
19042
|
return null;
|
@@ -19036,7 +19075,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19036
19075
|
return null;
|
19037
19076
|
}, [globalConfig, waterFallData]);
|
19038
19077
|
const handleViewImageStartEnd = (item) => {
|
19039
|
-
var _a, _b, _c, _d, _e, _f;
|
19078
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19040
19079
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
|
19041
19080
|
const endTime = Date.now();
|
19042
19081
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19045,10 +19084,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19045
19084
|
eventSubject: 'viewImageCarouselEnd',
|
19046
19085
|
eventDescription: 'User end view the image carousel',
|
19047
19086
|
contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
|
19048
|
-
|
19087
|
+
sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
19088
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19049
19089
|
imageEndTime: `${endTime}`,
|
19050
19090
|
playDuration: `${duration}`,
|
19051
|
-
contentTags: JSON.stringify((
|
19091
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19052
19092
|
position: activeIndex + '',
|
19053
19093
|
contentFormat: 'image',
|
19054
19094
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19057,7 +19097,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19057
19097
|
}
|
19058
19098
|
};
|
19059
19099
|
const handleSlideSkip = (item, position) => {
|
19060
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19100
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
|
19061
19101
|
if (isPreview || waterFallData)
|
19062
19102
|
return;
|
19063
19103
|
const t = new Date() - curTime.current;
|
@@ -19083,7 +19123,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19083
19123
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19084
19124
|
position: position + '',
|
19085
19125
|
contentId: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.itemId) !== null && _t !== void 0 ? _t : '',
|
19086
|
-
|
19126
|
+
sceneId: (_w = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.scene) === null || _v === void 0 ? void 0 : _v.sceneId) !== null && _w !== void 0 ? _w : '',
|
19127
|
+
traceInfo: (_0 = (_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_z = item === null || item === void 0 ? void 0 : item.product) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : '',
|
19087
19128
|
contentFormat
|
19088
19129
|
}
|
19089
19130
|
});
|
@@ -19093,7 +19134,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19093
19134
|
}
|
19094
19135
|
};
|
19095
19136
|
const handleScrollEvent = (swiper) => {
|
19096
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19137
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
|
19097
19138
|
const item = data[swiper.previousIndex];
|
19098
19139
|
if (!item)
|
19099
19140
|
return;
|
@@ -19110,11 +19151,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19110
19151
|
eventSubject: 'scrollDown',
|
19111
19152
|
eventDescription: 'User scroll down',
|
19112
19153
|
contentId: (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.itemId) !== null && _e !== void 0 ? _e : '',
|
19113
|
-
|
19154
|
+
sceneId: (_h = (_g = (_f = item === null || item === void 0 ? void 0 : item.video) === null || _f === void 0 ? void 0 : _f.scene) === null || _g === void 0 ? void 0 : _g.sceneId) !== null && _h !== void 0 ? _h : '',
|
19155
|
+
productId: (_k = (_j = item === null || item === void 0 ? void 0 : item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
|
19114
19156
|
requestId: null,
|
19115
|
-
traceInfo: (
|
19157
|
+
traceInfo: (_p = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
|
19116
19158
|
contentFormat,
|
19117
|
-
position: ((
|
19159
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
19118
19160
|
}
|
19119
19161
|
});
|
19120
19162
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19126,12 +19168,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19126
19168
|
eventInfo: {
|
19127
19169
|
eventSubject: 'scrollUp',
|
19128
19170
|
eventDescription: 'User scroll up',
|
19129
|
-
contentId: (
|
19130
|
-
|
19171
|
+
contentId: (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
|
19172
|
+
sceneId: (_v = (_u = (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.scene) === null || _u === void 0 ? void 0 : _u.sceneId) !== null && _v !== void 0 ? _v : '',
|
19173
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19131
19174
|
requestId: null,
|
19132
|
-
traceInfo: (
|
19175
|
+
traceInfo: (_1 = (_z = (_y = item === null || item === void 0 ? void 0 : item.video) === null || _y === void 0 ? void 0 : _y.traceInfo) !== null && _z !== void 0 ? _z : (_0 = item === null || item === void 0 ? void 0 : item.product) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : '',
|
19133
19176
|
contentFormat,
|
19134
|
-
position: ((
|
19177
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
19135
19178
|
}
|
19136
19179
|
});
|
19137
19180
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19157,7 +19200,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19157
19200
|
}
|
19158
19201
|
}, [openHashtag, data, activeIndex]);
|
19159
19202
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19160
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19203
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
19161
19204
|
const item = data[activeIndex];
|
19162
19205
|
// 如果是图片集则上报事件
|
19163
19206
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
|
@@ -19168,9 +19211,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19168
19211
|
eventSubject: 'viewImageCarouselStart',
|
19169
19212
|
eventDescription: 'User start view the image carousel',
|
19170
19213
|
contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
|
19171
|
-
|
19214
|
+
sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
19215
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19172
19216
|
imageStartTime: `${startTime}`,
|
19173
|
-
contentTags: JSON.stringify((
|
19217
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19174
19218
|
position: activeIndex + '',
|
19175
19219
|
contentFormat: 'image',
|
19176
19220
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19180,11 +19224,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19180
19224
|
if (enableCapi) {
|
19181
19225
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19182
19226
|
eventName: 'ViewContent',
|
19183
|
-
product: (
|
19227
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
19184
19228
|
});
|
19185
19229
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19186
19230
|
eventName: 'PageView',
|
19187
|
-
product: (
|
19231
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
19188
19232
|
});
|
19189
19233
|
}
|
19190
19234
|
}
|
@@ -19276,15 +19320,20 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19276
19320
|
swiperRef.current.swiper.allowTouchMove = true;
|
19277
19321
|
}, 500);
|
19278
19322
|
}, onActiveIndexChange: (swiper) => {
|
19323
|
+
var _a, _b;
|
19279
19324
|
setActiveIndex(swiper.activeIndex);
|
19280
19325
|
if (openHashtag)
|
19281
19326
|
return;
|
19282
19327
|
// 处理上滑下滑事件
|
19283
19328
|
handleScrollEvent(swiper);
|
19284
|
-
if (waterFallData || isEditor
|
19329
|
+
if (waterFallData || isEditor)
|
19285
19330
|
return;
|
19286
19331
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19287
19332
|
if (!isLoadMore) {
|
19333
|
+
if (isDiyH5) {
|
19334
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19335
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19336
|
+
}
|
19288
19337
|
setIsLoadMore(true);
|
19289
19338
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19290
19339
|
var _a;
|
@@ -19337,7 +19386,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19337
19386
|
}, []);
|
19338
19387
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19339
19388
|
const handlePlaying = useCallback(() => {
|
19340
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19389
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19341
19390
|
setIsPauseVideo(false);
|
19342
19391
|
const item = data[index];
|
19343
19392
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19350,14 +19399,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19350
19399
|
eventSubject: 'playVideo',
|
19351
19400
|
eventDescription: 'User played the video',
|
19352
19401
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
19353
|
-
|
19402
|
+
sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
|
19403
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
19354
19404
|
playType,
|
19355
19405
|
startTime: videoCurrentTime,
|
19356
19406
|
videoDuration,
|
19357
|
-
contentTags: JSON.stringify((
|
19407
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
19358
19408
|
position: index + '',
|
19359
19409
|
contentFormat: 'video',
|
19360
|
-
traceInfo: (
|
19410
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19361
19411
|
}
|
19362
19412
|
});
|
19363
19413
|
setIsFirstPlay(false);
|
@@ -19396,7 +19446,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19396
19446
|
}
|
19397
19447
|
}, [isLoadFinish]);
|
19398
19448
|
const onPause = useCallback(() => {
|
19399
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19449
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19400
19450
|
const item = data[index];
|
19401
19451
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19402
19452
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19407,14 +19457,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19407
19457
|
eventSubject: 'playOverVideo',
|
19408
19458
|
eventDescription: 'User finished playing the video',
|
19409
19459
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
19410
|
-
|
19460
|
+
sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
|
19461
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
19411
19462
|
endTime: videoCurrentTime,
|
19412
19463
|
videoDuration,
|
19413
19464
|
playDuration,
|
19414
|
-
contentTags: JSON.stringify((
|
19465
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
19415
19466
|
position: index + '',
|
19416
19467
|
contentFormat: 'video',
|
19417
|
-
traceInfo: (
|
19468
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19418
19469
|
}
|
19419
19470
|
});
|
19420
19471
|
}
|