WIP - Support for React19

.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:tailwindcss/recommended",
+    ],
+    ignorePatterns: [
+        "dist",
+        ".eslintrc.cjs"
+    ],
+    parser: "@typescript-eslint/parser",
+    plugins: [
+        "react-refresh"
+    ],
+    rules: {
+        "react-refresh/only-export-components": [
+            "warn",
+            { allowConstantExport: true
+            },
+        ],
+        "@typescript-eslint/consistent-type-imports": "error",
+        "tailwindcss/no-custom-classname": "off",
+    },
+};
+

.gitignore

@@ -8,7 +8,6 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
 dist-ssr
 *.local
 

README.md

@@ -4,7 +4,7 @@ An audio recording helper for React. Provides a component and a hook to help wit
 
 [![NPM downloads][npm-download-img]][npm-download-url]
 [![Run ESlint][eslint-img]][eslint-url]
-[![Run Unit tests][test-img]][test-url] 
+[![Run Unit tests][test-img]][test-url]
 
 [npm-download-img]: https://img.shields.io/npm/dm/react-audio-voice-recorder.svg?style=round-square
 [npm-download-url]: https://www.npmjs.com/package/react-audio-voice-recorder
@@ -47,12 +47,12 @@ const addAudioElement = (blob) => {
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <AudioRecorder 
+    <AudioRecorder
       onRecordingComplete={addAudioElement}
       audioTrackConstraints={{
         noiseSuppression: true,
         echoCancellation: true,
-      }} 
+      }}
       downloadOnSavePress={true}
       downloadFileExtension="webm"
     />
@@ -139,7 +139,7 @@ const ExampleComponent = () => {
 
   return (
     <div>
-      <AudioRecorder 
+      <AudioRecorder
         onRecordingComplete={(blob) => addAudioElement(blob)}
         recorderControls={recorderControls}
       />

dist/components/AudioRecordingComponent.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement } from "react";
+import type { Props } from "./interfaces";
+/**
+ * Usage: https://github.com/samhirtarif/react-audio-recorder#audiorecorder-component
+ *
+ *
+ * @prop `onRecordingComplete` Method that gets called when save recording option is clicked
+ * @prop `recorderControls` Externally initilize hook and pass the returned object to this param, this gives your control over the component from outside the component.
+ * https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
+ * @prop `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
+ * @prop `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
+ * @prop `downloadOnSavePress` If set to `true` the file gets downloaded when save recording is pressed. Defaults to `false`
+ * @prop `downloadFileExtension` File extension for the audio filed that gets downloaded. Defaults to `mp3`. Allowed values are `mp3`, `wav` and `webm`
+ * @prop `showVisualizer` Displays a waveform visualization for the audio when set to `true`. Defaults to `false`
+ * @prop `classes` Is an object with attributes representing classes for different parts of the component
+ */
+declare const AudioRecorder: (props: Props) => ReactElement;
+export default AudioRecorder;

dist/components/interfaces.d.ts

@@ -0,0 +1,80 @@
+import type { MediaAudioTrackConstraints, recorderControls } from "../hooks/useAudioRecorder";
+interface StyleProps {
+    /**
+     * Applies passed classes to audio recorder container
+     **/
+    AudioRecorderClass?: string;
+    /**
+     * Applies passed classes to audio recorder start/save option
+     **/
+    AudioRecorderStartSaveClass?: string;
+    /**
+     * Applies passed classes to audio recorder timer
+     **/
+    AudioRecorderTimerClass?: string;
+    /**
+     * Applies passed classes to audio recorder status option
+     **/
+    AudioRecorderStatusClass?: string;
+    /**
+     * Applies passed classes to audio recorder pause/resume option
+     **/
+    AudioRecorderPauseResumeClass?: string;
+    /**
+     * Applies passed classes to audio recorder discard option
+     **/
+    AudioRecorderDiscardClass?: string;
+}
+export interface Props {
+    /**
+     * This gets called when the save button is clicked.
+     * In case the recording is cancelled, the blob is discarded.
+     **/
+    onRecordingComplete?: (blob: Blob) => void;
+    /**
+     * This gets called when the getUserMedia Promise is rejected.
+     * It takes the resultant DOMException as its parameter.
+     **/
+    onNotAllowedOrFound?: (exception: DOMException) => void;
+    /**
+     * Allows calling of hook outside this component. The controls returned by the hook can then be passed to the component using this prop.
+     * This allows for use of hook methods and state outside this component
+     * @sample_usage https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
+     **/
+    recorderControls?: recorderControls;
+    /**
+     * Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of
+     * `MediaTrackConstraints` that apply to the audio track
+     *
+     * @Property `deviceId`
+     * @Property `groupId`
+     * @Property `autoGainControl`
+     * @Property `channelCount`
+     * @Property `echoCancellation`
+     * @Property `noiseSuppression`
+     * @Property `sampleRate`
+     * @Property `sampleSize`
+     */
+    audioTrackConstraints?: MediaAudioTrackConstraints;
+    /**
+     * If set to `true` the file gets downloaded when save recording is pressed
+     **/
+    downloadOnSavePress?: boolean;
+    /**
+     * File extension for the audio filed that gets downloaded
+     **/
+    downloadFileExtension?: "mp3" | "wav" | "webm";
+    /**
+     * Displays a waveform visualization for the audio when set to `true`. Defaults to `false`
+     **/
+    showVisualizer?: boolean;
+    /**
+     * The options passed to the HTML MediaRecorder API.
+     **/
+    mediaRecorderOptions?: MediaRecorderOptions;
+    /**
+     * Custom classes to changes styles.
+     **/
+    classes?: StyleProps;
+}
+export {};

dist/hooks/useAudioRecorder.d.ts

@@ -0,0 +1,28 @@
+export interface recorderControls {
+    startRecording: () => void;
+    stopRecording: () => void;
+    togglePauseResume: () => void;
+    recordingBlob?: Blob;
+    isRecording: boolean;
+    isPaused: boolean;
+    recordingTime: number;
+    mediaRecorder?: MediaRecorder;
+}
+export type MediaAudioTrackConstraints = Pick<MediaTrackConstraints, "deviceId" | "groupId" | "autoGainControl" | "channelCount" | "echoCancellation" | "noiseSuppression" | "sampleRate" | "sampleSize">;
+/**
+ * @returns Controls for the recording. Details of returned controls are given below
+ *
+ * @param `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
+ * @param `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
+ *
+ * @details `startRecording`: Calling this method would result in the recording to start. Sets `isRecording` to true
+ * @details `stopRecording`: This results in a recording in progress being stopped and the resulting audio being present in `recordingBlob`. Sets `isRecording` to false
+ * @details `togglePauseResume`: Calling this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused`
+ * @details `recordingBlob`: This is the recording blob that is created after `stopRecording` has been called
+ * @details `isRecording`: A boolean value that represents whether a recording is currently in progress
+ * @details `isPaused`: A boolean value that represents whether a recording in progress is paused
+ * @details `recordingTime`: Number of seconds that the recording has gone on. This is updated every second
+ * @details `mediaRecorder`: The current mediaRecorder in use
+ */
+declare const useAudioRecorder: (audioTrackConstraints?: MediaAudioTrackConstraints, onNotAllowedOrFound?: (exception: DOMException) => void, mediaRecorderOptions?: MediaRecorderOptions) => recorderControls;
+export default useAudioRecorder;