pb-sxp-ui 1.15.41 → 1.15.43
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 +156 -125
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +156 -125
- 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 +156 -125
- 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 +37 -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 +46 -35
- package/es/core/context/SxpDataSourceProvider.js +2 -2
- 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 +36 -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 +46 -35
- package/lib/core/context/SxpDataSourceProvider.js +2 -2
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1086,7 +1086,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
1086
1086
|
}
|
|
1087
1087
|
}), [bffFetch, utmVal]);
|
|
1088
1088
|
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;
|
|
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, _12, _13, _14;
|
|
1090
1090
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
1091
1091
|
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
1092
|
let fromKName = '';
|
|
@@ -1104,7 +1104,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
1104
1104
|
}
|
|
1105
1105
|
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
1106
|
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: (
|
|
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 : '', 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
1108
|
});
|
|
1109
1109
|
}, [bffEventReport, isFromHashtag]);
|
|
1110
1110
|
const h5EnterLink = React.useCallback(() => {
|
|
@@ -1765,14 +1765,14 @@ var settingRender$f = [
|
|
|
1765
1765
|
* @Author: binruan@chatlabs.com
|
|
1766
1766
|
* @Date: 2024-03-12 10:59:06
|
|
1767
1767
|
* @LastEditors: binruan@chatlabs.com
|
|
1768
|
-
* @LastEditTime:
|
|
1768
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
|
1769
1769
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
|
1770
1770
|
*
|
|
1771
1771
|
*/
|
|
1772
1772
|
function useEventReport() {
|
|
1773
1773
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
|
1774
1774
|
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;
|
|
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, _14, _15, _16;
|
|
1776
1776
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
|
1777
1777
|
if (i !== -1) {
|
|
1778
1778
|
return;
|
|
@@ -1805,11 +1805,11 @@ function useEventReport() {
|
|
|
1805
1805
|
contentFormat = 'image';
|
|
1806
1806
|
}
|
|
1807
1807
|
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 : '',
|
|
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 : '', 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
1809
|
});
|
|
1810
1810
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
|
1811
1811
|
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;
|
|
1812
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
1813
1813
|
let fromKName = '';
|
|
1814
1814
|
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
1815
|
fromKName = 'pdpPage';
|
|
@@ -1828,8 +1828,9 @@ function useEventReport() {
|
|
|
1828
1828
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
|
1829
1829
|
position: position + '',
|
|
1830
1830
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
1831
|
+
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
1832
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
|
1832
|
-
traceInfo: (
|
|
1833
|
+
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
1834
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
|
1834
1835
|
eventSubject: 'productView',
|
|
1835
1836
|
eventDescription: 'User browsed the product'
|
|
@@ -15526,7 +15527,7 @@ function WaterfallList(_a) {
|
|
|
15526
15527
|
* @Author: binruan@chatlabs.com
|
|
15527
15528
|
* @Date: 2024-01-10 10:58:24
|
|
15528
15529
|
* @LastEditors: binruan@chatlabs.com
|
|
15529
|
-
* @LastEditTime: 2025-
|
|
15530
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
|
15530
15531
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
|
15531
15532
|
*
|
|
15532
15533
|
*/
|
|
@@ -15564,7 +15565,7 @@ const WaterFall = (props) => {
|
|
|
15564
15565
|
}
|
|
15565
15566
|
}, [waterFallData]);
|
|
15566
15567
|
const reportTagsView = React.useCallback(() => {
|
|
15567
|
-
var _a, _b, _c, _d, _e, _f;
|
|
15568
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
15568
15569
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
|
15569
15570
|
if (!rec)
|
|
15570
15571
|
return;
|
|
@@ -15584,9 +15585,10 @@ const WaterFall = (props) => {
|
|
|
15584
15585
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
15585
15586
|
eventInfo: {
|
|
15586
15587
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
15588
|
+
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 : '',
|
|
15587
15589
|
position: cacheActiveIndex + '',
|
|
15588
|
-
contentTags: JSON.stringify((
|
|
15589
|
-
traceInfo: (
|
|
15590
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
|
15591
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
|
15590
15592
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
|
15591
15593
|
fromKName,
|
|
15592
15594
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
@@ -17667,7 +17669,7 @@ const LikeButton = (_a) => {
|
|
|
17667
17669
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
|
17668
17670
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
|
17669
17671
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17670
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
17672
|
+
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;
|
|
17671
17673
|
if (state) {
|
|
17672
17674
|
// 先设置状态
|
|
17673
17675
|
setState(false);
|
|
@@ -17677,11 +17679,12 @@ const LikeButton = (_a) => {
|
|
|
17677
17679
|
eventSubject: 'favoriteContentCanceled',
|
|
17678
17680
|
eventDescription: 'This content was unfavorite by the user',
|
|
17679
17681
|
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 : '',
|
|
17680
|
-
|
|
17681
|
-
|
|
17682
|
+
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 : '',
|
|
17683
|
+
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 : '',
|
|
17684
|
+
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 : []),
|
|
17682
17685
|
position: position + '',
|
|
17683
|
-
contentFormat: ((
|
|
17684
|
-
traceInfo: (
|
|
17686
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
|
17687
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
17685
17688
|
}
|
|
17686
17689
|
});
|
|
17687
17690
|
// 如果接口调用失败，则回滚状态
|
|
@@ -17689,40 +17692,41 @@ const LikeButton = (_a) => {
|
|
|
17689
17692
|
setState(true);
|
|
17690
17693
|
}
|
|
17691
17694
|
else {
|
|
17692
|
-
const nRtcList = (
|
|
17695
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17693
17696
|
if (index === position) {
|
|
17694
17697
|
item.isCollected = false;
|
|
17695
17698
|
}
|
|
17696
17699
|
return item;
|
|
17697
|
-
})) !== null &&
|
|
17700
|
+
})) !== null && _s !== void 0 ? _s : [];
|
|
17698
17701
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17699
17702
|
}
|
|
17700
17703
|
}
|
|
17701
17704
|
else {
|
|
17702
17705
|
setState(true);
|
|
17703
|
-
const result = (
|
|
17706
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
|
17704
17707
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17705
17708
|
eventInfo: {
|
|
17706
17709
|
eventSubject: 'favoriteContent',
|
|
17707
17710
|
eventDescription: 'This content was favorite by the user',
|
|
17708
|
-
contentId: (
|
|
17709
|
-
|
|
17710
|
-
|
|
17711
|
+
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 : '',
|
|
17712
|
+
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 : '',
|
|
17713
|
+
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 : '',
|
|
17714
|
+
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 : []),
|
|
17711
17715
|
position: position + '',
|
|
17712
|
-
contentFormat: ((
|
|
17713
|
-
traceInfo: (
|
|
17716
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
|
17717
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
|
17714
17718
|
}
|
|
17715
17719
|
});
|
|
17716
17720
|
if (!result) {
|
|
17717
17721
|
setState(false);
|
|
17718
17722
|
}
|
|
17719
17723
|
else {
|
|
17720
|
-
const nRtcList = (
|
|
17724
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17721
17725
|
if (index === position) {
|
|
17722
17726
|
item.isCollected = true;
|
|
17723
17727
|
}
|
|
17724
17728
|
return item;
|
|
17725
|
-
})) !== null &&
|
|
17729
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
|
17726
17730
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17727
17731
|
}
|
|
17728
17732
|
}
|
|
@@ -17825,6 +17829,26 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17825
17829
|
return;
|
|
17826
17830
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
17827
17831
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17832
|
+
const handleEnd = () => {
|
|
17833
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
17834
|
+
if (!videoRef.current)
|
|
17835
|
+
return;
|
|
17836
|
+
if (isDiyH5) {
|
|
17837
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
|
17838
|
+
if (!loopPlayRef.current)
|
|
17839
|
+
return;
|
|
17840
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
17841
|
+
(_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);
|
|
17842
|
+
}
|
|
17843
|
+
else {
|
|
17844
|
+
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;
|
|
17845
|
+
(_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);
|
|
17846
|
+
}
|
|
17847
|
+
}
|
|
17848
|
+
else {
|
|
17849
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
|
|
17850
|
+
}
|
|
17851
|
+
};
|
|
17828
17852
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
17829
17853
|
const handlePlaying = React.useCallback(() => {
|
|
17830
17854
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
@@ -17833,7 +17857,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17833
17857
|
setIsLoadFinish(true);
|
|
17834
17858
|
}, []);
|
|
17835
17859
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17836
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
17860
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
17837
17861
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
17838
17862
|
return;
|
|
17839
17863
|
setIsPauseVideo(false);
|
|
@@ -17844,16 +17868,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17844
17868
|
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);
|
|
17845
17869
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
|
17846
17870
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17847
|
-
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 : '',
|
|
17871
|
+
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) + '' }))
|
|
17848
17872
|
});
|
|
17849
17873
|
isFirstPlayRef.current = false;
|
|
17850
17874
|
}
|
|
17851
17875
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17852
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
|
17853
|
-
if (isDiyH5) {
|
|
17854
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
17855
|
-
}
|
|
17856
|
-
}, []);
|
|
17857
17876
|
const handLoadeddata = React.useCallback(() => {
|
|
17858
17877
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
|
17859
17878
|
return;
|
|
@@ -17878,13 +17897,12 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17878
17897
|
const handleLoadedmetadata = React.useCallback(() => {
|
|
17879
17898
|
if (!videoRef.current)
|
|
17880
17899
|
return;
|
|
17881
|
-
setCurrentTimeByStartTime();
|
|
17882
17900
|
loadedTimeRef.current = new Date();
|
|
17883
17901
|
handleStartPlay();
|
|
17884
17902
|
handLoadeddata();
|
|
17885
17903
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
|
17886
17904
|
const handleClickVideo = React.useCallback((type) => () => {
|
|
17887
|
-
var _a, _b, _c, _d, _e
|
|
17905
|
+
var _a, _b, _c, _d, _e;
|
|
17888
17906
|
if (!videoRef.current)
|
|
17889
17907
|
return;
|
|
17890
17908
|
if (!isLoadFinish)
|
|
@@ -17905,20 +17923,17 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17905
17923
|
break;
|
|
17906
17924
|
default:
|
|
17907
17925
|
if (isPause) {
|
|
17908
|
-
|
|
17909
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
17910
|
-
}
|
|
17911
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
|
17926
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
|
17912
17927
|
}
|
|
17913
17928
|
else {
|
|
17914
|
-
(
|
|
17929
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
|
17915
17930
|
}
|
|
17916
17931
|
setIsPauseVideo(!isPause);
|
|
17917
17932
|
break;
|
|
17918
17933
|
}
|
|
17919
17934
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17920
17935
|
const handlePause = React.useCallback(() => {
|
|
17921
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
17936
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
17922
17937
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
17923
17938
|
return;
|
|
17924
17939
|
if (activeIndex !== index)
|
|
@@ -17934,14 +17949,15 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17934
17949
|
eventSubject: 'playOverVideo',
|
|
17935
17950
|
eventDescription: 'User finished playing the video',
|
|
17936
17951
|
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 : '',
|
|
17937
|
-
|
|
17952
|
+
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 : '',
|
|
17953
|
+
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 : '',
|
|
17938
17954
|
endTime: videoCurrentTime,
|
|
17939
17955
|
videoDuration,
|
|
17940
17956
|
playDuration,
|
|
17941
|
-
contentTags: JSON.stringify((
|
|
17957
|
+
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 : []),
|
|
17942
17958
|
position: index + '',
|
|
17943
17959
|
contentFormat: 'video',
|
|
17944
|
-
traceInfo: (
|
|
17960
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
17945
17961
|
}
|
|
17946
17962
|
});
|
|
17947
17963
|
}
|
|
@@ -17949,27 +17965,8 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17949
17965
|
const handleWaiting = React.useCallback(() => {
|
|
17950
17966
|
setWaiting(true);
|
|
17951
17967
|
}, []);
|
|
17952
|
-
const handleTimeUpload = () => {
|
|
17953
|
-
if (!videoRef.current || !isDiyH5)
|
|
17954
|
-
return;
|
|
17955
|
-
setTimeout(() => {
|
|
17956
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
17957
|
-
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)) {
|
|
17958
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
17959
|
-
if (!loopPlayRef.current)
|
|
17960
|
-
return;
|
|
17961
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
17962
|
-
(_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);
|
|
17963
|
-
}
|
|
17964
|
-
else {
|
|
17965
|
-
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;
|
|
17966
|
-
(_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);
|
|
17967
|
-
}
|
|
17968
|
-
}
|
|
17969
|
-
});
|
|
17970
|
-
};
|
|
17971
17968
|
React.useEffect(() => {
|
|
17972
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
17969
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
17973
17970
|
if (!isActive)
|
|
17974
17971
|
return;
|
|
17975
17972
|
const videoSrc = videoUrl;
|
|
@@ -17990,7 +17987,6 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17990
17987
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
17991
17988
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
17992
17989
|
var _a;
|
|
17993
|
-
setCurrentTimeByStartTime();
|
|
17994
17990
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
17995
17991
|
});
|
|
17996
17992
|
}
|
|
@@ -18004,12 +18000,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18004
18000
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
|
18005
18001
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
|
18006
18002
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
|
18007
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
|
18003
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
|
18008
18004
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
|
18009
18005
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
|
18010
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
|
18011
18006
|
return () => {
|
|
18012
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18007
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18013
18008
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
|
18014
18009
|
if (!isPause)
|
|
18015
18010
|
handlePause();
|
|
@@ -18021,10 +18016,9 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18021
18016
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
|
18022
18017
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
|
18023
18018
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
|
18024
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
|
18019
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
|
18025
18020
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
|
18026
18021
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
|
18027
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
|
18028
18022
|
};
|
|
18029
18023
|
}, [isActive]);
|
|
18030
18024
|
React.useEffect(() => {
|
|
@@ -18235,19 +18229,43 @@ const Picture = (props) => {
|
|
|
18235
18229
|
}, onLoad: onShowFirstImage }))));
|
|
18236
18230
|
};
|
|
18237
18231
|
|
|
18238
|
-
const PictureGroup$4 = ({ imgUrls,
|
|
18232
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
|
18239
18233
|
var _a, _b;
|
|
18240
18234
|
const { isActive } = useSwiperSlide();
|
|
18241
|
-
const { sxpParameter, openHashtag } = useSxpDataSource();
|
|
18235
|
+
const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
|
|
18242
18236
|
const [isLoad, setIsLoad] = React.useState(false);
|
|
18243
18237
|
const [imgInfo, setImgInfo] = React.useState();
|
|
18244
18238
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
|
18245
|
-
const
|
|
18239
|
+
const imgsSwiperRef = React.useRef();
|
|
18246
18240
|
const isFirstPlayRef = React.useRef(true);
|
|
18241
|
+
const loopPlayRef = React.useRef(true);
|
|
18247
18242
|
const initTime = new Date();
|
|
18243
|
+
React.useImperativeHandle(ref, () => {
|
|
18244
|
+
return {
|
|
18245
|
+
setLoopPlay(v) {
|
|
18246
|
+
loopPlayRef.current = v;
|
|
18247
|
+
}
|
|
18248
|
+
};
|
|
18249
|
+
});
|
|
18250
|
+
React.useEffect(() => {
|
|
18251
|
+
if (isLoad && isActive && isDiyH5) {
|
|
18252
|
+
setTimeout(() => {
|
|
18253
|
+
var _a, _b, _c, _d, _e, _f;
|
|
18254
|
+
if (!loopPlayRef.current)
|
|
18255
|
+
return;
|
|
18256
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18257
|
+
(_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);
|
|
18258
|
+
}
|
|
18259
|
+
else {
|
|
18260
|
+
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;
|
|
18261
|
+
(_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);
|
|
18262
|
+
}
|
|
18263
|
+
}, 3000);
|
|
18264
|
+
}
|
|
18265
|
+
}, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
|
|
18248
18266
|
React.useEffect(() => {
|
|
18249
18267
|
if (isLoad && isActive) {
|
|
18250
|
-
(
|
|
18268
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
|
18251
18269
|
if (openHashtag) {
|
|
18252
18270
|
onViewImageEndEvent(rec);
|
|
18253
18271
|
}
|
|
@@ -18257,7 +18275,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18257
18275
|
}
|
|
18258
18276
|
}
|
|
18259
18277
|
else {
|
|
18260
|
-
(
|
|
18278
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18261
18279
|
}
|
|
18262
18280
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
|
18263
18281
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -18284,13 +18302,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18284
18302
|
};
|
|
18285
18303
|
}, [isActive, imgInfo]);
|
|
18286
18304
|
const handleMouseEnter = React.useCallback(() => {
|
|
18287
|
-
if (
|
|
18288
|
-
|
|
18305
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18306
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18289
18307
|
}
|
|
18290
18308
|
}, []);
|
|
18291
18309
|
const handleMouseLeave = React.useCallback(() => {
|
|
18292
|
-
if (
|
|
18293
|
-
|
|
18310
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18311
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
|
18294
18312
|
}
|
|
18295
18313
|
}, []);
|
|
18296
18314
|
const handleSlideChange = React.useCallback((swiper) => {
|
|
@@ -18311,7 +18329,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18311
18329
|
enabled: true
|
|
18312
18330
|
}
|
|
18313
18331
|
}
|
|
18314
|
-
: {}), { loop: true, ref:
|
|
18332
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
|
18315
18333
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
|
18316
18334
|
fontSize: '14px'
|
|
18317
18335
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
|
@@ -18328,7 +18346,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18328
18346
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
|
18329
18347
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
|
18330
18348
|
}))));
|
|
18331
|
-
};
|
|
18349
|
+
});
|
|
18332
18350
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
|
18333
18351
|
|
|
18334
18352
|
/*
|
|
@@ -18608,7 +18626,7 @@ var NavBack$1 = React.memo(NavBack);
|
|
|
18608
18626
|
* @Author: binruan@chatlabs.com
|
|
18609
18627
|
* @Date: 2024-03-20 10:27:31
|
|
18610
18628
|
* @LastEditors: binruan@chatlabs.com
|
|
18611
|
-
* @LastEditTime: 2025-05-
|
|
18629
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
|
18612
18630
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
|
18613
18631
|
*
|
|
18614
18632
|
*/
|
|
@@ -18628,6 +18646,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18628
18646
|
const skipLinkRef = React.useRef(false);
|
|
18629
18647
|
const [pageNum, setPageNum] = React.useState(2);
|
|
18630
18648
|
const videoWidgetRef = React.useRef(null);
|
|
18649
|
+
const pictureGroupRef = React.useRef(null);
|
|
18631
18650
|
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();
|
|
18632
18651
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
|
18633
18652
|
const isShowFingerTip = React.useMemo(() => {
|
|
@@ -18675,7 +18694,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18675
18694
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
|
18676
18695
|
}, [data, ctaType, swiperRef]);
|
|
18677
18696
|
const handleSessionCompleted = React.useCallback((fk) => {
|
|
18678
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
18697
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
18679
18698
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
18680
18699
|
let fromKName = '';
|
|
18681
18700
|
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))) {
|
|
@@ -18702,12 +18721,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18702
18721
|
eventSubject: 'sessionCompleted',
|
|
18703
18722
|
eventDescription: 'Session completed',
|
|
18704
18723
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
|
18705
|
-
|
|
18724
|
+
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 : '',
|
|
18725
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
|
18706
18726
|
position: activeIndex + '',
|
|
18707
18727
|
fromKName: fk || fromKName,
|
|
18708
18728
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
18709
|
-
ctatId: (
|
|
18710
|
-
traceInfo: (
|
|
18729
|
+
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 : '',
|
|
18730
|
+
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 : ''
|
|
18711
18731
|
}
|
|
18712
18732
|
});
|
|
18713
18733
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
|
@@ -18766,8 +18786,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18766
18786
|
refreshFeSession
|
|
18767
18787
|
]);
|
|
18768
18788
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
|
18769
|
-
var _a;
|
|
18789
|
+
var _a, _b;
|
|
18770
18790
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
|
18791
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
|
18771
18792
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
|
18772
18793
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
|
18773
18794
|
React.useEffect(() => {
|
|
@@ -18837,18 +18858,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18837
18858
|
return null;
|
|
18838
18859
|
}, [globalConfig, activeIndex, visList]);
|
|
18839
18860
|
const renderContent = React.useCallback((rec, index) => {
|
|
18840
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18861
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
18841
18862
|
if (rec === 'organic menu') {
|
|
18842
18863
|
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)));
|
|
18843
18864
|
}
|
|
18844
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
|
18865
|
+
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)) {
|
|
18845
18866
|
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 })));
|
|
18846
18867
|
}
|
|
18847
|
-
if ((
|
|
18848
|
-
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 }));
|
|
18868
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
|
18869
|
+
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 })));
|
|
18849
18870
|
}
|
|
18850
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
|
18851
|
-
return (
|
|
18871
|
+
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) {
|
|
18872
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
|
18852
18873
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
18853
18874
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
|
18854
18875
|
const Component = withBindDataSource(t);
|
|
@@ -18886,7 +18907,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18886
18907
|
};
|
|
18887
18908
|
}, [isShowMore]);
|
|
18888
18909
|
const renderBottom = React.useCallback((rec, index) => {
|
|
18889
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
18910
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
18890
18911
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
18891
18912
|
let cta = null;
|
|
18892
18913
|
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) {
|
|
@@ -18895,20 +18916,23 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18895
18916
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
18896
18917
|
cta = '商品CTA';
|
|
18897
18918
|
}
|
|
18919
|
+
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)) {
|
|
18920
|
+
cta = '服务CTA';
|
|
18921
|
+
}
|
|
18898
18922
|
else {
|
|
18899
|
-
cta = (
|
|
18923
|
+
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;
|
|
18900
18924
|
}
|
|
18901
18925
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
18902
18926
|
return (React.createElement(React.Fragment, null,
|
|
18903
|
-
((
|
|
18904
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
|
18927
|
+
((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
|
18928
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _k !== void 0 ? _k : 40}px` } },
|
|
18905
18929
|
React.createElement(Nudge, { nudge: nudge }),
|
|
18906
18930
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
|
18907
18931
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
|
18908
18932
|
React.createElement("div", null,
|
|
18909
|
-
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: (
|
|
18933
|
+
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: (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', 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 }),
|
|
18910
18934
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
|
18911
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
|
18935
|
+
React.createElement(Hashtag$1, { index: activeIndex, tags: (_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.hashTags) !== null && _p !== void 0 ? _p : [], itemId: (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.itemId, itemType: ((_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
|
18912
18936
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
18913
18937
|
}
|
|
18914
18938
|
return null;
|
|
@@ -18946,7 +18970,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18946
18970
|
return null;
|
|
18947
18971
|
}, [globalConfig, waterFallData]);
|
|
18948
18972
|
const handleViewImageStartEnd = (item) => {
|
|
18949
|
-
var _a, _b, _c, _d, _e, _f;
|
|
18973
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18950
18974
|
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)) {
|
|
18951
18975
|
const endTime = Date.now();
|
|
18952
18976
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
|
@@ -18955,10 +18979,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18955
18979
|
eventSubject: 'viewImageCarouselEnd',
|
|
18956
18980
|
eventDescription: 'User end view the image carousel',
|
|
18957
18981
|
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 : '',
|
|
18958
|
-
|
|
18982
|
+
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 : '',
|
|
18983
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
18959
18984
|
imageEndTime: `${endTime}`,
|
|
18960
18985
|
playDuration: `${duration}`,
|
|
18961
|
-
contentTags: JSON.stringify((
|
|
18986
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
18962
18987
|
position: activeIndex + '',
|
|
18963
18988
|
contentFormat: 'image',
|
|
18964
18989
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
|
@@ -18967,7 +18992,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18967
18992
|
}
|
|
18968
18993
|
};
|
|
18969
18994
|
const handleSlideSkip = (item, position) => {
|
|
18970
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
18995
|
+
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;
|
|
18971
18996
|
if (isPreview || waterFallData)
|
|
18972
18997
|
return;
|
|
18973
18998
|
const t = new Date() - curTime.current;
|
|
@@ -18993,7 +19018,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18993
19018
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
|
18994
19019
|
position: position + '',
|
|
18995
19020
|
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 : '',
|
|
18996
|
-
|
|
19021
|
+
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 : '',
|
|
19022
|
+
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 : '',
|
|
18997
19023
|
contentFormat
|
|
18998
19024
|
}
|
|
18999
19025
|
});
|
|
@@ -19003,7 +19029,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19003
19029
|
}
|
|
19004
19030
|
};
|
|
19005
19031
|
const handleScrollEvent = (swiper) => {
|
|
19006
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
19032
|
+
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;
|
|
19007
19033
|
const item = data[swiper.previousIndex];
|
|
19008
19034
|
if (!item)
|
|
19009
19035
|
return;
|
|
@@ -19020,11 +19046,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19020
19046
|
eventSubject: 'scrollDown',
|
|
19021
19047
|
eventDescription: 'User scroll down',
|
|
19022
19048
|
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 : '',
|
|
19023
|
-
|
|
19049
|
+
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 : '',
|
|
19050
|
+
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 : '',
|
|
19024
19051
|
requestId: null,
|
|
19025
|
-
traceInfo: (
|
|
19052
|
+
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 : '',
|
|
19026
19053
|
contentFormat,
|
|
19027
|
-
position: ((
|
|
19054
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
|
19028
19055
|
}
|
|
19029
19056
|
});
|
|
19030
19057
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19036,12 +19063,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19036
19063
|
eventInfo: {
|
|
19037
19064
|
eventSubject: 'scrollUp',
|
|
19038
19065
|
eventDescription: 'User scroll up',
|
|
19039
|
-
contentId: (
|
|
19040
|
-
|
|
19066
|
+
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 : '',
|
|
19067
|
+
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 : '',
|
|
19068
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
|
19041
19069
|
requestId: null,
|
|
19042
|
-
traceInfo: (
|
|
19070
|
+
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 : '',
|
|
19043
19071
|
contentFormat,
|
|
19044
|
-
position: ((
|
|
19072
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
|
19045
19073
|
}
|
|
19046
19074
|
});
|
|
19047
19075
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19067,7 +19095,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19067
19095
|
}
|
|
19068
19096
|
}, [openHashtag, data, activeIndex]);
|
|
19069
19097
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
|
19070
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19098
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
19071
19099
|
const item = data[activeIndex];
|
|
19072
19100
|
// 如果是图片集则上报事件
|
|
19073
19101
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
|
|
@@ -19078,9 +19106,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19078
19106
|
eventSubject: 'viewImageCarouselStart',
|
|
19079
19107
|
eventDescription: 'User start view the image carousel',
|
|
19080
19108
|
contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
|
|
19081
|
-
|
|
19109
|
+
sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
|
19110
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19082
19111
|
imageStartTime: `${startTime}`,
|
|
19083
|
-
contentTags: JSON.stringify((
|
|
19112
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19084
19113
|
position: activeIndex + '',
|
|
19085
19114
|
contentFormat: 'image',
|
|
19086
19115
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
|
@@ -19090,11 +19119,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19090
19119
|
if (enableCapi) {
|
|
19091
19120
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19092
19121
|
eventName: 'ViewContent',
|
|
19093
|
-
product: (
|
|
19122
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
|
19094
19123
|
});
|
|
19095
19124
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19096
19125
|
eventName: 'PageView',
|
|
19097
|
-
product: (
|
|
19126
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
|
19098
19127
|
});
|
|
19099
19128
|
}
|
|
19100
19129
|
}
|
|
@@ -19247,7 +19276,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19247
19276
|
}, []);
|
|
19248
19277
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
19249
19278
|
const handlePlaying = React.useCallback(() => {
|
|
19250
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19279
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19251
19280
|
setIsPauseVideo(false);
|
|
19252
19281
|
const item = data[index];
|
|
19253
19282
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -19260,14 +19289,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19260
19289
|
eventSubject: 'playVideo',
|
|
19261
19290
|
eventDescription: 'User played the video',
|
|
19262
19291
|
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 : '',
|
|
19263
|
-
|
|
19292
|
+
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 : '',
|
|
19293
|
+
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 : '',
|
|
19264
19294
|
playType,
|
|
19265
19295
|
startTime: videoCurrentTime,
|
|
19266
19296
|
videoDuration,
|
|
19267
|
-
contentTags: JSON.stringify((
|
|
19297
|
+
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 : []),
|
|
19268
19298
|
position: index + '',
|
|
19269
19299
|
contentFormat: 'video',
|
|
19270
|
-
traceInfo: (
|
|
19300
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19271
19301
|
}
|
|
19272
19302
|
});
|
|
19273
19303
|
setIsFirstPlay(false);
|
|
@@ -19306,7 +19336,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19306
19336
|
}
|
|
19307
19337
|
}, [isLoadFinish]);
|
|
19308
19338
|
const onPause = React.useCallback(() => {
|
|
19309
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19339
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19310
19340
|
const item = data[index];
|
|
19311
19341
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
19312
19342
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
@@ -19317,14 +19347,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19317
19347
|
eventSubject: 'playOverVideo',
|
|
19318
19348
|
eventDescription: 'User finished playing the video',
|
|
19319
19349
|
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 : '',
|
|
19320
|
-
|
|
19350
|
+
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 : '',
|
|
19351
|
+
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 : '',
|
|
19321
19352
|
endTime: videoCurrentTime,
|
|
19322
19353
|
videoDuration,
|
|
19323
19354
|
playDuration,
|
|
19324
|
-
contentTags: JSON.stringify((
|
|
19355
|
+
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 : []),
|
|
19325
19356
|
position: index + '',
|
|
19326
19357
|
contentFormat: 'video',
|
|
19327
|
-
traceInfo: (
|
|
19358
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19328
19359
|
}
|
|
19329
19360
|
});
|
|
19330
19361
|
}
|