pb-sxp-ui 1.0.88 → 1.0.89

package/dist/index.cjs

@@ -9,8 +9,8 @@ var React = require('react');
 var qs = require('qs');
 var EventEmitter = require('eventemitter3');
 var css = require('@emotion/css');
-var proComponents = require('@ant-design/pro-components');
 var ReactDOM = require('react-dom');
+var Hls = require('hls.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -1358,7 +1358,7 @@ const AppointForm$1 = (_a) => {
             key: '4'
         }
     ], []);
-    const columnsData = React.useMemo(() => {
+    React.useMemo(() => {
         if (layoutType === undefined) {
             const list = lodash.cloneDeep(columns) || defaultColumns;
             return list === null || list === void 0 ? void 0 : list.map((obj) => (Object.assign(Object.assign({}, obj), { title: undefined, fieldProps: { placeholder: obj === null || obj === void 0 ? void 0 : obj.title } })));
@@ -1401,8 +1401,7 @@ const AppointForm$1 = (_a) => {
     return (React.createElement("div", { className: 'pb-appoint-form' },
         React.createElement("div", { className: `pb-appoint-form-title ${css.css(Object.assign({}, textStyle))}` }, title),
         React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
-            React.createElement("div", { className: 'pb-appoint-form-container' },
-                React.createElement(proComponents.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
+            React.createElement("div", { className: 'pb-appoint-form-container' })),
         React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
             React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
 };
@@ -8596,26 +8595,21 @@ var ExpandableText$1 = React.memo(ExpandableText);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-19 16:25:46
+ * @LastEditTime: 2024-06-20 18:56:52
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
  *
  */
 const FormatImage = React.forwardRef((props, ref) => {
     const { src, onLoad, style, className, loading } = props;
     const [imgSrc, setImgSrc] = React.useState();
-    const { swiperRef } = useSxpDataSource();
     React.useImperativeHandle(ref, () => ({
         setSrc: (v) => {
             setImgSrc(v);
         }
     }));
     React.useEffect(() => {
-        var _a, _b;
-        // 首屏不加载第二屏之后的图片
-        const index = (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.activeIndex;
-        if (index === 0 || index > 0)
-            setImgSrc(src);
-    }, [src, swiperRef]);
+        setImgSrc(src);
+    }, [src]);
     React.useRef(null);
     // useEffect(() => {
     //   let observer: any = null;
@@ -9627,6 +9621,38 @@ var interactionRender$6 = [
     }
 ];
 
+const EventProvider = (_a) => {
+    var { rec, children, className, onClick, style, isExternalLink = false, index } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
+    const ref = React.useRef(null);
+    const { popup } = useEditor();
+    const { setPopupDetailData, ctaEvent } = useSxpDataSource();
+    const { jumpToWeb } = useEventReport();
+    const handleClick = lodash.throttle(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+            eventSubject: 'clickCta',
+            eventDescription: 'User clicked the CTA'
+        }, rec, item, index);
+        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
+        if (isExternalLink) {
+            if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
+                const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
+                const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
+                jumpToWeb(rec, product, cta, index);
+                window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
+            }
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    }, popup === null || popup === void 0 ? void 0 : popup.duration);
+    return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
+};
+var EventProvider$1 = React.memo(EventProvider);
+
+var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
+
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2023-04-12 09:58:58
@@ -9654,64 +9680,40 @@ function useOnScreen(ref) {
     return isOnScreen;
 }
 
-const EventProvider = (_a) => {
-    var { rec, children, className, onClick, style, isExternalLink = false, index } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
+/*
+ * @Author: binruan@chatlabs.com
+ * @Date: 2024-01-16 14:50:13
+ * @LastEditors: binruan@chatlabs.com
+ * @LastEditTime: 2024-06-21 11:59:25
+ * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
+ *
+ */
+const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
     const ref = React.useRef(null);
     const isOnScreen = useOnScreen(ref);
-    const { popup } = useEditor();
-    const { setPopupDetailData, ctaEvent } = useSxpDataSource();
-    const { jumpToWeb } = useEventReport();
+    const { ctaEvent } = useSxpDataSource();
     React.useEffect(() => {
-        var _a, _b;
-        if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-            const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current)) {
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'ctaExposure',
                 eventDescription: 'The cta was shown to the user'
             }, rec, item, index);
         }
-    }, [isOnScreen, ref, rec, ctaEvent, index]);
-    const handleClick = lodash.throttle(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
-        ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-            eventSubject: 'clickCta',
-            eventDescription: 'User clicked the CTA'
-        }, rec, item, index);
-        setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
-        if (isExternalLink) {
-            if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
-                const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
-                const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
-                jumpToWeb(rec, product, cta, index);
-                window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
-            }
-        }
-        else {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }
-    }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
+    }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
+    return (React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
+        React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
+            React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: `${src}?imrquality/rquality/40` }))));
 };
-var EventProvider$1 = React.memo(EventProvider);
-
-var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
+var Img$1 = React.memo(Img);
 
 const Commodity$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement(FormatImage$1, { className: css.css({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -9720,8 +9722,8 @@ const Commodity$1 = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-            React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
+            React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+            React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
 };
 var CommodityComponent = React.memo(Commodity$1);
 
@@ -9794,14 +9796,14 @@ var interactionRender$5 = [
 ];
 
 const Appoint$1 = (_a) => {
-    var _b, _c, _d, _e;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+    var _b, _c, _d, _e, _f, _g;
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
-        React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
-        React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
+    const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name')));
 };
 var AppointComponent = React.memo(Appoint$1);
 
@@ -9858,7 +9860,7 @@ const Appoint = createMaterial(AppointComponent, {
 var styles$5 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__nkBlU"};
 
 const Link$1 = (_a) => {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g, _h;
     var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index"]);
     const { sxpParameter, bffEventReport } = useSxpDataSource();
     const { jumpToWeb } = useEventReport();
@@ -9870,16 +9872,16 @@ const Link$1 = (_a) => {
             window.location.href = window.getJointUtmLink(cta.link);
         }
     };
+    const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
     return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
-        React.createElement("div", { className: css.css(Object.assign({ backgroundColor: '#f2f2f2', overflow: 'hidden', flexShrink: 0 }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image })),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.bindProduct) !== null && _g !== void 0 ? _g : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         React.createElement("div", { className: css.css({
                 display: 'flex',
                 alignItems: 'center',
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles$5['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_f = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _f !== void 0 ? _f : 'Product Name'))));
+            React.createElement("div", { className: styles$5['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle }, (_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name'))));
 };
 var LinkComponent = React.memo(Link$1);
 
@@ -9947,20 +9949,13 @@ var interactionRender$4 = [
 var styles$4 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
 
 const CommodityDiro$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement(FormatImage$1, { className: css.css({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -9969,8 +9964,8 @@ const CommodityDiro$1 = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-            React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now'))));
+            React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+            React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now'))));
 };
 var CommodityDiroComponent = React.memo(CommodityDiro$1);
 
@@ -10045,20 +10040,13 @@ var interactionRender$3 = [
 var styles$3 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
 
 const CommodityDiroNew$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
     const { sxpParameter } = useSxpDataSource();
     const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
     const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
-        React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-            React.createElement(FormatImage$1, { className: css.css({
-                    width: '100%',
-                    objectFit: 'cover',
-                    height: '100%',
-                    display: 'block',
-                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                }), src: src })),
+    return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+        React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
         React.createElement("div", { className: css.css({
                 color: '#fff',
                 display: 'flex',
@@ -10067,8 +10055,8 @@ const CommodityDiroNew$1 = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_g = product === null || product === void 0 ? void 0 : product.title) !== null && _g !== void 0 ? _g : 'Product Name'),
-            React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_j = (_h = product === null || product === void 0 ? void 0 : product.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop now'))));
+            React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name'),
+            React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop now'))));
 };
 var CommodityDiroNewComponent = React.memo(CommodityDiroNew$1);
 
@@ -10146,31 +10134,6 @@ const Scroll = ({ children, isPadding = true }) => {
 };
 var Scroll$1 = React.memo(Scroll);
 
-/*
- * @Author: binruan@chatlabs.com
- * @Date: 2024-01-16 14:50:13
- * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-05-21 16:34:13
- * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
- *
- */
-const Img = ({ src, rec, item, index, style }) => {
-    const ref = React.useRef(null);
-    const isOnScreen = useOnScreen(ref);
-    const { ctaEvent } = useSxpDataSource();
-    React.useEffect(() => {
-        if (isOnScreen && src && (ref === null || ref === void 0 ? void 0 : ref.current)) {
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'ctaExposure',
-                eventDescription: 'The cta was shown to the user'
-            }, rec, item, index);
-        }
-    }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
-        React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }, style)), src: src })));
-};
-var Img$1 = React.memo(Img);
-
 var styles$2 = {"two-line-ellipsis":"index-module_two-line-ellipsis__SFQwJ"};
 
 const MultiCommodityDiro$1 = (_a) => {
@@ -10198,11 +10161,8 @@ const MultiCommodityDiro$1 = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             React.createElement("div", { className: css.css({
                     color: '#000',
                     display: 'flex',
@@ -10212,7 +10172,7 @@ const MultiCommodityDiro$1 = (_a) => {
                     overflow: 'hidden'
                 }) },
                 React.createElement("div", { className: styles$2['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
+                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
     })));
 };
 var MultiCommodityDiroComponent = React.memo(MultiCommodityDiro$1);
@@ -10313,11 +10273,8 @@ const MultiCommodity$1 = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             React.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -10327,7 +10284,7 @@ const MultiCommodity$1 = (_a) => {
                     overflow: 'hidden'
                 }) },
                 React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
+                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))))));
     })));
 };
 var MultiCommodityComponent = React.memo(MultiCommodity$1);
@@ -10427,11 +10384,8 @@ const MultiCommodityDiroNew$1 = (_a) => {
     }, popup === null || popup === void 0 ? void 0 : popup.duration);
     return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
-                    } })),
+        return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+            React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             React.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -10442,7 +10396,7 @@ const MultiCommodityDiroNew$1 = (_a) => {
                     lineHeight: '20px'
                 }) },
                 React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))));
+                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))))));
     })));
 };
 var MultiCommodityDiroNewComponent = React.memo(MultiCommodityDiroNew$1);
@@ -12949,7 +12903,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
     React.useEffect(() => {
         if (!videoRef)
             return;
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.muted(muted);
+        videoRef.muted = muted;
     }, [muted, videoRef]);
     const handleEnded = React.useCallback(() => {
         if (!videoRef)
@@ -12964,10 +12918,10 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         setIsLoadFinish(true);
         setIsPauseVideo(false);
         const item = data[index];
-        if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration())) {
-            videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) || 0;
-            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
-            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
+            videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
+            const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+            const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
             const playType = isFirstPlay ? '0' : '1';
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
@@ -12991,21 +12945,17 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         var _a;
         if (!videoRef || firstFrameSrc || !blur)
             return;
-        const videoDomRef = document.getElementById('player-container-id_html5_api');
-        if (!videoDomRef)
-            return;
-        videoDomRef.style.objectFit = 'contain';
+        videoRef.style.objectFit = 'contain';
         if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !canvasRef.current || isBgColor)
             return;
         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);
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef, 0, 0, canvas.width, canvas.height);
             setFirstFrameSrc(canvas.toDataURL());
         };
         setFrameImg();
@@ -13017,21 +12967,13 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         if (!videoRef)
             return;
         handLoadeddata();
-        // if (activeIndex !== index) {
-        //   videoRef?.play();
-        //   videoRef?.pause();
-        // }
-        // setIsLoadFinish(true);
     }, [videoRef, handLoadeddata]);
-    React.useCallback(() => {
-        setIsLoadFinish(true);
-    }, []);
     const handleClickVideo = React.useCallback((type) => () => {
         if (!videoRef)
             return;
         if (!isLoadFinish)
             return;
-        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
+        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
@@ -13063,10 +13005,10 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         if (activeIndex !== index)
             return;
         const item = data[index];
-        const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) !== null && _a !== void 0 ? _a : 0).toFixed(2);
-        const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration()) {
-            const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime()) - videoStartTime.current).toFixed(2);
+        const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
+        const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+        if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) {
+            const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) - videoStartTime.current).toFixed(2);
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playOverVideo',
@@ -13090,7 +13032,19 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
         if (!videoSrc)
             return;
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
+        if (videoSrc.includes('.m3u8')) {
+            if (Hls.isSupported()) {
+                const hls = new Hls();
+                hls.loadSource(videoSrc);
+                hls.attachMedia(videoRef.current);
+            }
+            else {
+                videoRef.src = videoSrc;
+            }
+        }
+        else {
+            videoRef.src = videoSrc;
+        }
         setIsPauseVideo(false);
         const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
         const dom = document.querySelector('#player-container-id');
@@ -13098,20 +13052,20 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         if (!dom && !dom2)
             return;
         videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
-        // videoRef?.on('canplay', handleCanplay);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('playing', handlePlaying);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('pause', handlePause);
-        videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('ended', handleEnded);
+        videoRef.setAttribute('x5-playsinline', 'true');
+        videoRef.setAttribute('webkit-playsinline', 'true');
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
+        videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handleEnded);
         return () => {
             dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadedmetadata', handleLoadedmetadata);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('loadeddata', handLoadeddata);
-            // videoRef?.off('canplay', handleCanplay);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('playing', handlePlaying);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('pause', handlePause);
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.off('ended', handleEnded);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handleEnded);
         };
     }, [isActive, videoId, rec, videoRef]);
     React.useEffect(() => {
@@ -13133,7 +13087,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
     React.useEffect(() => {
         if (!isActive || !videoRef)
             return;
-        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused();
+        const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
         if (!isPause && openHashtag) {
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
         }
@@ -13576,7 +13530,7 @@ var Tagbar$1 = React.memo(Tagbar);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-20 15:54:53
+ * @LastEditTime: 2024-06-21 08:56:05
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -13592,8 +13546,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isShowMore, setIsShowMore] = React.useState(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
     const { backMainFeed } = useEventReport();
-    const [videoRef, setVideoRef] = React.useState(null);
-    const playerRef = React.useRef();
+    const videoRef = React.useRef();
     const { productView } = useEventReport();
     const isShowFingerTip = React.useMemo(() => {
         return data.length > 0 && !loading && getFeUserId();
@@ -13624,30 +13577,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const firstRef = React.useRef();
     React.useEffect(() => {
         var _a, _b, _c, _d;
-        if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
+        if (!firstRef.current && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
             firstRef.current = true;
-            const player = TCPlayer('player-container-id', {
-                licenseUrl, // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
-                controls: false,
-                loop: false,
-                autoplay: true,
-                muted: true,
-                preload: 'auto',
-                posterImage: false,
-                bigPlayButton: true,
-                sources: ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url)
-                    ? [
-                        {
-                            src: (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url
-                        }
-                    ]
-                    : []
-            });
-            player === null || player === void 0 ? void 0 : player.ready(() => {
-                setVideoRef(player);
-            });
+            if ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) {
+                videoRef.current.src = (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url;
+            }
         }
-    }, [videoRef, licenseUrl, data]);
+    }, [videoRef, data]);
     React.useEffect(() => {
         var _a;
         const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -13765,7 +13701,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = React.useCallback((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
+            return (React.createElement(VideoWidget$3, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current }));
         }
         if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
             return (React.createElement(PictureGroup$3, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -13791,7 +13727,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         tipText,
         resolver,
         schema,
-        videoRef
+        videoRef.current
     ]);
     const onExpandableChange = React.useCallback((v) => {
         setIsShowMore(v);
@@ -13949,14 +13885,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
     };
     const visList = React.useMemo(() => {
-        const list = data === null || data === void 0 ? void 0 : data.map((item, index) => {
-            if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
-                return item;
-            }
-            else {
-                return null;
-            }
-        });
+        var _a;
+        const list = activeIndex === 0
+            ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
+            : data === null || data === void 0 ? void 0 : data.map((item, index) => {
+                if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
+                    return item;
+                }
+                else {
+                    return null;
+                }
+            });
         return !waterFallData ? list.concat([{ loading: true }]) : list;
     }, [data, activeIndex, waterFallData]);
     const renderView = React.useMemo(() => {
@@ -14021,7 +13960,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             renderView),
         React.createElement(WaterFall$1, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
         React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
-            React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
+            React.createElement("video", { ref: videoRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
                     backgroundColor: 'transparent',
                     width: '100%',
                     height: '100%',
@@ -14554,3 +14493,4 @@ exports.default = Pagebuilder;
 exports.defaultSetting = defaultSetting;
 exports.materials = _materials_;
 exports.useEditorDataProvider = useEditorDataProvider;
+//# sourceMappingURL=index.cjs.map