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