✨ feat: Update import statements, add default values for "audio" para…

…meter, 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.
lobehub · Nov 16, 2023 · c01fbf7 · c01fbf7
1 parent e1d69ea
commit c01fbf7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/src/react/AudioPlayer/index.tsx b/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>

diff --git a/src/react/useAudioRecorder/index.ts b/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>();