pb-sxp-ui 1.16.9 → 1.16.11
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 +184 -133
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +184 -133
- 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 +184 -133
- 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 +41 -13
- package/es/core/components/SxpPageRender/VideoWidget/index.js +33 -44
- package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/es/core/components/SxpPageRender/index.js +53 -37
- package/es/core/context/SxpDataSourceProvider.js +22 -8
- 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 +40 -12
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +33 -44
- package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/lib/core/components/SxpPageRender/index.js +53 -37
- package/lib/core/context/SxpDataSourceProvider.js +22 -8
- 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) {
|
|
@@ -832,27 +836,31 @@
|
|
|
832
836
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag))
|
|
833
837
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
|
834
838
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
|
835
|
-
|
|
836
|
-
list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
|
|
837
|
-
const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
|
839
|
+
const isNotNullList = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
|
838
840
|
if (!isNotNullList) {
|
|
839
841
|
setIsNoMoreData(true);
|
|
840
842
|
}
|
|
841
|
-
return Object.assign(Object.assign({}, result.data), { recList: list });
|
|
842
843
|
}
|
|
843
|
-
|
|
844
|
+
let list = [];
|
|
845
|
+
list = list.concat((_u = (_t = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.filter) === null || _t === void 0 ? void 0 : _t.call(_s, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _u !== void 0 ? _u : []);
|
|
846
|
+
return Object.assign(Object.assign({}, result.data), { recList: list });
|
|
844
847
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
|
845
848
|
const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
|
846
849
|
var _1, _2, _3, _4;
|
|
847
850
|
if (rtcList.length <= 0) {
|
|
848
851
|
return;
|
|
849
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
|
+
}
|
|
850
858
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
|
851
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 })));
|
|
852
860
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
|
853
861
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
|
854
862
|
return data;
|
|
855
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
|
863
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
|
856
864
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
|
857
865
|
var _a, _b, _c, _d, _e;
|
|
858
866
|
let expire = false;
|
|
@@ -1079,7 +1087,7 @@
|
|
|
1079
1087
|
}
|
|
1080
1088
|
}), [bffFetch, utmVal]);
|
|
1081
1089
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
|
1082
|
-
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;
|
|
1083
1091
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
1084
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);
|
|
1085
1093
|
let fromKName = '';
|
|
@@ -1097,7 +1105,7 @@
|
|
|
1097
1105
|
}
|
|
1098
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;
|
|
1099
1107
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1100
|
-
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 })
|
|
1101
1109
|
});
|
|
1102
1110
|
}, [bffEventReport, isFromHashtag]);
|
|
1103
1111
|
const h5EnterLink = React.useCallback(() => {
|
|
@@ -1199,6 +1207,9 @@
|
|
|
1199
1207
|
}
|
|
1200
1208
|
setRtcList(list);
|
|
1201
1209
|
setCacheRtcList(list);
|
|
1210
|
+
if (isDiyH5) {
|
|
1211
|
+
setFirstRtcList(list);
|
|
1212
|
+
}
|
|
1202
1213
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
|
1203
1214
|
if (channel) {
|
|
1204
1215
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
|
@@ -1234,6 +1245,9 @@
|
|
|
1234
1245
|
}
|
|
1235
1246
|
setRtcList(list);
|
|
1236
1247
|
setCacheRtcList(list);
|
|
1248
|
+
if (isDiyH5) {
|
|
1249
|
+
setFirstRtcList(list);
|
|
1250
|
+
}
|
|
1237
1251
|
}
|
|
1238
1252
|
})
|
|
1239
1253
|
.finally(() => {
|
|
@@ -1758,14 +1772,14 @@
|
|
|
1758
1772
|
* @Author: binruan@chatlabs.com
|
|
1759
1773
|
* @Date: 2024-03-12 10:59:06
|
|
1760
1774
|
* @LastEditors: binruan@chatlabs.com
|
|
1761
|
-
* @LastEditTime:
|
|
1775
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
|
1762
1776
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
|
1763
1777
|
*
|
|
1764
1778
|
*/
|
|
1765
1779
|
function useEventReport() {
|
|
1766
1780
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
|
1767
1781
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
|
1768
|
-
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;
|
|
1782
|
+
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;
|
|
1769
1783
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
|
1770
1784
|
if (i !== -1) {
|
|
1771
1785
|
return;
|
|
@@ -1798,11 +1812,11 @@
|
|
|
1798
1812
|
contentFormat = 'image';
|
|
1799
1813
|
}
|
|
1800
1814
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1801
|
-
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 : '',
|
|
1815
|
+
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 }))
|
|
1802
1816
|
});
|
|
1803
1817
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
|
1804
1818
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
|
1805
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
1819
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
1806
1820
|
let fromKName = '';
|
|
1807
1821
|
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))) {
|
|
1808
1822
|
fromKName = 'pdpPage';
|
|
@@ -1821,8 +1835,9 @@
|
|
|
1821
1835
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
|
1822
1836
|
position: position + '',
|
|
1823
1837
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
1838
|
+
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 : '',
|
|
1824
1839
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
|
1825
|
-
traceInfo: (
|
|
1840
|
+
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 : '',
|
|
1826
1841
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
|
1827
1842
|
eventSubject: 'productView',
|
|
1828
1843
|
eventDescription: 'User browsed the product'
|
|
@@ -15625,7 +15640,7 @@ Made in Italy` })));
|
|
|
15625
15640
|
* @Author: binruan@chatlabs.com
|
|
15626
15641
|
* @Date: 2024-01-10 10:58:24
|
|
15627
15642
|
* @LastEditors: binruan@chatlabs.com
|
|
15628
|
-
* @LastEditTime: 2025-
|
|
15643
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
|
15629
15644
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
|
15630
15645
|
*
|
|
15631
15646
|
*/
|
|
@@ -15663,7 +15678,7 @@ Made in Italy` })));
|
|
|
15663
15678
|
}
|
|
15664
15679
|
}, [waterFallData]);
|
|
15665
15680
|
const reportTagsView = React.useCallback(() => {
|
|
15666
|
-
var _a, _b, _c, _d, _e, _f;
|
|
15681
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
15667
15682
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
|
15668
15683
|
if (!rec)
|
|
15669
15684
|
return;
|
|
@@ -15683,9 +15698,10 @@ Made in Italy` })));
|
|
|
15683
15698
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
15684
15699
|
eventInfo: {
|
|
15685
15700
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
15701
|
+
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 : '',
|
|
15686
15702
|
position: cacheActiveIndex + '',
|
|
15687
|
-
contentTags: JSON.stringify((
|
|
15688
|
-
traceInfo: (
|
|
15703
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
|
15704
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
|
15689
15705
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
|
15690
15706
|
fromKName,
|
|
15691
15707
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
@@ -17767,7 +17783,7 @@ Made in Italy` })));
|
|
|
17767
17783
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
|
17768
17784
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
|
17769
17785
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17770
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
17786
|
+
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;
|
|
17771
17787
|
if (state) {
|
|
17772
17788
|
// 先设置状态
|
|
17773
17789
|
setState(false);
|
|
@@ -17777,11 +17793,12 @@ Made in Italy` })));
|
|
|
17777
17793
|
eventSubject: 'favoriteContentCanceled',
|
|
17778
17794
|
eventDescription: 'This content was unfavorite by the user',
|
|
17779
17795
|
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 : '',
|
|
17780
|
-
|
|
17781
|
-
|
|
17796
|
+
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 : '',
|
|
17797
|
+
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 : '',
|
|
17798
|
+
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 : []),
|
|
17782
17799
|
position: position + '',
|
|
17783
|
-
contentFormat: ((
|
|
17784
|
-
traceInfo: (
|
|
17800
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
|
17801
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
17785
17802
|
}
|
|
17786
17803
|
});
|
|
17787
17804
|
// 如果接口调用失败，则回滚状态
|
|
@@ -17789,40 +17806,41 @@ Made in Italy` })));
|
|
|
17789
17806
|
setState(true);
|
|
17790
17807
|
}
|
|
17791
17808
|
else {
|
|
17792
|
-
const nRtcList = (
|
|
17809
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17793
17810
|
if (index === position) {
|
|
17794
17811
|
item.isCollected = false;
|
|
17795
17812
|
}
|
|
17796
17813
|
return item;
|
|
17797
|
-
})) !== null &&
|
|
17814
|
+
})) !== null && _s !== void 0 ? _s : [];
|
|
17798
17815
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17799
17816
|
}
|
|
17800
17817
|
}
|
|
17801
17818
|
else {
|
|
17802
17819
|
setState(true);
|
|
17803
|
-
const result = (
|
|
17820
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
|
17804
17821
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17805
17822
|
eventInfo: {
|
|
17806
17823
|
eventSubject: 'favoriteContent',
|
|
17807
17824
|
eventDescription: 'This content was favorite by the user',
|
|
17808
|
-
contentId: (
|
|
17809
|
-
|
|
17810
|
-
|
|
17825
|
+
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 : '',
|
|
17826
|
+
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 : '',
|
|
17827
|
+
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 : '',
|
|
17828
|
+
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 : []),
|
|
17811
17829
|
position: position + '',
|
|
17812
|
-
contentFormat: ((
|
|
17813
|
-
traceInfo: (
|
|
17830
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
|
17831
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
|
17814
17832
|
}
|
|
17815
17833
|
});
|
|
17816
17834
|
if (!result) {
|
|
17817
17835
|
setState(false);
|
|
17818
17836
|
}
|
|
17819
17837
|
else {
|
|
17820
|
-
const nRtcList = (
|
|
17838
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17821
17839
|
if (index === position) {
|
|
17822
17840
|
item.isCollected = true;
|
|
17823
17841
|
}
|
|
17824
17842
|
return item;
|
|
17825
|
-
})) !== null &&
|
|
17843
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
|
17826
17844
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17827
17845
|
}
|
|
17828
17846
|
}
|
|
@@ -17925,6 +17943,24 @@ Made in Italy` })));
|
|
|
17925
17943
|
return;
|
|
17926
17944
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
17927
17945
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17946
|
+
const handleEnd = () => {
|
|
17947
|
+
var _a, _b, _c, _d, _e, _f;
|
|
17948
|
+
if (!videoRef.current)
|
|
17949
|
+
return;
|
|
17950
|
+
if (isDiyH5) {
|
|
17951
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
|
17952
|
+
if (!loopPlayRef.current)
|
|
17953
|
+
return;
|
|
17954
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) ;
|
|
17955
|
+
else {
|
|
17956
|
+
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;
|
|
17957
|
+
(_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);
|
|
17958
|
+
}
|
|
17959
|
+
}
|
|
17960
|
+
else {
|
|
17961
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
|
17962
|
+
}
|
|
17963
|
+
};
|
|
17928
17964
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
17929
17965
|
const handlePlaying = React.useCallback(() => {
|
|
17930
17966
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
@@ -17933,7 +17969,7 @@ Made in Italy` })));
|
|
|
17933
17969
|
setIsLoadFinish(true);
|
|
17934
17970
|
}, []);
|
|
17935
17971
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17936
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
17972
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
17937
17973
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
17938
17974
|
return;
|
|
17939
17975
|
setIsPauseVideo(false);
|
|
@@ -17944,16 +17980,11 @@ Made in Italy` })));
|
|
|
17944
17980
|
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);
|
|
17945
17981
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
|
17946
17982
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17947
|
-
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 : '',
|
|
17983
|
+
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) + '' }))
|
|
17948
17984
|
});
|
|
17949
17985
|
isFirstPlayRef.current = false;
|
|
17950
17986
|
}
|
|
17951
17987
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17952
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
|
17953
|
-
if (isDiyH5) {
|
|
17954
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
17955
|
-
}
|
|
17956
|
-
}, []);
|
|
17957
17988
|
const handLoadeddata = React.useCallback(() => {
|
|
17958
17989
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
|
17959
17990
|
return;
|
|
@@ -17978,13 +18009,12 @@ Made in Italy` })));
|
|
|
17978
18009
|
const handleLoadedmetadata = React.useCallback(() => {
|
|
17979
18010
|
if (!videoRef.current)
|
|
17980
18011
|
return;
|
|
17981
|
-
setCurrentTimeByStartTime();
|
|
17982
18012
|
loadedTimeRef.current = new Date();
|
|
17983
18013
|
handleStartPlay();
|
|
17984
18014
|
handLoadeddata();
|
|
17985
18015
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
|
17986
18016
|
const handleClickVideo = React.useCallback((type) => () => {
|
|
17987
|
-
var _a, _b, _c, _d, _e
|
|
18017
|
+
var _a, _b, _c, _d, _e;
|
|
17988
18018
|
if (!videoRef.current)
|
|
17989
18019
|
return;
|
|
17990
18020
|
if (!isLoadFinish)
|
|
@@ -18005,20 +18035,17 @@ Made in Italy` })));
|
|
|
18005
18035
|
break;
|
|
18006
18036
|
default:
|
|
18007
18037
|
if (isPause) {
|
|
18008
|
-
|
|
18009
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
18010
|
-
}
|
|
18011
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
|
18038
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
|
18012
18039
|
}
|
|
18013
18040
|
else {
|
|
18014
|
-
(
|
|
18041
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
|
18015
18042
|
}
|
|
18016
18043
|
setIsPauseVideo(!isPause);
|
|
18017
18044
|
break;
|
|
18018
18045
|
}
|
|
18019
18046
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
18020
18047
|
const handlePause = React.useCallback(() => {
|
|
18021
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
18048
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
18022
18049
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
18023
18050
|
return;
|
|
18024
18051
|
if (activeIndex !== index)
|
|
@@ -18034,14 +18061,15 @@ Made in Italy` })));
|
|
|
18034
18061
|
eventSubject: 'playOverVideo',
|
|
18035
18062
|
eventDescription: 'User finished playing the video',
|
|
18036
18063
|
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 : '',
|
|
18037
|
-
|
|
18064
|
+
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 : '',
|
|
18065
|
+
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 : '',
|
|
18038
18066
|
endTime: videoCurrentTime,
|
|
18039
18067
|
videoDuration,
|
|
18040
18068
|
playDuration,
|
|
18041
|
-
contentTags: JSON.stringify((
|
|
18069
|
+
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 : []),
|
|
18042
18070
|
position: index + '',
|
|
18043
18071
|
contentFormat: 'video',
|
|
18044
|
-
traceInfo: (
|
|
18072
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
18045
18073
|
}
|
|
18046
18074
|
});
|
|
18047
18075
|
}
|
|
@@ -18049,27 +18077,8 @@ Made in Italy` })));
|
|
|
18049
18077
|
const handleWaiting = React.useCallback(() => {
|
|
18050
18078
|
setWaiting(true);
|
|
18051
18079
|
}, []);
|
|
18052
|
-
const handleTimeUpload = () => {
|
|
18053
|
-
if (!videoRef.current || !isDiyH5)
|
|
18054
|
-
return;
|
|
18055
|
-
setTimeout(() => {
|
|
18056
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18057
|
-
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)) {
|
|
18058
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
18059
|
-
if (!loopPlayRef.current)
|
|
18060
|
-
return;
|
|
18061
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18062
|
-
(_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);
|
|
18063
|
-
}
|
|
18064
|
-
else {
|
|
18065
|
-
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;
|
|
18066
|
-
(_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);
|
|
18067
|
-
}
|
|
18068
|
-
}
|
|
18069
|
-
});
|
|
18070
|
-
};
|
|
18071
18080
|
React.useEffect(() => {
|
|
18072
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18081
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18073
18082
|
if (!isActive)
|
|
18074
18083
|
return;
|
|
18075
18084
|
const videoSrc = videoUrl;
|
|
@@ -18090,7 +18099,6 @@ Made in Italy` })));
|
|
|
18090
18099
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
18091
18100
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
18092
18101
|
var _a;
|
|
18093
|
-
setCurrentTimeByStartTime();
|
|
18094
18102
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
18095
18103
|
});
|
|
18096
18104
|
}
|
|
@@ -18104,12 +18112,11 @@ Made in Italy` })));
|
|
|
18104
18112
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
|
18105
18113
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
|
18106
18114
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
|
18107
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
|
18115
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
|
18108
18116
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
|
18109
18117
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
|
18110
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
|
18111
18118
|
return () => {
|
|
18112
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18119
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18113
18120
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
|
18114
18121
|
if (!isPause)
|
|
18115
18122
|
handlePause();
|
|
@@ -18121,10 +18128,9 @@ Made in Italy` })));
|
|
|
18121
18128
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
|
18122
18129
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
|
18123
18130
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
|
18124
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
|
18131
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
|
18125
18132
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
|
18126
18133
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
|
18127
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
|
18128
18134
|
};
|
|
18129
18135
|
}, [isActive]);
|
|
18130
18136
|
React.useEffect(() => {
|
|
@@ -18335,19 +18341,46 @@ Made in Italy` })));
|
|
|
18335
18341
|
}, onLoad: onShowFirstImage }))));
|
|
18336
18342
|
};
|
|
18337
18343
|
|
|
18338
|
-
const PictureGroup$4 = ({ imgUrls,
|
|
18344
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
|
18339
18345
|
var _a, _b;
|
|
18340
18346
|
const { isActive } = useSwiperSlide();
|
|
18341
|
-
const { sxpParameter, openHashtag } = useSxpDataSource();
|
|
18347
|
+
const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
|
|
18342
18348
|
const [isLoad, setIsLoad] = React.useState(false);
|
|
18343
18349
|
const [imgInfo, setImgInfo] = React.useState();
|
|
18344
18350
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
|
18345
|
-
const
|
|
18351
|
+
const imgsSwiperRef = React.useRef();
|
|
18346
18352
|
const isFirstPlayRef = React.useRef(true);
|
|
18353
|
+
const loopPlayRef = React.useRef(true);
|
|
18347
18354
|
const initTime = new Date();
|
|
18355
|
+
React.useImperativeHandle(ref, () => {
|
|
18356
|
+
return {
|
|
18357
|
+
setLoopPlay(v) {
|
|
18358
|
+
loopPlayRef.current = v;
|
|
18359
|
+
}
|
|
18360
|
+
};
|
|
18361
|
+
});
|
|
18362
|
+
React.useEffect(() => {
|
|
18363
|
+
let timerId;
|
|
18364
|
+
if (isLoad && isActive && isDiyH5) {
|
|
18365
|
+
timerId = setTimeout(() => {
|
|
18366
|
+
var _a, _b, _c, _d;
|
|
18367
|
+
if (!loopPlayRef.current)
|
|
18368
|
+
return;
|
|
18369
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) ;
|
|
18370
|
+
else {
|
|
18371
|
+
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;
|
|
18372
|
+
(_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);
|
|
18373
|
+
}
|
|
18374
|
+
}, 3000);
|
|
18375
|
+
}
|
|
18376
|
+
return () => {
|
|
18377
|
+
if (timerId)
|
|
18378
|
+
clearTimeout(timerId);
|
|
18379
|
+
};
|
|
18380
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef]);
|
|
18348
18381
|
React.useEffect(() => {
|
|
18349
18382
|
if (isLoad && isActive) {
|
|
18350
|
-
(
|
|
18383
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
|
18351
18384
|
if (openHashtag) {
|
|
18352
18385
|
onViewImageEndEvent(rec);
|
|
18353
18386
|
}
|
|
@@ -18357,7 +18390,7 @@ Made in Italy` })));
|
|
|
18357
18390
|
}
|
|
18358
18391
|
}
|
|
18359
18392
|
else {
|
|
18360
|
-
(
|
|
18393
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18361
18394
|
}
|
|
18362
18395
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
|
18363
18396
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -18384,13 +18417,13 @@ Made in Italy` })));
|
|
|
18384
18417
|
};
|
|
18385
18418
|
}, [isActive, imgInfo]);
|
|
18386
18419
|
const handleMouseEnter = React.useCallback(() => {
|
|
18387
|
-
if (
|
|
18388
|
-
|
|
18420
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18421
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18389
18422
|
}
|
|
18390
18423
|
}, []);
|
|
18391
18424
|
const handleMouseLeave = React.useCallback(() => {
|
|
18392
|
-
if (
|
|
18393
|
-
|
|
18425
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18426
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
|
18394
18427
|
}
|
|
18395
18428
|
}, []);
|
|
18396
18429
|
const handleSlideChange = React.useCallback((swiper) => {
|
|
@@ -18411,7 +18444,7 @@ Made in Italy` })));
|
|
|
18411
18444
|
enabled: true
|
|
18412
18445
|
}
|
|
18413
18446
|
}
|
|
18414
|
-
: {}), { loop: true, ref:
|
|
18447
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
|
18415
18448
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
|
18416
18449
|
fontSize: '14px'
|
|
18417
18450
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
|
@@ -18428,7 +18461,7 @@ Made in Italy` })));
|
|
|
18428
18461
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
|
18429
18462
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
|
18430
18463
|
}))));
|
|
18431
|
-
};
|
|
18464
|
+
});
|
|
18432
18465
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
|
18433
18466
|
|
|
18434
18467
|
/*
|
|
@@ -18708,7 +18741,7 @@ Made in Italy` })));
|
|
|
18708
18741
|
* @Author: binruan@chatlabs.com
|
|
18709
18742
|
* @Date: 2024-03-20 10:27:31
|
|
18710
18743
|
* @LastEditors: binruan@chatlabs.com
|
|
18711
|
-
* @LastEditTime: 2025-05-
|
|
18744
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
|
18712
18745
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
|
18713
18746
|
*
|
|
18714
18747
|
*/
|
|
@@ -18728,6 +18761,7 @@ Made in Italy` })));
|
|
|
18728
18761
|
const skipLinkRef = React.useRef(false);
|
|
18729
18762
|
const [pageNum, setPageNum] = React.useState(2);
|
|
18730
18763
|
const videoWidgetRef = React.useRef(null);
|
|
18764
|
+
const pictureGroupRef = React.useRef(null);
|
|
18731
18765
|
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();
|
|
18732
18766
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
|
18733
18767
|
const isShowFingerTip = React.useMemo(() => {
|
|
@@ -18775,7 +18809,7 @@ Made in Italy` })));
|
|
|
18775
18809
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
|
18776
18810
|
}, [data, ctaType, swiperRef]);
|
|
18777
18811
|
const handleSessionCompleted = React.useCallback((fk) => {
|
|
18778
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
18812
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
18779
18813
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
18780
18814
|
let fromKName = '';
|
|
18781
18815
|
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))) {
|
|
@@ -18802,12 +18836,13 @@ Made in Italy` })));
|
|
|
18802
18836
|
eventSubject: 'sessionCompleted',
|
|
18803
18837
|
eventDescription: 'Session completed',
|
|
18804
18838
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
|
18805
|
-
|
|
18839
|
+
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 : '',
|
|
18840
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
|
18806
18841
|
position: activeIndex + '',
|
|
18807
18842
|
fromKName: fk || fromKName,
|
|
18808
18843
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
18809
|
-
ctatId: (
|
|
18810
|
-
traceInfo: (
|
|
18844
|
+
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 : '',
|
|
18845
|
+
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 : ''
|
|
18811
18846
|
}
|
|
18812
18847
|
});
|
|
18813
18848
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
|
@@ -18866,8 +18901,9 @@ Made in Italy` })));
|
|
|
18866
18901
|
refreshFeSession
|
|
18867
18902
|
]);
|
|
18868
18903
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
|
18869
|
-
var _a;
|
|
18904
|
+
var _a, _b;
|
|
18870
18905
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
|
18906
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
|
18871
18907
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
|
18872
18908
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
|
18873
18909
|
React.useEffect(() => {
|
|
@@ -18937,18 +18973,18 @@ Made in Italy` })));
|
|
|
18937
18973
|
return null;
|
|
18938
18974
|
}, [globalConfig, activeIndex, visList]);
|
|
18939
18975
|
const renderContent = React.useCallback((rec, index) => {
|
|
18940
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18976
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
18941
18977
|
if (rec === 'organic menu') {
|
|
18942
18978
|
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)));
|
|
18943
18979
|
}
|
|
18944
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
|
18980
|
+
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)) {
|
|
18945
18981
|
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 })));
|
|
18946
18982
|
}
|
|
18947
|
-
if ((
|
|
18948
|
-
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 }));
|
|
18983
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
|
18984
|
+
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 })));
|
|
18949
18985
|
}
|
|
18950
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
|
18951
|
-
return (
|
|
18986
|
+
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) {
|
|
18987
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
|
18952
18988
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
18953
18989
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
|
18954
18990
|
const Component = withBindDataSource(t);
|
|
@@ -18986,7 +19022,7 @@ Made in Italy` })));
|
|
|
18986
19022
|
};
|
|
18987
19023
|
}, [isShowMore]);
|
|
18988
19024
|
const renderBottom = React.useCallback((rec, index) => {
|
|
18989
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
19025
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
18990
19026
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
18991
19027
|
let cta = null;
|
|
18992
19028
|
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) {
|
|
@@ -18995,24 +19031,27 @@ Made in Italy` })));
|
|
|
18995
19031
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
18996
19032
|
cta = '商品CTA';
|
|
18997
19033
|
}
|
|
19034
|
+
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)) {
|
|
19035
|
+
cta = '服务CTA';
|
|
19036
|
+
}
|
|
18998
19037
|
else {
|
|
18999
|
-
cta = (
|
|
19038
|
+
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;
|
|
19000
19039
|
}
|
|
19001
19040
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
19002
19041
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
|
19003
19042
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
|
19004
|
-
((
|
|
19043
|
+
((_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));
|
|
19005
19044
|
return (React.createElement(React.Fragment, null,
|
|
19006
19045
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
|
19007
|
-
((
|
|
19008
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
|
19046
|
+
((_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' }),
|
|
19047
|
+
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` } },
|
|
19009
19048
|
React.createElement(Nudge, { nudge: nudge }),
|
|
19010
19049
|
((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' },
|
|
19011
19050
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
|
19012
19051
|
React.createElement("div", null,
|
|
19013
|
-
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: (
|
|
19052
|
+
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 }),
|
|
19014
19053
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
|
19015
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
|
19054
|
+
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) }))),
|
|
19016
19055
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
19017
19056
|
}
|
|
19018
19057
|
return null;
|
|
@@ -19051,7 +19090,7 @@ Made in Italy` })));
|
|
|
19051
19090
|
return null;
|
|
19052
19091
|
}, [globalConfig, waterFallData]);
|
|
19053
19092
|
const handleViewImageStartEnd = (item) => {
|
|
19054
|
-
var _a, _b, _c, _d, _e, _f;
|
|
19093
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19055
19094
|
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)) {
|
|
19056
19095
|
const endTime = Date.now();
|
|
19057
19096
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
|
@@ -19060,10 +19099,11 @@ Made in Italy` })));
|
|
|
19060
19099
|
eventSubject: 'viewImageCarouselEnd',
|
|
19061
19100
|
eventDescription: 'User end view the image carousel',
|
|
19062
19101
|
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 : '',
|
|
19063
|
-
|
|
19102
|
+
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 : '',
|
|
19103
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19064
19104
|
imageEndTime: `${endTime}`,
|
|
19065
19105
|
playDuration: `${duration}`,
|
|
19066
|
-
contentTags: JSON.stringify((
|
|
19106
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19067
19107
|
position: activeIndex + '',
|
|
19068
19108
|
contentFormat: 'image',
|
|
19069
19109
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
|
@@ -19072,7 +19112,7 @@ Made in Italy` })));
|
|
|
19072
19112
|
}
|
|
19073
19113
|
};
|
|
19074
19114
|
const handleSlideSkip = (item, position) => {
|
|
19075
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
19115
|
+
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;
|
|
19076
19116
|
if (isPreview || waterFallData)
|
|
19077
19117
|
return;
|
|
19078
19118
|
const t = new Date() - curTime.current;
|
|
@@ -19098,7 +19138,8 @@ Made in Italy` })));
|
|
|
19098
19138
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
|
19099
19139
|
position: position + '',
|
|
19100
19140
|
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 : '',
|
|
19101
|
-
|
|
19141
|
+
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 : '',
|
|
19142
|
+
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 : '',
|
|
19102
19143
|
contentFormat
|
|
19103
19144
|
}
|
|
19104
19145
|
});
|
|
@@ -19108,7 +19149,7 @@ Made in Italy` })));
|
|
|
19108
19149
|
}
|
|
19109
19150
|
};
|
|
19110
19151
|
const handleScrollEvent = (swiper) => {
|
|
19111
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
19152
|
+
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;
|
|
19112
19153
|
const item = data[swiper.previousIndex];
|
|
19113
19154
|
if (!item)
|
|
19114
19155
|
return;
|
|
@@ -19125,11 +19166,12 @@ Made in Italy` })));
|
|
|
19125
19166
|
eventSubject: 'scrollDown',
|
|
19126
19167
|
eventDescription: 'User scroll down',
|
|
19127
19168
|
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 : '',
|
|
19128
|
-
|
|
19169
|
+
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 : '',
|
|
19170
|
+
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 : '',
|
|
19129
19171
|
requestId: null,
|
|
19130
|
-
traceInfo: (
|
|
19172
|
+
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 : '',
|
|
19131
19173
|
contentFormat,
|
|
19132
|
-
position: ((
|
|
19174
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
|
19133
19175
|
}
|
|
19134
19176
|
});
|
|
19135
19177
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19141,12 +19183,13 @@ Made in Italy` })));
|
|
|
19141
19183
|
eventInfo: {
|
|
19142
19184
|
eventSubject: 'scrollUp',
|
|
19143
19185
|
eventDescription: 'User scroll up',
|
|
19144
|
-
contentId: (
|
|
19145
|
-
|
|
19186
|
+
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 : '',
|
|
19187
|
+
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 : '',
|
|
19188
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
|
19146
19189
|
requestId: null,
|
|
19147
|
-
traceInfo: (
|
|
19190
|
+
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 : '',
|
|
19148
19191
|
contentFormat,
|
|
19149
|
-
position: ((
|
|
19192
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
|
19150
19193
|
}
|
|
19151
19194
|
});
|
|
19152
19195
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19172,7 +19215,7 @@ Made in Italy` })));
|
|
|
19172
19215
|
}
|
|
19173
19216
|
}, [openHashtag, data, activeIndex]);
|
|
19174
19217
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
|
19175
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19218
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
19176
19219
|
const item = data[activeIndex];
|
|
19177
19220
|
// 如果是图片集则上报事件
|
|
19178
19221
|
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)) {
|
|
@@ -19183,9 +19226,10 @@ Made in Italy` })));
|
|
|
19183
19226
|
eventSubject: 'viewImageCarouselStart',
|
|
19184
19227
|
eventDescription: 'User start view the image carousel',
|
|
19185
19228
|
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 : '',
|
|
19186
|
-
|
|
19229
|
+
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 : '',
|
|
19230
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19187
19231
|
imageStartTime: `${startTime}`,
|
|
19188
|
-
contentTags: JSON.stringify((
|
|
19232
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19189
19233
|
position: activeIndex + '',
|
|
19190
19234
|
contentFormat: 'image',
|
|
19191
19235
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
|
@@ -19195,11 +19239,11 @@ Made in Italy` })));
|
|
|
19195
19239
|
if (enableCapi) {
|
|
19196
19240
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19197
19241
|
eventName: 'ViewContent',
|
|
19198
|
-
product: (
|
|
19242
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
|
19199
19243
|
});
|
|
19200
19244
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19201
19245
|
eventName: 'PageView',
|
|
19202
|
-
product: (
|
|
19246
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
|
19203
19247
|
});
|
|
19204
19248
|
}
|
|
19205
19249
|
}
|
|
@@ -19291,15 +19335,20 @@ Made in Italy` })));
|
|
|
19291
19335
|
swiperRef.current.swiper.allowTouchMove = true;
|
|
19292
19336
|
}, 500);
|
|
19293
19337
|
}, onActiveIndexChange: (swiper) => {
|
|
19338
|
+
var _a, _b;
|
|
19294
19339
|
setActiveIndex(swiper.activeIndex);
|
|
19295
19340
|
if (openHashtag)
|
|
19296
19341
|
return;
|
|
19297
19342
|
// 处理上滑下滑事件
|
|
19298
19343
|
handleScrollEvent(swiper);
|
|
19299
|
-
if (waterFallData || isEditor
|
|
19344
|
+
if (waterFallData || isEditor)
|
|
19300
19345
|
return;
|
|
19301
19346
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
|
19302
19347
|
if (!isLoadMore) {
|
|
19348
|
+
if (isDiyH5) {
|
|
19349
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
|
19350
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
|
19351
|
+
}
|
|
19303
19352
|
setIsLoadMore(true);
|
|
19304
19353
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
|
19305
19354
|
var _a;
|
|
@@ -19352,7 +19401,7 @@ Made in Italy` })));
|
|
|
19352
19401
|
}, []);
|
|
19353
19402
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
19354
19403
|
const handlePlaying = React.useCallback(() => {
|
|
19355
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19404
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19356
19405
|
setIsPauseVideo(false);
|
|
19357
19406
|
const item = data[index];
|
|
19358
19407
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -19365,14 +19414,15 @@ Made in Italy` })));
|
|
|
19365
19414
|
eventSubject: 'playVideo',
|
|
19366
19415
|
eventDescription: 'User played the video',
|
|
19367
19416
|
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 : '',
|
|
19368
|
-
|
|
19417
|
+
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 : '',
|
|
19418
|
+
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 : '',
|
|
19369
19419
|
playType,
|
|
19370
19420
|
startTime: videoCurrentTime,
|
|
19371
19421
|
videoDuration,
|
|
19372
|
-
contentTags: JSON.stringify((
|
|
19422
|
+
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 : []),
|
|
19373
19423
|
position: index + '',
|
|
19374
19424
|
contentFormat: 'video',
|
|
19375
|
-
traceInfo: (
|
|
19425
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19376
19426
|
}
|
|
19377
19427
|
});
|
|
19378
19428
|
setIsFirstPlay(false);
|
|
@@ -19411,7 +19461,7 @@ Made in Italy` })));
|
|
|
19411
19461
|
}
|
|
19412
19462
|
}, [isLoadFinish]);
|
|
19413
19463
|
const onPause = React.useCallback(() => {
|
|
19414
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19464
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19415
19465
|
const item = data[index];
|
|
19416
19466
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
19417
19467
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
@@ -19422,14 +19472,15 @@ Made in Italy` })));
|
|
|
19422
19472
|
eventSubject: 'playOverVideo',
|
|
19423
19473
|
eventDescription: 'User finished playing the video',
|
|
19424
19474
|
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 : '',
|
|
19425
|
-
|
|
19475
|
+
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 : '',
|
|
19476
|
+
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 : '',
|
|
19426
19477
|
endTime: videoCurrentTime,
|
|
19427
19478
|
videoDuration,
|
|
19428
19479
|
playDuration,
|
|
19429
|
-
contentTags: JSON.stringify((
|
|
19480
|
+
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 : []),
|
|
19430
19481
|
position: index + '',
|
|
19431
19482
|
contentFormat: 'video',
|
|
19432
|
-
traceInfo: (
|
|
19483
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19433
19484
|
}
|
|
19434
19485
|
});
|
|
19435
19486
|
}
|