pb-sxp-ui 1.15.15-alpha.1 → 1.15.16-alpha.1

package/lib/core/components/DiyStoryPreview/index.js

@@ -1,414 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const react_2 = require("swiper/react");
-const lodash_1 = require("lodash");
-const RenderCard_1 = tslib_1.__importDefault(require("../SxpPageRender/RenderCard"));
-const ExpandableText_1 = tslib_1.__importDefault(require("../SxpPageRender/ExpandableText"));
-const LikeButton_1 = tslib_1.__importDefault(require("../SxpPageRender/LikeButton"));
-const useIconLink_1 = require("../SxpPageRender/useIconLink");
-const ToggleButton_1 = tslib_1.__importDefault(require("../SxpPageRender/ToggleButton"));
-const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
-const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
-const _materials_ = tslib_1.__importStar(require("../../../materials"));
-require("../SxpPageRender/index.less");
-const recData = {
-    position: 0,
-    isCollected: false,
-    product: null,
-    video: {
-        appId: null,
-        itemId: 'VIDEOSsRgI1695278974368',
-        title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
-        enTitle: null,
-        icon: null,
-        cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
-        link: null,
-        linkTitle: null,
-        linkType: null,
-        menuCategoryId: null,
-        remark: null,
-        tags: [
-            'Gift-Giving',
-            'Daily Wear',
-            'Business Formal',
-            'Sports/Casual',
-            'Anniversary Gifts',
-            'Wedding/Engagement',
-            'Formal Dinner/Party'
-        ],
-        traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-        value: 385,
-        weight: null,
-        bindCta: null,
-        bindProduct: null,
-        bindProducts: [
-            {
-                appId: 'wx448578f8851f3dce',
-                itemId: 'test02178888',
-                title: 'christian dior小包包 新CDN',
-                enTitle: null,
-                icon: null,
-                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
-                link: '/pages/details/index?spu_id=1702262707659534338',
-                linkTitle: '',
-                linkType: 'MP',
-                menuCategoryId: null,
-                remark: null,
-                tags: [],
-                traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                value: null,
-                weight: null,
-                bindCta: {
-                    appId: 'wx448578f8851f3dce',
-                    itemId: 'CTA3KofE1716186622249',
-                    title: 'SHOP NOW 立即购买',
-                    enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
-                    icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
-                    cover: null,
-                    link: '/pages/details/index?spu_id=1702262707659534338',
-                    linkTitle: '',
-                    linkType: 'MP',
-                    menuCategoryId: '64b60b202caf0e1c1ce1e17d',
-                    remark: null,
-                    tags: [
-                        "Woman's Perfumes",
-                        'Plates & Bowls',
-                        'Glasses',
-                        'Multicolor',
-                        'Carafes',
-                        'Tea & Coffee',
-                        'Green',
-                        'Grey',
-                        'Cutlery'
-                    ],
-                    traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                    value: null,
-                    weight: null
-                },
-                collection: 'Ricco',
-                currency: 'INR-₹',
-                homePage: [
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
-                ],
-                info: 'test',
-                price: 53200,
-                shippingInfo: null,
-                taxInfo: null
-            },
-            {
-                appId: null,
-                itemId: '113J631A0684_C520',
-                title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
-                enTitle: null,
-                icon: null,
-                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
-                link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
-                linkTitle: null,
-                linkType: 'WEB',
-                menuCategoryId: null,
-                remark: null,
-                tags: [],
-                traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                value: null,
-                weight: null,
-                bindCta: {
-                    appId: null,
-                    itemId: 'CTAAfaKf1730796437032',
-                    title: 'test',
-                    enTitle: 'test',
-                    icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
-                    cover: null,
-                    link: null,
-                    linkTitle: null,
-                    linkType: null,
-                    menuCategoryId: '64b60b202caf0e1c1ce1e17d',
-                    remark: '',
-                    tags: [],
-                    traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                    value: null,
-                    weight: null
-                },
-                collection: 'Jacquard de coton éponge bleu',
-                currency: 'EUR-€',
-                homePage: [
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
-                ],
-                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",
-                price: 1800,
-                shippingInfo: null,
-                taxInfo: null
-            },
-            {
-                appId: null,
-                itemId: 'S5573CRIW_M928',
-                title: 'Mini Dior Book Tote',
-                enTitle: null,
-                icon: null,
-                cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
-                link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
-                linkTitle: null,
-                linkType: 'WEB',
-                menuCategoryId: null,
-                remark: null,
-                tags: ['ダイヤモンド'],
-                traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
-                value: null,
-                weight: null,
-                bindCta: null,
-                collection: null,
-                currency: 'GBP-￡',
-                homePage: [
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
-                    'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
-                ],
-                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.",
-                price: 1950,
-                shippingInfo: null,
-                taxInfo: null
-            }
-        ],
-        url: null,
-        blockCta: 1,
-        blockProduct: 1,
-        hashTags: [
-            'Sports/Casual',
-            'Formal Dinner/Party',
-            'Business Formal',
-            'Wedding/Engagement',
-            'Gift-Giving',
-            'Daily Wear',
-            'Anniversary Gifts'
-        ]
-    }
-};
-const RESOLVER = {};
-Object.values(_materials_).forEach((v) => {
-    RESOLVER[v.extend.type] = v;
-});
-const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener, onPlay, onPause }, ref) => {
-    const videoWidgetRef = (0, react_1.useRef)(null);
-    const swiperRef = (0, react_1.useRef)(null);
-    const [curIndex, setCurIndex] = (0, react_1.useState)(0);
-    const height = (0, react_1.useMemo)(() => {
-        let minusHeight = 0;
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-            minusHeight += 45;
-        }
-        if (tagList.length > 0) {
-            minusHeight += 45;
-        }
-        return containerHeight - minusHeight;
-    }, [globalConfig, containerHeight, tagList]);
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return {
-            play() {
-                var _a;
-                (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
-            },
-            pause() {
-                var _a;
-                (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
-            },
-            slideTo(n) {
-                var _a, _b;
-                if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
-                    return;
-                (_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(n);
-            },
-            isPlaying() {
-                var _a, _b;
-                return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
-            }
-        };
-    });
-    const isVideoUrl = (url) => {
-        if (url && url !== '' && typeof url === 'string') {
-            const imageExtensions = ['.mp4', '.m3u8'];
-            const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
-            return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
-        }
-        else {
-            return false;
-        }
-    };
-    const renderContent = (rec, index) => {
-        const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
-        if (isVideo) {
-            return (react_1.default.createElement(VideoWidget_1.default, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { 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, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, onUpdateTimeLine: onUpdateTimeLine, onPlay: onPlay, onPause: onPause })));
-        }
-        else {
-            return (react_1.default.createElement(PictureGroup_1.default, { 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 }));
-        }
-    };
-    const renderLogo = (0, react_1.useMemo)(() => {
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-            return (react_1.default.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
-                react_1.default.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
-        }
-        return null;
-    }, [globalConfig]);
-    const renderBottom = (rec, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (rec === null || rec === void 0 ? void 0 : rec.video) {
-            let cta = null;
-            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) {
-                cta = '多商品CTA';
-            }
-            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
-                cta = '商品CTA';
-            }
-            else {
-                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;
-            }
-            const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (react_1.default.createElement("div", { style: {
-                        background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
-                        height: '130px',
-                        position: 'absolute',
-                        bottom: 0,
-                        width: '100%',
-                        willChange: 'transform',
-                        zIndex: 2,
-                        pointerEvents
-                    } })),
-                react_1.default.createElement("div", { style: {
-                        marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
-                        zIndex: 999,
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        paddingTop: '20px'
-                    } },
-                    (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { style: {} },
-                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex, value: value }))) : null,
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement(ExpandableText_1.default, { 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' }) }),
-                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
-                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
-        }
-        return null;
-    };
-    const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath, appDomain);
-    const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath, appDomain);
-    const renderLikeButton = (rec, index) => {
-        var _a, _b, _c, _d;
-        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
-            return;
-        let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
-        if (top < 40) {
-            top += 40;
-        }
-        if (rec === null || rec === void 0 ? void 0 : rec.video) {
-            return (react_1.default.createElement(LikeButton_1.default, { 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, style: {
-                    top,
-                    right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
-                    position: 'absolute',
-                    zIndex: 999,
-                    backgroundColor: 'transparent',
-                    width: '50px',
-                    height: '50px',
-                    outline: 'none',
-                    border: 'none',
-                    boxSizing: 'content-box',
-                    padding: 0,
-                    transform: 'translate3d(0px, 0px, 0px)'
-                } }));
-        }
-        return null;
-    };
-    const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
-    const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
-    const renderToggleButton = (visible) => {
-        var _a, _b, _c, _d;
-        if (!visible)
-            return;
-        let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
-            top += 45;
-        }
-        return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
-                position: 'absolute',
-                visibility: 'visible',
-                zIndex: 999,
-                transform: 'translate3d(0px,0px,0px)',
-                [(_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,
-                [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
-                backgroundColor: 'transparent',
-                width: '50px',
-                height: '50px',
-                outline: 'none',
-                border: 'none',
-                boxSizing: 'content-box',
-                padding: 0
-            }, 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 })));
-    };
-    const renderView = (item, index) => {
-        var _a, _b, _c, _d;
-        const rec = (0, lodash_1.cloneDeep)(recData);
-        rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
-        rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
-        return (react_1.default.createElement("div", { style: { position: 'relative' } },
-            react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
-                renderBottom(rec, index),
-                renderLikeButton(rec, index),
-                renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
-                react_1.default.createElement(ToggleButton_1.default, { style: {
-                        position: 'absolute',
-                        right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
-                        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',
-                        bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
-                        zIndex: 999
-                    }, 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 }),
-                renderContent(item, index))));
-    };
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
-            return;
-        (_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);
-    }, [activeIndex]);
-    const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
-        var _a;
-        (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
-    }, 1000), []);
-    (0, react_1.useEffect)(() => {
-        if (disabledListener)
-            return;
-        const events = ['touchstart', 'touchcancel'];
-        events.forEach((event) => {
-            window.addEventListener(event, handleSessionExpire);
-        });
-        return () => {
-            events.forEach((event) => {
-                window.removeEventListener(event, handleSessionExpire);
-            });
-        };
-    }, [handleSessionExpire, disabledListener]);
-    return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
-        react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
-                swiperRef.current.swiper.allowTouchMove = false;
-                setTimeout(() => {
-                    swiperRef.current.swiper.allowTouchMove = true;
-                }, 500);
-            }, onActiveIndexChange: (swiper) => {
-                setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
-                onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
-            }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
-            return renderView(rec, index);
-        }))));
-});
-exports.default = (0, react_1.memo)(DiyStoryPreview);