pb-sxp-ui 1.0.43 → 1.0.45

package/es/core/context/SxpDataSourceProvider.js

@@ -5,7 +5,8 @@ import { storeAndLoadFeSessionId } from '../utils/sessionStore';
 import { storeAndLoadFeUserId } from '../utils/localStore';
 import { useIconLink } from '../components/SxpPageRender/useIconLink';
 export const SxpDataSourceContext = createContext({
-    rtcList: []
+    rtcList: [],
+    tagList: []
 });
 var DataSourceType;
 (function (DataSourceType) {
@@ -14,6 +15,7 @@ var DataSourceType;
 const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
 const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false }) => {
     const [rtcList, setRtcList] = useState([]);
+    const [tagList, setTagList] = useState([]);
     const [loading, setLoading] = useState(false);
     const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
     const swiperRef = useRef(null);
@@ -127,6 +129,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/customform', { method: 'POST', body }));
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
+    const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _g, _h;
+        if (!utmVal)
+            return;
+        try {
+            const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: utmVal } }));
+            setTagList((_h = (_g = result === null || result === void 0 ? void 0 : result.data) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []);
+        }
+        catch (e) {
+            console.log('e', e);
+        }
+    }), [bffFetch, utmVal]);
     const ctaEvent = useCallback((eventInfo, rec, product, position) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -142,11 +156,12 @@ 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 + '', 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 })
+            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 })
         });
     }, [bffEventReport, isFromHashtag]);
     useEffect(() => {
         setLoading(true);
+        bffGetTagList();
         getRecommendVideos()
             .then((data) => {
             var _a, _b;
@@ -162,6 +177,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         if (!isInit.current)
             return;
         setLoading(true);
+        bffGetTagList();
         getRecommendVideos()
             .then((data) => {
             var _a, _b;
@@ -171,7 +187,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .finally(() => {
             setLoading(false);
         });
-    }, [getRecommendVideos]);
+    }, [getRecommendVideos, bffGetTagList]);
     const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
     return (React.createElement(SxpDataSourceContext.Provider, { value: {
             rtcList,
@@ -204,8 +220,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             hashTagSize,
             loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
             isOpenHashTag,
+            tagList,
+            setLoading,
             videoRef,
             setVideoRef
-        } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
+        } }, render({
+        rtcList,
+        mutateLike: bffMutateLike,
+        mutateUnlike: bffMutateUnlike,
+        submitForm: bffSubmitForm,
+        tagList
+    })));
 };
 export default memo(SxpDataSourceProvider);

package/es/core/hooks/useEventReport.js

@@ -32,8 +32,8 @@ export 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 + '',
-                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 : '',
+                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 : '',
                 traceInfo: (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : ''
             }
         });
@@ -57,8 +57,8 @@ export 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 + '',
-                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,
+                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,
                 traceInfo: product === null || product === void 0 ? void 0 : product.traceInfo,
                 timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
                 eventSubject: 'productView',

package/es/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/es/index.js

@@ -4,6 +4,7 @@ export { core_1 as core };
 import * as materials_1 from './materials';
 export { materials_1 as 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/es/materials/sxp/popup/CommodityDetail/index.js

@@ -10,7 +10,7 @@ import Modal from '../../../../core/components/SxpPageRender/Modal';
 import ExpandableText from '../../../../core/components/SxpPageRender/ExpandableText';
 import FormatImage from '../../../../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 = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const { popupDetailData, bffEventReport, isPreview, waterFallData } = useSxpDataSource();
@@ -51,7 +51,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.createElement("div", null,
@@ -71,7 +71,7 @@ const CommodityDetail = (_a) => {
     };
     return (React.createElement("div", { className: 'pb-commondity' },
         React.createElement("div", Object.assign({ className: 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.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+            product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'swipe-item-active-bullet',
                     clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -79,7 +79,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.createElement(SwiperSlide, { key: src },
                     React.createElement("div", { style: {
                             overflow: 'hidden',
@@ -88,7 +88,7 @@ const CommodityDetail = (_a) => {
                         } },
                         React.createElement(FormatImage, { 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.createElement("div", { className: css({
+            !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -101,7 +101,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.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),
         React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },

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

@@ -10,7 +10,7 @@ import ExpandableText from '../../../../core/components/SxpPageRender/Expandable
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 import FormatImage from '../../../../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 = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
     const [spread, setSpread] = useState(true);
     const { sxpParameter } = useSxpDataSource();
@@ -58,7 +58,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);
     };
@@ -89,7 +89,7 @@ Made in Italy` })));
     };
     return (React.createElement("div", { className: 'pb-commondityDiroNew' },
         React.createElement("div", Object.assign({ ref: scrollRef, className: 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.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+            product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
                     clickable: true,
                     bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
                     clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
@@ -97,7 +97,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.createElement(SwiperSlide, { key: src },
                     React.createElement("div", { style: {
                             overflow: 'hidden',
@@ -106,7 +106,7 @@ Made in Italy` })));
                         } },
                         React.createElement(FormatImage, { 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.createElement("div", { className: css({
+            !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css({
                     position: 'relative',
                     height: 0,
                     width: '100%',
@@ -119,16 +119,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.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
-                        React.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.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.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.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
                         React.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.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.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.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.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.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,14 @@
+"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

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