pb-sxp-ui 1.0.41 → 1.0.43

package/lib/index.d.ts

@@ -2,7 +2,6 @@ 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,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultSetting = exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
+exports.defaultSetting = exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = 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, _k;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
     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 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
+    const width = isPreview ? 375 : window.innerWidth;
     const renderContent = ({ isPost }) => {
         var _a, _b, _c;
         return (react_1.default.createElement("div", null,
@@ -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 && ((_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: {
+            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: {
                     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
-                } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
+                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.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 }))));
             }))),
-            !((_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)({
+            !((_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)({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -103,7 +103,7 @@ const CommodityDetail = (_a) => {
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : 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, _o;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     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 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
+    const width = isPreview ? 375 : window.innerWidth;
     const handleClickCollapse = () => {
         setSpread(!spread);
     };
@@ -91,7 +91,7 @@ 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 && ((_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: {
+            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: {
                     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
-                } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
+                } }, (_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.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 }))));
             }))),
-            !((_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)({
+            !((_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)({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -121,16 +121,16 @@ Made in Italy` })));
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                    }), src: (_j = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _j !== void 0 ? _j : 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 }, (_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-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-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 }, (_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')),
+                        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')),
                 productInfoText({ isPost }))),
         react_1.default.createElement(Modal_1.default, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -42,7 +42,6 @@
     "antd": "^5.15.3",
     "eslint": "^8.48.0",
     "eventemitter3": "^5.0.1",
-    "hls.js": "^1.5.8",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",

package/es/core/components/DiyPortalPreview/PictureGroup.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { RecItemType } from '../SxpPageRender/typing';
-import { postConfigType } from '../SxpPageRender';
-interface IPictureGroupProps {
-    imgUrls?: string[];
-    width: number;
-    height: number;
-    rec: RecItemType;
-    index: number;
-    imgUrlsPostConfig?: postConfigType;
-}
-declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
-export default _default;

package/es/core/components/DiyPortalPreview/PictureGroup.js

@@ -1,11 +0,0 @@
-import React, { memo } from 'react';
-import { Autoplay, Pagination } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import Picture from '../SxpPageRender/PictureGroup/Picture';
-const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
-    return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-        return (React.createElement(SwiperSlide, { key: url },
-            React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
-    })));
-};
-export default memo(PictureGroup);

package/es/core/components/DiyPortalPreview/VideoWidget.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { RecItemType } from '../SxpPageRender/typing';
-import { postConfigType } from '../SxpPageRender';
-interface IVideoWidgetProps {
-    rec: RecItemType;
-    index: number;
-    height: number;
-    width: number;
-    data: RecItemType[];
-    muted: boolean;
-    activeIndex?: number;
-    videoPostConfig?: postConfigType;
-}
-declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
-export default _default;

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

@@ -1,236 +0,0 @@
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Hls from 'hls.js';
-import { useIconLink } from '../SxpPageRender/useIconLink';
-import FormatImage from '../SxpPageRender/FormatImage';
-import { useSxpDataSource } from '../../../core/hooks';
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
-    const [isPauseVideo, setIsPauseVideo] = useState(false);
-    const videoRef = useRef(null);
-    const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
-    const videoStartTime = useRef(0);
-    const [isLoadFinish, setIsLoadFinish] = useState(false);
-    const [isFirstPlay, setIsFirstPlay] = useState(true);
-    const canvasRef = useRef(null);
-    const [firstFrameSrc, setFirstFrameSrc] = useState('');
-    useEffect(() => {
-        if (!videoRef.current)
-            return;
-        videoRef.current.muted = muted;
-    }, [muted]);
-    const handleVideoStart = useCallback(() => {
-        var _a;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-    }, []);
-    const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-    const handlePlaying = 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 = useCallback(() => {
-        setIsLoadFinish(true);
-    }, []);
-    const handleClickVideo = 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 = 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 = useMemo(() => {
-        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-    }, [videoPostConfig]);
-    const translateY = 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 = 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 = 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());
-    }, []);
-    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.isSupported()) {
-                    const hls = new Hls();
-                    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 = useMemo(() => {
-        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
-            return null;
-        }
-        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 }));
-    }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
-    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 = useMemo(() => {
-        return blur
-            ? {
-                filter: 'blur(10px)',
-                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
-            }
-            : {};
-    }, [blur]);
-    if (!rec.video) {
-        return null;
-    }
-    return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-            position: 'relative',
-            width,
-            height,
-            overflow: 'hidden'
-        } },
-        React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height,
-                width, objectFit: 'cover' }, blurStyle) }),
-        React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
-        React.createElement("div", { style: {
-                position: 'absolute',
-                width,
-                height,
-                top: '50%',
-                transform: translateY,
-                left: 0,
-                right: 0
-            } },
-            React.createElement("div", { style: { position: 'relative', width, height: '100%' } },
-                React.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.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
-        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-            position: 'relative',
-            width,
-            height,
-            overflow: 'hidden'
-        } },
-        React.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.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
-};
-export default memo(VideoWidget);

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import { ISxpPageRenderProps } from '../SxpPageRender';
-declare const _default: React.NamedExoticComponent<ISxpPageRenderProps & {
-    appDomain?: string | undefined;
-}>;
-export default _default;

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

@@ -1,112 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import Nudge from '../SxpPageRender/Nudge';
-import RenderCard from '../SxpPageRender/RenderCard';
-import ExpandableText from '../SxpPageRender/ExpandableText';
-import Hashtag from '../SxpPageRender/Hashtag';
-import LikeButton from '../SxpPageRender/LikeButton';
-import ToggleButton from '../SxpPageRender/ToggleButton';
-import { useIconLink } from '../SxpPageRender/useIconLink';
-import PictureGroup from './PictureGroup';
-import VideoWidget from './VideoWidget';
-import * as _materials_ from '../../../materials';
-import withBindDataSource from '../../../core/hoc/withBindDataSource';
-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 DiyPortalPreview = ({ data, globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain }) => {
-    const height = 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.createElement(VideoWidget, { 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.createElement(PictureGroup, { 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 = withBindDataSource(t);
-                    const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
-                    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) || {}, 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 = useMemo(() => {
-        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-            return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
-                React.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.createElement(React.Fragment, null,
-                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
-                React.createElement("div", { className: 'clc-sxp-bottom' },
-                    React.createElement(Nudge, { nudge: nudge }),
-                    React.createElement("div", { className: 'clc-sxp-bottom-card' },
-                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })),
-                    React.createElement("div", null,
-                        React.createElement(ExpandableText, { 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.createElement(Hashtag, { 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 likeIcon = useIconLink(defaultLikeIconPath, appDomain);
-    const unlikeIcon = 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.video) {
-            return (React.createElement(LikeButton, { 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, className: 'clc-sxp-like-button', style: {
-                    top,
-                    right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
-                } }));
-        }
-        return null;
-    };
-    const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
-    const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
-    const renderView = (rec, index) => {
-        var _a, _b, _c, _d;
-        return (React.createElement("div", { style: { position: 'relative' } },
-            renderLogo,
-            React.createElement(ToggleButton, { 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.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);
-    })));
-};
-export default memo(DiyPortalPreview);

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { RecItemType } from '../SxpPageRender/typing';
-import { postConfigType } from '../SxpPageRender';
-interface IPictureGroupProps {
-    imgUrls?: string[];
-    width: number;
-    height: number;
-    rec: RecItemType;
-    index: number;
-    imgUrlsPostConfig?: postConfigType;
-}
-declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
-export default _default;

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

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const modules_1 = require("swiper/modules");
-const react_2 = require("swiper/react");
-const Picture_1 = tslib_1.__importDefault(require("../SxpPageRender/PictureGroup/Picture"));
-const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
-    return (react_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-        return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
-            react_1.default.createElement(Picture_1.default, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
-    })));
-};
-exports.default = (0, react_1.memo)(PictureGroup);

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { RecItemType } from '../SxpPageRender/typing';
-import { postConfigType } from '../SxpPageRender';
-interface IVideoWidgetProps {
-    rec: RecItemType;
-    index: number;
-    height: number;
-    width: number;
-    data: RecItemType[];
-    muted: boolean;
-    activeIndex?: number;
-    videoPostConfig?: postConfigType;
-}
-declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
-export default _default;