✨ feat: Update import statements, add default values for "audio" parameter, refactor variable names and formatting

This commit updates the import statements and adds default values for the "audio" parameter in "index.tsx". It also refactors variable names and formatting. In "useAudioRecorder/index.ts", it changes the useState hooks and removes an eslint-disable comment.

Author: canisminor1990

src/react/AudioPlayer/index.tsx

@@ -1,7 +1,7 @@
-import { ActionIcon, ActionIconProps, Icon, Tag } from '@lobehub/ui';
+import { ActionIcon, type ActionIconProps, Icon, Tag } from '@lobehub/ui';
 import { Dropdown, Slider } from 'antd';
 import { Download, PauseCircle, Play, StopCircle } from 'lucide-react';
-import React, { memo, useCallback, useMemo } from 'react';
+import { type CSSProperties, memo, useCallback, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { secondsToMinutesAndSeconds } from '@/core/utils/secondsToMinutesAndSeconds';
@@ -28,9 +28,9 @@ export interface AudioPlayerProps {
   onPlay?: () => void;
   onStop?: () => void;
   showSlider?: boolean;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   timeRender?: 'tag' | 'text';
-  timeStyle?: React.CSSProperties;
+  timeStyle?: CSSProperties;
   timeType?: 'left' | 'current' | 'combine';
 }
 
@@ -41,7 +41,16 @@ const AudioPlayer = memo<AudioPlayerProps>(
     timeStyle,
     buttonSize,
     className,
-    audio,
+    audio = {
+      currentTime: 0,
+      download: () => {},
+      duration: 0,
+      isPlaying: false,
+      pause: () => {},
+      play: () => {},
+      setTime: () => {},
+      stop: () => {},
+    },
     allowPause = true,
     timeType = 'left',
     showSlider = true,
@@ -53,9 +62,9 @@ const AudioPlayer = memo<AudioPlayerProps>(
   }) => {
     const { isPlaying, play, stop, pause, duration, setTime, currentTime, download } = audio;
 
-    const formatedLeftTime = secondsToMinutesAndSeconds(duration - currentTime);
-    const formatedCurrentTime = secondsToMinutesAndSeconds(currentTime);
-    const formatedDuration = secondsToMinutesAndSeconds(duration);
+    const formattedLeftTime = secondsToMinutesAndSeconds(duration - currentTime);
+    const formattedCurrentTime = secondsToMinutesAndSeconds(currentTime);
+    const formattedDuration = secondsToMinutesAndSeconds(duration);
 
     const Time = useMemo(
       () => (timeRender === 'tag' ? Tag : (props: any) => <div {...props} />),
@@ -122,12 +131,12 @@ const AudioPlayer = memo<AudioPlayerProps>(
           placement="top"
         >
           <Time style={{ cursor: 'pointer', flex: 'none', ...timeStyle }}>
-            {timeType === 'left' && formatedLeftTime}
-            {timeType === 'current' && formatedCurrentTime}
+            {timeType === 'left' && formattedLeftTime}
+            {timeType === 'current' && formattedCurrentTime}
             {timeType === 'combine' && (
               <span>
-                {formatedCurrentTime}
-                <span style={{ opacity: 0.66 }}>{` / ${formatedDuration}`}</span>
+                {formattedCurrentTime}
+                <span style={{ opacity: 0.66 }}>{` / ${formattedDuration}`}</span>
               </span>
             )}
           </Time>

src/react/useAudioRecorder/index.ts

@@ -8,8 +8,7 @@ export const useAudioRecorder = (onBlobAvailable?: (blob: Blob) => void) => {
 
   const [time, setTime] = useState(0);
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();
-  // eslint-disable-next-line no-undef
-  const [timerInterval, setTimerInterval] = useState<NodeJS.Timer>();
+  const [timerInterval, setTimerInterval] = useState<any>();
   const [blob, setBlob] = useState<Blob>();
   const [url, setUrl] = useState<string>();