✨ feat: Add SWR config to hooks

src/class/MicorsoftSpeechTTS.ts → src/class/MicrosoftSpeechTTS.ts

@@ -3,7 +3,7 @@ import voiceName from '@/data/voiceList';
 import { fetchMicrosoftSpeech } from '@/services/fetchMicrosoftSpeech';
 import { getAzureVoiceOptions, getVoiceLocaleOptions } from '@/utils/getVoiceList';
 
-export class MicorsoftSpeechTTS {
+export class MicrosoftSpeechTTS {
   private locale?: string;
   constructor(locale?: string) {
     this.locale = locale;

src/index.ts

@@ -1,5 +1,5 @@
 export { EdgeSpeechTTS } from './class/EdgeSpeechTTS';
-export { MicorsoftSpeechTTS } from './class/MicorsoftSpeechTTS';
+export { MicrosoftSpeechTTS } from './class/MicrosoftSpeechTTS';
 export { OpenaiSTT } from './class/OpenaiSTT';
 export { OpenaiTTS } from './class/OpenaiTTS';
 export { VoiceList } from './class/VoiceList';

src/react/index.ts

@@ -9,7 +9,6 @@ export { useEdgeSpeech } from './useEdgeSpeech';
 export { useMicrosoftSpeech } from './useMicrosoftSpeech';
 export {
   type OpenaiSpeechRecognitionOptions,
-  type OpenaiSTTFetcher,
   useOpenaiSTT,
   useOpenaiSTTWithPSR,
   useOpenaiSTTWithRecord,

src/react/useEdgeSpeech/index.ts

@@ -1,12 +1,19 @@
 import { useState } from 'react';
 
-import { useTTS } from '@/react/useTTS';
+import { TTSConfig, useTTS } from '@/react/useTTS';
 import { EdgeSpeechOptions, fetchEdgeSpeech } from '@/services/fetchEdgeSpeech';
 
-export const useEdgeSpeech = (defaultText: string, options: EdgeSpeechOptions) => {
+export const useEdgeSpeech = (
+  defaultText: string,
+  options: EdgeSpeechOptions,
+  config?: TTSConfig,
+) => {
   const [text, setText] = useState<string>(defaultText);
-  const rest = useTTS(options.voice, text, (segmentText: string) =>
-    fetchEdgeSpeech(segmentText, options),
+  const rest = useTTS(
+    options.voice,
+    text,
+    (segmentText: string) => fetchEdgeSpeech(segmentText, options),
+    config,
   );
   return {
     setText,

src/react/useMicrosoftSpeech/index.ts

@@ -1,12 +1,19 @@
 import { useState } from 'react';
 
-import { useTTS } from '@/react/useTTS';
+import { TTSConfig, useTTS } from '@/react/useTTS';
 import { type MicrosoftSpeechOptions, fetchMicrosoftSpeech } from '@/services/fetchMicrosoftSpeech';
 
-export const useMicrosoftSpeech = (defaultText: string, options: MicrosoftSpeechOptions) => {
+export const useMicrosoftSpeech = (
+  defaultText: string,
+  options: MicrosoftSpeechOptions,
+  config?: TTSConfig,
+) => {
   const [text, setText] = useState<string>(defaultText);
-  const rest = useTTS(options.voice, text, (segmentText: string) =>
-    fetchMicrosoftSpeech(segmentText, options),
+  const rest = useTTS(
+    options.voice,
+    text,
+    (segmentText: string) => fetchMicrosoftSpeech(segmentText, options),
+    config,
   );
   return {
     setText,

src/react/useOpenaiSTT/index.ts

@@ -1,4 +1,4 @@
-export { type OpenaiSTTFetcher, useOpenaiSTT } from './useOpenaiSTT';
+export { useOpenaiSTT } from './useOpenaiSTT';
 export { useOpenaiSTTWithPSR } from './useOpenaiSTTWithPSR';
 export {
   type OpenaiSpeechRecognitionOptions,

src/react/useOpenaiSTT/useOpenaiSTT.ts

@@ -3,23 +3,19 @@ import useSWR, { type SWRConfiguration } from 'swr';
 import { OpenaiSttOptions, fetchOpenaiSTT } from '@/services/fetchOpenaiSTT';
 import { getRecordMineType } from '@/utils/getRecordMineType';
 
-export type OpenaiSTTFetcher = (blob: Blob, sttOptions: OpenaiSttOptions) => Promise<string>;
 export const useOpenaiSTT = (
   shouldFetch?: boolean,
   blob?: Blob,
   options?: OpenaiSttOptions,
   config?: SWRConfiguration,
-  fetcher?: OpenaiSTTFetcher,
 ) => {
   const key = new Date().getDate().toString();
 
   const optionsWithMineType: OpenaiSttOptions = { ...options, mineType: getRecordMineType() };
 
-  const openaiSTTFetcher = fetcher ?? fetchOpenaiSTT;
-
   return useSWR(
     shouldFetch && blob ? key : null,
-    async () => await openaiSTTFetcher(blob as Blob, optionsWithMineType),
+    async () => await fetchOpenaiSTT(blob as Blob, optionsWithMineType),
     config,
   );
 };

src/react/useOpenaiSTT/useOpenaiSTTWithPSR.ts

@@ -1,14 +1,22 @@
 import { useCallback, useState } from 'react';
 
-import { OpenaiSTTFetcher, useOpenaiSTT } from '@/react/useOpenaiSTT/useOpenaiSTT';
+import { useOpenaiSTT } from '@/react/useOpenaiSTT/useOpenaiSTT';
 import { usePersistedSpeechRecognition } from '@/react/useSpeechRecognition';
 
-import { OpenaiSpeechRecognitionOptions } from './useOpenaiSTTWithRecord';
+import { OpenaiSpeechRecognitionOptions, STTConfig } from './useOpenaiSTTWithRecord';
 
 export const useOpenaiSTTWithPSR = (
   locale: string,
-  { onBolbAvailable, onTextChange, ...options }: OpenaiSpeechRecognitionOptions,
-  fetcher?: OpenaiSTTFetcher,
+  options: OpenaiSpeechRecognitionOptions,
+  {
+    onBolbAvailable,
+    onTextChange,
+    onSuccess,
+    onError,
+    onFinished,
+    onStart,
+    onStop,
+  }: STTConfig = {},
 ) => {
   const [isGlobalLoading, setIsGlobalLoading] = useState<boolean>(false);
   const [shouldFetch, setShouldFetch] = useState<boolean>(false);
@@ -33,34 +41,33 @@ export const useOpenaiSTTWithPSR = (
   });
 
   const handleStart = useCallback(() => {
+    onStart?.();
     setIsGlobalLoading(true);
     start();
     setText('');
   }, [start]);
 
   const handleStop = useCallback(() => {
+    onStop?.();
     stop();
     setShouldFetch(false);
     setIsGlobalLoading(false);
   }, [stop]);
 
-  const { isLoading } = useOpenaiSTT(
-    shouldFetch,
-    blob,
-    options,
-    {
-      onError: (err) => {
-        console.error(err);
-        handleStop();
-      },
-      onSuccess: (data) => {
-        setText(data);
-        onTextChange?.(data);
-        handleStop();
-      },
+  const { isLoading } = useOpenaiSTT(shouldFetch, blob, options, {
+    onError: (err, ...rest) => {
+      onError?.(err, ...rest);
+      console.error(err);
+      handleStop();
     },
-    fetcher,
-  );
+    onSuccess: (data, ...rest) => {
+      onSuccess?.(data, ...rest);
+      setText(data);
+      onTextChange?.(data);
+      handleStop();
+      onFinished?.(data, ...rest);
+    },
+  });
 
   return {
     blob,

src/react/useOpenaiSTT/useOpenaiSTTWithRecord.ts

@@ -1,15 +1,30 @@
 import { useCallback, useState } from 'react';
+import { SWRConfiguration } from 'swr';
 
 import { useAudioRecorder } from '@/react/useAudioRecorder';
-import { OpenaiSTTFetcher, useOpenaiSTT } from '@/react/useOpenaiSTT/useOpenaiSTT';
+import { useOpenaiSTT } from '@/react/useOpenaiSTT/useOpenaiSTT';
 import { SpeechRecognitionOptions } from '@/react/useSpeechRecognition/useSpeechRecognition';
 import { OpenaiSttOptions } from '@/services/fetchOpenaiSTT';
 
 export type OpenaiSpeechRecognitionOptions = SpeechRecognitionOptions & OpenaiSttOptions;
 
+export interface STTConfig extends SpeechRecognitionOptions, SWRConfiguration {
+  onFinished?: SWRConfiguration['onSuccess'];
+  onStart?: () => void;
+  onStop?: () => void;
+}
+
 export const useOpenaiSTTWithRecord = (
-  { onBolbAvailable, onTextChange, ...options }: OpenaiSpeechRecognitionOptions,
-  fetcher?: OpenaiSTTFetcher,
+  options: OpenaiSttOptions,
+  {
+    onBolbAvailable,
+    onTextChange,
+    onSuccess,
+    onError,
+    onFinished,
+    onStart,
+    onStop,
+  }: STTConfig = {},
 ) => {
   const [isGlobalLoading, setIsGlobalLoading] = useState<boolean>(false);
   const [shouldFetch, setShouldFetch] = useState<boolean>(false);
@@ -22,34 +37,33 @@ export const useOpenaiSTTWithRecord = (
   );
 
   const handleStart = useCallback(() => {
+    onStart?.();
     setIsGlobalLoading(true);
     start();
     setText('');
   }, [start]);
 
   const handleStop = useCallback(() => {
+    onStop?.();
     stop();
     setShouldFetch(false);
     setIsGlobalLoading(false);
   }, [stop]);
 
-  const { isLoading } = useOpenaiSTT(
-    shouldFetch,
-    blob,
-    options,
-    {
-      onError: (err) => {
-        console.error(err);
-        handleStop();
-      },
-      onSuccess: (data, value) => {
-        setText(data);
-        onTextChange?.(value);
-        handleStop();
-      },
+  const { isLoading } = useOpenaiSTT(shouldFetch, blob, options, {
+    onError: (err, ...rest) => {
+      onError?.(err, ...rest);
+      console.error(err);
+      handleStop();
     },
-    fetcher,
-  );
+    onSuccess: (data, ...rest) => {
+      onSuccess?.(data, ...rest);
+      setText(data);
+      onTextChange?.(data);
+      handleStop();
+      onFinished?.(data, ...rest);
+    },
+  });
 
   return {
     blob,

src/react/useOpenaiSTT/useOpenaiSTTWithSR.ts

@@ -1,14 +1,22 @@
 import { useCallback, useState } from 'react';
 
-import { OpenaiSTTFetcher, useOpenaiSTT } from '@/react/useOpenaiSTT/useOpenaiSTT';
+import { useOpenaiSTT } from '@/react/useOpenaiSTT/useOpenaiSTT';
 import { useSpeechRecognition } from '@/react/useSpeechRecognition';
 
-import { OpenaiSpeechRecognitionOptions } from './useOpenaiSTTWithRecord';
+import { OpenaiSpeechRecognitionOptions, STTConfig } from './useOpenaiSTTWithRecord';
 
 export const useOpenaiSTTWithSR = (
   locale: string,
-  { onBolbAvailable, onTextChange, ...options }: OpenaiSpeechRecognitionOptions,
-  fetcher?: OpenaiSTTFetcher,
+  options: OpenaiSpeechRecognitionOptions,
+  {
+    onBolbAvailable,
+    onTextChange,
+    onSuccess,
+    onError,
+    onFinished,
+    onStart,
+    onStop,
+  }: STTConfig = {},
 ) => {
   const [isGlobalLoading, setIsGlobalLoading] = useState<boolean>(false);
   const [shouldFetch, setShouldFetch] = useState<boolean>(false);
@@ -33,34 +41,33 @@ export const useOpenaiSTTWithSR = (
   });
 
   const handleStart = useCallback(() => {
+    onStart?.();
     setIsGlobalLoading(true);
     start();
     setText('');
   }, [start]);
 
   const handleStop = useCallback(() => {
+    onStop?.();
     stop();
     setShouldFetch(false);
     setIsGlobalLoading(false);
   }, [stop]);
 
-  const { isLoading } = useOpenaiSTT(
-    shouldFetch,
-    blob,
-    options,
-    {
-      onError: (err) => {
-        console.error(err);
-        handleStop();
-      },
-      onSuccess: (data) => {
-        setText(data);
-        onTextChange?.(data);
-        handleStop();
-      },
+  const { isLoading } = useOpenaiSTT(shouldFetch, blob, options, {
+    onError: (err, ...rest) => {
+      onError?.(err, ...rest);
+      console.error(err);
+      handleStop();
     },
-    fetcher,
-  );
+    onSuccess: (data, ...rest) => {
+      onSuccess?.(data, ...rest);
+      setText(data);
+      onTextChange?.(data);
+      handleStop();
+      onFinished?.(data, ...rest);
+    },
+  });
 
   return {
     blob,

src/react/useOpenaiTTS/index.ts

@@ -1,12 +1,19 @@
 import { useState } from 'react';
 
-import { useTTS } from '@/react/useTTS';
+import { TTSConfig, useTTS } from '@/react/useTTS';
 import { type OpenaiTtsOptions, fetchOpenaiTTS } from '@/services/fetchOpenaiTTS';
 
-export const useOpenaiTTS = (defaultText: string, options: OpenaiTtsOptions) => {
+export const useOpenaiTTS = (
+  defaultText: string,
+  options: OpenaiTtsOptions,
+  config?: TTSConfig,
+) => {
   const [text, setText] = useState<string>(defaultText);
-  const rest = useTTS(options.voice, text, (segmentText: string) =>
-    fetchOpenaiTTS(segmentText, options),
+  const rest = useTTS(
+    options.voice,
+    text,
+    (segmentText: string) => fetchOpenaiTTS(segmentText, options),
+    config,
   );
   return {
     setText,