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.js
CHANGED
@@ -622,6 +622,7 @@ const DEFAULT_TAG = 'FOR U';
|
|
622
622
|
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 }) => {
|
623
623
|
var _a, _b, _c, _d, _e;
|
624
624
|
const [rtcList, setRtcList] = useState([]);
|
625
|
+
const [firstRtcList, setFirstRtcList] = useState([]);
|
625
626
|
const [tagList, setTagList] = useState([]);
|
626
627
|
const [loading, setLoading] = useState(true);
|
627
628
|
const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
|
@@ -792,6 +793,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
792
793
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
793
794
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
794
795
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
796
|
+
if (isDiyH5) {
|
797
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
798
|
+
}
|
795
799
|
}
|
796
800
|
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));
|
797
801
|
if (isNotNullList) {
|
@@ -831,12 +835,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
831
835
|
if (rtcList.length <= 0) {
|
832
836
|
return;
|
833
837
|
}
|
838
|
+
if (isDiyH5 && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
839
|
+
setRtcList(rtcList.concat(firstRtcList));
|
840
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
841
|
+
return;
|
842
|
+
}
|
834
843
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
835
844
|
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 })));
|
836
845
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
837
846
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
838
847
|
return data;
|
839
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
848
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyH5, firstRtcList]);
|
840
849
|
const refreshFeSession = useCallback((enableReSid, event) => {
|
841
850
|
var _a, _b, _c, _d, _e;
|
842
851
|
let expire = false;
|
@@ -1063,7 +1072,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1063
1072
|
}
|
1064
1073
|
}), [bffFetch, utmVal]);
|
1065
1074
|
const ctaEvent = useCallback((eventInfo, rec, product, position) => {
|
1066
|
-
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;
|
1075
|
+
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;
|
1067
1076
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1068
1077
|
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);
|
1069
1078
|
let fromKName = '';
|
@@ -1081,7 +1090,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1081
1090
|
}
|
1082
1091
|
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;
|
1083
1092
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1084
|
-
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: (
|
1093
|
+
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 })
|
1085
1094
|
});
|
1086
1095
|
}, [bffEventReport, isFromHashtag]);
|
1087
1096
|
const h5EnterLink = useCallback(() => {
|
@@ -1183,6 +1192,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1183
1192
|
}
|
1184
1193
|
setRtcList(list);
|
1185
1194
|
setCacheRtcList(list);
|
1195
|
+
if (isDiyH5) {
|
1196
|
+
setFirstRtcList(list);
|
1197
|
+
}
|
1186
1198
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
1187
1199
|
if (channel) {
|
1188
1200
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
@@ -1218,6 +1230,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1218
1230
|
}
|
1219
1231
|
setRtcList(list);
|
1220
1232
|
setCacheRtcList(list);
|
1233
|
+
if (isDiyH5) {
|
1234
|
+
setFirstRtcList(list);
|
1235
|
+
}
|
1221
1236
|
}
|
1222
1237
|
})
|
1223
1238
|
.finally(() => {
|
@@ -1281,7 +1296,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
1281
1296
|
refreshFeSession,
|
1282
1297
|
getAccount,
|
1283
1298
|
accountSonsent,
|
1284
|
-
isDiyH5
|
1299
|
+
isDiyH5,
|
1300
|
+
firstRtcList
|
1285
1301
|
} }, 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({
|
1286
1302
|
rtcList,
|
1287
1303
|
mutateLike: bffMutateLike,
|
@@ -1742,14 +1758,14 @@ var settingRender$f = [
|
|
1742
1758
|
* @Author: binruan@chatlabs.com
|
1743
1759
|
* @Date: 2024-03-12 10:59:06
|
1744
1760
|
* @LastEditors: binruan@chatlabs.com
|
1745
|
-
* @LastEditTime:
|
1761
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
1746
1762
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1747
1763
|
*
|
1748
1764
|
*/
|
1749
1765
|
function useEventReport() {
|
1750
1766
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1751
1767
|
const jumpToWeb = useCallback((e, data, product, cta, position, traceInfo) => {
|
1752
|
-
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;
|
1768
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
|
1753
1769
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1754
1770
|
if (i !== -1) {
|
1755
1771
|
return;
|
@@ -1782,11 +1798,11 @@ function useEventReport() {
|
|
1782
1798
|
contentFormat = 'image';
|
1783
1799
|
}
|
1784
1800
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1785
|
-
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 : '',
|
1801
|
+
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', 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 }))
|
1786
1802
|
});
|
1787
1803
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1788
1804
|
const productView = useCallback((data, product, cta, viewTime, position) => {
|
1789
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
1805
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
1790
1806
|
let fromKName = '';
|
1791
1807
|
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))) {
|
1792
1808
|
fromKName = 'pdpPage';
|
@@ -1805,8 +1821,9 @@ function useEventReport() {
|
|
1805
1821
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
1806
1822
|
position: position + '',
|
1807
1823
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
1824
|
+
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 : '',
|
1808
1825
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
1809
|
-
traceInfo: (
|
1826
|
+
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 : '',
|
1810
1827
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
1811
1828
|
eventSubject: 'productView',
|
1812
1829
|
eventDescription: 'User browsed the product'
|
@@ -15621,7 +15638,7 @@ function WaterfallList(_a) {
|
|
15621
15638
|
* @Author: binruan@chatlabs.com
|
15622
15639
|
* @Date: 2024-01-10 10:58:24
|
15623
15640
|
* @LastEditors: binruan@chatlabs.com
|
15624
|
-
* @LastEditTime: 2025-
|
15641
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
15625
15642
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15626
15643
|
*
|
15627
15644
|
*/
|
@@ -15659,7 +15676,7 @@ const WaterFall = (props) => {
|
|
15659
15676
|
}
|
15660
15677
|
}, [waterFallData]);
|
15661
15678
|
const reportTagsView = useCallback(() => {
|
15662
|
-
var _a, _b, _c, _d, _e, _f;
|
15679
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
15663
15680
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15664
15681
|
if (!rec)
|
15665
15682
|
return;
|
@@ -15679,9 +15696,10 @@ const WaterFall = (props) => {
|
|
15679
15696
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15680
15697
|
eventInfo: {
|
15681
15698
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15699
|
+
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 : '',
|
15682
15700
|
position: cacheActiveIndex + '',
|
15683
|
-
contentTags: JSON.stringify((
|
15684
|
-
traceInfo: (
|
15701
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
15702
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
15685
15703
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15686
15704
|
fromKName,
|
15687
15705
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17763,7 +17781,7 @@ const LikeButton = (_a) => {
|
|
17763
17781
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17764
17782
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17765
17783
|
const handleClick = debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17766
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17784
|
+
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;
|
17767
17785
|
if (state) {
|
17768
17786
|
// 先设置状态
|
17769
17787
|
setState(false);
|
@@ -17773,11 +17791,12 @@ const LikeButton = (_a) => {
|
|
17773
17791
|
eventSubject: 'favoriteContentCanceled',
|
17774
17792
|
eventDescription: 'This content was unfavorite by the user',
|
17775
17793
|
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 : '',
|
17776
|
-
|
17777
|
-
|
17794
|
+
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 : '',
|
17795
|
+
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 : '',
|
17796
|
+
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 : []),
|
17778
17797
|
position: position + '',
|
17779
|
-
contentFormat: ((
|
17780
|
-
traceInfo: (
|
17798
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
17799
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
17781
17800
|
}
|
17782
17801
|
});
|
17783
17802
|
// 如果接口调用失败,则回滚状态
|
@@ -17785,40 +17804,41 @@ const LikeButton = (_a) => {
|
|
17785
17804
|
setState(true);
|
17786
17805
|
}
|
17787
17806
|
else {
|
17788
|
-
const nRtcList = (
|
17807
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17789
17808
|
if (index === position) {
|
17790
17809
|
item.isCollected = false;
|
17791
17810
|
}
|
17792
17811
|
return item;
|
17793
|
-
})) !== null &&
|
17812
|
+
})) !== null && _s !== void 0 ? _s : [];
|
17794
17813
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17795
17814
|
}
|
17796
17815
|
}
|
17797
17816
|
else {
|
17798
17817
|
setState(true);
|
17799
|
-
const result = (
|
17818
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
17800
17819
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17801
17820
|
eventInfo: {
|
17802
17821
|
eventSubject: 'favoriteContent',
|
17803
17822
|
eventDescription: 'This content was favorite by the user',
|
17804
|
-
contentId: (
|
17805
|
-
|
17806
|
-
|
17823
|
+
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 : '',
|
17824
|
+
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 : '',
|
17825
|
+
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 : '',
|
17826
|
+
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 : []),
|
17807
17827
|
position: position + '',
|
17808
|
-
contentFormat: ((
|
17809
|
-
traceInfo: (
|
17828
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
17829
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
17810
17830
|
}
|
17811
17831
|
});
|
17812
17832
|
if (!result) {
|
17813
17833
|
setState(false);
|
17814
17834
|
}
|
17815
17835
|
else {
|
17816
|
-
const nRtcList = (
|
17836
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17817
17837
|
if (index === position) {
|
17818
17838
|
item.isCollected = true;
|
17819
17839
|
}
|
17820
17840
|
return item;
|
17821
|
-
})) !== null &&
|
17841
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
17822
17842
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17823
17843
|
}
|
17824
17844
|
}
|
@@ -17855,7 +17875,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
17855
17875
|
const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
17856
17876
|
var _a, _b;
|
17857
17877
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
17858
|
-
const { bffEventReport, sxpParameter,
|
17878
|
+
const { bffEventReport, sxpParameter, firstRtcList, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
17859
17879
|
const videoStartTime = useRef(0);
|
17860
17880
|
const [isLoadFinish, setIsLoadFinish] = useState(false);
|
17861
17881
|
const { isActive } = useSwiperSlide();
|
@@ -17921,6 +17941,23 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17921
17941
|
return;
|
17922
17942
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17923
17943
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17944
|
+
const handleEnd = () => {
|
17945
|
+
var _a, _b, _c, _d, _e, _f;
|
17946
|
+
if (!videoRef.current)
|
17947
|
+
return;
|
17948
|
+
if (isDiyH5) {
|
17949
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
17950
|
+
if (!loopPlayRef.current)
|
17951
|
+
return;
|
17952
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
17953
|
+
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;
|
17954
|
+
(_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);
|
17955
|
+
}
|
17956
|
+
}
|
17957
|
+
else {
|
17958
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
|
17959
|
+
}
|
17960
|
+
};
|
17924
17961
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
17925
17962
|
const handlePlaying = useCallback(() => {
|
17926
17963
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -17929,7 +17966,7 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17929
17966
|
setIsLoadFinish(true);
|
17930
17967
|
}, []);
|
17931
17968
|
const handleStartPlay = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17932
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
17969
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
17933
17970
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17934
17971
|
return;
|
17935
17972
|
setIsPauseVideo(false);
|
@@ -17940,16 +17977,11 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17940
17977
|
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);
|
17941
17978
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17942
17979
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17943
|
-
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 : '',
|
17980
|
+
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) + '' }))
|
17944
17981
|
});
|
17945
17982
|
isFirstPlayRef.current = false;
|
17946
17983
|
}
|
17947
17984
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17948
|
-
const setCurrentTimeByStartTime = useCallback(() => {
|
17949
|
-
if (isDiyH5) {
|
17950
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17951
|
-
}
|
17952
|
-
}, []);
|
17953
17985
|
const handLoadeddata = useCallback(() => {
|
17954
17986
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17955
17987
|
return;
|
@@ -17974,13 +18006,12 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
17974
18006
|
const handleLoadedmetadata = useCallback(() => {
|
17975
18007
|
if (!videoRef.current)
|
17976
18008
|
return;
|
17977
|
-
setCurrentTimeByStartTime();
|
17978
18009
|
loadedTimeRef.current = new Date();
|
17979
18010
|
handleStartPlay();
|
17980
18011
|
handLoadeddata();
|
17981
18012
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
17982
18013
|
const handleClickVideo = useCallback((type) => () => {
|
17983
|
-
var _a, _b, _c, _d, _e
|
18014
|
+
var _a, _b, _c, _d, _e;
|
17984
18015
|
if (!videoRef.current)
|
17985
18016
|
return;
|
17986
18017
|
if (!isLoadFinish)
|
@@ -18001,20 +18032,17 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18001
18032
|
break;
|
18002
18033
|
default:
|
18003
18034
|
if (isPause) {
|
18004
|
-
|
18005
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18006
|
-
}
|
18007
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
18035
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
18008
18036
|
}
|
18009
18037
|
else {
|
18010
|
-
(
|
18038
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
18011
18039
|
}
|
18012
18040
|
setIsPauseVideo(!isPause);
|
18013
18041
|
break;
|
18014
18042
|
}
|
18015
18043
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
18016
18044
|
const handlePause = useCallback(() => {
|
18017
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18045
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
18018
18046
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18019
18047
|
return;
|
18020
18048
|
if (activeIndex !== index)
|
@@ -18030,14 +18058,15 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18030
18058
|
eventSubject: 'playOverVideo',
|
18031
18059
|
eventDescription: 'User finished playing the video',
|
18032
18060
|
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 : '',
|
18033
|
-
|
18061
|
+
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 : '',
|
18062
|
+
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 : '',
|
18034
18063
|
endTime: videoCurrentTime,
|
18035
18064
|
videoDuration,
|
18036
18065
|
playDuration,
|
18037
|
-
contentTags: JSON.stringify((
|
18066
|
+
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 : []),
|
18038
18067
|
position: index + '',
|
18039
18068
|
contentFormat: 'video',
|
18040
|
-
traceInfo: (
|
18069
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
18041
18070
|
}
|
18042
18071
|
});
|
18043
18072
|
}
|
@@ -18045,27 +18074,8 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18045
18074
|
const handleWaiting = useCallback(() => {
|
18046
18075
|
setWaiting(true);
|
18047
18076
|
}, []);
|
18048
|
-
const handleTimeUpload = () => {
|
18049
|
-
if (!videoRef.current || !isDiyH5)
|
18050
|
-
return;
|
18051
|
-
setTimeout(() => {
|
18052
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18053
|
-
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)) {
|
18054
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18055
|
-
if (!loopPlayRef.current)
|
18056
|
-
return;
|
18057
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18058
|
-
(_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);
|
18059
|
-
}
|
18060
|
-
else {
|
18061
|
-
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;
|
18062
|
-
(_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);
|
18063
|
-
}
|
18064
|
-
}
|
18065
|
-
});
|
18066
|
-
};
|
18067
18077
|
useEffect(() => {
|
18068
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18078
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18069
18079
|
if (!isActive)
|
18070
18080
|
return;
|
18071
18081
|
const videoSrc = videoUrl;
|
@@ -18086,7 +18096,6 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18086
18096
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
18087
18097
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
18088
18098
|
var _a;
|
18089
|
-
setCurrentTimeByStartTime();
|
18090
18099
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
18091
18100
|
});
|
18092
18101
|
}
|
@@ -18100,12 +18109,11 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18100
18109
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
18101
18110
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
18102
18111
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
18103
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18112
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
18104
18113
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
18105
18114
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18106
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
18107
18115
|
return () => {
|
18108
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18116
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18109
18117
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18110
18118
|
if (!isPause)
|
18111
18119
|
handlePause();
|
@@ -18117,10 +18125,9 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
|
|
18117
18125
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18118
18126
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18119
18127
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18120
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18128
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
18121
18129
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18122
18130
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18123
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18124
18131
|
};
|
18125
18132
|
}, [isActive]);
|
18126
18133
|
useEffect(() => {
|
@@ -18331,19 +18338,45 @@ const Picture = (props) => {
|
|
18331
18338
|
}, onLoad: onShowFirstImage }))));
|
18332
18339
|
};
|
18333
18340
|
|
18334
|
-
const PictureGroup$4 = ({ imgUrls,
|
18341
|
+
const PictureGroup$4 = forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
18335
18342
|
var _a, _b;
|
18336
18343
|
const { isActive } = useSwiperSlide();
|
18337
|
-
const {
|
18344
|
+
const { firstRtcList, openHashtag, isDiyH5 } = useSxpDataSource();
|
18338
18345
|
const [isLoad, setIsLoad] = useState(false);
|
18339
18346
|
const [imgInfo, setImgInfo] = useState();
|
18340
18347
|
const [swiperActiveIndex, setSwiperActiveIndex] = useState(0);
|
18341
|
-
const
|
18348
|
+
const imgsSwiperRef = useRef();
|
18342
18349
|
const isFirstPlayRef = useRef(true);
|
18350
|
+
const loopPlayRef = useRef(true);
|
18343
18351
|
const initTime = new Date();
|
18352
|
+
useImperativeHandle(ref, () => {
|
18353
|
+
return {
|
18354
|
+
setLoopPlay(v) {
|
18355
|
+
loopPlayRef.current = v;
|
18356
|
+
}
|
18357
|
+
};
|
18358
|
+
});
|
18359
|
+
useEffect(() => {
|
18360
|
+
let timerId;
|
18361
|
+
if (isLoad && isActive && isDiyH5) {
|
18362
|
+
timerId = setTimeout(() => {
|
18363
|
+
var _a, _b, _c, _d;
|
18364
|
+
if (!loopPlayRef.current)
|
18365
|
+
return;
|
18366
|
+
if (firstRtcList && index < (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) - 1) {
|
18367
|
+
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;
|
18368
|
+
(_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);
|
18369
|
+
}
|
18370
|
+
}, 3000);
|
18371
|
+
}
|
18372
|
+
return () => {
|
18373
|
+
if (timerId)
|
18374
|
+
clearTimeout(timerId);
|
18375
|
+
};
|
18376
|
+
}, [isLoad, isActive, isDiyH5, index, swiperRef, firstRtcList]);
|
18344
18377
|
useEffect(() => {
|
18345
18378
|
if (isLoad && isActive) {
|
18346
|
-
(
|
18379
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
18347
18380
|
if (openHashtag) {
|
18348
18381
|
onViewImageEndEvent(rec);
|
18349
18382
|
}
|
@@ -18353,7 +18386,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18353
18386
|
}
|
18354
18387
|
}
|
18355
18388
|
else {
|
18356
|
-
(
|
18389
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
18357
18390
|
}
|
18358
18391
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18359
18392
|
const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18380,13 +18413,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18380
18413
|
};
|
18381
18414
|
}, [isActive, imgInfo]);
|
18382
18415
|
const handleMouseEnter = useCallback(() => {
|
18383
|
-
if (
|
18384
|
-
|
18416
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18417
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
18385
18418
|
}
|
18386
18419
|
}, []);
|
18387
18420
|
const handleMouseLeave = useCallback(() => {
|
18388
|
-
if (
|
18389
|
-
|
18421
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
18422
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
18390
18423
|
}
|
18391
18424
|
}, []);
|
18392
18425
|
const handleSlideChange = useCallback((swiper) => {
|
@@ -18407,7 +18440,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18407
18440
|
enabled: true
|
18408
18441
|
}
|
18409
18442
|
}
|
18410
|
-
: {}), { loop: true, ref:
|
18443
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18411
18444
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18412
18445
|
fontSize: '14px'
|
18413
18446
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18424,7 +18457,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
18424
18457
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18425
18458
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18426
18459
|
}))));
|
18427
|
-
};
|
18460
|
+
});
|
18428
18461
|
var PictureGroup$5 = memo(PictureGroup$4);
|
18429
18462
|
|
18430
18463
|
/*
|
@@ -18704,7 +18737,7 @@ var NavBack$1 = memo(NavBack);
|
|
18704
18737
|
* @Author: binruan@chatlabs.com
|
18705
18738
|
* @Date: 2024-03-20 10:27:31
|
18706
18739
|
* @LastEditors: binruan@chatlabs.com
|
18707
|
-
* @LastEditTime: 2025-05-
|
18740
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
18708
18741
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18709
18742
|
*
|
18710
18743
|
*/
|
@@ -18724,6 +18757,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18724
18757
|
const skipLinkRef = useRef(false);
|
18725
18758
|
const [pageNum, setPageNum] = useState(2);
|
18726
18759
|
const videoWidgetRef = useRef(null);
|
18760
|
+
const pictureGroupRef = useRef(null);
|
18727
18761
|
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();
|
18728
18762
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18729
18763
|
const isShowFingerTip = useMemo(() => {
|
@@ -18771,7 +18805,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18771
18805
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18772
18806
|
}, [data, ctaType, swiperRef]);
|
18773
18807
|
const handleSessionCompleted = useCallback((fk) => {
|
18774
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18808
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
18775
18809
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18776
18810
|
let fromKName = '';
|
18777
18811
|
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))) {
|
@@ -18798,12 +18832,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18798
18832
|
eventSubject: 'sessionCompleted',
|
18799
18833
|
eventDescription: 'Session completed',
|
18800
18834
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18801
|
-
|
18835
|
+
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 : '',
|
18836
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18802
18837
|
position: activeIndex + '',
|
18803
18838
|
fromKName: fk || fromKName,
|
18804
18839
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18805
|
-
ctatId: (
|
18806
|
-
traceInfo: (
|
18840
|
+
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 : '',
|
18841
|
+
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 : ''
|
18807
18842
|
}
|
18808
18843
|
});
|
18809
18844
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -18862,8 +18897,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18862
18897
|
refreshFeSession
|
18863
18898
|
]);
|
18864
18899
|
const handleSessionExpire = useCallback(debounce(() => {
|
18865
|
-
var _a;
|
18900
|
+
var _a, _b;
|
18866
18901
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
18902
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
18867
18903
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18868
18904
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18869
18905
|
useEffect(() => {
|
@@ -18933,18 +18969,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18933
18969
|
return null;
|
18934
18970
|
}, [globalConfig, activeIndex, visList]);
|
18935
18971
|
const renderContent = useCallback((rec, index) => {
|
18936
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18972
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
18937
18973
|
if (rec === 'organic menu') {
|
18938
18974
|
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)));
|
18939
18975
|
}
|
18940
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
18976
|
+
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)) {
|
18941
18977
|
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 })));
|
18942
18978
|
}
|
18943
|
-
if ((
|
18944
|
-
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 }));
|
18979
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
18980
|
+
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 })));
|
18945
18981
|
}
|
18946
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
18947
|
-
return (
|
18982
|
+
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) {
|
18983
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
18948
18984
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
18949
18985
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
18950
18986
|
const Component = withBindDataSource(t);
|
@@ -18982,7 +19018,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18982
19018
|
};
|
18983
19019
|
}, [isShowMore]);
|
18984
19020
|
const renderBottom = useCallback((rec, index) => {
|
18985
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
19021
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
18986
19022
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
18987
19023
|
let cta = null;
|
18988
19024
|
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) {
|
@@ -18991,24 +19027,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
18991
19027
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
18992
19028
|
cta = '商品CTA';
|
18993
19029
|
}
|
19030
|
+
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)) {
|
19031
|
+
cta = '服务CTA';
|
19032
|
+
}
|
18994
19033
|
else {
|
18995
|
-
cta = (
|
19034
|
+
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;
|
18996
19035
|
}
|
18997
19036
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
18998
19037
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
18999
19038
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
19000
|
-
((
|
19039
|
+
((_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));
|
19001
19040
|
return (React.createElement(React.Fragment, null,
|
19002
19041
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19003
|
-
((
|
19004
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
19042
|
+
((_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' }),
|
19043
|
+
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` } },
|
19005
19044
|
React.createElement(Nudge, { nudge: nudge }),
|
19006
19045
|
((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' },
|
19007
19046
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
19008
19047
|
React.createElement("div", null,
|
19009
|
-
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: (
|
19048
|
+
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 }),
|
19010
19049
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
19011
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19050
|
+
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) }))),
|
19012
19051
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
19013
19052
|
}
|
19014
19053
|
return null;
|
@@ -19047,7 +19086,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19047
19086
|
return null;
|
19048
19087
|
}, [globalConfig, waterFallData]);
|
19049
19088
|
const handleViewImageStartEnd = (item) => {
|
19050
|
-
var _a, _b, _c, _d, _e, _f;
|
19089
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
19051
19090
|
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)) {
|
19052
19091
|
const endTime = Date.now();
|
19053
19092
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -19056,10 +19095,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19056
19095
|
eventSubject: 'viewImageCarouselEnd',
|
19057
19096
|
eventDescription: 'User end view the image carousel',
|
19058
19097
|
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 : '',
|
19059
|
-
|
19098
|
+
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 : '',
|
19099
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19060
19100
|
imageEndTime: `${endTime}`,
|
19061
19101
|
playDuration: `${duration}`,
|
19062
|
-
contentTags: JSON.stringify((
|
19102
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19063
19103
|
position: activeIndex + '',
|
19064
19104
|
contentFormat: 'image',
|
19065
19105
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -19068,7 +19108,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19068
19108
|
}
|
19069
19109
|
};
|
19070
19110
|
const handleSlideSkip = (item, position) => {
|
19071
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
19111
|
+
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;
|
19072
19112
|
if (isPreview || waterFallData)
|
19073
19113
|
return;
|
19074
19114
|
const t = new Date() - curTime.current;
|
@@ -19094,7 +19134,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19094
19134
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19095
19135
|
position: position + '',
|
19096
19136
|
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 : '',
|
19097
|
-
|
19137
|
+
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 : '',
|
19138
|
+
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 : '',
|
19098
19139
|
contentFormat
|
19099
19140
|
}
|
19100
19141
|
});
|
@@ -19104,7 +19145,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19104
19145
|
}
|
19105
19146
|
};
|
19106
19147
|
const handleScrollEvent = (swiper) => {
|
19107
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19148
|
+
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;
|
19108
19149
|
const item = data[swiper.previousIndex];
|
19109
19150
|
if (!item)
|
19110
19151
|
return;
|
@@ -19121,11 +19162,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19121
19162
|
eventSubject: 'scrollDown',
|
19122
19163
|
eventDescription: 'User scroll down',
|
19123
19164
|
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 : '',
|
19124
|
-
|
19165
|
+
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 : '',
|
19166
|
+
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 : '',
|
19125
19167
|
requestId: null,
|
19126
|
-
traceInfo: (
|
19168
|
+
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 : '',
|
19127
19169
|
contentFormat,
|
19128
|
-
position: ((
|
19170
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
19129
19171
|
}
|
19130
19172
|
});
|
19131
19173
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19137,12 +19179,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19137
19179
|
eventInfo: {
|
19138
19180
|
eventSubject: 'scrollUp',
|
19139
19181
|
eventDescription: 'User scroll up',
|
19140
|
-
contentId: (
|
19141
|
-
|
19182
|
+
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 : '',
|
19183
|
+
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 : '',
|
19184
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19142
19185
|
requestId: null,
|
19143
|
-
traceInfo: (
|
19186
|
+
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 : '',
|
19144
19187
|
contentFormat,
|
19145
|
-
position: ((
|
19188
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
19146
19189
|
}
|
19147
19190
|
});
|
19148
19191
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19168,7 +19211,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19168
19211
|
}
|
19169
19212
|
}, [openHashtag, data, activeIndex]);
|
19170
19213
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19171
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19214
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
19172
19215
|
const item = data[activeIndex];
|
19173
19216
|
// 如果是图片集则上报事件
|
19174
19217
|
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)) {
|
@@ -19179,9 +19222,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19179
19222
|
eventSubject: 'viewImageCarouselStart',
|
19180
19223
|
eventDescription: 'User start view the image carousel',
|
19181
19224
|
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 : '',
|
19182
|
-
|
19225
|
+
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 : '',
|
19226
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19183
19227
|
imageStartTime: `${startTime}`,
|
19184
|
-
contentTags: JSON.stringify((
|
19228
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
19185
19229
|
position: activeIndex + '',
|
19186
19230
|
contentFormat: 'image',
|
19187
19231
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19191,11 +19235,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19191
19235
|
if (enableCapi) {
|
19192
19236
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19193
19237
|
eventName: 'ViewContent',
|
19194
|
-
product: (
|
19238
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
19195
19239
|
});
|
19196
19240
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19197
19241
|
eventName: 'PageView',
|
19198
|
-
product: (
|
19242
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
19199
19243
|
});
|
19200
19244
|
}
|
19201
19245
|
}
|
@@ -19287,15 +19331,20 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
19287
19331
|
swiperRef.current.swiper.allowTouchMove = true;
|
19288
19332
|
}, 500);
|
19289
19333
|
}, onActiveIndexChange: (swiper) => {
|
19334
|
+
var _a, _b;
|
19290
19335
|
setActiveIndex(swiper.activeIndex);
|
19291
19336
|
if (openHashtag)
|
19292
19337
|
return;
|
19293
19338
|
// 处理上滑下滑事件
|
19294
19339
|
handleScrollEvent(swiper);
|
19295
|
-
if (waterFallData || isEditor
|
19340
|
+
if (waterFallData || isEditor)
|
19296
19341
|
return;
|
19297
19342
|
if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
|
19298
19343
|
if (!isLoadMore) {
|
19344
|
+
if (isDiyH5) {
|
19345
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
19346
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
19347
|
+
}
|
19299
19348
|
setIsLoadMore(true);
|
19300
19349
|
loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
|
19301
19350
|
var _a;
|
@@ -19348,7 +19397,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19348
19397
|
}, []);
|
19349
19398
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19350
19399
|
const handlePlaying = useCallback(() => {
|
19351
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19400
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19352
19401
|
setIsPauseVideo(false);
|
19353
19402
|
const item = data[index];
|
19354
19403
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19361,14 +19410,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19361
19410
|
eventSubject: 'playVideo',
|
19362
19411
|
eventDescription: 'User played the video',
|
19363
19412
|
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 : '',
|
19364
|
-
|
19413
|
+
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 : '',
|
19414
|
+
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 : '',
|
19365
19415
|
playType,
|
19366
19416
|
startTime: videoCurrentTime,
|
19367
19417
|
videoDuration,
|
19368
|
-
contentTags: JSON.stringify((
|
19418
|
+
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 : []),
|
19369
19419
|
position: index + '',
|
19370
19420
|
contentFormat: 'video',
|
19371
|
-
traceInfo: (
|
19421
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19372
19422
|
}
|
19373
19423
|
});
|
19374
19424
|
setIsFirstPlay(false);
|
@@ -19407,7 +19457,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19407
19457
|
}
|
19408
19458
|
}, [isLoadFinish]);
|
19409
19459
|
const onPause = useCallback(() => {
|
19410
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19460
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
19411
19461
|
const item = data[index];
|
19412
19462
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19413
19463
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19418,14 +19468,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
19418
19468
|
eventSubject: 'playOverVideo',
|
19419
19469
|
eventDescription: 'User finished playing the video',
|
19420
19470
|
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 : '',
|
19421
|
-
|
19471
|
+
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 : '',
|
19472
|
+
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 : '',
|
19422
19473
|
endTime: videoCurrentTime,
|
19423
19474
|
videoDuration,
|
19424
19475
|
playDuration,
|
19425
|
-
contentTags: JSON.stringify((
|
19476
|
+
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 : []),
|
19426
19477
|
position: index + '',
|
19427
19478
|
contentFormat: 'video',
|
19428
|
-
traceInfo: (
|
19479
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
19429
19480
|
}
|
19430
19481
|
});
|
19431
19482
|
}
|