@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/h5public/src/components/factory/package.json

@@ -1,4 +1 @@
-{
-  "name": "@lingxiteam/factory",
-  "version": "4.1.1"
-}
+{"name":"@lingxiteam/factory","version":"4.3.1"}

package/lib/h5public/src/components/factory/src/ALink/index.tsx

@@ -1,9 +1,12 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import React, { useEffect, useImperativeHandle, useState } from 'react';
-import { withTransformProps } from '../utils/withTransformProps';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import transformProps from './transformProps';
+import { withTransformProps } from '../utils/withTransformProps';
 
-export type MyALinkprops = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+export type MyALinkprops = React.DetailedHTMLProps<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+>;
 interface ALinkProps extends MyALinkprops {
   content: string;
   visible: boolean;
@@ -11,7 +14,15 @@ interface ALinkProps extends MyALinkprops {
 }
 
 const ALink = LingxiForwardRef<any, ALinkProps>((props, ref) => {
-  const { children, content, visible, href, onClick, className, ...restProps } = props;
+  const {
+    children,
+    content,
+    visible,
+    href,
+    onClick,
+    className,
+    ...restProps
+  } = props;
 
   const [myHref, setHref] = useState(href);
   const [myContent, setContent] = useState(content);
@@ -42,7 +53,12 @@ const ALink = LingxiForwardRef<any, ALinkProps>((props, ref) => {
     return <></>;
   }
   return (
-    <a {...restProps} {...specialProps} className={`use-app-alink ${className}`} onClick={onClick}>
+    <a
+      {...restProps}
+      {...specialProps}
+      className={`use-app-alink ${className}`}
+      onClick={onClick}
+    >
       {myContent || children}
     </a>
   );

package/lib/h5public/src/components/factory/src/Accordion/index.tsx

@@ -1,13 +1,13 @@
+import React, { useImperativeHandle, useRef, useState, useEffect, useMemo } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
 import { Collapse } from 'antd-mobile-5';
+import MyIcon, { IconFileProps } from '../Icon/Icon';
 import classnames from 'classnames';
-import isUndefined from 'lodash/isUndefined';
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import CardTitle from '../Card/CardTitle';
-import MyIcon, { IconFileProps } from '../Icon';
+import './index.less';
 import ChannelContainer, { ChannelContainerOptions } from '../utils/ChannelContainer';
 import useHiddenStyle from '../utils/hooks/useHiddenStyle';
-import './index.less';
+import isUndefined from 'lodash/isUndefined';
+import CardTitle from '../Card/CardTitle';
 
 const prefixCls = 'lcdp-accordion';
 export interface MyAccordionProps {
@@ -25,7 +25,9 @@ export interface MyAccordionProps {
     prefixIconIsIconFont?: boolean;
     prefixIconFontAddress?: string;
     prefixIconiconFile?: IconFileProps;
-  };
+    isSystem?: boolean;
+    systemIconKey?: string;
+  },
   visible: boolean;
   id: string;
   collapseColumns?: any;
@@ -68,7 +70,14 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
   const [activeKeys, setActiveKeys] = useState<string[] | string | null | undefined>([]);
   const childKeys = useRef<string[]>([]);
 
-  const { prefixIconType, prefixIconTheme, prefixIconIsIconFont, prefixIconFontAddress, prefixIconiconFile } = prefixIcon || {};
+  const { prefixIconType,
+    prefixIconTheme,
+    prefixIconIsIconFont,
+    prefixIconFontAddress,
+    prefixIconiconFile,
+    isSystem,
+    systemIconKey,
+  } = prefixIcon || {};
   useEffect(() => {
     if (Array.isArray(defaultActiveKey)) {
       setActiveKeys(defaultActiveKey || []);
@@ -104,6 +113,7 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
     return activeKeys;
   }, [activeKeys, accordion]);
 
+
   const renderHeader = (header: string, subTitle?: string) => {
     const headStyle: any = {
       border: 'none',
@@ -140,31 +150,44 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
         case 'middle':
           return (
             <div className={`${prefixCls}-header`} style={headStyle}>
-              <span className={`${prefixCls}-header-default-icon`} style={{ backgroundColor: aTitleColor }} />
+              <span
+                className={`${prefixCls}-header-default-icon`}
+                style={{ backgroundColor: aTitleColor }}
+              />
               {panelHeader}
             </div>
           );
         case 'left':
           return (
             <div style={headStyle} className={`${prefixCls}-header`}>
-              <span className={`${prefixCls}-header-icon-left`} style={{ backgroundColor: aTitleColor }} />
+              <span
+                className={`${prefixCls}-header-icon-left`}
+                style={{ backgroundColor: aTitleColor }}
+              />
               <div className={`${prefixCls}-header-left-header-margin`}>{panelHeader}</div>
             </div>
           );
         case 'auto':
           return (
-            <div style={headStyle} className={classnames(`${prefixCls}-header`, `${prefixCls}-header-icon-auto`)}>
-              {(prefixIconTheme || prefixIconFontAddress || prefixIconiconFile) && (prefixIconType || prefixIconiconFile) ? (
+            <div
+              style={headStyle}
+              className={classnames(`${prefixCls}-header`, `${prefixCls}-header-icon-auto`)}
+            >
+              {(prefixIconTheme || prefixIconFontAddress || prefixIconiconFile || isSystem) && (prefixIconType || prefixIconiconFile || isSystem) ? (
                 // @ts-ignore
                 <MyIcon
+                  icon={{
+                    isSystem,
+                    systemIconKey,
+                    type: prefixIconType,
+                    theme: prefixIconTheme,
+                    isIconFont: prefixIconIsIconFont,
+                    fontAddress: prefixIconFontAddress,
+                    iconFile: prefixIconiconFile,
+                  }}
                   style={{ color: aTitleColor }}
-                  type={prefixIconType}
-                  theme={prefixIconTheme}
-                  isIconFont={prefixIconIsIconFont}
-                  fontAddress={prefixIconFontAddress}
                   getEngineApis={getEngineApis}
                   $$componentItem={$$componentItem}
-                  iconFile={prefixIconiconFile}
                 />
               ) : null}
               {panelHeader}
@@ -194,7 +217,7 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
 
   const renderChildren = (options: ChannelContainerOptions) => {
     childKeys.current = [];
-    return React.Children.toArray(children).map(c => {
+    return React.Children.toArray(children).map((c) => {
       const { getProps, uploadChannelProps } = options;
       if (React.isValidElement(c) && c.key) {
         const { visible = true, extendProps, header, subTitle } = getProps(c);
@@ -206,7 +229,6 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
         } = c.props;
         if (!childKeys.current?.includes(key)) {
           childKeys.current.push(key);
-          console.log('childKeys', childKeys.current);
         }
         const aHeaderColor = headerColor || style?.background;
         return (
@@ -275,7 +297,7 @@ const MyAccordion = LingxiForwardRef<any, MyAccordionProps>((props, ref) => {
   return (
     <div className={`${prefixCls} ${className}`} id={`${$$componentItem?.uid}`} style={displayStyle}>
       <ChannelContainer>
-        {options => (
+        {(options) => (
           // @ts-ignore
           <Collapse
             activeKey={myActiveKeys}

package/lib/h5public/src/components/factory/src/AccordionPanel/index.tsx

@@ -1,7 +1,7 @@
+import React, { useState, useEffect, useRef } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useEffect, useRef, useState } from 'react';
-import RuntimeContainer from '../utils/ChannelContainer';
 import useStyle from '../View/useStyle';
+import RuntimeContainer from '../utils/ChannelContainer';
 
 const { withChannelItem } = RuntimeContainer;
 export interface MyAccordionPanelProps {
@@ -41,7 +41,7 @@ const MyAccordionPanel = LingxiForwardRef<any, MyAccordionPanelProps>((props, re
       ...props,
       src: imgSrc,
     },
-    viewRef
+    viewRef,
   );
   return visible ? (
     <div className={`${prefixCls}-border-none`} style={resultStyle}>

package/lib/h5public/src/components/factory/src/Animation/Animation.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import TweenOne from 'rc-tween-one';
+import { useAnimation, AnimationOpts } from './useAnimation';
+import type { AppViewProps } from './useStyle';
+import useStyle from './useStyle';
+
+export interface AnimationProps extends AppViewProps, AnimationOpts {
+  className: string;
+}
+
+const Animation = LingxiForwardRef<any, AnimationProps>((props, ref) => {
+  const { backgroundType = {}, fileCode, src, className, children, getEngineApis, $$componentItem, ...animationOpts } = props;
+  const [imgSrc, setImgSrc] = useState<string>();
+
+  const { getAppFileUrlByFileCode } = getEngineApis();
+  const viewRef = useRef<HTMLDivElement>();
+  const style = useStyle(
+    {
+      ...props,
+      src: imgSrc,
+    },
+    viewRef,
+  );
+
+  const { visible, ...tweenOne } = useAnimation(animationOpts);
+
+  useEffect(() => {
+    if (backgroundType.image || fileCode) {
+      setImgSrc(
+        getAppFileUrlByFileCode(backgroundType.image || fileCode, {
+          appId: $$componentItem.appId,
+        }),
+      );
+    }
+  }, [backgroundType, src, fileCode]);
+
+  if (!visible) {
+    return <></>;
+  }
+
+  return (
+    <TweenOne
+      style={style}
+      className={className}
+      {...tweenOne}
+    >
+      {children}
+    </TweenOne>
+  );
+});
+
+Animation.displayName = 'Animation';
+
+export default Animation;

package/lib/h5public/src/components/factory/src/Animation/index.tsx

@@ -1,51 +1,17 @@
+import React, { useState, useImperativeHandle } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import TweenOne from 'rc-tween-one';
-import React, { useEffect, useRef, useState } from 'react';
-import { AnimationOpts, useAnimation } from './useAnimation';
-import type { AppViewProps } from './useStyle';
-import useStyle from './useStyle';
+import AnimationLoader from './loader';
 
-export interface AnimationProps extends AppViewProps, AnimationOpts {
-  className: string;
-}
+const Animation = LingxiForwardRef<unknown, any>((props, ref) => {
+  const [audioStatus, toggelAudioStatus] = useState<'play' | 'pasue' | 'toggle'>();
 
-const Animation = LingxiForwardRef<any, AnimationProps>((props, ref) => {
-  const { backgroundType = {}, fileCode, src, className, children, getEngineApis, $$componentItem, ...animationOpts } = props;
-  const [imgSrc, setImgSrc] = useState<string>();
-
-  const { getAppFileUrlByFileCode } = getEngineApis();
-  const viewRef = useRef<HTMLDivElement>();
-  const style = useStyle(
-    {
-      ...props,
-      src: imgSrc,
+  useImperativeHandle(ref, () => ({
+    onOperationAudio: (status: 'play' | 'pasue' | 'toggle') => {
+      toggelAudioStatus(status);
     },
-    viewRef
-  );
-
-  const { visible, ...tweenOne } = useAnimation(animationOpts, ref);
-
-  useEffect(() => {
-    if (backgroundType.image || fileCode) {
-      setImgSrc(
-        getAppFileUrlByFileCode(backgroundType.image || fileCode, {
-          appId: $$componentItem.appId,
-        })
-      );
-    }
-  }, [backgroundType, src, fileCode]);
+  }));
 
-  if (!visible) {
-    return <></>;
-  }
-
-  return (
-    <TweenOne style={style} className={className} {...tweenOne}>
-      {children}
-    </TweenOne>
-  );
+  return <AnimationLoader {...props} audioStatus={audioStatus} />;
 });
 
-Animation.displayName = 'Animation';
-
 export default Animation;

package/lib/h5public/src/components/factory/src/Animation/loader.tsx

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const ReactChartsLoader = Loadable({
+  loader: async () => (await import/* webpackChunkName: 'factory-Animation' */('./Animation')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default ReactChartsLoader;

package/lib/h5public/src/components/factory/src/Animation/useAnimation.ts

@@ -1,6 +1,6 @@
-import _ from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { ITimelineCallBack } from 'rc-tween-one';
-import { Ref, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import _ from 'lodash';
 
 export interface AnimationOpts {
   effect: string;
@@ -24,13 +24,14 @@ export interface AnimationOpts {
   yoyo: boolean;
   repeatDelay: number;
   visible?: 0 | 1;
+  audioStatus: 'play' | 'pasue' | 'toggle',
 }
 
 const removeNullOrUndefined = (obj: Record<string, any>) => {
   if (!obj) {
     return obj;
   }
-  Object.keys(obj).forEach(key => {
+  Object.keys(obj).forEach((key) => {
     if (_.isNull(obj[key]) || _.isUndefined(obj[key])) {
       delete obj[key];
     }
@@ -38,7 +39,7 @@ const removeNullOrUndefined = (obj: Record<string, any>) => {
   return obj;
 };
 
-export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined) => {
+export const useAnimation = (opts: AnimationOpts) => {
   const {
     effect,
     repeatCustom,
@@ -54,6 +55,7 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
     xCustom: leftCustom,
     yCustom: topCustom,
     visible,
+    audioStatus,
   } = opts;
 
   const [paused, setPaused] = useState(!autoPlay);
@@ -108,7 +110,7 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
       opts.onEnd(v);
     }
     needRestartRef.current = true;
-    setMoment(null as any);
+    setMoment((null as any));
     setPaused(true);
   };
 
@@ -147,15 +149,6 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
     }
   };
 
-  useImperativeHandle(ref, () => ({
-    onOperationAudio: (status: string) => {
-      toggelAudioStatus(status);
-    },
-    get visible() {
-      return visible;
-    },
-  }));
-
   const repeat = useMemo(() => {
     let rep = opts.repeat;
     if (opts.repeat === 'custom') {
@@ -174,7 +167,7 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
 
   const IAnimation = useMemo(() => {
     const animation = opts.animation || [];
-    return animation?.map(item => ({
+    return animation?.map((item) => ({
       ...item,
       ...item.style,
     }));
@@ -264,6 +257,9 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
       duration,
     };
   }, [effect, x, y, opacity, scale, rotate, duration, ease, reverse]);
+  useEffect(() => {
+    toggelAudioStatus(audioStatus);
+  }, [audioStatus]);
 
   return {
     yoyo,

package/lib/h5public/src/components/factory/src/Animation/useStyle.ts

@@ -1,9 +1,9 @@
-import _ from 'lodash';
-import type React from 'react';
 import type { CSSProperties } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { $$componentItem } from '../interfaces/types';
+import type React from 'react';
+import _ from 'lodash';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { getImageSize } from '../utils/getImageSize';
+import { $$componentItem } from '../interfaces/types';
 
 export interface AppViewProps {
   style?: CSSProperties;
@@ -14,7 +14,10 @@ export interface AppViewProps {
   $$componentItem?: $$componentItem;
 }
 
-const useStyle = (props: AppViewProps, ref: React.MutableRefObject<HTMLDivElement | null | undefined>) => {
+const useStyle = (
+  props: AppViewProps,
+  ref: React.MutableRefObject<HTMLDivElement | null | undefined>,
+) => {
   const { src: imgSrc, style, backgroundType = {} } = props;
   const { mode, type, color, startColor, endColor } = backgroundType || {};
   const [size, setSize] = useState({
@@ -109,7 +112,7 @@ const useStyle = (props: AppViewProps, ref: React.MutableRefObject<HTMLDivElemen
       targetStyle.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
     } else if (type === 'image') {
       const imageStyle = getImageStyle();
-      Object.keys(imageStyle).forEach(key => {
+      Object.keys(imageStyle).forEach((key) => {
         // @ts-ignore
         targetStyle[key] = imageStyle[key];
       });

package/lib/h5public/src/components/factory/src/Audio/Audio.tsx

@@ -1,19 +1,17 @@
-import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 // @ts-ignore
+import { PlayButton, Timer, Progress } from 'react-soundplayer/components';
 import { LingXiFC } from '@lingxiteam/types';
-import { PlayButton, Progress, Timer } from 'react-soundplayer/components';
 // it's just an alias for `withSoundCloudAudio` but makes code clearer
 // @ts-ignore
 import { withCustomAudio } from 'react-soundplayer/addons';
 import useStyle from '../View/useStyle';
 
-import { $$componentItem } from '../interfaces/types';
 import './index.less';
+import { $$componentItem } from '../interfaces/types';
+
+export interface ForwardRefProps { toggelAudioStatus: (type: string) => void; audio: any; }
 
-export interface ForwardRefProps {
-  toggelAudioStatus: (type: string) => void;
-  audio: any;
-}
 
 export interface MyAudioProps {
   audioTitle?: string;
@@ -24,11 +22,10 @@ export interface MyAudioProps {
   fileCode?: string;
   style?: React.CSSProperties;
   backgroundType?: any;
-  visible?: any;
+  visible?: any
   hideType?: string;
   $$componentItem?: $$componentItem;
-  forwardRef: React.MutableRefObject<ForwardRefProps | undefined>;
-  componentDidLoad(): void;
+  audioStatus: 'play' | 'pasue' | 'toggle';
 }
 
 const prefixCls = 'lcdp-audio';
@@ -71,30 +68,15 @@ const CustomAudio = withCustomAudio((props: any) => {
   );
 });
 
-const Audio: LingXiFC<MyAudioProps> = props => {
+const Audio: LingXiFC<MyAudioProps> = (props) => {
   // eslint-disable-next-line max-len
-  const {
-    audioTitle,
-    autoPlay,
-    preloadType,
-    streamUrl,
-    streamType,
-    fileCode,
-    visible,
-    hideType,
-    style,
-    backgroundType,
-    getEngineApis,
-    forwardRef,
-    componentDidLoad,
-  } = props;
+  const { audioTitle, autoPlay, preloadType, streamUrl, streamType, fileCode, visible, hideType, style, backgroundType, getEngineApis, audioStatus } = props;
   const { getAppFileUrlByFileCode } = getEngineApis();
   const [audioUrl, setAudioUrl] = useState<any>('');
   const [imgSrc, setImgSrc] = useState();
   const sRef = useRef<any>();
   useEffect(() => {
-    if (streamType === 'fileCode') {
-      // 选择的文件资源
+    if (streamType === 'fileCode') { // 选择的文件资源
       if (fileCode) {
         try {
           const url = getAppFileUrlByFileCode(fileCode);
@@ -106,7 +88,7 @@ const Audio: LingXiFC<MyAudioProps> = props => {
         setAudioUrl('');
       }
     } else if (streamUrl) {
-      setAudioUrl(getAbsoluteUrl(streamUrl)); // 外部资源
+      setAudioUrl(getAbsoluteUrl(streamUrl));// 外部资源
     }
   }, [streamType, fileCode, streamUrl]);
 
@@ -124,7 +106,7 @@ const Audio: LingXiFC<MyAudioProps> = props => {
       src: imgSrc,
       backgroundType,
     },
-    viewRef
+    viewRef,
   );
   const onMediaPlay = () => {
     if (!visible && hideType === 'remove') {
@@ -177,17 +159,10 @@ const Audio: LingXiFC<MyAudioProps> = props => {
     }
   };
 
-  useImperativeHandle(forwardRef, () => {
-    return {
-      toggelAudioStatus,
-      audio: sRef.current,
-    };
-  });
-
   useEffect(() => {
-    componentDidLoad();
-  }, []);
-
+    toggelAudioStatus(audioStatus);
+  }, [audioStatus]);
+  
   if (!visible && hideType === 'remove') {
     return null;
   }
@@ -199,8 +174,15 @@ const Audio: LingXiFC<MyAudioProps> = props => {
   }, [visible, hideType]);
   return (
     <div style={{ ...style, ...restStyle, display: audioDisplay }}>
-      <CustomAudio audioTitle={audioTitle} autoPlay={autoPlay} preloadType={preloadType} streamUrl={audioUrl} ref={sRef} />
+      <CustomAudio
+        audioTitle={audioTitle}
+        autoPlay={autoPlay}
+        preloadType={preloadType}
+        streamUrl={audioUrl}
+        ref={sRef}
+      />
     </div>
+
   );
 };
 

package/lib/h5public/src/components/factory/src/Audio/index.tsx

@@ -1,41 +1,17 @@
+import React, { useState, useImperativeHandle } from 'react';
 import { LingxiForwardRef } from '@lingxiteam/types';
-import React, { useImperativeHandle, useRef } from 'react';
-import type { ForwardRefProps, MyAudioProps } from './Audio';
 import AudioLoader from './loader';
 
-const Audio = LingxiForwardRef<unknown, Omit<MyAudioProps, 'forwardRef'>>((props, ref) => {
-  const sequenceRef = useRef<{ methodName: string; args: any[] }[]>([]);
-  const audioRef = useRef<ForwardRefProps>();
+const Audio = LingxiForwardRef<unknown, any>((props, ref) => {
+  const [audioStatus, toggelAudioStatus] = useState<'play' | 'pasue' | 'toggle'>();
 
-  // 解决页面加载完成时，无法调用内部方法
-  const runSeq = () => {
-    sequenceRef.current.forEach(seq => {
-      const { methodName, args } = seq;
-      try {
-        // @ts-ignore
-        audioRef.current?.[methodName](...args);
-      } catch (error) {
-        console.log(error);
-      }
-    });
-
-    sequenceRef.current = [];
-  };
-
-  // 缓存节点
   useImperativeHandle(ref, () => ({
-    onOperationAudio(s: 'toggle' | 'play' | 'pasue') {
-      if (!audioRef.current?.audio) {
-        sequenceRef.current.push({
-          methodName: 'toggelAudioStatus',
-          args: [s],
-        });
-      } else {
-        audioRef.current.toggelAudioStatus(s);
-      }
+    onOperationAudio: (status: 'play' | 'pasue' | 'toggle') => {
+      toggelAudioStatus(status);
     },
   }));
-  return <AudioLoader {...props} forwardRef={audioRef} componentDidLoad={runSeq} />;
+
+  return <AudioLoader {...props} audioStatus={audioStatus} />;
 });
 
 export default Audio;

package/lib/h5public/src/components/factory/src/Audio/loader.tsx

@@ -2,6 +2,7 @@ import Loadable from 'react-loadable';
 import { LoadingComponennt } from '../utils/LoaderHelper';
 import type { MyAudioProps } from './Audio';
 
+
 const ViewPlayerLoader = Loadable<MyAudioProps, React.ComponentType<MyAudioProps>>({
   // eslint-disable-next-line func-call-spacing
   loader: async () => (await import(/* webpackChunkName: "factory-Audio" */ './Audio')) as unknown as React.ComponentType<any>,