pb-sxp-ui 1.15.43 → 1.16.1
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 +281 -205
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +125 -0
- package/dist/index.js +281 -205
- 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 +281 -205
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/DiyPortalPreview/VideoWidget.js +8 -10
- package/es/core/components/SxpPageRender/LikeButton/index.js +15 -17
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
- package/es/core/components/SxpPageRender/PictureGroup/index.js +13 -37
- package/es/core/components/SxpPageRender/RenderCard.d.ts +1 -0
- package/es/core/components/SxpPageRender/RenderCard.js +6 -6
- package/es/core/components/SxpPageRender/VideoWidget/index.js +44 -34
- package/es/core/components/SxpPageRender/WaterFall/index.js +3 -4
- package/es/core/components/SxpPageRender/index.d.ts +1 -0
- package/es/core/components/SxpPageRender/index.js +38 -47
- package/es/core/context/SxpDataSourceProvider.js +2 -2
- package/es/core/hooks/useEventReport.js +5 -6
- package/es/materials/sxp/template/NineCommodity/index.d.ts +18 -0
- package/es/materials/sxp/template/NineCommodity/index.js +39 -0
- package/es/materials/sxp/template/NineCommodity/interactionRender.d.ts +9 -0
- package/es/materials/sxp/template/NineCommodity/interactionRender.js +12 -0
- package/es/materials/sxp/template/NineCommodity/material.d.ts +2 -0
- package/es/materials/sxp/template/NineCommodity/material.js +52 -0
- package/es/materials/sxp/template/index.d.ts +1 -0
- package/es/materials/sxp/template/index.js +1 -0
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +8 -10
- package/lib/core/components/SxpPageRender/LikeButton/index.js +15 -17
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -5
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +12 -36
- package/lib/core/components/SxpPageRender/RenderCard.d.ts +1 -0
- package/lib/core/components/SxpPageRender/RenderCard.js +6 -6
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +44 -34
- package/lib/core/components/SxpPageRender/WaterFall/index.js +3 -4
- package/lib/core/components/SxpPageRender/index.d.ts +1 -0
- package/lib/core/components/SxpPageRender/index.js +38 -47
- package/lib/core/context/SxpDataSourceProvider.js +2 -2
- package/lib/core/hooks/useEventReport.js +5 -6
- package/lib/materials/sxp/template/NineCommodity/index.d.ts +18 -0
- package/lib/materials/sxp/template/NineCommodity/index.js +41 -0
- package/lib/materials/sxp/template/NineCommodity/interactionRender.d.ts +9 -0
- package/lib/materials/sxp/template/NineCommodity/interactionRender.js +14 -0
- package/lib/materials/sxp/template/NineCommodity/material.d.ts +2 -0
- package/lib/materials/sxp/template/NineCommodity/material.js +56 -0
- package/lib/materials/sxp/template/index.d.ts +1 -0
- package/lib/materials/sxp/template/index.js +1 -0
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
@@ -1079,7 +1079,7 @@
|
|
1079
1079
|
}
|
1080
1080
|
}), [bffFetch, utmVal]);
|
1081
1081
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
1082
|
-
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
|
1082
|
+
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;
|
1083
1083
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
1084
1084
|
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);
|
1085
1085
|
let fromKName = '';
|
@@ -1097,7 +1097,7 @@
|
|
1097
1097
|
}
|
1098
1098
|
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;
|
1099
1099
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1100
|
-
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 : '',
|
1100
|
+
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '', contentFormat })
|
1101
1101
|
});
|
1102
1102
|
}, [bffEventReport, isFromHashtag]);
|
1103
1103
|
const h5EnterLink = React.useCallback(() => {
|
@@ -1536,7 +1536,7 @@
|
|
1536
1536
|
EditorCore: EditorCore
|
1537
1537
|
});
|
1538
1538
|
|
1539
|
-
var interactionRender$
|
1539
|
+
var interactionRender$h = [
|
1540
1540
|
{
|
1541
1541
|
title: '点击事件',
|
1542
1542
|
child: [
|
@@ -1758,14 +1758,14 @@
|
|
1758
1758
|
* @Author: binruan@chatlabs.com
|
1759
1759
|
* @Date: 2024-03-12 10:59:06
|
1760
1760
|
* @LastEditors: binruan@chatlabs.com
|
1761
|
-
* @LastEditTime:
|
1761
|
+
* @LastEditTime: 2024-11-28 11:17:16
|
1762
1762
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1763
1763
|
*
|
1764
1764
|
*/
|
1765
1765
|
function useEventReport() {
|
1766
1766
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
1767
1767
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
1768
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13
|
1768
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
|
1769
1769
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
1770
1770
|
if (i !== -1) {
|
1771
1771
|
return;
|
@@ -1798,11 +1798,11 @@
|
|
1798
1798
|
contentFormat = 'image';
|
1799
1799
|
}
|
1800
1800
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1801
|
-
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '',
|
1801
|
+
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', ctatId: (_0 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _0 !== void 0 ? _0 : '', traceInfo: (_13 = (_10 = (_8 = (_4 = (_1 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _1 !== void 0 ? _1 : (_3 = (_2 = data === null || data === void 0 ? void 0 : data.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProducts) === null || _6 === void 0 ? void 0 : _6[0]) === null || _7 === void 0 ? void 0 : _7.traceInfo) !== null && _8 !== void 0 ? _8 : (_9 = data === null || data === void 0 ? void 0 : data.product) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = data === null || data === void 0 ? void 0 : data.video) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '' }, (contentFormat && { contentFormat }))
|
1802
1802
|
});
|
1803
1803
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
1804
1804
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
1805
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p
|
1805
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
1806
1806
|
let fromKName = '';
|
1807
1807
|
if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
|
1808
1808
|
fromKName = 'pdpPage';
|
@@ -1821,9 +1821,8 @@
|
|
1821
1821
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
1822
1822
|
position: position + '',
|
1823
1823
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
1824
|
-
sceneId: (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
1825
1824
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
1826
|
-
traceInfo: (
|
1825
|
+
traceInfo: (_p = (_m = (_h = (_e = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _e !== void 0 ? _e : (_g = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct) === null || _g === void 0 ? void 0 : _g.traceInfo) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
|
1827
1826
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
1828
1827
|
eventSubject: 'productView',
|
1829
1828
|
eventDescription: 'User browsed the product'
|
@@ -1995,7 +1994,7 @@
|
|
1995
1994
|
related: {
|
1996
1995
|
settingRender: settingRender$f,
|
1997
1996
|
bindableProps: [],
|
1998
|
-
interactionRender: interactionRender$
|
1997
|
+
interactionRender: interactionRender$h
|
1999
1998
|
},
|
2000
1999
|
defaulSetting: {
|
2001
2000
|
name: '表单',
|
@@ -10606,7 +10605,7 @@
|
|
10606
10605
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
|
10607
10606
|
*
|
10608
10607
|
*/
|
10609
|
-
var interactionRender$
|
10608
|
+
var interactionRender$g = [
|
10610
10609
|
{
|
10611
10610
|
title: '滑动事件',
|
10612
10611
|
child: [
|
@@ -10634,7 +10633,7 @@
|
|
10634
10633
|
type: 'CommodityDetail',
|
10635
10634
|
related: {
|
10636
10635
|
settingRender: settingRender$e,
|
10637
|
-
interactionRender: interactionRender$
|
10636
|
+
interactionRender: interactionRender$g
|
10638
10637
|
},
|
10639
10638
|
defaulSetting: {
|
10640
10639
|
props: {
|
@@ -10690,7 +10689,7 @@
|
|
10690
10689
|
sort: 1
|
10691
10690
|
});
|
10692
10691
|
|
10693
|
-
var interactionRender$
|
10692
|
+
var interactionRender$f = [
|
10694
10693
|
{
|
10695
10694
|
title: '点击事件',
|
10696
10695
|
child: [
|
@@ -10892,7 +10891,7 @@
|
|
10892
10891
|
related: {
|
10893
10892
|
settingRender: settingRender$d,
|
10894
10893
|
bindableProps: [],
|
10895
|
-
interactionRender: interactionRender$
|
10894
|
+
interactionRender: interactionRender$f
|
10896
10895
|
},
|
10897
10896
|
defaulSetting: {
|
10898
10897
|
props: {
|
@@ -11586,7 +11585,7 @@ Made in Italy` })));
|
|
11586
11585
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
|
11587
11586
|
*
|
11588
11587
|
*/
|
11589
|
-
var interactionRender$
|
11588
|
+
var interactionRender$e = [
|
11590
11589
|
{
|
11591
11590
|
title: '滑动事件',
|
11592
11591
|
child: [
|
@@ -11614,7 +11613,7 @@ Made in Italy` })));
|
|
11614
11613
|
type: 'CommodityDetailDiroNew',
|
11615
11614
|
related: {
|
11616
11615
|
settingRender: settingRender$c,
|
11617
|
-
interactionRender: interactionRender$
|
11616
|
+
interactionRender: interactionRender$e
|
11618
11617
|
},
|
11619
11618
|
defaulSetting: {
|
11620
11619
|
props: {
|
@@ -12088,7 +12087,7 @@ Made in Italy` })));
|
|
12088
12087
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
|
12089
12088
|
*
|
12090
12089
|
*/
|
12091
|
-
var interactionRender$
|
12090
|
+
var interactionRender$d = [
|
12092
12091
|
{
|
12093
12092
|
title: '点击事件',
|
12094
12093
|
child: [
|
@@ -12116,7 +12115,7 @@ Made in Italy` })));
|
|
12116
12115
|
type: 'CommodityList',
|
12117
12116
|
related: {
|
12118
12117
|
settingRender: settingRender$b,
|
12119
|
-
interactionRender: interactionRender$
|
12118
|
+
interactionRender: interactionRender$d
|
12120
12119
|
},
|
12121
12120
|
defaulSetting: {
|
12122
12121
|
props: {
|
@@ -12524,7 +12523,7 @@ Made in Italy` })));
|
|
12524
12523
|
}
|
12525
12524
|
];
|
12526
12525
|
|
12527
|
-
var interactionRender$
|
12526
|
+
var interactionRender$c = [
|
12528
12527
|
{
|
12529
12528
|
title: '点击事件',
|
12530
12529
|
child: [
|
@@ -12578,7 +12577,7 @@ Made in Italy` })));
|
|
12578
12577
|
};
|
12579
12578
|
var EventProvider$1 = React.memo(EventProvider);
|
12580
12579
|
|
12581
|
-
var styles$
|
12580
|
+
var styles$9 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
|
12582
12581
|
|
12583
12582
|
const Commodity$1 = (_a) => {
|
12584
12583
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
@@ -12596,7 +12595,7 @@ Made in Italy` })));
|
|
12596
12595
|
width: '100%',
|
12597
12596
|
overflow: 'hidden'
|
12598
12597
|
}) },
|
12599
|
-
React.createElement("div", { className: styles$
|
12598
|
+
React.createElement("div", { className: styles$9['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
12600
12599
|
__html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
12601
12600
|
} }),
|
12602
12601
|
React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_m = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _m === void 0 ? void 0 : _m.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
@@ -12619,7 +12618,7 @@ Made in Italy` })));
|
|
12619
12618
|
category: 'template',
|
12620
12619
|
type: 'Commodity',
|
12621
12620
|
related: {
|
12622
|
-
interactionRender: interactionRender$
|
12621
|
+
interactionRender: interactionRender$c,
|
12623
12622
|
bindableProps: [],
|
12624
12623
|
settingRender: settingRender$8
|
12625
12624
|
},
|
@@ -12661,7 +12660,7 @@ Made in Italy` })));
|
|
12661
12660
|
sort: 1
|
12662
12661
|
});
|
12663
12662
|
|
12664
|
-
var interactionRender$
|
12663
|
+
var interactionRender$b = [
|
12665
12664
|
{
|
12666
12665
|
title: '点击事件',
|
12667
12666
|
child: [
|
@@ -12702,7 +12701,7 @@ Made in Italy` })));
|
|
12702
12701
|
category: 'template',
|
12703
12702
|
type: 'Appoint',
|
12704
12703
|
related: {
|
12705
|
-
interactionRender: interactionRender$
|
12704
|
+
interactionRender: interactionRender$b,
|
12706
12705
|
settingRender: settingRender$8 === null || settingRender$8 === void 0 ? void 0 : settingRender$8.filter((i) => i.type !== 'commodityTitle'),
|
12707
12706
|
bindableProps: []
|
12708
12707
|
},
|
@@ -12854,7 +12853,7 @@ Made in Italy` })));
|
|
12854
12853
|
}
|
12855
12854
|
];
|
12856
12855
|
|
12857
|
-
var styles$
|
12856
|
+
var styles$8 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__nkBlU","one-line-ellipsis":"index-module_one-line-ellipsis__buFw1"};
|
12858
12857
|
|
12859
12858
|
const Link$1 = (_a) => {
|
12860
12859
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
@@ -12872,10 +12871,10 @@ Made in Italy` })));
|
|
12872
12871
|
overflow: 'hidden'
|
12873
12872
|
}) },
|
12874
12873
|
React.createElement("div", null,
|
12875
|
-
React.createElement("div", { className: styles$
|
12874
|
+
React.createElement("div", { className: styles$8['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
|
12876
12875
|
__html: setFontForText((_j = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
12877
12876
|
} }),
|
12878
|
-
(customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_k = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _k === void 0 ? void 0 : _k.height) + 'px' }), className: styles$
|
12877
|
+
(customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_k = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _k === void 0 ? void 0 : _k.height) + 'px' }), className: styles$8['one-line-ellipsis'], dangerouslySetInnerHTML: {
|
12879
12878
|
__html: setFontForText(customTitle === null || customTitle === void 0 ? void 0 : customTitle.text, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style)
|
12880
12879
|
} }))))));
|
12881
12880
|
};
|
@@ -12889,7 +12888,7 @@ Made in Italy` })));
|
|
12889
12888
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\template\Link\interactionRender.tsx
|
12890
12889
|
*
|
12891
12890
|
*/
|
12892
|
-
var interactionRender$
|
12891
|
+
var interactionRender$a = [
|
12893
12892
|
{
|
12894
12893
|
title: '点击事件',
|
12895
12894
|
child: [
|
@@ -12911,7 +12910,7 @@ Made in Italy` })));
|
|
12911
12910
|
related: {
|
12912
12911
|
settingRender: (_a = settingRender$8 === null || settingRender$8 === void 0 ? void 0 : settingRender$8.filter((i) => i.type !== 'commodityTitle')) === null || _a === void 0 ? void 0 : _a.concat(linkSettingRender),
|
12913
12912
|
bindableProps: [],
|
12914
|
-
interactionRender: interactionRender$
|
12913
|
+
interactionRender: interactionRender$a
|
12915
12914
|
},
|
12916
12915
|
defaulSetting: {
|
12917
12916
|
props: {
|
@@ -12957,7 +12956,7 @@ Made in Italy` })));
|
|
12957
12956
|
sort: 5
|
12958
12957
|
});
|
12959
12958
|
|
12960
|
-
var interactionRender$
|
12959
|
+
var interactionRender$9 = [
|
12961
12960
|
{
|
12962
12961
|
title: '点击事件',
|
12963
12962
|
child: [
|
@@ -12970,7 +12969,7 @@ Made in Italy` })));
|
|
12970
12969
|
}
|
12971
12970
|
];
|
12972
12971
|
|
12973
|
-
var styles$
|
12972
|
+
var styles$7 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
|
12974
12973
|
|
12975
12974
|
const CommodityDiro$1 = (_a) => {
|
12976
12975
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
@@ -12988,7 +12987,7 @@ Made in Italy` })));
|
|
12988
12987
|
width: '100%',
|
12989
12988
|
overflow: 'hidden'
|
12990
12989
|
}) },
|
12991
|
-
React.createElement("div", { className: styles$
|
12990
|
+
React.createElement("div", { className: styles$7['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
12992
12991
|
__html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
12993
12992
|
} }),
|
12994
12993
|
React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_m = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _m === void 0 ? void 0 : _m.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
@@ -13011,7 +13010,7 @@ Made in Italy` })));
|
|
13011
13010
|
category: 'template',
|
13012
13011
|
type: 'CommodityDiro',
|
13013
13012
|
related: {
|
13014
|
-
interactionRender: interactionRender$
|
13013
|
+
interactionRender: interactionRender$9,
|
13015
13014
|
settingRender: settingRender$8,
|
13016
13015
|
bindableProps: []
|
13017
13016
|
},
|
@@ -13053,7 +13052,7 @@ Made in Italy` })));
|
|
13053
13052
|
sort: 2
|
13054
13053
|
});
|
13055
13054
|
|
13056
|
-
var interactionRender$
|
13055
|
+
var interactionRender$8 = [
|
13057
13056
|
{
|
13058
13057
|
title: '点击事件',
|
13059
13058
|
child: [
|
@@ -13066,7 +13065,7 @@ Made in Italy` })));
|
|
13066
13065
|
}
|
13067
13066
|
];
|
13068
13067
|
|
13069
|
-
var styles$
|
13068
|
+
var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
|
13070
13069
|
|
13071
13070
|
const CommodityDiroNew$1 = (_a) => {
|
13072
13071
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
@@ -13084,7 +13083,7 @@ Made in Italy` })));
|
|
13084
13083
|
width: '100%',
|
13085
13084
|
overflow: 'hidden'
|
13086
13085
|
}) },
|
13087
|
-
React.createElement("div", { className: styles$
|
13086
|
+
React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
13088
13087
|
__html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
13089
13088
|
} }),
|
13090
13089
|
React.createElement("button", { "aria-label": (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
@@ -13107,7 +13106,7 @@ Made in Italy` })));
|
|
13107
13106
|
category: 'template',
|
13108
13107
|
type: 'CommodityDiroNew',
|
13109
13108
|
related: {
|
13110
|
-
interactionRender: interactionRender$
|
13109
|
+
interactionRender: interactionRender$8,
|
13111
13110
|
bindableProps: [],
|
13112
13111
|
settingRender: settingRender$8
|
13113
13112
|
},
|
@@ -13150,7 +13149,7 @@ Made in Italy` })));
|
|
13150
13149
|
sort: 2
|
13151
13150
|
});
|
13152
13151
|
|
13153
|
-
var interactionRender$
|
13152
|
+
var interactionRender$7 = [
|
13154
13153
|
{
|
13155
13154
|
title: '点击事件',
|
13156
13155
|
child: [
|
@@ -13163,7 +13162,7 @@ Made in Italy` })));
|
|
13163
13162
|
}
|
13164
13163
|
];
|
13165
13164
|
|
13166
|
-
var styles$
|
13165
|
+
var styles$5 = {"two-line-ellipsis":"index-module_two-line-ellipsis__SFQwJ"};
|
13167
13166
|
|
13168
13167
|
const MultiCommodityDiro$1 = (_a) => {
|
13169
13168
|
var _b, _c;
|
@@ -13183,7 +13182,7 @@ Made in Italy` })));
|
|
13183
13182
|
width: '100%',
|
13184
13183
|
overflow: 'hidden'
|
13185
13184
|
}) },
|
13186
|
-
React.createElement("div", { className: styles$
|
13185
|
+
React.createElement("div", { className: styles$5['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
13187
13186
|
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
13188
13187
|
} }),
|
13189
13188
|
React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_h = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _h === void 0 ? void 0 : _h.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
@@ -13207,7 +13206,7 @@ Made in Italy` })));
|
|
13207
13206
|
category: 'template',
|
13208
13207
|
type: 'MultiCommodityDiro',
|
13209
13208
|
related: {
|
13210
|
-
interactionRender: interactionRender$
|
13209
|
+
interactionRender: interactionRender$7,
|
13211
13210
|
bindableProps: [],
|
13212
13211
|
settingRender: settingRender$8
|
13213
13212
|
},
|
@@ -13249,7 +13248,7 @@ Made in Italy` })));
|
|
13249
13248
|
sort: 4
|
13250
13249
|
});
|
13251
13250
|
|
13252
|
-
var interactionRender$
|
13251
|
+
var interactionRender$6 = [
|
13253
13252
|
{
|
13254
13253
|
title: '点击事件',
|
13255
13254
|
child: [
|
@@ -13262,7 +13261,7 @@ Made in Italy` })));
|
|
13262
13261
|
}
|
13263
13262
|
];
|
13264
13263
|
|
13265
|
-
var styles$
|
13264
|
+
var styles$4 = {"two-line-ellipsis":"index-module_two-line-ellipsis__mdzn0"};
|
13266
13265
|
|
13267
13266
|
const MultiCommodity$1 = (_a) => {
|
13268
13267
|
var _b, _c;
|
@@ -13282,7 +13281,7 @@ Made in Italy` })));
|
|
13282
13281
|
width: '100%',
|
13283
13282
|
overflow: 'hidden'
|
13284
13283
|
}) },
|
13285
|
-
React.createElement("div", { className: styles$
|
13284
|
+
React.createElement("div", { className: styles$4['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
13286
13285
|
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
13287
13286
|
} }),
|
13288
13287
|
React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_h = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _h === void 0 ? void 0 : _h.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
@@ -13306,7 +13305,7 @@ Made in Italy` })));
|
|
13306
13305
|
category: 'template',
|
13307
13306
|
type: 'MultiCommodity',
|
13308
13307
|
related: {
|
13309
|
-
interactionRender: interactionRender$
|
13308
|
+
interactionRender: interactionRender$6,
|
13310
13309
|
settingRender: settingRender$8,
|
13311
13310
|
bindableProps: []
|
13312
13311
|
},
|
@@ -13356,7 +13355,7 @@ Made in Italy` })));
|
|
13356
13355
|
* @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodityDiroNew\interactionRender.tsx
|
13357
13356
|
*
|
13358
13357
|
*/
|
13359
|
-
var interactionRender$
|
13358
|
+
var interactionRender$5 = [
|
13360
13359
|
{
|
13361
13360
|
title: '点击事件',
|
13362
13361
|
child: [
|
@@ -13369,7 +13368,7 @@ Made in Italy` })));
|
|
13369
13368
|
}
|
13370
13369
|
];
|
13371
13370
|
|
13372
|
-
var styles$
|
13371
|
+
var styles$3 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__fselR"};
|
13373
13372
|
|
13374
13373
|
const MultiCommodityDiroNew$1 = (_a) => {
|
13375
13374
|
var _b, _c;
|
@@ -13390,7 +13389,7 @@ Made in Italy` })));
|
|
13390
13389
|
overflow: 'hidden',
|
13391
13390
|
lineHeight: '20px'
|
13392
13391
|
}) },
|
13393
|
-
React.createElement("div", { className: styles$
|
13392
|
+
React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
|
13394
13393
|
__html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
|
13395
13394
|
} }),
|
13396
13395
|
React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
|
@@ -13414,7 +13413,7 @@ Made in Italy` })));
|
|
13414
13413
|
category: 'template',
|
13415
13414
|
type: 'MultiCommodityDiroNew',
|
13416
13415
|
related: {
|
13417
|
-
interactionRender: interactionRender$
|
13416
|
+
interactionRender: interactionRender$5,
|
13418
13417
|
bindableProps: [],
|
13419
13418
|
settingRender: settingRender$8
|
13420
13419
|
},
|
@@ -13457,6 +13456,110 @@ Made in Italy` })));
|
|
13457
13456
|
sort: 4
|
13458
13457
|
});
|
13459
13458
|
|
13459
|
+
var interactionRender$4 = [
|
13460
|
+
{
|
13461
|
+
title: '点击事件',
|
13462
|
+
child: [
|
13463
|
+
{
|
13464
|
+
type: 'link',
|
13465
|
+
name: 'onClick',
|
13466
|
+
hiddenUrl: true
|
13467
|
+
}
|
13468
|
+
]
|
13469
|
+
}
|
13470
|
+
];
|
13471
|
+
|
13472
|
+
var styles$2 = {"two-line-ellipsis":"index-module_two-line-ellipsis__Mehkq","nineProduct":"index-module_nineProduct__jXbfu","gridContainer":"index-module_gridContainer__eEG-d","gridItem":"index-module_gridItem__KrJP6","gridBox":"index-module_gridBox__fS-fT","buttonWrapper":"index-module_buttonWrapper__jGJE7","rotate":"index-module_rotate__5zJec"};
|
13473
|
+
|
13474
|
+
const NineCommodity$1 = (_a) => {
|
13475
|
+
var _b, _c;
|
13476
|
+
var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
|
13477
|
+
const { sxpParameter } = useSxpDataSource();
|
13478
|
+
const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [{}, {}, {}, {}, {}, {}, {}, {}, {}]);
|
13479
|
+
return (React.createElement("div", { className: styles$2.nineProduct },
|
13480
|
+
React.createElement("div", { className: styles$2.gridContainer }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13481
|
+
var _a, _b, _c, _d, _e, _f;
|
13482
|
+
if (itemIndex < 9) {
|
13483
|
+
return (React.createElement(React.Fragment, { key: itemIndex }, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement("div", { className: styles$2.gridItem, role: 'listitem' },
|
13484
|
+
React.createElement("div", { className: styles$2.gridBox },
|
13485
|
+
React.createElement(EventProvider$1, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, props, { style: {
|
13486
|
+
flexDirection: 'column',
|
13487
|
+
width: '100%',
|
13488
|
+
height: 'auto'
|
13489
|
+
} }),
|
13490
|
+
React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: {
|
13491
|
+
aspectRatio: '1/1',
|
13492
|
+
objectFit: 'cover',
|
13493
|
+
width: '100%',
|
13494
|
+
display: 'block'
|
13495
|
+
}, isActive: isActive }),
|
13496
|
+
React.createElement("div", { className: styles$2.buttonWrapper, "aria-label": (_f = (_e = item === null || item === void 0 ? void 0 : item.bindCta) === null || _e === void 0 ? void 0 : _e.enTitle) !== null && _f !== void 0 ? _f : 'Shop Now', dangerouslySetInnerHTML: {
|
13497
|
+
__html: setFontForText("item?.bindCta?.enTitle ?? 'Shop Now', ctaTempStyles?.ctaTitle")
|
13498
|
+
} })))))));
|
13499
|
+
}
|
13500
|
+
else {
|
13501
|
+
return null;
|
13502
|
+
}
|
13503
|
+
}))));
|
13504
|
+
};
|
13505
|
+
var NineCommodityComponent = React.memo(NineCommodity$1);
|
13506
|
+
|
13507
|
+
/*
|
13508
|
+
* @Author: binruan@chatlabs.com
|
13509
|
+
* @Date: 2023-07-28 18:29:57
|
13510
|
+
* @LastEditors: binruan@chatlabs.com
|
13511
|
+
* @LastEditTime: 2024-03-29 16:43:35
|
13512
|
+
* @FilePath: \pb-sxp-ui\src\materials\sxp\template\NineCommodity\material.tsx
|
13513
|
+
*
|
13514
|
+
*/
|
13515
|
+
const NineCommodity = createMaterial(NineCommodityComponent, {
|
13516
|
+
displayName: '推荐多商品-透明底',
|
13517
|
+
icon: '',
|
13518
|
+
category: 'template',
|
13519
|
+
type: 'NineCommodity',
|
13520
|
+
related: {
|
13521
|
+
interactionRender: interactionRender$4,
|
13522
|
+
settingRender: settingRender$8,
|
13523
|
+
bindableProps: []
|
13524
|
+
},
|
13525
|
+
defaulSetting: {
|
13526
|
+
props: {
|
13527
|
+
ctaTempStyles: {
|
13528
|
+
img: {
|
13529
|
+
borderRadius: 3,
|
13530
|
+
width: 60,
|
13531
|
+
height: 60,
|
13532
|
+
marginRight: 8
|
13533
|
+
},
|
13534
|
+
title: {
|
13535
|
+
fontSize: 12,
|
13536
|
+
color: '#fff',
|
13537
|
+
textAlign: 'left'
|
13538
|
+
},
|
13539
|
+
ctaTitle: {
|
13540
|
+
fontSize: 10,
|
13541
|
+
color: '#fff',
|
13542
|
+
textAlign: 'center',
|
13543
|
+
width: 130,
|
13544
|
+
height: 20,
|
13545
|
+
backgroundColor: 'rgba(0,0,0,.5)'
|
13546
|
+
}
|
13547
|
+
}
|
13548
|
+
},
|
13549
|
+
style: {
|
13550
|
+
padding: 7,
|
13551
|
+
width: 236,
|
13552
|
+
height: 74,
|
13553
|
+
borderRadius: 3,
|
13554
|
+
backgroundColor: 'rgba(0,0,0,.3)',
|
13555
|
+
marginBottom: 8
|
13556
|
+
}
|
13557
|
+
},
|
13558
|
+
w: 100,
|
13559
|
+
h: 40,
|
13560
|
+
sort: 3
|
13561
|
+
});
|
13562
|
+
|
13460
13563
|
/*
|
13461
13564
|
* @Author: binruan@chatlabs.com
|
13462
13565
|
* @Date: 2024-04-07 14:07:12
|
@@ -15520,7 +15623,7 @@ Made in Italy` })));
|
|
15520
15623
|
* @Author: binruan@chatlabs.com
|
15521
15624
|
* @Date: 2024-01-10 10:58:24
|
15522
15625
|
* @LastEditors: binruan@chatlabs.com
|
15523
|
-
* @LastEditTime: 2025-
|
15626
|
+
* @LastEditTime: 2025-02-28 10:00:31
|
15524
15627
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15525
15628
|
*
|
15526
15629
|
*/
|
@@ -15558,7 +15661,7 @@ Made in Italy` })));
|
|
15558
15661
|
}
|
15559
15662
|
}, [waterFallData]);
|
15560
15663
|
const reportTagsView = React.useCallback(() => {
|
15561
|
-
var _a, _b, _c, _d, _e, _f
|
15664
|
+
var _a, _b, _c, _d, _e, _f;
|
15562
15665
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15563
15666
|
if (!rec)
|
15564
15667
|
return;
|
@@ -15578,10 +15681,9 @@ Made in Italy` })));
|
|
15578
15681
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15579
15682
|
eventInfo: {
|
15580
15683
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
15581
|
-
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 : '',
|
15582
15684
|
position: cacheActiveIndex + '',
|
15583
|
-
contentTags: JSON.stringify((
|
15584
|
-
traceInfo: (
|
15685
|
+
contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
|
15686
|
+
traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
|
15585
15687
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15586
15688
|
fromKName,
|
15587
15689
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17648,6 +17750,7 @@ Made in Italy` })));
|
|
17648
17750
|
MultiCommodityDiro: MultiCommodityDiro,
|
17649
17751
|
MultiCommodityDiroNew: MultiCommodityDiroNew,
|
17650
17752
|
MultiPosts: MultiPosts,
|
17753
|
+
NineCommodity: NineCommodity,
|
17651
17754
|
Prompt: Prompt,
|
17652
17755
|
Swipe: Swipe
|
17653
17756
|
});
|
@@ -17662,7 +17765,7 @@ Made in Italy` })));
|
|
17662
17765
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17663
17766
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17664
17767
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
17665
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z
|
17768
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17666
17769
|
if (state) {
|
17667
17770
|
// 先设置状态
|
17668
17771
|
setState(false);
|
@@ -17672,12 +17775,11 @@ Made in Italy` })));
|
|
17672
17775
|
eventSubject: 'favoriteContentCanceled',
|
17673
17776
|
eventDescription: 'This content was unfavorite by the user',
|
17674
17777
|
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 : '',
|
17675
|
-
|
17676
|
-
|
17677
|
-
contentTags: JSON.stringify((_p = (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []),
|
17778
|
+
contentName: (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '',
|
17779
|
+
contentTags: JSON.stringify((_l = (_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.tags) !== null && _l !== void 0 ? _l : []),
|
17678
17780
|
position: position + '',
|
17679
|
-
contentFormat: ((
|
17680
|
-
traceInfo: (
|
17781
|
+
contentFormat: ((_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.url) ? 'video' : 'image',
|
17782
|
+
traceInfo: (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
17681
17783
|
}
|
17682
17784
|
});
|
17683
17785
|
// 如果接口调用失败,则回滚状态
|
@@ -17685,41 +17787,40 @@ Made in Italy` })));
|
|
17685
17787
|
setState(true);
|
17686
17788
|
}
|
17687
17789
|
else {
|
17688
|
-
const nRtcList = (
|
17790
|
+
const nRtcList = (_p = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17689
17791
|
if (index === position) {
|
17690
17792
|
item.isCollected = false;
|
17691
17793
|
}
|
17692
17794
|
return item;
|
17693
|
-
})) !== null &&
|
17795
|
+
})) !== null && _p !== void 0 ? _p : [];
|
17694
17796
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17695
17797
|
}
|
17696
17798
|
}
|
17697
17799
|
else {
|
17698
17800
|
setState(true);
|
17699
|
-
const result = (
|
17801
|
+
const result = (_q = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _q !== void 0 ? _q : false;
|
17700
17802
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17701
17803
|
eventInfo: {
|
17702
17804
|
eventSubject: 'favoriteContent',
|
17703
17805
|
eventDescription: 'This content was favorite by the user',
|
17704
|
-
contentId: (
|
17705
|
-
|
17706
|
-
|
17707
|
-
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 : []),
|
17806
|
+
contentId: (_s = (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
|
17807
|
+
contentName: (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.title) !== null && _u !== void 0 ? _u : '',
|
17808
|
+
contentTags: JSON.stringify((_w = (_v = recData === null || recData === void 0 ? void 0 : recData.video) === null || _v === void 0 ? void 0 : _v.tags) !== null && _w !== void 0 ? _w : []),
|
17708
17809
|
position: position + '',
|
17709
|
-
contentFormat: ((
|
17710
|
-
traceInfo: (
|
17810
|
+
contentFormat: ((_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.url) ? 'video' : 'image',
|
17811
|
+
traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
|
17711
17812
|
}
|
17712
17813
|
});
|
17713
17814
|
if (!result) {
|
17714
17815
|
setState(false);
|
17715
17816
|
}
|
17716
17817
|
else {
|
17717
|
-
const nRtcList = (
|
17818
|
+
const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17718
17819
|
if (index === position) {
|
17719
17820
|
item.isCollected = true;
|
17720
17821
|
}
|
17721
17822
|
return item;
|
17722
|
-
})) !== null &&
|
17823
|
+
})) !== null && _z !== void 0 ? _z : [];
|
17723
17824
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17724
17825
|
}
|
17725
17826
|
}
|
@@ -17822,26 +17923,6 @@ Made in Italy` })));
|
|
17822
17923
|
return;
|
17823
17924
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17824
17925
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17825
|
-
const handleEnd = () => {
|
17826
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
17827
|
-
if (!videoRef.current)
|
17828
|
-
return;
|
17829
|
-
if (isDiyH5) {
|
17830
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
17831
|
-
if (!loopPlayRef.current)
|
17832
|
-
return;
|
17833
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
17834
|
-
(_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);
|
17835
|
-
}
|
17836
|
-
else {
|
17837
|
-
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;
|
17838
|
-
(_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);
|
17839
|
-
}
|
17840
|
-
}
|
17841
|
-
else {
|
17842
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
|
17843
|
-
}
|
17844
|
-
};
|
17845
17926
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
17846
17927
|
const handlePlaying = React.useCallback(() => {
|
17847
17928
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -17850,7 +17931,7 @@ Made in Italy` })));
|
|
17850
17931
|
setIsLoadFinish(true);
|
17851
17932
|
}, []);
|
17852
17933
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17853
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q
|
17934
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
17854
17935
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17855
17936
|
return;
|
17856
17937
|
setIsPauseVideo(false);
|
@@ -17861,11 +17942,16 @@ Made in Italy` })));
|
|
17861
17942
|
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);
|
17862
17943
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17863
17944
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17864
|
-
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 : '',
|
17945
|
+
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', contentName: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []), position: index + '', contentFormat: 'video', traceInfo: (_q = item === null || item === void 0 ? void 0 : item.video) === null || _q === void 0 ? void 0 : _q.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
|
17865
17946
|
});
|
17866
17947
|
isFirstPlayRef.current = false;
|
17867
17948
|
}
|
17868
17949
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17950
|
+
const setCurrentTimeByStartTime = React.useCallback(() => {
|
17951
|
+
if (isDiyH5) {
|
17952
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17953
|
+
}
|
17954
|
+
}, []);
|
17869
17955
|
const handLoadeddata = React.useCallback(() => {
|
17870
17956
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17871
17957
|
return;
|
@@ -17890,12 +17976,13 @@ Made in Italy` })));
|
|
17890
17976
|
const handleLoadedmetadata = React.useCallback(() => {
|
17891
17977
|
if (!videoRef.current)
|
17892
17978
|
return;
|
17979
|
+
setCurrentTimeByStartTime();
|
17893
17980
|
loadedTimeRef.current = new Date();
|
17894
17981
|
handleStartPlay();
|
17895
17982
|
handLoadeddata();
|
17896
17983
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
17897
17984
|
const handleClickVideo = React.useCallback((type) => () => {
|
17898
|
-
var _a, _b, _c, _d, _e;
|
17985
|
+
var _a, _b, _c, _d, _e, _f;
|
17899
17986
|
if (!videoRef.current)
|
17900
17987
|
return;
|
17901
17988
|
if (!isLoadFinish)
|
@@ -17916,17 +18003,20 @@ Made in Italy` })));
|
|
17916
18003
|
break;
|
17917
18004
|
default:
|
17918
18005
|
if (isPause) {
|
17919
|
-
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.
|
18006
|
+
if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
|
18007
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18008
|
+
}
|
18009
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
17920
18010
|
}
|
17921
18011
|
else {
|
17922
|
-
(
|
18012
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
17923
18013
|
}
|
17924
18014
|
setIsPauseVideo(!isPause);
|
17925
18015
|
break;
|
17926
18016
|
}
|
17927
18017
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17928
18018
|
const handlePause = React.useCallback(() => {
|
17929
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
18019
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
17930
18020
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17931
18021
|
return;
|
17932
18022
|
if (activeIndex !== index)
|
@@ -17942,15 +18032,14 @@ Made in Italy` })));
|
|
17942
18032
|
eventSubject: 'playOverVideo',
|
17943
18033
|
eventDescription: 'User finished playing the video',
|
17944
18034
|
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 : '',
|
17945
|
-
|
17946
|
-
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 : '',
|
18035
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
17947
18036
|
endTime: videoCurrentTime,
|
17948
18037
|
videoDuration,
|
17949
18038
|
playDuration,
|
17950
|
-
contentTags: JSON.stringify((
|
18039
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
17951
18040
|
position: index + '',
|
17952
18041
|
contentFormat: 'video',
|
17953
|
-
traceInfo: (
|
18042
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
17954
18043
|
}
|
17955
18044
|
});
|
17956
18045
|
}
|
@@ -17958,8 +18047,27 @@ Made in Italy` })));
|
|
17958
18047
|
const handleWaiting = React.useCallback(() => {
|
17959
18048
|
setWaiting(true);
|
17960
18049
|
}, []);
|
18050
|
+
const handleTimeUpload = () => {
|
18051
|
+
if (!videoRef.current || !isDiyH5)
|
18052
|
+
return;
|
18053
|
+
setTimeout(() => {
|
18054
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18055
|
+
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)) {
|
18056
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18057
|
+
if (!loopPlayRef.current)
|
18058
|
+
return;
|
18059
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18060
|
+
(_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);
|
18061
|
+
}
|
18062
|
+
else {
|
18063
|
+
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;
|
18064
|
+
(_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);
|
18065
|
+
}
|
18066
|
+
}
|
18067
|
+
});
|
18068
|
+
};
|
17961
18069
|
React.useEffect(() => {
|
17962
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18070
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
17963
18071
|
if (!isActive)
|
17964
18072
|
return;
|
17965
18073
|
const videoSrc = videoUrl;
|
@@ -17980,6 +18088,7 @@ Made in Italy` })));
|
|
17980
18088
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
17981
18089
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
17982
18090
|
var _a;
|
18091
|
+
setCurrentTimeByStartTime();
|
17983
18092
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17984
18093
|
});
|
17985
18094
|
}
|
@@ -17993,11 +18102,12 @@ Made in Italy` })));
|
|
17993
18102
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
17994
18103
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
17995
18104
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
17996
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
18105
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
|
17997
18106
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
17998
18107
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18108
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
17999
18109
|
return () => {
|
18000
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18110
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
18001
18111
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18002
18112
|
if (!isPause)
|
18003
18113
|
handlePause();
|
@@ -18009,9 +18119,10 @@ Made in Italy` })));
|
|
18009
18119
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18010
18120
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18011
18121
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
18012
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
18122
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
|
18013
18123
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18014
18124
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18125
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18015
18126
|
};
|
18016
18127
|
}, [isActive]);
|
18017
18128
|
React.useEffect(() => {
|
@@ -18222,43 +18333,19 @@ Made in Italy` })));
|
|
18222
18333
|
}, onLoad: onShowFirstImage }))));
|
18223
18334
|
};
|
18224
18335
|
|
18225
|
-
const PictureGroup$4 =
|
18336
|
+
const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
18226
18337
|
var _a, _b;
|
18227
18338
|
const { isActive } = useSwiperSlide();
|
18228
|
-
const { sxpParameter, openHashtag
|
18339
|
+
const { sxpParameter, openHashtag } = useSxpDataSource();
|
18229
18340
|
const [isLoad, setIsLoad] = React.useState(false);
|
18230
18341
|
const [imgInfo, setImgInfo] = React.useState();
|
18231
18342
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
18232
|
-
const
|
18343
|
+
const swiperRef = React.useRef();
|
18233
18344
|
const isFirstPlayRef = React.useRef(true);
|
18234
|
-
const loopPlayRef = React.useRef(true);
|
18235
18345
|
const initTime = new Date();
|
18236
|
-
React.useImperativeHandle(ref, () => {
|
18237
|
-
return {
|
18238
|
-
setLoopPlay(v) {
|
18239
|
-
loopPlayRef.current = v;
|
18240
|
-
}
|
18241
|
-
};
|
18242
|
-
});
|
18243
|
-
React.useEffect(() => {
|
18244
|
-
if (isLoad && isActive && isDiyH5) {
|
18245
|
-
setTimeout(() => {
|
18246
|
-
var _a, _b, _c, _d, _e, _f;
|
18247
|
-
if (!loopPlayRef.current)
|
18248
|
-
return;
|
18249
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18250
|
-
(_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);
|
18251
|
-
}
|
18252
|
-
else {
|
18253
|
-
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;
|
18254
|
-
(_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);
|
18255
|
-
}
|
18256
|
-
}, 3000);
|
18257
|
-
}
|
18258
|
-
}, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
|
18259
18346
|
React.useEffect(() => {
|
18260
18347
|
if (isLoad && isActive) {
|
18261
|
-
(
|
18348
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
|
18262
18349
|
if (openHashtag) {
|
18263
18350
|
onViewImageEndEvent(rec);
|
18264
18351
|
}
|
@@ -18268,7 +18355,7 @@ Made in Italy` })));
|
|
18268
18355
|
}
|
18269
18356
|
}
|
18270
18357
|
else {
|
18271
|
-
(
|
18358
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
|
18272
18359
|
}
|
18273
18360
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18274
18361
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18295,13 +18382,13 @@ Made in Italy` })));
|
|
18295
18382
|
};
|
18296
18383
|
}, [isActive, imgInfo]);
|
18297
18384
|
const handleMouseEnter = React.useCallback(() => {
|
18298
|
-
if (
|
18299
|
-
|
18385
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
18386
|
+
swiperRef.current.swiper.autoplay.stop();
|
18300
18387
|
}
|
18301
18388
|
}, []);
|
18302
18389
|
const handleMouseLeave = React.useCallback(() => {
|
18303
|
-
if (
|
18304
|
-
|
18390
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
18391
|
+
swiperRef.current.swiper.autoplay.start();
|
18305
18392
|
}
|
18306
18393
|
}, []);
|
18307
18394
|
const handleSlideChange = React.useCallback((swiper) => {
|
@@ -18322,7 +18409,7 @@ Made in Italy` })));
|
|
18322
18409
|
enabled: true
|
18323
18410
|
}
|
18324
18411
|
}
|
18325
|
-
: {}), { loop: true, ref:
|
18412
|
+
: {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18326
18413
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18327
18414
|
fontSize: '14px'
|
18328
18415
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18339,7 +18426,7 @@ Made in Italy` })));
|
|
18339
18426
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18340
18427
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18341
18428
|
}))));
|
18342
|
-
}
|
18429
|
+
};
|
18343
18430
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
18344
18431
|
|
18345
18432
|
/*
|
@@ -18460,16 +18547,16 @@ Made in Italy` })));
|
|
18460
18547
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18461
18548
|
*
|
18462
18549
|
*/
|
18463
|
-
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value }) => {
|
18550
|
+
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value, isNineProduct }) => {
|
18464
18551
|
const { schema } = useEditor();
|
18465
18552
|
if (!(rec === null || rec === void 0 ? void 0 : rec.video))
|
18466
18553
|
return null;
|
18467
18554
|
const renderComp = React.useMemo(() => {
|
18468
18555
|
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;
|
18469
|
-
|
18556
|
+
// 如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
|
18470
18557
|
if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
|
18471
18558
|
return;
|
18472
|
-
|
18559
|
+
// 默认不渲染category为cta类型的组件,该类型的组件只用于某一处
|
18473
18560
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
18474
18561
|
return;
|
18475
18562
|
if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
|
@@ -18482,14 +18569,14 @@ Made in Italy` })));
|
|
18482
18569
|
return null;
|
18483
18570
|
}
|
18484
18571
|
if (value && resolver) {
|
18485
|
-
const t = resolver[(_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
|
18572
|
+
const t = resolver[isNineProduct ? 'NineCommodity' : (_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
|
18486
18573
|
const Component = withBindDataSource(t);
|
18487
18574
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
18488
18575
|
const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
|
18489
|
-
|
18576
|
+
const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
18490
18577
|
if (style.hasOwnProperty('backdropFilter')) {
|
18491
|
-
|
18492
|
-
style
|
18578
|
+
const sbf = style.backdropFilter;
|
18579
|
+
style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
18493
18580
|
}
|
18494
18581
|
return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
|
18495
18582
|
}
|
@@ -18619,7 +18706,7 @@ Made in Italy` })));
|
|
18619
18706
|
* @Author: binruan@chatlabs.com
|
18620
18707
|
* @Date: 2024-03-20 10:27:31
|
18621
18708
|
* @LastEditors: binruan@chatlabs.com
|
18622
|
-
* @LastEditTime: 2025-05-
|
18709
|
+
* @LastEditTime: 2025-05-09 15:51:40
|
18623
18710
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18624
18711
|
*
|
18625
18712
|
*/
|
@@ -18639,7 +18726,6 @@ Made in Italy` })));
|
|
18639
18726
|
const skipLinkRef = React.useRef(false);
|
18640
18727
|
const [pageNum, setPageNum] = React.useState(2);
|
18641
18728
|
const videoWidgetRef = React.useRef(null);
|
18642
|
-
const pictureGroupRef = React.useRef(null);
|
18643
18729
|
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();
|
18644
18730
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18645
18731
|
const isShowFingerTip = React.useMemo(() => {
|
@@ -18687,7 +18773,7 @@ Made in Italy` })));
|
|
18687
18773
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18688
18774
|
}, [data, ctaType, swiperRef]);
|
18689
18775
|
const handleSessionCompleted = React.useCallback((fk) => {
|
18690
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v
|
18776
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18691
18777
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18692
18778
|
let fromKName = '';
|
18693
18779
|
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))) {
|
@@ -18714,13 +18800,12 @@ Made in Italy` })));
|
|
18714
18800
|
eventSubject: 'sessionCompleted',
|
18715
18801
|
eventDescription: 'Session completed',
|
18716
18802
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18717
|
-
|
18718
|
-
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18803
|
+
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
18719
18804
|
position: activeIndex + '',
|
18720
18805
|
fromKName: fk || fromKName,
|
18721
18806
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18722
|
-
ctatId: (
|
18723
|
-
traceInfo: (
|
18807
|
+
ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
18808
|
+
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : ''
|
18724
18809
|
}
|
18725
18810
|
});
|
18726
18811
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -18779,9 +18864,8 @@ Made in Italy` })));
|
|
18779
18864
|
refreshFeSession
|
18780
18865
|
]);
|
18781
18866
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
18782
|
-
var _a
|
18867
|
+
var _a;
|
18783
18868
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
18784
|
-
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
18785
18869
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18786
18870
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18787
18871
|
React.useEffect(() => {
|
@@ -18851,18 +18935,18 @@ Made in Italy` })));
|
|
18851
18935
|
return null;
|
18852
18936
|
}, [globalConfig, activeIndex, visList]);
|
18853
18937
|
const renderContent = React.useCallback((rec, index) => {
|
18854
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18938
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18855
18939
|
if (rec === 'organic menu') {
|
18856
18940
|
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)));
|
18857
18941
|
}
|
18858
|
-
if ((
|
18942
|
+
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
18859
18943
|
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 })));
|
18860
18944
|
}
|
18861
|
-
if ((
|
18862
|
-
return (React.createElement(PictureGroup$5,
|
18945
|
+
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
18946
|
+
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 }));
|
18863
18947
|
}
|
18864
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
18865
|
-
return (
|
18948
|
+
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _j === void 0 ? void 0 : _j.length) > 0) {
|
18949
|
+
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
18866
18950
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
18867
18951
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
18868
18952
|
const Component = withBindDataSource(t);
|
@@ -18900,7 +18984,7 @@ Made in Italy` })));
|
|
18900
18984
|
};
|
18901
18985
|
}, [isShowMore]);
|
18902
18986
|
const renderBottom = React.useCallback((rec, index) => {
|
18903
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
18987
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18904
18988
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
18905
18989
|
let cta = null;
|
18906
18990
|
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) {
|
@@ -18909,23 +18993,22 @@ Made in Italy` })));
|
|
18909
18993
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
18910
18994
|
cta = '商品CTA';
|
18911
18995
|
}
|
18912
|
-
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)) {
|
18913
|
-
cta = '服务CTA';
|
18914
|
-
}
|
18915
18996
|
else {
|
18916
|
-
cta = (
|
18997
|
+
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
18917
18998
|
}
|
18918
18999
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19000
|
+
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) && index === 1;
|
18919
19001
|
return (React.createElement(React.Fragment, null,
|
18920
|
-
((
|
18921
|
-
|
19002
|
+
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19003
|
+
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
19004
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px` } },
|
18922
19005
|
React.createElement(Nudge, { nudge: nudge }),
|
18923
|
-
(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' },
|
19006
|
+
((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' },
|
18924
19007
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
18925
19008
|
React.createElement("div", null,
|
18926
|
-
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: (
|
19009
|
+
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', 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 }),
|
18927
19010
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
18928
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19011
|
+
React.createElement(Hashtag$1, { index: activeIndex, tags: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.hashTags) !== null && _l !== void 0 ? _l : [], itemId: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.itemId, itemType: ((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
18929
19012
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
18930
19013
|
}
|
18931
19014
|
return null;
|
@@ -18963,7 +19046,7 @@ Made in Italy` })));
|
|
18963
19046
|
return null;
|
18964
19047
|
}, [globalConfig, waterFallData]);
|
18965
19048
|
const handleViewImageStartEnd = (item) => {
|
18966
|
-
var _a, _b, _c, _d, _e, _f
|
19049
|
+
var _a, _b, _c, _d, _e, _f;
|
18967
19050
|
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)) {
|
18968
19051
|
const endTime = Date.now();
|
18969
19052
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -18972,11 +19055,10 @@ Made in Italy` })));
|
|
18972
19055
|
eventSubject: 'viewImageCarouselEnd',
|
18973
19056
|
eventDescription: 'User end view the image carousel',
|
18974
19057
|
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 : '',
|
18975
|
-
|
18976
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19058
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
18977
19059
|
imageEndTime: `${endTime}`,
|
18978
19060
|
playDuration: `${duration}`,
|
18979
|
-
contentTags: JSON.stringify((
|
19061
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
18980
19062
|
position: activeIndex + '',
|
18981
19063
|
contentFormat: 'image',
|
18982
19064
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -18985,7 +19067,7 @@ Made in Italy` })));
|
|
18985
19067
|
}
|
18986
19068
|
};
|
18987
19069
|
const handleSlideSkip = (item, position) => {
|
18988
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x
|
19070
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
18989
19071
|
if (isPreview || waterFallData)
|
18990
19072
|
return;
|
18991
19073
|
const t = new Date() - curTime.current;
|
@@ -19011,8 +19093,7 @@ Made in Italy` })));
|
|
19011
19093
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19012
19094
|
position: position + '',
|
19013
19095
|
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 : '',
|
19014
|
-
|
19015
|
-
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 : '',
|
19096
|
+
traceInfo: (_x = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : (_w = item === null || item === void 0 ? void 0 : item.product) === null || _w === void 0 ? void 0 : _w.traceInfo) !== null && _x !== void 0 ? _x : '',
|
19016
19097
|
contentFormat
|
19017
19098
|
}
|
19018
19099
|
});
|
@@ -19022,7 +19103,7 @@ Made in Italy` })));
|
|
19022
19103
|
}
|
19023
19104
|
};
|
19024
19105
|
const handleScrollEvent = (swiper) => {
|
19025
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w
|
19106
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19026
19107
|
const item = data[swiper.previousIndex];
|
19027
19108
|
if (!item)
|
19028
19109
|
return;
|
@@ -19039,12 +19120,11 @@ Made in Italy` })));
|
|
19039
19120
|
eventSubject: 'scrollDown',
|
19040
19121
|
eventDescription: 'User scroll down',
|
19041
19122
|
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 : '',
|
19042
|
-
|
19043
|
-
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 : '',
|
19123
|
+
productId: (_g = (_f = item === null || item === void 0 ? void 0 : item.product) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
|
19044
19124
|
requestId: null,
|
19045
|
-
traceInfo: (
|
19125
|
+
traceInfo: (_l = (_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.traceInfo) !== null && _j !== void 0 ? _j : (_k = item === null || item === void 0 ? void 0 : item.product) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : '',
|
19046
19126
|
contentFormat,
|
19047
|
-
position: ((
|
19127
|
+
position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
|
19048
19128
|
}
|
19049
19129
|
});
|
19050
19130
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19056,13 +19136,12 @@ Made in Italy` })));
|
|
19056
19136
|
eventInfo: {
|
19057
19137
|
eventSubject: 'scrollUp',
|
19058
19138
|
eventDescription: 'User scroll up',
|
19059
|
-
contentId: (
|
19060
|
-
|
19061
|
-
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19139
|
+
contentId: (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.itemId) !== null && _p !== void 0 ? _p : '',
|
19140
|
+
productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
19062
19141
|
requestId: null,
|
19063
|
-
traceInfo: (
|
19142
|
+
traceInfo: (_v = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : (_u = item === null || item === void 0 ? void 0 : item.product) === null || _u === void 0 ? void 0 : _u.traceInfo) !== null && _v !== void 0 ? _v : '',
|
19064
19143
|
contentFormat,
|
19065
|
-
position: ((
|
19144
|
+
position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
|
19066
19145
|
}
|
19067
19146
|
});
|
19068
19147
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19088,7 +19167,7 @@ Made in Italy` })));
|
|
19088
19167
|
}
|
19089
19168
|
}, [openHashtag, data, activeIndex]);
|
19090
19169
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19091
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
19170
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19092
19171
|
const item = data[activeIndex];
|
19093
19172
|
// 如果是图片集则上报事件
|
19094
19173
|
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)) {
|
@@ -19099,10 +19178,9 @@ Made in Italy` })));
|
|
19099
19178
|
eventSubject: 'viewImageCarouselStart',
|
19100
19179
|
eventDescription: 'User start view the image carousel',
|
19101
19180
|
contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
|
19102
|
-
|
19103
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19181
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
19104
19182
|
imageStartTime: `${startTime}`,
|
19105
|
-
contentTags: JSON.stringify((
|
19183
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
19106
19184
|
position: activeIndex + '',
|
19107
19185
|
contentFormat: 'image',
|
19108
19186
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19112,11 +19190,11 @@ Made in Italy` })));
|
|
19112
19190
|
if (enableCapi) {
|
19113
19191
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19114
19192
|
eventName: 'ViewContent',
|
19115
|
-
product: (
|
19193
|
+
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
|
19116
19194
|
});
|
19117
19195
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19118
19196
|
eventName: 'PageView',
|
19119
|
-
product: (
|
19197
|
+
product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
|
19120
19198
|
});
|
19121
19199
|
}
|
19122
19200
|
}
|
@@ -19269,7 +19347,7 @@ Made in Italy` })));
|
|
19269
19347
|
}, []);
|
19270
19348
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19271
19349
|
const handlePlaying = React.useCallback(() => {
|
19272
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
19350
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19273
19351
|
setIsPauseVideo(false);
|
19274
19352
|
const item = data[index];
|
19275
19353
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19282,15 +19360,14 @@ Made in Italy` })));
|
|
19282
19360
|
eventSubject: 'playVideo',
|
19283
19361
|
eventDescription: 'User played the video',
|
19284
19362
|
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 : '',
|
19285
|
-
|
19286
|
-
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 : '',
|
19363
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
19287
19364
|
playType,
|
19288
19365
|
startTime: videoCurrentTime,
|
19289
19366
|
videoDuration,
|
19290
|
-
contentTags: JSON.stringify((
|
19367
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
19291
19368
|
position: index + '',
|
19292
19369
|
contentFormat: 'video',
|
19293
|
-
traceInfo: (
|
19370
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
19294
19371
|
}
|
19295
19372
|
});
|
19296
19373
|
setIsFirstPlay(false);
|
@@ -19329,7 +19406,7 @@ Made in Italy` })));
|
|
19329
19406
|
}
|
19330
19407
|
}, [isLoadFinish]);
|
19331
19408
|
const onPause = React.useCallback(() => {
|
19332
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
19409
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19333
19410
|
const item = data[index];
|
19334
19411
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19335
19412
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19340,15 +19417,14 @@ Made in Italy` })));
|
|
19340
19417
|
eventSubject: 'playOverVideo',
|
19341
19418
|
eventDescription: 'User finished playing the video',
|
19342
19419
|
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 : '',
|
19343
|
-
|
19344
|
-
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 : '',
|
19420
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
19345
19421
|
endTime: videoCurrentTime,
|
19346
19422
|
videoDuration,
|
19347
19423
|
playDuration,
|
19348
|
-
contentTags: JSON.stringify((
|
19424
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
19349
19425
|
position: index + '',
|
19350
19426
|
contentFormat: 'video',
|
19351
|
-
traceInfo: (
|
19427
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
19352
19428
|
}
|
19353
19429
|
});
|
19354
19430
|
}
|