pb-sxp-ui 1.16.18 → 1.16.20
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 +186 -218
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +186 -218
- 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 +186 -218
- 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 +8 -10
- package/es/core/components/SxpPageRender/LikeButton/index.js +15 -17
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
- package/es/core/components/SxpPageRender/PictureGroup/index.js +13 -39
- package/es/core/components/SxpPageRender/VideoWidget/index.js +45 -32
- package/es/core/components/SxpPageRender/WaterFall/index.js +3 -4
- package/es/core/components/SxpPageRender/index.js +37 -53
- package/es/core/context/SxpDataSourceProvider.d.ts +0 -1
- package/es/core/context/SxpDataSourceProvider.js +59 -53
- package/es/core/hooks/useEventReport.js +5 -6
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +8 -10
- package/lib/core/components/SxpPageRender/LikeButton/index.js +15 -17
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +12 -38
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +45 -32
- package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -4
- package/lib/core/components/SxpPageRender/index.js +37 -53
- package/lib/core/context/SxpDataSourceProvider.d.ts +0 -1
- package/lib/core/context/SxpDataSourceProvider.js +59 -53
- package/lib/core/hooks/useEventReport.js +5 -6
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
@@ -637,7 +637,6 @@
|
|
637
637
|
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 }) => {
|
638
638
|
var _a, _b, _c, _d, _e;
|
639
639
|
const [rtcList, setRtcList] = React.useState([]);
|
640
|
-
const [firstRtcList, setFirstRtcList] = React.useState([]);
|
641
640
|
const [tagList, setTagList] = React.useState([]);
|
642
641
|
const [loading, setLoading] = React.useState(true);
|
643
642
|
const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
|
@@ -731,7 +730,7 @@
|
|
731
730
|
}, [bffDataSource]);
|
732
731
|
// bff API 请求方法
|
733
732
|
const bffFetch = React.useCallback((path, options, isBota = true) => {
|
734
|
-
var _a
|
733
|
+
var _a;
|
735
734
|
if (!bffDataSource)
|
736
735
|
return;
|
737
736
|
const url = bffDataSource.url;
|
@@ -745,7 +744,7 @@
|
|
745
744
|
val.split('=')[1];
|
746
745
|
});
|
747
746
|
return window
|
748
|
-
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId
|
747
|
+
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
|
749
748
|
? JSON.stringify({
|
750
749
|
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
751
750
|
})
|
@@ -880,50 +879,66 @@
|
|
880
879
|
console.error('解析请求URL失败:', error);
|
881
880
|
return _originalFetch.apply(this, arguments_1);
|
882
881
|
}
|
883
|
-
// 非GA4请求直接放行
|
884
|
-
if (!url.includes('https://www.google-analytics.com/g/collect')) {
|
885
|
-
return _originalFetch.apply(this, arguments_1);
|
886
|
-
}
|
887
|
-
// 检查是否是 GA4 收集端点
|
888
882
|
try {
|
889
883
|
// 1. 先执行原始请求
|
890
884
|
const response = _originalFetch.apply(this, arguments_1);
|
891
|
-
|
892
|
-
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
|
902
|
-
|
903
|
-
|
904
|
-
|
905
|
-
return [];
|
885
|
+
if (url.includes('https://i.giesswein.com/nb-collector')) {
|
886
|
+
if ((init === null || init === void 0 ? void 0 : init.method) === 'POST' && typeof (init === null || init === void 0 ? void 0 : init.body) === 'string') {
|
887
|
+
try {
|
888
|
+
const payload = JSON.parse(init.body);
|
889
|
+
if (payload && Array.isArray(payload.data)) {
|
890
|
+
payload.data.forEach((item) => {
|
891
|
+
if (item && item.e) {
|
892
|
+
bffCollectEvent({
|
893
|
+
eventName: item.e,
|
894
|
+
eventSource: 'Northbeam Pixel'
|
895
|
+
});
|
896
|
+
}
|
897
|
+
});
|
898
|
+
}
|
906
899
|
}
|
907
|
-
|
908
|
-
|
909
|
-
let match;
|
910
|
-
while ((match = regex.exec(queryString)) !== null) {
|
911
|
-
matches.push(decodeURIComponent(match[1]));
|
900
|
+
catch (e) {
|
901
|
+
console.error('Failed to parse Northbeam event', e);
|
912
902
|
}
|
913
|
-
return matches;
|
914
903
|
}
|
915
|
-
|
916
|
-
|
904
|
+
}
|
905
|
+
// 检查是否是 GA4 收集端点
|
906
|
+
if (url.includes('https://www.google-analytics.com/g/collect')) {
|
907
|
+
const urlObj = new URL(url);
|
908
|
+
const params = Object.fromEntries(urlObj.searchParams.entries());
|
909
|
+
const body = (_a = arguments_1[1]) === null || _a === void 0 ? void 0 : _a.body;
|
910
|
+
if (params === null || params === void 0 ? void 0 : params.en) {
|
917
911
|
bffCollectEvent({
|
918
|
-
eventName: en,
|
912
|
+
eventName: params === null || params === void 0 ? void 0 : params.en,
|
919
913
|
eventSource: 'Google Analytics'
|
920
914
|
});
|
921
|
-
}
|
915
|
+
}
|
916
|
+
else if (body) {
|
917
|
+
function extractAllEnValuesSplit(queryString) {
|
918
|
+
if (typeof queryString !== 'string') {
|
919
|
+
return [];
|
920
|
+
}
|
921
|
+
const matches = [];
|
922
|
+
const regex = /en=([^&\r\n]*)/g;
|
923
|
+
let match;
|
924
|
+
while ((match = regex.exec(queryString)) !== null) {
|
925
|
+
matches.push(decodeURIComponent(match[1]));
|
926
|
+
}
|
927
|
+
return matches;
|
928
|
+
}
|
929
|
+
const enValues = extractAllEnValuesSplit(body);
|
930
|
+
enValues === null || enValues === void 0 ? void 0 : enValues.forEach((en) => {
|
931
|
+
bffCollectEvent({
|
932
|
+
eventName: en,
|
933
|
+
eventSource: 'Google Analytics'
|
934
|
+
});
|
935
|
+
});
|
936
|
+
}
|
922
937
|
}
|
923
938
|
return response;
|
924
939
|
}
|
925
940
|
catch (error) {
|
926
|
-
console.error(
|
941
|
+
console.error(error);
|
927
942
|
throw error;
|
928
943
|
}
|
929
944
|
});
|
@@ -989,9 +1004,6 @@
|
|
989
1004
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
990
1005
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
991
1006
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
992
|
-
if (isDiyH5) {
|
993
|
-
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
994
|
-
}
|
995
1007
|
}
|
996
1008
|
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));
|
997
1009
|
if (isNotNullList) {
|
@@ -1031,17 +1043,12 @@
|
|
1031
1043
|
if (rtcList.length <= 0) {
|
1032
1044
|
return;
|
1033
1045
|
}
|
1034
|
-
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
1035
|
-
setRtcList(rtcList.concat(firstRtcList));
|
1036
|
-
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
1037
|
-
return;
|
1038
|
-
}
|
1039
1046
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
1040
1047
|
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 })));
|
1041
1048
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
1042
1049
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
1043
1050
|
return data;
|
1044
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList
|
1051
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
1045
1052
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
1046
1053
|
var _a, _b, _c, _d, _e;
|
1047
1054
|
let expire = false;
|
@@ -1171,7 +1178,7 @@
|
|
1171
1178
|
return jsonParams;
|
1172
1179
|
}, [fakeUserId]);
|
1173
1180
|
const bffFbReport = React.useCallback(({ eventName, product }) => {
|
1174
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
1181
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
1175
1182
|
if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
|
1176
1183
|
return;
|
1177
1184
|
}
|
@@ -1218,18 +1225,21 @@
|
|
1218
1225
|
if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
|
1219
1226
|
window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(snapchatPixelEventParamsJson, product));
|
1220
1227
|
}
|
1221
|
-
|
1228
|
+
if (eventName === 'PageView' && typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' && typeof ((_f = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _f === void 0 ? void 0 : _f.trackPageView) === 'function') {
|
1229
|
+
window === null || window === void 0 ? void 0 : window.Northbeam.trackPageView();
|
1230
|
+
}
|
1231
|
+
const converApiEventParamsJson = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _g === void 0 ? void 0 : _g[eventName];
|
1222
1232
|
if (enabledMetaConversionApi && converApiEventParamsJson) {
|
1223
1233
|
const body = getEventParamsByJson(converApiEventParamsJson, product);
|
1224
1234
|
const params = {};
|
1225
1235
|
const queryString = location.search.slice(1);
|
1226
|
-
(
|
1236
|
+
(_h = splitUrlParams(queryString)) === null || _h === void 0 ? void 0 : _h.forEach((val) => {
|
1227
1237
|
const key = val.split('=')[0];
|
1228
1238
|
const value = val.split('=')[1];
|
1229
1239
|
params[key] = value;
|
1230
1240
|
});
|
1231
1241
|
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
1232
|
-
bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(
|
1242
|
+
bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_j = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _j === void 0 ? void 0 : _j['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
|
1233
1243
|
method: 'POST',
|
1234
1244
|
body,
|
1235
1245
|
type: 'beacon'
|
@@ -1268,7 +1278,7 @@
|
|
1268
1278
|
}
|
1269
1279
|
}), [bffFetch, utmVal]);
|
1270
1280
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
1271
|
-
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
|
1281
|
+
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;
|
1272
1282
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1273
1283
|
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);
|
1274
1284
|
let fromKName = '';
|
@@ -1286,7 +1296,7 @@
|
|
1286
1296
|
}
|
1287
1297
|
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;
|
1288
1298
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1289
|
-
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 : '',
|
1299
|
+
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: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
|
1290
1300
|
});
|
1291
1301
|
}, [bffEventReport, isFromHashtag]);
|
1292
1302
|
const h5EnterLink = React.useCallback(() => {
|
@@ -1388,9 +1398,6 @@
|
|
1388
1398
|
}
|
1389
1399
|
setRtcList(list);
|
1390
1400
|
setCacheRtcList(list);
|
1391
|
-
if (isDiyH5) {
|
1392
|
-
setFirstRtcList(list);
|
1393
|
-
}
|
1394
1401
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1395
1402
|
if (channel) {
|
1396
1403
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1426,9 +1433,6 @@
|
|
1426
1433
|
}
|
1427
1434
|
setRtcList(list);
|
1428
1435
|
setCacheRtcList(list);
|
1429
|
-
if (isDiyH5) {
|
1430
|
-
setFirstRtcList(list);
|
1431
|
-
}
|
1432
1436
|
}
|
1433
1437
|
})
|
1434
1438
|
.finally(() => {
|
@@ -1492,8 +1496,7 @@
|
|
1492
1496
|
refreshFeSession,
|
1493
1497
|
getAccount,
|
1494
1498
|
accountSonsent,
|
1495
|
-
isDiyH5
|
1496
|
-
firstRtcList
|
1499
|
+
isDiyH5
|
1497
1500
|
} }, isShowConsent ? (React.createElement(Consent$4, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
|
1498
1501
|
rtcList,
|
1499
1502
|
mutateLike: bffMutateLike,
|
@@ -1954,14 +1957,14 @@
|
|
1954
1957
|
* @Author: binruan@chatlabs.com
|
1955
1958
|
* @Date: 2024-03-12 10:59:06
|
1956
1959
|
* @LastEditors: binruan@chatlabs.com
|
1957
|
-
* @LastEditTime:
|
1960
|
+
* @LastEditTime: 2024-11-28 11:17:16
|
1958
1961
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1959
1962
|
*
|
1960
1963
|
*/
|
1961
1964
|
function useEventReport() {
|
1962
1965
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1963
1966
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
1964
|
-
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
|
1967
|
+
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;
|
1965
1968
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1966
1969
|
if (i !== -1) {
|
1967
1970
|
return;
|
@@ -1994,11 +1997,11 @@
|
|
1994
1997
|
contentFormat = 'image';
|
1995
1998
|
}
|
1996
1999
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1997
|
-
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 : '',
|
2000
|
+
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 : '', ctatId: (_0 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _0 !== void 0 ? _0 : '', traceInfo: (_13 = (_10 = (_8 = (_4 = (_1 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _1 !== void 0 ? _1 : (_3 = (_2 = data === null || data === void 0 ? void 0 : data.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProducts) === null || _6 === void 0 ? void 0 : _6[0]) === null || _7 === void 0 ? void 0 : _7.traceInfo) !== null && _8 !== void 0 ? _8 : (_9 = data === null || data === void 0 ? void 0 : data.product) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = data === null || data === void 0 ? void 0 : data.video) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '' }, (contentFormat && { contentFormat }))
|
1998
2001
|
});
|
1999
2002
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
2000
2003
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
2001
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p
|
2004
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
2002
2005
|
let fromKName = '';
|
2003
2006
|
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))) {
|
2004
2007
|
fromKName = 'pdpPage';
|
@@ -2017,9 +2020,8 @@
|
|
2017
2020
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
2018
2021
|
position: position + '',
|
2019
2022
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
2020
|
-
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 : '',
|
2021
2023
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
2022
|
-
traceInfo: (
|
2024
|
+
traceInfo: (_p = (_m = (_h = (_e = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _e !== void 0 ? _e : (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.traceInfo) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
|
2023
2025
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
2024
2026
|
eventSubject: 'productView',
|
2025
2027
|
eventDescription: 'User browsed the product'
|
@@ -15834,7 +15836,7 @@ Made in Italy` })));
|
|
15834
15836
|
* @Author: binruan@chatlabs.com
|
15835
15837
|
* @Date: 2024-01-10 10:58:24
|
15836
15838
|
* @LastEditors: binruan@chatlabs.com
|
15837
|
-
* @LastEditTime: 2025-
|
15839
|
+
* @LastEditTime: 2025-02-28 10:00:31
|
15838
15840
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15839
15841
|
*
|
15840
15842
|
*/
|
@@ -15872,7 +15874,7 @@ Made in Italy` })));
|
|
15872
15874
|
}
|
15873
15875
|
}, [waterFallData]);
|
15874
15876
|
const reportTagsView = React.useCallback(() => {
|
15875
|
-
var _a, _b, _c, _d, _e, _f
|
15877
|
+
var _a, _b, _c, _d, _e, _f;
|
15876
15878
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15877
15879
|
if (!rec)
|
15878
15880
|
return;
|
@@ -15892,10 +15894,9 @@ Made in Italy` })));
|
|
15892
15894
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15893
15895
|
eventInfo: {
|
15894
15896
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15895
|
-
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 : '',
|
15896
15897
|
position: cacheActiveIndex + '',
|
15897
|
-
contentTags: JSON.stringify((
|
15898
|
-
traceInfo: (
|
15898
|
+
contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
|
15899
|
+
traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
|
15899
15900
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15900
15901
|
fromKName,
|
15901
15902
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17977,7 +17978,7 @@ Made in Italy` })));
|
|
17977
17978
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17978
17979
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17979
17980
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17980
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z
|
17981
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17981
17982
|
if (state) {
|
17982
17983
|
// 先设置状态
|
17983
17984
|
setState(false);
|
@@ -17987,12 +17988,11 @@ Made in Italy` })));
|
|
17987
17988
|
eventSubject: 'favoriteContentCanceled',
|
17988
17989
|
eventDescription: 'This content was unfavorite by the user',
|
17989
17990
|
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 : '',
|
17990
|
-
|
17991
|
-
|
17992
|
-
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 : []),
|
17991
|
+
contentName: (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '',
|
17992
|
+
contentTags: JSON.stringify((_l = (_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.tags) !== null && _l !== void 0 ? _l : []),
|
17993
17993
|
position: position + '',
|
17994
|
-
contentFormat: ((
|
17995
|
-
traceInfo: (
|
17994
|
+
contentFormat: ((_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.url) ? 'video' : 'image',
|
17995
|
+
traceInfo: (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
17996
17996
|
}
|
17997
17997
|
});
|
17998
17998
|
// 如果接口调用失败,则回滚状态
|
@@ -18000,41 +18000,40 @@ Made in Italy` })));
|
|
18000
18000
|
setState(true);
|
18001
18001
|
}
|
18002
18002
|
else {
|
18003
|
-
const nRtcList = (
|
18003
|
+
const nRtcList = (_p = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
18004
18004
|
if (index === position) {
|
18005
18005
|
item.isCollected = false;
|
18006
18006
|
}
|
18007
18007
|
return item;
|
18008
|
-
})) !== null &&
|
18008
|
+
})) !== null && _p !== void 0 ? _p : [];
|
18009
18009
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
18010
18010
|
}
|
18011
18011
|
}
|
18012
18012
|
else {
|
18013
18013
|
setState(true);
|
18014
|
-
const result = (
|
18014
|
+
const result = (_q = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _q !== void 0 ? _q : false;
|
18015
18015
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
18016
18016
|
eventInfo: {
|
18017
18017
|
eventSubject: 'favoriteContent',
|
18018
18018
|
eventDescription: 'This content was favorite by the user',
|
18019
|
-
contentId: (
|
18020
|
-
|
18021
|
-
|
18022
|
-
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 : []),
|
18019
|
+
contentId: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
|
18020
|
+
contentName: (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.title) !== null && _u !== void 0 ? _u : '',
|
18021
|
+
contentTags: JSON.stringify((_w = (_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.tags) !== null && _w !== void 0 ? _w : []),
|
18023
18022
|
position: position + '',
|
18024
|
-
contentFormat: ((
|
18025
|
-
traceInfo: (
|
18023
|
+
contentFormat: ((_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.url) ? 'video' : 'image',
|
18024
|
+
traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
|
18026
18025
|
}
|
18027
18026
|
});
|
18028
18027
|
if (!result) {
|
18029
18028
|
setState(false);
|
18030
18029
|
}
|
18031
18030
|
else {
|
18032
|
-
const nRtcList = (
|
18031
|
+
const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
18033
18032
|
if (index === position) {
|
18034
18033
|
item.isCollected = true;
|
18035
18034
|
}
|
18036
18035
|
return item;
|
18037
|
-
})) !== null &&
|
18036
|
+
})) !== null && _z !== void 0 ? _z : [];
|
18038
18037
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
18039
18038
|
}
|
18040
18039
|
}
|
@@ -18071,7 +18070,7 @@ Made in Italy` })));
|
|
18071
18070
|
const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
18072
18071
|
var _a, _b;
|
18073
18072
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
18074
|
-
const { bffEventReport, sxpParameter,
|
18073
|
+
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
18075
18074
|
const videoStartTime = React.useRef(0);
|
18076
18075
|
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
18077
18076
|
const { isActive } = useSwiperSlide();
|
@@ -18137,23 +18136,6 @@ Made in Italy` })));
|
|
18137
18136
|
return;
|
18138
18137
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18139
18138
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18140
|
-
const handleEnd = () => {
|
18141
|
-
var _a, _b, _c, _d, _e, _f;
|
18142
|
-
if (!videoRef.current)
|
18143
|
-
return;
|
18144
|
-
if (isDiyH5) {
|
18145
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
18146
|
-
if (!loopPlayRef.current)
|
18147
|
-
return;
|
18148
|
-
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18149
|
-
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;
|
18150
|
-
(_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);
|
18151
|
-
}
|
18152
|
-
}
|
18153
|
-
else {
|
18154
|
-
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
18155
|
-
}
|
18156
|
-
};
|
18157
18139
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
18158
18140
|
const handlePlaying = React.useCallback(() => {
|
18159
18141
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -18162,7 +18144,7 @@ Made in Italy` })));
|
|
18162
18144
|
setIsLoadFinish(true);
|
18163
18145
|
}, []);
|
18164
18146
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
18165
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q
|
18147
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
18166
18148
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18167
18149
|
return;
|
18168
18150
|
setIsPauseVideo(false);
|
@@ -18173,11 +18155,16 @@ Made in Italy` })));
|
|
18173
18155
|
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);
|
18174
18156
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
18175
18157
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
18176
|
-
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 : '',
|
18158
|
+
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 : '', contentName: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []), position: index + '', contentFormat: 'video', traceInfo: (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.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) + '' }))
|
18177
18159
|
});
|
18178
18160
|
isFirstPlayRef.current = false;
|
18179
18161
|
}
|
18180
18162
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18163
|
+
const setCurrentTimeByStartTime = React.useCallback(() => {
|
18164
|
+
if (isDiyH5) {
|
18165
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18166
|
+
}
|
18167
|
+
}, []);
|
18181
18168
|
const handLoadeddata = React.useCallback(() => {
|
18182
18169
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
18183
18170
|
return;
|
@@ -18202,12 +18189,13 @@ Made in Italy` })));
|
|
18202
18189
|
const handleLoadedmetadata = React.useCallback(() => {
|
18203
18190
|
if (!videoRef.current)
|
18204
18191
|
return;
|
18192
|
+
setCurrentTimeByStartTime();
|
18205
18193
|
loadedTimeRef.current = new Date();
|
18206
18194
|
handleStartPlay();
|
18207
18195
|
handLoadeddata();
|
18208
18196
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
18209
18197
|
const handleClickVideo = React.useCallback((type) => () => {
|
18210
|
-
var _a, _b, _c, _d, _e;
|
18198
|
+
var _a, _b, _c, _d, _e, _f;
|
18211
18199
|
if (!videoRef.current)
|
18212
18200
|
return;
|
18213
18201
|
if (!isLoadFinish)
|
@@ -18228,17 +18216,20 @@ Made in Italy` })));
|
|
18228
18216
|
break;
|
18229
18217
|
default:
|
18230
18218
|
if (isPause) {
|
18231
|
-
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.
|
18219
|
+
if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
|
18220
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18221
|
+
}
|
18222
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18232
18223
|
}
|
18233
18224
|
else {
|
18234
|
-
(
|
18225
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
18235
18226
|
}
|
18236
18227
|
setIsPauseVideo(!isPause);
|
18237
18228
|
break;
|
18238
18229
|
}
|
18239
18230
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18240
18231
|
const handlePause = React.useCallback(() => {
|
18241
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
18232
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18242
18233
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18243
18234
|
return;
|
18244
18235
|
if (activeIndex !== index)
|
@@ -18254,15 +18245,14 @@ Made in Italy` })));
|
|
18254
18245
|
eventSubject: 'playOverVideo',
|
18255
18246
|
eventDescription: 'User finished playing the video',
|
18256
18247
|
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 : '',
|
18257
|
-
|
18258
|
-
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 : '',
|
18248
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
18259
18249
|
endTime: videoCurrentTime,
|
18260
18250
|
videoDuration,
|
18261
18251
|
playDuration,
|
18262
|
-
contentTags: JSON.stringify((
|
18252
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
18263
18253
|
position: index + '',
|
18264
18254
|
contentFormat: 'video',
|
18265
|
-
traceInfo: (
|
18255
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
18266
18256
|
}
|
18267
18257
|
});
|
18268
18258
|
}
|
@@ -18270,8 +18260,27 @@ Made in Italy` })));
|
|
18270
18260
|
const handleWaiting = React.useCallback(() => {
|
18271
18261
|
setWaiting(true);
|
18272
18262
|
}, []);
|
18263
|
+
const handleTimeUpload = () => {
|
18264
|
+
if (!videoRef.current || !isDiyH5)
|
18265
|
+
return;
|
18266
|
+
setTimeout(() => {
|
18267
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18268
|
+
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)) {
|
18269
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18270
|
+
if (!loopPlayRef.current)
|
18271
|
+
return;
|
18272
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18273
|
+
(_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);
|
18274
|
+
}
|
18275
|
+
else {
|
18276
|
+
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;
|
18277
|
+
(_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);
|
18278
|
+
}
|
18279
|
+
}
|
18280
|
+
});
|
18281
|
+
};
|
18273
18282
|
React.useEffect(() => {
|
18274
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18283
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
18275
18284
|
if (!isActive)
|
18276
18285
|
return;
|
18277
18286
|
const videoSrc = videoUrl;
|
@@ -18292,6 +18301,7 @@ Made in Italy` })));
|
|
18292
18301
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18293
18302
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18294
18303
|
var _a;
|
18304
|
+
setCurrentTimeByStartTime();
|
18295
18305
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18296
18306
|
});
|
18297
18307
|
}
|
@@ -18305,11 +18315,12 @@ Made in Italy` })));
|
|
18305
18315
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18306
18316
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18307
18317
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18308
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18318
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
|
18309
18319
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18310
18320
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18321
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18311
18322
|
return () => {
|
18312
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18323
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
18313
18324
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18314
18325
|
if (!isPause)
|
18315
18326
|
handlePause();
|
@@ -18321,9 +18332,10 @@ Made in Italy` })));
|
|
18321
18332
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18322
18333
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18323
18334
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18324
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18335
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
|
18325
18336
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18326
18337
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18338
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18327
18339
|
};
|
18328
18340
|
}, [isActive]);
|
18329
18341
|
React.useEffect(() => {
|
@@ -18534,45 +18546,19 @@ Made in Italy` })));
|
|
18534
18546
|
}, onLoad: onShowFirstImage }))));
|
18535
18547
|
};
|
18536
18548
|
|
18537
|
-
const PictureGroup$4 =
|
18549
|
+
const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
18538
18550
|
var _a, _b;
|
18539
18551
|
const { isActive } = useSwiperSlide();
|
18540
|
-
const {
|
18552
|
+
const { sxpParameter, openHashtag } = useSxpDataSource();
|
18541
18553
|
const [isLoad, setIsLoad] = React.useState(false);
|
18542
18554
|
const [imgInfo, setImgInfo] = React.useState();
|
18543
18555
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
18544
|
-
const
|
18556
|
+
const swiperRef = React.useRef();
|
18545
18557
|
const isFirstPlayRef = React.useRef(true);
|
18546
|
-
const loopPlayRef = React.useRef(true);
|
18547
18558
|
const initTime = new Date();
|
18548
|
-
React.useImperativeHandle(ref, () => {
|
18549
|
-
return {
|
18550
|
-
setLoopPlay(v) {
|
18551
|
-
loopPlayRef.current = v;
|
18552
|
-
}
|
18553
|
-
};
|
18554
|
-
});
|
18555
|
-
React.useEffect(() => {
|
18556
|
-
let timerId;
|
18557
|
-
if (isLoad && isActive && isDiyH5) {
|
18558
|
-
timerId = setTimeout(() => {
|
18559
|
-
var _a, _b, _c, _d;
|
18560
|
-
if (!loopPlayRef.current)
|
18561
|
-
return;
|
18562
|
-
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18563
|
-
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;
|
18564
|
-
(_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);
|
18565
|
-
}
|
18566
|
-
}, 3000);
|
18567
|
-
}
|
18568
|
-
return () => {
|
18569
|
-
if (timerId)
|
18570
|
-
clearTimeout(timerId);
|
18571
|
-
};
|
18572
|
-
}, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
|
18573
18559
|
React.useEffect(() => {
|
18574
18560
|
if (isLoad && isActive) {
|
18575
|
-
(
|
18561
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
|
18576
18562
|
if (openHashtag) {
|
18577
18563
|
onViewImageEndEvent(rec);
|
18578
18564
|
}
|
@@ -18582,7 +18568,7 @@ Made in Italy` })));
|
|
18582
18568
|
}
|
18583
18569
|
}
|
18584
18570
|
else {
|
18585
|
-
(
|
18571
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
|
18586
18572
|
}
|
18587
18573
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18588
18574
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18609,13 +18595,13 @@ Made in Italy` })));
|
|
18609
18595
|
};
|
18610
18596
|
}, [isActive, imgInfo]);
|
18611
18597
|
const handleMouseEnter = React.useCallback(() => {
|
18612
|
-
if (
|
18613
|
-
|
18598
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
18599
|
+
swiperRef.current.swiper.autoplay.stop();
|
18614
18600
|
}
|
18615
18601
|
}, []);
|
18616
18602
|
const handleMouseLeave = React.useCallback(() => {
|
18617
|
-
if (
|
18618
|
-
|
18603
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
18604
|
+
swiperRef.current.swiper.autoplay.start();
|
18619
18605
|
}
|
18620
18606
|
}, []);
|
18621
18607
|
const handleSlideChange = React.useCallback((swiper) => {
|
@@ -18636,7 +18622,7 @@ Made in Italy` })));
|
|
18636
18622
|
enabled: true
|
18637
18623
|
}
|
18638
18624
|
}
|
18639
|
-
: {}), { loop: true, ref:
|
18625
|
+
: {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18640
18626
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18641
18627
|
fontSize: '14px'
|
18642
18628
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18653,7 +18639,7 @@ Made in Italy` })));
|
|
18653
18639
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18654
18640
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18655
18641
|
}))));
|
18656
|
-
}
|
18642
|
+
};
|
18657
18643
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
18658
18644
|
|
18659
18645
|
/*
|
@@ -18933,7 +18919,7 @@ Made in Italy` })));
|
|
18933
18919
|
* @Author: binruan@chatlabs.com
|
18934
18920
|
* @Date: 2024-03-20 10:27:31
|
18935
18921
|
* @LastEditors: binruan@chatlabs.com
|
18936
|
-
* @LastEditTime: 2025-05-
|
18922
|
+
* @LastEditTime: 2025-05-09 15:51:40
|
18937
18923
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18938
18924
|
*
|
18939
18925
|
*/
|
@@ -18953,7 +18939,6 @@ Made in Italy` })));
|
|
18953
18939
|
const skipLinkRef = React.useRef(false);
|
18954
18940
|
const [pageNum, setPageNum] = React.useState(2);
|
18955
18941
|
const videoWidgetRef = React.useRef(null);
|
18956
|
-
const pictureGroupRef = React.useRef(null);
|
18957
18942
|
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();
|
18958
18943
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18959
18944
|
const isShowFingerTip = React.useMemo(() => {
|
@@ -19001,7 +18986,7 @@ Made in Italy` })));
|
|
19001
18986
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
19002
18987
|
}, [data, ctaType, swiperRef]);
|
19003
18988
|
const handleSessionCompleted = React.useCallback((fk) => {
|
19004
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v
|
18989
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
19005
18990
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
19006
18991
|
let fromKName = '';
|
19007
18992
|
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))) {
|
@@ -19028,13 +19013,12 @@ Made in Italy` })));
|
|
19028
19013
|
eventSubject: 'sessionCompleted',
|
19029
19014
|
eventDescription: 'Session completed',
|
19030
19015
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
19031
|
-
|
19032
|
-
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
19016
|
+
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
19033
19017
|
position: activeIndex + '',
|
19034
19018
|
fromKName: fk || fromKName,
|
19035
19019
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
19036
|
-
ctatId: (
|
19037
|
-
traceInfo: (
|
19020
|
+
ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
19021
|
+
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
|
19038
19022
|
}
|
19039
19023
|
});
|
19040
19024
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -19093,9 +19077,8 @@ Made in Italy` })));
|
|
19093
19077
|
refreshFeSession
|
19094
19078
|
]);
|
19095
19079
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
19096
|
-
var _a
|
19080
|
+
var _a;
|
19097
19081
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19098
|
-
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19099
19082
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
19100
19083
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
19101
19084
|
React.useEffect(() => {
|
@@ -19165,18 +19148,18 @@ Made in Italy` })));
|
|
19165
19148
|
return null;
|
19166
19149
|
}, [globalConfig, activeIndex, visList]);
|
19167
19150
|
const renderContent = React.useCallback((rec, index) => {
|
19168
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
19151
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
19169
19152
|
if (rec === 'organic menu') {
|
19170
19153
|
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)));
|
19171
19154
|
}
|
19172
|
-
if ((
|
19155
|
+
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
19173
19156
|
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 })));
|
19174
19157
|
}
|
19175
|
-
if ((
|
19176
|
-
return (React.createElement(PictureGroup$5,
|
19158
|
+
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
19159
|
+
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 }));
|
19177
19160
|
}
|
19178
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
19179
|
-
return (
|
19161
|
+
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
|
19162
|
+
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
19180
19163
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19181
19164
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
19182
19165
|
const Component = withBindDataSource(t);
|
@@ -19214,7 +19197,7 @@ Made in Italy` })));
|
|
19214
19197
|
};
|
19215
19198
|
}, [isShowMore]);
|
19216
19199
|
const renderBottom = React.useCallback((rec, index) => {
|
19217
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q
|
19200
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19218
19201
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19219
19202
|
let cta = null;
|
19220
19203
|
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) {
|
@@ -19223,27 +19206,24 @@ Made in Italy` })));
|
|
19223
19206
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19224
19207
|
cta = '商品CTA';
|
19225
19208
|
}
|
19226
|
-
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)) {
|
19227
|
-
cta = '服务CTA';
|
19228
|
-
}
|
19229
19209
|
else {
|
19230
|
-
cta = (
|
19210
|
+
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
19231
19211
|
}
|
19232
19212
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19233
19213
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
19234
19214
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
19235
|
-
((
|
19215
|
+
((_f = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _f === void 0 ? void 0 : _f.includes((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type));
|
19236
19216
|
return (React.createElement(React.Fragment, null,
|
19237
19217
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19238
|
-
((
|
19239
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19218
|
+
((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
19219
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _j !== void 0 ? _j : 40}px` } },
|
19240
19220
|
React.createElement(Nudge, { nudge: nudge }),
|
19241
19221
|
((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' },
|
19242
19222
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
19243
19223
|
React.createElement("div", null,
|
19244
|
-
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: (
|
19224
|
+
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: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', 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 }),
|
19245
19225
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19246
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19226
|
+
React.createElement(Hashtag$1, { index: activeIndex, tags: (_o = (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.hashTags) !== null && _o !== void 0 ? _o : [], itemId: (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.itemId, itemType: ((_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
19247
19227
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19248
19228
|
}
|
19249
19229
|
return null;
|
@@ -19282,7 +19262,7 @@ Made in Italy` })));
|
|
19282
19262
|
return null;
|
19283
19263
|
}, [globalConfig, waterFallData]);
|
19284
19264
|
const handleViewImageStartEnd = (item) => {
|
19285
|
-
var _a, _b, _c, _d, _e, _f
|
19265
|
+
var _a, _b, _c, _d, _e, _f;
|
19286
19266
|
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)) {
|
19287
19267
|
const endTime = Date.now();
|
19288
19268
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19291,11 +19271,10 @@ Made in Italy` })));
|
|
19291
19271
|
eventSubject: 'viewImageCarouselEnd',
|
19292
19272
|
eventDescription: 'User end view the image carousel',
|
19293
19273
|
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 : '',
|
19294
|
-
|
19295
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19274
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
19296
19275
|
imageEndTime: `${endTime}`,
|
19297
19276
|
playDuration: `${duration}`,
|
19298
|
-
contentTags: JSON.stringify((
|
19277
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
19299
19278
|
position: activeIndex + '',
|
19300
19279
|
contentFormat: 'image',
|
19301
19280
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19304,7 +19283,7 @@ Made in Italy` })));
|
|
19304
19283
|
}
|
19305
19284
|
};
|
19306
19285
|
const handleSlideSkip = (item, position) => {
|
19307
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x
|
19286
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19308
19287
|
if (isPreview || waterFallData)
|
19309
19288
|
return;
|
19310
19289
|
const t = new Date() - curTime.current;
|
@@ -19330,8 +19309,7 @@ Made in Italy` })));
|
|
19330
19309
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19331
19310
|
position: position + '',
|
19332
19311
|
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 : '',
|
19333
|
-
|
19334
|
-
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 : '',
|
19312
|
+
traceInfo: (_x = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : (_w = item === null || item === void 0 ? void 0 : item.product) === null || _w === void 0 ? void 0 : _w.traceInfo) !== null && _x !== void 0 ? _x : '',
|
19335
19313
|
contentFormat
|
19336
19314
|
}
|
19337
19315
|
});
|
@@ -19341,7 +19319,7 @@ Made in Italy` })));
|
|
19341
19319
|
}
|
19342
19320
|
};
|
19343
19321
|
const handleScrollEvent = (swiper) => {
|
19344
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w
|
19322
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19345
19323
|
const item = data[swiper.previousIndex];
|
19346
19324
|
if (!item)
|
19347
19325
|
return;
|
@@ -19358,12 +19336,11 @@ Made in Italy` })));
|
|
19358
19336
|
eventSubject: 'scrollDown',
|
19359
19337
|
eventDescription: 'User scroll down',
|
19360
19338
|
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 : '',
|
19361
|
-
|
19362
|
-
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 : '',
|
19339
|
+
productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
|
19363
19340
|
requestId: null,
|
19364
|
-
traceInfo: (
|
19341
|
+
traceInfo: (_l = (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : (_k = item === null || item === void 0 ? void 0 : item.product) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : '',
|
19365
19342
|
contentFormat,
|
19366
|
-
position: ((
|
19343
|
+
position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
|
19367
19344
|
}
|
19368
19345
|
});
|
19369
19346
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19375,13 +19352,12 @@ Made in Italy` })));
|
|
19375
19352
|
eventInfo: {
|
19376
19353
|
eventSubject: 'scrollUp',
|
19377
19354
|
eventDescription: 'User scroll up',
|
19378
|
-
contentId: (
|
19379
|
-
|
19380
|
-
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19355
|
+
contentId: (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
|
19356
|
+
productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
19381
19357
|
requestId: null,
|
19382
|
-
traceInfo: (
|
19358
|
+
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : '',
|
19383
19359
|
contentFormat,
|
19384
|
-
position: ((
|
19360
|
+
position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
|
19385
19361
|
}
|
19386
19362
|
});
|
19387
19363
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19407,7 +19383,7 @@ Made in Italy` })));
|
|
19407
19383
|
}
|
19408
19384
|
}, [openHashtag, data, activeIndex]);
|
19409
19385
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19410
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
19386
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19411
19387
|
const item = data[activeIndex];
|
19412
19388
|
// 如果是图片集则上报事件
|
19413
19389
|
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)) {
|
@@ -19418,10 +19394,9 @@ Made in Italy` })));
|
|
19418
19394
|
eventSubject: 'viewImageCarouselStart',
|
19419
19395
|
eventDescription: 'User start view the image carousel',
|
19420
19396
|
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 : '',
|
19421
|
-
|
19422
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19397
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
19423
19398
|
imageStartTime: `${startTime}`,
|
19424
|
-
contentTags: JSON.stringify((
|
19399
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
19425
19400
|
position: activeIndex + '',
|
19426
19401
|
contentFormat: 'image',
|
19427
19402
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19431,11 +19406,11 @@ Made in Italy` })));
|
|
19431
19406
|
if (enableCapi) {
|
19432
19407
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19433
19408
|
eventName: 'ViewContent',
|
19434
|
-
product: (
|
19409
|
+
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
|
19435
19410
|
});
|
19436
19411
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19437
19412
|
eventName: 'PageView',
|
19438
|
-
product: (
|
19413
|
+
product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
|
19439
19414
|
});
|
19440
19415
|
}
|
19441
19416
|
}
|
@@ -19527,20 +19502,15 @@ Made in Italy` })));
|
|
19527
19502
|
swiperRef.current.swiper.allowTouchMove = true;
|
19528
19503
|
}, 500);
|
19529
19504
|
}, onActiveIndexChange: (swiper) => {
|
19530
|
-
var _a, _b;
|
19531
19505
|
setActiveIndex(swiper.activeIndex);
|
19532
19506
|
if (openHashtag)
|
19533
19507
|
return;
|
19534
19508
|
// 处理上滑下滑事件
|
19535
19509
|
handleScrollEvent(swiper);
|
19536
|
-
if (waterFallData || isEditor)
|
19510
|
+
if (waterFallData || isEditor || isDiyH5)
|
19537
19511
|
return;
|
19538
19512
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19539
19513
|
if (!isLoadMore) {
|
19540
|
-
if (isDiyH5) {
|
19541
|
-
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19542
|
-
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19543
|
-
}
|
19544
19514
|
setIsLoadMore(true);
|
19545
19515
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19546
19516
|
var _a;
|
@@ -19593,7 +19563,7 @@ Made in Italy` })));
|
|
19593
19563
|
}, []);
|
19594
19564
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19595
19565
|
const handlePlaying = React.useCallback(() => {
|
19596
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
19566
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19597
19567
|
setIsPauseVideo(false);
|
19598
19568
|
const item = data[index];
|
19599
19569
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19606,15 +19576,14 @@ Made in Italy` })));
|
|
19606
19576
|
eventSubject: 'playVideo',
|
19607
19577
|
eventDescription: 'User played the video',
|
19608
19578
|
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 : '',
|
19609
|
-
|
19610
|
-
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 : '',
|
19579
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
19611
19580
|
playType,
|
19612
19581
|
startTime: videoCurrentTime,
|
19613
19582
|
videoDuration,
|
19614
|
-
contentTags: JSON.stringify((
|
19583
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
19615
19584
|
position: index + '',
|
19616
19585
|
contentFormat: 'video',
|
19617
|
-
traceInfo: (
|
19586
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
19618
19587
|
}
|
19619
19588
|
});
|
19620
19589
|
setIsFirstPlay(false);
|
@@ -19653,7 +19622,7 @@ Made in Italy` })));
|
|
19653
19622
|
}
|
19654
19623
|
}, [isLoadFinish]);
|
19655
19624
|
const onPause = React.useCallback(() => {
|
19656
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
19625
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19657
19626
|
const item = data[index];
|
19658
19627
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19659
19628
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19664,15 +19633,14 @@ Made in Italy` })));
|
|
19664
19633
|
eventSubject: 'playOverVideo',
|
19665
19634
|
eventDescription: 'User finished playing the video',
|
19666
19635
|
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 : '',
|
19667
|
-
|
19668
|
-
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 : '',
|
19636
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
19669
19637
|
endTime: videoCurrentTime,
|
19670
19638
|
videoDuration,
|
19671
19639
|
playDuration,
|
19672
|
-
contentTags: JSON.stringify((
|
19640
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
19673
19641
|
position: index + '',
|
19674
19642
|
contentFormat: 'video',
|
19675
|
-
traceInfo: (
|
19643
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
19676
19644
|
}
|
19677
19645
|
});
|
19678
19646
|
}
|