pb-sxp-ui 1.0.32 → 1.0.34

package/lib/core/components/DiyPortalPreview/VideoWidget.js

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const hls_js_1 = tslib_1.__importDefault(require("hls.js"));
+const useIconLink_1 = require("../SxpPageRender/useIconLink");
+const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
+const hooks_1 = require("../../../core/hooks");
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
+    const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
+    const videoRef = (0, react_1.useRef)(null);
+    const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
+    const videoStartTime = (0, react_1.useRef)(0);
+    const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
+    const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
+    const canvasRef = (0, react_1.useRef)(null);
+    const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.muted = muted;
+    }, [muted]);
+    const handleVideoStart = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+    }, []);
+    const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+    const handlePlaying = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        setIsPauseVideo(false);
+        const item = data[index];
+        if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
+            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
+            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
+            const playType = isFirstPlay ? '0' : '1';
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'playVideo',
+                    eventDescription: 'User played the video',
+                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                    playType,
+                    startTime: videoCurrentTime,
+                    videoDuration,
+                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                    position: index + '',
+                    contentFormat: 'video',
+                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                }
+            });
+            setIsFirstPlay(false);
+        }
+    }, [bffEventReport, data, index, isFirstPlay]);
+    const handleLoadedMetadata = (0, react_1.useCallback)(() => {
+        setIsLoadFinish(true);
+    }, []);
+    const handleClickVideo = (0, react_1.useCallback)((type) => () => {
+        var _a, _b, _c, _d, _e;
+        if (!isLoadFinish)
+            return;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+        switch (type) {
+            case 'start':
+                if (!isPause)
+                    return;
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+                setIsPauseVideo(false);
+                break;
+            case 'pause':
+                if (isPause)
+                    return;
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                setIsPauseVideo(true);
+                break;
+            default:
+                if (isPause) {
+                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                }
+                else {
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                }
+                setIsPauseVideo(!isPause);
+                break;
+        }
+    }, [isLoadFinish]);
+    const onPause = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const item = data[index];
+        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+        if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
+            const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'playOverVideo',
+                    eventDescription: 'User finished playing the video',
+                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                    endTime: videoCurrentTime,
+                    videoDuration,
+                    playDuration,
+                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                    position: index + '',
+                    contentFormat: 'video',
+                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                }
+            });
+        }
+    }, [data, index, bffEventReport]);
+    const blur = (0, react_1.useMemo)(() => {
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+    }, [videoPostConfig]);
+    const translateY = (0, react_1.useMemo)(() => {
+        var _a;
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
+            ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
+            : 'translateY(-50%)';
+    }, [videoPostConfig]);
+    const blurBgSrc = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
+    }, [firstFrameSrc, rec]);
+    const handLoadeddata = (0, react_1.useCallback)(() => {
+        if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
+            return;
+        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
+        const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
+        const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+        canvas.height = targetHeight;
+        canvas.width = targetWidth;
+        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        setFirstFrameSrc(canvas.toDataURL());
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        if (!videoRef.current)
+            return;
+        setIsPauseVideo(false);
+        if (!videoRef.current.src) {
+            const videoSrc = rec.video.url;
+            if (videoSrc.includes('.m3u8')) {
+                if (hls_js_1.default.isSupported()) {
+                    const hls = new hls_js_1.default();
+                    hls.loadSource(videoSrc);
+                    hls.attachMedia(videoRef.current);
+                }
+                else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+                    videoRef.current.src = videoSrc;
+                }
+                else {
+                    videoRef.current.src = videoSrc;
+                }
+            }
+            else {
+                videoRef.current.src = videoSrc;
+            }
+            videoRef.current.setAttribute('x5-playsinline', 'true');
+            videoRef.current.setAttribute('webkit-playsinline', 'true');
+        }
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
+        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
+        return () => {
+            var _a, _b, _c, _d;
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
+        };
+    }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
+    const renderPoster = (0, react_1.useMemo)(() => {
+        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
+            return null;
+        }
+        return (react_1.default.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 }));
+    }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+    (0, react_1.useEffect)(() => {
+        const handleBeforeUnload = () => {
+            var _a, _b;
+            if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
+                handleClickVideo('pause')();
+            }
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+    const blurStyle = (0, react_1.useMemo)(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
+    if (!rec.video) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            position: 'relative',
+            width,
+            height,
+            overflow: 'hidden'
+        } },
+        react_1.default.createElement(FormatImage_1.default, { src: blurBgSrc, style: Object.assign({ height,
+                width, objectFit: 'cover' }, blurStyle) }),
+        react_1.default.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
+        react_1.default.createElement("div", { style: {
+                position: 'absolute',
+                width,
+                height,
+                top: '50%',
+                transform: translateY,
+                left: 0,
+                right: 0
+            } },
+            react_1.default.createElement("div", { style: { position: 'relative', width, height: '100%' } },
+                react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
+                        width: '100%',
+                        height,
+                        objectFit: 'contain'
+                    } }),
+                react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+        renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            position: 'relative',
+            width,
+            height,
+            overflow: 'hidden'
+        } },
+        react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
+        renderPoster,
+        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
+};
+exports.default = (0, react_1.memo)(VideoWidget);

package/lib/core/components/DiyPortalPreview/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISxpPageRenderProps } from '../SxpPageRender';
+declare const _default: React.NamedExoticComponent<ISxpPageRenderProps>;
+export default _default;

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

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const Nudge_1 = tslib_1.__importDefault(require("../SxpPageRender/Nudge"));
+const RenderCard_1 = tslib_1.__importDefault(require("../SxpPageRender/RenderCard"));
+const ExpandableText_1 = tslib_1.__importDefault(require("../SxpPageRender/ExpandableText"));
+const Hashtag_1 = tslib_1.__importDefault(require("../SxpPageRender/Hashtag"));
+const LikeButton_1 = tslib_1.__importDefault(require("../SxpPageRender/LikeButton"));
+const ToggleButton_1 = tslib_1.__importDefault(require("../SxpPageRender/ToggleButton"));
+const useIconLink_1 = require("../SxpPageRender/useIconLink");
+const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
+const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
+const _materials_ = tslib_1.__importStar(require("../../../materials"));
+const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
+const RESOLVER = {};
+Object.values(_materials_).forEach((v) => {
+    RESOLVER[v.extend.type] = v;
+});
+const DiyPortalPreview = ({ data, globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle }) => {
+    const containerWidth = 375;
+    const containerHeight = 664;
+    const height = (0, react_1.useMemo)(() => {
+        return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo) ? containerHeight - 45 : containerHeight;
+    }, [globalConfig, containerHeight]);
+    const renderContent = (rec, index) => {
+        var _a, _b, _c, _d;
+        if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+            return (react_1.default.createElement(VideoWidget_1.default, { 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 }));
+        }
+        if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
+            return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+        }
+        if (rec.product) {
+            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) {
+                return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    const t = RESOLVER[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
+                    const Component = (0, withBindDataSource_1.default)(t);
+                    const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
+                    return (react_1.default.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) || {}, id: value === null || value === void 0 ? void 0 : value.id, rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { width: containerWidth, height, overflow: 'auto' }), index: index })));
+                });
+            }
+        }
+    };
+    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;
+        if (rec.video) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
+                    react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
+                    react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
+                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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' }) })),
+                    react_1.default.createElement(Hashtag_1.default, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
+        }
+        return null;
+    };
+    const renderLikeButton = (rec, index) => {
+        var _a, _b;
+        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.video) {
+            return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, position: index, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
+                    top,
+                    right: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _b !== void 0 ? _b : 0
+                } }));
+        }
+        return null;
+    };
+    const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
+    const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
+    const renderView = (rec, index) => {
+        var _a, _b, _c, _d;
+        return (react_1.default.createElement("div", { style: { position: 'relative' } },
+            renderLogo,
+            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(rec, index),
+            renderBottom(rec, index),
+            renderLikeButton(rec, index)));
+    };
+    return (react_1.default.createElement("div", { style: {
+            width: '100%',
+            height: containerHeight,
+            display: 'flex',
+            boxSizing: 'border-box',
+            gap: 16,
+            pointerEvents: 'none',
+            userSelect: 'none'
+        } }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
+        return renderView(rec, index);
+    })));
+};
+exports.default = (0, react_1.memo)(DiyPortalPreview);

package/lib/index.d.ts

@@ -2,6 +2,7 @@ import { Pagebuilder } from './core/Pagebuilder';
 export * as core from './core';
 export * as materials from './materials';
 export { default as SxpPageRender } from './core/components/SxpPageRender';
+export { default as DiyPortalPreview } from './core/components/DiyPortalPreview';
 export { default as Modal } from './core/components/SxpPageRender/Modal';
 export { default as SxpDataSourceProvider } from './core/context/SxpDataSourceProvider';
 export { default as SxpPageCore } from './core/components/SxpPageCore';

package/lib/index.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultSetting = exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.SxpPageRender = exports.materials = exports.core = void 0;
+exports.defaultSetting = exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
 const tslib_1 = require("tslib");
 const Pagebuilder_1 = require("./core/Pagebuilder");
 exports.core = tslib_1.__importStar(require("./core"));
 exports.materials = tslib_1.__importStar(require("./materials"));
 var SxpPageRender_1 = require("./core/components/SxpPageRender");
 Object.defineProperty(exports, "SxpPageRender", { enumerable: true, get: function () { return tslib_1.__importDefault(SxpPageRender_1).default; } });
+var DiyPortalPreview_1 = require("./core/components/DiyPortalPreview");
+Object.defineProperty(exports, "DiyPortalPreview", { enumerable: true, get: function () { return tslib_1.__importDefault(DiyPortalPreview_1).default; } });
 var Modal_1 = require("./core/components/SxpPageRender/Modal");
 Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return tslib_1.__importDefault(Modal_1).default; } });
 var SxpDataSourceProvider_1 = require("./core/context/SxpDataSourceProvider");

package/lib/materials/sxp/popup/CommodityDetail/index.js

@@ -12,7 +12,7 @@ const Modal_1 = tslib_1.__importDefault(require("../../../../core/components/Sxp
 const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/ExpandableText"));
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDetail = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
     const { popupDetailData, bffEventReport, isPreview, waterFallData } = (0, hooks_1.useSxpDataSource)();
@@ -53,7 +53,7 @@ const CommodityDetail = (_a) => {
             return '$7,000';
         }
     }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-    const width = isPreview ? 375 : window.innerWidth;
+    const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
     const renderContent = ({ isPost }) => {
         var _a, _b, _c;
         return (react_1.default.createElement("div", null,
@@ -61,10 +61,10 @@ const CommodityDetail = (_a) => {
             react_1.default.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
             react_1.default.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
             react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
-                react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
-            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
-            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
-            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
+                react_1.default.createElement(ExpandableText_1.default, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
+            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
+            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
+            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
             18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
     };
     const renderBtn = () => {
@@ -73,7 +73,7 @@ const CommodityDetail = (_a) => {
     };
     return (react_1.default.createElement("div", { className: 'pb-commondity' },
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
+            product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'swipe-item-active-bullet',
                     clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -81,7 +81,7 @@ const CommodityDetail = (_a) => {
                         : 'commondityDetail-swiper-clickable-center'
                 }, loop: true, autoplay: {
                     delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
+                } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
                 return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
                     react_1.default.createElement("div", { style: {
                             overflow: 'hidden',
@@ -90,7 +90,7 @@ const CommodityDetail = (_a) => {
                         } },
                         react_1.default.createElement(FormatImage_1.default, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
-            !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
+            !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -103,7 +103,7 @@ const CommodityDetail = (_a) => {
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
             react_1.default.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) },

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -12,7 +12,7 @@ const ExpandableText_1 = tslib_1.__importDefault(require("../../../../core/compo
 const useEventReport_1 = require("../../../../core/hooks/useEventReport");
 const FormatImage_1 = tslib_1.__importDefault(require("../../../../core/components/SxpPageRender/FormatImage"));
 const CommodityDetailDiroNew = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = tslib_1.__rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
     const [spread, setSpread] = (0, react_1.useState)(true);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
@@ -60,7 +60,7 @@ const CommodityDetailDiroNew = (_a) => {
             return '£102,300.00';
         }
     }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-    const width = isPreview ? 375 : window.innerWidth;
+    const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
     const handleClickCollapse = () => {
         setSpread(!spread);
     };
@@ -86,12 +86,12 @@ const CommodityDetailDiroNew = (_a) => {
     const productInfoText = ({ isPost }) => {
         return (react_1.default.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
             react_1.default.createElement(ExpandableText_1.default, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
-                    `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+                    `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
 Made in Italy` })));
     };
     return (react_1.default.createElement("div", { className: 'pb-commondityDiroNew' },
         react_1.default.createElement("div", Object.assign({ ref: scrollRef, className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            product && ((_f = product === null || product === void 0 ? void 0 : product.homePage) === null || _f === void 0 ? void 0 : _f.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
+            product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: width, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
                     clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -99,7 +99,7 @@ Made in Italy` })));
                         : 'commondityDiroNew-swiper-clickable-center'
                 }, loop: true, autoplay: {
                     delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.map((src) => {
+                } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
                 return (react_1.default.createElement(react_2.SwiperSlide, { key: src },
                     react_1.default.createElement("div", { style: {
                             overflow: 'hidden',
@@ -108,7 +108,7 @@ Made in Italy` })));
                         } },
                         react_1.default.createElement(FormatImage_1.default, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
             }))),
-            !((_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
+            !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -121,16 +121,16 @@ Made in Italy` })));
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : bottom_image, alt: '' }))),
+                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
             react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
-                        react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_k = product === null || product === void 0 ? void 0 : product.title) !== null && _k !== void 0 ? _k : 'Large Dior Toujours Bag'),
+                        react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title }, (_l = product === null || product === void 0 ? void 0 : product.title) !== null && _l !== void 0 ? _l : 'Large Dior Toujours Bag'),
                         react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection }, (product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage Calfskin')),
                     react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
                         react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price }, priceText),
-                        react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_l = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _l !== void 0 ? _l : '税费'))),
-                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_m = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _m !== void 0 ? _m : 'Shop now')),
+                        react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
                 productInfoText({ isPost }))),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };