pb-sxp-ui 1.16.12 → 1.16.13
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 +181 -130
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +181 -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 +181 -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 +20 -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 +20 -4
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
@@ -637,6 +637,7 @@
|
|
637
637
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
|
638
638
|
var _a, _b, _c, _d, _e;
|
639
639
|
const [rtcList, setRtcList] = React.useState([]);
|
640
|
+
const [firstRtcList, setFirstRtcList] = React.useState([]);
|
640
641
|
const [tagList, setTagList] = React.useState([]);
|
641
642
|
const [loading, setLoading] = React.useState(true);
|
642
643
|
const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
|
@@ -807,6 +808,9 @@
|
|
807
808
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
808
809
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
809
810
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
811
|
+
if (isDiyH5) {
|
812
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
813
|
+
}
|
810
814
|
}
|
811
815
|
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));
|
812
816
|
if (isNotNullList) {
|
@@ -846,12 +850,17 @@
|
|
846
850
|
if (rtcList.length <= 0) {
|
847
851
|
return;
|
848
852
|
}
|
853
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
854
|
+
setRtcList(rtcList.concat(firstRtcList));
|
855
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
856
|
+
return;
|
857
|
+
}
|
849
858
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
850
859
|
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 })));
|
851
860
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
852
861
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
853
862
|
return data;
|
854
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
863
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
855
864
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
856
865
|
var _a, _b, _c, _d, _e;
|
857
866
|
let expire = false;
|
@@ -1078,7 +1087,7 @@
|
|
1078
1087
|
}
|
1079
1088
|
}), [bffFetch, utmVal]);
|
1080
1089
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
1081
|
-
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;
|
1090
|
+
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;
|
1082
1091
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1083
1092
|
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);
|
1084
1093
|
let fromKName = '';
|
@@ -1096,7 +1105,7 @@
|
|
1096
1105
|
}
|
1097
1106
|
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;
|
1098
1107
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1099
|
-
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: (
|
1108
|
+
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 })
|
1100
1109
|
});
|
1101
1110
|
}, [bffEventReport, isFromHashtag]);
|
1102
1111
|
const h5EnterLink = React.useCallback(() => {
|
@@ -1198,6 +1207,9 @@
|
|
1198
1207
|
}
|
1199
1208
|
setRtcList(list);
|
1200
1209
|
setCacheRtcList(list);
|
1210
|
+
if (isDiyH5) {
|
1211
|
+
setFirstRtcList(list);
|
1212
|
+
}
|
1201
1213
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1202
1214
|
if (channel) {
|
1203
1215
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1233,6 +1245,9 @@
|
|
1233
1245
|
}
|
1234
1246
|
setRtcList(list);
|
1235
1247
|
setCacheRtcList(list);
|
1248
|
+
if (isDiyH5) {
|
1249
|
+
setFirstRtcList(list);
|
1250
|
+
}
|
1236
1251
|
}
|
1237
1252
|
})
|
1238
1253
|
.finally(() => {
|
@@ -1296,7 +1311,8 @@
|
|
1296
1311
|
refreshFeSession,
|
1297
1312
|
getAccount,
|
1298
1313
|
accountSonsent,
|
1299
|
-
isDiyH5
|
1314
|
+
isDiyH5,
|
1315
|
+
firstRtcList
|
1300
1316
|
} }, 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({
|
1301
1317
|
rtcList,
|
1302
1318
|
mutateLike: bffMutateLike,
|
@@ -1757,14 +1773,14 @@
|
|
1757
1773
|
* @Author: binruan@chatlabs.com
|
1758
1774
|
* @Date: 2024-03-12 10:59:06
|
1759
1775
|
* @LastEditors: binruan@chatlabs.com
|
1760
|
-
* @LastEditTime:
|
1776
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
1761
1777
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1762
1778
|
*
|
1763
1779
|
*/
|
1764
1780
|
function useEventReport() {
|
1765
1781
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1766
1782
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
1767
|
-
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;
|
1783
|
+
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;
|
1768
1784
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1769
1785
|
if (i !== -1) {
|
1770
1786
|
return;
|
@@ -1797,11 +1813,11 @@
|
|
1797
1813
|
contentFormat = 'image';
|
1798
1814
|
}
|
1799
1815
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1800
|
-
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 : '',
|
1816
|
+
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 }))
|
1801
1817
|
});
|
1802
1818
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1803
1819
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
1804
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
1820
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
1805
1821
|
let fromKName = '';
|
1806
1822
|
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))) {
|
1807
1823
|
fromKName = 'pdpPage';
|
@@ -1820,8 +1836,9 @@
|
|
1820
1836
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
1821
1837
|
position: position + '',
|
1822
1838
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
1839
|
+
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 : '',
|
1823
1840
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
1824
|
-
traceInfo: (
|
1841
|
+
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 : '',
|
1825
1842
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
1826
1843
|
eventSubject: 'productView',
|
1827
1844
|
eventDescription: 'User browsed the product'
|
@@ -15636,7 +15653,7 @@ Made in Italy` })));
|
|
15636
15653
|
* @Author: binruan@chatlabs.com
|
15637
15654
|
* @Date: 2024-01-10 10:58:24
|
15638
15655
|
* @LastEditors: binruan@chatlabs.com
|
15639
|
-
* @LastEditTime: 2025-
|
15656
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
15640
15657
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15641
15658
|
*
|
15642
15659
|
*/
|
@@ -15674,7 +15691,7 @@ Made in Italy` })));
|
|
15674
15691
|
}
|
15675
15692
|
}, [waterFallData]);
|
15676
15693
|
const reportTagsView = React.useCallback(() => {
|
15677
|
-
var _a, _b, _c, _d, _e, _f;
|
15694
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
15678
15695
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15679
15696
|
if (!rec)
|
15680
15697
|
return;
|
@@ -15694,9 +15711,10 @@ Made in Italy` })));
|
|
15694
15711
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15695
15712
|
eventInfo: {
|
15696
15713
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15714
|
+
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 : '',
|
15697
15715
|
position: cacheActiveIndex + '',
|
15698
|
-
contentTags: JSON.stringify((
|
15699
|
-
traceInfo: (
|
15716
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
15717
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
15700
15718
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15701
15719
|
fromKName,
|
15702
15720
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17778,7 +17796,7 @@ Made in Italy` })));
|
|
17778
17796
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17779
17797
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17780
17798
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17781
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17799
|
+
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;
|
17782
17800
|
if (state) {
|
17783
17801
|
// 先设置状态
|
17784
17802
|
setState(false);
|
@@ -17788,11 +17806,12 @@ Made in Italy` })));
|
|
17788
17806
|
eventSubject: 'favoriteContentCanceled',
|
17789
17807
|
eventDescription: 'This content was unfavorite by the user',
|
17790
17808
|
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 : '',
|
17791
|
-
|
17792
|
-
|
17809
|
+
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 : '',
|
17810
|
+
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 : '',
|
17811
|
+
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 : []),
|
17793
17812
|
position: position + '',
|
17794
|
-
contentFormat: ((
|
17795
|
-
traceInfo: (
|
17813
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
17814
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
17796
17815
|
}
|
17797
17816
|
});
|
17798
17817
|
// 如果接口调用失败,则回滚状态
|
@@ -17800,40 +17819,41 @@ Made in Italy` })));
|
|
17800
17819
|
setState(true);
|
17801
17820
|
}
|
17802
17821
|
else {
|
17803
|
-
const nRtcList = (
|
17822
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17804
17823
|
if (index === position) {
|
17805
17824
|
item.isCollected = false;
|
17806
17825
|
}
|
17807
17826
|
return item;
|
17808
|
-
})) !== null &&
|
17827
|
+
})) !== null && _s !== void 0 ? _s : [];
|
17809
17828
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17810
17829
|
}
|
17811
17830
|
}
|
17812
17831
|
else {
|
17813
17832
|
setState(true);
|
17814
|
-
const result = (
|
17833
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
17815
17834
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17816
17835
|
eventInfo: {
|
17817
17836
|
eventSubject: 'favoriteContent',
|
17818
17837
|
eventDescription: 'This content was favorite by the user',
|
17819
|
-
contentId: (
|
17820
|
-
|
17821
|
-
|
17838
|
+
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 : '',
|
17839
|
+
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 : '',
|
17840
|
+
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 : '',
|
17841
|
+
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 : []),
|
17822
17842
|
position: position + '',
|
17823
|
-
contentFormat: ((
|
17824
|
-
traceInfo: (
|
17843
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
17844
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
17825
17845
|
}
|
17826
17846
|
});
|
17827
17847
|
if (!result) {
|
17828
17848
|
setState(false);
|
17829
17849
|
}
|
17830
17850
|
else {
|
17831
|
-
const nRtcList = (
|
17851
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17832
17852
|
if (index === position) {
|
17833
17853
|
item.isCollected = true;
|
17834
17854
|
}
|
17835
17855
|
return item;
|
17836
|
-
})) !== null &&
|
17856
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
17837
17857
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17838
17858
|
}
|
17839
17859
|
}
|
@@ -17870,7 +17890,7 @@ Made in Italy` })));
|
|
17870
17890
|
const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
17871
17891
|
var _a, _b;
|
17872
17892
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
17873
|
-
const { bffEventReport, sxpParameter,
|
17893
|
+
const { bffEventReport, sxpParameter, firstRtcList, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
17874
17894
|
const videoStartTime = React.useRef(0);
|
17875
17895
|
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
17876
17896
|
const { isActive } = useSwiperSlide();
|
@@ -17936,6 +17956,23 @@ Made in Italy` })));
|
|
17936
17956
|
return;
|
17937
17957
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17938
17958
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17959
|
+
const handleEnd = () => {
|
17960
|
+
var _a, _b, _c, _d, _e, _f;
|
17961
|
+
if (!videoRef.current)
|
17962
|
+
return;
|
17963
|
+
if (isDiyH5) {
|
17964
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
17965
|
+
if (!loopPlayRef.current)
|
17966
|
+
return;
|
17967
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
17968
|
+
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;
|
17969
|
+
(_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);
|
17970
|
+
}
|
17971
|
+
}
|
17972
|
+
else {
|
17973
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
17974
|
+
}
|
17975
|
+
};
|
17939
17976
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
17940
17977
|
const handlePlaying = React.useCallback(() => {
|
17941
17978
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -17944,7 +17981,7 @@ Made in Italy` })));
|
|
17944
17981
|
setIsLoadFinish(true);
|
17945
17982
|
}, []);
|
17946
17983
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17947
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
17984
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
17948
17985
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17949
17986
|
return;
|
17950
17987
|
setIsPauseVideo(false);
|
@@ -17955,16 +17992,11 @@ Made in Italy` })));
|
|
17955
17992
|
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);
|
17956
17993
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17957
17994
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17958
|
-
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 : '',
|
17995
|
+
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) + '' }))
|
17959
17996
|
});
|
17960
17997
|
isFirstPlayRef.current = false;
|
17961
17998
|
}
|
17962
17999
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17963
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
17964
|
-
if (isDiyH5) {
|
17965
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17966
|
-
}
|
17967
|
-
}, []);
|
17968
18000
|
const handLoadeddata = React.useCallback(() => {
|
17969
18001
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17970
18002
|
return;
|
@@ -17989,13 +18021,12 @@ Made in Italy` })));
|
|
17989
18021
|
const handleLoadedmetadata = React.useCallback(() => {
|
17990
18022
|
if (!videoRef.current)
|
17991
18023
|
return;
|
17992
|
-
setCurrentTimeByStartTime();
|
17993
18024
|
loadedTimeRef.current = new Date();
|
17994
18025
|
handleStartPlay();
|
17995
18026
|
handLoadeddata();
|
17996
18027
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
17997
18028
|
const handleClickVideo = React.useCallback((type) => () => {
|
17998
|
-
var _a, _b, _c, _d, _e
|
18029
|
+
var _a, _b, _c, _d, _e;
|
17999
18030
|
if (!videoRef.current)
|
18000
18031
|
return;
|
18001
18032
|
if (!isLoadFinish)
|
@@ -18016,20 +18047,17 @@ Made in Italy` })));
|
|
18016
18047
|
break;
|
18017
18048
|
default:
|
18018
18049
|
if (isPause) {
|
18019
|
-
|
18020
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18021
|
-
}
|
18022
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18050
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
18023
18051
|
}
|
18024
18052
|
else {
|
18025
|
-
(
|
18053
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
18026
18054
|
}
|
18027
18055
|
setIsPauseVideo(!isPause);
|
18028
18056
|
break;
|
18029
18057
|
}
|
18030
18058
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18031
18059
|
const handlePause = React.useCallback(() => {
|
18032
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18060
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
18033
18061
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18034
18062
|
return;
|
18035
18063
|
if (activeIndex !== index)
|
@@ -18045,14 +18073,15 @@ Made in Italy` })));
|
|
18045
18073
|
eventSubject: 'playOverVideo',
|
18046
18074
|
eventDescription: 'User finished playing the video',
|
18047
18075
|
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 : '',
|
18048
|
-
|
18076
|
+
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 : '',
|
18077
|
+
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 : '',
|
18049
18078
|
endTime: videoCurrentTime,
|
18050
18079
|
videoDuration,
|
18051
18080
|
playDuration,
|
18052
|
-
contentTags: JSON.stringify((
|
18081
|
+
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 : []),
|
18053
18082
|
position: index + '',
|
18054
18083
|
contentFormat: 'video',
|
18055
|
-
traceInfo: (
|
18084
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
18056
18085
|
}
|
18057
18086
|
});
|
18058
18087
|
}
|
@@ -18060,27 +18089,8 @@ Made in Italy` })));
|
|
18060
18089
|
const handleWaiting = React.useCallback(() => {
|
18061
18090
|
setWaiting(true);
|
18062
18091
|
}, []);
|
18063
|
-
const handleTimeUpload = () => {
|
18064
|
-
if (!videoRef.current || !isDiyH5)
|
18065
|
-
return;
|
18066
|
-
setTimeout(() => {
|
18067
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18068
|
-
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)) {
|
18069
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18070
|
-
if (!loopPlayRef.current)
|
18071
|
-
return;
|
18072
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18073
|
-
(_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);
|
18074
|
-
}
|
18075
|
-
else {
|
18076
|
-
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;
|
18077
|
-
(_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);
|
18078
|
-
}
|
18079
|
-
}
|
18080
|
-
});
|
18081
|
-
};
|
18082
18092
|
React.useEffect(() => {
|
18083
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18093
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18084
18094
|
if (!isActive)
|
18085
18095
|
return;
|
18086
18096
|
const videoSrc = videoUrl;
|
@@ -18101,7 +18111,6 @@ Made in Italy` })));
|
|
18101
18111
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18102
18112
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18103
18113
|
var _a;
|
18104
|
-
setCurrentTimeByStartTime();
|
18105
18114
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18106
18115
|
});
|
18107
18116
|
}
|
@@ -18115,12 +18124,11 @@ Made in Italy` })));
|
|
18115
18124
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18116
18125
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18117
18126
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18118
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18127
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
18119
18128
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18120
18129
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18121
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18122
18130
|
return () => {
|
18123
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18131
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18124
18132
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18125
18133
|
if (!isPause)
|
18126
18134
|
handlePause();
|
@@ -18132,10 +18140,9 @@ Made in Italy` })));
|
|
18132
18140
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18133
18141
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18134
18142
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18135
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18143
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
18136
18144
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18137
18145
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18138
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18139
18146
|
};
|
18140
18147
|
}, [isActive]);
|
18141
18148
|
React.useEffect(() => {
|
@@ -18346,19 +18353,45 @@ Made in Italy` })));
|
|
18346
18353
|
}, onLoad: onShowFirstImage }))));
|
18347
18354
|
};
|
18348
18355
|
|
18349
|
-
const PictureGroup$4 = ({ imgUrls,
|
18356
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
18350
18357
|
var _a, _b;
|
18351
18358
|
const { isActive } = useSwiperSlide();
|
18352
|
-
const {
|
18359
|
+
const { firstRtcList, openHashtag, isDiyH5 } = useSxpDataSource();
|
18353
18360
|
const [isLoad, setIsLoad] = React.useState(false);
|
18354
18361
|
const [imgInfo, setImgInfo] = React.useState();
|
18355
18362
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
18356
|
-
const
|
18363
|
+
const imgsSwiperRef = React.useRef();
|
18357
18364
|
const isFirstPlayRef = React.useRef(true);
|
18365
|
+
const loopPlayRef = React.useRef(true);
|
18358
18366
|
const initTime = new Date();
|
18367
|
+
React.useImperativeHandle(ref, () => {
|
18368
|
+
return {
|
18369
|
+
setLoopPlay(v) {
|
18370
|
+
loopPlayRef.current = v;
|
18371
|
+
}
|
18372
|
+
};
|
18373
|
+
});
|
18374
|
+
React.useEffect(() => {
|
18375
|
+
let timerId;
|
18376
|
+
if (isLoad && isActive && isDiyH5) {
|
18377
|
+
timerId = setTimeout(() => {
|
18378
|
+
var _a, _b, _c, _d;
|
18379
|
+
if (!loopPlayRef.current)
|
18380
|
+
return;
|
18381
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18382
|
+
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;
|
18383
|
+
(_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);
|
18384
|
+
}
|
18385
|
+
}, 3000);
|
18386
|
+
}
|
18387
|
+
return () => {
|
18388
|
+
if (timerId)
|
18389
|
+
clearTimeout(timerId);
|
18390
|
+
};
|
18391
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
|
18359
18392
|
React.useEffect(() => {
|
18360
18393
|
if (isLoad && isActive) {
|
18361
|
-
(
|
18394
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
18362
18395
|
if (openHashtag) {
|
18363
18396
|
onViewImageEndEvent(rec);
|
18364
18397
|
}
|
@@ -18368,7 +18401,7 @@ Made in Italy` })));
|
|
18368
18401
|
}
|
18369
18402
|
}
|
18370
18403
|
else {
|
18371
|
-
(
|
18404
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
18372
18405
|
}
|
18373
18406
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18374
18407
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18395,13 +18428,13 @@ Made in Italy` })));
|
|
18395
18428
|
};
|
18396
18429
|
}, [isActive, imgInfo]);
|
18397
18430
|
const handleMouseEnter = React.useCallback(() => {
|
18398
|
-
if (
|
18399
|
-
|
18431
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18432
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
18400
18433
|
}
|
18401
18434
|
}, []);
|
18402
18435
|
const handleMouseLeave = React.useCallback(() => {
|
18403
|
-
if (
|
18404
|
-
|
18436
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18437
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
18405
18438
|
}
|
18406
18439
|
}, []);
|
18407
18440
|
const handleSlideChange = React.useCallback((swiper) => {
|
@@ -18422,7 +18455,7 @@ Made in Italy` })));
|
|
18422
18455
|
enabled: true
|
18423
18456
|
}
|
18424
18457
|
}
|
18425
|
-
: {}), { loop: true, ref:
|
18458
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18426
18459
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18427
18460
|
fontSize: '14px'
|
18428
18461
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18439,7 +18472,7 @@ Made in Italy` })));
|
|
18439
18472
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18440
18473
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18441
18474
|
}))));
|
18442
|
-
};
|
18475
|
+
});
|
18443
18476
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
18444
18477
|
|
18445
18478
|
/*
|
@@ -18719,7 +18752,7 @@ Made in Italy` })));
|
|
18719
18752
|
* @Author: binruan@chatlabs.com
|
18720
18753
|
* @Date: 2024-03-20 10:27:31
|
18721
18754
|
* @LastEditors: binruan@chatlabs.com
|
18722
|
-
* @LastEditTime: 2025-05-
|
18755
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
18723
18756
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18724
18757
|
*
|
18725
18758
|
*/
|
@@ -18739,6 +18772,7 @@ Made in Italy` })));
|
|
18739
18772
|
const skipLinkRef = React.useRef(false);
|
18740
18773
|
const [pageNum, setPageNum] = React.useState(2);
|
18741
18774
|
const videoWidgetRef = React.useRef(null);
|
18775
|
+
const pictureGroupRef = React.useRef(null);
|
18742
18776
|
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();
|
18743
18777
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18744
18778
|
const isShowFingerTip = React.useMemo(() => {
|
@@ -18786,7 +18820,7 @@ Made in Italy` })));
|
|
18786
18820
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18787
18821
|
}, [data, ctaType, swiperRef]);
|
18788
18822
|
const handleSessionCompleted = React.useCallback((fk) => {
|
18789
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18823
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
18790
18824
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18791
18825
|
let fromKName = '';
|
18792
18826
|
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))) {
|
@@ -18813,12 +18847,13 @@ Made in Italy` })));
|
|
18813
18847
|
eventSubject: 'sessionCompleted',
|
18814
18848
|
eventDescription: 'Session completed',
|
18815
18849
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18816
|
-
|
18850
|
+
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 : '',
|
18851
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18817
18852
|
position: activeIndex + '',
|
18818
18853
|
fromKName: fk || fromKName,
|
18819
18854
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18820
|
-
ctatId: (
|
18821
|
-
traceInfo: (
|
18855
|
+
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 : '',
|
18856
|
+
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 : ''
|
18822
18857
|
}
|
18823
18858
|
});
|
18824
18859
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -18877,8 +18912,9 @@ Made in Italy` })));
|
|
18877
18912
|
refreshFeSession
|
18878
18913
|
]);
|
18879
18914
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
18880
|
-
var _a;
|
18915
|
+
var _a, _b;
|
18881
18916
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
18917
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
18882
18918
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18883
18919
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18884
18920
|
React.useEffect(() => {
|
@@ -18948,18 +18984,18 @@ Made in Italy` })));
|
|
18948
18984
|
return null;
|
18949
18985
|
}, [globalConfig, activeIndex, visList]);
|
18950
18986
|
const renderContent = React.useCallback((rec, index) => {
|
18951
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18987
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
18952
18988
|
if (rec === 'organic menu') {
|
18953
18989
|
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)));
|
18954
18990
|
}
|
18955
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
18991
|
+
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)) {
|
18956
18992
|
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 })));
|
18957
18993
|
}
|
18958
|
-
if ((
|
18959
|
-
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 }));
|
18994
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
18995
|
+
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 })));
|
18960
18996
|
}
|
18961
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
18962
|
-
return (
|
18997
|
+
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) {
|
18998
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
18963
18999
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
18964
19000
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
18965
19001
|
const Component = withBindDataSource(t);
|
@@ -18997,7 +19033,7 @@ Made in Italy` })));
|
|
18997
19033
|
};
|
18998
19034
|
}, [isShowMore]);
|
18999
19035
|
const renderBottom = React.useCallback((rec, index) => {
|
19000
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19036
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
19001
19037
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19002
19038
|
let cta = null;
|
19003
19039
|
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) {
|
@@ -19006,24 +19042,27 @@ Made in Italy` })));
|
|
19006
19042
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19007
19043
|
cta = '商品CTA';
|
19008
19044
|
}
|
19045
|
+
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)) {
|
19046
|
+
cta = '服务CTA';
|
19047
|
+
}
|
19009
19048
|
else {
|
19010
|
-
cta = (
|
19049
|
+
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;
|
19011
19050
|
}
|
19012
19051
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19013
19052
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
19014
19053
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
19015
|
-
((
|
19054
|
+
((_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));
|
19016
19055
|
return (React.createElement(React.Fragment, null,
|
19017
19056
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19018
|
-
((
|
19019
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19057
|
+
((_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' }),
|
19058
|
+
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` } },
|
19020
19059
|
React.createElement(Nudge, { nudge: nudge }),
|
19021
19060
|
((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' },
|
19022
19061
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
19023
19062
|
React.createElement("div", null,
|
19024
|
-
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: (
|
19063
|
+
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 }),
|
19025
19064
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19026
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19065
|
+
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) }))),
|
19027
19066
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19028
19067
|
}
|
19029
19068
|
return null;
|
@@ -19062,7 +19101,7 @@ Made in Italy` })));
|
|
19062
19101
|
return null;
|
19063
19102
|
}, [globalConfig, waterFallData]);
|
19064
19103
|
const handleViewImageStartEnd = (item) => {
|
19065
|
-
var _a, _b, _c, _d, _e, _f;
|
19104
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19066
19105
|
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)) {
|
19067
19106
|
const endTime = Date.now();
|
19068
19107
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19071,10 +19110,11 @@ Made in Italy` })));
|
|
19071
19110
|
eventSubject: 'viewImageCarouselEnd',
|
19072
19111
|
eventDescription: 'User end view the image carousel',
|
19073
19112
|
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 : '',
|
19074
|
-
|
19113
|
+
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 : '',
|
19114
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19075
19115
|
imageEndTime: `${endTime}`,
|
19076
19116
|
playDuration: `${duration}`,
|
19077
|
-
contentTags: JSON.stringify((
|
19117
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19078
19118
|
position: activeIndex + '',
|
19079
19119
|
contentFormat: 'image',
|
19080
19120
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19083,7 +19123,7 @@ Made in Italy` })));
|
|
19083
19123
|
}
|
19084
19124
|
};
|
19085
19125
|
const handleSlideSkip = (item, position) => {
|
19086
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19126
|
+
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;
|
19087
19127
|
if (isPreview || waterFallData)
|
19088
19128
|
return;
|
19089
19129
|
const t = new Date() - curTime.current;
|
@@ -19109,7 +19149,8 @@ Made in Italy` })));
|
|
19109
19149
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19110
19150
|
position: position + '',
|
19111
19151
|
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 : '',
|
19112
|
-
|
19152
|
+
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 : '',
|
19153
|
+
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 : '',
|
19113
19154
|
contentFormat
|
19114
19155
|
}
|
19115
19156
|
});
|
@@ -19119,7 +19160,7 @@ Made in Italy` })));
|
|
19119
19160
|
}
|
19120
19161
|
};
|
19121
19162
|
const handleScrollEvent = (swiper) => {
|
19122
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19163
|
+
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;
|
19123
19164
|
const item = data[swiper.previousIndex];
|
19124
19165
|
if (!item)
|
19125
19166
|
return;
|
@@ -19136,11 +19177,12 @@ Made in Italy` })));
|
|
19136
19177
|
eventSubject: 'scrollDown',
|
19137
19178
|
eventDescription: 'User scroll down',
|
19138
19179
|
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 : '',
|
19139
|
-
|
19180
|
+
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 : '',
|
19181
|
+
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 : '',
|
19140
19182
|
requestId: null,
|
19141
|
-
traceInfo: (
|
19183
|
+
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 : '',
|
19142
19184
|
contentFormat,
|
19143
|
-
position: ((
|
19185
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
19144
19186
|
}
|
19145
19187
|
});
|
19146
19188
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19152,12 +19194,13 @@ Made in Italy` })));
|
|
19152
19194
|
eventInfo: {
|
19153
19195
|
eventSubject: 'scrollUp',
|
19154
19196
|
eventDescription: 'User scroll up',
|
19155
|
-
contentId: (
|
19156
|
-
|
19197
|
+
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 : '',
|
19198
|
+
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 : '',
|
19199
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19157
19200
|
requestId: null,
|
19158
|
-
traceInfo: (
|
19201
|
+
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 : '',
|
19159
19202
|
contentFormat,
|
19160
|
-
position: ((
|
19203
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
19161
19204
|
}
|
19162
19205
|
});
|
19163
19206
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19183,7 +19226,7 @@ Made in Italy` })));
|
|
19183
19226
|
}
|
19184
19227
|
}, [openHashtag, data, activeIndex]);
|
19185
19228
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19186
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19229
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
19187
19230
|
const item = data[activeIndex];
|
19188
19231
|
// 如果是图片集则上报事件
|
19189
19232
|
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)) {
|
@@ -19194,9 +19237,10 @@ Made in Italy` })));
|
|
19194
19237
|
eventSubject: 'viewImageCarouselStart',
|
19195
19238
|
eventDescription: 'User start view the image carousel',
|
19196
19239
|
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 : '',
|
19197
|
-
|
19240
|
+
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 : '',
|
19241
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19198
19242
|
imageStartTime: `${startTime}`,
|
19199
|
-
contentTags: JSON.stringify((
|
19243
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19200
19244
|
position: activeIndex + '',
|
19201
19245
|
contentFormat: 'image',
|
19202
19246
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19206,11 +19250,11 @@ Made in Italy` })));
|
|
19206
19250
|
if (enableCapi) {
|
19207
19251
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19208
19252
|
eventName: 'ViewContent',
|
19209
|
-
product: (
|
19253
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
19210
19254
|
});
|
19211
19255
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19212
19256
|
eventName: 'PageView',
|
19213
|
-
product: (
|
19257
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
19214
19258
|
});
|
19215
19259
|
}
|
19216
19260
|
}
|
@@ -19302,15 +19346,20 @@ Made in Italy` })));
|
|
19302
19346
|
swiperRef.current.swiper.allowTouchMove = true;
|
19303
19347
|
}, 500);
|
19304
19348
|
}, onActiveIndexChange: (swiper) => {
|
19349
|
+
var _a, _b;
|
19305
19350
|
setActiveIndex(swiper.activeIndex);
|
19306
19351
|
if (openHashtag)
|
19307
19352
|
return;
|
19308
19353
|
// 处理上滑下滑事件
|
19309
19354
|
handleScrollEvent(swiper);
|
19310
|
-
if (waterFallData || isEditor
|
19355
|
+
if (waterFallData || isEditor)
|
19311
19356
|
return;
|
19312
19357
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19313
19358
|
if (!isLoadMore) {
|
19359
|
+
if (isDiyH5) {
|
19360
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19361
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19362
|
+
}
|
19314
19363
|
setIsLoadMore(true);
|
19315
19364
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19316
19365
|
var _a;
|
@@ -19363,7 +19412,7 @@ Made in Italy` })));
|
|
19363
19412
|
}, []);
|
19364
19413
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19365
19414
|
const handlePlaying = React.useCallback(() => {
|
19366
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19415
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19367
19416
|
setIsPauseVideo(false);
|
19368
19417
|
const item = data[index];
|
19369
19418
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19376,14 +19425,15 @@ Made in Italy` })));
|
|
19376
19425
|
eventSubject: 'playVideo',
|
19377
19426
|
eventDescription: 'User played the video',
|
19378
19427
|
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 : '',
|
19379
|
-
|
19428
|
+
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 : '',
|
19429
|
+
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 : '',
|
19380
19430
|
playType,
|
19381
19431
|
startTime: videoCurrentTime,
|
19382
19432
|
videoDuration,
|
19383
|
-
contentTags: JSON.stringify((
|
19433
|
+
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 : []),
|
19384
19434
|
position: index + '',
|
19385
19435
|
contentFormat: 'video',
|
19386
|
-
traceInfo: (
|
19436
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19387
19437
|
}
|
19388
19438
|
});
|
19389
19439
|
setIsFirstPlay(false);
|
@@ -19422,7 +19472,7 @@ Made in Italy` })));
|
|
19422
19472
|
}
|
19423
19473
|
}, [isLoadFinish]);
|
19424
19474
|
const onPause = React.useCallback(() => {
|
19425
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19475
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19426
19476
|
const item = data[index];
|
19427
19477
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19428
19478
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19433,14 +19483,15 @@ Made in Italy` })));
|
|
19433
19483
|
eventSubject: 'playOverVideo',
|
19434
19484
|
eventDescription: 'User finished playing the video',
|
19435
19485
|
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 : '',
|
19436
|
-
|
19486
|
+
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 : '',
|
19487
|
+
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 : '',
|
19437
19488
|
endTime: videoCurrentTime,
|
19438
19489
|
videoDuration,
|
19439
19490
|
playDuration,
|
19440
|
-
contentTags: JSON.stringify((
|
19491
|
+
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 : []),
|
19441
19492
|
position: index + '',
|
19442
19493
|
contentFormat: 'video',
|
19443
|
-
traceInfo: (
|
19494
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19444
19495
|
}
|
19445
19496
|
});
|
19446
19497
|
}
|