pb-sxp-ui 1.0.37 → 1.0.39

package/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -17,12 +17,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const { isActive } = (0, react_2.useSwiperSlide)();
     const canvasRef = (0, react_1.useRef)(null);
     const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
+    const videoId = `pb-video-${index}`;
     (0, react_1.useEffect)(() => {
         if (!videoRef.current)
             return;
-        videoRef.current.muted = muted;
+        videoRef.current.muted(muted);
     }, [muted]);
-    const handleVideoStart = (0, react_1.useCallback)(() => {
+    const handleEnded = (0, react_1.useCallback)(() => {
         var _a;
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
     }, []);
@@ -31,10 +32,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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);
+        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: {
@@ -54,14 +55,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             setIsFirstPlay(false);
         }
     }, [bffEventReport, data, index, isFirstPlay]);
-    const handleLoadedMetadata = (0, react_1.useCallback)(() => {
+    const handleCanplay = (0, react_1.useCallback)(() => {
+        handLoadeddata();
         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;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused();
         switch (type) {
             case 'start':
                 if (!isPause)
@@ -86,13 +88,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 break;
         }
     }, [isLoadFinish]);
-    const onPause = (0, react_1.useCallback)(() => {
+    const handlePause = (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);
+        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',
@@ -124,41 +126,64 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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)
+        var _a;
+        const videoDomRef = document.getElementById(`${videoId}_html5_api`);
+        if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !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());
+        const setFrameImg = () => {
+            const video = videoDomRef;
+            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());
+        };
+        setFrameImg();
+        setTimeout(() => {
+            setFrameImg();
+        }, 500);
     }, []);
     (0, react_1.useEffect)(() => {
-        var _a, _b, _c, _d;
-        if (!videoRef.current)
-            return;
+        var _a, _b, _c, _d, _e;
         setIsPauseVideo(false);
-        if (!videoRef.current.src) {
-            const videoSrc = rec.video.url;
-            videoRef.current.src = videoSrc;
-            videoRef.current.setAttribute('x5-playsinline', 'true');
-            videoRef.current.setAttribute('webkit-playsinline', 'true');
+        const videoSrc = rec.video.url;
+        if (videoSrc && typeof TCPlayer === 'function') {
+            videoRef.current = TCPlayer(videoId, {
+                sources: [
+                    {
+                        src: videoSrc
+                    }
+                ],
+                licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
+                controls: false,
+                autoplay: false,
+                loop: false,
+                muted: true,
+                preload: 'auto',
+                posterImage: false,
+                bigPlayButton: true
+            });
+            videoRef.current.play();
+            videoRef.current.pause();
         }
-        (_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);
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
+        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
+        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('pause', handlePause);
+        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('ended', handleEnded);
         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);
+            var _a, _b, _c, _d, _e;
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('pause', handlePause);
+            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('ended', handleEnded);
+            videoRef.current.dispose();
         };
-    }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
+    }, []);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -241,19 +266,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 right: 0
             } },
             react_1.default.createElement("div", { style: { position: 'relative', width: '100%', 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: {
+                react_1.default.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
                         width: '100%',
                         height: '100%',
-                        objectFit: 'contain'
+                        objectFit: 'contain',
+                        backgroundColor: 'transparent',
+                        pointerEvents: 'none'
                     } }),
                 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: {
+        renderPoster)) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
             position: 'relative',
             width: '100%',
             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 }),
+        }, onClick: handleClickVideo() },
+        react_1.default.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
+                backgroundColor: 'transparent',
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                pointerEvents: 'none'
+            } }),
         renderPoster,
         react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
 };

package/lib/core/components/SxpPageRender/WaterFall/index.js

@@ -66,7 +66,7 @@ const WaterFall = (props) => {
         }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
-                contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
                 position: cacheActiveIndex + '',
                 contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
                 traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,

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

@@ -123,12 +123,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         sessionDuration: Math.floor((new Date() - curTime.current) / 1000) + '',
                         eventSubject: 'sessionCompleted',
                         eventDescription: 'Session completed',
-                        contentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
-                        productId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
+                        relatedContentId: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.itemId,
+                        relatedProductId: (_m = item === null || item === void 0 ? void 0 : item.product) === null || _m === void 0 ? void 0 : _m.itemId,
                         position: activeIndex + '',
                         fromKName,
                         fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                        ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
+                        relatedCtatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
                     }
                 });
             }
@@ -261,8 +261,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 eventInfo: {
                     eventSubject: 'scrollDown',
                     eventDescription: 'User scroll down',
-                    contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
-                    productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    relatedContentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
+                    relatedProductId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
                     requestId: null
                 }
             });
@@ -273,8 +273,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 eventInfo: {
                     eventSubject: 'scrollUp',
                     eventDescription: 'User scroll up',
-                    contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                    productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                    relatedContentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                    relatedProductId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
                     requestId: null
                 }
             });

package/lib/core/context/SxpDataSourceProvider.js

@@ -144,7 +144,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             fromKName = 'imagePage';
         }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
+            eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', relatedContentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', relatedProductId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : '', fromKName })
         });
     }, [bffEventReport, isFromHashtag]);
     (0, react_1.useEffect)(() => {

package/lib/core/hooks/useEventReport.js

@@ -35,8 +35,8 @@ function useEventReport() {
                 fromKPage: location === null || location === void 0 ? void 0 : location.href,
                 contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
                 position: position + '',
-                contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
-                ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
+                relatedContentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
+                relatedCtatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
                 traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
             }
         });
@@ -60,8 +60,8 @@ function useEventReport() {
                 fromKPage: location === null || location === void 0 ? void 0 : location.href,
                 contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
                 position: position + '',
-                contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
+                relatedContentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                relatedCtatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
                 traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
                 timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
                 eventSubject: 'productView',

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.37",
+  "version": "1.0.39",
   "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;