pb-sxp-ui 1.0.87 → 1.0.88

package/dist/index.js

@@ -1,7 +1,7 @@
 import { isEmpty, isEqual, cloneDeep, debounce, throttle, get } from 'lodash';
 import { v4 } from 'uuid';
 import pako from 'pako';
-import React, { useContext, useMemo, createContext, memo, useState, useRef, useEffect, useCallback, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useContext, useMemo, memo, useEffect, createContext, useState, useRef, useCallback, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
 import qs from 'qs';
 import EventEmitter from 'eventemitter3';
 import { css } from '@emotion/css';
@@ -415,6 +415,70 @@ var SXP_EVENT_TYPE;
     SXP_EVENT_TYPE["CHANGE_THEME_TAG"] = "changeThemeTag";
 })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
 
+/*
+ * @Author: binruan@chatlabs.com
+ * @Date: 2024-06-13 15:16:53
+ * @LastEditors: binruan@chatlabs.com
+ * @LastEditTime: 2024-06-19 14:13:50
+ * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
+ *
+ */
+const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
+    const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
+    const channelObj = useMemo(() => {
+        const queryString = location.search.slice(1);
+        const params = qs.parse(queryString.replace(/\+/g, '%2B'));
+        for (const key in params) {
+            params[key] = params[key].replace(/%2B/g, '+');
+        }
+        return params;
+    }, []);
+    const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
+    useEffect(() => {
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'privacyEnter',
+                eventDescription: 'User enter privacy page',
+                utmSource: getUtmValue('utm_source'),
+                utmMedium: getUtmValue('utm_medium'),
+                utmCampaign: getUtmValue('utm_campaign'),
+                utmId: getUtmValue('utm_id'),
+                utmContent: getUtmValue('utm_content'),
+                clSource: getUtmValue('cl_source'),
+                enterTime: `${Date.now()}`,
+                enterUrl: window.location.href,
+                rtc: null,
+                requestId: null,
+                sessionID: null
+            }
+        });
+    }, []);
+    const handleAgree = () => {
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'userConsent',
+                eventDescription: '用户授权【操作结果】',
+                consentResult: '0',
+                consentTags: '["系统运营"]',
+                rtc: null,
+                requestId: null,
+                sessionID: null
+            }
+        });
+        setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
+        window.localStorage.setItem(AGREE_POLICY, 'yes');
+    };
+    return (React.createElement("div", { className: 'consent-bg' },
+        React.createElement("div", { className: 'consent' },
+            React.createElement("div", { className: 'consent-col' },
+                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", { "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 = memo(Consent$2);
+
 const SxpDataSourceContext = createContext({
     rtcList: [],
     tagList: []
@@ -426,6 +490,7 @@ var 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] = useState([]);
     const [tagList, setTagList] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -492,10 +557,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }, [bffDataSource]);
     // 获取推荐视频数据
     const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e;
+        var _d, _e, _f, _g, _h;
         query = {
-            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,
+            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,
             '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,
@@ -503,10 +568,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             themeTag: query === null || query === void 0 ? void 0 : query.themeTag
         };
         if (utmVal) {
-            const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
+            const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
+            })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
             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 }));
@@ -518,7 +583,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 _f, _g;
+        var _j, _k;
         if (rtcList.length <= 0) {
             return;
         }
@@ -528,8 +593,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
             themeTag: themeTag.current
         });
-        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 : []));
+        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 : []));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
         // 关闭 BFF 事件上报
@@ -593,16 +658,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }), [bffFetch]);
     // 获取 Tag
     const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _h, _j, _k, _l, _m;
+        var _l, _m, _o, _p, _q;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
+            const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
                 const key = val.split('=')[0];
                 return UTM_KEYS.includes(key);
-            })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
+            })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            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 : []);
+            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 : []);
         }
         catch (e) {
             console.log('e', e);
@@ -653,8 +718,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [bffEventReport]);
     useEffect(() => {
-        h5EnterLink();
-    }, []);
+        if (!isShowConsent)
+            h5EnterLink();
+    }, [isShowConsent]);
     useEffect(() => {
         if (isShowConsent)
             return;
@@ -737,13 +803,13 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             isShowConsent,
             selectTag,
             setSelectTag
-        } }, render({
+        } }, 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,
         mutateUnlike: bffMutateUnlike,
         submitForm: bffSubmitForm,
         tagList
-    })));
+    }))));
 };
 var SxpDataSourceProvider$1 = memo(SxpDataSourceProvider);
 
@@ -12706,10 +12772,10 @@ var settingRender = [
     }
 ];
 
-const Consent$3 = (props) => {
-    return React.createElement(Consent$3, Object.assign({}, props));
+const Consent$1 = (props) => {
+    return React.createElement(Consent$1, Object.assign({}, props));
 };
-var ConsentComponent = memo(Consent$3);
+var ConsentComponent = memo(Consent$1);
 
 /*
  * @Author: binruan@chatlabs.com
@@ -12719,7 +12785,7 @@ var ConsentComponent = memo(Consent$3);
  * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\material.tsx
  *
  */
-const Consent$2 = createMaterial(ConsentComponent, {
+const Consent = createMaterial(ConsentComponent, {
     displayName: 'Consent',
     icon: '',
     category: 'base',
@@ -12754,7 +12820,7 @@ var _materials_ = /*#__PURE__*/Object.freeze({
     CommodityDetailDiroNew: CommodityDetailDiroNew,
     CommodityDiro: CommodityDiro,
     CommodityDiroNew: CommodityDiroNew,
-    Consent: Consent$2,
+    Consent: Consent,
     HashTag: HashTag,
     Link: Link,
     MultiCommodity: MultiCommodity,
@@ -13483,84 +13549,20 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
 };
 var Tagbar$1 = memo(Tagbar);
 
-/*
- * @Author: binruan@chatlabs.com
- * @Date: 2024-06-13 15:16:53
- * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-19 14:13:50
- * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
- *
- */
-const Consent = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
-    const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
-    const channelObj = useMemo(() => {
-        const queryString = location.search.slice(1);
-        const params = qs.parse(queryString.replace(/\+/g, '%2B'));
-        for (const key in params) {
-            params[key] = params[key].replace(/%2B/g, '+');
-        }
-        return params;
-    }, []);
-    const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
-    useEffect(() => {
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'privacyEnter',
-                eventDescription: 'User enter privacy page',
-                utmSource: getUtmValue('utm_source'),
-                utmMedium: getUtmValue('utm_medium'),
-                utmCampaign: getUtmValue('utm_campaign'),
-                utmId: getUtmValue('utm_id'),
-                utmContent: getUtmValue('utm_content'),
-                clSource: getUtmValue('cl_source'),
-                enterTime: `${Date.now()}`,
-                enterUrl: window.location.href,
-                rtc: null,
-                requestId: null,
-                sessionID: null
-            }
-        });
-    }, []);
-    const handleAgree = () => {
-        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-            eventInfo: {
-                eventSubject: 'userConsent',
-                eventDescription: '用户授权【操作结果】',
-                consentResult: '0',
-                consentTags: '["系统运营"]',
-                rtc: null,
-                requestId: null,
-                sessionID: null
-            }
-        });
-        setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
-        window.localStorage.setItem(AGREE_POLICY, 'yes');
-    };
-    return (React.createElement("div", { className: 'consent-bg' },
-        React.createElement("div", { className: 'consent' },
-            React.createElement("div", { className: 'consent-col' },
-                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", { "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$1 = memo(Consent);
-
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-20 10:37:06
+ * @LastEditTime: 2024-06-20 15:54:53
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
 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, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { schema } = useEditor();
     const [activeIndex, setActiveIndex] = useState(0);
     const viewImageStartTime = useRef(0);
-    const [isInit, setIsInit] = useState(false);
+    useState(false);
     const [isMuted, setIsMuted] = useState(true);
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
@@ -13573,21 +13575,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && getFeUserId();
     }, [data, loading]);
-    const handleH5EnterLink = useCallback(() => {
-        if (data.length <= 0) {
-            return;
+    useEffect(() => {
+        refreshFeSessionId();
+    }, []);
+    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 = 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 = useRef();
     useEffect(() => {
         var _a, _b, _c, _d;
@@ -13615,10 +13625,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
     }, [videoRef, licenseUrl, data]);
-    useEffect(() => {
-        if (!isInit)
-            handleH5EnterLink();
-    }, [handleH5EnterLink, isInit]);
     useEffect(() => {
         var _a;
         const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -13952,46 +13958,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' },
-        isShowConsent ? (React.createElement(Consent$1, 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$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
-                    setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-                } })),
-            renderLogo,
-            React.createElement(Tagbar$1, { 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);
-                            });
-                        }
+        waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+            } })),
+        renderLogo,
+        React.createElement(Tagbar$1, { 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);
+                        });
                     }
-                }, direction: 'vertical', height: height },
-                React.createElement(ToggleButton$1, { 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$1, 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)),
+                }
+            }, 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',
+                    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$1, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
         React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
             React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
                     backgroundColor: 'transparent',
@@ -14516,4 +14521,3 @@ function useEditorDataProvider() {
  */
 
 export { index$1 as DiyPortalPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender, index$2 as core, Pagebuilder as default, defaultSetting, _materials_ as materials, useEditorDataProvider };
-//# sourceMappingURL=index.js.map