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/index.js
CHANGED
@@ -622,6 +622,7 @@ const DEFAULT_TAG = 'FOR U';
|
|
622
622
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
|
623
623
|
var _a, _b, _c, _d, _e;
|
624
624
|
const [rtcList, setRtcList] = useState([]);
|
625
|
+
const [firstRtcList, setFirstRtcList] = useState([]);
|
625
626
|
const [tagList, setTagList] = useState([]);
|
626
627
|
const [loading, setLoading] = useState(true);
|
627
628
|
const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
|
@@ -715,7 +716,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
715
716
|
}, [bffDataSource]);
|
716
717
|
// bff API 请求方法
|
717
718
|
const bffFetch = useCallback((path, options, isBota = true) => {
|
718
|
-
var _a;
|
719
|
+
var _a, _b;
|
719
720
|
if (!bffDataSource)
|
720
721
|
return;
|
721
722
|
const url = bffDataSource.url;
|
@@ -729,7 +730,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
729
730
|
val.split('=')[1];
|
730
731
|
});
|
731
732
|
return window
|
732
|
-
.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
|
733
|
+
.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
|
733
734
|
? JSON.stringify({
|
734
735
|
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
735
736
|
})
|
@@ -973,6 +974,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
973
974
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
974
975
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
975
976
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
977
|
+
if (isDiyH5) {
|
978
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
979
|
+
}
|
976
980
|
}
|
977
981
|
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));
|
978
982
|
if (isNotNullList) {
|
@@ -1012,12 +1016,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1012
1016
|
if (rtcList.length <= 0) {
|
1013
1017
|
return;
|
1014
1018
|
}
|
1019
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
1020
|
+
setRtcList(rtcList.concat(firstRtcList));
|
1021
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
1022
|
+
return;
|
1023
|
+
}
|
1015
1024
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
1016
1025
|
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 })));
|
1017
1026
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
1018
1027
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
1019
1028
|
return data;
|
1020
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
1029
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
1021
1030
|
const refreshFeSession = useCallback((enableReSid, event) => {
|
1022
1031
|
var _a, _b, _c, _d, _e;
|
1023
1032
|
let expire = false;
|
@@ -1244,7 +1253,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1244
1253
|
}
|
1245
1254
|
}), [bffFetch, utmVal]);
|
1246
1255
|
const ctaEvent = useCallback((eventInfo, rec, product, position) => {
|
1247
|
-
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;
|
1256
|
+
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;
|
1248
1257
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1249
1258
|
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);
|
1250
1259
|
let fromKName = '';
|
@@ -1262,7 +1271,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1262
1271
|
}
|
1263
1272
|
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;
|
1264
1273
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1265
|
-
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: (
|
1274
|
+
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 })
|
1266
1275
|
});
|
1267
1276
|
}, [bffEventReport, isFromHashtag]);
|
1268
1277
|
const h5EnterLink = useCallback(() => {
|
@@ -1364,6 +1373,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1364
1373
|
}
|
1365
1374
|
setRtcList(list);
|
1366
1375
|
setCacheRtcList(list);
|
1376
|
+
if (isDiyH5) {
|
1377
|
+
setFirstRtcList(list);
|
1378
|
+
}
|
1367
1379
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1368
1380
|
if (channel) {
|
1369
1381
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1399,6 +1411,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1399
1411
|
}
|
1400
1412
|
setRtcList(list);
|
1401
1413
|
setCacheRtcList(list);
|
1414
|
+
if (isDiyH5) {
|
1415
|
+
setFirstRtcList(list);
|
1416
|
+
}
|
1402
1417
|
}
|
1403
1418
|
})
|
1404
1419
|
.finally(() => {
|
@@ -1462,7 +1477,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1462
1477
|
refreshFeSession,
|
1463
1478
|
getAccount,
|
1464
1479
|
accountSonsent,
|
1465
|
-
isDiyH5
|
1480
|
+
isDiyH5,
|
1481
|
+
firstRtcList
|
1466
1482
|
} }, 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({
|
1467
1483
|
rtcList,
|
1468
1484
|
mutateLike: bffMutateLike,
|
@@ -1923,14 +1939,14 @@ var settingRender$f = [
|
|
1923
1939
|
* @Author: binruan@chatlabs.com
|
1924
1940
|
* @Date: 2024-03-12 10:59:06
|
1925
1941
|
* @LastEditors: binruan@chatlabs.com
|
1926
|
-
* @LastEditTime:
|
1942
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
1927
1943
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1928
1944
|
*
|
1929
1945
|
*/
|
1930
1946
|
function useEventReport() {
|
1931
1947
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1932
1948
|
const jumpToWeb = useCallback((e, data, product, cta, position, traceInfo) => {
|
1933
|
-
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;
|
1949
|
+
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;
|
1934
1950
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1935
1951
|
if (i !== -1) {
|
1936
1952
|
return;
|
@@ -1963,11 +1979,11 @@ function useEventReport() {
|
|
1963
1979
|
contentFormat = 'image';
|
1964
1980
|
}
|
1965
1981
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1966
|
-
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 : '',
|
1982
|
+
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 }))
|
1967
1983
|
});
|
1968
1984
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1969
1985
|
const productView = useCallback((data, product, cta, viewTime, position) => {
|
1970
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
1986
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
1971
1987
|
let fromKName = '';
|
1972
1988
|
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))) {
|
1973
1989
|
fromKName = 'pdpPage';
|
@@ -1986,8 +2002,9 @@ function useEventReport() {
|
|
1986
2002
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
1987
2003
|
position: position + '',
|
1988
2004
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
2005
|
+
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 : '',
|
1989
2006
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
1990
|
-
traceInfo: (
|
2007
|
+
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 : '',
|
1991
2008
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
1992
2009
|
eventSubject: 'productView',
|
1993
2010
|
eventDescription: 'User browsed the product'
|
@@ -15802,7 +15819,7 @@ function WaterfallList(_a) {
|
|
15802
15819
|
* @Author: binruan@chatlabs.com
|
15803
15820
|
* @Date: 2024-01-10 10:58:24
|
15804
15821
|
* @LastEditors: binruan@chatlabs.com
|
15805
|
-
* @LastEditTime: 2025-
|
15822
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
15806
15823
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15807
15824
|
*
|
15808
15825
|
*/
|
@@ -15840,7 +15857,7 @@ const WaterFall = (props) => {
|
|
15840
15857
|
}
|
15841
15858
|
}, [waterFallData]);
|
15842
15859
|
const reportTagsView = useCallback(() => {
|
15843
|
-
var _a, _b, _c, _d, _e, _f;
|
15860
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
15844
15861
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15845
15862
|
if (!rec)
|
15846
15863
|
return;
|
@@ -15860,9 +15877,10 @@ const WaterFall = (props) => {
|
|
15860
15877
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15861
15878
|
eventInfo: {
|
15862
15879
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15880
|
+
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 : '',
|
15863
15881
|
position: cacheActiveIndex + '',
|
15864
|
-
contentTags: JSON.stringify((
|
15865
|
-
traceInfo: (
|
15882
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
15883
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
15866
15884
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15867
15885
|
fromKName,
|
15868
15886
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17944,7 +17962,7 @@ const LikeButton = (_a) => {
|
|
17944
17962
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17945
17963
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17946
17964
|
const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17947
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17965
|
+
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;
|
17948
17966
|
if (state) {
|
17949
17967
|
// 先设置状态
|
17950
17968
|
setState(false);
|
@@ -17954,11 +17972,12 @@ const LikeButton = (_a) => {
|
|
17954
17972
|
eventSubject: 'favoriteContentCanceled',
|
17955
17973
|
eventDescription: 'This content was unfavorite by the user',
|
17956
17974
|
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 : '',
|
17957
|
-
|
17958
|
-
|
17975
|
+
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 : '',
|
17976
|
+
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 : '',
|
17977
|
+
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 : []),
|
17959
17978
|
position: position + '',
|
17960
|
-
contentFormat: ((
|
17961
|
-
traceInfo: (
|
17979
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
17980
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
17962
17981
|
}
|
17963
17982
|
});
|
17964
17983
|
// 如果接口调用失败,则回滚状态
|
@@ -17966,40 +17985,41 @@ const LikeButton = (_a) => {
|
|
17966
17985
|
setState(true);
|
17967
17986
|
}
|
17968
17987
|
else {
|
17969
|
-
const nRtcList = (
|
17988
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17970
17989
|
if (index === position) {
|
17971
17990
|
item.isCollected = false;
|
17972
17991
|
}
|
17973
17992
|
return item;
|
17974
|
-
})) !== null &&
|
17993
|
+
})) !== null && _s !== void 0 ? _s : [];
|
17975
17994
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17976
17995
|
}
|
17977
17996
|
}
|
17978
17997
|
else {
|
17979
17998
|
setState(true);
|
17980
|
-
const result = (
|
17999
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
17981
18000
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17982
18001
|
eventInfo: {
|
17983
18002
|
eventSubject: 'favoriteContent',
|
17984
18003
|
eventDescription: 'This content was favorite by the user',
|
17985
|
-
contentId: (
|
17986
|
-
|
17987
|
-
|
18004
|
+
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 : '',
|
18005
|
+
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 : '',
|
18006
|
+
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 : '',
|
18007
|
+
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 : []),
|
17988
18008
|
position: position + '',
|
17989
|
-
contentFormat: ((
|
17990
|
-
traceInfo: (
|
18009
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
18010
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
17991
18011
|
}
|
17992
18012
|
});
|
17993
18013
|
if (!result) {
|
17994
18014
|
setState(false);
|
17995
18015
|
}
|
17996
18016
|
else {
|
17997
|
-
const nRtcList = (
|
18017
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17998
18018
|
if (index === position) {
|
17999
18019
|
item.isCollected = true;
|
18000
18020
|
}
|
18001
18021
|
return item;
|
18002
|
-
})) !== null &&
|
18022
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
18003
18023
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
18004
18024
|
}
|
18005
18025
|
}
|
@@ -18036,7 +18056,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
18036
18056
|
const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
18037
18057
|
var _a, _b;
|
18038
18058
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
18039
|
-
const { bffEventReport, sxpParameter,
|
18059
|
+
const { bffEventReport, sxpParameter, firstRtcList, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
18040
18060
|
const videoStartTime = useRef(0);
|
18041
18061
|
const [isLoadFinish, setIsLoadFinish] = useState(false);
|
18042
18062
|
const { isActive } = useSwiperSlide();
|
@@ -18102,6 +18122,23 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18102
18122
|
return;
|
18103
18123
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18104
18124
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18125
|
+
const handleEnd = () => {
|
18126
|
+
var _a, _b, _c, _d, _e, _f;
|
18127
|
+
if (!videoRef.current)
|
18128
|
+
return;
|
18129
|
+
if (isDiyH5) {
|
18130
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
18131
|
+
if (!loopPlayRef.current)
|
18132
|
+
return;
|
18133
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18134
|
+
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;
|
18135
|
+
(_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);
|
18136
|
+
}
|
18137
|
+
}
|
18138
|
+
else {
|
18139
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
18140
|
+
}
|
18141
|
+
};
|
18105
18142
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
18106
18143
|
const handlePlaying = useCallback(() => {
|
18107
18144
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -18110,7 +18147,7 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18110
18147
|
setIsLoadFinish(true);
|
18111
18148
|
}, []);
|
18112
18149
|
const handleStartPlay = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
18113
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
18150
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
18114
18151
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18115
18152
|
return;
|
18116
18153
|
setIsPauseVideo(false);
|
@@ -18121,16 +18158,11 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18121
18158
|
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);
|
18122
18159
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
18123
18160
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
18124
|
-
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 : '',
|
18161
|
+
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) + '' }))
|
18125
18162
|
});
|
18126
18163
|
isFirstPlayRef.current = false;
|
18127
18164
|
}
|
18128
18165
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18129
|
-
const setCurrentTimeByStartTime = useCallback(() => {
|
18130
|
-
if (isDiyH5) {
|
18131
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18132
|
-
}
|
18133
|
-
}, []);
|
18134
18166
|
const handLoadeddata = useCallback(() => {
|
18135
18167
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
18136
18168
|
return;
|
@@ -18155,13 +18187,12 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18155
18187
|
const handleLoadedmetadata = useCallback(() => {
|
18156
18188
|
if (!videoRef.current)
|
18157
18189
|
return;
|
18158
|
-
setCurrentTimeByStartTime();
|
18159
18190
|
loadedTimeRef.current = new Date();
|
18160
18191
|
handleStartPlay();
|
18161
18192
|
handLoadeddata();
|
18162
18193
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
18163
18194
|
const handleClickVideo = useCallback((type) => () => {
|
18164
|
-
var _a, _b, _c, _d, _e
|
18195
|
+
var _a, _b, _c, _d, _e;
|
18165
18196
|
if (!videoRef.current)
|
18166
18197
|
return;
|
18167
18198
|
if (!isLoadFinish)
|
@@ -18182,20 +18213,17 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18182
18213
|
break;
|
18183
18214
|
default:
|
18184
18215
|
if (isPause) {
|
18185
|
-
|
18186
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18187
|
-
}
|
18188
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18216
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
18189
18217
|
}
|
18190
18218
|
else {
|
18191
|
-
(
|
18219
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
18192
18220
|
}
|
18193
18221
|
setIsPauseVideo(!isPause);
|
18194
18222
|
break;
|
18195
18223
|
}
|
18196
18224
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18197
18225
|
const handlePause = useCallback(() => {
|
18198
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18226
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
18199
18227
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18200
18228
|
return;
|
18201
18229
|
if (activeIndex !== index)
|
@@ -18211,14 +18239,15 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18211
18239
|
eventSubject: 'playOverVideo',
|
18212
18240
|
eventDescription: 'User finished playing the video',
|
18213
18241
|
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 : '',
|
18214
|
-
|
18242
|
+
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 : '',
|
18243
|
+
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 : '',
|
18215
18244
|
endTime: videoCurrentTime,
|
18216
18245
|
videoDuration,
|
18217
18246
|
playDuration,
|
18218
|
-
contentTags: JSON.stringify((
|
18247
|
+
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 : []),
|
18219
18248
|
position: index + '',
|
18220
18249
|
contentFormat: 'video',
|
18221
|
-
traceInfo: (
|
18250
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
18222
18251
|
}
|
18223
18252
|
});
|
18224
18253
|
}
|
@@ -18226,27 +18255,8 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18226
18255
|
const handleWaiting = useCallback(() => {
|
18227
18256
|
setWaiting(true);
|
18228
18257
|
}, []);
|
18229
|
-
const handleTimeUpload = () => {
|
18230
|
-
if (!videoRef.current || !isDiyH5)
|
18231
|
-
return;
|
18232
|
-
setTimeout(() => {
|
18233
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18234
|
-
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)) {
|
18235
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18236
|
-
if (!loopPlayRef.current)
|
18237
|
-
return;
|
18238
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18239
|
-
(_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);
|
18240
|
-
}
|
18241
|
-
else {
|
18242
|
-
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;
|
18243
|
-
(_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);
|
18244
|
-
}
|
18245
|
-
}
|
18246
|
-
});
|
18247
|
-
};
|
18248
18258
|
useEffect(() => {
|
18249
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18259
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18250
18260
|
if (!isActive)
|
18251
18261
|
return;
|
18252
18262
|
const videoSrc = videoUrl;
|
@@ -18267,7 +18277,6 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18267
18277
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18268
18278
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18269
18279
|
var _a;
|
18270
|
-
setCurrentTimeByStartTime();
|
18271
18280
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18272
18281
|
});
|
18273
18282
|
}
|
@@ -18281,12 +18290,11 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18281
18290
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18282
18291
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18283
18292
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18284
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18293
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
18285
18294
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18286
18295
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18287
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18288
18296
|
return () => {
|
18289
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18297
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18290
18298
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18291
18299
|
if (!isPause)
|
18292
18300
|
handlePause();
|
@@ -18298,10 +18306,9 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18298
18306
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18299
18307
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18300
18308
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18301
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18309
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
18302
18310
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18303
18311
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18304
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18305
18312
|
};
|
18306
18313
|
}, [isActive]);
|
18307
18314
|
useEffect(() => {
|
@@ -18512,19 +18519,45 @@ const Picture = (props) => {
|
|
18512
18519
|
}, onLoad: onShowFirstImage }))));
|
18513
18520
|
};
|
18514
18521
|
|
18515
|
-
const PictureGroup$4 = ({ imgUrls,
|
18522
|
+
const PictureGroup$4 = forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
18516
18523
|
var _a, _b;
|
18517
18524
|
const { isActive } = useSwiperSlide();
|
18518
|
-
const {
|
18525
|
+
const { firstRtcList, openHashtag, isDiyH5 } = useSxpDataSource();
|
18519
18526
|
const [isLoad, setIsLoad] = useState(false);
|
18520
18527
|
const [imgInfo, setImgInfo] = useState();
|
18521
18528
|
const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
|
18522
|
-
const
|
18529
|
+
const imgsSwiperRef = useRef();
|
18523
18530
|
const isFirstPlayRef = useRef(true);
|
18531
|
+
const loopPlayRef = useRef(true);
|
18524
18532
|
const initTime = new Date();
|
18533
|
+
useImperativeHandle(ref, () => {
|
18534
|
+
return {
|
18535
|
+
setLoopPlay(v) {
|
18536
|
+
loopPlayRef.current = v;
|
18537
|
+
}
|
18538
|
+
};
|
18539
|
+
});
|
18540
|
+
useEffect(() => {
|
18541
|
+
let timerId;
|
18542
|
+
if (isLoad && isActive && isDiyH5) {
|
18543
|
+
timerId = setTimeout(() => {
|
18544
|
+
var _a, _b, _c, _d;
|
18545
|
+
if (!loopPlayRef.current)
|
18546
|
+
return;
|
18547
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18548
|
+
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;
|
18549
|
+
(_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);
|
18550
|
+
}
|
18551
|
+
}, 3000);
|
18552
|
+
}
|
18553
|
+
return () => {
|
18554
|
+
if (timerId)
|
18555
|
+
clearTimeout(timerId);
|
18556
|
+
};
|
18557
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
|
18525
18558
|
useEffect(() => {
|
18526
18559
|
if (isLoad && isActive) {
|
18527
|
-
(
|
18560
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
18528
18561
|
if (openHashtag) {
|
18529
18562
|
onViewImageEndEvent(rec);
|
18530
18563
|
}
|
@@ -18534,7 +18567,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18534
18567
|
}
|
18535
18568
|
}
|
18536
18569
|
else {
|
18537
|
-
(
|
18570
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
18538
18571
|
}
|
18539
18572
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18540
18573
|
const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18561,13 +18594,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18561
18594
|
};
|
18562
18595
|
}, [isActive, imgInfo]);
|
18563
18596
|
const handleMouseEnter = useCallback(() => {
|
18564
|
-
if (
|
18565
|
-
|
18597
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18598
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
18566
18599
|
}
|
18567
18600
|
}, []);
|
18568
18601
|
const handleMouseLeave = useCallback(() => {
|
18569
|
-
if (
|
18570
|
-
|
18602
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18603
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
18571
18604
|
}
|
18572
18605
|
}, []);
|
18573
18606
|
const handleSlideChange = useCallback((swiper) => {
|
@@ -18588,7 +18621,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18588
18621
|
enabled: true
|
18589
18622
|
}
|
18590
18623
|
}
|
18591
|
-
: {}), { loop: true, ref:
|
18624
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18592
18625
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18593
18626
|
fontSize: '14px'
|
18594
18627
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18605,7 +18638,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18605
18638
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18606
18639
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18607
18640
|
}))));
|
18608
|
-
};
|
18641
|
+
});
|
18609
18642
|
var PictureGroup$5 = memo(PictureGroup$4);
|
18610
18643
|
|
18611
18644
|
/*
|
@@ -18885,7 +18918,7 @@ var NavBack$1 = memo(NavBack);
|
|
18885
18918
|
* @Author: binruan@chatlabs.com
|
18886
18919
|
* @Date: 2024-03-20 10:27:31
|
18887
18920
|
* @LastEditors: binruan@chatlabs.com
|
18888
|
-
* @LastEditTime: 2025-05-
|
18921
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
18889
18922
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18890
18923
|
*
|
18891
18924
|
*/
|
@@ -18905,6 +18938,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18905
18938
|
const skipLinkRef = useRef(false);
|
18906
18939
|
const [pageNum, setPageNum] = useState(2);
|
18907
18940
|
const videoWidgetRef = useRef(null);
|
18941
|
+
const pictureGroupRef = useRef(null);
|
18908
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();
|
18909
18943
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18910
18944
|
const isShowFingerTip = useMemo(() => {
|
@@ -18952,7 +18986,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18952
18986
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18953
18987
|
}, [data, ctaType, swiperRef]);
|
18954
18988
|
const handleSessionCompleted = useCallback((fk) => {
|
18955
|
-
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, _w, _x, _y;
|
18956
18990
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18957
18991
|
let fromKName = '';
|
18958
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))) {
|
@@ -18979,12 +19013,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18979
19013
|
eventSubject: 'sessionCompleted',
|
18980
19014
|
eventDescription: 'Session completed',
|
18981
19015
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18982
|
-
|
19016
|
+
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 : '',
|
19017
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18983
19018
|
position: activeIndex + '',
|
18984
19019
|
fromKName: fk || fromKName,
|
18985
19020
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18986
|
-
ctatId: (
|
18987
|
-
traceInfo: (
|
19021
|
+
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 : '',
|
19022
|
+
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 : ''
|
18988
19023
|
}
|
18989
19024
|
});
|
18990
19025
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -19043,8 +19078,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19043
19078
|
refreshFeSession
|
19044
19079
|
]);
|
19045
19080
|
const handleSessionExpire = useCallback(debounce(() => {
|
19046
|
-
var _a;
|
19081
|
+
var _a, _b;
|
19047
19082
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19083
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19048
19084
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
19049
19085
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
19050
19086
|
useEffect(() => {
|
@@ -19114,18 +19150,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19114
19150
|
return null;
|
19115
19151
|
}, [globalConfig, activeIndex, visList]);
|
19116
19152
|
const renderContent = useCallback((rec, index) => {
|
19117
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
19153
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
19118
19154
|
if (rec === 'organic menu') {
|
19119
19155
|
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)));
|
19120
19156
|
}
|
19121
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
19157
|
+
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)) {
|
19122
19158
|
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 })));
|
19123
19159
|
}
|
19124
|
-
if ((
|
19125
|
-
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 }));
|
19160
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
19161
|
+
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 })));
|
19126
19162
|
}
|
19127
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
19128
|
-
return (
|
19163
|
+
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) {
|
19164
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
19129
19165
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19130
19166
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
19131
19167
|
const Component = withBindDataSource(t);
|
@@ -19163,7 +19199,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19163
19199
|
};
|
19164
19200
|
}, [isShowMore]);
|
19165
19201
|
const renderBottom = useCallback((rec, index) => {
|
19166
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19202
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
19167
19203
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19168
19204
|
let cta = null;
|
19169
19205
|
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) {
|
@@ -19172,24 +19208,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19172
19208
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19173
19209
|
cta = '商品CTA';
|
19174
19210
|
}
|
19211
|
+
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)) {
|
19212
|
+
cta = '服务CTA';
|
19213
|
+
}
|
19175
19214
|
else {
|
19176
|
-
cta = (
|
19215
|
+
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;
|
19177
19216
|
}
|
19178
19217
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19179
19218
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
19180
19219
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
19181
|
-
((
|
19220
|
+
((_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));
|
19182
19221
|
return (React.createElement(React.Fragment, null,
|
19183
19222
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19184
|
-
((
|
19185
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19223
|
+
((_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' }),
|
19224
|
+
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` } },
|
19186
19225
|
React.createElement(Nudge, { nudge: nudge }),
|
19187
19226
|
((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' },
|
19188
19227
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
19189
19228
|
React.createElement("div", null,
|
19190
|
-
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: (
|
19229
|
+
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 }),
|
19191
19230
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19192
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19231
|
+
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) }))),
|
19193
19232
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19194
19233
|
}
|
19195
19234
|
return null;
|
@@ -19228,7 +19267,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19228
19267
|
return null;
|
19229
19268
|
}, [globalConfig, waterFallData]);
|
19230
19269
|
const handleViewImageStartEnd = (item) => {
|
19231
|
-
var _a, _b, _c, _d, _e, _f;
|
19270
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19232
19271
|
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)) {
|
19233
19272
|
const endTime = Date.now();
|
19234
19273
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19237,10 +19276,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19237
19276
|
eventSubject: 'viewImageCarouselEnd',
|
19238
19277
|
eventDescription: 'User end view the image carousel',
|
19239
19278
|
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 : '',
|
19240
|
-
|
19279
|
+
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 : '',
|
19280
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19241
19281
|
imageEndTime: `${endTime}`,
|
19242
19282
|
playDuration: `${duration}`,
|
19243
|
-
contentTags: JSON.stringify((
|
19283
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19244
19284
|
position: activeIndex + '',
|
19245
19285
|
contentFormat: 'image',
|
19246
19286
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19249,7 +19289,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19249
19289
|
}
|
19250
19290
|
};
|
19251
19291
|
const handleSlideSkip = (item, position) => {
|
19252
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19292
|
+
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;
|
19253
19293
|
if (isPreview || waterFallData)
|
19254
19294
|
return;
|
19255
19295
|
const t = new Date() - curTime.current;
|
@@ -19275,7 +19315,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19275
19315
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19276
19316
|
position: position + '',
|
19277
19317
|
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 : '',
|
19278
|
-
|
19318
|
+
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 : '',
|
19319
|
+
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 : '',
|
19279
19320
|
contentFormat
|
19280
19321
|
}
|
19281
19322
|
});
|
@@ -19285,7 +19326,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19285
19326
|
}
|
19286
19327
|
};
|
19287
19328
|
const handleScrollEvent = (swiper) => {
|
19288
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19329
|
+
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;
|
19289
19330
|
const item = data[swiper.previousIndex];
|
19290
19331
|
if (!item)
|
19291
19332
|
return;
|
@@ -19302,11 +19343,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19302
19343
|
eventSubject: 'scrollDown',
|
19303
19344
|
eventDescription: 'User scroll down',
|
19304
19345
|
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 : '',
|
19305
|
-
|
19346
|
+
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 : '',
|
19347
|
+
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 : '',
|
19306
19348
|
requestId: null,
|
19307
|
-
traceInfo: (
|
19349
|
+
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 : '',
|
19308
19350
|
contentFormat,
|
19309
|
-
position: ((
|
19351
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
19310
19352
|
}
|
19311
19353
|
});
|
19312
19354
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19318,12 +19360,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19318
19360
|
eventInfo: {
|
19319
19361
|
eventSubject: 'scrollUp',
|
19320
19362
|
eventDescription: 'User scroll up',
|
19321
|
-
contentId: (
|
19322
|
-
|
19363
|
+
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 : '',
|
19364
|
+
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 : '',
|
19365
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19323
19366
|
requestId: null,
|
19324
|
-
traceInfo: (
|
19367
|
+
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 : '',
|
19325
19368
|
contentFormat,
|
19326
|
-
position: ((
|
19369
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
19327
19370
|
}
|
19328
19371
|
});
|
19329
19372
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19349,7 +19392,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19349
19392
|
}
|
19350
19393
|
}, [openHashtag, data, activeIndex]);
|
19351
19394
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19352
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19395
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
19353
19396
|
const item = data[activeIndex];
|
19354
19397
|
// 如果是图片集则上报事件
|
19355
19398
|
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)) {
|
@@ -19360,9 +19403,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19360
19403
|
eventSubject: 'viewImageCarouselStart',
|
19361
19404
|
eventDescription: 'User start view the image carousel',
|
19362
19405
|
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 : '',
|
19363
|
-
|
19406
|
+
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 : '',
|
19407
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19364
19408
|
imageStartTime: `${startTime}`,
|
19365
|
-
contentTags: JSON.stringify((
|
19409
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19366
19410
|
position: activeIndex + '',
|
19367
19411
|
contentFormat: 'image',
|
19368
19412
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19372,11 +19416,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19372
19416
|
if (enableCapi) {
|
19373
19417
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19374
19418
|
eventName: 'ViewContent',
|
19375
|
-
product: (
|
19419
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
19376
19420
|
});
|
19377
19421
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19378
19422
|
eventName: 'PageView',
|
19379
|
-
product: (
|
19423
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
19380
19424
|
});
|
19381
19425
|
}
|
19382
19426
|
}
|
@@ -19468,15 +19512,20 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19468
19512
|
swiperRef.current.swiper.allowTouchMove = true;
|
19469
19513
|
}, 500);
|
19470
19514
|
}, onActiveIndexChange: (swiper) => {
|
19515
|
+
var _a, _b;
|
19471
19516
|
setActiveIndex(swiper.activeIndex);
|
19472
19517
|
if (openHashtag)
|
19473
19518
|
return;
|
19474
19519
|
// 处理上滑下滑事件
|
19475
19520
|
handleScrollEvent(swiper);
|
19476
|
-
if (waterFallData || isEditor
|
19521
|
+
if (waterFallData || isEditor)
|
19477
19522
|
return;
|
19478
19523
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19479
19524
|
if (!isLoadMore) {
|
19525
|
+
if (isDiyH5) {
|
19526
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19527
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19528
|
+
}
|
19480
19529
|
setIsLoadMore(true);
|
19481
19530
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19482
19531
|
var _a;
|
@@ -19529,7 +19578,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19529
19578
|
}, []);
|
19530
19579
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19531
19580
|
const handlePlaying = useCallback(() => {
|
19532
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19581
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19533
19582
|
setIsPauseVideo(false);
|
19534
19583
|
const item = data[index];
|
19535
19584
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19542,14 +19591,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19542
19591
|
eventSubject: 'playVideo',
|
19543
19592
|
eventDescription: 'User played the video',
|
19544
19593
|
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 : '',
|
19545
|
-
|
19594
|
+
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 : '',
|
19595
|
+
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 : '',
|
19546
19596
|
playType,
|
19547
19597
|
startTime: videoCurrentTime,
|
19548
19598
|
videoDuration,
|
19549
|
-
contentTags: JSON.stringify((
|
19599
|
+
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 : []),
|
19550
19600
|
position: index + '',
|
19551
19601
|
contentFormat: 'video',
|
19552
|
-
traceInfo: (
|
19602
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19553
19603
|
}
|
19554
19604
|
});
|
19555
19605
|
setIsFirstPlay(false);
|
@@ -19588,7 +19638,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19588
19638
|
}
|
19589
19639
|
}, [isLoadFinish]);
|
19590
19640
|
const onPause = useCallback(() => {
|
19591
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19641
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19592
19642
|
const item = data[index];
|
19593
19643
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19594
19644
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19599,14 +19649,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19599
19649
|
eventSubject: 'playOverVideo',
|
19600
19650
|
eventDescription: 'User finished playing the video',
|
19601
19651
|
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 : '',
|
19602
|
-
|
19652
|
+
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 : '',
|
19653
|
+
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 : '',
|
19603
19654
|
endTime: videoCurrentTime,
|
19604
19655
|
videoDuration,
|
19605
19656
|
playDuration,
|
19606
|
-
contentTags: JSON.stringify((
|
19657
|
+
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 : []),
|
19607
19658
|
position: index + '',
|
19608
19659
|
contentFormat: 'video',
|
19609
|
-
traceInfo: (
|
19660
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19610
19661
|
}
|
19611
19662
|
});
|
19612
19663
|
}
|