Audio recording feature #5263

TheNexter · 2025-11-18T17:38:30Z

If you need any information or change, feel free to request me.

Screenshot

(Old player design, new one in the next message)

TheNexter · 2025-11-18T19:06:17Z

Edit : little refine for more simplicity

when hover :

Copilot

Pull Request Overview

This PR introduces an audio recording feature that allows users to record and attach audio files to memos. The implementation includes a custom audio recorder hook, a new audio player component, and UI integration in the memo editor.

Custom React hook (useAudioRecorder) for managing audio recording state and MediaRecorder API interactions
New AudioPlayer component with custom playback controls to replace the default HTML5 audio element
UI integration in the InsertMenu with recording controls and menu option

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
web/src/components/MemoEditor/ActionButton/InsertMenu/useAudioRecorder.ts	Custom hook managing MediaRecorder API, recording state, pause/resume functionality, and timer
web/src/components/MemoEditor/ActionButton/InsertMenu.tsx	Adds "Record Audio" menu item and recording UI with controls for pause/resume, stop, and cancel
web/src/components/AudioPlayer.tsx	Custom audio player component with play/pause, seek, and time display functionality
web/src/components/MemoAttachment.tsx	Updates audio attachment rendering to use the new AudioPlayer component

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

web/src/components/AudioPlayer.tsx

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

web/src/components/AudioPlayer.tsx

TheNexter · 2025-11-19T11:57:20Z

I have apply suggestion made by copilot, if you have other suggestion or requirement, feel free to ask me anything 😊

Copilot

Pull Request Overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 12 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-19T14:14:36Z

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

+            <span className="font-mono text-sm">{new Date(audioRecorder.recordingTime * 1000).toISOString().substring(14, 19)}</span>
+          </div>
+          <Button variant="outline" size="icon" onClick={audioRecorder.togglePause} className="shrink-0">
+            {audioRecorder.isPaused ? <MicIcon className="w-4 h-4" /> : <span className="font-bold text-xs">||</span>}


The pause button icon uses a hardcoded double pipe string "||" instead of a proper Pause icon component. This is inconsistent with the rest of the UI which uses Lucide icons. Consider using PauseIcon which is already imported.

Copilot · 2025-11-19T14:14:36Z

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

+          <Button variant="outline" size="icon" onClick={handleStopRecording} className="shrink-0 text-red-600 hover:text-red-700">
+            <div className="w-3 h-3 bg-current rounded-sm" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0">


[nitpick] The cancel recording button lacks clear visual indication of its destructive action. Consider adding text-red-600 or similar styling to match the stop button's indication that it's a cancel/delete action, improving user understanding of the button's purpose.

Suggested change

<Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0">

<Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0 text-red-600 hover:text-red-700">

Copilot · 2025-11-19T14:14:37Z

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

+          <Button variant="outline" size="icon" onClick={audioRecorder.togglePause} className="shrink-0">
+            {audioRecorder.isPaused ? <MicIcon className="w-4 h-4" /> : <span className="font-bold text-xs">||</span>}
+          </Button>
+          <Button variant="outline" size="icon" onClick={handleStopRecording} className="shrink-0 text-red-600 hover:text-red-700">
+            <div className="w-3 h-3 bg-current rounded-sm" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0">


The recording control buttons lack accessible labels. Screen reader users won't know what the pause, stop, and cancel buttons do. Add aria-label attributes to each button to describe their purpose (e.g., "Pause recording", "Stop and save recording", "Cancel recording").

Suggested change

<Button variant="outline" size="icon" onClick={audioRecorder.togglePause} className="shrink-0">

{audioRecorder.isPaused ? <MicIcon className="w-4 h-4" /> : <span className="font-bold text-xs">||</span>}

</Button>

<Button variant="outline" size="icon" onClick={handleStopRecording} className="shrink-0 text-red-600 hover:text-red-700">

<div className="w-3 h-3 bg-current rounded-sm" />

</Button>

<Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0">

<Button

variant="outline"

size="icon"

onClick={audioRecorder.togglePause}

className="shrink-0"

aria-label={audioRecorder.isPaused ? "Resume recording" : "Pause recording"}

>

{audioRecorder.isPaused ? <MicIcon className="w-4 h-4" /> : <span className="font-bold text-xs">||</span>}

</Button>

<Button

variant="outline"

size="icon"

onClick={handleStopRecording}

className="shrink-0 text-red-600 hover:text-red-700"

aria-label="Stop and save recording"

>

<div className="w-3 h-3 bg-current rounded-sm" />

</Button>

<Button

variant="ghost"

size="icon"

onClick={audioRecorder.cancelRecording}

className="shrink-0"

aria-label="Cancel recording"

>

Copilot · 2025-11-19T14:14:37Z

web/src/components/AudioPlayer.tsx

+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={togglePlayPause}
+          disabled={isLoading}
+          className="shrink-0 h-auto w-auto p-0.5 hover:bg-background/50"
+        >
+          {isPlaying ? <PauseIcon className="w-4 h-4" /> : <PlayIcon className="w-4 h-4" />}
+        </Button>
+        <input
+          type="range"
+          min="0"
+          max={duration || 0}
+          value={currentTime}
+          onChange={handleSeek}
+          disabled={isLoading || !duration}
+          className="flex-1 h-1 bg-muted hover:bg-background/50 rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"
+        />


The audio player controls lack accessible labels. The play/pause button and seek slider need aria-label attributes for screen reader users. Add labels like "Play audio" / "Pause audio" for the button and "Seek audio position" for the range input.

Copilot · 2025-11-19T14:14:37Z

web/src/components/AudioPlayer.tsx

+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("ended", handleEnded);
+    };
+  }, []);


The useEffect hook doesn't include src in its dependency array. When the audio source changes, the old event listeners remain attached to the audio element without proper cleanup. This can cause stale state updates and memory leaks. Add src to the dependency array or clean up and re-attach listeners when src changes.

Suggested change

}, []);

}, [src]);

Copilot · 2025-11-19T14:14:38Z

web/src/components/MemoEditor/ActionButton/InsertMenu/useAudioRecorder.ts

+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const mediaRecorder = new MediaRecorder(stream);
+      chunksRef.current = [];
+
+      mediaRecorder.ondataavailable = (e: BlobEvent) => {
+        if (e.data.size > 0) {
+          chunksRef.current.push(e.data);
+        }
+      };
+
+      mediaRecorder.start();
+      setState((prev: AudioRecorderState) => ({ ...prev, isRecording: true, mediaRecorder }));
+
+      timerRef.current = window.setInterval(() => {
+        setState((prev) => {
+          if (prev.isPaused) {
+            return prev;
+          }
+          return { ...prev, recordingTime: prev.recordingTime + 1 };
+        });
+      }, 1000);
+    } catch (error) {
+      console.error("Error accessing microphone:", error);
+      throw error;
+    }


The media stream tracks are not stopped when an error occurs in startRecording. If navigator.mediaDevices.getUserMedia succeeds but any subsequent operation fails before the stream is stored, the tracks will remain active and the microphone will stay on. Add proper cleanup in the catch block.

Copilot · 2025-11-19T14:14:39Z

web/src/components/MemoEditor/ActionButton/InsertMenu.tsx

+      context.setAttachmentList([...context.attachmentList, attachment]);
+    } catch (error: any) {
+      console.error("Failed to upload audio recording:", error);
+      toast.error(error.details || "Failed to upload audio recording");


The error message fallback uses error.details which is not a standard Error property in JavaScript. Standard Error objects have message property. Consider using error.message || "Failed to upload audio recording" for proper error handling.

Suggested change

toast.error(error.details || "Failed to upload audio recording");

toast.error(error.message || "Failed to upload audio recording");

Copilot · 2025-11-19T14:14:39Z

web/src/components/AudioPlayer.tsx

+          value={currentTime}
+          onChange={handleSeek}
+          disabled={isLoading || !duration}
+          className="flex-1 h-1 bg-muted hover:bg-background/50 rounded-lg appearance-none cursor-pointer disabled:opacity-50 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0"


[nitpick] The range input has extremely long className with complex styling that makes it hard to read and maintain. Consider extracting this to a separate CSS class or using a more maintainable approach with CSS modules or styled components.

Copilot · 2025-11-19T14:14:39Z

web/src/components/MemoEditor/ActionButton/InsertMenu/useAudioRecorder.ts

+      timerRef.current = window.setInterval(() => {
+        setState((prev) => {
+          if (prev.isPaused) {
+            return prev;
+          }
+          return { ...prev, recordingTime: prev.recordingTime + 1 };
+        });
+      }, 1000);


[nitpick] The recording timer updates state every second, causing re-renders of the entire component tree. Since the timer display is the only thing changing, consider using a ref for the timer value and only update state for the display, or memoize expensive child components to prevent unnecessary re-renders.

Copilot · 2025-11-19T14:14:40Z

web/src/components/MemoEditor/ActionButton/InsertMenu/useAudioRecorder.ts

+  const stopRecording = (): Promise<Blob> => {
+    return new Promise((resolve, reject) => {
+      const { mediaRecorder } = state;
+      if (!mediaRecorder) {
+        reject(new Error("No active recording"));
+        return;
+      }
+
+      mediaRecorder.onstop = () => {
+        const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+        chunksRef.current = [];
+        resolve(blob);
+      };
+
+      mediaRecorder.stop();
+      mediaRecorder.stream.getTracks().forEach((track: MediaStreamTrack) => track.stop());
+
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+
+      setState({
+        isRecording: false,
+        isPaused: false,
+        recordingTime: 0,
+        mediaRecorder: null,
+      });
+    });
+  };


The timer reference uses number type which is correct for browser setInterval, but the state update closure in the timer captures stale state. When stopRecording or cancelRecording is called, the timer continues to run until explicitly cleared because the promise resolution happens after the interval is already running. Consider moving the timer cleanup before the mediaRecorder stop to ensure proper cleanup order.

…with better responsive design) (lint done this time)

TheNexter · 2025-11-19T17:00:48Z

If you need more stuff, feel free to ask me 😊

TheNexter added 3 commits November 18, 2025 17:58

Audio recording

abcab8d

Better design audio record button

9027ece

Custom audio player that match design of memos

bbc82f9

TheNexter requested a review from boojack as a code owner November 18, 2025 17:38

Audio player redesign, better looking version

61a3142

TheNexter added 3 commits November 18, 2025 20:30

Little refine

25f1bcf

little css fix

063128e

Lint fix (sorry)

02b36d5

boojack requested a review from Copilot November 19, 2025 09:29

Copilot started reviewing on behalf of boojack November 19, 2025 09:29 View session

Copilot finished reviewing on behalf of boojack November 19, 2025 09:30

Copilot AI reviewed Nov 19, 2025

View reviewed changes

Apply suggestion made by Copilot

1cd7973

Fix lint

6e6ade0

boojack requested a review from Copilot November 19, 2025 14:08

Copilot started reviewing on behalf of boojack November 19, 2025 14:09 View session

Copilot finished reviewing on behalf of boojack November 19, 2025 14:11

Copilot AI reviewed Nov 19, 2025

View reviewed changes

Apply new proposition from Copilot + little refine in player design (…

eb7f779

…with better responsive design) (lint done this time)

	<Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0">
	<Button variant="ghost" size="icon" onClick={audioRecorder.cancelRecording} className="shrink-0 text-red-600 hover:text-red-700">

	toast.error(error.details \|\| "Failed to upload audio recording");
	toast.error(error.message \|\| "Failed to upload audio recording");

Uh oh!

Audio recording feature #5263

Are you sure you want to change the base?

Audio recording feature #5263

Conversation

TheNexter commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshot

Uh oh!

TheNexter commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TheNexter commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

TheNexter commented Nov 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

TheNexter commented Nov 18, 2025 •

edited

Loading

TheNexter commented Nov 18, 2025 •

edited

Loading

TheNexter commented Nov 19, 2025 •

edited

Loading