pb-sxp-ui 1.16.9 → 1.16.10
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 +166 -131
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +166 -131
- 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 +166 -131
- 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 +42 -13
- package/es/core/components/SxpPageRender/VideoWidget/index.js +34 -44
- package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/es/core/components/SxpPageRender/index.js +47 -36
- package/es/core/context/SxpDataSourceProvider.js +6 -7
- 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 +41 -12
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +34 -44
- package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/lib/core/components/SxpPageRender/index.js +47 -36
- package/lib/core/context/SxpDataSourceProvider.js +6 -7
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -839,15 +839,14 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
839
839
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag))
|
|
840
840
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
|
841
841
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
|
842
|
-
|
|
843
|
-
list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
|
|
844
|
-
const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
|
842
|
+
const isNotNullList = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
|
845
843
|
if (!isNotNullList) {
|
|
846
844
|
setIsNoMoreData(true);
|
|
847
845
|
}
|
|
848
|
-
return Object.assign(Object.assign({}, result.data), { recList: list });
|
|
849
846
|
}
|
|
850
|
-
|
|
847
|
+
let list = [];
|
|
848
|
+
list = list.concat((_u = (_t = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.filter) === null || _t === void 0 ? void 0 : _t.call(_s, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _u !== void 0 ? _u : []);
|
|
849
|
+
return Object.assign(Object.assign({}, result.data), { recList: list });
|
|
851
850
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
|
852
851
|
const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
|
853
852
|
var _1, _2, _3, _4;
|
|
@@ -1086,7 +1085,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
1086
1085
|
}
|
|
1087
1086
|
}), [bffFetch, utmVal]);
|
|
1088
1087
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
|
1089
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
|
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, _12, _13, _14;
|
|
1090
1089
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
1091
1090
|
const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
|
|
1092
1091
|
let fromKName = '';
|
|
@@ -1104,7 +1103,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
1104
1103
|
}
|
|
1105
1104
|
const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
|
|
1106
1105
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1107
|
-
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (
|
|
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 : '', sceneId: (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.scene) === null || _w === void 0 ? void 0 : _w.sceneId) !== null && _x !== void 0 ? _x : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_13 = (_10 = (_5 = (_1 = (_y = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.bindCta) === null || _4 === void 0 ? void 0 : _4.traceInfo) !== null && _5 !== void 0 ? _5 : (_9 = (_8 = (_7 = (_6 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _6 === void 0 ? void 0 : _6.bindProducts) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '', fromKName, fromKPage: (_14 = location === null || location === void 0 ? void 0 : location.href) !== null && _14 !== void 0 ? _14 : '', contentFormat })
|
|
1108
1107
|
});
|
|
1109
1108
|
}, [bffEventReport, isFromHashtag]);
|
|
1110
1109
|
const h5EnterLink = React.useCallback(() => {
|
|
@@ -1765,14 +1764,14 @@ var settingRender$f = [
|
|
|
1765
1764
|
* @Author: binruan@chatlabs.com
|
|
1766
1765
|
* @Date: 2024-03-12 10:59:06
|
|
1767
1766
|
* @LastEditors: binruan@chatlabs.com
|
|
1768
|
-
* @LastEditTime:
|
|
1767
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
|
1769
1768
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
|
1770
1769
|
*
|
|
1771
1770
|
*/
|
|
1772
1771
|
function useEventReport() {
|
|
1773
1772
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
|
1774
1773
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
|
1775
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
|
|
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, _14, _15, _16;
|
|
1776
1775
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
|
1777
1776
|
if (i !== -1) {
|
|
1778
1777
|
return;
|
|
@@ -1805,11 +1804,11 @@ function useEventReport() {
|
|
|
1805
1804
|
contentFormat = 'image';
|
|
1806
1805
|
}
|
|
1807
1806
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1808
|
-
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '',
|
|
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 : '', sceneId: (_2 = (_1 = (_0 = data === null || data === void 0 ? void 0 : data.video) === null || _0 === void 0 ? void 0 : _0.scene) === null || _1 === void 0 ? void 0 : _1.sceneId) !== null && _2 !== void 0 ? _2 : '', ctatId: (_3 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _3 !== void 0 ? _3 : '', traceInfo: (_16 = (_13 = (_11 = (_7 = (_4 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProduct) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = data === null || data === void 0 ? void 0 : data.video) === null || _8 === void 0 ? void 0 : _8.bindProducts) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : (_12 = data === null || data === void 0 ? void 0 : data.product) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : (_15 = (_14 = data === null || data === void 0 ? void 0 : data.video) === null || _14 === void 0 ? void 0 : _14.bindCta) === null || _15 === void 0 ? void 0 : _15.traceInfo) !== null && _16 !== void 0 ? _16 : '' }, (contentFormat && { contentFormat }))
|
|
1809
1808
|
});
|
|
1810
1809
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
|
1811
1810
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
|
1812
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
1811
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
1813
1812
|
let fromKName = '';
|
|
1814
1813
|
if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
|
|
1815
1814
|
fromKName = 'pdpPage';
|
|
@@ -1828,8 +1827,9 @@ function useEventReport() {
|
|
|
1828
1827
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
|
1829
1828
|
position: position + '',
|
|
1830
1829
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
1830
|
+
sceneId: (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
|
1831
1831
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
|
1832
|
-
traceInfo: (
|
|
1832
|
+
traceInfo: (_s = (_q = (_l = (_h = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _h !== void 0 ? _h : (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : (_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.video) === null || _m === void 0 ? void 0 : _m.bindProducts) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_r = data === null || data === void 0 ? void 0 : data.product) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : '',
|
|
1833
1833
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
|
1834
1834
|
eventSubject: 'productView',
|
|
1835
1835
|
eventDescription: 'User browsed the product'
|
|
@@ -15632,7 +15632,7 @@ function WaterfallList(_a) {
|
|
|
15632
15632
|
* @Author: binruan@chatlabs.com
|
|
15633
15633
|
* @Date: 2024-01-10 10:58:24
|
|
15634
15634
|
* @LastEditors: binruan@chatlabs.com
|
|
15635
|
-
* @LastEditTime: 2025-
|
|
15635
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
|
15636
15636
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
|
15637
15637
|
*
|
|
15638
15638
|
*/
|
|
@@ -15670,7 +15670,7 @@ const WaterFall = (props) => {
|
|
|
15670
15670
|
}
|
|
15671
15671
|
}, [waterFallData]);
|
|
15672
15672
|
const reportTagsView = React.useCallback(() => {
|
|
15673
|
-
var _a, _b, _c, _d, _e, _f;
|
|
15673
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
15674
15674
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
|
15675
15675
|
if (!rec)
|
|
15676
15676
|
return;
|
|
@@ -15690,9 +15690,10 @@ const WaterFall = (props) => {
|
|
|
15690
15690
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
15691
15691
|
eventInfo: {
|
|
15692
15692
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
15693
|
+
sceneId: (_g = (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
|
15693
15694
|
position: cacheActiveIndex + '',
|
|
15694
|
-
contentTags: JSON.stringify((
|
|
15695
|
-
traceInfo: (
|
|
15695
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
|
15696
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
|
15696
15697
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
|
15697
15698
|
fromKName,
|
|
15698
15699
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
@@ -17774,7 +17775,7 @@ const LikeButton = (_a) => {
|
|
|
17774
17775
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
|
17775
17776
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
|
17776
17777
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17777
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
17778
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
|
|
17778
17779
|
if (state) {
|
|
17779
17780
|
// 先设置状态
|
|
17780
17781
|
setState(false);
|
|
@@ -17784,11 +17785,12 @@ const LikeButton = (_a) => {
|
|
|
17784
17785
|
eventSubject: 'favoriteContentCanceled',
|
|
17785
17786
|
eventDescription: 'This content was unfavorite by the user',
|
|
17786
17787
|
contentId: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
|
|
17787
|
-
|
|
17788
|
-
|
|
17788
|
+
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 : '',
|
|
17789
|
+
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 : '',
|
|
17790
|
+
contentTags: JSON.stringify((_p = (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []),
|
|
17789
17791
|
position: position + '',
|
|
17790
|
-
contentFormat: ((
|
|
17791
|
-
traceInfo: (
|
|
17792
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
|
17793
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
17792
17794
|
}
|
|
17793
17795
|
});
|
|
17794
17796
|
// 如果接口调用失败，则回滚状态
|
|
@@ -17796,40 +17798,41 @@ const LikeButton = (_a) => {
|
|
|
17796
17798
|
setState(true);
|
|
17797
17799
|
}
|
|
17798
17800
|
else {
|
|
17799
|
-
const nRtcList = (
|
|
17801
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17800
17802
|
if (index === position) {
|
|
17801
17803
|
item.isCollected = false;
|
|
17802
17804
|
}
|
|
17803
17805
|
return item;
|
|
17804
|
-
})) !== null &&
|
|
17806
|
+
})) !== null && _s !== void 0 ? _s : [];
|
|
17805
17807
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17806
17808
|
}
|
|
17807
17809
|
}
|
|
17808
17810
|
else {
|
|
17809
17811
|
setState(true);
|
|
17810
|
-
const result = (
|
|
17812
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
|
17811
17813
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17812
17814
|
eventInfo: {
|
|
17813
17815
|
eventSubject: 'favoriteContent',
|
|
17814
17816
|
eventDescription: 'This content was favorite by the user',
|
|
17815
|
-
contentId: (
|
|
17816
|
-
|
|
17817
|
-
|
|
17817
|
+
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 : '',
|
|
17818
|
+
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 : '',
|
|
17819
|
+
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 : '',
|
|
17820
|
+
contentTags: JSON.stringify((_2 = (_1 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _1 === void 0 ? void 0 : _1.tags) !== null && _2 !== void 0 ? _2 : []),
|
|
17818
17821
|
position: position + '',
|
|
17819
|
-
contentFormat: ((
|
|
17820
|
-
traceInfo: (
|
|
17822
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
|
17823
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
|
17821
17824
|
}
|
|
17822
17825
|
});
|
|
17823
17826
|
if (!result) {
|
|
17824
17827
|
setState(false);
|
|
17825
17828
|
}
|
|
17826
17829
|
else {
|
|
17827
|
-
const nRtcList = (
|
|
17830
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17828
17831
|
if (index === position) {
|
|
17829
17832
|
item.isCollected = true;
|
|
17830
17833
|
}
|
|
17831
17834
|
return item;
|
|
17832
|
-
})) !== null &&
|
|
17835
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
|
17833
17836
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17834
17837
|
}
|
|
17835
17838
|
}
|
|
@@ -17932,6 +17935,26 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17932
17935
|
return;
|
|
17933
17936
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
17934
17937
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17938
|
+
const handleEnd = () => {
|
|
17939
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
17940
|
+
if (!videoRef.current)
|
|
17941
|
+
return;
|
|
17942
|
+
if (isDiyH5) {
|
|
17943
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
|
17944
|
+
if (!loopPlayRef.current)
|
|
17945
|
+
return;
|
|
17946
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
17947
|
+
(_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.slideTo(0);
|
|
17948
|
+
}
|
|
17949
|
+
else {
|
|
17950
|
+
const i = (_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.activeIndex;
|
|
17951
|
+
(_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.slideTo(i + 1);
|
|
17952
|
+
}
|
|
17953
|
+
}
|
|
17954
|
+
else {
|
|
17955
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
|
|
17956
|
+
}
|
|
17957
|
+
};
|
|
17935
17958
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
17936
17959
|
const handlePlaying = React.useCallback(() => {
|
|
17937
17960
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
@@ -17940,7 +17963,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17940
17963
|
setIsLoadFinish(true);
|
|
17941
17964
|
}, []);
|
|
17942
17965
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17943
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
17966
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
17944
17967
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
17945
17968
|
return;
|
|
17946
17969
|
setIsPauseVideo(false);
|
|
@@ -17951,16 +17974,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17951
17974
|
const videoCurrentTime = ((_h = (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) !== null && _h !== void 0 ? _h : 0).toFixed(2);
|
|
17952
17975
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
|
17953
17976
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17954
|
-
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
|
|
17977
|
+
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', sceneId: (_o = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.scene) === null || _m === void 0 ? void 0 : _m.sceneId) !== null && _o !== void 0 ? _o : '', contentName: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []), position: index + '', contentFormat: 'video', traceInfo: (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
|
|
17955
17978
|
});
|
|
17956
17979
|
isFirstPlayRef.current = false;
|
|
17957
17980
|
}
|
|
17958
17981
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17959
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
|
17960
|
-
if (isDiyH5) {
|
|
17961
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
17962
|
-
}
|
|
17963
|
-
}, []);
|
|
17964
17982
|
const handLoadeddata = React.useCallback(() => {
|
|
17965
17983
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
|
17966
17984
|
return;
|
|
@@ -17985,13 +18003,12 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17985
18003
|
const handleLoadedmetadata = React.useCallback(() => {
|
|
17986
18004
|
if (!videoRef.current)
|
|
17987
18005
|
return;
|
|
17988
|
-
setCurrentTimeByStartTime();
|
|
17989
18006
|
loadedTimeRef.current = new Date();
|
|
17990
18007
|
handleStartPlay();
|
|
17991
18008
|
handLoadeddata();
|
|
17992
18009
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
|
17993
18010
|
const handleClickVideo = React.useCallback((type) => () => {
|
|
17994
|
-
var _a, _b, _c, _d, _e
|
|
18011
|
+
var _a, _b, _c, _d, _e;
|
|
17995
18012
|
if (!videoRef.current)
|
|
17996
18013
|
return;
|
|
17997
18014
|
if (!isLoadFinish)
|
|
@@ -18012,20 +18029,17 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18012
18029
|
break;
|
|
18013
18030
|
default:
|
|
18014
18031
|
if (isPause) {
|
|
18015
|
-
|
|
18016
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
18017
|
-
}
|
|
18018
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
|
18032
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
|
18019
18033
|
}
|
|
18020
18034
|
else {
|
|
18021
|
-
(
|
|
18035
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
|
18022
18036
|
}
|
|
18023
18037
|
setIsPauseVideo(!isPause);
|
|
18024
18038
|
break;
|
|
18025
18039
|
}
|
|
18026
18040
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
18027
18041
|
const handlePause = React.useCallback(() => {
|
|
18028
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
18042
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
18029
18043
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
18030
18044
|
return;
|
|
18031
18045
|
if (activeIndex !== index)
|
|
@@ -18041,14 +18055,15 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18041
18055
|
eventSubject: 'playOverVideo',
|
|
18042
18056
|
eventDescription: 'User finished playing the video',
|
|
18043
18057
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
|
18044
|
-
|
|
18058
|
+
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 : '',
|
|
18059
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
|
18045
18060
|
endTime: videoCurrentTime,
|
|
18046
18061
|
videoDuration,
|
|
18047
18062
|
playDuration,
|
|
18048
|
-
contentTags: JSON.stringify((
|
|
18063
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
|
18049
18064
|
position: index + '',
|
|
18050
18065
|
contentFormat: 'video',
|
|
18051
|
-
traceInfo: (
|
|
18066
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
18052
18067
|
}
|
|
18053
18068
|
});
|
|
18054
18069
|
}
|
|
@@ -18056,27 +18071,8 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18056
18071
|
const handleWaiting = React.useCallback(() => {
|
|
18057
18072
|
setWaiting(true);
|
|
18058
18073
|
}, []);
|
|
18059
|
-
const handleTimeUpload = () => {
|
|
18060
|
-
if (!videoRef.current || !isDiyH5)
|
|
18061
|
-
return;
|
|
18062
|
-
setTimeout(() => {
|
|
18063
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18064
|
-
if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
|
|
18065
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
18066
|
-
if (!loopPlayRef.current)
|
|
18067
|
-
return;
|
|
18068
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18069
|
-
(_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
|
|
18070
|
-
}
|
|
18071
|
-
else {
|
|
18072
|
-
const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
|
|
18073
|
-
(_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
|
|
18074
|
-
}
|
|
18075
|
-
}
|
|
18076
|
-
});
|
|
18077
|
-
};
|
|
18078
18074
|
React.useEffect(() => {
|
|
18079
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18075
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18080
18076
|
if (!isActive)
|
|
18081
18077
|
return;
|
|
18082
18078
|
const videoSrc = videoUrl;
|
|
@@ -18097,7 +18093,6 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18097
18093
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
18098
18094
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
18099
18095
|
var _a;
|
|
18100
|
-
setCurrentTimeByStartTime();
|
|
18101
18096
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
18102
18097
|
});
|
|
18103
18098
|
}
|
|
@@ -18111,12 +18106,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18111
18106
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
|
18112
18107
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
|
18113
18108
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
|
18114
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
|
18109
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
|
18115
18110
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
|
18116
18111
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
|
18117
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
|
18118
18112
|
return () => {
|
|
18119
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18113
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18120
18114
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
|
18121
18115
|
if (!isPause)
|
|
18122
18116
|
handlePause();
|
|
@@ -18128,10 +18122,9 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18128
18122
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
|
18129
18123
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
|
18130
18124
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
|
18131
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
|
18125
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
|
18132
18126
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
|
18133
18127
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
|
18134
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
|
18135
18128
|
};
|
|
18136
18129
|
}, [isActive]);
|
|
18137
18130
|
React.useEffect(() => {
|
|
@@ -18342,19 +18335,48 @@ const Picture = (props) => {
|
|
|
18342
18335
|
}, onLoad: onShowFirstImage }))));
|
|
18343
18336
|
};
|
|
18344
18337
|
|
|
18345
|
-
const PictureGroup$4 = ({ imgUrls,
|
|
18338
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
|
18346
18339
|
var _a, _b;
|
|
18347
18340
|
const { isActive } = useSwiperSlide();
|
|
18348
|
-
const { sxpParameter, openHashtag } = useSxpDataSource();
|
|
18341
|
+
const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
|
|
18349
18342
|
const [isLoad, setIsLoad] = React.useState(false);
|
|
18350
18343
|
const [imgInfo, setImgInfo] = React.useState();
|
|
18351
18344
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
|
18352
|
-
const
|
|
18345
|
+
const imgsSwiperRef = React.useRef();
|
|
18353
18346
|
const isFirstPlayRef = React.useRef(true);
|
|
18347
|
+
const loopPlayRef = React.useRef(true);
|
|
18354
18348
|
const initTime = new Date();
|
|
18349
|
+
React.useImperativeHandle(ref, () => {
|
|
18350
|
+
return {
|
|
18351
|
+
setLoopPlay(v) {
|
|
18352
|
+
loopPlayRef.current = v;
|
|
18353
|
+
}
|
|
18354
|
+
};
|
|
18355
|
+
});
|
|
18356
|
+
React.useEffect(() => {
|
|
18357
|
+
let timerId;
|
|
18358
|
+
if (isLoad && isActive && isDiyH5) {
|
|
18359
|
+
timerId = setTimeout(() => {
|
|
18360
|
+
var _a, _b, _c, _d, _e, _f;
|
|
18361
|
+
if (!loopPlayRef.current)
|
|
18362
|
+
return;
|
|
18363
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18364
|
+
(_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.slideTo(0);
|
|
18365
|
+
}
|
|
18366
|
+
else {
|
|
18367
|
+
const i = (_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.activeIndex;
|
|
18368
|
+
(_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
|
|
18369
|
+
}
|
|
18370
|
+
}, 3000);
|
|
18371
|
+
}
|
|
18372
|
+
return () => {
|
|
18373
|
+
if (timerId)
|
|
18374
|
+
clearTimeout(timerId);
|
|
18375
|
+
};
|
|
18376
|
+
}, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
|
|
18355
18377
|
React.useEffect(() => {
|
|
18356
18378
|
if (isLoad && isActive) {
|
|
18357
|
-
(
|
|
18379
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
|
18358
18380
|
if (openHashtag) {
|
|
18359
18381
|
onViewImageEndEvent(rec);
|
|
18360
18382
|
}
|
|
@@ -18364,7 +18386,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18364
18386
|
}
|
|
18365
18387
|
}
|
|
18366
18388
|
else {
|
|
18367
|
-
(
|
|
18389
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18368
18390
|
}
|
|
18369
18391
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
|
18370
18392
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -18391,13 +18413,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18391
18413
|
};
|
|
18392
18414
|
}, [isActive, imgInfo]);
|
|
18393
18415
|
const handleMouseEnter = React.useCallback(() => {
|
|
18394
|
-
if (
|
|
18395
|
-
|
|
18416
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18417
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18396
18418
|
}
|
|
18397
18419
|
}, []);
|
|
18398
18420
|
const handleMouseLeave = React.useCallback(() => {
|
|
18399
|
-
if (
|
|
18400
|
-
|
|
18421
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18422
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
|
18401
18423
|
}
|
|
18402
18424
|
}, []);
|
|
18403
18425
|
const handleSlideChange = React.useCallback((swiper) => {
|
|
@@ -18418,7 +18440,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18418
18440
|
enabled: true
|
|
18419
18441
|
}
|
|
18420
18442
|
}
|
|
18421
|
-
: {}), { loop: true, ref:
|
|
18443
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
|
18422
18444
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
|
18423
18445
|
fontSize: '14px'
|
|
18424
18446
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
|
@@ -18435,7 +18457,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18435
18457
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
|
18436
18458
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
|
18437
18459
|
}))));
|
|
18438
|
-
};
|
|
18460
|
+
});
|
|
18439
18461
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
|
18440
18462
|
|
|
18441
18463
|
/*
|
|
@@ -18715,7 +18737,7 @@ var NavBack$1 = React.memo(NavBack);
|
|
|
18715
18737
|
* @Author: binruan@chatlabs.com
|
|
18716
18738
|
* @Date: 2024-03-20 10:27:31
|
|
18717
18739
|
* @LastEditors: binruan@chatlabs.com
|
|
18718
|
-
* @LastEditTime: 2025-05-
|
|
18740
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
|
18719
18741
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
|
18720
18742
|
*
|
|
18721
18743
|
*/
|
|
@@ -18735,6 +18757,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18735
18757
|
const skipLinkRef = React.useRef(false);
|
|
18736
18758
|
const [pageNum, setPageNum] = React.useState(2);
|
|
18737
18759
|
const videoWidgetRef = React.useRef(null);
|
|
18760
|
+
const pictureGroupRef = React.useRef(null);
|
|
18738
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();
|
|
18739
18762
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
|
18740
18763
|
const isShowFingerTip = React.useMemo(() => {
|
|
@@ -18782,7 +18805,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18782
18805
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
|
18783
18806
|
}, [data, ctaType, swiperRef]);
|
|
18784
18807
|
const handleSessionCompleted = React.useCallback((fk) => {
|
|
18785
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
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;
|
|
18786
18809
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
18787
18810
|
let fromKName = '';
|
|
18788
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))) {
|
|
@@ -18809,12 +18832,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18809
18832
|
eventSubject: 'sessionCompleted',
|
|
18810
18833
|
eventDescription: 'Session completed',
|
|
18811
18834
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
|
18812
|
-
|
|
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,
|
|
18813
18837
|
position: activeIndex + '',
|
|
18814
18838
|
fromKName: fk || fromKName,
|
|
18815
18839
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
18816
|
-
ctatId: (
|
|
18817
|
-
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 : ''
|
|
18818
18842
|
}
|
|
18819
18843
|
});
|
|
18820
18844
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
|
@@ -18873,8 +18897,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18873
18897
|
refreshFeSession
|
|
18874
18898
|
]);
|
|
18875
18899
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
|
18876
|
-
var _a;
|
|
18900
|
+
var _a, _b;
|
|
18877
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);
|
|
18878
18903
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
|
18879
18904
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
|
18880
18905
|
React.useEffect(() => {
|
|
@@ -18944,18 +18969,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18944
18969
|
return null;
|
|
18945
18970
|
}, [globalConfig, activeIndex, visList]);
|
|
18946
18971
|
const renderContent = React.useCallback((rec, index) => {
|
|
18947
|
-
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;
|
|
18948
18973
|
if (rec === 'organic menu') {
|
|
18949
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)));
|
|
18950
18975
|
}
|
|
18951
|
-
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)) {
|
|
18952
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 })));
|
|
18953
18978
|
}
|
|
18954
|
-
if ((
|
|
18955
|
-
return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
|
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 })));
|
|
18956
18981
|
}
|
|
18957
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
|
18958
|
-
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) => {
|
|
18959
18984
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
18960
18985
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
|
18961
18986
|
const Component = withBindDataSource(t);
|
|
@@ -18993,7 +19018,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18993
19018
|
};
|
|
18994
19019
|
}, [isShowMore]);
|
|
18995
19020
|
const renderBottom = React.useCallback((rec, index) => {
|
|
18996
|
-
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;
|
|
18997
19022
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
18998
19023
|
let cta = null;
|
|
18999
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) {
|
|
@@ -19002,24 +19027,27 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19002
19027
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
19003
19028
|
cta = '商品CTA';
|
|
19004
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
|
+
}
|
|
19005
19033
|
else {
|
|
19006
|
-
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;
|
|
19007
19035
|
}
|
|
19008
19036
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
19009
19037
|
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) &&
|
|
19010
19038
|
index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1) &&
|
|
19011
|
-
((
|
|
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));
|
|
19012
19040
|
return (React.createElement(React.Fragment, null,
|
|
19013
19041
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
|
19014
|
-
((
|
|
19015
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
|
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` } },
|
|
19016
19044
|
React.createElement(Nudge, { nudge: nudge }),
|
|
19017
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' },
|
|
19018
19046
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
|
19019
19047
|
React.createElement("div", null,
|
|
19020
|
-
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (
|
|
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 }),
|
|
19021
19049
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
|
19022
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
|
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) }))),
|
|
19023
19051
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
19024
19052
|
}
|
|
19025
19053
|
return null;
|
|
@@ -19058,7 +19086,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19058
19086
|
return null;
|
|
19059
19087
|
}, [globalConfig, waterFallData]);
|
|
19060
19088
|
const handleViewImageStartEnd = (item) => {
|
|
19061
|
-
var _a, _b, _c, _d, _e, _f;
|
|
19089
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19062
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)) {
|
|
19063
19091
|
const endTime = Date.now();
|
|
19064
19092
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
|
@@ -19067,10 +19095,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19067
19095
|
eventSubject: 'viewImageCarouselEnd',
|
|
19068
19096
|
eventDescription: 'User end view the image carousel',
|
|
19069
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 : '',
|
|
19070
|
-
|
|
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 : '',
|
|
19071
19100
|
imageEndTime: `${endTime}`,
|
|
19072
19101
|
playDuration: `${duration}`,
|
|
19073
|
-
contentTags: JSON.stringify((
|
|
19102
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19074
19103
|
position: activeIndex + '',
|
|
19075
19104
|
contentFormat: 'image',
|
|
19076
19105
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
|
@@ -19079,7 +19108,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19079
19108
|
}
|
|
19080
19109
|
};
|
|
19081
19110
|
const handleSlideSkip = (item, position) => {
|
|
19082
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
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;
|
|
19083
19112
|
if (isPreview || waterFallData)
|
|
19084
19113
|
return;
|
|
19085
19114
|
const t = new Date() - curTime.current;
|
|
@@ -19105,7 +19134,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19105
19134
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
|
19106
19135
|
position: position + '',
|
|
19107
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 : '',
|
|
19108
|
-
|
|
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 : '',
|
|
19109
19139
|
contentFormat
|
|
19110
19140
|
}
|
|
19111
19141
|
});
|
|
@@ -19115,7 +19145,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19115
19145
|
}
|
|
19116
19146
|
};
|
|
19117
19147
|
const handleScrollEvent = (swiper) => {
|
|
19118
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
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;
|
|
19119
19149
|
const item = data[swiper.previousIndex];
|
|
19120
19150
|
if (!item)
|
|
19121
19151
|
return;
|
|
@@ -19132,11 +19162,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19132
19162
|
eventSubject: 'scrollDown',
|
|
19133
19163
|
eventDescription: 'User scroll down',
|
|
19134
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 : '',
|
|
19135
|
-
|
|
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 : '',
|
|
19136
19167
|
requestId: null,
|
|
19137
|
-
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 : '',
|
|
19138
19169
|
contentFormat,
|
|
19139
|
-
position: ((
|
|
19170
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
|
19140
19171
|
}
|
|
19141
19172
|
});
|
|
19142
19173
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19148,12 +19179,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19148
19179
|
eventInfo: {
|
|
19149
19180
|
eventSubject: 'scrollUp',
|
|
19150
19181
|
eventDescription: 'User scroll up',
|
|
19151
|
-
contentId: (
|
|
19152
|
-
|
|
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 : '',
|
|
19153
19185
|
requestId: null,
|
|
19154
|
-
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 : '',
|
|
19155
19187
|
contentFormat,
|
|
19156
|
-
position: ((
|
|
19188
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
|
19157
19189
|
}
|
|
19158
19190
|
});
|
|
19159
19191
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19179,7 +19211,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19179
19211
|
}
|
|
19180
19212
|
}, [openHashtag, data, activeIndex]);
|
|
19181
19213
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
|
19182
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19214
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
19183
19215
|
const item = data[activeIndex];
|
|
19184
19216
|
// 如果是图片集则上报事件
|
|
19185
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)) {
|
|
@@ -19190,9 +19222,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19190
19222
|
eventSubject: 'viewImageCarouselStart',
|
|
19191
19223
|
eventDescription: 'User start view the image carousel',
|
|
19192
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 : '',
|
|
19193
|
-
|
|
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 : '',
|
|
19194
19227
|
imageStartTime: `${startTime}`,
|
|
19195
|
-
contentTags: JSON.stringify((
|
|
19228
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19196
19229
|
position: activeIndex + '',
|
|
19197
19230
|
contentFormat: 'image',
|
|
19198
19231
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
|
@@ -19202,11 +19235,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19202
19235
|
if (enableCapi) {
|
|
19203
19236
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19204
19237
|
eventName: 'ViewContent',
|
|
19205
|
-
product: (
|
|
19238
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
|
19206
19239
|
});
|
|
19207
19240
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19208
19241
|
eventName: 'PageView',
|
|
19209
|
-
product: (
|
|
19242
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
|
19210
19243
|
});
|
|
19211
19244
|
}
|
|
19212
19245
|
}
|
|
@@ -19359,7 +19392,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19359
19392
|
}, []);
|
|
19360
19393
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
19361
19394
|
const handlePlaying = React.useCallback(() => {
|
|
19362
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19395
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19363
19396
|
setIsPauseVideo(false);
|
|
19364
19397
|
const item = data[index];
|
|
19365
19398
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -19372,14 +19405,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19372
19405
|
eventSubject: 'playVideo',
|
|
19373
19406
|
eventDescription: 'User played the video',
|
|
19374
19407
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
|
19375
|
-
|
|
19408
|
+
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 : '',
|
|
19409
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
|
19376
19410
|
playType,
|
|
19377
19411
|
startTime: videoCurrentTime,
|
|
19378
19412
|
videoDuration,
|
|
19379
|
-
contentTags: JSON.stringify((
|
|
19413
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
|
19380
19414
|
position: index + '',
|
|
19381
19415
|
contentFormat: 'video',
|
|
19382
|
-
traceInfo: (
|
|
19416
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19383
19417
|
}
|
|
19384
19418
|
});
|
|
19385
19419
|
setIsFirstPlay(false);
|
|
@@ -19418,7 +19452,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19418
19452
|
}
|
|
19419
19453
|
}, [isLoadFinish]);
|
|
19420
19454
|
const onPause = React.useCallback(() => {
|
|
19421
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19455
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19422
19456
|
const item = data[index];
|
|
19423
19457
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
19424
19458
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
@@ -19429,14 +19463,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19429
19463
|
eventSubject: 'playOverVideo',
|
|
19430
19464
|
eventDescription: 'User finished playing the video',
|
|
19431
19465
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
|
19432
|
-
|
|
19466
|
+
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 : '',
|
|
19467
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
|
19433
19468
|
endTime: videoCurrentTime,
|
|
19434
19469
|
videoDuration,
|
|
19435
19470
|
playDuration,
|
|
19436
|
-
contentTags: JSON.stringify((
|
|
19471
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
|
19437
19472
|
position: index + '',
|
|
19438
19473
|
contentFormat: 'video',
|
|
19439
|
-
traceInfo: (
|
|
19474
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19440
19475
|
}
|
|
19441
19476
|
});
|
|
19442
19477
|
}
|