🔴 refactor: Enhance Recorder component with stop functionality and UI updates

- Added `StopCircle` icon from `lucide-react` for a clear stop recording action.
- Implemented hover state logic to switch between recording indicator and stop icon.
- Improved formatting and logic for starting and stopping recordings.

Author: mangledbottles

apps/desktop/src/components/Recorder.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { Source, UploadLink, baseUrl, isProd } from "../utils";
-import { Video } from "lucide-react";
+import { StopCircle, Video } from "lucide-react";
 import { captureException } from "@sentry/react";
 import { Progress } from "./ui/progress";
 
@@ -22,6 +22,7 @@ export function Recorder({
   const [audioStream, setAudioStream] = useState<MediaStream | null>(null);
   const [progress, setProgress] = useState(13);
   const [justStarted, setJustStarted] = useState(false);
+  const [isHoveringStopRecording, setIsHoveringStopRecording] = useState(false);
 
   const uploadFile = async (
     uploadFilePath: string,
@@ -48,7 +49,7 @@ export function Recorder({
       }
       await window.electron.uploadVideo(uploadFilePath, uploadLink);
       const uploadUrl = `${baseUrl}/view/${uploadId}`;
-      if(openInBrowser) await window.electron.openInBrowser(uploadUrl);
+      if (openInBrowser) await window.electron.openInBrowser(uploadUrl);
     } catch (error) {
       console.error("Failed to upload file:", error);
       captureException(error, {
@@ -365,7 +366,11 @@ export function Recorder({
     }
   };
 
-  const stopRecording = () => {
+  const stopRecording = async () => {
+    await window.electron.stopRecording();
+  };
+
+  const stopRecordingStreams = () => {
     try {
       setIsRecording(false);
 
@@ -415,25 +420,40 @@ export function Recorder({
   // @ts-ignore
   window.electron.on("finished-recording", (status: boolean) => {
     if (status) {
-      stopRecording();
+      stopRecordingStreams();
     }
   });
 
   return (
     <div>
       <button
-        onClick={startRecording}
-        disabled={isRecording}
+        onClick={isRecording ? stopRecording : startRecording}
         className={`w-full h-10 group relative justify-center gap-2 transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-2 bg-sky-700 text-white hover:bg-sky-900 border border-transparent hover:border-sky-900 focus:border-sky-500 focus:ring focus:ring-sky-500 rounded-lg ${
           isRecording &&
           "bg-red-500 hover:bg-red-600 focus:border-red-400 focus:ring-red-400"
         }`}
       >
         {isRecording ? (
-          <div className="flex items-center">
-            <div className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 ml-3"></div>
-            <div className="relative inline-flex rounded-full h-3 w-3 bg-red-400 ml-3"></div>
-            <span className="text-md ml-3">Recording...</span>
+          <div
+            className="flex items-center justify-between"
+            onMouseEnter={() => setIsHoveringStopRecording(true)}
+            onMouseLeave={() => setIsHoveringStopRecording(false)}
+          >
+            <div className="flex items-center">
+              {isHoveringStopRecording ? (
+                <StopCircle className={"ml-2 h-4 w-4 "} />
+              ) : (
+                <>
+                  <div className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 ml-3"></div>
+                  <div className="relative inline-flex rounded-full h-3 w-3 bg-red-400 ml-3"></div>
+                </>
+              )}
+              {isHoveringStopRecording ? (
+                <span className="text-md ml-3">Stop Recording</span>
+              ) : (
+                <span className="text-md ml-3">Recording...</span>
+              )}
+            </div>
           </div>
         ) : justStarted ? (
           <div className="flex items-center justify-center">
@@ -452,4 +472,4 @@ export function Recorder({
       )}
     </div>
   );
-}
+}

apps/desktop/src/utils.ts

@@ -70,4 +70,4 @@ export const logout = async () => {
 export const refreshDeviceCode = async () => {
     const newDeviceCode = await window.electron.getDeviceCode();
     return newDeviceCode;
-  };
+};