pb-sxp-ui 1.15.44 → 1.16.2
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 +283 -210
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +125 -0
- package/dist/index.js +283 -210
- 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 +283 -210
- 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 -42
- 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 +41 -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 -41
- 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 +43 -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,112 @@ 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
|
+
if (!(products === null || products === void 0 ? void 0 : products.length) || (products === null || products === void 0 ? void 0 : products.length) < 1)
|
13480
|
+
return null;
|
13481
|
+
return (React.createElement("div", { className: styles$2.nineProduct },
|
13482
|
+
React.createElement("div", { className: styles$2.gridContainer }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
13483
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
13484
|
+
if (itemIndex < 9) {
|
13485
|
+
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' },
|
13486
|
+
React.createElement("div", { className: styles$2.gridBox },
|
13487
|
+
React.createElement(EventProvider$1, Object.assign({ rec: recData, multItem: item, multiCheckIndex: itemIndex, index: index }, props, { style: {
|
13488
|
+
flexDirection: 'column',
|
13489
|
+
width: '100%',
|
13490
|
+
height: 'auto'
|
13491
|
+
} }),
|
13492
|
+
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: {
|
13493
|
+
aspectRatio: '1/1',
|
13494
|
+
objectFit: 'cover',
|
13495
|
+
width: '100%',
|
13496
|
+
display: 'block'
|
13497
|
+
}, isActive: isActive }),
|
13498
|
+
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: {
|
13499
|
+
__html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
|
13500
|
+
} })))))));
|
13501
|
+
}
|
13502
|
+
else {
|
13503
|
+
return null;
|
13504
|
+
}
|
13505
|
+
}))));
|
13506
|
+
};
|
13507
|
+
var NineCommodityComponent = React.memo(NineCommodity$1);
|
13508
|
+
|
13509
|
+
/*
|
13510
|
+
* @Author: binruan@chatlabs.com
|
13511
|
+
* @Date: 2023-07-28 18:29:57
|
13512
|
+
* @LastEditors: binruan@chatlabs.com
|
13513
|
+
* @LastEditTime: 2024-03-29 16:43:35
|
13514
|
+
* @FilePath: \pb-sxp-ui\src\materials\sxp\template\NineCommodity\material.tsx
|
13515
|
+
*
|
13516
|
+
*/
|
13517
|
+
const NineCommodity = createMaterial(NineCommodityComponent, {
|
13518
|
+
displayName: '推荐多商品-透明底',
|
13519
|
+
icon: '',
|
13520
|
+
category: 'template',
|
13521
|
+
type: 'NineCommodity',
|
13522
|
+
related: {
|
13523
|
+
interactionRender: interactionRender$4,
|
13524
|
+
settingRender: settingRender$8,
|
13525
|
+
bindableProps: []
|
13526
|
+
},
|
13527
|
+
defaulSetting: {
|
13528
|
+
props: {
|
13529
|
+
ctaTempStyles: {
|
13530
|
+
img: {
|
13531
|
+
borderRadius: 3,
|
13532
|
+
width: 60,
|
13533
|
+
height: 60,
|
13534
|
+
marginRight: 8
|
13535
|
+
},
|
13536
|
+
title: {
|
13537
|
+
fontSize: 12,
|
13538
|
+
color: '#fff',
|
13539
|
+
textAlign: 'left'
|
13540
|
+
},
|
13541
|
+
ctaTitle: {
|
13542
|
+
fontSize: 10,
|
13543
|
+
color: '#fff',
|
13544
|
+
textAlign: 'center',
|
13545
|
+
width: 130,
|
13546
|
+
height: 20,
|
13547
|
+
backgroundColor: 'rgba(0,0,0,.5)'
|
13548
|
+
}
|
13549
|
+
}
|
13550
|
+
},
|
13551
|
+
style: {
|
13552
|
+
padding: 7,
|
13553
|
+
width: 236,
|
13554
|
+
height: 74,
|
13555
|
+
borderRadius: 3,
|
13556
|
+
backgroundColor: 'rgba(0,0,0,.3)',
|
13557
|
+
marginBottom: 8
|
13558
|
+
}
|
13559
|
+
},
|
13560
|
+
w: 100,
|
13561
|
+
h: 40,
|
13562
|
+
sort: 3
|
13563
|
+
});
|
13564
|
+
|
13460
13565
|
/*
|
13461
13566
|
* @Author: binruan@chatlabs.com
|
13462
13567
|
* @Date: 2024-04-07 14:07:12
|
@@ -15520,7 +15625,7 @@ Made in Italy` })));
|
|
15520
15625
|
* @Author: binruan@chatlabs.com
|
15521
15626
|
* @Date: 2024-01-10 10:58:24
|
15522
15627
|
* @LastEditors: binruan@chatlabs.com
|
15523
|
-
* @LastEditTime: 2025-
|
15628
|
+
* @LastEditTime: 2025-02-28 10:00:31
|
15524
15629
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
15525
15630
|
*
|
15526
15631
|
*/
|
@@ -15558,7 +15663,7 @@ Made in Italy` })));
|
|
15558
15663
|
}
|
15559
15664
|
}, [waterFallData]);
|
15560
15665
|
const reportTagsView = React.useCallback(() => {
|
15561
|
-
var _a, _b, _c, _d, _e, _f
|
15666
|
+
var _a, _b, _c, _d, _e, _f;
|
15562
15667
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
15563
15668
|
if (!rec)
|
15564
15669
|
return;
|
@@ -15578,10 +15683,9 @@ Made in Italy` })));
|
|
15578
15683
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
15579
15684
|
eventInfo: {
|
15580
15685
|
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
15686
|
position: cacheActiveIndex + '',
|
15583
|
-
contentTags: JSON.stringify((
|
15584
|
-
traceInfo: (
|
15687
|
+
contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
|
15688
|
+
traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,
|
15585
15689
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
15586
15690
|
fromKName,
|
15587
15691
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
@@ -17648,6 +17752,7 @@ Made in Italy` })));
|
|
17648
17752
|
MultiCommodityDiro: MultiCommodityDiro,
|
17649
17753
|
MultiCommodityDiroNew: MultiCommodityDiroNew,
|
17650
17754
|
MultiPosts: MultiPosts,
|
17755
|
+
NineCommodity: NineCommodity,
|
17651
17756
|
Prompt: Prompt,
|
17652
17757
|
Swipe: Swipe
|
17653
17758
|
});
|
@@ -17662,7 +17767,7 @@ Made in Italy` })));
|
|
17662
17767
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
17663
17768
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
17664
17769
|
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
|
17770
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
17666
17771
|
if (state) {
|
17667
17772
|
// 先设置状态
|
17668
17773
|
setState(false);
|
@@ -17672,12 +17777,11 @@ Made in Italy` })));
|
|
17672
17777
|
eventSubject: 'favoriteContentCanceled',
|
17673
17778
|
eventDescription: 'This content was unfavorite by the user',
|
17674
17779
|
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 : []),
|
17780
|
+
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 : '',
|
17781
|
+
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
17782
|
position: position + '',
|
17679
|
-
contentFormat: ((
|
17680
|
-
traceInfo: (
|
17783
|
+
contentFormat: ((_m = recData === null || recData === void 0 ? void 0 : recData.video) === null || _m === void 0 ? void 0 : _m.url) ? 'video' : 'image',
|
17784
|
+
traceInfo: (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
17681
17785
|
}
|
17682
17786
|
});
|
17683
17787
|
// 如果接口调用失败,则回滚状态
|
@@ -17685,41 +17789,40 @@ Made in Italy` })));
|
|
17685
17789
|
setState(true);
|
17686
17790
|
}
|
17687
17791
|
else {
|
17688
|
-
const nRtcList = (
|
17792
|
+
const nRtcList = (_p = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17689
17793
|
if (index === position) {
|
17690
17794
|
item.isCollected = false;
|
17691
17795
|
}
|
17692
17796
|
return item;
|
17693
|
-
})) !== null &&
|
17797
|
+
})) !== null && _p !== void 0 ? _p : [];
|
17694
17798
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17695
17799
|
}
|
17696
17800
|
}
|
17697
17801
|
else {
|
17698
17802
|
setState(true);
|
17699
|
-
const result = (
|
17803
|
+
const result = (_q = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _q !== void 0 ? _q : false;
|
17700
17804
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17701
17805
|
eventInfo: {
|
17702
17806
|
eventSubject: 'favoriteContent',
|
17703
17807
|
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 : []),
|
17808
|
+
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 : '',
|
17809
|
+
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 : '',
|
17810
|
+
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
17811
|
position: position + '',
|
17709
|
-
contentFormat: ((
|
17710
|
-
traceInfo: (
|
17812
|
+
contentFormat: ((_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.url) ? 'video' : 'image',
|
17813
|
+
traceInfo: (_y = recData === null || recData === void 0 ? void 0 : recData.video) === null || _y === void 0 ? void 0 : _y.traceInfo
|
17711
17814
|
}
|
17712
17815
|
});
|
17713
17816
|
if (!result) {
|
17714
17817
|
setState(false);
|
17715
17818
|
}
|
17716
17819
|
else {
|
17717
|
-
const nRtcList = (
|
17820
|
+
const nRtcList = (_z = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
17718
17821
|
if (index === position) {
|
17719
17822
|
item.isCollected = true;
|
17720
17823
|
}
|
17721
17824
|
return item;
|
17722
|
-
})) !== null &&
|
17825
|
+
})) !== null && _z !== void 0 ? _z : [];
|
17723
17826
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
17724
17827
|
}
|
17725
17828
|
}
|
@@ -17822,26 +17925,6 @@ Made in Italy` })));
|
|
17822
17925
|
return;
|
17823
17926
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17824
17927
|
}, [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
17928
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
17846
17929
|
const handlePlaying = React.useCallback(() => {
|
17847
17930
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
@@ -17850,7 +17933,7 @@ Made in Italy` })));
|
|
17850
17933
|
setIsLoadFinish(true);
|
17851
17934
|
}, []);
|
17852
17935
|
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
|
17936
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
17854
17937
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17855
17938
|
return;
|
17856
17939
|
setIsPauseVideo(false);
|
@@ -17861,11 +17944,16 @@ Made in Italy` })));
|
|
17861
17944
|
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
17945
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17863
17946
|
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 : '',
|
17947
|
+
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
17948
|
});
|
17866
17949
|
isFirstPlayRef.current = false;
|
17867
17950
|
}
|
17868
17951
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17952
|
+
const setCurrentTimeByStartTime = React.useCallback(() => {
|
17953
|
+
if (isDiyH5) {
|
17954
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
17955
|
+
}
|
17956
|
+
}, []);
|
17869
17957
|
const handLoadeddata = React.useCallback(() => {
|
17870
17958
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17871
17959
|
return;
|
@@ -17890,12 +17978,13 @@ Made in Italy` })));
|
|
17890
17978
|
const handleLoadedmetadata = React.useCallback(() => {
|
17891
17979
|
if (!videoRef.current)
|
17892
17980
|
return;
|
17981
|
+
setCurrentTimeByStartTime();
|
17893
17982
|
loadedTimeRef.current = new Date();
|
17894
17983
|
handleStartPlay();
|
17895
17984
|
handLoadeddata();
|
17896
17985
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
17897
17986
|
const handleClickVideo = React.useCallback((type) => () => {
|
17898
|
-
var _a, _b, _c, _d, _e;
|
17987
|
+
var _a, _b, _c, _d, _e, _f;
|
17899
17988
|
if (!videoRef.current)
|
17900
17989
|
return;
|
17901
17990
|
if (!isLoadFinish)
|
@@ -17916,17 +18005,20 @@ Made in Italy` })));
|
|
17916
18005
|
break;
|
17917
18006
|
default:
|
17918
18007
|
if (isPause) {
|
17919
|
-
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.
|
18008
|
+
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)) {
|
18009
|
+
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
18010
|
+
}
|
18011
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
17920
18012
|
}
|
17921
18013
|
else {
|
17922
|
-
(
|
18014
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
17923
18015
|
}
|
17924
18016
|
setIsPauseVideo(!isPause);
|
17925
18017
|
break;
|
17926
18018
|
}
|
17927
18019
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17928
18020
|
const handlePause = React.useCallback(() => {
|
17929
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
18021
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
17930
18022
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17931
18023
|
return;
|
17932
18024
|
if (activeIndex !== index)
|
@@ -17942,15 +18034,14 @@ Made in Italy` })));
|
|
17942
18034
|
eventSubject: 'playOverVideo',
|
17943
18035
|
eventDescription: 'User finished playing the video',
|
17944
18036
|
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 : '',
|
18037
|
+
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
18038
|
endTime: videoCurrentTime,
|
17948
18039
|
videoDuration,
|
17949
18040
|
playDuration,
|
17950
|
-
contentTags: JSON.stringify((
|
18041
|
+
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
18042
|
position: index + '',
|
17952
18043
|
contentFormat: 'video',
|
17953
|
-
traceInfo: (
|
18044
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
17954
18045
|
}
|
17955
18046
|
});
|
17956
18047
|
}
|
@@ -17958,8 +18049,27 @@ Made in Italy` })));
|
|
17958
18049
|
const handleWaiting = React.useCallback(() => {
|
17959
18050
|
setWaiting(true);
|
17960
18051
|
}, []);
|
18052
|
+
const handleTimeUpload = () => {
|
18053
|
+
if (!videoRef.current || !isDiyH5)
|
18054
|
+
return;
|
18055
|
+
setTimeout(() => {
|
18056
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
18057
|
+
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)) {
|
18058
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
18059
|
+
if (!loopPlayRef.current)
|
18060
|
+
return;
|
18061
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18062
|
+
(_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);
|
18063
|
+
}
|
18064
|
+
else {
|
18065
|
+
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;
|
18066
|
+
(_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);
|
18067
|
+
}
|
18068
|
+
}
|
18069
|
+
});
|
18070
|
+
};
|
17961
18071
|
React.useEffect(() => {
|
17962
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18072
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
17963
18073
|
if (!isActive)
|
17964
18074
|
return;
|
17965
18075
|
const videoSrc = videoUrl;
|
@@ -17980,6 +18090,7 @@ Made in Italy` })));
|
|
17980
18090
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
17981
18091
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
17982
18092
|
var _a;
|
18093
|
+
setCurrentTimeByStartTime();
|
17983
18094
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
17984
18095
|
});
|
17985
18096
|
}
|
@@ -17993,11 +18104,12 @@ Made in Italy` })));
|
|
17993
18104
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
17994
18105
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
17995
18106
|
(_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',
|
18107
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
|
17997
18108
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
17998
18109
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
18110
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
17999
18111
|
return () => {
|
18000
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18112
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
18001
18113
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
18002
18114
|
if (!isPause)
|
18003
18115
|
handlePause();
|
@@ -18009,9 +18121,10 @@ Made in Italy` })));
|
|
18009
18121
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
18010
18122
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
18011
18123
|
(_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',
|
18124
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
|
18013
18125
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
18014
18126
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
18127
|
+
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
18015
18128
|
};
|
18016
18129
|
}, [isActive]);
|
18017
18130
|
React.useEffect(() => {
|
@@ -18222,48 +18335,19 @@ Made in Italy` })));
|
|
18222
18335
|
}, onLoad: onShowFirstImage }))));
|
18223
18336
|
};
|
18224
18337
|
|
18225
|
-
const PictureGroup$4 =
|
18338
|
+
const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
18226
18339
|
var _a, _b;
|
18227
18340
|
const { isActive } = useSwiperSlide();
|
18228
|
-
const { sxpParameter, openHashtag
|
18341
|
+
const { sxpParameter, openHashtag } = useSxpDataSource();
|
18229
18342
|
const [isLoad, setIsLoad] = React.useState(false);
|
18230
18343
|
const [imgInfo, setImgInfo] = React.useState();
|
18231
18344
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
18232
|
-
const
|
18345
|
+
const swiperRef = React.useRef();
|
18233
18346
|
const isFirstPlayRef = React.useRef(true);
|
18234
|
-
const loopPlayRef = React.useRef(true);
|
18235
18347
|
const initTime = new Date();
|
18236
|
-
React.useImperativeHandle(ref, () => {
|
18237
|
-
return {
|
18238
|
-
setLoopPlay(v) {
|
18239
|
-
loopPlayRef.current = v;
|
18240
|
-
}
|
18241
|
-
};
|
18242
|
-
});
|
18243
|
-
React.useEffect(() => {
|
18244
|
-
let timerId;
|
18245
|
-
if (isLoad && isActive && isDiyH5) {
|
18246
|
-
timerId = setTimeout(() => {
|
18247
|
-
var _a, _b, _c, _d, _e, _f;
|
18248
|
-
if (!loopPlayRef.current)
|
18249
|
-
return;
|
18250
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
18251
|
-
(_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);
|
18252
|
-
}
|
18253
|
-
else {
|
18254
|
-
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;
|
18255
|
-
(_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);
|
18256
|
-
}
|
18257
|
-
}, 3000);
|
18258
|
-
}
|
18259
|
-
return () => {
|
18260
|
-
if (timerId)
|
18261
|
-
clearTimeout(timerId);
|
18262
|
-
};
|
18263
|
-
}, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
|
18264
18348
|
React.useEffect(() => {
|
18265
18349
|
if (isLoad && isActive) {
|
18266
|
-
(
|
18350
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.start();
|
18267
18351
|
if (openHashtag) {
|
18268
18352
|
onViewImageEndEvent(rec);
|
18269
18353
|
}
|
@@ -18273,7 +18357,7 @@ Made in Italy` })));
|
|
18273
18357
|
}
|
18274
18358
|
}
|
18275
18359
|
else {
|
18276
|
-
(
|
18360
|
+
(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) && swiperRef.current.swiper.autoplay.stop();
|
18277
18361
|
}
|
18278
18362
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
18279
18363
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
@@ -18300,13 +18384,13 @@ Made in Italy` })));
|
|
18300
18384
|
};
|
18301
18385
|
}, [isActive, imgInfo]);
|
18302
18386
|
const handleMouseEnter = React.useCallback(() => {
|
18303
|
-
if (
|
18304
|
-
|
18387
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
18388
|
+
swiperRef.current.swiper.autoplay.stop();
|
18305
18389
|
}
|
18306
18390
|
}, []);
|
18307
18391
|
const handleMouseLeave = React.useCallback(() => {
|
18308
|
-
if (
|
18309
|
-
|
18392
|
+
if (swiperRef.current && swiperRef.current.swiper && isAlly) {
|
18393
|
+
swiperRef.current.swiper.autoplay.start();
|
18310
18394
|
}
|
18311
18395
|
}, []);
|
18312
18396
|
const handleSlideChange = React.useCallback((swiper) => {
|
@@ -18327,7 +18411,7 @@ Made in Italy` })));
|
|
18327
18411
|
enabled: true
|
18328
18412
|
}
|
18329
18413
|
}
|
18330
|
-
: {}), { loop: true, ref:
|
18414
|
+
: {}), { loop: true, ref: swiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
18331
18415
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
18332
18416
|
fontSize: '14px'
|
18333
18417
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
@@ -18344,7 +18428,7 @@ Made in Italy` })));
|
|
18344
18428
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
18345
18429
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
18346
18430
|
}))));
|
18347
|
-
}
|
18431
|
+
};
|
18348
18432
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
18349
18433
|
|
18350
18434
|
/*
|
@@ -18465,16 +18549,16 @@ Made in Italy` })));
|
|
18465
18549
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
18466
18550
|
*
|
18467
18551
|
*/
|
18468
|
-
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value }) => {
|
18552
|
+
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value, isNineProduct }) => {
|
18469
18553
|
const { schema } = useEditor();
|
18470
18554
|
if (!(rec === null || rec === void 0 ? void 0 : rec.video))
|
18471
18555
|
return null;
|
18472
18556
|
const renderComp = React.useMemo(() => {
|
18473
18557
|
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;
|
18474
|
-
|
18558
|
+
// 如果includesCtaType有值,则只渲染includesCtaType包含的cta类型组件,用于在页面某处只显示某一组件
|
18475
18559
|
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)))
|
18476
18560
|
return;
|
18477
|
-
|
18561
|
+
// 默认不渲染category为cta类型的组件,该类型的组件只用于某一处
|
18478
18562
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
18479
18563
|
return;
|
18480
18564
|
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)) ||
|
@@ -18487,14 +18571,14 @@ Made in Italy` })));
|
|
18487
18571
|
return null;
|
18488
18572
|
}
|
18489
18573
|
if (value && resolver) {
|
18490
|
-
const t = resolver[(_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
|
18574
|
+
const t = resolver[isNineProduct ? 'NineCommodity' : (_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
|
18491
18575
|
const Component = withBindDataSource(t);
|
18492
18576
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
18493
18577
|
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';
|
18494
|
-
|
18578
|
+
const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
18495
18579
|
if (style.hasOwnProperty('backdropFilter')) {
|
18496
|
-
|
18497
|
-
style
|
18580
|
+
const sbf = style.backdropFilter;
|
18581
|
+
style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
18498
18582
|
}
|
18499
18583
|
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 })));
|
18500
18584
|
}
|
@@ -18624,7 +18708,7 @@ Made in Italy` })));
|
|
18624
18708
|
* @Author: binruan@chatlabs.com
|
18625
18709
|
* @Date: 2024-03-20 10:27:31
|
18626
18710
|
* @LastEditors: binruan@chatlabs.com
|
18627
|
-
* @LastEditTime: 2025-05-
|
18711
|
+
* @LastEditTime: 2025-05-09 15:51:40
|
18628
18712
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
18629
18713
|
*
|
18630
18714
|
*/
|
@@ -18644,7 +18728,6 @@ Made in Italy` })));
|
|
18644
18728
|
const skipLinkRef = React.useRef(false);
|
18645
18729
|
const [pageNum, setPageNum] = React.useState(2);
|
18646
18730
|
const videoWidgetRef = React.useRef(null);
|
18647
|
-
const pictureGroupRef = React.useRef(null);
|
18648
18731
|
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();
|
18649
18732
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
18650
18733
|
const isShowFingerTip = React.useMemo(() => {
|
@@ -18692,7 +18775,7 @@ Made in Italy` })));
|
|
18692
18775
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
18693
18776
|
}, [data, ctaType, swiperRef]);
|
18694
18777
|
const handleSessionCompleted = React.useCallback((fk) => {
|
18695
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v
|
18778
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
18696
18779
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
18697
18780
|
let fromKName = '';
|
18698
18781
|
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))) {
|
@@ -18719,13 +18802,12 @@ Made in Italy` })));
|
|
18719
18802
|
eventSubject: 'sessionCompleted',
|
18720
18803
|
eventDescription: 'Session completed',
|
18721
18804
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
18722
|
-
|
18723
|
-
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
18805
|
+
productId: (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.itemId,
|
18724
18806
|
position: activeIndex + '',
|
18725
18807
|
fromKName: fk || fromKName,
|
18726
18808
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
18727
|
-
ctatId: (
|
18728
|
-
traceInfo: (
|
18809
|
+
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 : '',
|
18810
|
+
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 : ''
|
18729
18811
|
}
|
18730
18812
|
});
|
18731
18813
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
@@ -18784,9 +18866,8 @@ Made in Italy` })));
|
|
18784
18866
|
refreshFeSession
|
18785
18867
|
]);
|
18786
18868
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
18787
|
-
var _a
|
18869
|
+
var _a;
|
18788
18870
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
18789
|
-
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
18790
18871
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
18791
18872
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
18792
18873
|
React.useEffect(() => {
|
@@ -18856,18 +18937,18 @@ Made in Italy` })));
|
|
18856
18937
|
return null;
|
18857
18938
|
}, [globalConfig, activeIndex, visList]);
|
18858
18939
|
const renderContent = React.useCallback((rec, index) => {
|
18859
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
18940
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
18860
18941
|
if (rec === 'organic menu') {
|
18861
18942
|
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)));
|
18862
18943
|
}
|
18863
|
-
if ((
|
18944
|
+
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
18864
18945
|
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 })));
|
18865
18946
|
}
|
18866
|
-
if ((
|
18867
|
-
return (React.createElement(PictureGroup$5,
|
18947
|
+
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
18948
|
+
return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
18868
18949
|
}
|
18869
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
18870
|
-
return (
|
18950
|
+
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) {
|
18951
|
+
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
18871
18952
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
18872
18953
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
18873
18954
|
const Component = withBindDataSource(t);
|
@@ -18905,7 +18986,7 @@ Made in Italy` })));
|
|
18905
18986
|
};
|
18906
18987
|
}, [isShowMore]);
|
18907
18988
|
const renderBottom = React.useCallback((rec, index) => {
|
18908
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
18989
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
18909
18990
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
18910
18991
|
let cta = null;
|
18911
18992
|
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) {
|
@@ -18914,23 +18995,22 @@ Made in Italy` })));
|
|
18914
18995
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
18915
18996
|
cta = '商品CTA';
|
18916
18997
|
}
|
18917
|
-
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)) {
|
18918
|
-
cta = '服务CTA';
|
18919
|
-
}
|
18920
18998
|
else {
|
18921
|
-
cta = (
|
18999
|
+
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;
|
18922
19000
|
}
|
18923
19001
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
19002
|
+
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) && index === 1;
|
18924
19003
|
return (React.createElement(React.Fragment, null,
|
18925
|
-
((
|
18926
|
-
|
19004
|
+
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
19005
|
+
((_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' }),
|
19006
|
+
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` } },
|
18927
19007
|
React.createElement(Nudge, { nudge: nudge }),
|
18928
|
-
(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' },
|
19008
|
+
((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' },
|
18929
19009
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
18930
19010
|
React.createElement("div", null,
|
18931
|
-
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: (
|
19011
|
+
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 }),
|
18932
19012
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
18933
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
19013
|
+
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) }))),
|
18934
19014
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
18935
19015
|
}
|
18936
19016
|
return null;
|
@@ -18968,7 +19048,7 @@ Made in Italy` })));
|
|
18968
19048
|
return null;
|
18969
19049
|
}, [globalConfig, waterFallData]);
|
18970
19050
|
const handleViewImageStartEnd = (item) => {
|
18971
|
-
var _a, _b, _c, _d, _e, _f
|
19051
|
+
var _a, _b, _c, _d, _e, _f;
|
18972
19052
|
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)) {
|
18973
19053
|
const endTime = Date.now();
|
18974
19054
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
@@ -18977,11 +19057,10 @@ Made in Italy` })));
|
|
18977
19057
|
eventSubject: 'viewImageCarouselEnd',
|
18978
19058
|
eventDescription: 'User end view the image carousel',
|
18979
19059
|
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 : '',
|
18980
|
-
|
18981
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19060
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
18982
19061
|
imageEndTime: `${endTime}`,
|
18983
19062
|
playDuration: `${duration}`,
|
18984
|
-
contentTags: JSON.stringify((
|
19063
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
18985
19064
|
position: activeIndex + '',
|
18986
19065
|
contentFormat: 'image',
|
18987
19066
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
@@ -18990,7 +19069,7 @@ Made in Italy` })));
|
|
18990
19069
|
}
|
18991
19070
|
};
|
18992
19071
|
const handleSlideSkip = (item, position) => {
|
18993
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x
|
19072
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
18994
19073
|
if (isPreview || waterFallData)
|
18995
19074
|
return;
|
18996
19075
|
const t = new Date() - curTime.current;
|
@@ -19016,8 +19095,7 @@ Made in Italy` })));
|
|
19016
19095
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
19017
19096
|
position: position + '',
|
19018
19097
|
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 : '',
|
19019
|
-
|
19020
|
-
traceInfo: (_0 = (_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_z = item === null || item === void 0 ? void 0 : item.product) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : '',
|
19098
|
+
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 : '',
|
19021
19099
|
contentFormat
|
19022
19100
|
}
|
19023
19101
|
});
|
@@ -19027,7 +19105,7 @@ Made in Italy` })));
|
|
19027
19105
|
}
|
19028
19106
|
};
|
19029
19107
|
const handleScrollEvent = (swiper) => {
|
19030
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w
|
19108
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
19031
19109
|
const item = data[swiper.previousIndex];
|
19032
19110
|
if (!item)
|
19033
19111
|
return;
|
@@ -19044,12 +19122,11 @@ Made in Italy` })));
|
|
19044
19122
|
eventSubject: 'scrollDown',
|
19045
19123
|
eventDescription: 'User scroll down',
|
19046
19124
|
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 : '',
|
19047
|
-
|
19048
|
-
productId: (_k = (_j = item === null || item === void 0 ? void 0 : item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
|
19125
|
+
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 : '',
|
19049
19126
|
requestId: null,
|
19050
|
-
traceInfo: (
|
19127
|
+
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 : '',
|
19051
19128
|
contentFormat,
|
19052
|
-
position: ((
|
19129
|
+
position: ((_m = swiper.previousIndex) !== null && _m !== void 0 ? _m : 0) + ''
|
19053
19130
|
}
|
19054
19131
|
});
|
19055
19132
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19061,13 +19138,12 @@ Made in Italy` })));
|
|
19061
19138
|
eventInfo: {
|
19062
19139
|
eventSubject: 'scrollUp',
|
19063
19140
|
eventDescription: 'User scroll up',
|
19064
|
-
contentId: (
|
19065
|
-
|
19066
|
-
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
19141
|
+
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 : '',
|
19142
|
+
productId: (_r = (_q = item.product) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
|
19067
19143
|
requestId: null,
|
19068
|
-
traceInfo: (
|
19144
|
+
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 : '',
|
19069
19145
|
contentFormat,
|
19070
|
-
position: ((
|
19146
|
+
position: ((_w = swiper.previousIndex) !== null && _w !== void 0 ? _w : 0) + ''
|
19071
19147
|
}
|
19072
19148
|
});
|
19073
19149
|
// 如果上一个商品是图片集,需上报 浏览图片集结结束 事件
|
@@ -19093,7 +19169,7 @@ Made in Italy` })));
|
|
19093
19169
|
}
|
19094
19170
|
}, [openHashtag, data, activeIndex]);
|
19095
19171
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
19096
|
-
var _a, _b, _c, _d, _e, _f, _g, _h
|
19172
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
19097
19173
|
const item = data[activeIndex];
|
19098
19174
|
// 如果是图片集则上报事件
|
19099
19175
|
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)) {
|
@@ -19104,10 +19180,9 @@ Made in Italy` })));
|
|
19104
19180
|
eventSubject: 'viewImageCarouselStart',
|
19105
19181
|
eventDescription: 'User start view the image carousel',
|
19106
19182
|
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 : '',
|
19107
|
-
|
19108
|
-
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
19183
|
+
contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
|
19109
19184
|
imageStartTime: `${startTime}`,
|
19110
|
-
contentTags: JSON.stringify((
|
19185
|
+
contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
|
19111
19186
|
position: activeIndex + '',
|
19112
19187
|
contentFormat: 'image',
|
19113
19188
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
@@ -19117,11 +19192,11 @@ Made in Italy` })));
|
|
19117
19192
|
if (enableCapi) {
|
19118
19193
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19119
19194
|
eventName: 'ViewContent',
|
19120
|
-
product: (
|
19195
|
+
product: (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.bindProduct
|
19121
19196
|
});
|
19122
19197
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
19123
19198
|
eventName: 'PageView',
|
19124
|
-
product: (
|
19199
|
+
product: (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct
|
19125
19200
|
});
|
19126
19201
|
}
|
19127
19202
|
}
|
@@ -19274,7 +19349,7 @@ Made in Italy` })));
|
|
19274
19349
|
}, []);
|
19275
19350
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
19276
19351
|
const handlePlaying = React.useCallback(() => {
|
19277
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
19352
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19278
19353
|
setIsPauseVideo(false);
|
19279
19354
|
const item = data[index];
|
19280
19355
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
@@ -19287,15 +19362,14 @@ Made in Italy` })));
|
|
19287
19362
|
eventSubject: 'playVideo',
|
19288
19363
|
eventDescription: 'User played the video',
|
19289
19364
|
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 : '',
|
19290
|
-
|
19291
|
-
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
19365
|
+
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 : '',
|
19292
19366
|
playType,
|
19293
19367
|
startTime: videoCurrentTime,
|
19294
19368
|
videoDuration,
|
19295
|
-
contentTags: JSON.stringify((
|
19369
|
+
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 : []),
|
19296
19370
|
position: index + '',
|
19297
19371
|
contentFormat: 'video',
|
19298
|
-
traceInfo: (
|
19372
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
19299
19373
|
}
|
19300
19374
|
});
|
19301
19375
|
setIsFirstPlay(false);
|
@@ -19334,7 +19408,7 @@ Made in Italy` })));
|
|
19334
19408
|
}
|
19335
19409
|
}, [isLoadFinish]);
|
19336
19410
|
const onPause = React.useCallback(() => {
|
19337
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
19411
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
19338
19412
|
const item = data[index];
|
19339
19413
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
19340
19414
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -19345,15 +19419,14 @@ Made in Italy` })));
|
|
19345
19419
|
eventSubject: 'playOverVideo',
|
19346
19420
|
eventDescription: 'User finished playing the video',
|
19347
19421
|
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 : '',
|
19348
|
-
|
19349
|
-
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
19422
|
+
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 : '',
|
19350
19423
|
endTime: videoCurrentTime,
|
19351
19424
|
videoDuration,
|
19352
19425
|
playDuration,
|
19353
|
-
contentTags: JSON.stringify((
|
19426
|
+
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 : []),
|
19354
19427
|
position: index + '',
|
19355
19428
|
contentFormat: 'video',
|
19356
|
-
traceInfo: (
|
19429
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
|
19357
19430
|
}
|
19358
19431
|
});
|
19359
19432
|
}
|