pb-sxp-ui 1.0.86 → 1.0.88

package/dist/index.cjs

@@ -442,7 +442,7 @@ var SXP_EVENT_TYPE;
  * @Author: binruan@chatlabs.com
  * @Date: 2024-06-13 15:16:53
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-18 16:06:16
+ * @LastEditTime: 2024-06-19 14:13:50
  * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
  *
  */
@@ -497,8 +497,8 @@ const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, pri
                 React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
                 React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
             React.createElement("div", { className: 'consent-col' },
-                React.createElement("button", { className: 'consent-btn', onClick: handleAgree }, "Agree"),
-                React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
+                React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
+                React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
 };
 var Consent$3 = React.memo(Consent$2);
 
@@ -511,6 +511,7 @@ var DataSourceType;
     DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
 })(DataSourceType || (DataSourceType = {}));
 const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
+const DEFAULT_TAG = 'FOR U';
 const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
     var _a, _b, _c;
     const [rtcList, setRtcList] = React.useState([]);
@@ -530,6 +531,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [videoRef, setVideoRef] = React.useState(null);
     const themeTag = React.useRef();
     const curTime = React.useRef();
+    const [selectTag, setSelectTag] = React.useState(DEFAULT_TAG);
     const isShowConsent = React.useMemo(() => {
         var _a, _b, _c, _d;
         return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
@@ -739,8 +741,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [bffEventReport]);
     React.useEffect(() => {
-        h5EnterLink();
-    }, []);
+        if (!isShowConsent)
+            h5EnterLink();
+    }, [isShowConsent]);
     React.useEffect(() => {
         if (isShowConsent)
             return;
@@ -819,7 +822,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setIsAgreePolicy,
             curTime,
             h5EnterLink,
-            themeTag
+            themeTag,
+            isShowConsent,
+            selectTag,
+            setSelectTag
         } }, isShowConsent ? (React.createElement(Consent$3, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
         rtcList,
         mutateLike: bffMutateLike,
@@ -1230,7 +1236,7 @@ var settingRender$6 = [
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-12 10:59:06
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-12 10:53:57
+ * @LastEditTime: 2024-06-20 13:39:07
  * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
  *
  */
@@ -1300,16 +1306,18 @@ function useEventReport() {
             }
         });
     }, [bffEventReport, popupDetailData]);
-    const backMainFeed = React.useCallback((lastFeed, themeTag, hashTag) => {
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                lastFeed,
-                themeTags: themeTag ? `[${themeTag}]` : '',
-                hashTags: hashTag ? `[${hashTag}]` : '',
-                eventSubject: 'backMainFeed',
-                eventDescription: 'back Main Feed'
-            }
-        });
+    const backMainFeed = React.useCallback((lastFeed, selectTag, themeTag, hashTag) => {
+        if (selectTag && selectTag === DEFAULT_TAG) {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    lastFeed,
+                    themeTags: themeTag ? `['${themeTag}']` : '',
+                    hashTags: hashTag ? `['${hashTag}']` : '',
+                    eventSubject: 'backMainFeed',
+                    eventDescription: 'back Main Feed'
+                }
+            });
+        }
     }, [bffEventReport]);
     return {
         jumpToWeb,
@@ -1396,7 +1404,7 @@ const AppointForm$1 = (_a) => {
             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-btn-wrapper' },
-            React.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
+            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))));
 };
 var AppointFormComponent = React.memo(AppointForm$1);
 
@@ -8588,7 +8596,7 @@ var ExpandableText$1 = React.memo(ExpandableText);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-05-27 09:47:19
+ * @LastEditTime: 2024-06-19 16:25:46
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
  *
  */
@@ -8638,9 +8646,9 @@ const FormatImage = React.forwardRef((props, ref) => {
         React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
         React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-            } }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+            }, alt: 'image' }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-        } }))));
+        }, alt: 'image' }))));
 });
 var FormatImage$1 = React.memo(FormatImage);
 
@@ -8708,8 +8716,8 @@ const CommodityDetail$1 = (_a) => {
             18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
     };
     const renderBtn = () => {
-        var _a;
-        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
+        var _a, _b;
+        return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website'))));
     };
     const getStyle = React.useCallback((style) => {
         if (style === null || style === void 0 ? void 0 : style.lineClamp) {
@@ -8755,7 +8763,7 @@ const CommodityDetail$1 = (_a) => {
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
             React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
         renderBtn(),
         React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
@@ -8959,9 +8967,9 @@ const Prompt$1 = (_a) => {
     };
     return (React.createElement("div", Object.assign({ className: `pb-prompt ${css.css(Object.assign({}, style))}` }, props),
         React.createElement("div", { className: 'pb-prompt-icon' },
-            React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2 })),
+            React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2, alt: 'success image' })),
         React.createElement("div", { className: 'pb-prompt-content' }, content),
-        React.createElement("button", { className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
+        React.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
 };
 var PromptComponent = React.memo(Prompt$1);
 
@@ -9185,7 +9193,7 @@ var settingRender$3 = [
 ];
 
 const CommodityDetailDiroNew$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     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"]);
     React.useState(true);
     const { sxpParameter } = useSxpDataSource();
@@ -9291,7 +9299,7 @@ Made in Italy` })));
                         top: 0,
                         objectFit: 'cover',
                         width: '100%'
-                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                    }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
             React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                 React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
@@ -9300,7 +9308,7 @@ Made in Italy` })));
                     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: getStyle(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: getStyle(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')),
+                (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now')),
                 productInfoText({ isPost }))),
         React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
 };
@@ -9792,7 +9800,7 @@ const Appoint$1 = (_a) => {
     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: '' })),
+            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')));
 };
 var AppointComponent = React.memo(Appoint$1);
@@ -10710,7 +10718,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
     var _a;
     const { waterFallData, setOpenHashtag } = useSxpDataSource();
     return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
-        React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
+        React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
         React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
 };
 var Navbar$1 = React.memo(Navbar);
@@ -12002,15 +12010,15 @@ const WaterfallFlowItem$1 = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = React.useState(false);
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [imgInfo, setImgInfo] = React.useState({
+    React.useState(false);
+    React.useState({
         height: 1,
         width: 1
     });
     const imgDom = React.useRef(null);
     const ref = React.useRef(null);
-    const videoDom = React.useRef(null);
-    const canvasRef = React.useRef(null);
+    React.useRef(null);
+    React.useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
     const src = React.useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -12040,7 +12048,7 @@ const WaterfallFlowItem$1 = (props) => {
         return y;
     }, [style]);
     /** 是否加载图片 */
-    const isImgShow = React.useMemo(() => {
+    React.useMemo(() => {
         if (top === undefined) {
             return false;
         }
@@ -12066,58 +12074,25 @@ const WaterfallFlowItem$1 = (props) => {
         if (imgDom.current === null || src === '') {
             return;
         }
-        const img = new Image();
+        let imgSrc = null;
         if (showVideo && firstFrameSrc) {
-            img.src = firstFrameSrc;
+            imgSrc = firstFrameSrc;
         }
         else {
-            img.src = src;
+            imgSrc = src;
         }
-        img.onload = () => {
-            setImgInfo({
-                height: img.height,
-                width: img.width
-            });
-            setIsLoading(true);
-        };
-        imgDom.current.setSrc(img.src);
-    }, [src, showVideo, firstFrameSrc, isImgShow]);
-    React.useEffect(() => {
-        // 通过宽度比例获取图片高度
-        const height = imgInfo.height * (unitWidth / imgInfo.width);
-        if (isLoading) {
+        if (imgSrc)
+            imgDom.current.setSrc(imgSrc);
+    }, [src, showVideo, firstFrameSrc]);
+    const pictRef = React.useRef();
+    const imgLoad = React.useCallback((img) => {
+        setTimeout(() => {
+            var _a;
+            const height = (_a = pictRef === null || pictRef === void 0 ? void 0 : pictRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
             // 加56是因为下方文字部分高度为56，可以自己设置
             sizeChange(height + 56 + space, index);
-        }
-    }, [imgInfo, index, unitWidth, isLoading, space]); /* 增加sizeChange依赖项会导致在admin预览编辑时无限刷新 */
-    const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
-        const aspectRatio = videoWidth / videoHeight;
-        const targetHeight = targetWidth / aspectRatio;
-        return targetHeight;
-    };
-    React.useEffect(() => {
-        const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
-        if (video === null || src === '' || !showVideo) {
-            return;
-        }
-        video.src = src;
-        video.currentTime = 1;
-        video.crossOrigin = 'anonymous';
-        video.onloadeddata = () => {
-            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-            if (!canvas)
-                return;
-            const ctx = canvas.getContext('2d');
-            const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
-            const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
-            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());
-            video.remove();
-            canvas.remove();
-        };
-    }, [src, showVideo]);
+        }, 0);
+    }, [space, sizeChange, index, unitWidth, pictRef]);
     const handleClickToDetail = () => {
         reportTagsView();
         setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
@@ -12128,17 +12103,14 @@ const WaterfallFlowItem$1 = (props) => {
         }, 0);
     };
     return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
-        React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
-            showVideo && (React.createElement("div", { style: { display: 'none' } },
-                React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
-                React.createElement("canvas", { ref: canvasRef }))),
-            React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
+        React.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
+            React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', onLoad: imgLoad, ref: imgDom })),
         React.createElement("div", { className: 'waterFallList-content-listItem-info' },
             React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
             React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
 };
 function WaterfallList$1(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     /** 滚动的父元素 */
@@ -12190,7 +12162,6 @@ function WaterfallList$1(_a) {
         for (let i = 0; i < (list === null || list === void 0 ? void 0 : list.length); i++) {
             // 原本应对应的行数
             const currentRow = Math.floor(i / rowsNum);
-            //
             const remainder = (i % rowsNum) + 1;
             // 最低item下标
             let minHeightInd = 0;
@@ -12367,7 +12338,7 @@ function WaterfallList$1(_a) {
                     } }))),
         React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
         React.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            React.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection'))))));
+            React.createElement("button", { "aria-label": ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.linkTitle) || 'Shop the collection'))))));
 }
 
 var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -12496,7 +12467,7 @@ const WaterfallFlowItem = (props) => {
             React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
 };
 function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const [list, setList] = React.useState();
@@ -12585,20 +12556,20 @@ function WaterfallList(_a) {
                 } })),
         React.createElement("div", { className: 'list-bottom', hidden: !((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
         React.createElement("div", { hidden: !((_p = data === null || data === void 0 ? void 0 : data.tag) === null || _p === void 0 ? void 0 : _p.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-            React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection'))))));
+            React.createElement("button", { "aria-label": ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.linkTitle) || 'Shop the collection'))))));
 }
 
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-10 10:58:24
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-12 14:18:56
+ * @LastEditTime: 2024-06-20 12:45:26
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
  *
  */
 const WaterFall = (props) => {
     var _a;
-    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag } = useSxpDataSource();
+    const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = useSxpDataSource();
     const { backMainFeed } = useEventReport();
     React.useRef(null);
     const modalEleRef = React.useRef(null);
@@ -12620,9 +12591,7 @@ const WaterFall = (props) => {
         if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
             setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
         }
-        if (!(themeTag === null || themeTag === void 0 ? void 0 : themeTag.current)) {
-            backMainFeed('branch', themeTag === null || themeTag === void 0 ? void 0 : themeTag.current, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
-        }
+        backMainFeed('branch', selectTag, undefined, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
         reportTagsView();
         setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
         setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
@@ -12934,7 +12903,7 @@ const LikeButton = (_a) => {
             }
         }
     }), 200);
-    return (React.createElement("button", Object.assign({}, props, { onClick: handleClick }),
+    return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
         React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
 };
 var LikeButton$1 = React.memo(LikeButton);
@@ -13193,7 +13162,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
             return null;
         }
-        return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
+        return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
     }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
     React.useEffect(() => {
         if (!videoRef)
@@ -13226,7 +13195,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             } },
             React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
-                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
         renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
             position: 'relative',
             width: '100%',
@@ -13235,7 +13204,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         }, onClick: handleClickVideo() },
         React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
-        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
+        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
 };
 var VideoWidget$3 = React.memo(VideoWidget$2);
 
@@ -13255,8 +13224,8 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
         setIsTure(result);
         onChange === null || onChange === void 0 ? void 0 : onChange(result);
     };
-    return (React.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
-        React.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
+    return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
+        React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
 };
 var ToggleButton$1 = React.memo(ToggleButton);
 
@@ -13281,7 +13250,7 @@ const FingerSwipeTip = ({ imageUrl, style }) => {
         return show ? 'pb-fadeIn' : 'pb-fadeOut';
     }, [show]);
     return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
-        React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
+        React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
 };
 
 /*
@@ -13543,7 +13512,7 @@ const Nudge = ({ nudge }) => {
             backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
             borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
         } },
-        (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
+        (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
         React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
 };
 
@@ -13551,14 +13520,12 @@ const Nudge = ({ nudge }) => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-04-29 16:32:21
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-12 11:01:48
+ * @LastEditTime: 2024-06-20 10:53:08
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Tagbar.tsx
  *
  */
-const DEFAULT_TAG = 'FOR U';
 const Tagbar = ({ tagList = [], setActiveIndex }) => {
-    const [selectTag, setSelectTag] = React.useState(DEFAULT_TAG);
-    const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport } = useSxpDataSource();
+    const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = useSxpDataSource();
     const { backMainFeed } = useEventReport();
     const realTagList = React.useMemo(() => {
         return [DEFAULT_TAG, ...tagList];
@@ -13571,12 +13538,12 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
                 eventInfo: {
                     eventSubject: 'clickThemeTagsViewContents',
                     eventDescription: 'click Theme Tags View Contents',
-                    themeTags: `[${tag}]`
+                    themeTags: `['${tag}']`
                 }
             });
         }
         else {
-            backMainFeed('theme', selectTag);
+            backMainFeed('theme', tag, selectTag);
         }
         let themeTag;
         if (tag !== DEFAULT_TAG) {
@@ -13594,7 +13561,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
         }).finally(() => {
             setLoading === null || setLoading === void 0 ? void 0 : setLoading(false);
         });
-        setSelectTag(tag);
+        setSelectTag === null || setSelectTag === void 0 ? void 0 : setSelectTag(tag);
     };
     if (waterFallData || tagList.length <= 0)
         return null;
@@ -13609,7 +13576,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-18 11:50:31
+ * @LastEditTime: 2024-06-20 15:54:53
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -13618,12 +13585,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const { schema } = useEditor();
     const [activeIndex, setActiveIndex] = React.useState(0);
     const viewImageStartTime = React.useRef(0);
-    const [isInit, setIsInit] = React.useState(false);
+    React.useState(false);
     const [isMuted, setIsMuted] = React.useState(true);
     const viewTime = React.useRef();
     const [isLoadMore, setIsLoadMore] = React.useState(false);
     const [isShowMore, setIsShowMore] = React.useState(false);
-    const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink } = useSxpDataSource();
+    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();
@@ -13631,21 +13598,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const isShowFingerTip = React.useMemo(() => {
         return data.length > 0 && !loading && getFeUserId();
     }, [data, loading]);
-    const handleH5EnterLink = React.useCallback(() => {
-        if (data.length <= 0) {
-            return;
+    React.useEffect(() => {
+        refreshFeSessionId();
+    }, []);
+    React.useEffect(() => {
+        if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+            const now = new Date();
+            viewTime.current = now;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'PageView'
+            });
         }
+    }, [data === null || data === void 0 ? void 0 : data.length]);
+    const handleH5EnterLink = React.useCallback(() => {
         refreshFeSessionId();
-        const now = new Date();
-        viewTime.current = now;
-        if (isInit) {
-            h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
+        h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
+        if (data.length > 0) {
+            const now = new Date();
+            viewTime.current = now;
+            bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                eventName: 'PageView'
+            });
         }
-        bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-            eventName: 'PageView'
-        });
-        setIsInit(true);
-    }, [data.length, bffFbReport, h5EnterLink, isInit]);
+    }, [data.length, bffFbReport, h5EnterLink]);
     const firstRef = React.useRef();
     React.useEffect(() => {
         var _a, _b, _c, _d;
@@ -13673,10 +13648,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
     }, [videoRef, licenseUrl, data]);
-    React.useEffect(() => {
-        if (!isInit)
-            handleH5EnterLink();
-    }, [handleH5EnterLink, isInit]);
     React.useEffect(() => {
         var _a;
         const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -13697,10 +13668,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         const visibleChange = () => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            const repCond = !openHashtag && !isShowConsent;
             if (document.visibilityState === 'hidden') {
                 // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面（即离开原页面时），或者在移动设备上从浏览器切换到不同的应用程序时
                 // 移动端h5直接杀掉浏览器或宿主app时不会触发，pc端直接杀掉标签页时能触发
-                if (!openHashtag) {
+                if (repCond) {
                     SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
                     handleReportViewImageEnd(item);
                     handleReportProductView(item);
@@ -13741,11 +13713,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             else if (document.visibilityState === 'visible') {
                 // 页面可见时触发，注意页面初始化时不会触发
                 handleH5EnterLink();
-                if (!openHashtag) {
+                if (repCond) {
                     handleViewImageStartEvent(activeIndex);
                     SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
+                    backMainFeed('external', selectTag);
                 }
-                backMainFeed('external');
             }
         };
         document.addEventListener('visibilitychange', visibleChange);
@@ -13762,17 +13734,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         tempMap,
         curTime,
         backMainFeed,
-        openHashtag
+        openHashtag,
+        isShowConsent,
+        selectTag
     ]);
-    React.useEffect(() => {
-        const initTime = () => {
-            backMainFeed('external');
-        };
-        window.addEventListener('pageshow', initTime);
-        return () => {
-            window.removeEventListener('pageshow', initTime);
-        };
-    }, []);
     const tagHeight = React.useMemo(() => {
         let h = 0;
         if (tagList.length > 0) {
@@ -14045,24 +14010,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         });
                     }
                 }
-            }, 
-            // style={{
-            //   pointerEvents: canSwiper ? 'auto' : 'none'
-            // }}
-            // onReachEnd={() => {
-            //   // 由hashtaglist跳转过来时不执行下面的方法
-            //   if (waterFallData) return;
-            //   if (!isLoadMore) {
-            //     console.log('trigger load 2');
-            //     setIsLoadMore(true);
-            //     loadVideos?.(Math.ceil(activeIndex / 10) + 1).then(() => {
-            //       setIsLoadMore(false);
-            //     });
-            //   }
-            // }}
-            // modules={[Virtual]}
-            // virtual={{ enabled: true, cache: true }}
-            direction: 'vertical', height: height },
+            }, direction: 'vertical', height: height },
             React.createElement(ToggleButton$1, { style: {
                     position: 'fixed',
                     visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
@@ -14261,7 +14209,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
             return null;
         }
-        return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
+        return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
     }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
     React.useEffect(() => {
         const handleBeforeUnload = () => {
@@ -14310,7 +14258,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                         height,
                         objectFit: 'contain'
                     } }),
-                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' }))),
         renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
             position: 'relative',
             width,
@@ -14319,7 +14267,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         } },
         React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', style: { width: '100%' }, ref: videoRef, crossOrigin: 'anonymous', muted: true, autoPlay: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
         renderPoster,
-        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
+        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
 };
 var VideoWidget$1 = React.memo(VideoWidget);
 
@@ -14606,4 +14554,3 @@ exports.default = Pagebuilder;
 exports.defaultSetting = defaultSetting;
 exports.materials = _materials_;
 exports.useEditorDataProvider = useEditorDataProvider;
-//# sourceMappingURL=index.cjs.map