pb-sxp-ui 1.0.86 → 1.0.87

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

@@ -53,7 +53,7 @@ const Consent = ({ width = window.innerWidth, height = window.innerHeight, priva
                 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')))));
 };
 export default memo(Consent);

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

@@ -172,7 +172,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]);
     useEffect(() => {
         const handleBeforeUnload = () => {
@@ -221,7 +221,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,
@@ -230,6 +230,6 @@ 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' })))));
 };
 export default memo(VideoWidget);

package/es/core/components/SxpPageRender/FingerSwipeTip/index.js

@@ -14,6 +14,6 @@ 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' })));
 };
 export default FingerSwipeTip;

package/es/core/components/SxpPageRender/FormatImage.js

@@ -22,8 +22,8 @@ const FormatImage = 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' }))));
 });
 export default memo(FormatImage);

package/es/core/components/SxpPageRender/LikeButton/index.js

@@ -52,7 +52,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' })));
 };
 export default memo(LikeButton);

package/es/core/components/SxpPageRender/Navbar.js

@@ -4,7 +4,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 : '标题'}`)));
 };
 export default memo(Navbar);

package/es/core/components/SxpPageRender/Nudge/index.js

@@ -8,7 +8,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 : '')))));
 };
 export default Nudge;

package/es/core/components/SxpPageRender/Tagbar.js

@@ -1,11 +1,10 @@
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import { useSxpDataSource } from '../../../core/hooks';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
 import { useEventReport } from '../../../core/hooks/useEventReport';
-const DEFAULT_TAG = 'FOR U';
+import { DEFAULT_TAG } from '../../../core/context/SxpDataSourceProvider';
 const Tagbar = ({ tagList = [], setActiveIndex }) => {
-    const [selectTag, setSelectTag] = 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 = useMemo(() => {
         return [DEFAULT_TAG, ...tagList];
@@ -18,12 +17,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) {
@@ -41,7 +40,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;

package/es/core/components/SxpPageRender/ToggleButton/index.js

@@ -7,7 +7,7 @@ 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 })));
 };
 export default memo(ToggleButton);

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

@@ -248,7 +248,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: 'placeholder image' }));
     }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
     useEffect(() => {
         if (!videoRef)
@@ -281,7 +281,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             } },
             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%',
@@ -290,6 +290,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         }, 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' })))));
 };
 export default memo(VideoWidget);

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -114,7 +114,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))));
 };
 export default 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] = useState();
@@ -187,5 +187,5 @@ export default 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'))))));
 }

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -71,56 +71,24 @@ const WaterfallFlowItem = (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]);
-    useEffect(() => {
-        const height = imgInfo.height * (unitWidth / imgInfo.width);
-        if (isLoading) {
+        if (imgSrc)
+            imgDom.current.setSrc(imgSrc);
+    }, [src, showVideo, firstFrameSrc]);
+    const pictRef = useRef();
+    const imgLoad = 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;
             sizeChange(height + 56 + space, index);
-        }
-    }, [imgInfo, index, unitWidth, isLoading, space]);
-    const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
-        const aspectRatio = videoWidth / videoHeight;
-        const targetHeight = targetWidth / aspectRatio;
-        return targetHeight;
-    };
-    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);
@@ -131,17 +99,14 @@ const WaterfallFlowItem = (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, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
+        React.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
+            React.createElement(FormatImage, { 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))));
 };
 export default function WaterfallList(_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();
     const scrollParent = useRef(null);
@@ -337,5 +302,5 @@ export default function WaterfallList(_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'))))));
 }

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

@@ -10,7 +10,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
 import { useEventReport } from '../../../../core/hooks/useEventReport';
 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();
     const ref = useRef(null);
     const modalEleRef = useRef(null);
@@ -32,9 +32,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);

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

@@ -21,8 +21,9 @@ import { useEventReport } from '../../../core/hooks/useEventReport';
 import withBindDataSource from '../../../core/hoc/withBindDataSource';
 import Tagbar from './Tagbar';
 import { getFeUserId } from '../../../core/utils/localStore';
+import Consent from '../Consent';
 const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { schema } = useEditor();
     const [activeIndex, setActiveIndex] = useState(0);
     const viewImageStartTime = useRef(0);
@@ -31,7 +32,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
     const [isShowMore, setIsShowMore] = 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] = useState(null);
     const playerRef = useRef();
@@ -105,8 +106,9 @@ 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') {
-                if (!openHashtag) {
+                if (repCond) {
                     SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
                     handleReportViewImageEnd(item);
                     handleReportProductView(item);
@@ -146,11 +148,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);
@@ -167,17 +169,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         tempMap,
         curTime,
         backMainFeed,
-        openHashtag
+        openHashtag,
+        isShowConsent,
+        selectTag
     ]);
-    useEffect(() => {
-        const initTime = () => {
-            backMainFeed('external');
-        };
-        window.addEventListener('pageshow', initTime);
-        return () => {
-            window.removeEventListener('pageshow', initTime);
-        };
-    }, []);
     const tagHeight = useMemo(() => {
         let h = 0;
         if (tagList.length > 0) {
@@ -417,44 +412,45 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
     return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-        waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
-                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-            } })),
-        renderLogo,
-        React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
-        isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
-        React.createElement(Swiper, { style: {
-                marginTop: tagHeight
-            }, ref: swiperRef, onSlideChange: () => {
-                swiperRef.current.swiper.allowTouchMove = false;
-                setTimeout(() => {
-                    swiperRef.current.swiper.allowTouchMove = true;
-                }, 500);
-            }, onActiveIndexChange: (swiper) => {
-                setActiveIndex(swiper.activeIndex);
-                if (openHashtag)
-                    return;
-                handleScrollEvent(swiper);
-                if (waterFallData)
-                    return;
-                if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
-                    if (!isLoadMore) {
-                        setIsLoadMore(true);
-                        loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
-                            setIsLoadMore(false);
-                        });
+        isShowConsent ? (React.createElement(Consent, 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))) : (React.createElement(React.Fragment, null,
+            waterFallData && (React.createElement(Navbar, { icon: left, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+                    setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+                } })),
+            renderLogo,
+            React.createElement(Tagbar, { tagList: tagList, setActiveIndex: setActiveIndex }),
+            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _d !== void 0 ? _d : 0)}%` } })) : null,
+            React.createElement(Swiper, { style: {
+                    marginTop: tagHeight
+                }, ref: swiperRef, onSlideChange: () => {
+                    swiperRef.current.swiper.allowTouchMove = false;
+                    setTimeout(() => {
+                        swiperRef.current.swiper.allowTouchMove = true;
+                    }, 500);
+                }, onActiveIndexChange: (swiper) => {
+                    setActiveIndex(swiper.activeIndex);
+                    if (openHashtag)
+                        return;
+                    handleScrollEvent(swiper);
+                    if (waterFallData)
+                        return;
+                    if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
+                        if (!isLoadMore) {
+                            setIsLoadMore(true);
+                            loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
+                                setIsLoadMore(false);
+                            });
+                        }
                     }
-                }
-            }, direction: 'vertical', height: height },
-            React.createElement(ToggleButton, { 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',
-                    zIndex: 999,
-                    [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
-                    [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
-                }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
-            renderView),
-        React.createElement(WaterFall, 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)),
+                }, direction: 'vertical', height: height },
+                React.createElement(ToggleButton, { style: {
+                        position: 'fixed',
+                        visibility: ((_f = (_e = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _e === void 0 ? void 0 : _e.video) === null || _f === void 0 ? void 0 : _f.url) ? 'visible' : 'hidden',
+                        zIndex: 999,
+                        [(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _g !== void 0 ? _g : 'right']: (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _h !== void 0 ? _h : 0,
+                        [(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _j !== void 0 ? _j : 'bottom']: (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _k !== void 0 ? _k : 23
+                    }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
+                renderView))),
+        React.createElement(WaterFall, Object.assign({}, (_o = (_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.item) === null || _o === void 0 ? void 0 : _o.props)),
         React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
             React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
                     backgroundColor: 'transparent',

package/es/core/context/SxpDataSourceProvider.d.ts

@@ -77,6 +77,9 @@ export interface ISxpDataSourceContext {
     curTime?: any;
     h5EnterLink?: () => void;
     themeTag?: any;
+    isShowConsent?: boolean;
+    selectTag?: string;
+    setSelectTag?: React.Dispatch<React.SetStateAction<string>>;
 }
 export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
 export interface SxpDataSourceProviderProps {
@@ -115,5 +118,6 @@ export interface SxpDataSourceProviderProps {
     globalConfig?: ISxpPageRenderProps['globalConfig'];
     isEditor?: boolean;
 }
+export declare const DEFAULT_TAG = "FOR U";
 declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
 export default _default;

package/es/core/context/SxpDataSourceProvider.js

@@ -5,7 +5,6 @@ import { storeAndLoadFeSessionId } from '../utils/sessionStore';
 import { storeAndLoadFeUserId, AGREE_POLICY } from '../utils/localStore';
 import { useIconLink } from '../components/SxpPageRender/useIconLink';
 import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../utils/event';
-import Consent from '../components/Consent';
 export const SxpDataSourceContext = createContext({
     rtcList: [],
     tagList: []
@@ -15,8 +14,8 @@ var DataSourceType;
     DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
 })(DataSourceType || (DataSourceType = {}));
 const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
+export 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] = useState([]);
     const [tagList, setTagList] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -33,6 +32,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     const [videoRef, setVideoRef] = useState(null);
     const themeTag = useRef();
     const curTime = useRef();
+    const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
     const isShowConsent = 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;
@@ -76,10 +76,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .catch((err) => Promise.reject(err));
     }, [bffDataSource]);
     const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e;
         query = {
-            maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
-            defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
+            maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
+            defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
             'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
             'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
             hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
@@ -87,10 +87,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             themeTag: query === null || query === void 0 ? void 0 : query.themeTag
         };
         if (utmVal) {
-            const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
+            const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
+            })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
         const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -102,7 +102,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize]);
     const loadVideos = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k;
+        var _f, _g;
         if (rtcList.length <= 0) {
             return;
         }
@@ -112,8 +112,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
             themeTag: themeTag.current
         });
-        setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
-        setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
+        setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
+        setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
         if (!enableReportEvent) {
@@ -171,16 +171,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _l, _m, _o, _p, _q;
+        var _h, _j, _k, _l, _m;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
+            const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
+            })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
+            setTagList((_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []);
         }
         catch (e) {
             console.log('e', e);
@@ -311,13 +311,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setIsAgreePolicy,
             curTime,
             h5EnterLink,
-            themeTag
-        } }, isShowConsent ? (React.createElement(Consent, 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({
+            themeTag,
+            isShowConsent,
+            selectTag,
+            setSelectTag
+        } }, render({
         rtcList,
         mutateLike: bffMutateLike,
         mutateUnlike: bffMutateUnlike,
         submitForm: bffSubmitForm,
         tagList
-    }))));
+    })));
 };
 export default memo(SxpDataSourceProvider);

package/es/core/hooks/useEventReport.d.ts

@@ -2,5 +2,5 @@ import { RecItemType } from '../components/SxpPageRender/typing';
 export declare function useEventReport(): {
     jumpToWeb: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], position?: number) => void;
     productView: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], viewTime?: any, position?: number) => void;
-    backMainFeed: (lastFeed?: 'theme' | 'branch' | 'external', themeTag?: string, hashTag?: string) => void;
+    backMainFeed: (lastFeed: 'theme' | 'branch' | 'external', selectTag?: string, themeTag?: string, hashTag?: string) => void;
 };