pb-sxp-ui 1.16.12 → 1.16.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +181 -130
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +181 -130
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +181 -130
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/DiyPortalPreview/VideoWidget.js +10 -8
- package/es/core/components/SxpPageRender/LikeButton/index.js +17 -15
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/es/core/components/SxpPageRender/PictureGroup/index.js +39 -13
- package/es/core/components/SxpPageRender/VideoWidget/index.js +32 -45
- package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/es/core/components/SxpPageRender/index.js +53 -37
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -0
- package/es/core/context/SxpDataSourceProvider.js +20 -4
- package/es/core/hooks/useEventReport.js +6 -5
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +10 -8
- package/lib/core/components/SxpPageRender/LikeButton/index.js +17 -15
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +38 -12
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +32 -45
- package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/lib/core/components/SxpPageRender/index.js +53 -37
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -0
- package/lib/core/context/SxpDataSourceProvider.js +20 -4
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/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) {
|
@@ -853,12 +857,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
853
857
|
if (rtcList.length <= 0) {
|
854
858
|
return;
|
855
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
|
+
}
|
856
865
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
857
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 })));
|
858
867
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
859
868
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
860
869
|
return data;
|
861
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
870
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
862
871
|
const refreshFeSession = React.useCallback((enableReSid, event) => {
|
863
872
|
var _a, _b, _c, _d, _e;
|
864
873
|
let expire = false;
|
@@ -1085,7 +1094,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1085
1094
|
}
|
1086
1095
|
}), [bffFetch, utmVal]);
|
1087
1096
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
1088
|
-
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;
|
1089
1098
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1090
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);
|
1091
1100
|
let fromKName = '';
|
@@ -1103,7 +1112,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1103
1112
|
}
|
1104
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;
|
1105
1114
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1106
|
-
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 })
|
1107
1116
|
});
|
1108
1117
|
}, [bffEventReport, isFromHashtag]);
|
1109
1118
|
const h5EnterLink = React.useCallback(() => {
|
@@ -1205,6 +1214,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1205
1214
|
}
|
1206
1215
|
setRtcList(list);
|
1207
1216
|
setCacheRtcList(list);
|
1217
|
+
if (isDiyH5) {
|
1218
|
+
setFirstRtcList(list);
|
1219
|
+
}
|
1208
1220
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1209
1221
|
if (channel) {
|
1210
1222
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1240,6 +1252,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1240
1252
|
}
|
1241
1253
|
setRtcList(list);
|
1242
1254
|
setCacheRtcList(list);
|
1255
|
+
if (isDiyH5) {
|
1256
|
+
setFirstRtcList(list);
|
1257
|
+
}
|
1243
1258
|
}
|
1244
1259
|
})
|
1245
1260
|
.finally(() => {
|
@@ -1303,7 +1318,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1303
1318
|
refreshFeSession,
|
1304
1319
|
getAccount,
|
1305
1320
|
accountSonsent,
|
1306
|
-
isDiyH5
|
1321
|
+
isDiyH5,
|
1322
|
+
firstRtcList
|
1307
1323
|
} }, isShowConsent ? (React.createElement(Consent$4, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
|
1308
1324
|
rtcList,
|
1309
1325
|
mutateLike: bffMutateLike,
|
@@ -1764,14 +1780,14 @@ var settingRender$f = [
|
|
1764
1780
|
* @Author: binruan@chatlabs.com
|
1765
1781
|
* @Date: 2024-03-12 10:59:06
|
1766
1782
|
* @LastEditors: binruan@chatlabs.com
|
1767
|
-
* @LastEditTime:
|
1783
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
1768
1784
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1769
1785
|
*
|
1770
1786
|
*/
|
1771
1787
|
function useEventReport() {
|
1772
1788
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1773
1789
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
1774
|
-
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;
|
1790
|
+
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;
|
1775
1791
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1776
1792
|
if (i !== -1) {
|
1777
1793
|
return;
|
@@ -1804,11 +1820,11 @@ function useEventReport() {
|
|
1804
1820
|
contentFormat = 'image';
|
1805
1821
|
}
|
1806
1822
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1807
|
-
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 : '',
|
1823
|
+
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 }))
|
1808
1824
|
});
|
1809
1825
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1810
1826
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
1811
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
1827
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
1812
1828
|
let fromKName = '';
|
1813
1829
|
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))) {
|
1814
1830
|
fromKName = 'pdpPage';
|
@@ -1827,8 +1843,9 @@ function useEventReport() {
|
|
1827
1843
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
1828
1844
|
position: position + '',
|
1829
1845
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
1846
|
+
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 : '',
|
1830
1847
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
1831
|
-
traceInfo: (
|
1848
|
+
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 : '',
|
1832
1849
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
1833
1850
|
eventSubject: 'productView',
|
1834
1851
|
eventDescription: 'User browsed the product'
|
@@ -15643,7 +15660,7 @@ function WaterfallList(_a) {
|
|
15643
15660
|
* @Author: binruan@chatlabs.com
|
15644
15661
|
* @Date: 2024-01-10 10:58:24
|
15645
15662
|
* @LastEditors: binruan@chatlabs.com
|
15646
|
-
* @LastEditTime: 2025-
|
15663
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
15647
15664
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15648
15665
|
*
|
15649
15666
|
*/
|
@@ -15681,7 +15698,7 @@ const WaterFall = (props) => {
|
|
15681
15698
|
}
|
15682
15699
|
}, [waterFallData]);
|
15683
15700
|
const reportTagsView = React.useCallback(() => {
|
15684
|
-
var _a, _b, _c, _d, _e, _f;
|
15701
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
15685
15702
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15686
15703
|
if (!rec)
|
15687
15704
|
return;
|
@@ -15701,9 +15718,10 @@ const WaterFall = (props) => {
|
|
15701
15718
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15702
15719
|
eventInfo: {
|
15703
15720
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15721
|
+
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 : '',
|
15704
15722
|
position: cacheActiveIndex + '',
|
15705
|
-
contentTags: JSON.stringify((
|
15706
|
-
traceInfo: (
|
15723
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
15724
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
15707
15725
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15708
15726
|
fromKName,
|
15709
15727
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17785,7 +17803,7 @@ const LikeButton = (_a) => {
|
|
17785
17803
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17786
17804
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17787
17805
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17788
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17806
|
+
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;
|
17789
17807
|
if (state) {
|
17790
17808
|
// 先设置状态
|
17791
17809
|
setState(false);
|
@@ -17795,11 +17813,12 @@ const LikeButton = (_a) => {
|
|
17795
17813
|
eventSubject: 'favoriteContentCanceled',
|
17796
17814
|
eventDescription: 'This content was unfavorite by the user',
|
17797
17815
|
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 : '',
|
17798
|
-
|
17799
|
-
|
17816
|
+
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 : '',
|
17817
|
+
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 : '',
|
17818
|
+
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 : []),
|
17800
17819
|
position: position + '',
|
17801
|
-
contentFormat: ((
|
17802
|
-
traceInfo: (
|
17820
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
17821
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
17803
17822
|
}
|
17804
17823
|
});
|
17805
17824
|
// 如果接口调用失败,则回滚状态
|
@@ -17807,40 +17826,41 @@ const LikeButton = (_a) => {
|
|
17807
17826
|
setState(true);
|
17808
17827
|
}
|
17809
17828
|
else {
|
17810
|
-
const nRtcList = (
|
17829
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17811
17830
|
if (index === position) {
|
17812
17831
|
item.isCollected = false;
|
17813
17832
|
}
|
17814
17833
|
return item;
|
17815
|
-
})) !== null &&
|
17834
|
+
})) !== null && _s !== void 0 ? _s : [];
|
17816
17835
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17817
17836
|
}
|
17818
17837
|
}
|
17819
17838
|
else {
|
17820
17839
|
setState(true);
|
17821
|
-
const result = (
|
17840
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
17822
17841
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17823
17842
|
eventInfo: {
|
17824
17843
|
eventSubject: 'favoriteContent',
|
17825
17844
|
eventDescription: 'This content was favorite by the user',
|
17826
|
-
contentId: (
|
17827
|
-
|
17828
|
-
|
17845
|
+
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 : '',
|
17846
|
+
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 : '',
|
17847
|
+
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 : '',
|
17848
|
+
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 : []),
|
17829
17849
|
position: position + '',
|
17830
|
-
contentFormat: ((
|
17831
|
-
traceInfo: (
|
17850
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
17851
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
17832
17852
|
}
|
17833
17853
|
});
|
17834
17854
|
if (!result) {
|
17835
17855
|
setState(false);
|
17836
17856
|
}
|
17837
17857
|
else {
|
17838
|
-
const nRtcList = (
|
17858
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17839
17859
|
if (index === position) {
|
17840
17860
|
item.isCollected = true;
|
17841
17861
|
}
|
17842
17862
|
return item;
|
17843
|
-
})) !== null &&
|
17863
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
17844
17864
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17845
17865
|
}
|
17846
17866
|
}
|
@@ -17877,7 +17897,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
17877
17897
|
const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
17878
17898
|
var _a, _b;
|
17879
17899
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
17880
|
-
const { bffEventReport, sxpParameter,
|
17900
|
+
const { bffEventReport, sxpParameter, firstRtcList, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
17881
17901
|
const videoStartTime = React.useRef(0);
|
17882
17902
|
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
17883
17903
|
const { isActive } = useSwiperSlide();
|
@@ -17943,6 +17963,23 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17943
17963
|
return;
|
17944
17964
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17945
17965
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17966
|
+
const handleEnd = () => {
|
17967
|
+
var _a, _b, _c, _d, _e, _f;
|
17968
|
+
if (!videoRef.current)
|
17969
|
+
return;
|
17970
|
+
if (isDiyH5) {
|
17971
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
17972
|
+
if (!loopPlayRef.current)
|
17973
|
+
return;
|
17974
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
17975
|
+
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;
|
17976
|
+
(_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);
|
17977
|
+
}
|
17978
|
+
}
|
17979
|
+
else {
|
17980
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
17981
|
+
}
|
17982
|
+
};
|
17946
17983
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
17947
17984
|
const handlePlaying = React.useCallback(() => {
|
17948
17985
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -17951,7 +17988,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17951
17988
|
setIsLoadFinish(true);
|
17952
17989
|
}, []);
|
17953
17990
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17954
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
17991
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
17955
17992
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17956
17993
|
return;
|
17957
17994
|
setIsPauseVideo(false);
|
@@ -17962,16 +17999,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17962
17999
|
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);
|
17963
18000
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17964
18001
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17965
|
-
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 : '',
|
18002
|
+
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) + '' }))
|
17966
18003
|
});
|
17967
18004
|
isFirstPlayRef.current = false;
|
17968
18005
|
}
|
17969
18006
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17970
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
17971
|
-
if (isDiyH5) {
|
17972
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17973
|
-
}
|
17974
|
-
}, []);
|
17975
18007
|
const handLoadeddata = React.useCallback(() => {
|
17976
18008
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17977
18009
|
return;
|
@@ -17996,13 +18028,12 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17996
18028
|
const handleLoadedmetadata = React.useCallback(() => {
|
17997
18029
|
if (!videoRef.current)
|
17998
18030
|
return;
|
17999
|
-
setCurrentTimeByStartTime();
|
18000
18031
|
loadedTimeRef.current = new Date();
|
18001
18032
|
handleStartPlay();
|
18002
18033
|
handLoadeddata();
|
18003
18034
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
18004
18035
|
const handleClickVideo = React.useCallback((type) => () => {
|
18005
|
-
var _a, _b, _c, _d, _e
|
18036
|
+
var _a, _b, _c, _d, _e;
|
18006
18037
|
if (!videoRef.current)
|
18007
18038
|
return;
|
18008
18039
|
if (!isLoadFinish)
|
@@ -18023,20 +18054,17 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18023
18054
|
break;
|
18024
18055
|
default:
|
18025
18056
|
if (isPause) {
|
18026
|
-
|
18027
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18028
|
-
}
|
18029
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18057
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
18030
18058
|
}
|
18031
18059
|
else {
|
18032
|
-
(
|
18060
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
18033
18061
|
}
|
18034
18062
|
setIsPauseVideo(!isPause);
|
18035
18063
|
break;
|
18036
18064
|
}
|
18037
18065
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18038
18066
|
const handlePause = React.useCallback(() => {
|
18039
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18067
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
18040
18068
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18041
18069
|
return;
|
18042
18070
|
if (activeIndex !== index)
|
@@ -18052,14 +18080,15 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18052
18080
|
eventSubject: 'playOverVideo',
|
18053
18081
|
eventDescription: 'User finished playing the video',
|
18054
18082
|
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 : '',
|
18055
|
-
|
18083
|
+
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 : '',
|
18084
|
+
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 : '',
|
18056
18085
|
endTime: videoCurrentTime,
|
18057
18086
|
videoDuration,
|
18058
18087
|
playDuration,
|
18059
|
-
contentTags: JSON.stringify((
|
18088
|
+
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 : []),
|
18060
18089
|
position: index + '',
|
18061
18090
|
contentFormat: 'video',
|
18062
|
-
traceInfo: (
|
18091
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
18063
18092
|
}
|
18064
18093
|
});
|
18065
18094
|
}
|
@@ -18067,27 +18096,8 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18067
18096
|
const handleWaiting = React.useCallback(() => {
|
18068
18097
|
setWaiting(true);
|
18069
18098
|
}, []);
|
18070
|
-
const handleTimeUpload = () => {
|
18071
|
-
if (!videoRef.current || !isDiyH5)
|
18072
|
-
return;
|
18073
|
-
setTimeout(() => {
|
18074
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18075
|
-
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)) {
|
18076
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18077
|
-
if (!loopPlayRef.current)
|
18078
|
-
return;
|
18079
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18080
|
-
(_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);
|
18081
|
-
}
|
18082
|
-
else {
|
18083
|
-
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;
|
18084
|
-
(_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);
|
18085
|
-
}
|
18086
|
-
}
|
18087
|
-
});
|
18088
|
-
};
|
18089
18099
|
React.useEffect(() => {
|
18090
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18100
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18091
18101
|
if (!isActive)
|
18092
18102
|
return;
|
18093
18103
|
const videoSrc = videoUrl;
|
@@ -18108,7 +18118,6 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18108
18118
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18109
18119
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18110
18120
|
var _a;
|
18111
|
-
setCurrentTimeByStartTime();
|
18112
18121
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18113
18122
|
});
|
18114
18123
|
}
|
@@ -18122,12 +18131,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18122
18131
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18123
18132
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18124
18133
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18125
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18134
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
18126
18135
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18127
18136
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18128
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18129
18137
|
return () => {
|
18130
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18138
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18131
18139
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18132
18140
|
if (!isPause)
|
18133
18141
|
handlePause();
|
@@ -18139,10 +18147,9 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18139
18147
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18140
18148
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18141
18149
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18142
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18150
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
18143
18151
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18144
18152
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18145
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18146
18153
|
};
|
18147
18154
|
}, [isActive]);
|
18148
18155
|
React.useEffect(() => {
|
@@ -18353,19 +18360,45 @@ const Picture = (props) => {
|
|
18353
18360
|
}, onLoad: onShowFirstImage }))));
|
18354
18361
|
};
|
18355
18362
|
|
18356
|
-
const PictureGroup$4 = ({ imgUrls,
|
18363
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
18357
18364
|
var _a, _b;
|
18358
18365
|
const { isActive } = useSwiperSlide();
|
18359
|
-
const {
|
18366
|
+
const { firstRtcList, openHashtag, isDiyH5 } = useSxpDataSource();
|
18360
18367
|
const [isLoad, setIsLoad] = React.useState(false);
|
18361
18368
|
const [imgInfo, setImgInfo] = React.useState();
|
18362
18369
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
18363
|
-
const
|
18370
|
+
const imgsSwiperRef = React.useRef();
|
18364
18371
|
const isFirstPlayRef = React.useRef(true);
|
18372
|
+
const loopPlayRef = React.useRef(true);
|
18365
18373
|
const initTime = new Date();
|
18374
|
+
React.useImperativeHandle(ref, () => {
|
18375
|
+
return {
|
18376
|
+
setLoopPlay(v) {
|
18377
|
+
loopPlayRef.current = v;
|
18378
|
+
}
|
18379
|
+
};
|
18380
|
+
});
|
18381
|
+
React.useEffect(() => {
|
18382
|
+
let timerId;
|
18383
|
+
if (isLoad && isActive && isDiyH5) {
|
18384
|
+
timerId = setTimeout(() => {
|
18385
|
+
var _a, _b, _c, _d;
|
18386
|
+
if (!loopPlayRef.current)
|
18387
|
+
return;
|
18388
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18389
|
+
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;
|
18390
|
+
(_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);
|
18391
|
+
}
|
18392
|
+
}, 3000);
|
18393
|
+
}
|
18394
|
+
return () => {
|
18395
|
+
if (timerId)
|
18396
|
+
clearTimeout(timerId);
|
18397
|
+
};
|
18398
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
|
18366
18399
|
React.useEffect(() => {
|
18367
18400
|
if (isLoad && isActive) {
|
18368
|
-
(
|
18401
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
18369
18402
|
if (openHashtag) {
|
18370
18403
|
onViewImageEndEvent(rec);
|
18371
18404
|
}
|
@@ -18375,7 +18408,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18375
18408
|
}
|
18376
18409
|
}
|
18377
18410
|
else {
|
18378
|
-
(
|
18411
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
18379
18412
|
}
|
18380
18413
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18381
18414
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18402,13 +18435,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18402
18435
|
};
|
18403
18436
|
}, [isActive, imgInfo]);
|
18404
18437
|
const handleMouseEnter = React.useCallback(() => {
|
18405
|
-
if (
|
18406
|
-
|
18438
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18439
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
18407
18440
|
}
|
18408
18441
|
}, []);
|
18409
18442
|
const handleMouseLeave = React.useCallback(() => {
|
18410
|
-
if (
|
18411
|
-
|
18443
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18444
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
18412
18445
|
}
|
18413
18446
|
}, []);
|
18414
18447
|
const handleSlideChange = React.useCallback((swiper) => {
|
@@ -18429,7 +18462,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18429
18462
|
enabled: true
|
18430
18463
|
}
|
18431
18464
|
}
|
18432
|
-
: {}), { loop: true, ref:
|
18465
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18433
18466
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18434
18467
|
fontSize: '14px'
|
18435
18468
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18446,7 +18479,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18446
18479
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18447
18480
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18448
18481
|
}))));
|
18449
|
-
};
|
18482
|
+
});
|
18450
18483
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
18451
18484
|
|
18452
18485
|
/*
|
@@ -18726,7 +18759,7 @@ var NavBack$1 = React.memo(NavBack);
|
|
18726
18759
|
* @Author: binruan@chatlabs.com
|
18727
18760
|
* @Date: 2024-03-20 10:27:31
|
18728
18761
|
* @LastEditors: binruan@chatlabs.com
|
18729
|
-
* @LastEditTime: 2025-05-
|
18762
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
18730
18763
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18731
18764
|
*
|
18732
18765
|
*/
|
@@ -18746,6 +18779,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18746
18779
|
const skipLinkRef = React.useRef(false);
|
18747
18780
|
const [pageNum, setPageNum] = React.useState(2);
|
18748
18781
|
const videoWidgetRef = React.useRef(null);
|
18782
|
+
const pictureGroupRef = React.useRef(null);
|
18749
18783
|
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();
|
18750
18784
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18751
18785
|
const isShowFingerTip = React.useMemo(() => {
|
@@ -18793,7 +18827,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18793
18827
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18794
18828
|
}, [data, ctaType, swiperRef]);
|
18795
18829
|
const handleSessionCompleted = React.useCallback((fk) => {
|
18796
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18830
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
18797
18831
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18798
18832
|
let fromKName = '';
|
18799
18833
|
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))) {
|
@@ -18820,12 +18854,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18820
18854
|
eventSubject: 'sessionCompleted',
|
18821
18855
|
eventDescription: 'Session completed',
|
18822
18856
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18823
|
-
|
18857
|
+
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 : '',
|
18858
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18824
18859
|
position: activeIndex + '',
|
18825
18860
|
fromKName: fk || fromKName,
|
18826
18861
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18827
|
-
ctatId: (
|
18828
|
-
traceInfo: (
|
18862
|
+
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 : '',
|
18863
|
+
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 : ''
|
18829
18864
|
}
|
18830
18865
|
});
|
18831
18866
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -18884,8 +18919,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18884
18919
|
refreshFeSession
|
18885
18920
|
]);
|
18886
18921
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
18887
|
-
var _a;
|
18922
|
+
var _a, _b;
|
18888
18923
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
18924
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
18889
18925
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18890
18926
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18891
18927
|
React.useEffect(() => {
|
@@ -18955,18 +18991,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18955
18991
|
return null;
|
18956
18992
|
}, [globalConfig, activeIndex, visList]);
|
18957
18993
|
const renderContent = React.useCallback((rec, index) => {
|
18958
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18994
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
18959
18995
|
if (rec === 'organic menu') {
|
18960
18996
|
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)));
|
18961
18997
|
}
|
18962
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
18998
|
+
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)) {
|
18963
18999
|
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 })));
|
18964
19000
|
}
|
18965
|
-
if ((
|
18966
|
-
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 }));
|
19001
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
19002
|
+
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 })));
|
18967
19003
|
}
|
18968
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
18969
|
-
return (
|
19004
|
+
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) {
|
19005
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
18970
19006
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
18971
19007
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
18972
19008
|
const Component = withBindDataSource(t);
|
@@ -19004,7 +19040,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19004
19040
|
};
|
19005
19041
|
}, [isShowMore]);
|
19006
19042
|
const renderBottom = React.useCallback((rec, index) => {
|
19007
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19043
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
19008
19044
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
19009
19045
|
let cta = null;
|
19010
19046
|
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) {
|
@@ -19013,24 +19049,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19013
19049
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
19014
19050
|
cta = '商品CTA';
|
19015
19051
|
}
|
19052
|
+
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)) {
|
19053
|
+
cta = '服务CTA';
|
19054
|
+
}
|
19016
19055
|
else {
|
19017
|
-
cta = (
|
19056
|
+
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;
|
19018
19057
|
}
|
19019
19058
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19020
19059
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
19021
19060
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
19022
|
-
((
|
19061
|
+
((_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));
|
19023
19062
|
return (React.createElement(React.Fragment, null,
|
19024
19063
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19025
|
-
((
|
19026
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19064
|
+
((_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' }),
|
19065
|
+
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` } },
|
19027
19066
|
React.createElement(Nudge, { nudge: nudge }),
|
19028
19067
|
((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' },
|
19029
19068
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
19030
19069
|
React.createElement("div", null,
|
19031
|
-
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: (
|
19070
|
+
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 }),
|
19032
19071
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19033
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19072
|
+
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) }))),
|
19034
19073
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19035
19074
|
}
|
19036
19075
|
return null;
|
@@ -19069,7 +19108,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19069
19108
|
return null;
|
19070
19109
|
}, [globalConfig, waterFallData]);
|
19071
19110
|
const handleViewImageStartEnd = (item) => {
|
19072
|
-
var _a, _b, _c, _d, _e, _f;
|
19111
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19073
19112
|
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)) {
|
19074
19113
|
const endTime = Date.now();
|
19075
19114
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19078,10 +19117,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19078
19117
|
eventSubject: 'viewImageCarouselEnd',
|
19079
19118
|
eventDescription: 'User end view the image carousel',
|
19080
19119
|
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 : '',
|
19081
|
-
|
19120
|
+
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 : '',
|
19121
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19082
19122
|
imageEndTime: `${endTime}`,
|
19083
19123
|
playDuration: `${duration}`,
|
19084
|
-
contentTags: JSON.stringify((
|
19124
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19085
19125
|
position: activeIndex + '',
|
19086
19126
|
contentFormat: 'image',
|
19087
19127
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19090,7 +19130,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19090
19130
|
}
|
19091
19131
|
};
|
19092
19132
|
const handleSlideSkip = (item, position) => {
|
19093
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19133
|
+
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;
|
19094
19134
|
if (isPreview || waterFallData)
|
19095
19135
|
return;
|
19096
19136
|
const t = new Date() - curTime.current;
|
@@ -19116,7 +19156,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19116
19156
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19117
19157
|
position: position + '',
|
19118
19158
|
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 : '',
|
19119
|
-
|
19159
|
+
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 : '',
|
19160
|
+
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 : '',
|
19120
19161
|
contentFormat
|
19121
19162
|
}
|
19122
19163
|
});
|
@@ -19126,7 +19167,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19126
19167
|
}
|
19127
19168
|
};
|
19128
19169
|
const handleScrollEvent = (swiper) => {
|
19129
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19170
|
+
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;
|
19130
19171
|
const item = data[swiper.previousIndex];
|
19131
19172
|
if (!item)
|
19132
19173
|
return;
|
@@ -19143,11 +19184,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19143
19184
|
eventSubject: 'scrollDown',
|
19144
19185
|
eventDescription: 'User scroll down',
|
19145
19186
|
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 : '',
|
19146
|
-
|
19187
|
+
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 : '',
|
19188
|
+
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 : '',
|
19147
19189
|
requestId: null,
|
19148
|
-
traceInfo: (
|
19190
|
+
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 : '',
|
19149
19191
|
contentFormat,
|
19150
|
-
position: ((
|
19192
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
19151
19193
|
}
|
19152
19194
|
});
|
19153
19195
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19159,12 +19201,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19159
19201
|
eventInfo: {
|
19160
19202
|
eventSubject: 'scrollUp',
|
19161
19203
|
eventDescription: 'User scroll up',
|
19162
|
-
contentId: (
|
19163
|
-
|
19204
|
+
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 : '',
|
19205
|
+
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 : '',
|
19206
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19164
19207
|
requestId: null,
|
19165
|
-
traceInfo: (
|
19208
|
+
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 : '',
|
19166
19209
|
contentFormat,
|
19167
|
-
position: ((
|
19210
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
19168
19211
|
}
|
19169
19212
|
});
|
19170
19213
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19190,7 +19233,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19190
19233
|
}
|
19191
19234
|
}, [openHashtag, data, activeIndex]);
|
19192
19235
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19193
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19236
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
19194
19237
|
const item = data[activeIndex];
|
19195
19238
|
// 如果是图片集则上报事件
|
19196
19239
|
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)) {
|
@@ -19201,9 +19244,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19201
19244
|
eventSubject: 'viewImageCarouselStart',
|
19202
19245
|
eventDescription: 'User start view the image carousel',
|
19203
19246
|
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 : '',
|
19204
|
-
|
19247
|
+
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 : '',
|
19248
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19205
19249
|
imageStartTime: `${startTime}`,
|
19206
|
-
contentTags: JSON.stringify((
|
19250
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19207
19251
|
position: activeIndex + '',
|
19208
19252
|
contentFormat: 'image',
|
19209
19253
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19213,11 +19257,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19213
19257
|
if (enableCapi) {
|
19214
19258
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19215
19259
|
eventName: 'ViewContent',
|
19216
|
-
product: (
|
19260
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
19217
19261
|
});
|
19218
19262
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19219
19263
|
eventName: 'PageView',
|
19220
|
-
product: (
|
19264
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
19221
19265
|
});
|
19222
19266
|
}
|
19223
19267
|
}
|
@@ -19309,15 +19353,20 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19309
19353
|
swiperRef.current.swiper.allowTouchMove = true;
|
19310
19354
|
}, 500);
|
19311
19355
|
}, onActiveIndexChange: (swiper) => {
|
19356
|
+
var _a, _b;
|
19312
19357
|
setActiveIndex(swiper.activeIndex);
|
19313
19358
|
if (openHashtag)
|
19314
19359
|
return;
|
19315
19360
|
// 处理上滑下滑事件
|
19316
19361
|
handleScrollEvent(swiper);
|
19317
|
-
if (waterFallData || isEditor
|
19362
|
+
if (waterFallData || isEditor)
|
19318
19363
|
return;
|
19319
19364
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19320
19365
|
if (!isLoadMore) {
|
19366
|
+
if (isDiyH5) {
|
19367
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19368
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19369
|
+
}
|
19321
19370
|
setIsLoadMore(true);
|
19322
19371
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19323
19372
|
var _a;
|
@@ -19370,7 +19419,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19370
19419
|
}, []);
|
19371
19420
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19372
19421
|
const handlePlaying = React.useCallback(() => {
|
19373
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19422
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19374
19423
|
setIsPauseVideo(false);
|
19375
19424
|
const item = data[index];
|
19376
19425
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19383,14 +19432,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19383
19432
|
eventSubject: 'playVideo',
|
19384
19433
|
eventDescription: 'User played the video',
|
19385
19434
|
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 : '',
|
19386
|
-
|
19435
|
+
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 : '',
|
19436
|
+
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 : '',
|
19387
19437
|
playType,
|
19388
19438
|
startTime: videoCurrentTime,
|
19389
19439
|
videoDuration,
|
19390
|
-
contentTags: JSON.stringify((
|
19440
|
+
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 : []),
|
19391
19441
|
position: index + '',
|
19392
19442
|
contentFormat: 'video',
|
19393
|
-
traceInfo: (
|
19443
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19394
19444
|
}
|
19395
19445
|
});
|
19396
19446
|
setIsFirstPlay(false);
|
@@ -19429,7 +19479,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19429
19479
|
}
|
19430
19480
|
}, [isLoadFinish]);
|
19431
19481
|
const onPause = React.useCallback(() => {
|
19432
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19482
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19433
19483
|
const item = data[index];
|
19434
19484
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19435
19485
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19440,14 +19490,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19440
19490
|
eventSubject: 'playOverVideo',
|
19441
19491
|
eventDescription: 'User finished playing the video',
|
19442
19492
|
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 : '',
|
19443
|
-
|
19493
|
+
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 : '',
|
19494
|
+
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 : '',
|
19444
19495
|
endTime: videoCurrentTime,
|
19445
19496
|
videoDuration,
|
19446
19497
|
playDuration,
|
19447
|
-
contentTags: JSON.stringify((
|
19498
|
+
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 : []),
|
19448
19499
|
position: index + '',
|
19449
19500
|
contentFormat: 'video',
|
19450
|
-
traceInfo: (
|
19501
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19451
19502
|
}
|
19452
19503
|
});
|
19453
19504
|
}
|