pb-sxp-ui 1.16.16 → 1.16.18
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 +183 -132
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +183 -132
- 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 +183 -132
- 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 +39 -13
- package/es/core/components/SxpPageRender/VideoWidget/index.js +32 -45
- package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/es/core/components/SxpPageRender/index.js +53 -37
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -0
- package/es/core/context/SxpDataSourceProvider.js +22 -6
- 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 +38 -12
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +32 -45
- package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/lib/core/components/SxpPageRender/index.js +53 -37
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -0
- package/lib/core/context/SxpDataSourceProvider.js +22 -6
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
|
@@ -637,6 +637,7 @@
|
|
|
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([]);
|
|
640
641
|
const [tagList, setTagList] = React.useState([]);
|
|
641
642
|
const [loading, setLoading] = React.useState(true);
|
|
642
643
|
const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
|
|
@@ -730,7 +731,7 @@
|
|
|
730
731
|
}, [bffDataSource]);
|
|
731
732
|
// bff API 请求方法
|
|
732
733
|
const bffFetch = React.useCallback((path, options, isBota = true) => {
|
|
733
|
-
var _a;
|
|
734
|
+
var _a, _b;
|
|
734
735
|
if (!bffDataSource)
|
|
735
736
|
return;
|
|
736
737
|
const url = bffDataSource.url;
|
|
@@ -744,7 +745,7 @@
|
|
|
744
745
|
val.split('=')[1];
|
|
745
746
|
});
|
|
746
747
|
return window
|
|
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
|
|
748
|
+
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId, tenant_id: (_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id'] }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
|
|
748
749
|
? JSON.stringify({
|
|
749
750
|
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
|
750
751
|
})
|
|
@@ -988,6 +989,9 @@
|
|
|
988
989
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
|
989
990
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
|
990
991
|
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
|
+
}
|
|
991
995
|
}
|
|
992
996
|
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));
|
|
993
997
|
if (isNotNullList) {
|
|
@@ -1027,12 +1031,17 @@
|
|
|
1027
1031
|
if (rtcList.length <= 0) {
|
|
1028
1032
|
return;
|
|
1029
1033
|
}
|
|
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
|
+
}
|
|
1030
1039
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
|
1031
1040
|
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 })));
|
|
1032
1041
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
|
1033
1042
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
|
1034
1043
|
return data;
|
|
1035
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
|
1044
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
|
1036
1045
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
|
1037
1046
|
var _a, _b, _c, _d, _e;
|
|
1038
1047
|
let expire = false;
|
|
@@ -1259,7 +1268,7 @@
|
|
|
1259
1268
|
}
|
|
1260
1269
|
}), [bffFetch, utmVal]);
|
|
1261
1270
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
|
1262
|
-
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;
|
|
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, _12, _13, _14;
|
|
1263
1272
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
1264
1273
|
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);
|
|
1265
1274
|
let fromKName = '';
|
|
@@ -1277,7 +1286,7 @@
|
|
|
1277
1286
|
}
|
|
1278
1287
|
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;
|
|
1279
1288
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1280
|
-
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: (
|
|
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 : '', 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 })
|
|
1281
1290
|
});
|
|
1282
1291
|
}, [bffEventReport, isFromHashtag]);
|
|
1283
1292
|
const h5EnterLink = React.useCallback(() => {
|
|
@@ -1379,6 +1388,9 @@
|
|
|
1379
1388
|
}
|
|
1380
1389
|
setRtcList(list);
|
|
1381
1390
|
setCacheRtcList(list);
|
|
1391
|
+
if (isDiyH5) {
|
|
1392
|
+
setFirstRtcList(list);
|
|
1393
|
+
}
|
|
1382
1394
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
|
1383
1395
|
if (channel) {
|
|
1384
1396
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
|
@@ -1414,6 +1426,9 @@
|
|
|
1414
1426
|
}
|
|
1415
1427
|
setRtcList(list);
|
|
1416
1428
|
setCacheRtcList(list);
|
|
1429
|
+
if (isDiyH5) {
|
|
1430
|
+
setFirstRtcList(list);
|
|
1431
|
+
}
|
|
1417
1432
|
}
|
|
1418
1433
|
})
|
|
1419
1434
|
.finally(() => {
|
|
@@ -1477,7 +1492,8 @@
|
|
|
1477
1492
|
refreshFeSession,
|
|
1478
1493
|
getAccount,
|
|
1479
1494
|
accountSonsent,
|
|
1480
|
-
isDiyH5
|
|
1495
|
+
isDiyH5,
|
|
1496
|
+
firstRtcList
|
|
1481
1497
|
} }, 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({
|
|
1482
1498
|
rtcList,
|
|
1483
1499
|
mutateLike: bffMutateLike,
|
|
@@ -1938,14 +1954,14 @@
|
|
|
1938
1954
|
* @Author: binruan@chatlabs.com
|
|
1939
1955
|
* @Date: 2024-03-12 10:59:06
|
|
1940
1956
|
* @LastEditors: binruan@chatlabs.com
|
|
1941
|
-
* @LastEditTime:
|
|
1957
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
|
1942
1958
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
|
1943
1959
|
*
|
|
1944
1960
|
*/
|
|
1945
1961
|
function useEventReport() {
|
|
1946
1962
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
|
1947
1963
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
|
1948
|
-
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;
|
|
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, _14, _15, _16;
|
|
1949
1965
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
|
1950
1966
|
if (i !== -1) {
|
|
1951
1967
|
return;
|
|
@@ -1978,11 +1994,11 @@
|
|
|
1978
1994
|
contentFormat = 'image';
|
|
1979
1995
|
}
|
|
1980
1996
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1981
|
-
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 : '',
|
|
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 : '', 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 }))
|
|
1982
1998
|
});
|
|
1983
1999
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
|
1984
2000
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
|
1985
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
2001
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
1986
2002
|
let fromKName = '';
|
|
1987
2003
|
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))) {
|
|
1988
2004
|
fromKName = 'pdpPage';
|
|
@@ -2001,8 +2017,9 @@
|
|
|
2001
2017
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
|
2002
2018
|
position: position + '',
|
|
2003
2019
|
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 : '',
|
|
2004
2021
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
|
2005
|
-
traceInfo: (
|
|
2022
|
+
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 : '',
|
|
2006
2023
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
|
2007
2024
|
eventSubject: 'productView',
|
|
2008
2025
|
eventDescription: 'User browsed the product'
|
|
@@ -15817,7 +15834,7 @@ Made in Italy` })));
|
|
|
15817
15834
|
* @Author: binruan@chatlabs.com
|
|
15818
15835
|
* @Date: 2024-01-10 10:58:24
|
|
15819
15836
|
* @LastEditors: binruan@chatlabs.com
|
|
15820
|
-
* @LastEditTime: 2025-
|
|
15837
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
|
15821
15838
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
|
15822
15839
|
*
|
|
15823
15840
|
*/
|
|
@@ -15855,7 +15872,7 @@ Made in Italy` })));
|
|
|
15855
15872
|
}
|
|
15856
15873
|
}, [waterFallData]);
|
|
15857
15874
|
const reportTagsView = React.useCallback(() => {
|
|
15858
|
-
var _a, _b, _c, _d, _e, _f;
|
|
15875
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
15859
15876
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
|
15860
15877
|
if (!rec)
|
|
15861
15878
|
return;
|
|
@@ -15875,9 +15892,10 @@ Made in Italy` })));
|
|
|
15875
15892
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
15876
15893
|
eventInfo: {
|
|
15877
15894
|
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 : '',
|
|
15878
15896
|
position: cacheActiveIndex + '',
|
|
15879
|
-
contentTags: JSON.stringify((
|
|
15880
|
-
traceInfo: (
|
|
15897
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
|
15898
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
|
15881
15899
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
|
15882
15900
|
fromKName,
|
|
15883
15901
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
@@ -17959,7 +17977,7 @@ Made in Italy` })));
|
|
|
17959
17977
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
|
17960
17978
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
|
17961
17979
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17962
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
17980
|
+
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;
|
|
17963
17981
|
if (state) {
|
|
17964
17982
|
// 先设置状态
|
|
17965
17983
|
setState(false);
|
|
@@ -17969,11 +17987,12 @@ Made in Italy` })));
|
|
|
17969
17987
|
eventSubject: 'favoriteContentCanceled',
|
|
17970
17988
|
eventDescription: 'This content was unfavorite by the user',
|
|
17971
17989
|
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 : '',
|
|
17972
|
-
|
|
17973
|
-
|
|
17990
|
+
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 : '',
|
|
17991
|
+
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 : '',
|
|
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 : []),
|
|
17974
17993
|
position: position + '',
|
|
17975
|
-
contentFormat: ((
|
|
17976
|
-
traceInfo: (
|
|
17994
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
|
17995
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
17977
17996
|
}
|
|
17978
17997
|
});
|
|
17979
17998
|
// 如果接口调用失败，则回滚状态
|
|
@@ -17981,40 +18000,41 @@ Made in Italy` })));
|
|
|
17981
18000
|
setState(true);
|
|
17982
18001
|
}
|
|
17983
18002
|
else {
|
|
17984
|
-
const nRtcList = (
|
|
18003
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17985
18004
|
if (index === position) {
|
|
17986
18005
|
item.isCollected = false;
|
|
17987
18006
|
}
|
|
17988
18007
|
return item;
|
|
17989
|
-
})) !== null &&
|
|
18008
|
+
})) !== null && _s !== void 0 ? _s : [];
|
|
17990
18009
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17991
18010
|
}
|
|
17992
18011
|
}
|
|
17993
18012
|
else {
|
|
17994
18013
|
setState(true);
|
|
17995
|
-
const result = (
|
|
18014
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
|
17996
18015
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17997
18016
|
eventInfo: {
|
|
17998
18017
|
eventSubject: 'favoriteContent',
|
|
17999
18018
|
eventDescription: 'This content was favorite by the user',
|
|
18000
|
-
contentId: (
|
|
18001
|
-
|
|
18002
|
-
|
|
18019
|
+
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 : '',
|
|
18020
|
+
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 : '',
|
|
18021
|
+
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 : '',
|
|
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 : []),
|
|
18003
18023
|
position: position + '',
|
|
18004
|
-
contentFormat: ((
|
|
18005
|
-
traceInfo: (
|
|
18024
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
|
18025
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
|
18006
18026
|
}
|
|
18007
18027
|
});
|
|
18008
18028
|
if (!result) {
|
|
18009
18029
|
setState(false);
|
|
18010
18030
|
}
|
|
18011
18031
|
else {
|
|
18012
|
-
const nRtcList = (
|
|
18032
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
18013
18033
|
if (index === position) {
|
|
18014
18034
|
item.isCollected = true;
|
|
18015
18035
|
}
|
|
18016
18036
|
return item;
|
|
18017
|
-
})) !== null &&
|
|
18037
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
|
18018
18038
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
18019
18039
|
}
|
|
18020
18040
|
}
|
|
@@ -18051,7 +18071,7 @@ Made in Italy` })));
|
|
|
18051
18071
|
const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
|
18052
18072
|
var _a, _b;
|
|
18053
18073
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
|
18054
|
-
const { bffEventReport, sxpParameter,
|
|
18074
|
+
const { bffEventReport, sxpParameter, firstRtcList, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
|
18055
18075
|
const videoStartTime = React.useRef(0);
|
|
18056
18076
|
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
|
18057
18077
|
const { isActive } = useSwiperSlide();
|
|
@@ -18117,6 +18137,23 @@ Made in Italy` })));
|
|
|
18117
18137
|
return;
|
|
18118
18138
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
18119
18139
|
}, [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
|
+
};
|
|
18120
18157
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
18121
18158
|
const handlePlaying = React.useCallback(() => {
|
|
18122
18159
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
@@ -18125,7 +18162,7 @@ Made in Italy` })));
|
|
|
18125
18162
|
setIsLoadFinish(true);
|
|
18126
18163
|
}, []);
|
|
18127
18164
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
18128
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
18165
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
18129
18166
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
18130
18167
|
return;
|
|
18131
18168
|
setIsPauseVideo(false);
|
|
@@ -18136,16 +18173,11 @@ Made in Italy` })));
|
|
|
18136
18173
|
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);
|
|
18137
18174
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
|
18138
18175
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
18139
|
-
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 : '',
|
|
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 : '', 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) + '' }))
|
|
18140
18177
|
});
|
|
18141
18178
|
isFirstPlayRef.current = false;
|
|
18142
18179
|
}
|
|
18143
18180
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
18144
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
|
18145
|
-
if (isDiyH5) {
|
|
18146
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
18147
|
-
}
|
|
18148
|
-
}, []);
|
|
18149
18181
|
const handLoadeddata = React.useCallback(() => {
|
|
18150
18182
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
|
18151
18183
|
return;
|
|
@@ -18170,13 +18202,12 @@ Made in Italy` })));
|
|
|
18170
18202
|
const handleLoadedmetadata = React.useCallback(() => {
|
|
18171
18203
|
if (!videoRef.current)
|
|
18172
18204
|
return;
|
|
18173
|
-
setCurrentTimeByStartTime();
|
|
18174
18205
|
loadedTimeRef.current = new Date();
|
|
18175
18206
|
handleStartPlay();
|
|
18176
18207
|
handLoadeddata();
|
|
18177
18208
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
|
18178
18209
|
const handleClickVideo = React.useCallback((type) => () => {
|
|
18179
|
-
var _a, _b, _c, _d, _e
|
|
18210
|
+
var _a, _b, _c, _d, _e;
|
|
18180
18211
|
if (!videoRef.current)
|
|
18181
18212
|
return;
|
|
18182
18213
|
if (!isLoadFinish)
|
|
@@ -18197,20 +18228,17 @@ Made in Italy` })));
|
|
|
18197
18228
|
break;
|
|
18198
18229
|
default:
|
|
18199
18230
|
if (isPause) {
|
|
18200
|
-
|
|
18201
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
18202
|
-
}
|
|
18203
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
|
18231
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
|
18204
18232
|
}
|
|
18205
18233
|
else {
|
|
18206
|
-
(
|
|
18234
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
|
18207
18235
|
}
|
|
18208
18236
|
setIsPauseVideo(!isPause);
|
|
18209
18237
|
break;
|
|
18210
18238
|
}
|
|
18211
18239
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
18212
18240
|
const handlePause = React.useCallback(() => {
|
|
18213
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
18241
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
18214
18242
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
18215
18243
|
return;
|
|
18216
18244
|
if (activeIndex !== index)
|
|
@@ -18226,14 +18254,15 @@ Made in Italy` })));
|
|
|
18226
18254
|
eventSubject: 'playOverVideo',
|
|
18227
18255
|
eventDescription: 'User finished playing the video',
|
|
18228
18256
|
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 : '',
|
|
18229
|
-
|
|
18257
|
+
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 : '',
|
|
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 : '',
|
|
18230
18259
|
endTime: videoCurrentTime,
|
|
18231
18260
|
videoDuration,
|
|
18232
18261
|
playDuration,
|
|
18233
|
-
contentTags: JSON.stringify((
|
|
18262
|
+
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 : []),
|
|
18234
18263
|
position: index + '',
|
|
18235
18264
|
contentFormat: 'video',
|
|
18236
|
-
traceInfo: (
|
|
18265
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
18237
18266
|
}
|
|
18238
18267
|
});
|
|
18239
18268
|
}
|
|
@@ -18241,27 +18270,8 @@ Made in Italy` })));
|
|
|
18241
18270
|
const handleWaiting = React.useCallback(() => {
|
|
18242
18271
|
setWaiting(true);
|
|
18243
18272
|
}, []);
|
|
18244
|
-
const handleTimeUpload = () => {
|
|
18245
|
-
if (!videoRef.current || !isDiyH5)
|
|
18246
|
-
return;
|
|
18247
|
-
setTimeout(() => {
|
|
18248
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18249
|
-
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)) {
|
|
18250
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
18251
|
-
if (!loopPlayRef.current)
|
|
18252
|
-
return;
|
|
18253
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18254
|
-
(_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);
|
|
18255
|
-
}
|
|
18256
|
-
else {
|
|
18257
|
-
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;
|
|
18258
|
-
(_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);
|
|
18259
|
-
}
|
|
18260
|
-
}
|
|
18261
|
-
});
|
|
18262
|
-
};
|
|
18263
18273
|
React.useEffect(() => {
|
|
18264
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18274
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18265
18275
|
if (!isActive)
|
|
18266
18276
|
return;
|
|
18267
18277
|
const videoSrc = videoUrl;
|
|
@@ -18282,7 +18292,6 @@ Made in Italy` })));
|
|
|
18282
18292
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
18283
18293
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
18284
18294
|
var _a;
|
|
18285
|
-
setCurrentTimeByStartTime();
|
|
18286
18295
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
18287
18296
|
});
|
|
18288
18297
|
}
|
|
@@ -18296,12 +18305,11 @@ Made in Italy` })));
|
|
|
18296
18305
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
|
18297
18306
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
|
18298
18307
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
|
18299
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
|
18308
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
|
18300
18309
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
|
18301
18310
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
|
18302
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
|
18303
18311
|
return () => {
|
|
18304
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18312
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18305
18313
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
|
18306
18314
|
if (!isPause)
|
|
18307
18315
|
handlePause();
|
|
@@ -18313,10 +18321,9 @@ Made in Italy` })));
|
|
|
18313
18321
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
|
18314
18322
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
|
18315
18323
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
|
18316
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
|
18324
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
|
18317
18325
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
|
18318
18326
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
|
18319
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
|
18320
18327
|
};
|
|
18321
18328
|
}, [isActive]);
|
|
18322
18329
|
React.useEffect(() => {
|
|
@@ -18527,19 +18534,45 @@ Made in Italy` })));
|
|
|
18527
18534
|
}, onLoad: onShowFirstImage }))));
|
|
18528
18535
|
};
|
|
18529
18536
|
|
|
18530
|
-
const PictureGroup$4 = ({ imgUrls,
|
|
18537
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
|
18531
18538
|
var _a, _b;
|
|
18532
18539
|
const { isActive } = useSwiperSlide();
|
|
18533
|
-
const {
|
|
18540
|
+
const { firstRtcList, openHashtag, isDiyH5 } = useSxpDataSource();
|
|
18534
18541
|
const [isLoad, setIsLoad] = React.useState(false);
|
|
18535
18542
|
const [imgInfo, setImgInfo] = React.useState();
|
|
18536
18543
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
|
18537
|
-
const
|
|
18544
|
+
const imgsSwiperRef = React.useRef();
|
|
18538
18545
|
const isFirstPlayRef = React.useRef(true);
|
|
18546
|
+
const loopPlayRef = React.useRef(true);
|
|
18539
18547
|
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]);
|
|
18540
18573
|
React.useEffect(() => {
|
|
18541
18574
|
if (isLoad && isActive) {
|
|
18542
|
-
(
|
|
18575
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
|
18543
18576
|
if (openHashtag) {
|
|
18544
18577
|
onViewImageEndEvent(rec);
|
|
18545
18578
|
}
|
|
@@ -18549,7 +18582,7 @@ Made in Italy` })));
|
|
|
18549
18582
|
}
|
|
18550
18583
|
}
|
|
18551
18584
|
else {
|
|
18552
|
-
(
|
|
18585
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18553
18586
|
}
|
|
18554
18587
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
|
18555
18588
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -18576,13 +18609,13 @@ Made in Italy` })));
|
|
|
18576
18609
|
};
|
|
18577
18610
|
}, [isActive, imgInfo]);
|
|
18578
18611
|
const handleMouseEnter = React.useCallback(() => {
|
|
18579
|
-
if (
|
|
18580
|
-
|
|
18612
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18613
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18581
18614
|
}
|
|
18582
18615
|
}, []);
|
|
18583
18616
|
const handleMouseLeave = React.useCallback(() => {
|
|
18584
|
-
if (
|
|
18585
|
-
|
|
18617
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18618
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
|
18586
18619
|
}
|
|
18587
18620
|
}, []);
|
|
18588
18621
|
const handleSlideChange = React.useCallback((swiper) => {
|
|
@@ -18603,7 +18636,7 @@ Made in Italy` })));
|
|
|
18603
18636
|
enabled: true
|
|
18604
18637
|
}
|
|
18605
18638
|
}
|
|
18606
|
-
: {}), { loop: true, ref:
|
|
18639
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
|
18607
18640
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
|
18608
18641
|
fontSize: '14px'
|
|
18609
18642
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
|
@@ -18620,7 +18653,7 @@ Made in Italy` })));
|
|
|
18620
18653
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
|
18621
18654
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
|
18622
18655
|
}))));
|
|
18623
|
-
};
|
|
18656
|
+
});
|
|
18624
18657
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
|
18625
18658
|
|
|
18626
18659
|
/*
|
|
@@ -18900,7 +18933,7 @@ Made in Italy` })));
|
|
|
18900
18933
|
* @Author: binruan@chatlabs.com
|
|
18901
18934
|
* @Date: 2024-03-20 10:27:31
|
|
18902
18935
|
* @LastEditors: binruan@chatlabs.com
|
|
18903
|
-
* @LastEditTime: 2025-05-
|
|
18936
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
|
18904
18937
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
|
18905
18938
|
*
|
|
18906
18939
|
*/
|
|
@@ -18920,6 +18953,7 @@ Made in Italy` })));
|
|
|
18920
18953
|
const skipLinkRef = React.useRef(false);
|
|
18921
18954
|
const [pageNum, setPageNum] = React.useState(2);
|
|
18922
18955
|
const videoWidgetRef = React.useRef(null);
|
|
18956
|
+
const pictureGroupRef = React.useRef(null);
|
|
18923
18957
|
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();
|
|
18924
18958
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
|
18925
18959
|
const isShowFingerTip = React.useMemo(() => {
|
|
@@ -18967,7 +19001,7 @@ Made in Italy` })));
|
|
|
18967
19001
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
|
18968
19002
|
}, [data, ctaType, swiperRef]);
|
|
18969
19003
|
const handleSessionCompleted = React.useCallback((fk) => {
|
|
18970
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
19004
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
18971
19005
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
18972
19006
|
let fromKName = '';
|
|
18973
19007
|
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))) {
|
|
@@ -18994,12 +19028,13 @@ Made in Italy` })));
|
|
|
18994
19028
|
eventSubject: 'sessionCompleted',
|
|
18995
19029
|
eventDescription: 'Session completed',
|
|
18996
19030
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
|
18997
|
-
|
|
19031
|
+
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 : '',
|
|
19032
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
|
18998
19033
|
position: activeIndex + '',
|
|
18999
19034
|
fromKName: fk || fromKName,
|
|
19000
19035
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
19001
|
-
ctatId: (
|
|
19002
|
-
traceInfo: (
|
|
19036
|
+
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 : '',
|
|
19037
|
+
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 : ''
|
|
19003
19038
|
}
|
|
19004
19039
|
});
|
|
19005
19040
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
|
@@ -19058,8 +19093,9 @@ Made in Italy` })));
|
|
|
19058
19093
|
refreshFeSession
|
|
19059
19094
|
]);
|
|
19060
19095
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
|
19061
|
-
var _a;
|
|
19096
|
+
var _a, _b;
|
|
19062
19097
|
(_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);
|
|
19063
19099
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
|
19064
19100
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
|
19065
19101
|
React.useEffect(() => {
|
|
@@ -19129,18 +19165,18 @@ Made in Italy` })));
|
|
|
19129
19165
|
return null;
|
|
19130
19166
|
}, [globalConfig, activeIndex, visList]);
|
|
19131
19167
|
const renderContent = React.useCallback((rec, index) => {
|
|
19132
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
19168
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
19133
19169
|
if (rec === 'organic menu') {
|
|
19134
19170
|
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)));
|
|
19135
19171
|
}
|
|
19136
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
|
19172
|
+
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)) {
|
|
19137
19173
|
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 })));
|
|
19138
19174
|
}
|
|
19139
|
-
if ((
|
|
19140
|
-
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 }));
|
|
19175
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
|
19176
|
+
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 })));
|
|
19141
19177
|
}
|
|
19142
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
|
19143
|
-
return (
|
|
19178
|
+
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) {
|
|
19179
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
|
19144
19180
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19145
19181
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
|
19146
19182
|
const Component = withBindDataSource(t);
|
|
@@ -19178,7 +19214,7 @@ Made in Italy` })));
|
|
|
19178
19214
|
};
|
|
19179
19215
|
}, [isShowMore]);
|
|
19180
19216
|
const renderBottom = React.useCallback((rec, index) => {
|
|
19181
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
19217
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
19182
19218
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
19183
19219
|
let cta = null;
|
|
19184
19220
|
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) {
|
|
@@ -19187,24 +19223,27 @@ Made in Italy` })));
|
|
|
19187
19223
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
19188
19224
|
cta = '商品CTA';
|
|
19189
19225
|
}
|
|
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
|
+
}
|
|
19190
19229
|
else {
|
|
19191
|
-
cta = (
|
|
19230
|
+
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;
|
|
19192
19231
|
}
|
|
19193
19232
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
19194
19233
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
|
19195
19234
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
|
19196
|
-
((
|
|
19235
|
+
((_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));
|
|
19197
19236
|
return (React.createElement(React.Fragment, null,
|
|
19198
19237
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
|
19199
|
-
((
|
|
19200
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
|
19238
|
+
((_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' }),
|
|
19239
|
+
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` } },
|
|
19201
19240
|
React.createElement(Nudge, { nudge: nudge }),
|
|
19202
19241
|
((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' },
|
|
19203
19242
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
|
19204
19243
|
React.createElement("div", null,
|
|
19205
|
-
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: (
|
|
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: (_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 }),
|
|
19206
19245
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
|
19207
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
|
19246
|
+
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) }))),
|
|
19208
19247
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
19209
19248
|
}
|
|
19210
19249
|
return null;
|
|
@@ -19243,7 +19282,7 @@ Made in Italy` })));
|
|
|
19243
19282
|
return null;
|
|
19244
19283
|
}, [globalConfig, waterFallData]);
|
|
19245
19284
|
const handleViewImageStartEnd = (item) => {
|
|
19246
|
-
var _a, _b, _c, _d, _e, _f;
|
|
19285
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19247
19286
|
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)) {
|
|
19248
19287
|
const endTime = Date.now();
|
|
19249
19288
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
|
@@ -19252,10 +19291,11 @@ Made in Italy` })));
|
|
|
19252
19291
|
eventSubject: 'viewImageCarouselEnd',
|
|
19253
19292
|
eventDescription: 'User end view the image carousel',
|
|
19254
19293
|
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 : '',
|
|
19255
|
-
|
|
19294
|
+
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 : '',
|
|
19295
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19256
19296
|
imageEndTime: `${endTime}`,
|
|
19257
19297
|
playDuration: `${duration}`,
|
|
19258
|
-
contentTags: JSON.stringify((
|
|
19298
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19259
19299
|
position: activeIndex + '',
|
|
19260
19300
|
contentFormat: 'image',
|
|
19261
19301
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
|
@@ -19264,7 +19304,7 @@ Made in Italy` })));
|
|
|
19264
19304
|
}
|
|
19265
19305
|
};
|
|
19266
19306
|
const handleSlideSkip = (item, position) => {
|
|
19267
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
19307
|
+
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;
|
|
19268
19308
|
if (isPreview || waterFallData)
|
|
19269
19309
|
return;
|
|
19270
19310
|
const t = new Date() - curTime.current;
|
|
@@ -19290,7 +19330,8 @@ Made in Italy` })));
|
|
|
19290
19330
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
|
19291
19331
|
position: position + '',
|
|
19292
19332
|
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 : '',
|
|
19293
|
-
|
|
19333
|
+
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 : '',
|
|
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 : '',
|
|
19294
19335
|
contentFormat
|
|
19295
19336
|
}
|
|
19296
19337
|
});
|
|
@@ -19300,7 +19341,7 @@ Made in Italy` })));
|
|
|
19300
19341
|
}
|
|
19301
19342
|
};
|
|
19302
19343
|
const handleScrollEvent = (swiper) => {
|
|
19303
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
19344
|
+
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;
|
|
19304
19345
|
const item = data[swiper.previousIndex];
|
|
19305
19346
|
if (!item)
|
|
19306
19347
|
return;
|
|
@@ -19317,11 +19358,12 @@ Made in Italy` })));
|
|
|
19317
19358
|
eventSubject: 'scrollDown',
|
|
19318
19359
|
eventDescription: 'User scroll down',
|
|
19319
19360
|
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 : '',
|
|
19320
|
-
|
|
19361
|
+
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 : '',
|
|
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 : '',
|
|
19321
19363
|
requestId: null,
|
|
19322
|
-
traceInfo: (
|
|
19364
|
+
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 : '',
|
|
19323
19365
|
contentFormat,
|
|
19324
|
-
position: ((
|
|
19366
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
|
19325
19367
|
}
|
|
19326
19368
|
});
|
|
19327
19369
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19333,12 +19375,13 @@ Made in Italy` })));
|
|
|
19333
19375
|
eventInfo: {
|
|
19334
19376
|
eventSubject: 'scrollUp',
|
|
19335
19377
|
eventDescription: 'User scroll up',
|
|
19336
|
-
contentId: (
|
|
19337
|
-
|
|
19378
|
+
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 : '',
|
|
19379
|
+
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 : '',
|
|
19380
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
|
19338
19381
|
requestId: null,
|
|
19339
|
-
traceInfo: (
|
|
19382
|
+
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 : '',
|
|
19340
19383
|
contentFormat,
|
|
19341
|
-
position: ((
|
|
19384
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
|
19342
19385
|
}
|
|
19343
19386
|
});
|
|
19344
19387
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19364,7 +19407,7 @@ Made in Italy` })));
|
|
|
19364
19407
|
}
|
|
19365
19408
|
}, [openHashtag, data, activeIndex]);
|
|
19366
19409
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
|
19367
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19410
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
19368
19411
|
const item = data[activeIndex];
|
|
19369
19412
|
// 如果是图片集则上报事件
|
|
19370
19413
|
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)) {
|
|
@@ -19375,9 +19418,10 @@ Made in Italy` })));
|
|
|
19375
19418
|
eventSubject: 'viewImageCarouselStart',
|
|
19376
19419
|
eventDescription: 'User start view the image carousel',
|
|
19377
19420
|
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 : '',
|
|
19378
|
-
|
|
19421
|
+
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 : '',
|
|
19422
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19379
19423
|
imageStartTime: `${startTime}`,
|
|
19380
|
-
contentTags: JSON.stringify((
|
|
19424
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19381
19425
|
position: activeIndex + '',
|
|
19382
19426
|
contentFormat: 'image',
|
|
19383
19427
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
|
@@ -19387,11 +19431,11 @@ Made in Italy` })));
|
|
|
19387
19431
|
if (enableCapi) {
|
|
19388
19432
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19389
19433
|
eventName: 'ViewContent',
|
|
19390
|
-
product: (
|
|
19434
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
|
19391
19435
|
});
|
|
19392
19436
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19393
19437
|
eventName: 'PageView',
|
|
19394
|
-
product: (
|
|
19438
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
|
19395
19439
|
});
|
|
19396
19440
|
}
|
|
19397
19441
|
}
|
|
@@ -19483,15 +19527,20 @@ Made in Italy` })));
|
|
|
19483
19527
|
swiperRef.current.swiper.allowTouchMove = true;
|
|
19484
19528
|
}, 500);
|
|
19485
19529
|
}, onActiveIndexChange: (swiper) => {
|
|
19530
|
+
var _a, _b;
|
|
19486
19531
|
setActiveIndex(swiper.activeIndex);
|
|
19487
19532
|
if (openHashtag)
|
|
19488
19533
|
return;
|
|
19489
19534
|
// 处理上滑下滑事件
|
|
19490
19535
|
handleScrollEvent(swiper);
|
|
19491
|
-
if (waterFallData || isEditor
|
|
19536
|
+
if (waterFallData || isEditor)
|
|
19492
19537
|
return;
|
|
19493
19538
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
|
19494
19539
|
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
|
+
}
|
|
19495
19544
|
setIsLoadMore(true);
|
|
19496
19545
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
|
19497
19546
|
var _a;
|
|
@@ -19544,7 +19593,7 @@ Made in Italy` })));
|
|
|
19544
19593
|
}, []);
|
|
19545
19594
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
19546
19595
|
const handlePlaying = React.useCallback(() => {
|
|
19547
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19596
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19548
19597
|
setIsPauseVideo(false);
|
|
19549
19598
|
const item = data[index];
|
|
19550
19599
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -19557,14 +19606,15 @@ Made in Italy` })));
|
|
|
19557
19606
|
eventSubject: 'playVideo',
|
|
19558
19607
|
eventDescription: 'User played the video',
|
|
19559
19608
|
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 : '',
|
|
19560
|
-
|
|
19609
|
+
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 : '',
|
|
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 : '',
|
|
19561
19611
|
playType,
|
|
19562
19612
|
startTime: videoCurrentTime,
|
|
19563
19613
|
videoDuration,
|
|
19564
|
-
contentTags: JSON.stringify((
|
|
19614
|
+
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 : []),
|
|
19565
19615
|
position: index + '',
|
|
19566
19616
|
contentFormat: 'video',
|
|
19567
|
-
traceInfo: (
|
|
19617
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19568
19618
|
}
|
|
19569
19619
|
});
|
|
19570
19620
|
setIsFirstPlay(false);
|
|
@@ -19603,7 +19653,7 @@ Made in Italy` })));
|
|
|
19603
19653
|
}
|
|
19604
19654
|
}, [isLoadFinish]);
|
|
19605
19655
|
const onPause = React.useCallback(() => {
|
|
19606
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19656
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19607
19657
|
const item = data[index];
|
|
19608
19658
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
19609
19659
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
@@ -19614,14 +19664,15 @@ Made in Italy` })));
|
|
|
19614
19664
|
eventSubject: 'playOverVideo',
|
|
19615
19665
|
eventDescription: 'User finished playing the video',
|
|
19616
19666
|
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 : '',
|
|
19617
|
-
|
|
19667
|
+
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 : '',
|
|
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 : '',
|
|
19618
19669
|
endTime: videoCurrentTime,
|
|
19619
19670
|
videoDuration,
|
|
19620
19671
|
playDuration,
|
|
19621
|
-
contentTags: JSON.stringify((
|
|
19672
|
+
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 : []),
|
|
19622
19673
|
position: index + '',
|
|
19623
19674
|
contentFormat: 'video',
|
|
19624
|
-
traceInfo: (
|
|
19675
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19625
19676
|
}
|
|
19626
19677
|
});
|
|
19627
19678
|
}
|