✨ feat: Add stream player

lobehub · Nov 10, 2023 · 72e90ac · 72e90ac
1 parent 51d4129
commit 72e90ac
Show file tree

Hide file tree

Showing 17 changed files with 445 additions and 407 deletions.
diff --git a/package.json b/package.json
@@ -62,19 +62,23 @@
     "not ie <= 10"
   ],
   "dependencies": {
-    "lodash-es": "^4.17.21",
+    "@lobehub/ui": "latest",
+    "antd": "^5",
+    "antd-style": "^3",
+    "lodash-es": "^4",
+    "lucide-react": "latest",
     "microsoft-cognitiveservices-speech-sdk": "^1",
     "query-string": "^8",
+    "react-layout-kit": "^1",
     "ssml-document": "^1",
     "swr": "^2",
-    "url-join": "^5.0.0",
+    "url-join": "^5",
     "uuid": "^9"
   },
   "devDependencies": {
     "@commitlint/cli": "^18",
     "@lobehub/lint": "latest",
-    "@lobehub/ui": "latest",
-    "@types/lodash-es": "^4.17.10",
+    "@types/lodash-es": "^4",
     "@types/node": "^20",
     "@types/query-string": "^6",
     "@types/react": "^18",
@@ -88,19 +92,19 @@
     "father": "4",
     "husky": "^8",
     "lint-staged": "^15",
-    "lucide-react": "latest",
     "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",
-    "react-layout-kit": "^1",
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",
     "typescript": "^5",
     "vercel": "^28"
   },
   "peerDependencies": {
+    "@lobehub/ui": ">=1",
     "antd": ">=5",
+    "antd-style": ">=3",
     "react": ">=18",
     "react-dom": ">=18"
   },

diff --git a/src/AudioPlayer/StreamAudioPlayer.tsx b/src/AudioPlayer/StreamAudioPlayer.tsx
diff --git a/src/AudioPlayer/demos/index.tsx b/src/AudioPlayer/demos/index.tsx
@@ -1,6 +1,5 @@
-import { AudioPlayer } from '@lobehub/tts';
+import { AudioPlayer, useAudioPlayer } from '@lobehub/tts';
 import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-import { useCallback } from 'react';
 
 export default () => {
   const store = useCreateStore();
@@ -23,14 +22,11 @@ export default () => {
     { store },
   );
 
-  const Content = useCallback(
-    () => <AudioPlayer audio={new Audio(url)} {...options} />,
-    [url, options],
-  );
+  const audio = useAudioPlayer(url);
 
   return (
     <StoryBook levaStore={store}>
-      <Content />
+      <AudioPlayer audio={audio} {...options} />
     </StoryBook>
   );
 };
diff --git a/src/AudioPlayer/index.tsx b/src/AudioPlayer/index.tsx
@@ -1,17 +1,28 @@
 import { ActionIcon, ActionIconProps, Tag } from '@lobehub/ui';
 import { Slider } from 'antd';
-import { Pause, Play, StopCircle } from 'lucide-react';
+import { Download, Pause, Play, StopCircle } from 'lucide-react';
 import React, { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useAudioPlayer } from '@/hooks/useAudioPlayer';
 import { secondsToMinutesAndSeconds } from '@/utils/secondsToMinutesAndSeconds';
 
+export interface AudioProps {
+  currentTime: number;
+  download: () => void;
+  duration: number;
+  isPlaying: boolean;
+  pause: () => void;
+  play: () => void;
+  setTime: (time: number) => void;
+  stop: () => void;
+}
+
 export interface AudioPlayerProps {
   allowPause?: boolean;
-  audio: HTMLAudioElement;
+  audio: AudioProps;
   buttonSize?: ActionIconProps['size'];
   className?: string;
+  showDownload?: boolean;
   showSlider?: boolean;
   showTime?: boolean;
   style?: React.CSSProperties;
@@ -32,19 +43,13 @@ const AudioPlayer = memo<AudioPlayerProps>(
     showTime = true,
     showSlider = true,
     timeRender = 'text',
+    showDownload = true,
   }) => {
-    const {
-      isPlaying,
-      play,
-      stop,
-      togglePlayPause,
-      duration,
-      setTime,
-      currentTime,
-      formatedLeftTime,
-      formatedCurrentTime,
-      formatedDuration,
-    } = useAudioPlayer(audio);
+    const { isPlaying, play, stop, pause, duration, setTime, currentTime, download } = audio;
+
+    const formatedLeftTime = secondsToMinutesAndSeconds(duration - currentTime);
+    const formatedCurrentTime = secondsToMinutesAndSeconds(currentTime);
+    const formatedDuration = secondsToMinutesAndSeconds(duration);
 
     const Time = useMemo(
       () => (timeRender === 'tag' ? Tag : (props: any) => <time {...props} />),
@@ -57,12 +62,12 @@ const AudioPlayer = memo<AudioPlayerProps>(
         className={className}
         gap={8}
         horizontal
-        style={{ paddingRight: 8, width: '100%', ...style }}
+        style={{ paddingRight: showDownload ? 0 : 8, width: '100%', ...style }}
       >
         {allowPause ? (
           <ActionIcon
             icon={isPlaying ? Pause : Play}
-            onClick={togglePlayPause}
+            onClick={isPlaying ? pause : play}
             size={buttonSize}
             style={{ flex: 'none' }}
           />
@@ -96,6 +101,14 @@ const AudioPlayer = memo<AudioPlayerProps>(
             )}
           </Time>
         )}
+        {showDownload && (
+          <ActionIcon
+            icon={Download}
+            onClick={download}
+            size={buttonSize}
+            style={{ flex: 'none' }}
+          />
+        )}
       </Flexbox>
     );
   },

diff --git a/src/AudioVisualizer/demos/index.tsx b/src/AudioVisualizer/demos/index.tsx
@@ -1,6 +1,5 @@
-import { AudioVisualizer, useBlobUrl } from '@lobehub/tts';
+import { AudioPlayer, AudioVisualizer, useAudioPlayer } from '@lobehub/tts';
 import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
-import { useCallback } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 export default () => {
@@ -18,13 +17,13 @@ export default () => {
         max: 100,
         min: 0,
         step: 1,
-        value: 24,
+        value: 8,
       },
       count: {
         max: 48,
         min: 0,
         step: 1,
-        value: 4,
+        value: 13,
       },
       gap: {
         max: 24,
@@ -45,27 +44,22 @@ export default () => {
         value: 48,
       },
       width: {
-        max: 480,
+        max: 48,
         min: 0,
         step: 1,
-        value: 48,
+        value: 16,
       },
     },
     { store },
   );
 
-  const { audio, isLoading } = useBlobUrl(url);
-
-  const Content = useCallback(() => {
-    if (!audio?.src || isLoading) return 'Loading...';
-    audio.play();
-    return <AudioVisualizer audio={audio} barStyle={barStyle} />;
-  }, [isLoading, audio, barStyle]);
+  const { ref, isLoading, ...audio } = useAudioPlayer(url);
 
   return (
     <StoryBook levaStore={store}>
       <Flexbox gap={8}>
-        <Content />
+        <AudioPlayer audio={audio} />
+        {!isLoading && audio.duration > 0 && <AudioVisualizer audioRef={ref} barStyle={barStyle} />}
       </Flexbox>
     </StoryBook>
   );

diff --git a/src/AudioVisualizer/index.tsx b/src/AudioVisualizer/index.tsx
@@ -1,11 +1,11 @@
 import { useTheme } from 'antd-style';
-import React, { memo } from 'react';
+import React, { RefObject, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { useAudioVisualizer } from '@/hooks/useAudioVisualizer';
 
 export interface AudioVisualizerProps {
-  audio: HTMLAudioElement;
+  audioRef: RefObject<HTMLAudioElement>;
   barStyle?: {
     borderRadius?: number;
     count?: number;
@@ -17,13 +17,13 @@ export interface AudioVisualizerProps {
   color?: string;
 }
 
-const AudioVisualizer = memo<AudioVisualizerProps>(({ color, audio, barStyle }) => {
+const AudioVisualizer = memo<AudioVisualizerProps>(({ color, audioRef, barStyle }) => {
   const { count, width, gap } = { count: 4, gap: 4, width: 48, ...barStyle };
   const maxHeight = barStyle?.maxHeight || width * 3;
   const minHeight = barStyle?.minHeight || width;
   const borderRadius = barStyle?.borderRadius || width / 2;
   const theme = useTheme();
-  const bars = useAudioVisualizer(audio, { count });
+  const bars = useAudioVisualizer(audioRef, { count });
   return (
     <Flexbox align={'center'} gap={gap} horizontal style={{ height: maxHeight }}>
       {bars.map((bar, index) => (