pb-sxp-ui 1.15.12-alpha.8 → 1.15.13-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +666 -56
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +664 -55
- 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 +666 -56
- 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/DiyStoryPreview/PictureGroup.d.ts +16 -0
- package/es/core/components/DiyStoryPreview/PictureGroup.js +34 -0
- package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +17 -0
- package/es/core/components/DiyStoryPreview/VideoWidget.js +196 -0
- package/es/core/components/DiyStoryPreview/index.d.ts +28 -0
- package/es/core/components/DiyStoryPreview/index.js +377 -0
- package/es/core/components/SxpPageRender/ExpandableText.js +10 -2
- package/es/core/components/SxpPageRender/RenderCard.js +4 -4
- package/es/core/context/SxpDataSourceProvider.js +5 -17
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/es/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
- package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
- package/es/materials/sxp/template/components/EventProvider.js +2 -2
- package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +16 -0
- package/lib/core/components/DiyStoryPreview/PictureGroup.js +37 -0
- package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +17 -0
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +199 -0
- package/lib/core/components/DiyStoryPreview/index.d.ts +28 -0
- package/lib/core/components/DiyStoryPreview/index.js +380 -0
- package/lib/core/components/SxpPageRender/ExpandableText.js +10 -2
- package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
- package/lib/core/context/SxpDataSourceProvider.js +5 -17
- package/lib/index.d.ts +1 -0
- package/lib/index.js +3 -1
- package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/lib/materials/sxp/template/MultiCommodityDiro/index.js +2 -1
- package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +2 -1
- package/lib/materials/sxp/template/components/EventProvider.js +2 -2
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
38
38
|
PERFORMANCE OF THIS SOFTWARE.
|
|
39
39
|
***************************************************************************** */
|
|
40
|
-
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
40
|
+
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
41
41
|
|
|
42
42
|
|
|
43
43
|
function __rest(s, e) {
|
|
@@ -740,12 +740,8 @@
|
|
|
740
740
|
// Beacon API 用于发送异步和非阻塞请求到服务器。这类请求不需要响应。
|
|
741
741
|
if (options.type === 'beacon' && navigator.sendBeacon) {
|
|
742
742
|
return navigator.sendBeacon(`${url}/api/${path}`, new Blob([
|
|
743
|
-
JSON.stringify({
|
|
744
|
-
|
|
745
|
-
})
|
|
746
|
-
], {
|
|
747
|
-
type: 'application/json;charset=UTF-8'
|
|
748
|
-
}));
|
|
743
|
+
JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))
|
|
744
|
+
], { type: 'application/json;charset=UTF-8' }));
|
|
749
745
|
}
|
|
750
746
|
return window
|
|
751
747
|
.fetch(`${url}/api/${path}`, {
|
|
@@ -906,7 +902,7 @@
|
|
|
906
902
|
console.log('userInfo:', userInfo);
|
|
907
903
|
console.log('eventInfo:', ef);
|
|
908
904
|
console.log('========= 结束 =========');
|
|
909
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/
|
|
905
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/CLD/${(_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id']}/${eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.eventSubject}`, {
|
|
910
906
|
method: 'POST',
|
|
911
907
|
body: { userInfo: realUserInfo, eventInfo: realEventInfo },
|
|
912
908
|
type: 'beacon'
|
|
@@ -922,7 +918,7 @@
|
|
|
922
918
|
bffDataSource
|
|
923
919
|
]);
|
|
924
920
|
const bffFbReport = React.useCallback(({ eventName, product }) => {
|
|
925
|
-
var _a, _b, _c, _d, _e, _f
|
|
921
|
+
var _a, _b, _c, _d, _e, _f;
|
|
926
922
|
if (!enableReportEvent ||
|
|
927
923
|
!enabledMetaConversionApi ||
|
|
928
924
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) ||
|
|
@@ -986,15 +982,7 @@
|
|
|
986
982
|
}
|
|
987
983
|
};
|
|
988
984
|
getEventParams(jsonParams);
|
|
989
|
-
|
|
990
|
-
const queryString = location.search.slice(1);
|
|
991
|
-
(_f = splitUrlParams(queryString)) === null || _f === void 0 ? void 0 : _f.map((val) => {
|
|
992
|
-
const key = val.split('=')[0];
|
|
993
|
-
const value = val.split('=')[1];
|
|
994
|
-
params[key] = value;
|
|
995
|
-
});
|
|
996
|
-
const cl_source = params === null || params === void 0 ? void 0 : params.cl_source;
|
|
997
|
-
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/fb/${(_g = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _g === void 0 ? void 0 : _g['x-app-id']}/${eventName}${cl_source ? `/${decodeURIComponent(cl_source)}` : ''}`, {
|
|
985
|
+
return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch(`v2/event/report/FB/${(_f = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _f === void 0 ? void 0 : _f['x-app-id']}/${eventName}`, {
|
|
998
986
|
method: 'POST',
|
|
999
987
|
body: jsonParams,
|
|
1000
988
|
type: 'beacon'
|
|
@@ -1491,7 +1479,7 @@
|
|
|
1491
1479
|
React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
|
|
1492
1480
|
});
|
|
1493
1481
|
|
|
1494
|
-
var index$
|
|
1482
|
+
var index$3 = /*#__PURE__*/Object.freeze({
|
|
1495
1483
|
__proto__: null,
|
|
1496
1484
|
EditorCore: EditorCore
|
|
1497
1485
|
});
|
|
@@ -10111,7 +10099,15 @@
|
|
|
10111
10099
|
wordBreak: 'break-word'
|
|
10112
10100
|
}, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
|
10113
10101
|
React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
|
|
10114
|
-
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
|
10102
|
+
text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
|
|
10103
|
+
textDecoration: 'underline',
|
|
10104
|
+
cursor: 'pointer',
|
|
10105
|
+
outline: 'none',
|
|
10106
|
+
border: 'none',
|
|
10107
|
+
boxSizing: 'content-box',
|
|
10108
|
+
padding: 0,
|
|
10109
|
+
background: 'transparent'
|
|
10110
|
+
}, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
|
|
10115
10111
|
__html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
|
|
10116
10112
|
} }))));
|
|
10117
10113
|
};
|
|
@@ -12469,7 +12465,7 @@ Made in Italy` })));
|
|
|
12469
12465
|
const handleClick = lodash.throttle((e) => {
|
|
12470
12466
|
var _a, _b, _c, _d, _e, _f;
|
|
12471
12467
|
e.preventDefault();
|
|
12472
|
-
const item = multItem
|
|
12468
|
+
const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
|
|
12473
12469
|
ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
|
|
12474
12470
|
eventSubject: 'clickCta',
|
|
12475
12471
|
eventDescription: 'User clicked the CTA'
|
|
@@ -12496,7 +12492,7 @@ Made in Italy` })));
|
|
|
12496
12492
|
setElement(null);
|
|
12497
12493
|
}
|
|
12498
12494
|
}, [element, popup]);
|
|
12499
|
-
return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
|
|
12495
|
+
return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
|
|
12500
12496
|
};
|
|
12501
12497
|
var EventProvider$1 = React.memo(EventProvider);
|
|
12502
12498
|
|
|
@@ -13092,6 +13088,7 @@ Made in Italy` })));
|
|
|
13092
13088
|
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"]);
|
|
13093
13089
|
const { sxpParameter } = useSxpDataSource();
|
|
13094
13090
|
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 : [1, 2]);
|
|
13091
|
+
console.log(recData, '222');
|
|
13095
13092
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
|
13096
13093
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
13097
13094
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
|
@@ -13298,6 +13295,7 @@ Made in Italy` })));
|
|
|
13298
13295
|
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"]);
|
|
13299
13296
|
const { sxpParameter } = useSxpDataSource();
|
|
13300
13297
|
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 : [1, 2]);
|
|
13298
|
+
console.log(recData, '333');
|
|
13301
13299
|
return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
|
|
13302
13300
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
13303
13301
|
return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
|
|
@@ -17573,15 +17571,15 @@ Made in Italy` })));
|
|
|
17573
17571
|
Swipe: Swipe
|
|
17574
17572
|
});
|
|
17575
17573
|
|
|
17576
|
-
const defaultUnLikeIconPath$
|
|
17577
|
-
const defaultLikeIconPath$
|
|
17574
|
+
const defaultUnLikeIconPath$2 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
|
17575
|
+
const defaultLikeIconPath$2 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
|
17578
17576
|
const LikeButton = (_a) => {
|
|
17579
17577
|
var _b;
|
|
17580
17578
|
var { active, activeIcon, unActicveIcon, recData, position } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData", "position"]);
|
|
17581
17579
|
const { mutateLike, mutateUnlike, bffEventReport, setCacheRtcList, cacheRtcList } = useSxpDataSource();
|
|
17582
17580
|
const [state, setState] = React.useState((_b = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList[position]) === null || _b === void 0 ? void 0 : _b.isCollected);
|
|
17583
|
-
const likeIcon = useIconLink(defaultLikeIconPath$
|
|
17584
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath$
|
|
17581
|
+
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
|
17582
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
|
17585
17583
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17586
17584
|
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
17587
17585
|
if (state) {
|
|
@@ -17672,7 +17670,7 @@ Made in Italy` })));
|
|
|
17672
17670
|
};
|
|
17673
17671
|
})();
|
|
17674
17672
|
|
|
17675
|
-
const VideoWidget$
|
|
17673
|
+
const VideoWidget$4 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
|
17676
17674
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
|
17677
17675
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
|
17678
17676
|
const videoStartTime = React.useRef(0);
|
|
@@ -18017,7 +18015,7 @@ Made in Italy` })));
|
|
|
18017
18015
|
renderLoading,
|
|
18018
18016
|
isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
|
|
18019
18017
|
};
|
|
18020
|
-
var VideoWidget$
|
|
18018
|
+
var VideoWidget$5 = React.memo(VideoWidget$4);
|
|
18021
18019
|
|
|
18022
18020
|
const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
|
|
18023
18021
|
const [isTrue, setIsTure] = React.useState(defaultValue);
|
|
@@ -18106,7 +18104,7 @@ Made in Italy` })));
|
|
|
18106
18104
|
}, onLoad: onShowFirstImage }))));
|
|
18107
18105
|
};
|
|
18108
18106
|
|
|
18109
|
-
const PictureGroup$
|
|
18107
|
+
const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
|
18110
18108
|
var _a, _b;
|
|
18111
18109
|
const { isActive } = useSwiperSlide();
|
|
18112
18110
|
const { sxpParameter, openHashtag } = useSxpDataSource();
|
|
@@ -18200,7 +18198,7 @@ Made in Italy` })));
|
|
|
18200
18198
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
|
18201
18199
|
}))));
|
|
18202
18200
|
};
|
|
18203
|
-
var PictureGroup$
|
|
18201
|
+
var PictureGroup$5 = React.memo(PictureGroup$4);
|
|
18204
18202
|
|
|
18205
18203
|
/*
|
|
18206
18204
|
* @Author: binruan@chatlabs.com
|
|
@@ -18316,7 +18314,7 @@ Made in Italy` })));
|
|
|
18316
18314
|
* @Author: binruan@chatlabs.com
|
|
18317
18315
|
* @Date: 2023-12-26 16:11:34
|
|
18318
18316
|
* @LastEditors: binruan@chatlabs.com
|
|
18319
|
-
* @LastEditTime:
|
|
18317
|
+
* @LastEditTime: 2025-03-26 19:32:00
|
|
18320
18318
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
|
|
18321
18319
|
*
|
|
18322
18320
|
*/
|
|
@@ -18326,10 +18324,10 @@ Made in Italy` })));
|
|
|
18326
18324
|
return null;
|
|
18327
18325
|
const renderComp = React.useMemo(() => {
|
|
18328
18326
|
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;
|
|
18329
|
-
|
|
18327
|
+
// 如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
|
|
18330
18328
|
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)))
|
|
18331
18329
|
return;
|
|
18332
|
-
|
|
18330
|
+
// 默认不渲染category为cta类型的组件，该类型的组件只用于某一处
|
|
18333
18331
|
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
|
18334
18332
|
return;
|
|
18335
18333
|
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)) ||
|
|
@@ -18346,10 +18344,10 @@ Made in Italy` })));
|
|
|
18346
18344
|
const Component = withBindDataSource(t);
|
|
18347
18345
|
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
|
18348
18346
|
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';
|
|
18349
|
-
|
|
18347
|
+
const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
|
18350
18348
|
if (style.hasOwnProperty('backdropFilter')) {
|
|
18351
|
-
|
|
18352
|
-
style
|
|
18349
|
+
const sbf = style.backdropFilter;
|
|
18350
|
+
style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
|
18353
18351
|
}
|
|
18354
18352
|
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 })));
|
|
18355
18353
|
}
|
|
@@ -18710,10 +18708,10 @@ Made in Italy` })));
|
|
|
18710
18708
|
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)));
|
|
18711
18709
|
}
|
|
18712
18710
|
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
|
|
18713
|
-
return (React.createElement(VideoWidget$
|
|
18711
|
+
return (React.createElement(VideoWidget$5, { key: isReload, 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 }));
|
|
18714
18712
|
}
|
|
18715
18713
|
if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
|
|
18716
|
-
return (React.createElement(PictureGroup$
|
|
18714
|
+
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 }));
|
|
18717
18715
|
}
|
|
18718
18716
|
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) {
|
|
18719
18717
|
return (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _k === void 0 ? void 0 : _k.map((value, idx) => {
|
|
@@ -19083,7 +19081,7 @@ Made in Italy` })));
|
|
|
19083
19081
|
};
|
|
19084
19082
|
var SxpPageRender$1 = React.memo(SxpPageRender);
|
|
19085
19083
|
|
|
19086
|
-
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
|
|
19084
|
+
const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
|
|
19087
19085
|
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
|
19088
19086
|
clickable: true,
|
|
19089
19087
|
bulletActiveClass: 'swipe-item-active-bullet',
|
|
@@ -19093,9 +19091,9 @@ Made in Italy` })));
|
|
|
19093
19091
|
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
|
|
19094
19092
|
})));
|
|
19095
19093
|
};
|
|
19096
|
-
var PictureGroup$
|
|
19094
|
+
var PictureGroup$3 = React.memo(PictureGroup$2);
|
|
19097
19095
|
|
|
19098
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
|
|
19096
|
+
const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
|
|
19099
19097
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
|
19100
19098
|
const videoRef = React.useRef(null);
|
|
19101
19099
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
|
@@ -19325,14 +19323,14 @@ Made in Italy` })));
|
|
|
19325
19323
|
renderPoster,
|
|
19326
19324
|
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
|
|
19327
19325
|
};
|
|
19328
|
-
var VideoWidget$
|
|
19326
|
+
var VideoWidget$3 = React.memo(VideoWidget$2);
|
|
19329
19327
|
|
|
19330
|
-
const RESOLVER$
|
|
19328
|
+
const RESOLVER$2 = {};
|
|
19331
19329
|
Object.values(_materials_).forEach((v) => {
|
|
19332
|
-
RESOLVER$
|
|
19330
|
+
RESOLVER$2[v.extend.type] = v;
|
|
19333
19331
|
});
|
|
19334
|
-
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
|
19335
|
-
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
|
19332
|
+
const defaultUnLikeIconPath$1 = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
|
19333
|
+
const defaultLikeIconPath$1 = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
|
19336
19334
|
const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [] }) => {
|
|
19337
19335
|
const height = React.useMemo(() => {
|
|
19338
19336
|
let minusHeight = 0;
|
|
@@ -19347,16 +19345,16 @@ Made in Italy` })));
|
|
|
19347
19345
|
const renderContent = (rec, index) => {
|
|
19348
19346
|
var _a, _b, _c, _d;
|
|
19349
19347
|
if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
|
|
19350
|
-
return (React.createElement(VideoWidget$
|
|
19348
|
+
return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
|
|
19351
19349
|
}
|
|
19352
19350
|
if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
|
|
19353
|
-
return (React.createElement(PictureGroup$
|
|
19351
|
+
return (React.createElement(PictureGroup$3, { 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, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
|
19354
19352
|
}
|
|
19355
19353
|
if (rec.product) {
|
|
19356
19354
|
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
|
|
19357
19355
|
return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
|
|
19358
19356
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19359
|
-
const t = RESOLVER$
|
|
19357
|
+
const t = RESOLVER$2[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
|
19360
19358
|
const Component = withBindDataSource(t);
|
|
19361
19359
|
const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
|
|
19362
19360
|
return (React.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle), bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {},
|
|
@@ -19378,7 +19376,7 @@ Made in Italy` })));
|
|
|
19378
19376
|
const CTA = (rec, index) => {
|
|
19379
19377
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
|
|
19380
19378
|
return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
|
19381
|
-
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$
|
|
19379
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$2 })));
|
|
19382
19380
|
}
|
|
19383
19381
|
return null;
|
|
19384
19382
|
};
|
|
@@ -19396,8 +19394,8 @@ Made in Italy` })));
|
|
|
19396
19394
|
}
|
|
19397
19395
|
return null;
|
|
19398
19396
|
};
|
|
19399
|
-
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
|
19400
|
-
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
|
19397
|
+
const likeIcon = useIconLink(defaultLikeIconPath$1, appDomain);
|
|
19398
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath$1, appDomain);
|
|
19401
19399
|
const renderLikeButton = (rec, index) => {
|
|
19402
19400
|
var _a, _b, _c, _d;
|
|
19403
19401
|
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
|
@@ -19445,7 +19443,618 @@ Made in Italy` })));
|
|
|
19445
19443
|
return renderView(rec, index);
|
|
19446
19444
|
})));
|
|
19447
19445
|
};
|
|
19448
|
-
var index$
|
|
19446
|
+
var index$2 = React.memo(DiyPortalPreview);
|
|
19447
|
+
|
|
19448
|
+
const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
|
|
19449
|
+
const { isActive } = useSwiperSlide();
|
|
19450
|
+
const [isload, setIsLoad] = React.useState(false);
|
|
19451
|
+
React.useEffect(() => {
|
|
19452
|
+
if (isActive && isload && loopPlay) {
|
|
19453
|
+
setTimeout(() => {
|
|
19454
|
+
var _a, _b, _c, _d;
|
|
19455
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
19456
|
+
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
|
|
19457
|
+
}
|
|
19458
|
+
else {
|
|
19459
|
+
const i = (_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.activeIndex;
|
|
19460
|
+
(_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
|
|
19461
|
+
}
|
|
19462
|
+
}, 3000);
|
|
19463
|
+
}
|
|
19464
|
+
}, [isActive, isload, data, index, swiperRef, loopPlay]);
|
|
19465
|
+
const loadFinishImage = () => {
|
|
19466
|
+
setIsLoad(true);
|
|
19467
|
+
};
|
|
19468
|
+
return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
|
|
19469
|
+
clickable: true,
|
|
19470
|
+
bulletActiveClass: 'swipe-item-active-bullet',
|
|
19471
|
+
bulletElement: 'button'
|
|
19472
|
+
}, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
|
|
19473
|
+
return (React.createElement(SwiperSlide, { key: url },
|
|
19474
|
+
React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: loadFinishImage })));
|
|
19475
|
+
})));
|
|
19476
|
+
};
|
|
19477
|
+
var PictureGroup$1 = React.memo(PictureGroup);
|
|
19478
|
+
|
|
19479
|
+
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
|
|
19480
|
+
const { isActive } = useSwiperSlide();
|
|
19481
|
+
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
|
19482
|
+
const videoRef = React.useRef(null);
|
|
19483
|
+
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
|
|
19484
|
+
const videoStartTime = React.useRef(0);
|
|
19485
|
+
const [isLoadFinish, setIsLoadFinish] = React.useState(false);
|
|
19486
|
+
const [isFirstPlay, setIsFirstPlay] = React.useState(true);
|
|
19487
|
+
const canvasRef = React.useRef(null);
|
|
19488
|
+
const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
|
|
19489
|
+
const videoId = `pb-cache-video-${index}`;
|
|
19490
|
+
const hlsRef = React.useRef(null);
|
|
19491
|
+
React.useEffect(() => {
|
|
19492
|
+
if (!videoRef.current)
|
|
19493
|
+
return;
|
|
19494
|
+
videoRef.current.muted = muted;
|
|
19495
|
+
}, [muted]);
|
|
19496
|
+
React.useCallback(() => {
|
|
19497
|
+
var _a;
|
|
19498
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
19499
|
+
}, []);
|
|
19500
|
+
useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
19501
|
+
const handlePlaying = React.useCallback(() => {
|
|
19502
|
+
var _a, _b, _c, _d, _e, _f;
|
|
19503
|
+
setIsPauseVideo(false);
|
|
19504
|
+
const item = data[index];
|
|
19505
|
+
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
19506
|
+
videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
|
|
19507
|
+
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
19508
|
+
((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
|
19509
|
+
setIsFirstPlay(false);
|
|
19510
|
+
}
|
|
19511
|
+
}, [bffEventReport, data, index, isFirstPlay]);
|
|
19512
|
+
const handleLoadedMetadata = React.useCallback(() => {
|
|
19513
|
+
var _a;
|
|
19514
|
+
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
|
19515
|
+
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
19516
|
+
setIsLoadFinish(true);
|
|
19517
|
+
}, []);
|
|
19518
|
+
React.useCallback((type) => () => {
|
|
19519
|
+
var _a, _b, _c, _d, _e;
|
|
19520
|
+
if (!isLoadFinish)
|
|
19521
|
+
return;
|
|
19522
|
+
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
|
19523
|
+
switch (type) {
|
|
19524
|
+
case 'start':
|
|
19525
|
+
if (!isPause)
|
|
19526
|
+
return;
|
|
19527
|
+
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
|
19528
|
+
setIsPauseVideo(false);
|
|
19529
|
+
break;
|
|
19530
|
+
case 'pause':
|
|
19531
|
+
if (isPause)
|
|
19532
|
+
return;
|
|
19533
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
19534
|
+
setIsPauseVideo(true);
|
|
19535
|
+
break;
|
|
19536
|
+
default:
|
|
19537
|
+
if (isPause) {
|
|
19538
|
+
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
|
19539
|
+
}
|
|
19540
|
+
else {
|
|
19541
|
+
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
|
19542
|
+
}
|
|
19543
|
+
setIsPauseVideo(!isPause);
|
|
19544
|
+
break;
|
|
19545
|
+
}
|
|
19546
|
+
}, [isLoadFinish]);
|
|
19547
|
+
React.useCallback(() => {
|
|
19548
|
+
var _a, _b, _c, _d, _e, _f;
|
|
19549
|
+
data[index];
|
|
19550
|
+
((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
19551
|
+
((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
19552
|
+
if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
|
|
19553
|
+
(((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
|
|
19554
|
+
}
|
|
19555
|
+
}, [data, index, bffEventReport]);
|
|
19556
|
+
const blur = React.useMemo(() => {
|
|
19557
|
+
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
|
19558
|
+
}, [videoPostConfig]);
|
|
19559
|
+
React.useMemo(() => {
|
|
19560
|
+
var _a;
|
|
19561
|
+
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
|
|
19562
|
+
? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
|
|
19563
|
+
: 'translateY(-50%)';
|
|
19564
|
+
}, [videoPostConfig]);
|
|
19565
|
+
const handLoadeddata = React.useCallback(() => {
|
|
19566
|
+
if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
|
|
19567
|
+
return;
|
|
19568
|
+
const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
|
|
19569
|
+
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
|
|
19570
|
+
const ctx = canvas.getContext('2d');
|
|
19571
|
+
const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
|
|
19572
|
+
const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
|
|
19573
|
+
canvas.height = targetHeight;
|
|
19574
|
+
canvas.width = targetWidth;
|
|
19575
|
+
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
19576
|
+
setFirstFrameSrc(canvas.toDataURL());
|
|
19577
|
+
}, []);
|
|
19578
|
+
const handleTimeUpload = React.useCallback(() => {
|
|
19579
|
+
var _a, _b, _c;
|
|
19580
|
+
if (!videoRef.current)
|
|
19581
|
+
return;
|
|
19582
|
+
if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
|
|
19583
|
+
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
19584
|
+
}
|
|
19585
|
+
}, []);
|
|
19586
|
+
const handlePause = () => {
|
|
19587
|
+
var _a, _b, _c, _d, _e, _f;
|
|
19588
|
+
if (!videoRef.current || !isActive)
|
|
19589
|
+
return;
|
|
19590
|
+
if (!loopPlay)
|
|
19591
|
+
return;
|
|
19592
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
19593
|
+
(_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);
|
|
19594
|
+
}
|
|
19595
|
+
else {
|
|
19596
|
+
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;
|
|
19597
|
+
(_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);
|
|
19598
|
+
}
|
|
19599
|
+
};
|
|
19600
|
+
// useEffect(() => {
|
|
19601
|
+
// if (!videoRef.current) return;
|
|
19602
|
+
// if (!isActive) return;
|
|
19603
|
+
// if (!loopPlay) {
|
|
19604
|
+
// videoRef?.current?.pause();
|
|
19605
|
+
// } else {
|
|
19606
|
+
// videoRef?.current?.play();
|
|
19607
|
+
// }
|
|
19608
|
+
// }, [loopPlay, isActive]);
|
|
19609
|
+
React.useEffect(() => {
|
|
19610
|
+
var _a, _b, _c;
|
|
19611
|
+
if (!isActive)
|
|
19612
|
+
return;
|
|
19613
|
+
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
|
|
19614
|
+
if (!videoSrc)
|
|
19615
|
+
return;
|
|
19616
|
+
setIsPauseVideo(false);
|
|
19617
|
+
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
|
19618
|
+
if (!videoPlayerWrapperNode)
|
|
19619
|
+
return;
|
|
19620
|
+
videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
|
|
19621
|
+
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
19622
|
+
return;
|
|
19623
|
+
const Hls = window === null || window === void 0 ? void 0 : window.Hls;
|
|
19624
|
+
let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
|
|
19625
|
+
if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
|
|
19626
|
+
hls = new Hls();
|
|
19627
|
+
hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
|
|
19628
|
+
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
19629
|
+
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
19630
|
+
var _a;
|
|
19631
|
+
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
|
19632
|
+
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
19633
|
+
});
|
|
19634
|
+
}
|
|
19635
|
+
else {
|
|
19636
|
+
videoRef.current.src = videoSrc;
|
|
19637
|
+
}
|
|
19638
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
|
|
19639
|
+
// videoRef.current?.addEventListener('playing', handlePlaying);
|
|
19640
|
+
// videoRef.current?.addEventListener('loadeddata', handLoadeddata);
|
|
19641
|
+
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
|
|
19642
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('timeupdate', handleTimeUpload);
|
|
19643
|
+
return () => {
|
|
19644
|
+
var _a, _b, _c, _d;
|
|
19645
|
+
if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
|
|
19646
|
+
(_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
19647
|
+
setIsLoadFinish(false);
|
|
19648
|
+
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
|
19649
|
+
// videoRef.current?.removeEventListener('playing', handlePlaying);
|
|
19650
|
+
// videoRef.current?.removeEventListener('loadeddata', handLoadeddata);
|
|
19651
|
+
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
|
19652
|
+
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
|
19653
|
+
};
|
|
19654
|
+
}, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
|
|
19655
|
+
React.useMemo(() => {
|
|
19656
|
+
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
|
19657
|
+
return null;
|
|
19658
|
+
}
|
|
19659
|
+
return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
|
|
19660
|
+
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
|
19661
|
+
React.useMemo(() => {
|
|
19662
|
+
return blur
|
|
19663
|
+
? {
|
|
19664
|
+
filter: 'blur(10px)',
|
|
19665
|
+
transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
|
|
19666
|
+
}
|
|
19667
|
+
: {};
|
|
19668
|
+
}, [blur]);
|
|
19669
|
+
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
|
19670
|
+
return null;
|
|
19671
|
+
}
|
|
19672
|
+
return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
|
19673
|
+
position: 'relative',
|
|
19674
|
+
width: '100%',
|
|
19675
|
+
height,
|
|
19676
|
+
overflow: 'hidden',
|
|
19677
|
+
pointerEvents: 'none'
|
|
19678
|
+
} },
|
|
19679
|
+
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
|
|
19680
|
+
};
|
|
19681
|
+
var VideoWidget$1 = React.memo(VideoWidget);
|
|
19682
|
+
|
|
19683
|
+
/*
|
|
19684
|
+
* @Author: binruan@chatlabs.com
|
|
19685
|
+
* @Date: 2025-03-25 13:54:27
|
|
19686
|
+
* @LastEditors: binruan@chatlabs.com
|
|
19687
|
+
* @LastEditTime: 2025-03-26 22:40:52
|
|
19688
|
+
* @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
|
|
19689
|
+
*
|
|
19690
|
+
*/
|
|
19691
|
+
const RESOLVER$1 = {};
|
|
19692
|
+
Object.values(_materials_).forEach((v) => {
|
|
19693
|
+
RESOLVER$1[v.extend.type] = v;
|
|
19694
|
+
});
|
|
19695
|
+
const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
|
|
19696
|
+
const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
|
|
19697
|
+
const recData = {
|
|
19698
|
+
position: 0,
|
|
19699
|
+
isCollected: false,
|
|
19700
|
+
product: null,
|
|
19701
|
+
video: {
|
|
19702
|
+
appId: null,
|
|
19703
|
+
itemId: 'VIDEOSsRgI1695278974368',
|
|
19704
|
+
title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
|
|
19705
|
+
enTitle: null,
|
|
19706
|
+
icon: null,
|
|
19707
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
|
|
19708
|
+
link: null,
|
|
19709
|
+
linkTitle: null,
|
|
19710
|
+
linkType: null,
|
|
19711
|
+
menuCategoryId: null,
|
|
19712
|
+
remark: null,
|
|
19713
|
+
tags: [
|
|
19714
|
+
'Gift-Giving',
|
|
19715
|
+
'Daily Wear',
|
|
19716
|
+
'Business Formal',
|
|
19717
|
+
'Sports/Casual',
|
|
19718
|
+
'Anniversary Gifts',
|
|
19719
|
+
'Wedding/Engagement',
|
|
19720
|
+
'Formal Dinner/Party'
|
|
19721
|
+
],
|
|
19722
|
+
traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19723
|
+
value: 385,
|
|
19724
|
+
weight: null,
|
|
19725
|
+
bindCta: null,
|
|
19726
|
+
bindProduct: null,
|
|
19727
|
+
bindProducts: [
|
|
19728
|
+
{
|
|
19729
|
+
appId: 'wx448578f8851f3dce',
|
|
19730
|
+
itemId: 'test02178888',
|
|
19731
|
+
title: 'christian dior小包包 新CDN',
|
|
19732
|
+
enTitle: null,
|
|
19733
|
+
icon: null,
|
|
19734
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
|
19735
|
+
link: '/pages/details/index?spu_id=1702262707659534338',
|
|
19736
|
+
linkTitle: '',
|
|
19737
|
+
linkType: 'MP',
|
|
19738
|
+
menuCategoryId: null,
|
|
19739
|
+
remark: null,
|
|
19740
|
+
tags: [],
|
|
19741
|
+
traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19742
|
+
value: null,
|
|
19743
|
+
weight: null,
|
|
19744
|
+
bindCta: {
|
|
19745
|
+
appId: 'wx448578f8851f3dce',
|
|
19746
|
+
itemId: 'CTA3KofE1716186622249',
|
|
19747
|
+
title: 'SHOP NOW 立即购买',
|
|
19748
|
+
enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
|
|
19749
|
+
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
|
|
19750
|
+
cover: null,
|
|
19751
|
+
link: '/pages/details/index?spu_id=1702262707659534338',
|
|
19752
|
+
linkTitle: '',
|
|
19753
|
+
linkType: 'MP',
|
|
19754
|
+
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
|
19755
|
+
remark: null,
|
|
19756
|
+
tags: [
|
|
19757
|
+
"Woman's Perfumes",
|
|
19758
|
+
'Plates & Bowls',
|
|
19759
|
+
'Glasses',
|
|
19760
|
+
'Multicolor',
|
|
19761
|
+
'Carafes',
|
|
19762
|
+
'Tea & Coffee',
|
|
19763
|
+
'Green',
|
|
19764
|
+
'Grey',
|
|
19765
|
+
'Cutlery'
|
|
19766
|
+
],
|
|
19767
|
+
traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19768
|
+
value: null,
|
|
19769
|
+
weight: null
|
|
19770
|
+
},
|
|
19771
|
+
collection: 'Ricco',
|
|
19772
|
+
currency: 'INR-₹',
|
|
19773
|
+
homePage: [
|
|
19774
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
|
|
19775
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
|
|
19776
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
|
|
19777
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
|
|
19778
|
+
],
|
|
19779
|
+
info: 'test',
|
|
19780
|
+
price: 53200,
|
|
19781
|
+
shippingInfo: null,
|
|
19782
|
+
taxInfo: null
|
|
19783
|
+
},
|
|
19784
|
+
{
|
|
19785
|
+
appId: null,
|
|
19786
|
+
itemId: '113J631A0684_C520',
|
|
19787
|
+
title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
|
|
19788
|
+
enTitle: null,
|
|
19789
|
+
icon: null,
|
|
19790
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
|
19791
|
+
link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
|
|
19792
|
+
linkTitle: null,
|
|
19793
|
+
linkType: 'WEB',
|
|
19794
|
+
menuCategoryId: null,
|
|
19795
|
+
remark: null,
|
|
19796
|
+
tags: [],
|
|
19797
|
+
traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19798
|
+
value: null,
|
|
19799
|
+
weight: null,
|
|
19800
|
+
bindCta: {
|
|
19801
|
+
appId: null,
|
|
19802
|
+
itemId: 'CTAAfaKf1730796437032',
|
|
19803
|
+
title: 'test',
|
|
19804
|
+
enTitle: 'test',
|
|
19805
|
+
icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
|
|
19806
|
+
cover: null,
|
|
19807
|
+
link: null,
|
|
19808
|
+
linkTitle: null,
|
|
19809
|
+
linkType: null,
|
|
19810
|
+
menuCategoryId: '64b60b202caf0e1c1ce1e17d',
|
|
19811
|
+
remark: '',
|
|
19812
|
+
tags: [],
|
|
19813
|
+
traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19814
|
+
value: null,
|
|
19815
|
+
weight: null
|
|
19816
|
+
},
|
|
19817
|
+
collection: 'Jacquard de coton éponge bleu',
|
|
19818
|
+
currency: 'EUR-€',
|
|
19819
|
+
homePage: [
|
|
19820
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
|
|
19821
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
|
|
19822
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
|
|
19823
|
+
],
|
|
19824
|
+
info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
|
|
19825
|
+
price: 1800,
|
|
19826
|
+
shippingInfo: null,
|
|
19827
|
+
taxInfo: null
|
|
19828
|
+
},
|
|
19829
|
+
{
|
|
19830
|
+
appId: null,
|
|
19831
|
+
itemId: 'S5573CRIW_M928',
|
|
19832
|
+
title: 'Mini Dior Book Tote',
|
|
19833
|
+
enTitle: null,
|
|
19834
|
+
icon: null,
|
|
19835
|
+
cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
|
19836
|
+
link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
|
|
19837
|
+
linkTitle: null,
|
|
19838
|
+
linkType: 'WEB',
|
|
19839
|
+
menuCategoryId: null,
|
|
19840
|
+
remark: null,
|
|
19841
|
+
tags: ['ダイヤモンド'],
|
|
19842
|
+
traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
|
|
19843
|
+
value: null,
|
|
19844
|
+
weight: null,
|
|
19845
|
+
bindCta: null,
|
|
19846
|
+
collection: null,
|
|
19847
|
+
currency: 'GBP-￡',
|
|
19848
|
+
homePage: [
|
|
19849
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
|
|
19850
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
|
|
19851
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
|
|
19852
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
|
|
19853
|
+
'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
|
|
19854
|
+
],
|
|
19855
|
+
info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
|
|
19856
|
+
price: 1950,
|
|
19857
|
+
shippingInfo: null,
|
|
19858
|
+
taxInfo: null
|
|
19859
|
+
}
|
|
19860
|
+
],
|
|
19861
|
+
url: null,
|
|
19862
|
+
blockCta: 1,
|
|
19863
|
+
blockProduct: 1,
|
|
19864
|
+
hashTags: [
|
|
19865
|
+
'Sports/Casual',
|
|
19866
|
+
'Formal Dinner/Party',
|
|
19867
|
+
'Business Formal',
|
|
19868
|
+
'Wedding/Engagement',
|
|
19869
|
+
'Gift-Giving',
|
|
19870
|
+
'Daily Wear',
|
|
19871
|
+
'Anniversary Gifts'
|
|
19872
|
+
]
|
|
19873
|
+
}
|
|
19874
|
+
};
|
|
19875
|
+
const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
|
|
19876
|
+
const swiperRef = React.useRef(null);
|
|
19877
|
+
React.useMemo(() => {
|
|
19878
|
+
let minusHeight = 0;
|
|
19879
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
|
19880
|
+
minusHeight += 45;
|
|
19881
|
+
}
|
|
19882
|
+
if (tagList.length > 0) {
|
|
19883
|
+
minusHeight += 45;
|
|
19884
|
+
}
|
|
19885
|
+
return containerHeight - minusHeight;
|
|
19886
|
+
}, [globalConfig, containerHeight, tagList]);
|
|
19887
|
+
// 判断是否是视频
|
|
19888
|
+
const isVideoUrl = (url) => {
|
|
19889
|
+
if (url && url !== '' && typeof url === 'string') {
|
|
19890
|
+
const imageExtensions = ['.mp4', '.m3u8'];
|
|
19891
|
+
const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
|
|
19892
|
+
return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
|
|
19893
|
+
}
|
|
19894
|
+
else {
|
|
19895
|
+
return false;
|
|
19896
|
+
}
|
|
19897
|
+
};
|
|
19898
|
+
const renderContent = (rec, index) => {
|
|
19899
|
+
const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
|
|
19900
|
+
if (isVideo) {
|
|
19901
|
+
return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlay }));
|
|
19902
|
+
}
|
|
19903
|
+
else {
|
|
19904
|
+
return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlay }));
|
|
19905
|
+
}
|
|
19906
|
+
};
|
|
19907
|
+
React.useMemo(() => {
|
|
19908
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
|
|
19909
|
+
return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
|
|
19910
|
+
React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
|
|
19911
|
+
}
|
|
19912
|
+
return null;
|
|
19913
|
+
}, [globalConfig]);
|
|
19914
|
+
const renderBottom = (rec, index) => {
|
|
19915
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19916
|
+
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
19917
|
+
let cta = null;
|
|
19918
|
+
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) {
|
|
19919
|
+
cta = '多商品CTA';
|
|
19920
|
+
}
|
|
19921
|
+
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
19922
|
+
cta = '商品CTA';
|
|
19923
|
+
}
|
|
19924
|
+
else {
|
|
19925
|
+
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;
|
|
19926
|
+
}
|
|
19927
|
+
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
19928
|
+
return (React.createElement(React.Fragment, null,
|
|
19929
|
+
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
|
|
19930
|
+
background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
|
|
19931
|
+
height: '130px',
|
|
19932
|
+
position: 'absolute',
|
|
19933
|
+
bottom: 0,
|
|
19934
|
+
width: '100%',
|
|
19935
|
+
willChange: 'transform',
|
|
19936
|
+
zIndex: 2,
|
|
19937
|
+
pointerEvents: 'none'
|
|
19938
|
+
} })),
|
|
19939
|
+
React.createElement("div", { style: {
|
|
19940
|
+
marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
|
|
19941
|
+
zIndex: 999,
|
|
19942
|
+
position: 'absolute',
|
|
19943
|
+
bottom: 0,
|
|
19944
|
+
left: 0,
|
|
19945
|
+
right: 0,
|
|
19946
|
+
paddingTop: '20px'
|
|
19947
|
+
} },
|
|
19948
|
+
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
|
|
19949
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
|
|
19950
|
+
React.createElement("div", null,
|
|
19951
|
+
React.createElement(ExpandableText$1
|
|
19952
|
+
// className='clc-sxp-bottom-text'
|
|
19953
|
+
, {
|
|
19954
|
+
// className='clc-sxp-bottom-text'
|
|
19955
|
+
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', padding: '0 20px', fontSize: '12px' }) }),
|
|
19956
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
|
|
19957
|
+
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
19958
|
+
}
|
|
19959
|
+
return null;
|
|
19960
|
+
};
|
|
19961
|
+
const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
|
|
19962
|
+
const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
|
|
19963
|
+
const renderLikeButton = (rec, index) => {
|
|
19964
|
+
var _a, _b, _c, _d;
|
|
19965
|
+
if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
|
|
19966
|
+
return;
|
|
19967
|
+
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
|
|
19968
|
+
if (top < 40) {
|
|
19969
|
+
top += 40;
|
|
19970
|
+
}
|
|
19971
|
+
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
19972
|
+
return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec,
|
|
19973
|
+
// className={style['clc-sxp-like-button']}
|
|
19974
|
+
style: {
|
|
19975
|
+
top,
|
|
19976
|
+
right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
|
|
19977
|
+
position: 'absolute',
|
|
19978
|
+
zIndex: 999,
|
|
19979
|
+
backgroundColor: 'transparent',
|
|
19980
|
+
width: '50px',
|
|
19981
|
+
height: '50px',
|
|
19982
|
+
outline: 'none',
|
|
19983
|
+
border: 'none',
|
|
19984
|
+
boxSizing: 'content-box',
|
|
19985
|
+
padding: 0,
|
|
19986
|
+
transform: 'translate3d(0px, 0px, 0px)'
|
|
19987
|
+
} }));
|
|
19988
|
+
}
|
|
19989
|
+
return null;
|
|
19990
|
+
};
|
|
19991
|
+
const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
|
|
19992
|
+
const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
|
|
19993
|
+
const renderToggleButton = (visible) => {
|
|
19994
|
+
var _a, _b, _c, _d;
|
|
19995
|
+
if (!visible)
|
|
19996
|
+
return;
|
|
19997
|
+
let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
|
|
19998
|
+
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
|
|
19999
|
+
top += 45;
|
|
20000
|
+
}
|
|
20001
|
+
return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
|
|
20002
|
+
position: 'absolute',
|
|
20003
|
+
visibility: 'visible',
|
|
20004
|
+
zIndex: 999,
|
|
20005
|
+
transform: 'translate3d(0px,0px,0px)',
|
|
20006
|
+
[(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
|
|
20007
|
+
[(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
|
|
20008
|
+
backgroundColor: 'transparent',
|
|
20009
|
+
width: '50px',
|
|
20010
|
+
height: '50px',
|
|
20011
|
+
outline: 'none',
|
|
20012
|
+
border: 'none',
|
|
20013
|
+
boxSizing: 'content-box',
|
|
20014
|
+
padding: 0
|
|
20015
|
+
}, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })));
|
|
20016
|
+
};
|
|
20017
|
+
const renderView = (item, index) => {
|
|
20018
|
+
var _a, _b, _c, _d;
|
|
20019
|
+
const rec = lodash.cloneDeep(recData);
|
|
20020
|
+
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
|
20021
|
+
return (React.createElement("div", { style: { position: 'relative' } },
|
|
20022
|
+
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
|
20023
|
+
renderBottom(rec, index),
|
|
20024
|
+
renderLikeButton(rec, index),
|
|
20025
|
+
renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
|
|
20026
|
+
React.createElement(ToggleButton$1, { style: {
|
|
20027
|
+
position: 'absolute',
|
|
20028
|
+
right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
|
|
20029
|
+
visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
|
20030
|
+
bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
|
|
20031
|
+
zIndex: 999
|
|
20032
|
+
}, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon }),
|
|
20033
|
+
renderContent(item, index))));
|
|
20034
|
+
};
|
|
20035
|
+
React.useEffect(() => {
|
|
20036
|
+
var _a, _b;
|
|
20037
|
+
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
|
20038
|
+
return;
|
|
20039
|
+
(_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(activeIndex);
|
|
20040
|
+
}, [activeIndex]);
|
|
20041
|
+
React.useEffect(() => {
|
|
20042
|
+
var _a, _b;
|
|
20043
|
+
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
|
20044
|
+
return;
|
|
20045
|
+
(_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);
|
|
20046
|
+
}, [loopPlay]);
|
|
20047
|
+
return (React.createElement("div", { id: 'sxp-render',
|
|
20048
|
+
// className={style['clc-sxp-container']}
|
|
20049
|
+
style: { height: containerHeight, position: 'relative', pointerEvents: 'none' } },
|
|
20050
|
+
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
|
|
20051
|
+
// setActiveIndex(swiper.activeIndex);
|
|
20052
|
+
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
|
20053
|
+
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
|
20054
|
+
return renderView(rec, index);
|
|
20055
|
+
}))));
|
|
20056
|
+
};
|
|
20057
|
+
var index$1 = React.memo(DiyStoryPreview);
|
|
19449
20058
|
|
|
19450
20059
|
/*
|
|
19451
20060
|
* @Author: binruan@chatlabs.com
|
|
@@ -19584,17 +20193,18 @@ Made in Italy` })));
|
|
|
19584
20193
|
* @Author : haocanweng@chatlabs.cn
|
|
19585
20194
|
* @Date : 2023-08-21 16:31:58
|
|
19586
20195
|
* @LastEditors: binruan@chatlabs.com
|
|
19587
|
-
* @LastEditTime:
|
|
20196
|
+
* @LastEditTime: 2025-03-25 14:31:53
|
|
19588
20197
|
* @FilePath: \pb-sxp-ui\src\index.ts
|
|
19589
20198
|
*/
|
|
19590
20199
|
|
|
19591
|
-
exports.DiyPortalPreview = index$
|
|
20200
|
+
exports.DiyPortalPreview = index$2;
|
|
20201
|
+
exports.DiyStoryPreview = index$1;
|
|
19592
20202
|
exports.EditorDataProvider = EditorDataProvider;
|
|
19593
20203
|
exports.Modal = Modal$1;
|
|
19594
20204
|
exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
|
|
19595
20205
|
exports.SxpPageCore = index;
|
|
19596
20206
|
exports.SxpPageRender = SxpPageRender$1;
|
|
19597
|
-
exports.core = index$
|
|
20207
|
+
exports.core = index$3;
|
|
19598
20208
|
exports.default = Pagebuilder;
|
|
19599
20209
|
exports.materials = _materials_;
|
|
19600
20210
|
exports.useEditorDataProvider = useEditorDataProvider;
|