pb-sxp-ui 1.16.16 → 1.16.17
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 +182 -130
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +182 -130
- 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 +182 -130
- 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 +21 -4
- 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 +21 -4
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
@@ -644,6 +644,7 @@ const DEFAULT_TAG = 'FOR U';
|
|
644
644
|
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 }) => {
|
645
645
|
var _a, _b, _c, _d, _e;
|
646
646
|
const [rtcList, setRtcList] = React.useState([]);
|
647
|
+
const [firstRtcList, setFirstRtcList] = React.useState([]);
|
647
648
|
const [tagList, setTagList] = React.useState([]);
|
648
649
|
const [loading, setLoading] = React.useState(true);
|
649
650
|
const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
|
@@ -750,6 +751,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
750
751
|
val.split('=')[0];
|
751
752
|
val.split('=')[1];
|
752
753
|
});
|
754
|
+
options.body = Object.assign(Object.assign({}, options.body), { tenant_id: fakeUserId });
|
753
755
|
return window
|
754
756
|
.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
|
755
757
|
? JSON.stringify({
|
@@ -995,6 +997,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
995
997
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
996
998
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
997
999
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
1000
|
+
if (isDiyH5) {
|
1001
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
1002
|
+
}
|
998
1003
|
}
|
999
1004
|
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));
|
1000
1005
|
if (isNotNullList) {
|
@@ -1034,12 +1039,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1034
1039
|
if (rtcList.length <= 0) {
|
1035
1040
|
return;
|
1036
1041
|
}
|
1042
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
1043
|
+
setRtcList(rtcList.concat(firstRtcList));
|
1044
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
1045
|
+
return;
|
1046
|
+
}
|
1037
1047
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
1038
1048
|
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 })));
|
1039
1049
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
1040
1050
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
1041
1051
|
return data;
|
1042
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
1052
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
1043
1053
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
1044
1054
|
var _a, _b, _c, _d, _e;
|
1045
1055
|
let expire = false;
|
@@ -1266,7 +1276,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1266
1276
|
}
|
1267
1277
|
}), [bffFetch, utmVal]);
|
1268
1278
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
1269
|
-
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;
|
1279
|
+
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;
|
1270
1280
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1271
1281
|
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);
|
1272
1282
|
let fromKName = '';
|
@@ -1284,7 +1294,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1284
1294
|
}
|
1285
1295
|
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;
|
1286
1296
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1287
|
-
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: (
|
1297
|
+
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 })
|
1288
1298
|
});
|
1289
1299
|
}, [bffEventReport, isFromHashtag]);
|
1290
1300
|
const h5EnterLink = React.useCallback(() => {
|
@@ -1386,6 +1396,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1386
1396
|
}
|
1387
1397
|
setRtcList(list);
|
1388
1398
|
setCacheRtcList(list);
|
1399
|
+
if (isDiyH5) {
|
1400
|
+
setFirstRtcList(list);
|
1401
|
+
}
|
1389
1402
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1390
1403
|
if (channel) {
|
1391
1404
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1421,6 +1434,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1421
1434
|
}
|
1422
1435
|
setRtcList(list);
|
1423
1436
|
setCacheRtcList(list);
|
1437
|
+
if (isDiyH5) {
|
1438
|
+
setFirstRtcList(list);
|
1439
|
+
}
|
1424
1440
|
}
|
1425
1441
|
})
|
1426
1442
|
.finally(() => {
|
@@ -1484,7 +1500,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1484
1500
|
refreshFeSession,
|
1485
1501
|
getAccount,
|
1486
1502
|
accountSonsent,
|
1487
|
-
isDiyH5
|
1503
|
+
isDiyH5,
|
1504
|
+
firstRtcList
|
1488
1505
|
} }, 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({
|
1489
1506
|
rtcList,
|
1490
1507
|
mutateLike: bffMutateLike,
|
@@ -1945,14 +1962,14 @@ var settingRender$f = [
|
|
1945
1962
|
* @Author: binruan@chatlabs.com
|
1946
1963
|
* @Date: 2024-03-12 10:59:06
|
1947
1964
|
* @LastEditors: binruan@chatlabs.com
|
1948
|
-
* @LastEditTime:
|
1965
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
1949
1966
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1950
1967
|
*
|
1951
1968
|
*/
|
1952
1969
|
function useEventReport() {
|
1953
1970
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1954
1971
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
1955
|
-
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;
|
1972
|
+
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;
|
1956
1973
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1957
1974
|
if (i !== -1) {
|
1958
1975
|
return;
|
@@ -1985,11 +2002,11 @@ function useEventReport() {
|
|
1985
2002
|
contentFormat = 'image';
|
1986
2003
|
}
|
1987
2004
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1988
|
-
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 : '',
|
2005
|
+
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 }))
|
1989
2006
|
});
|
1990
2007
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1991
2008
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
1992
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
2009
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
1993
2010
|
let fromKName = '';
|
1994
2011
|
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))) {
|
1995
2012
|
fromKName = 'pdpPage';
|
@@ -2008,8 +2025,9 @@ function useEventReport() {
|
|
2008
2025
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
2009
2026
|
position: position + '',
|
2010
2027
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
2028
|
+
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 : '',
|
2011
2029
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
2012
|
-
traceInfo: (
|
2030
|
+
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 : '',
|
2013
2031
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
2014
2032
|
eventSubject: 'productView',
|
2015
2033
|
eventDescription: 'User browsed the product'
|
@@ -15824,7 +15842,7 @@ function WaterfallList(_a) {
|
|
15824
15842
|
* @Author: binruan@chatlabs.com
|
15825
15843
|
* @Date: 2024-01-10 10:58:24
|
15826
15844
|
* @LastEditors: binruan@chatlabs.com
|
15827
|
-
* @LastEditTime: 2025-
|
15845
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
15828
15846
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15829
15847
|
*
|
15830
15848
|
*/
|
@@ -15862,7 +15880,7 @@ const WaterFall = (props) => {
|
|
15862
15880
|
}
|
15863
15881
|
}, [waterFallData]);
|
15864
15882
|
const reportTagsView = React.useCallback(() => {
|
15865
|
-
var _a, _b, _c, _d, _e, _f;
|
15883
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
15866
15884
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15867
15885
|
if (!rec)
|
15868
15886
|
return;
|
@@ -15882,9 +15900,10 @@ const WaterFall = (props) => {
|
|
15882
15900
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15883
15901
|
eventInfo: {
|
15884
15902
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15903
|
+
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 : '',
|
15885
15904
|
position: cacheActiveIndex + '',
|
15886
|
-
contentTags: JSON.stringify((
|
15887
|
-
traceInfo: (
|
15905
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
15906
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
15888
15907
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15889
15908
|
fromKName,
|
15890
15909
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17966,7 +17985,7 @@ const LikeButton = (_a) => {
|
|
17966
17985
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17967
17986
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17968
17987
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17969
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17988
|
+
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;
|
17970
17989
|
if (state) {
|
17971
17990
|
// 先设置状态
|
17972
17991
|
setState(false);
|
@@ -17976,11 +17995,12 @@ const LikeButton = (_a) => {
|
|
17976
17995
|
eventSubject: 'favoriteContentCanceled',
|
17977
17996
|
eventDescription: 'This content was unfavorite by the user',
|
17978
17997
|
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 : '',
|
17979
|
-
|
17980
|
-
|
17998
|
+
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 : '',
|
17999
|
+
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 : '',
|
18000
|
+
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 : []),
|
17981
18001
|
position: position + '',
|
17982
|
-
contentFormat: ((
|
17983
|
-
traceInfo: (
|
18002
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
18003
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
17984
18004
|
}
|
17985
18005
|
});
|
17986
18006
|
// 如果接口调用失败,则回滚状态
|
@@ -17988,40 +18008,41 @@ const LikeButton = (_a) => {
|
|
17988
18008
|
setState(true);
|
17989
18009
|
}
|
17990
18010
|
else {
|
17991
|
-
const nRtcList = (
|
18011
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17992
18012
|
if (index === position) {
|
17993
18013
|
item.isCollected = false;
|
17994
18014
|
}
|
17995
18015
|
return item;
|
17996
|
-
})) !== null &&
|
18016
|
+
})) !== null && _s !== void 0 ? _s : [];
|
17997
18017
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17998
18018
|
}
|
17999
18019
|
}
|
18000
18020
|
else {
|
18001
18021
|
setState(true);
|
18002
|
-
const result = (
|
18022
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
18003
18023
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
18004
18024
|
eventInfo: {
|
18005
18025
|
eventSubject: 'favoriteContent',
|
18006
18026
|
eventDescription: 'This content was favorite by the user',
|
18007
|
-
contentId: (
|
18008
|
-
|
18009
|
-
|
18027
|
+
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 : '',
|
18028
|
+
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 : '',
|
18029
|
+
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 : '',
|
18030
|
+
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 : []),
|
18010
18031
|
position: position + '',
|
18011
|
-
contentFormat: ((
|
18012
|
-
traceInfo: (
|
18032
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
18033
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
18013
18034
|
}
|
18014
18035
|
});
|
18015
18036
|
if (!result) {
|
18016
18037
|
setState(false);
|
18017
18038
|
}
|
18018
18039
|
else {
|
18019
|
-
const nRtcList = (
|
18040
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
18020
18041
|
if (index === position) {
|
18021
18042
|
item.isCollected = true;
|
18022
18043
|
}
|
18023
18044
|
return item;
|
18024
|
-
})) !== null &&
|
18045
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
18025
18046
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
18026
18047
|
}
|
18027
18048
|
}
|
@@ -18058,7 +18079,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
18058
18079
|
const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
18059
18080
|
var _a, _b;
|
18060
18081
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
18061
|
-
const { bffEventReport, sxpParameter,
|
18082
|
+
const { bffEventReport, sxpParameter, firstRtcList, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
18062
18083
|
const videoStartTime = React.useRef(0);
|
18063
18084
|
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
18064
18085
|
const { isActive } = useSwiperSlide();
|
@@ -18124,6 +18145,23 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18124
18145
|
return;
|
18125
18146
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18126
18147
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18148
|
+
const handleEnd = () => {
|
18149
|
+
var _a, _b, _c, _d, _e, _f;
|
18150
|
+
if (!videoRef.current)
|
18151
|
+
return;
|
18152
|
+
if (isDiyH5) {
|
18153
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
18154
|
+
if (!loopPlayRef.current)
|
18155
|
+
return;
|
18156
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18157
|
+
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;
|
18158
|
+
(_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);
|
18159
|
+
}
|
18160
|
+
}
|
18161
|
+
else {
|
18162
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
18163
|
+
}
|
18164
|
+
};
|
18127
18165
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
18128
18166
|
const handlePlaying = React.useCallback(() => {
|
18129
18167
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -18132,7 +18170,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18132
18170
|
setIsLoadFinish(true);
|
18133
18171
|
}, []);
|
18134
18172
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
18135
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
18173
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
18136
18174
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18137
18175
|
return;
|
18138
18176
|
setIsPauseVideo(false);
|
@@ -18143,16 +18181,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18143
18181
|
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);
|
18144
18182
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
18145
18183
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
18146
|
-
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 : '',
|
18184
|
+
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) + '' }))
|
18147
18185
|
});
|
18148
18186
|
isFirstPlayRef.current = false;
|
18149
18187
|
}
|
18150
18188
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18151
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
18152
|
-
if (isDiyH5) {
|
18153
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18154
|
-
}
|
18155
|
-
}, []);
|
18156
18189
|
const handLoadeddata = React.useCallback(() => {
|
18157
18190
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
18158
18191
|
return;
|
@@ -18177,13 +18210,12 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18177
18210
|
const handleLoadedmetadata = React.useCallback(() => {
|
18178
18211
|
if (!videoRef.current)
|
18179
18212
|
return;
|
18180
|
-
setCurrentTimeByStartTime();
|
18181
18213
|
loadedTimeRef.current = new Date();
|
18182
18214
|
handleStartPlay();
|
18183
18215
|
handLoadeddata();
|
18184
18216
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
18185
18217
|
const handleClickVideo = React.useCallback((type) => () => {
|
18186
|
-
var _a, _b, _c, _d, _e
|
18218
|
+
var _a, _b, _c, _d, _e;
|
18187
18219
|
if (!videoRef.current)
|
18188
18220
|
return;
|
18189
18221
|
if (!isLoadFinish)
|
@@ -18204,20 +18236,17 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18204
18236
|
break;
|
18205
18237
|
default:
|
18206
18238
|
if (isPause) {
|
18207
|
-
|
18208
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18209
|
-
}
|
18210
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18239
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
18211
18240
|
}
|
18212
18241
|
else {
|
18213
|
-
(
|
18242
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
18214
18243
|
}
|
18215
18244
|
setIsPauseVideo(!isPause);
|
18216
18245
|
break;
|
18217
18246
|
}
|
18218
18247
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18219
18248
|
const handlePause = React.useCallback(() => {
|
18220
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18249
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
18221
18250
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18222
18251
|
return;
|
18223
18252
|
if (activeIndex !== index)
|
@@ -18233,14 +18262,15 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18233
18262
|
eventSubject: 'playOverVideo',
|
18234
18263
|
eventDescription: 'User finished playing the video',
|
18235
18264
|
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 : '',
|
18236
|
-
|
18265
|
+
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 : '',
|
18266
|
+
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 : '',
|
18237
18267
|
endTime: videoCurrentTime,
|
18238
18268
|
videoDuration,
|
18239
18269
|
playDuration,
|
18240
|
-
contentTags: JSON.stringify((
|
18270
|
+
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 : []),
|
18241
18271
|
position: index + '',
|
18242
18272
|
contentFormat: 'video',
|
18243
|
-
traceInfo: (
|
18273
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
18244
18274
|
}
|
18245
18275
|
});
|
18246
18276
|
}
|
@@ -18248,27 +18278,8 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18248
18278
|
const handleWaiting = React.useCallback(() => {
|
18249
18279
|
setWaiting(true);
|
18250
18280
|
}, []);
|
18251
|
-
const handleTimeUpload = () => {
|
18252
|
-
if (!videoRef.current || !isDiyH5)
|
18253
|
-
return;
|
18254
|
-
setTimeout(() => {
|
18255
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18256
|
-
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)) {
|
18257
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18258
|
-
if (!loopPlayRef.current)
|
18259
|
-
return;
|
18260
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18261
|
-
(_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);
|
18262
|
-
}
|
18263
|
-
else {
|
18264
|
-
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;
|
18265
|
-
(_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);
|
18266
|
-
}
|
18267
|
-
}
|
18268
|
-
});
|
18269
|
-
};
|
18270
18281
|
React.useEffect(() => {
|
18271
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18282
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18272
18283
|
if (!isActive)
|
18273
18284
|
return;
|
18274
18285
|
const videoSrc = videoUrl;
|
@@ -18289,7 +18300,6 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18289
18300
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18290
18301
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18291
18302
|
var _a;
|
18292
|
-
setCurrentTimeByStartTime();
|
18293
18303
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18294
18304
|
});
|
18295
18305
|
}
|
@@ -18303,12 +18313,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18303
18313
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18304
18314
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18305
18315
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18306
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18316
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
18307
18317
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18308
18318
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18309
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18310
18319
|
return () => {
|
18311
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18320
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18312
18321
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18313
18322
|
if (!isPause)
|
18314
18323
|
handlePause();
|
@@ -18320,10 +18329,9 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18320
18329
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18321
18330
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18322
18331
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18323
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18332
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
18324
18333
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18325
18334
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18326
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18327
18335
|
};
|
18328
18336
|
}, [isActive]);
|
18329
18337
|
React.useEffect(() => {
|
@@ -18534,19 +18542,45 @@ const Picture = (props) => {
|
|
18534
18542
|
}, onLoad: onShowFirstImage }))));
|
18535
18543
|
};
|
18536
18544
|
|
18537
|
-
const PictureGroup$4 = ({ imgUrls,
|
18545
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
18538
18546
|
var _a, _b;
|
18539
18547
|
const { isActive } = useSwiperSlide();
|
18540
|
-
const {
|
18548
|
+
const { firstRtcList, openHashtag, isDiyH5 } = useSxpDataSource();
|
18541
18549
|
const [isLoad, setIsLoad] = React.useState(false);
|
18542
18550
|
const [imgInfo, setImgInfo] = React.useState();
|
18543
18551
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
18544
|
-
const
|
18552
|
+
const imgsSwiperRef = React.useRef();
|
18545
18553
|
const isFirstPlayRef = React.useRef(true);
|
18554
|
+
const loopPlayRef = React.useRef(true);
|
18546
18555
|
const initTime = new Date();
|
18556
|
+
React.useImperativeHandle(ref, () => {
|
18557
|
+
return {
|
18558
|
+
setLoopPlay(v) {
|
18559
|
+
loopPlayRef.current = v;
|
18560
|
+
}
|
18561
|
+
};
|
18562
|
+
});
|
18563
|
+
React.useEffect(() => {
|
18564
|
+
let timerId;
|
18565
|
+
if (isLoad && isActive && isDiyH5) {
|
18566
|
+
timerId = setTimeout(() => {
|
18567
|
+
var _a, _b, _c, _d;
|
18568
|
+
if (!loopPlayRef.current)
|
18569
|
+
return;
|
18570
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18571
|
+
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;
|
18572
|
+
(_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);
|
18573
|
+
}
|
18574
|
+
}, 3000);
|
18575
|
+
}
|
18576
|
+
return () => {
|
18577
|
+
if (timerId)
|
18578
|
+
clearTimeout(timerId);
|
18579
|
+
};
|
18580
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
|
18547
18581
|
React.useEffect(() => {
|
18548
18582
|
if (isLoad && isActive) {
|
18549
|
-
(
|
18583
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
18550
18584
|
if (openHashtag) {
|
18551
18585
|
onViewImageEndEvent(rec);
|
18552
18586
|
}
|
@@ -18556,7 +18590,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18556
18590
|
}
|
18557
18591
|
}
|
18558
18592
|
else {
|
18559
|
-
(
|
18593
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
18560
18594
|
}
|
18561
18595
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18562
18596
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18583,13 +18617,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18583
18617
|
};
|
18584
18618
|
}, [isActive, imgInfo]);
|
18585
18619
|
const handleMouseEnter = React.useCallback(() => {
|
18586
|
-
if (
|
18587
|
-
|
18620
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18621
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
18588
18622
|
}
|
18589
18623
|
}, []);
|
18590
18624
|
const handleMouseLeave = React.useCallback(() => {
|
18591
|
-
if (
|
18592
|
-
|
18625
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18626
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
18593
18627
|
}
|
18594
18628
|
}, []);
|
18595
18629
|
const handleSlideChange = React.useCallback((swiper) => {
|
@@ -18610,7 +18644,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18610
18644
|
enabled: true
|
18611
18645
|
}
|
18612
18646
|
}
|
18613
|
-
: {}), { loop: true, ref:
|
18647
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18614
18648
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18615
18649
|
fontSize: '14px'
|
18616
18650
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18627,7 +18661,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18627
18661
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18628
18662
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18629
18663
|
}))));
|
18630
|
-
};
|
18664
|
+
});
|
18631
18665
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
18632
18666
|
|
18633
18667
|
/*
|
@@ -18907,7 +18941,7 @@ var NavBack$1 = React.memo(NavBack);
|
|
18907
18941
|
* @Author: binruan@chatlabs.com
|
18908
18942
|
* @Date: 2024-03-20 10:27:31
|
18909
18943
|
* @LastEditors: binruan@chatlabs.com
|
18910
|
-
* @LastEditTime: 2025-05-
|
18944
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
18911
18945
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18912
18946
|
*
|
18913
18947
|
*/
|
@@ -18927,6 +18961,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18927
18961
|
const skipLinkRef = React.useRef(false);
|
18928
18962
|
const [pageNum, setPageNum] = React.useState(2);
|
18929
18963
|
const videoWidgetRef = React.useRef(null);
|
18964
|
+
const pictureGroupRef = React.useRef(null);
|
18930
18965
|
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();
|
18931
18966
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18932
18967
|
const isShowFingerTip = React.useMemo(() => {
|
@@ -18974,7 +19009,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18974
19009
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18975
19010
|
}, [data, ctaType, swiperRef]);
|
18976
19011
|
const handleSessionCompleted = React.useCallback((fk) => {
|
18977
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
19012
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
18978
19013
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18979
19014
|
let fromKName = '';
|
18980
19015
|
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))) {
|
@@ -19001,12 +19036,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19001
19036
|
eventSubject: 'sessionCompleted',
|
19002
19037
|
eventDescription: 'Session completed',
|
19003
19038
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
19004
|
-
|
19039
|
+
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 : '',
|
19040
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
19005
19041
|
position: activeIndex + '',
|
19006
19042
|
fromKName: fk || fromKName,
|
19007
19043
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
19008
|
-
ctatId: (
|
19009
|
-
traceInfo: (
|
19044
|
+
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 : '',
|
19045
|
+
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 : ''
|
19010
19046
|
}
|
19011
19047
|
});
|
19012
19048
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -19065,8 +19101,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19065
19101
|
refreshFeSession
|
19066
19102
|
]);
|
19067
19103
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
19068
|
-
var _a;
|
19104
|
+
var _a, _b;
|
19069
19105
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19106
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19070
19107
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
19071
19108
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
19072
19109
|
React.useEffect(() => {
|
@@ -19136,18 +19173,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19136
19173
|
return null;
|
19137
19174
|
}, [globalConfig, activeIndex, visList]);
|
19138
19175
|
const renderContent = React.useCallback((rec, index) => {
|
19139
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
19176
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
19140
19177
|
if (rec === 'organic menu') {
|
19141
19178
|
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)));
|
19142
19179
|
}
|
19143
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
19180
|
+
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)) {
|
19144
19181
|
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 })));
|
19145
19182
|
}
|
19146
|
-
if ((
|
19147
|
-
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 }));
|
19183
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
19184
|
+
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 })));
|
19148
19185
|
}
|
19149
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
19150
|
-
return (
|
19186
|
+
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) {
|
19187
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
19151
19188
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19152
19189
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
19153
19190
|
const Component = withBindDataSource(t);
|
@@ -19185,7 +19222,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19185
19222
|
};
|
19186
19223
|
}, [isShowMore]);
|
19187
19224
|
const renderBottom = React.useCallback((rec, index) => {
|
19188
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19225
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
19189
19226
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19190
19227
|
let cta = null;
|
19191
19228
|
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) {
|
@@ -19194,24 +19231,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19194
19231
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19195
19232
|
cta = '商品CTA';
|
19196
19233
|
}
|
19234
|
+
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)) {
|
19235
|
+
cta = '服务CTA';
|
19236
|
+
}
|
19197
19237
|
else {
|
19198
|
-
cta = (
|
19238
|
+
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;
|
19199
19239
|
}
|
19200
19240
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19201
19241
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
19202
19242
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
19203
|
-
((
|
19243
|
+
((_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));
|
19204
19244
|
return (React.createElement(React.Fragment, null,
|
19205
19245
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19206
|
-
((
|
19207
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19246
|
+
((_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' }),
|
19247
|
+
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` } },
|
19208
19248
|
React.createElement(Nudge, { nudge: nudge }),
|
19209
19249
|
((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' },
|
19210
19250
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
19211
19251
|
React.createElement("div", null,
|
19212
|
-
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: (
|
19252
|
+
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 }),
|
19213
19253
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19214
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19254
|
+
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) }))),
|
19215
19255
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19216
19256
|
}
|
19217
19257
|
return null;
|
@@ -19250,7 +19290,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19250
19290
|
return null;
|
19251
19291
|
}, [globalConfig, waterFallData]);
|
19252
19292
|
const handleViewImageStartEnd = (item) => {
|
19253
|
-
var _a, _b, _c, _d, _e, _f;
|
19293
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19254
19294
|
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)) {
|
19255
19295
|
const endTime = Date.now();
|
19256
19296
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19259,10 +19299,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19259
19299
|
eventSubject: 'viewImageCarouselEnd',
|
19260
19300
|
eventDescription: 'User end view the image carousel',
|
19261
19301
|
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 : '',
|
19262
|
-
|
19302
|
+
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 : '',
|
19303
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19263
19304
|
imageEndTime: `${endTime}`,
|
19264
19305
|
playDuration: `${duration}`,
|
19265
|
-
contentTags: JSON.stringify((
|
19306
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19266
19307
|
position: activeIndex + '',
|
19267
19308
|
contentFormat: 'image',
|
19268
19309
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19271,7 +19312,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19271
19312
|
}
|
19272
19313
|
};
|
19273
19314
|
const handleSlideSkip = (item, position) => {
|
19274
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19315
|
+
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;
|
19275
19316
|
if (isPreview || waterFallData)
|
19276
19317
|
return;
|
19277
19318
|
const t = new Date() - curTime.current;
|
@@ -19297,7 +19338,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19297
19338
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19298
19339
|
position: position + '',
|
19299
19340
|
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 : '',
|
19300
|
-
|
19341
|
+
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 : '',
|
19342
|
+
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 : '',
|
19301
19343
|
contentFormat
|
19302
19344
|
}
|
19303
19345
|
});
|
@@ -19307,7 +19349,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19307
19349
|
}
|
19308
19350
|
};
|
19309
19351
|
const handleScrollEvent = (swiper) => {
|
19310
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19352
|
+
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;
|
19311
19353
|
const item = data[swiper.previousIndex];
|
19312
19354
|
if (!item)
|
19313
19355
|
return;
|
@@ -19324,11 +19366,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19324
19366
|
eventSubject: 'scrollDown',
|
19325
19367
|
eventDescription: 'User scroll down',
|
19326
19368
|
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 : '',
|
19327
|
-
|
19369
|
+
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 : '',
|
19370
|
+
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 : '',
|
19328
19371
|
requestId: null,
|
19329
|
-
traceInfo: (
|
19372
|
+
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 : '',
|
19330
19373
|
contentFormat,
|
19331
|
-
position: ((
|
19374
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
19332
19375
|
}
|
19333
19376
|
});
|
19334
19377
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19340,12 +19383,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19340
19383
|
eventInfo: {
|
19341
19384
|
eventSubject: 'scrollUp',
|
19342
19385
|
eventDescription: 'User scroll up',
|
19343
|
-
contentId: (
|
19344
|
-
|
19386
|
+
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 : '',
|
19387
|
+
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 : '',
|
19388
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19345
19389
|
requestId: null,
|
19346
|
-
traceInfo: (
|
19390
|
+
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 : '',
|
19347
19391
|
contentFormat,
|
19348
|
-
position: ((
|
19392
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
19349
19393
|
}
|
19350
19394
|
});
|
19351
19395
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19371,7 +19415,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19371
19415
|
}
|
19372
19416
|
}, [openHashtag, data, activeIndex]);
|
19373
19417
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19374
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19418
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
19375
19419
|
const item = data[activeIndex];
|
19376
19420
|
// 如果是图片集则上报事件
|
19377
19421
|
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)) {
|
@@ -19382,9 +19426,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19382
19426
|
eventSubject: 'viewImageCarouselStart',
|
19383
19427
|
eventDescription: 'User start view the image carousel',
|
19384
19428
|
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 : '',
|
19385
|
-
|
19429
|
+
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 : '',
|
19430
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19386
19431
|
imageStartTime: `${startTime}`,
|
19387
|
-
contentTags: JSON.stringify((
|
19432
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19388
19433
|
position: activeIndex + '',
|
19389
19434
|
contentFormat: 'image',
|
19390
19435
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19394,11 +19439,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19394
19439
|
if (enableCapi) {
|
19395
19440
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19396
19441
|
eventName: 'ViewContent',
|
19397
|
-
product: (
|
19442
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
19398
19443
|
});
|
19399
19444
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19400
19445
|
eventName: 'PageView',
|
19401
|
-
product: (
|
19446
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
19402
19447
|
});
|
19403
19448
|
}
|
19404
19449
|
}
|
@@ -19490,15 +19535,20 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19490
19535
|
swiperRef.current.swiper.allowTouchMove = true;
|
19491
19536
|
}, 500);
|
19492
19537
|
}, onActiveIndexChange: (swiper) => {
|
19538
|
+
var _a, _b;
|
19493
19539
|
setActiveIndex(swiper.activeIndex);
|
19494
19540
|
if (openHashtag)
|
19495
19541
|
return;
|
19496
19542
|
// 处理上滑下滑事件
|
19497
19543
|
handleScrollEvent(swiper);
|
19498
|
-
if (waterFallData || isEditor
|
19544
|
+
if (waterFallData || isEditor)
|
19499
19545
|
return;
|
19500
19546
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19501
19547
|
if (!isLoadMore) {
|
19548
|
+
if (isDiyH5) {
|
19549
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19550
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19551
|
+
}
|
19502
19552
|
setIsLoadMore(true);
|
19503
19553
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19504
19554
|
var _a;
|
@@ -19551,7 +19601,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19551
19601
|
}, []);
|
19552
19602
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19553
19603
|
const handlePlaying = React.useCallback(() => {
|
19554
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19604
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19555
19605
|
setIsPauseVideo(false);
|
19556
19606
|
const item = data[index];
|
19557
19607
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19564,14 +19614,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19564
19614
|
eventSubject: 'playVideo',
|
19565
19615
|
eventDescription: 'User played the video',
|
19566
19616
|
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 : '',
|
19567
|
-
|
19617
|
+
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 : '',
|
19618
|
+
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 : '',
|
19568
19619
|
playType,
|
19569
19620
|
startTime: videoCurrentTime,
|
19570
19621
|
videoDuration,
|
19571
|
-
contentTags: JSON.stringify((
|
19622
|
+
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 : []),
|
19572
19623
|
position: index + '',
|
19573
19624
|
contentFormat: 'video',
|
19574
|
-
traceInfo: (
|
19625
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19575
19626
|
}
|
19576
19627
|
});
|
19577
19628
|
setIsFirstPlay(false);
|
@@ -19610,7 +19661,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19610
19661
|
}
|
19611
19662
|
}, [isLoadFinish]);
|
19612
19663
|
const onPause = React.useCallback(() => {
|
19613
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19664
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19614
19665
|
const item = data[index];
|
19615
19666
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19616
19667
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19621,14 +19672,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19621
19672
|
eventSubject: 'playOverVideo',
|
19622
19673
|
eventDescription: 'User finished playing the video',
|
19623
19674
|
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 : '',
|
19624
|
-
|
19675
|
+
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 : '',
|
19676
|
+
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 : '',
|
19625
19677
|
endTime: videoCurrentTime,
|
19626
19678
|
videoDuration,
|
19627
19679
|
playDuration,
|
19628
|
-
contentTags: JSON.stringify((
|
19680
|
+
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 : []),
|
19629
19681
|
position: index + '',
|
19630
19682
|
contentFormat: 'video',
|
19631
|
-
traceInfo: (
|
19683
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19632
19684
|
}
|
19633
19685
|
});
|
19634
19686
|
}
|