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/index.cjs
CHANGED
@@ -644,6 +644,7 @@ const DEFAULT_TAG = 'FOR U';
|
|
644
644
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
|
645
645
|
var _a, _b, _c, _d, _e;
|
646
646
|
const [rtcList, setRtcList] = React.useState([]);
|
647
|
+
const [firstRtcList, setFirstRtcList] = React.useState([]);
|
647
648
|
const [tagList, setTagList] = React.useState([]);
|
648
649
|
const [loading, setLoading] = React.useState(true);
|
649
650
|
const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
|
@@ -814,6 +815,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
814
815
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
815
816
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
816
817
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
818
|
+
if (isDiyH5) {
|
819
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
820
|
+
}
|
817
821
|
}
|
818
822
|
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));
|
819
823
|
if (isNotNullList) {
|
@@ -839,27 +843,31 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
839
843
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag))
|
840
844
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
841
845
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
842
|
-
|
843
|
-
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 : []);
|
844
|
-
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));
|
846
|
+
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));
|
845
847
|
if (!isNotNullList) {
|
846
848
|
setIsNoMoreData(true);
|
847
849
|
}
|
848
|
-
return Object.assign(Object.assign({}, result.data), { recList: list });
|
849
850
|
}
|
850
|
-
|
851
|
+
let list = [];
|
852
|
+
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 : []);
|
853
|
+
return Object.assign(Object.assign({}, result.data), { recList: list });
|
851
854
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
852
855
|
const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
853
856
|
var _1, _2, _3, _4;
|
854
857
|
if (rtcList.length <= 0) {
|
855
858
|
return;
|
856
859
|
}
|
860
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
861
|
+
setRtcList(rtcList.concat(firstRtcList));
|
862
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
863
|
+
return;
|
864
|
+
}
|
857
865
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
858
866
|
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 })));
|
859
867
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
860
868
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
861
869
|
return data;
|
862
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
870
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
863
871
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
864
872
|
var _a, _b, _c, _d, _e;
|
865
873
|
let expire = false;
|
@@ -1086,7 +1094,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1086
1094
|
}
|
1087
1095
|
}), [bffFetch, utmVal]);
|
1088
1096
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
1089
|
-
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;
|
1097
|
+
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;
|
1090
1098
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1091
1099
|
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);
|
1092
1100
|
let fromKName = '';
|
@@ -1104,7 +1112,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1104
1112
|
}
|
1105
1113
|
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;
|
1106
1114
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1107
|
-
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: (
|
1115
|
+
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 })
|
1108
1116
|
});
|
1109
1117
|
}, [bffEventReport, isFromHashtag]);
|
1110
1118
|
const h5EnterLink = React.useCallback(() => {
|
@@ -1206,6 +1214,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1206
1214
|
}
|
1207
1215
|
setRtcList(list);
|
1208
1216
|
setCacheRtcList(list);
|
1217
|
+
if (isDiyH5) {
|
1218
|
+
setFirstRtcList(list);
|
1219
|
+
}
|
1209
1220
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1210
1221
|
if (channel) {
|
1211
1222
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1241,6 +1252,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1241
1252
|
}
|
1242
1253
|
setRtcList(list);
|
1243
1254
|
setCacheRtcList(list);
|
1255
|
+
if (isDiyH5) {
|
1256
|
+
setFirstRtcList(list);
|
1257
|
+
}
|
1244
1258
|
}
|
1245
1259
|
})
|
1246
1260
|
.finally(() => {
|
@@ -1765,14 +1779,14 @@ var settingRender$f = [
|
|
1765
1779
|
* @Author: binruan@chatlabs.com
|
1766
1780
|
* @Date: 2024-03-12 10:59:06
|
1767
1781
|
* @LastEditors: binruan@chatlabs.com
|
1768
|
-
* @LastEditTime:
|
1782
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
1769
1783
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1770
1784
|
*
|
1771
1785
|
*/
|
1772
1786
|
function useEventReport() {
|
1773
1787
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1774
1788
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
1775
|
-
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;
|
1789
|
+
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;
|
1776
1790
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1777
1791
|
if (i !== -1) {
|
1778
1792
|
return;
|
@@ -1805,11 +1819,11 @@ function useEventReport() {
|
|
1805
1819
|
contentFormat = 'image';
|
1806
1820
|
}
|
1807
1821
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1808
|
-
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 : '',
|
1822
|
+
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 }))
|
1809
1823
|
});
|
1810
1824
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1811
1825
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
1812
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
1826
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
1813
1827
|
let fromKName = '';
|
1814
1828
|
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))) {
|
1815
1829
|
fromKName = 'pdpPage';
|
@@ -1828,8 +1842,9 @@ function useEventReport() {
|
|
1828
1842
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
1829
1843
|
position: position + '',
|
1830
1844
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
1845
|
+
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 : '',
|
1831
1846
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
1832
|
-
traceInfo: (
|
1847
|
+
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 : '',
|
1833
1848
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
1834
1849
|
eventSubject: 'productView',
|
1835
1850
|
eventDescription: 'User browsed the product'
|
@@ -15632,7 +15647,7 @@ function WaterfallList(_a) {
|
|
15632
15647
|
* @Author: binruan@chatlabs.com
|
15633
15648
|
* @Date: 2024-01-10 10:58:24
|
15634
15649
|
* @LastEditors: binruan@chatlabs.com
|
15635
|
-
* @LastEditTime: 2025-
|
15650
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
15636
15651
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15637
15652
|
*
|
15638
15653
|
*/
|
@@ -15670,7 +15685,7 @@ const WaterFall = (props) => {
|
|
15670
15685
|
}
|
15671
15686
|
}, [waterFallData]);
|
15672
15687
|
const reportTagsView = React.useCallback(() => {
|
15673
|
-
var _a, _b, _c, _d, _e, _f;
|
15688
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
15674
15689
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15675
15690
|
if (!rec)
|
15676
15691
|
return;
|
@@ -15690,9 +15705,10 @@ const WaterFall = (props) => {
|
|
15690
15705
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15691
15706
|
eventInfo: {
|
15692
15707
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15708
|
+
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 : '',
|
15693
15709
|
position: cacheActiveIndex + '',
|
15694
|
-
contentTags: JSON.stringify((
|
15695
|
-
traceInfo: (
|
15710
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
15711
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
15696
15712
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15697
15713
|
fromKName,
|
15698
15714
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17774,7 +17790,7 @@ const LikeButton = (_a) => {
|
|
17774
17790
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17775
17791
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17776
17792
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17777
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17793
|
+
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;
|
17778
17794
|
if (state) {
|
17779
17795
|
// 先设置状态
|
17780
17796
|
setState(false);
|
@@ -17784,11 +17800,12 @@ const LikeButton = (_a) => {
|
|
17784
17800
|
eventSubject: 'favoriteContentCanceled',
|
17785
17801
|
eventDescription: 'This content was unfavorite by the user',
|
17786
17802
|
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 : '',
|
17787
|
-
|
17788
|
-
|
17803
|
+
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 : '',
|
17804
|
+
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 : '',
|
17805
|
+
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 : []),
|
17789
17806
|
position: position + '',
|
17790
|
-
contentFormat: ((
|
17791
|
-
traceInfo: (
|
17807
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
17808
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
17792
17809
|
}
|
17793
17810
|
});
|
17794
17811
|
// 如果接口调用失败,则回滚状态
|
@@ -17796,40 +17813,41 @@ const LikeButton = (_a) => {
|
|
17796
17813
|
setState(true);
|
17797
17814
|
}
|
17798
17815
|
else {
|
17799
|
-
const nRtcList = (
|
17816
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17800
17817
|
if (index === position) {
|
17801
17818
|
item.isCollected = false;
|
17802
17819
|
}
|
17803
17820
|
return item;
|
17804
|
-
})) !== null &&
|
17821
|
+
})) !== null && _s !== void 0 ? _s : [];
|
17805
17822
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17806
17823
|
}
|
17807
17824
|
}
|
17808
17825
|
else {
|
17809
17826
|
setState(true);
|
17810
|
-
const result = (
|
17827
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
17811
17828
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17812
17829
|
eventInfo: {
|
17813
17830
|
eventSubject: 'favoriteContent',
|
17814
17831
|
eventDescription: 'This content was favorite by the user',
|
17815
|
-
contentId: (
|
17816
|
-
|
17817
|
-
|
17832
|
+
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 : '',
|
17833
|
+
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 : '',
|
17834
|
+
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 : '',
|
17835
|
+
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 : []),
|
17818
17836
|
position: position + '',
|
17819
|
-
contentFormat: ((
|
17820
|
-
traceInfo: (
|
17837
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
17838
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
17821
17839
|
}
|
17822
17840
|
});
|
17823
17841
|
if (!result) {
|
17824
17842
|
setState(false);
|
17825
17843
|
}
|
17826
17844
|
else {
|
17827
|
-
const nRtcList = (
|
17845
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17828
17846
|
if (index === position) {
|
17829
17847
|
item.isCollected = true;
|
17830
17848
|
}
|
17831
17849
|
return item;
|
17832
|
-
})) !== null &&
|
17850
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
17833
17851
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17834
17852
|
}
|
17835
17853
|
}
|
@@ -17932,6 +17950,24 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17932
17950
|
return;
|
17933
17951
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17934
17952
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17953
|
+
const handleEnd = () => {
|
17954
|
+
var _a, _b, _c, _d, _e, _f;
|
17955
|
+
if (!videoRef.current)
|
17956
|
+
return;
|
17957
|
+
if (isDiyH5) {
|
17958
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
17959
|
+
if (!loopPlayRef.current)
|
17960
|
+
return;
|
17961
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) ;
|
17962
|
+
else {
|
17963
|
+
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;
|
17964
|
+
(_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);
|
17965
|
+
}
|
17966
|
+
}
|
17967
|
+
else {
|
17968
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
17969
|
+
}
|
17970
|
+
};
|
17935
17971
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
17936
17972
|
const handlePlaying = React.useCallback(() => {
|
17937
17973
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -17940,7 +17976,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17940
17976
|
setIsLoadFinish(true);
|
17941
17977
|
}, []);
|
17942
17978
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17943
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
17979
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
17944
17980
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17945
17981
|
return;
|
17946
17982
|
setIsPauseVideo(false);
|
@@ -17951,16 +17987,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17951
17987
|
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);
|
17952
17988
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17953
17989
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17954
|
-
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 : '',
|
17990
|
+
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) + '' }))
|
17955
17991
|
});
|
17956
17992
|
isFirstPlayRef.current = false;
|
17957
17993
|
}
|
17958
17994
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17959
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
17960
|
-
if (isDiyH5) {
|
17961
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17962
|
-
}
|
17963
|
-
}, []);
|
17964
17995
|
const handLoadeddata = React.useCallback(() => {
|
17965
17996
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17966
17997
|
return;
|
@@ -17985,13 +18016,12 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17985
18016
|
const handleLoadedmetadata = React.useCallback(() => {
|
17986
18017
|
if (!videoRef.current)
|
17987
18018
|
return;
|
17988
|
-
setCurrentTimeByStartTime();
|
17989
18019
|
loadedTimeRef.current = new Date();
|
17990
18020
|
handleStartPlay();
|
17991
18021
|
handLoadeddata();
|
17992
18022
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
17993
18023
|
const handleClickVideo = React.useCallback((type) => () => {
|
17994
|
-
var _a, _b, _c, _d, _e
|
18024
|
+
var _a, _b, _c, _d, _e;
|
17995
18025
|
if (!videoRef.current)
|
17996
18026
|
return;
|
17997
18027
|
if (!isLoadFinish)
|
@@ -18012,20 +18042,17 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18012
18042
|
break;
|
18013
18043
|
default:
|
18014
18044
|
if (isPause) {
|
18015
|
-
|
18016
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18017
|
-
}
|
18018
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18045
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
18019
18046
|
}
|
18020
18047
|
else {
|
18021
|
-
(
|
18048
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
18022
18049
|
}
|
18023
18050
|
setIsPauseVideo(!isPause);
|
18024
18051
|
break;
|
18025
18052
|
}
|
18026
18053
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18027
18054
|
const handlePause = React.useCallback(() => {
|
18028
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18055
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
18029
18056
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18030
18057
|
return;
|
18031
18058
|
if (activeIndex !== index)
|
@@ -18041,14 +18068,15 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18041
18068
|
eventSubject: 'playOverVideo',
|
18042
18069
|
eventDescription: 'User finished playing the video',
|
18043
18070
|
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 : '',
|
18044
|
-
|
18071
|
+
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 : '',
|
18072
|
+
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 : '',
|
18045
18073
|
endTime: videoCurrentTime,
|
18046
18074
|
videoDuration,
|
18047
18075
|
playDuration,
|
18048
|
-
contentTags: JSON.stringify((
|
18076
|
+
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 : []),
|
18049
18077
|
position: index + '',
|
18050
18078
|
contentFormat: 'video',
|
18051
|
-
traceInfo: (
|
18079
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
18052
18080
|
}
|
18053
18081
|
});
|
18054
18082
|
}
|
@@ -18056,27 +18084,8 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18056
18084
|
const handleWaiting = React.useCallback(() => {
|
18057
18085
|
setWaiting(true);
|
18058
18086
|
}, []);
|
18059
|
-
const handleTimeUpload = () => {
|
18060
|
-
if (!videoRef.current || !isDiyH5)
|
18061
|
-
return;
|
18062
|
-
setTimeout(() => {
|
18063
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18064
|
-
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)) {
|
18065
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18066
|
-
if (!loopPlayRef.current)
|
18067
|
-
return;
|
18068
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18069
|
-
(_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);
|
18070
|
-
}
|
18071
|
-
else {
|
18072
|
-
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;
|
18073
|
-
(_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);
|
18074
|
-
}
|
18075
|
-
}
|
18076
|
-
});
|
18077
|
-
};
|
18078
18087
|
React.useEffect(() => {
|
18079
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18088
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18080
18089
|
if (!isActive)
|
18081
18090
|
return;
|
18082
18091
|
const videoSrc = videoUrl;
|
@@ -18097,7 +18106,6 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18097
18106
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18098
18107
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18099
18108
|
var _a;
|
18100
|
-
setCurrentTimeByStartTime();
|
18101
18109
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18102
18110
|
});
|
18103
18111
|
}
|
@@ -18111,12 +18119,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18111
18119
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18112
18120
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18113
18121
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18114
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18122
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
18115
18123
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18116
18124
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18117
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18118
18125
|
return () => {
|
18119
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18126
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18120
18127
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18121
18128
|
if (!isPause)
|
18122
18129
|
handlePause();
|
@@ -18128,10 +18135,9 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18128
18135
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18129
18136
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18130
18137
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18131
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18138
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
18132
18139
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18133
18140
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18134
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18135
18141
|
};
|
18136
18142
|
}, [isActive]);
|
18137
18143
|
React.useEffect(() => {
|
@@ -18342,19 +18348,46 @@ const Picture = (props) => {
|
|
18342
18348
|
}, onLoad: onShowFirstImage }))));
|
18343
18349
|
};
|
18344
18350
|
|
18345
|
-
const PictureGroup$4 = ({ imgUrls,
|
18351
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
18346
18352
|
var _a, _b;
|
18347
18353
|
const { isActive } = useSwiperSlide();
|
18348
|
-
const { sxpParameter, openHashtag } = useSxpDataSource();
|
18354
|
+
const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
|
18349
18355
|
const [isLoad, setIsLoad] = React.useState(false);
|
18350
18356
|
const [imgInfo, setImgInfo] = React.useState();
|
18351
18357
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
18352
|
-
const
|
18358
|
+
const imgsSwiperRef = React.useRef();
|
18353
18359
|
const isFirstPlayRef = React.useRef(true);
|
18360
|
+
const loopPlayRef = React.useRef(true);
|
18354
18361
|
const initTime = new Date();
|
18362
|
+
React.useImperativeHandle(ref, () => {
|
18363
|
+
return {
|
18364
|
+
setLoopPlay(v) {
|
18365
|
+
loopPlayRef.current = v;
|
18366
|
+
}
|
18367
|
+
};
|
18368
|
+
});
|
18369
|
+
React.useEffect(() => {
|
18370
|
+
let timerId;
|
18371
|
+
if (isLoad && isActive && isDiyH5) {
|
18372
|
+
timerId = setTimeout(() => {
|
18373
|
+
var _a, _b, _c, _d;
|
18374
|
+
if (!loopPlayRef.current)
|
18375
|
+
return;
|
18376
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) ;
|
18377
|
+
else {
|
18378
|
+
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;
|
18379
|
+
(_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);
|
18380
|
+
}
|
18381
|
+
}, 3000);
|
18382
|
+
}
|
18383
|
+
return () => {
|
18384
|
+
if (timerId)
|
18385
|
+
clearTimeout(timerId);
|
18386
|
+
};
|
18387
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef]);
|
18355
18388
|
React.useEffect(() => {
|
18356
18389
|
if (isLoad && isActive) {
|
18357
|
-
(
|
18390
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
18358
18391
|
if (openHashtag) {
|
18359
18392
|
onViewImageEndEvent(rec);
|
18360
18393
|
}
|
@@ -18364,7 +18397,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18364
18397
|
}
|
18365
18398
|
}
|
18366
18399
|
else {
|
18367
|
-
(
|
18400
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
18368
18401
|
}
|
18369
18402
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18370
18403
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18391,13 +18424,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18391
18424
|
};
|
18392
18425
|
}, [isActive, imgInfo]);
|
18393
18426
|
const handleMouseEnter = React.useCallback(() => {
|
18394
|
-
if (
|
18395
|
-
|
18427
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18428
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
18396
18429
|
}
|
18397
18430
|
}, []);
|
18398
18431
|
const handleMouseLeave = React.useCallback(() => {
|
18399
|
-
if (
|
18400
|
-
|
18432
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18433
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
18401
18434
|
}
|
18402
18435
|
}, []);
|
18403
18436
|
const handleSlideChange = React.useCallback((swiper) => {
|
@@ -18418,7 +18451,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18418
18451
|
enabled: true
|
18419
18452
|
}
|
18420
18453
|
}
|
18421
|
-
: {}), { loop: true, ref:
|
18454
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18422
18455
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18423
18456
|
fontSize: '14px'
|
18424
18457
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18435,7 +18468,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18435
18468
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18436
18469
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18437
18470
|
}))));
|
18438
|
-
};
|
18471
|
+
});
|
18439
18472
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
18440
18473
|
|
18441
18474
|
/*
|
@@ -18715,7 +18748,7 @@ var NavBack$1 = React.memo(NavBack);
|
|
18715
18748
|
* @Author: binruan@chatlabs.com
|
18716
18749
|
* @Date: 2024-03-20 10:27:31
|
18717
18750
|
* @LastEditors: binruan@chatlabs.com
|
18718
|
-
* @LastEditTime: 2025-05-
|
18751
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
18719
18752
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18720
18753
|
*
|
18721
18754
|
*/
|
@@ -18735,6 +18768,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18735
18768
|
const skipLinkRef = React.useRef(false);
|
18736
18769
|
const [pageNum, setPageNum] = React.useState(2);
|
18737
18770
|
const videoWidgetRef = React.useRef(null);
|
18771
|
+
const pictureGroupRef = React.useRef(null);
|
18738
18772
|
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();
|
18739
18773
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18740
18774
|
const isShowFingerTip = React.useMemo(() => {
|
@@ -18782,7 +18816,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18782
18816
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18783
18817
|
}, [data, ctaType, swiperRef]);
|
18784
18818
|
const handleSessionCompleted = React.useCallback((fk) => {
|
18785
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18819
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
18786
18820
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18787
18821
|
let fromKName = '';
|
18788
18822
|
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))) {
|
@@ -18809,12 +18843,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18809
18843
|
eventSubject: 'sessionCompleted',
|
18810
18844
|
eventDescription: 'Session completed',
|
18811
18845
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18812
|
-
|
18846
|
+
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 : '',
|
18847
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18813
18848
|
position: activeIndex + '',
|
18814
18849
|
fromKName: fk || fromKName,
|
18815
18850
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18816
|
-
ctatId: (
|
18817
|
-
traceInfo: (
|
18851
|
+
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 : '',
|
18852
|
+
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 : ''
|
18818
18853
|
}
|
18819
18854
|
});
|
18820
18855
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -18873,8 +18908,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18873
18908
|
refreshFeSession
|
18874
18909
|
]);
|
18875
18910
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
18876
|
-
var _a;
|
18911
|
+
var _a, _b;
|
18877
18912
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
18913
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
18878
18914
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18879
18915
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18880
18916
|
React.useEffect(() => {
|
@@ -18944,18 +18980,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18944
18980
|
return null;
|
18945
18981
|
}, [globalConfig, activeIndex, visList]);
|
18946
18982
|
const renderContent = React.useCallback((rec, index) => {
|
18947
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18983
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
18948
18984
|
if (rec === 'organic menu') {
|
18949
18985
|
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)));
|
18950
18986
|
}
|
18951
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
18987
|
+
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)) {
|
18952
18988
|
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 })));
|
18953
18989
|
}
|
18954
|
-
if ((
|
18955
|
-
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 }));
|
18990
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
18991
|
+
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 })));
|
18956
18992
|
}
|
18957
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
18958
|
-
return (
|
18993
|
+
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) {
|
18994
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
18959
18995
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
18960
18996
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
18961
18997
|
const Component = withBindDataSource(t);
|
@@ -18993,7 +19029,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18993
19029
|
};
|
18994
19030
|
}, [isShowMore]);
|
18995
19031
|
const renderBottom = React.useCallback((rec, index) => {
|
18996
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19032
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
18997
19033
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
18998
19034
|
let cta = null;
|
18999
19035
|
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) {
|
@@ -19002,24 +19038,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19002
19038
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19003
19039
|
cta = '商品CTA';
|
19004
19040
|
}
|
19041
|
+
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)) {
|
19042
|
+
cta = '服务CTA';
|
19043
|
+
}
|
19005
19044
|
else {
|
19006
|
-
cta = (
|
19045
|
+
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;
|
19007
19046
|
}
|
19008
19047
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19009
19048
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
19010
19049
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
19011
|
-
((
|
19050
|
+
((_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));
|
19012
19051
|
return (React.createElement(React.Fragment, null,
|
19013
19052
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19014
|
-
((
|
19015
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19053
|
+
((_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' }),
|
19054
|
+
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` } },
|
19016
19055
|
React.createElement(Nudge, { nudge: nudge }),
|
19017
19056
|
((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' },
|
19018
19057
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
19019
19058
|
React.createElement("div", null,
|
19020
|
-
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: (
|
19059
|
+
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 }),
|
19021
19060
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19022
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19061
|
+
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) }))),
|
19023
19062
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19024
19063
|
}
|
19025
19064
|
return null;
|
@@ -19058,7 +19097,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19058
19097
|
return null;
|
19059
19098
|
}, [globalConfig, waterFallData]);
|
19060
19099
|
const handleViewImageStartEnd = (item) => {
|
19061
|
-
var _a, _b, _c, _d, _e, _f;
|
19100
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19062
19101
|
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)) {
|
19063
19102
|
const endTime = Date.now();
|
19064
19103
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19067,10 +19106,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19067
19106
|
eventSubject: 'viewImageCarouselEnd',
|
19068
19107
|
eventDescription: 'User end view the image carousel',
|
19069
19108
|
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 : '',
|
19070
|
-
|
19109
|
+
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 : '',
|
19110
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19071
19111
|
imageEndTime: `${endTime}`,
|
19072
19112
|
playDuration: `${duration}`,
|
19073
|
-
contentTags: JSON.stringify((
|
19113
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19074
19114
|
position: activeIndex + '',
|
19075
19115
|
contentFormat: 'image',
|
19076
19116
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19079,7 +19119,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19079
19119
|
}
|
19080
19120
|
};
|
19081
19121
|
const handleSlideSkip = (item, position) => {
|
19082
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19122
|
+
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;
|
19083
19123
|
if (isPreview || waterFallData)
|
19084
19124
|
return;
|
19085
19125
|
const t = new Date() - curTime.current;
|
@@ -19105,7 +19145,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19105
19145
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19106
19146
|
position: position + '',
|
19107
19147
|
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 : '',
|
19108
|
-
|
19148
|
+
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 : '',
|
19149
|
+
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 : '',
|
19109
19150
|
contentFormat
|
19110
19151
|
}
|
19111
19152
|
});
|
@@ -19115,7 +19156,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19115
19156
|
}
|
19116
19157
|
};
|
19117
19158
|
const handleScrollEvent = (swiper) => {
|
19118
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19159
|
+
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;
|
19119
19160
|
const item = data[swiper.previousIndex];
|
19120
19161
|
if (!item)
|
19121
19162
|
return;
|
@@ -19132,11 +19173,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19132
19173
|
eventSubject: 'scrollDown',
|
19133
19174
|
eventDescription: 'User scroll down',
|
19134
19175
|
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 : '',
|
19135
|
-
|
19176
|
+
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 : '',
|
19177
|
+
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 : '',
|
19136
19178
|
requestId: null,
|
19137
|
-
traceInfo: (
|
19179
|
+
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 : '',
|
19138
19180
|
contentFormat,
|
19139
|
-
position: ((
|
19181
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
19140
19182
|
}
|
19141
19183
|
});
|
19142
19184
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19148,12 +19190,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19148
19190
|
eventInfo: {
|
19149
19191
|
eventSubject: 'scrollUp',
|
19150
19192
|
eventDescription: 'User scroll up',
|
19151
|
-
contentId: (
|
19152
|
-
|
19193
|
+
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 : '',
|
19194
|
+
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 : '',
|
19195
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19153
19196
|
requestId: null,
|
19154
|
-
traceInfo: (
|
19197
|
+
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 : '',
|
19155
19198
|
contentFormat,
|
19156
|
-
position: ((
|
19199
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
19157
19200
|
}
|
19158
19201
|
});
|
19159
19202
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19179,7 +19222,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19179
19222
|
}
|
19180
19223
|
}, [openHashtag, data, activeIndex]);
|
19181
19224
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19182
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19225
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
19183
19226
|
const item = data[activeIndex];
|
19184
19227
|
// 如果是图片集则上报事件
|
19185
19228
|
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)) {
|
@@ -19190,9 +19233,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19190
19233
|
eventSubject: 'viewImageCarouselStart',
|
19191
19234
|
eventDescription: 'User start view the image carousel',
|
19192
19235
|
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 : '',
|
19193
|
-
|
19236
|
+
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 : '',
|
19237
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19194
19238
|
imageStartTime: `${startTime}`,
|
19195
|
-
contentTags: JSON.stringify((
|
19239
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19196
19240
|
position: activeIndex + '',
|
19197
19241
|
contentFormat: 'image',
|
19198
19242
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19202,11 +19246,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19202
19246
|
if (enableCapi) {
|
19203
19247
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19204
19248
|
eventName: 'ViewContent',
|
19205
|
-
product: (
|
19249
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
19206
19250
|
});
|
19207
19251
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19208
19252
|
eventName: 'PageView',
|
19209
|
-
product: (
|
19253
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
19210
19254
|
});
|
19211
19255
|
}
|
19212
19256
|
}
|
@@ -19298,15 +19342,20 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19298
19342
|
swiperRef.current.swiper.allowTouchMove = true;
|
19299
19343
|
}, 500);
|
19300
19344
|
}, onActiveIndexChange: (swiper) => {
|
19345
|
+
var _a, _b;
|
19301
19346
|
setActiveIndex(swiper.activeIndex);
|
19302
19347
|
if (openHashtag)
|
19303
19348
|
return;
|
19304
19349
|
// 处理上滑下滑事件
|
19305
19350
|
handleScrollEvent(swiper);
|
19306
|
-
if (waterFallData || isEditor
|
19351
|
+
if (waterFallData || isEditor)
|
19307
19352
|
return;
|
19308
19353
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19309
19354
|
if (!isLoadMore) {
|
19355
|
+
if (isDiyH5) {
|
19356
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19357
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19358
|
+
}
|
19310
19359
|
setIsLoadMore(true);
|
19311
19360
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19312
19361
|
var _a;
|
@@ -19359,7 +19408,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19359
19408
|
}, []);
|
19360
19409
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19361
19410
|
const handlePlaying = React.useCallback(() => {
|
19362
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19411
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19363
19412
|
setIsPauseVideo(false);
|
19364
19413
|
const item = data[index];
|
19365
19414
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19372,14 +19421,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19372
19421
|
eventSubject: 'playVideo',
|
19373
19422
|
eventDescription: 'User played the video',
|
19374
19423
|
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 : '',
|
19375
|
-
|
19424
|
+
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 : '',
|
19425
|
+
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 : '',
|
19376
19426
|
playType,
|
19377
19427
|
startTime: videoCurrentTime,
|
19378
19428
|
videoDuration,
|
19379
|
-
contentTags: JSON.stringify((
|
19429
|
+
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 : []),
|
19380
19430
|
position: index + '',
|
19381
19431
|
contentFormat: 'video',
|
19382
|
-
traceInfo: (
|
19432
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19383
19433
|
}
|
19384
19434
|
});
|
19385
19435
|
setIsFirstPlay(false);
|
@@ -19418,7 +19468,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19418
19468
|
}
|
19419
19469
|
}, [isLoadFinish]);
|
19420
19470
|
const onPause = React.useCallback(() => {
|
19421
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19471
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19422
19472
|
const item = data[index];
|
19423
19473
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19424
19474
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19429,14 +19479,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19429
19479
|
eventSubject: 'playOverVideo',
|
19430
19480
|
eventDescription: 'User finished playing the video',
|
19431
19481
|
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 : '',
|
19432
|
-
|
19482
|
+
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 : '',
|
19483
|
+
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 : '',
|
19433
19484
|
endTime: videoCurrentTime,
|
19434
19485
|
videoDuration,
|
19435
19486
|
playDuration,
|
19436
|
-
contentTags: JSON.stringify((
|
19487
|
+
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 : []),
|
19437
19488
|
position: index + '',
|
19438
19489
|
contentFormat: 'video',
|
19439
|
-
traceInfo: (
|
19490
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19440
19491
|
}
|
19441
19492
|
});
|
19442
19493
|
}
|