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