pb-sxp-ui 1.16.11 → 1.16.12
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 +142 -182
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +142 -182
- 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 +142 -182
- 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 +8 -10
- package/es/core/components/SxpPageRender/LikeButton/index.js +15 -17
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
- package/es/core/components/SxpPageRender/PictureGroup/index.js +13 -41
- package/es/core/components/SxpPageRender/VideoWidget/index.js +44 -33
- package/es/core/components/SxpPageRender/WaterFall/index.js +3 -4
- package/es/core/components/SxpPageRender/index.js +37 -53
- package/es/core/context/SxpDataSourceProvider.js +3 -18
- package/es/core/hooks/useEventReport.js +5 -6
- package/es/materials/sxp/popup/CommodityDetail/index.js +7 -1
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +7 -1
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +8 -10
- package/lib/core/components/SxpPageRender/LikeButton/index.js +15 -17
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +12 -40
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +44 -33
- package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -4
- package/lib/core/components/SxpPageRender/index.js +37 -53
- package/lib/core/context/SxpDataSourceProvider.js +3 -18
- package/lib/core/hooks/useEventReport.js +5 -6
- package/lib/materials/sxp/popup/CommodityDetail/index.js +7 -1
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +7 -1
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
|
@@ -637,7 +637,6 @@
|
|
|
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([]);
|
|
641
640
|
const [tagList, setTagList] = React.useState([]);
|
|
642
641
|
const [loading, setLoading] = React.useState(true);
|
|
643
642
|
const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
|
|
@@ -808,9 +807,6 @@
|
|
|
808
807
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
|
809
808
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
|
810
809
|
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
|
-
}
|
|
814
810
|
}
|
|
815
811
|
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));
|
|
816
812
|
if (isNotNullList) {
|
|
@@ -850,17 +846,12 @@
|
|
|
850
846
|
if (rtcList.length <= 0) {
|
|
851
847
|
return;
|
|
852
848
|
}
|
|
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
|
-
}
|
|
858
849
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
|
859
850
|
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 })));
|
|
860
851
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
|
861
852
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
|
862
853
|
return data;
|
|
863
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList
|
|
854
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
|
864
855
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
|
865
856
|
var _a, _b, _c, _d, _e;
|
|
866
857
|
let expire = false;
|
|
@@ -1087,7 +1078,7 @@
|
|
|
1087
1078
|
}
|
|
1088
1079
|
}), [bffFetch, utmVal]);
|
|
1089
1080
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
|
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
|
|
1081
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
|
1091
1082
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
1092
1083
|
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);
|
|
1093
1084
|
let fromKName = '';
|
|
@@ -1105,7 +1096,7 @@
|
|
|
1105
1096
|
}
|
|
1106
1097
|
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;
|
|
1107
1098
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
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 : '',
|
|
1099
|
+
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
|
|
1109
1100
|
});
|
|
1110
1101
|
}, [bffEventReport, isFromHashtag]);
|
|
1111
1102
|
const h5EnterLink = React.useCallback(() => {
|
|
@@ -1207,9 +1198,6 @@
|
|
|
1207
1198
|
}
|
|
1208
1199
|
setRtcList(list);
|
|
1209
1200
|
setCacheRtcList(list);
|
|
1210
|
-
if (isDiyH5) {
|
|
1211
|
-
setFirstRtcList(list);
|
|
1212
|
-
}
|
|
1213
1201
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
|
1214
1202
|
if (channel) {
|
|
1215
1203
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
|
@@ -1245,9 +1233,6 @@
|
|
|
1245
1233
|
}
|
|
1246
1234
|
setRtcList(list);
|
|
1247
1235
|
setCacheRtcList(list);
|
|
1248
|
-
if (isDiyH5) {
|
|
1249
|
-
setFirstRtcList(list);
|
|
1250
|
-
}
|
|
1251
1236
|
}
|
|
1252
1237
|
})
|
|
1253
1238
|
.finally(() => {
|
|
@@ -1772,14 +1757,14 @@
|
|
|
1772
1757
|
* @Author: binruan@chatlabs.com
|
|
1773
1758
|
* @Date: 2024-03-12 10:59:06
|
|
1774
1759
|
* @LastEditors: binruan@chatlabs.com
|
|
1775
|
-
* @LastEditTime:
|
|
1760
|
+
* @LastEditTime: 2024-11-28 11:17:16
|
|
1776
1761
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
|
1777
1762
|
*
|
|
1778
1763
|
*/
|
|
1779
1764
|
function useEventReport() {
|
|
1780
1765
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
|
1781
1766
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
|
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
|
|
1767
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
|
|
1783
1768
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
|
1784
1769
|
if (i !== -1) {
|
|
1785
1770
|
return;
|
|
@@ -1812,11 +1797,11 @@
|
|
|
1812
1797
|
contentFormat = 'image';
|
|
1813
1798
|
}
|
|
1814
1799
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
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 : '',
|
|
1800
|
+
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', ctatId: (_0 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _0 !== void 0 ? _0 : '', traceInfo: (_13 = (_10 = (_8 = (_4 = (_1 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _1 !== void 0 ? _1 : (_3 = (_2 = data === null || data === void 0 ? void 0 : data.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProducts) === null || _6 === void 0 ? void 0 : _6[0]) === null || _7 === void 0 ? void 0 : _7.traceInfo) !== null && _8 !== void 0 ? _8 : (_9 = data === null || data === void 0 ? void 0 : data.product) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = data === null || data === void 0 ? void 0 : data.video) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '' }, (contentFormat && { contentFormat }))
|
|
1816
1801
|
});
|
|
1817
1802
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
|
1818
1803
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
|
1819
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p
|
|
1804
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
1820
1805
|
let fromKName = '';
|
|
1821
1806
|
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))) {
|
|
1822
1807
|
fromKName = 'pdpPage';
|
|
@@ -1835,9 +1820,8 @@
|
|
|
1835
1820
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
|
1836
1821
|
position: position + '',
|
|
1837
1822
|
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 : '',
|
|
1839
1823
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
|
1840
|
-
traceInfo: (
|
|
1824
|
+
traceInfo: (_p = (_m = (_h = (_e = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _e !== void 0 ? _e : (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.traceInfo) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
|
|
1841
1825
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
|
1842
1826
|
eventSubject: 'productView',
|
|
1843
1827
|
eventDescription: 'User browsed the product'
|
|
@@ -10389,7 +10373,7 @@
|
|
|
10389
10373
|
const CommodityDetail$1 = (_a) => {
|
|
10390
10374
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
|
|
10391
10375
|
var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
|
|
10392
|
-
const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig } = useSxpDataSource();
|
|
10376
|
+
const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
|
|
10393
10377
|
const { jumpToWeb, productView } = useEventReport();
|
|
10394
10378
|
const curTimeRef = React.useRef(null);
|
|
10395
10379
|
const [showModal, setShowModal] = React.useState(false);
|
|
@@ -10415,6 +10399,12 @@
|
|
|
10415
10399
|
if (!isPost) {
|
|
10416
10400
|
productView(data, product, cta, viewTime || curTimeRef.current, position);
|
|
10417
10401
|
}
|
|
10402
|
+
else {
|
|
10403
|
+
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
|
10404
|
+
eventSubject: 'clickCta',
|
|
10405
|
+
eventDescription: 'User clicked the CTA'
|
|
10406
|
+
}, data, product, position);
|
|
10407
|
+
}
|
|
10418
10408
|
window.location.href = window.getJointUtmLink(product.link);
|
|
10419
10409
|
}
|
|
10420
10410
|
};
|
|
@@ -11317,7 +11307,7 @@
|
|
|
11317
11307
|
var _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;
|
|
11318
11308
|
var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio, isTel, iframeBgColor, isActive = true } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio", "isTel", "iframeBgColor", "isActive"]);
|
|
11319
11309
|
React.useState(true);
|
|
11320
|
-
const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef, globalConfig } = useSxpDataSource();
|
|
11310
|
+
const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef, globalConfig, ctaEvent } = useSxpDataSource();
|
|
11321
11311
|
const { jumpToWeb, productView } = useEventReport();
|
|
11322
11312
|
React.useState(false);
|
|
11323
11313
|
React.useState(false);
|
|
@@ -11346,6 +11336,12 @@
|
|
|
11346
11336
|
if (!isPost) {
|
|
11347
11337
|
productView(data, product, cta, viewTime || curTimeRef.current, position);
|
|
11348
11338
|
}
|
|
11339
|
+
else {
|
|
11340
|
+
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
|
11341
|
+
eventSubject: 'clickCta',
|
|
11342
|
+
eventDescription: 'User clicked the CTA'
|
|
11343
|
+
}, data, product, position);
|
|
11344
|
+
}
|
|
11349
11345
|
window.location.href = window.getJointUtmLink(product.link);
|
|
11350
11346
|
}
|
|
11351
11347
|
};
|
|
@@ -15640,7 +15636,7 @@ Made in Italy` })));
|
|
|
15640
15636
|
* @Author: binruan@chatlabs.com
|
|
15641
15637
|
* @Date: 2024-01-10 10:58:24
|
|
15642
15638
|
* @LastEditors: binruan@chatlabs.com
|
|
15643
|
-
* @LastEditTime: 2025-
|
|
15639
|
+
* @LastEditTime: 2025-02-28 10:00:31
|
|
15644
15640
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
|
15645
15641
|
*
|
|
15646
15642
|
*/
|
|
@@ -15678,7 +15674,7 @@ Made in Italy` })));
|
|
|
15678
15674
|
}
|
|
15679
15675
|
}, [waterFallData]);
|
|
15680
15676
|
const reportTagsView = React.useCallback(() => {
|
|
15681
|
-
var _a, _b, _c, _d, _e, _f
|
|
15677
|
+
var _a, _b, _c, _d, _e, _f;
|
|
15682
15678
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
|
15683
15679
|
if (!rec)
|
|
15684
15680
|
return;
|
|
@@ -15698,10 +15694,9 @@ Made in Italy` })));
|
|
|
15698
15694
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
15699
15695
|
eventInfo: {
|
|
15700
15696
|
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 : '',
|
|
15702
15697
|
position: cacheActiveIndex + '',
|
|
15703
|
-
contentTags: JSON.stringify((
|
|
15704
|
-
traceInfo: (
|
|
15698
|
+
contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
|
|
15699
|
+
traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
|
|
15705
15700
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
|
15706
15701
|
fromKName,
|
|
15707
15702
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
@@ -17783,7 +17778,7 @@ Made in Italy` })));
|
|
|
17783
17778
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
|
17784
17779
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
|
17785
17780
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17786
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z
|
|
17781
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
17787
17782
|
if (state) {
|
|
17788
17783
|
// 先设置状态
|
|
17789
17784
|
setState(false);
|
|
@@ -17793,12 +17788,11 @@ Made in Italy` })));
|
|
|
17793
17788
|
eventSubject: 'favoriteContentCanceled',
|
|
17794
17789
|
eventDescription: 'This content was unfavorite by the user',
|
|
17795
17790
|
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 : '',
|
|
17796
|
-
|
|
17797
|
-
|
|
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 : []),
|
|
17791
|
+
contentName: (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '',
|
|
17792
|
+
contentTags: JSON.stringify((_l = (_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.tags) !== null && _l !== void 0 ? _l : []),
|
|
17799
17793
|
position: position + '',
|
|
17800
|
-
contentFormat: ((
|
|
17801
|
-
traceInfo: (
|
|
17794
|
+
contentFormat: ((_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.url) ? 'video' : 'image',
|
|
17795
|
+
traceInfo: (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
|
17802
17796
|
}
|
|
17803
17797
|
});
|
|
17804
17798
|
// 如果接口调用失败，则回滚状态
|
|
@@ -17806,41 +17800,40 @@ Made in Italy` })));
|
|
|
17806
17800
|
setState(true);
|
|
17807
17801
|
}
|
|
17808
17802
|
else {
|
|
17809
|
-
const nRtcList = (
|
|
17803
|
+
const nRtcList = (_p = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17810
17804
|
if (index === position) {
|
|
17811
17805
|
item.isCollected = false;
|
|
17812
17806
|
}
|
|
17813
17807
|
return item;
|
|
17814
|
-
})) !== null &&
|
|
17808
|
+
})) !== null && _p !== void 0 ? _p : [];
|
|
17815
17809
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17816
17810
|
}
|
|
17817
17811
|
}
|
|
17818
17812
|
else {
|
|
17819
17813
|
setState(true);
|
|
17820
|
-
const result = (
|
|
17814
|
+
const result = (_q = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _q !== void 0 ? _q : false;
|
|
17821
17815
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17822
17816
|
eventInfo: {
|
|
17823
17817
|
eventSubject: 'favoriteContent',
|
|
17824
17818
|
eventDescription: 'This content was favorite by the user',
|
|
17825
|
-
contentId: (
|
|
17826
|
-
|
|
17827
|
-
|
|
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 : []),
|
|
17819
|
+
contentId: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
|
|
17820
|
+
contentName: (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.title) !== null && _u !== void 0 ? _u : '',
|
|
17821
|
+
contentTags: JSON.stringify((_w = (_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.tags) !== null && _w !== void 0 ? _w : []),
|
|
17829
17822
|
position: position + '',
|
|
17830
|
-
contentFormat: ((
|
|
17831
|
-
traceInfo: (
|
|
17823
|
+
contentFormat: ((_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.url) ? 'video' : 'image',
|
|
17824
|
+
traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
|
|
17832
17825
|
}
|
|
17833
17826
|
});
|
|
17834
17827
|
if (!result) {
|
|
17835
17828
|
setState(false);
|
|
17836
17829
|
}
|
|
17837
17830
|
else {
|
|
17838
|
-
const nRtcList = (
|
|
17831
|
+
const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17839
17832
|
if (index === position) {
|
|
17840
17833
|
item.isCollected = true;
|
|
17841
17834
|
}
|
|
17842
17835
|
return item;
|
|
17843
|
-
})) !== null &&
|
|
17836
|
+
})) !== null && _z !== void 0 ? _z : [];
|
|
17844
17837
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17845
17838
|
}
|
|
17846
17839
|
}
|
|
@@ -17943,24 +17936,6 @@ Made in Italy` })));
|
|
|
17943
17936
|
return;
|
|
17944
17937
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
17945
17938
|
}, [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
|
-
};
|
|
17964
17939
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
17965
17940
|
const handlePlaying = React.useCallback(() => {
|
|
17966
17941
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
@@ -17969,7 +17944,7 @@ Made in Italy` })));
|
|
|
17969
17944
|
setIsLoadFinish(true);
|
|
17970
17945
|
}, []);
|
|
17971
17946
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17972
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q
|
|
17947
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
17973
17948
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
17974
17949
|
return;
|
|
17975
17950
|
setIsPauseVideo(false);
|
|
@@ -17980,11 +17955,16 @@ Made in Italy` })));
|
|
|
17980
17955
|
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);
|
|
17981
17956
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
|
17982
17957
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
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 : '',
|
|
17958
|
+
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', contentName: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []), position: index + '', contentFormat: 'video', traceInfo: (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.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) + '' }))
|
|
17984
17959
|
});
|
|
17985
17960
|
isFirstPlayRef.current = false;
|
|
17986
17961
|
}
|
|
17987
17962
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17963
|
+
const setCurrentTimeByStartTime = React.useCallback(() => {
|
|
17964
|
+
if (isDiyH5) {
|
|
17965
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
17966
|
+
}
|
|
17967
|
+
}, []);
|
|
17988
17968
|
const handLoadeddata = React.useCallback(() => {
|
|
17989
17969
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
|
17990
17970
|
return;
|
|
@@ -18009,12 +17989,13 @@ Made in Italy` })));
|
|
|
18009
17989
|
const handleLoadedmetadata = React.useCallback(() => {
|
|
18010
17990
|
if (!videoRef.current)
|
|
18011
17991
|
return;
|
|
17992
|
+
setCurrentTimeByStartTime();
|
|
18012
17993
|
loadedTimeRef.current = new Date();
|
|
18013
17994
|
handleStartPlay();
|
|
18014
17995
|
handLoadeddata();
|
|
18015
17996
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
|
18016
17997
|
const handleClickVideo = React.useCallback((type) => () => {
|
|
18017
|
-
var _a, _b, _c, _d, _e;
|
|
17998
|
+
var _a, _b, _c, _d, _e, _f;
|
|
18018
17999
|
if (!videoRef.current)
|
|
18019
18000
|
return;
|
|
18020
18001
|
if (!isLoadFinish)
|
|
@@ -18035,17 +18016,20 @@ Made in Italy` })));
|
|
|
18035
18016
|
break;
|
|
18036
18017
|
default:
|
|
18037
18018
|
if (isPause) {
|
|
18038
|
-
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.
|
|
18019
|
+
if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
|
|
18020
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
18021
|
+
}
|
|
18022
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
|
18039
18023
|
}
|
|
18040
18024
|
else {
|
|
18041
|
-
(
|
|
18025
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
|
18042
18026
|
}
|
|
18043
18027
|
setIsPauseVideo(!isPause);
|
|
18044
18028
|
break;
|
|
18045
18029
|
}
|
|
18046
18030
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
18047
18031
|
const handlePause = React.useCallback(() => {
|
|
18048
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
|
18032
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
18049
18033
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
18050
18034
|
return;
|
|
18051
18035
|
if (activeIndex !== index)
|
|
@@ -18061,15 +18045,14 @@ Made in Italy` })));
|
|
|
18061
18045
|
eventSubject: 'playOverVideo',
|
|
18062
18046
|
eventDescription: 'User finished playing the video',
|
|
18063
18047
|
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 : '',
|
|
18064
|
-
|
|
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 : '',
|
|
18048
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
|
18066
18049
|
endTime: videoCurrentTime,
|
|
18067
18050
|
videoDuration,
|
|
18068
18051
|
playDuration,
|
|
18069
|
-
contentTags: JSON.stringify((
|
|
18052
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
|
18070
18053
|
position: index + '',
|
|
18071
18054
|
contentFormat: 'video',
|
|
18072
|
-
traceInfo: (
|
|
18055
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
|
18073
18056
|
}
|
|
18074
18057
|
});
|
|
18075
18058
|
}
|
|
@@ -18077,8 +18060,27 @@ Made in Italy` })));
|
|
|
18077
18060
|
const handleWaiting = React.useCallback(() => {
|
|
18078
18061
|
setWaiting(true);
|
|
18079
18062
|
}, []);
|
|
18063
|
+
const handleTimeUpload = () => {
|
|
18064
|
+
if (!videoRef.current || !isDiyH5)
|
|
18065
|
+
return;
|
|
18066
|
+
setTimeout(() => {
|
|
18067
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18068
|
+
if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
|
|
18069
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
18070
|
+
if (!loopPlayRef.current)
|
|
18071
|
+
return;
|
|
18072
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18073
|
+
(_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
|
|
18074
|
+
}
|
|
18075
|
+
else {
|
|
18076
|
+
const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
|
|
18077
|
+
(_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
|
|
18078
|
+
}
|
|
18079
|
+
}
|
|
18080
|
+
});
|
|
18081
|
+
};
|
|
18080
18082
|
React.useEffect(() => {
|
|
18081
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18083
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
18082
18084
|
if (!isActive)
|
|
18083
18085
|
return;
|
|
18084
18086
|
const videoSrc = videoUrl;
|
|
@@ -18099,6 +18101,7 @@ Made in Italy` })));
|
|
|
18099
18101
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
18100
18102
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
18101
18103
|
var _a;
|
|
18104
|
+
setCurrentTimeByStartTime();
|
|
18102
18105
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
18103
18106
|
});
|
|
18104
18107
|
}
|
|
@@ -18112,11 +18115,12 @@ Made in Italy` })));
|
|
|
18112
18115
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
|
18113
18116
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
|
18114
18117
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
|
18115
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
|
18118
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
|
|
18116
18119
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
|
18117
18120
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
|
18121
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
|
18118
18122
|
return () => {
|
|
18119
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18123
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
18120
18124
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
|
18121
18125
|
if (!isPause)
|
|
18122
18126
|
handlePause();
|
|
@@ -18128,9 +18132,10 @@ Made in Italy` })));
|
|
|
18128
18132
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
|
18129
18133
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
|
18130
18134
|
(_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',
|
|
18135
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
|
|
18132
18136
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
|
18133
18137
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
|
18138
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
|
18134
18139
|
};
|
|
18135
18140
|
}, [isActive]);
|
|
18136
18141
|
React.useEffect(() => {
|
|
@@ -18341,46 +18346,19 @@ Made in Italy` })));
|
|
|
18341
18346
|
}, onLoad: onShowFirstImage }))));
|
|
18342
18347
|
};
|
|
18343
18348
|
|
|
18344
|
-
const PictureGroup$4 =
|
|
18349
|
+
const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
|
18345
18350
|
var _a, _b;
|
|
18346
18351
|
const { isActive } = useSwiperSlide();
|
|
18347
|
-
const { sxpParameter, openHashtag
|
|
18352
|
+
const { sxpParameter, openHashtag } = useSxpDataSource();
|
|
18348
18353
|
const [isLoad, setIsLoad] = React.useState(false);
|
|
18349
18354
|
const [imgInfo, setImgInfo] = React.useState();
|
|
18350
18355
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
|
18351
|
-
const
|
|
18356
|
+
const swiperRef = React.useRef();
|
|
18352
18357
|
const isFirstPlayRef = React.useRef(true);
|
|
18353
|
-
const loopPlayRef = React.useRef(true);
|
|
18354
18358
|
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]);
|
|
18381
18359
|
React.useEffect(() => {
|
|
18382
18360
|
if (isLoad && isActive) {
|
|
18383
|
-
(
|
|
18361
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
|
|
18384
18362
|
if (openHashtag) {
|
|
18385
18363
|
onViewImageEndEvent(rec);
|
|
18386
18364
|
}
|
|
@@ -18390,7 +18368,7 @@ Made in Italy` })));
|
|
|
18390
18368
|
}
|
|
18391
18369
|
}
|
|
18392
18370
|
else {
|
|
18393
|
-
(
|
|
18371
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
|
|
18394
18372
|
}
|
|
18395
18373
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
|
18396
18374
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -18417,13 +18395,13 @@ Made in Italy` })));
|
|
|
18417
18395
|
};
|
|
18418
18396
|
}, [isActive, imgInfo]);
|
|
18419
18397
|
const handleMouseEnter = React.useCallback(() => {
|
|
18420
|
-
if (
|
|
18421
|
-
|
|
18398
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
|
18399
|
+
swiperRef.current.swiper.autoplay.stop();
|
|
18422
18400
|
}
|
|
18423
18401
|
}, []);
|
|
18424
18402
|
const handleMouseLeave = React.useCallback(() => {
|
|
18425
|
-
if (
|
|
18426
|
-
|
|
18403
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
|
18404
|
+
swiperRef.current.swiper.autoplay.start();
|
|
18427
18405
|
}
|
|
18428
18406
|
}, []);
|
|
18429
18407
|
const handleSlideChange = React.useCallback((swiper) => {
|
|
@@ -18444,7 +18422,7 @@ Made in Italy` })));
|
|
|
18444
18422
|
enabled: true
|
|
18445
18423
|
}
|
|
18446
18424
|
}
|
|
18447
|
-
: {}), { loop: true, ref:
|
|
18425
|
+
: {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
|
18448
18426
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
|
18449
18427
|
fontSize: '14px'
|
|
18450
18428
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
|
@@ -18461,7 +18439,7 @@ Made in Italy` })));
|
|
|
18461
18439
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
|
18462
18440
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
|
18463
18441
|
}))));
|
|
18464
|
-
}
|
|
18442
|
+
};
|
|
18465
18443
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
|
18466
18444
|
|
|
18467
18445
|
/*
|
|
@@ -18741,7 +18719,7 @@ Made in Italy` })));
|
|
|
18741
18719
|
* @Author: binruan@chatlabs.com
|
|
18742
18720
|
* @Date: 2024-03-20 10:27:31
|
|
18743
18721
|
* @LastEditors: binruan@chatlabs.com
|
|
18744
|
-
* @LastEditTime: 2025-05-
|
|
18722
|
+
* @LastEditTime: 2025-05-09 15:51:40
|
|
18745
18723
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
|
18746
18724
|
*
|
|
18747
18725
|
*/
|
|
@@ -18761,7 +18739,6 @@ Made in Italy` })));
|
|
|
18761
18739
|
const skipLinkRef = React.useRef(false);
|
|
18762
18740
|
const [pageNum, setPageNum] = React.useState(2);
|
|
18763
18741
|
const videoWidgetRef = React.useRef(null);
|
|
18764
|
-
const pictureGroupRef = React.useRef(null);
|
|
18765
18742
|
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();
|
|
18766
18743
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
|
18767
18744
|
const isShowFingerTip = React.useMemo(() => {
|
|
@@ -18809,7 +18786,7 @@ Made in Italy` })));
|
|
|
18809
18786
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
|
18810
18787
|
}, [data, ctaType, swiperRef]);
|
|
18811
18788
|
const handleSessionCompleted = React.useCallback((fk) => {
|
|
18812
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v
|
|
18789
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
18813
18790
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
18814
18791
|
let fromKName = '';
|
|
18815
18792
|
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))) {
|
|
@@ -18836,13 +18813,12 @@ Made in Italy` })));
|
|
|
18836
18813
|
eventSubject: 'sessionCompleted',
|
|
18837
18814
|
eventDescription: 'Session completed',
|
|
18838
18815
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
|
18839
|
-
|
|
18840
|
-
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
|
18816
|
+
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
|
18841
18817
|
position: activeIndex + '',
|
|
18842
18818
|
fromKName: fk || fromKName,
|
|
18843
18819
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
18844
|
-
ctatId: (
|
|
18845
|
-
traceInfo: (
|
|
18820
|
+
ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
|
18821
|
+
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
|
|
18846
18822
|
}
|
|
18847
18823
|
});
|
|
18848
18824
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
|
@@ -18901,9 +18877,8 @@ Made in Italy` })));
|
|
|
18901
18877
|
refreshFeSession
|
|
18902
18878
|
]);
|
|
18903
18879
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
|
18904
|
-
var _a
|
|
18880
|
+
var _a;
|
|
18905
18881
|
(_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);
|
|
18907
18882
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
|
18908
18883
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
|
18909
18884
|
React.useEffect(() => {
|
|
@@ -18973,18 +18948,18 @@ Made in Italy` })));
|
|
|
18973
18948
|
return null;
|
|
18974
18949
|
}, [globalConfig, activeIndex, visList]);
|
|
18975
18950
|
const renderContent = React.useCallback((rec, index) => {
|
|
18976
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18951
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18977
18952
|
if (rec === 'organic menu') {
|
|
18978
18953
|
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)));
|
|
18979
18954
|
}
|
|
18980
|
-
if ((
|
|
18955
|
+
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
|
18981
18956
|
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 })));
|
|
18982
18957
|
}
|
|
18983
|
-
if ((
|
|
18984
|
-
return (React.createElement(PictureGroup$5,
|
|
18958
|
+
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
|
18959
|
+
return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
|
18985
18960
|
}
|
|
18986
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
|
18987
|
-
return (
|
|
18961
|
+
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
|
|
18962
|
+
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
|
18988
18963
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
18989
18964
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
|
18990
18965
|
const Component = withBindDataSource(t);
|
|
@@ -19022,7 +18997,7 @@ Made in Italy` })));
|
|
|
19022
18997
|
};
|
|
19023
18998
|
}, [isShowMore]);
|
|
19024
18999
|
const renderBottom = React.useCallback((rec, index) => {
|
|
19025
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q
|
|
19000
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
19026
19001
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
19027
19002
|
let cta = null;
|
|
19028
19003
|
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) {
|
|
@@ -19031,27 +19006,24 @@ Made in Italy` })));
|
|
|
19031
19006
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
19032
19007
|
cta = '商品CTA';
|
|
19033
19008
|
}
|
|
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
|
-
}
|
|
19037
19009
|
else {
|
|
19038
|
-
cta = (
|
|
19010
|
+
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
|
19039
19011
|
}
|
|
19040
19012
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
19041
19013
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
|
19042
19014
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
|
19043
|
-
((
|
|
19015
|
+
((_f = ['MultiCommodity', 'MultiCommodityDiro', 'MultiCommodityDiroNew']) === null || _f === void 0 ? void 0 : _f.includes((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type));
|
|
19044
19016
|
return (React.createElement(React.Fragment, null,
|
|
19045
19017
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
|
19046
|
-
((
|
|
19047
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
|
19018
|
+
((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
|
19019
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _j !== void 0 ? _j : 40}px` } },
|
|
19048
19020
|
React.createElement(Nudge, { nudge: nudge }),
|
|
19049
19021
|
((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' },
|
|
19050
19022
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
|
19051
19023
|
React.createElement("div", null,
|
|
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: (
|
|
19024
|
+
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', 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 }),
|
|
19053
19025
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
|
19054
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
|
19026
|
+
React.createElement(Hashtag$1, { index: activeIndex, tags: (_o = (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.hashTags) !== null && _o !== void 0 ? _o : [], itemId: (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.itemId, itemType: ((_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
|
19055
19027
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
19056
19028
|
}
|
|
19057
19029
|
return null;
|
|
@@ -19090,7 +19062,7 @@ Made in Italy` })));
|
|
|
19090
19062
|
return null;
|
|
19091
19063
|
}, [globalConfig, waterFallData]);
|
|
19092
19064
|
const handleViewImageStartEnd = (item) => {
|
|
19093
|
-
var _a, _b, _c, _d, _e, _f
|
|
19065
|
+
var _a, _b, _c, _d, _e, _f;
|
|
19094
19066
|
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)) {
|
|
19095
19067
|
const endTime = Date.now();
|
|
19096
19068
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
|
@@ -19099,11 +19071,10 @@ Made in Italy` })));
|
|
|
19099
19071
|
eventSubject: 'viewImageCarouselEnd',
|
|
19100
19072
|
eventDescription: 'User end view the image carousel',
|
|
19101
19073
|
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 : '',
|
|
19102
|
-
|
|
19103
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19074
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
|
19104
19075
|
imageEndTime: `${endTime}`,
|
|
19105
19076
|
playDuration: `${duration}`,
|
|
19106
|
-
contentTags: JSON.stringify((
|
|
19077
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
|
19107
19078
|
position: activeIndex + '',
|
|
19108
19079
|
contentFormat: 'image',
|
|
19109
19080
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
|
@@ -19112,7 +19083,7 @@ Made in Italy` })));
|
|
|
19112
19083
|
}
|
|
19113
19084
|
};
|
|
19114
19085
|
const handleSlideSkip = (item, position) => {
|
|
19115
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x
|
|
19086
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
19116
19087
|
if (isPreview || waterFallData)
|
|
19117
19088
|
return;
|
|
19118
19089
|
const t = new Date() - curTime.current;
|
|
@@ -19138,8 +19109,7 @@ Made in Italy` })));
|
|
|
19138
19109
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
|
19139
19110
|
position: position + '',
|
|
19140
19111
|
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 : '',
|
|
19141
|
-
|
|
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 : '',
|
|
19112
|
+
traceInfo: (_x = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : (_w = item === null || item === void 0 ? void 0 : item.product) === null || _w === void 0 ? void 0 : _w.traceInfo) !== null && _x !== void 0 ? _x : '',
|
|
19143
19113
|
contentFormat
|
|
19144
19114
|
}
|
|
19145
19115
|
});
|
|
@@ -19149,7 +19119,7 @@ Made in Italy` })));
|
|
|
19149
19119
|
}
|
|
19150
19120
|
};
|
|
19151
19121
|
const handleScrollEvent = (swiper) => {
|
|
19152
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w
|
|
19122
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
19153
19123
|
const item = data[swiper.previousIndex];
|
|
19154
19124
|
if (!item)
|
|
19155
19125
|
return;
|
|
@@ -19166,12 +19136,11 @@ Made in Italy` })));
|
|
|
19166
19136
|
eventSubject: 'scrollDown',
|
|
19167
19137
|
eventDescription: 'User scroll down',
|
|
19168
19138
|
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 : '',
|
|
19169
|
-
|
|
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 : '',
|
|
19139
|
+
productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
|
|
19171
19140
|
requestId: null,
|
|
19172
|
-
traceInfo: (
|
|
19141
|
+
traceInfo: (_l = (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : (_k = item === null || item === void 0 ? void 0 : item.product) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : '',
|
|
19173
19142
|
contentFormat,
|
|
19174
|
-
position: ((
|
|
19143
|
+
position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
|
|
19175
19144
|
}
|
|
19176
19145
|
});
|
|
19177
19146
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19183,13 +19152,12 @@ Made in Italy` })));
|
|
|
19183
19152
|
eventInfo: {
|
|
19184
19153
|
eventSubject: 'scrollUp',
|
|
19185
19154
|
eventDescription: 'User scroll up',
|
|
19186
|
-
contentId: (
|
|
19187
|
-
|
|
19188
|
-
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
|
19155
|
+
contentId: (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
|
|
19156
|
+
productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
|
19189
19157
|
requestId: null,
|
|
19190
|
-
traceInfo: (
|
|
19158
|
+
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : '',
|
|
19191
19159
|
contentFormat,
|
|
19192
|
-
position: ((
|
|
19160
|
+
position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
|
|
19193
19161
|
}
|
|
19194
19162
|
});
|
|
19195
19163
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19215,7 +19183,7 @@ Made in Italy` })));
|
|
|
19215
19183
|
}
|
|
19216
19184
|
}, [openHashtag, data, activeIndex]);
|
|
19217
19185
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
|
19218
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
|
19186
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19219
19187
|
const item = data[activeIndex];
|
|
19220
19188
|
// 如果是图片集则上报事件
|
|
19221
19189
|
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)) {
|
|
@@ -19226,10 +19194,9 @@ Made in Italy` })));
|
|
|
19226
19194
|
eventSubject: 'viewImageCarouselStart',
|
|
19227
19195
|
eventDescription: 'User start view the image carousel',
|
|
19228
19196
|
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 : '',
|
|
19229
|
-
|
|
19230
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19197
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
|
19231
19198
|
imageStartTime: `${startTime}`,
|
|
19232
|
-
contentTags: JSON.stringify((
|
|
19199
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
|
19233
19200
|
position: activeIndex + '',
|
|
19234
19201
|
contentFormat: 'image',
|
|
19235
19202
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
|
@@ -19239,11 +19206,11 @@ Made in Italy` })));
|
|
|
19239
19206
|
if (enableCapi) {
|
|
19240
19207
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19241
19208
|
eventName: 'ViewContent',
|
|
19242
|
-
product: (
|
|
19209
|
+
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
|
|
19243
19210
|
});
|
|
19244
19211
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19245
19212
|
eventName: 'PageView',
|
|
19246
|
-
product: (
|
|
19213
|
+
product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
|
|
19247
19214
|
});
|
|
19248
19215
|
}
|
|
19249
19216
|
}
|
|
@@ -19335,20 +19302,15 @@ Made in Italy` })));
|
|
|
19335
19302
|
swiperRef.current.swiper.allowTouchMove = true;
|
|
19336
19303
|
}, 500);
|
|
19337
19304
|
}, onActiveIndexChange: (swiper) => {
|
|
19338
|
-
var _a, _b;
|
|
19339
19305
|
setActiveIndex(swiper.activeIndex);
|
|
19340
19306
|
if (openHashtag)
|
|
19341
19307
|
return;
|
|
19342
19308
|
// 处理上滑下滑事件
|
|
19343
19309
|
handleScrollEvent(swiper);
|
|
19344
|
-
if (waterFallData || isEditor)
|
|
19310
|
+
if (waterFallData || isEditor || isDiyH5)
|
|
19345
19311
|
return;
|
|
19346
19312
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
|
19347
19313
|
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
|
-
}
|
|
19352
19314
|
setIsLoadMore(true);
|
|
19353
19315
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
|
19354
19316
|
var _a;
|
|
@@ -19401,7 +19363,7 @@ Made in Italy` })));
|
|
|
19401
19363
|
}, []);
|
|
19402
19364
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
19403
19365
|
const handlePlaying = React.useCallback(() => {
|
|
19404
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
|
19366
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19405
19367
|
setIsPauseVideo(false);
|
|
19406
19368
|
const item = data[index];
|
|
19407
19369
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -19414,15 +19376,14 @@ Made in Italy` })));
|
|
|
19414
19376
|
eventSubject: 'playVideo',
|
|
19415
19377
|
eventDescription: 'User played the video',
|
|
19416
19378
|
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 : '',
|
|
19417
|
-
|
|
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 : '',
|
|
19379
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
|
19419
19380
|
playType,
|
|
19420
19381
|
startTime: videoCurrentTime,
|
|
19421
19382
|
videoDuration,
|
|
19422
|
-
contentTags: JSON.stringify((
|
|
19383
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
|
19423
19384
|
position: index + '',
|
|
19424
19385
|
contentFormat: 'video',
|
|
19425
|
-
traceInfo: (
|
|
19386
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
|
19426
19387
|
}
|
|
19427
19388
|
});
|
|
19428
19389
|
setIsFirstPlay(false);
|
|
@@ -19461,7 +19422,7 @@ Made in Italy` })));
|
|
|
19461
19422
|
}
|
|
19462
19423
|
}, [isLoadFinish]);
|
|
19463
19424
|
const onPause = React.useCallback(() => {
|
|
19464
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
|
19425
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19465
19426
|
const item = data[index];
|
|
19466
19427
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
19467
19428
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
@@ -19472,15 +19433,14 @@ Made in Italy` })));
|
|
|
19472
19433
|
eventSubject: 'playOverVideo',
|
|
19473
19434
|
eventDescription: 'User finished playing the video',
|
|
19474
19435
|
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 : '',
|
|
19475
|
-
|
|
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 : '',
|
|
19436
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
|
19477
19437
|
endTime: videoCurrentTime,
|
|
19478
19438
|
videoDuration,
|
|
19479
19439
|
playDuration,
|
|
19480
|
-
contentTags: JSON.stringify((
|
|
19440
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
|
19481
19441
|
position: index + '',
|
|
19482
19442
|
contentFormat: 'video',
|
|
19483
|
-
traceInfo: (
|
|
19443
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
|
19484
19444
|
}
|
|
19485
19445
|
});
|
|
19486
19446
|
}
|