From cf4b246ce1cada2b45c031b5f07188d098ed280a Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Wed, 19 Nov 2025 16:53:01 +0300
Subject: [PATCH] feat: add toggle to record

---
 src/App.tsx                    |  6 +++++-
 src/components/MicRecorder.tsx | 38 +++++++++++++++++++++++++++-------
 src/components/Settings.tsx    | 18 ++++++++++++++++
 src/lib/settings.ts            | 14 +++++++++++++
 4 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 63143c5..2f8ee85 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,6 +31,7 @@ import Settings from "./components/Settings";
 import MicRecorder from "./components/MicRecorder";
 import { Link } from "./components/ui/link";
 import { css } from "styled-system/css";
+import { toggleToRecord } from "./lib/settings";
 
 const App = () => {
   const collection = () =>
@@ -273,7 +274,10 @@ const Upload = (props: FileUpload.RootProps) => {
               </Button>
             )}
           />
-          <MicRecorder selectedAccount={selectedAccount} />
+          <MicRecorder
+            selectedAccount={selectedAccount}
+            holdToRecord={!toggleToRecord()}
+          />
           {/*<IconButton
             size="sm"
             onClick={() =>
diff --git a/src/components/MicRecorder.tsx b/src/components/MicRecorder.tsx
index f4e455f..0ccd0da 100644
--- a/src/components/MicRecorder.tsx
+++ b/src/components/MicRecorder.tsx
@@ -1,5 +1,5 @@
-import { createSignal, onCleanup } from "solid-js";
-import { MicIcon } from "lucide-solid";
+import { createSignal, onCleanup, Show } from "solid-js";
+import { CircleStopIcon, MicIcon } from "lucide-solid";
 import { IconButton } from "./ui/icon-button";
 import { Popover } from "./ui/popover";
 import { AtprotoDid } from "@atcute/lexicons/syntax";
@@ -9,6 +9,7 @@ import { createTimeDifferenceFromNow } from "@solid-primitives/date";
 
 type MicRecorderProps = {
   selectedAccount: () => AtprotoDid | undefined;
+  holdToRecord?: boolean;
 };
 
 const MicRecorder = (props: MicRecorderProps) => {
@@ -33,6 +34,8 @@ const MicRecorder = (props: MicRecorderProps) => {
   const fallbackMimeType = isSafari ? "audio/mp4" : "audio/webm";
 
   const startRecording = async () => {
+    if (isRecording()) return;
+
     try {
       audioChunks = [];
 
@@ -168,13 +171,32 @@ const MicRecorder = (props: MicRecorderProps) => {
             size="md"
             variant={isRecording() ? "solid" : "subtle"}
             colorPalette={isRecording() ? "red" : undefined}
-            onMouseDown={startRecording}
-            onMouseUp={stopRecording}
-            onMouseLeave={stopRecording}
-            onTouchStart={startRecording}
-            onTouchEnd={stopRecording}
+            onClick={
+              !props.holdToRecord
+                ? () => (isRecording() ? stopRecording() : startRecording())
+                : undefined
+            }
+            onMouseDown={props.holdToRecord ? startRecording : undefined}
+            onMouseUp={props.holdToRecord ? stopRecording : undefined}
+            onMouseLeave={props.holdToRecord ? stopRecording : undefined}
+            onTouchStart={
+              props.holdToRecord
+                ? (e) => {
+                    e.preventDefault(); // Prevent mouse emulation
+                    startRecording();
+                  }
+                : undefined
+            }
+            onTouchEnd={
+              props.holdToRecord
+                ? (e) => {
+                    e.preventDefault();
+                    stopRecording();
+                  }
+                : undefined
+            }
           >
-            <MicIcon />
+            {isRecording() ? <CircleStopIcon /> : <MicIcon />}
           </IconButton>
         )}
       />
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 879ce9d..6f9b55b 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -34,7 +34,10 @@ import {
   backgroundColor as backgroundColorSetting,
   frameRate as frameRateSetting,
   useDominantColorAsBg as useDominantColorAsBgSetting,
+  toggleToRecordSetting,
   Setting,
+  toggleToRecord,
+  setToggleToRecord,
 } from "~/lib/settings";
 import { handleResolver } from "~/lib/at";
 import { toaster } from "~/components/Toaster";
@@ -351,6 +354,21 @@ const Settings = () => {
           <Drawer.Body>
             <Stack gap="4">
               <Accounts />
+              <Stack>
+                <FormLabel>user interface</FormLabel>
+                <Stack
+                  gap="0"
+                  border="1px solid var(--colors-border-default)"
+                  borderBottomWidth="3px"
+                  rounded="xs"
+                >
+                  <SettingCheckbox
+                    label="use toggle to record"
+                    setting={toggleToRecordSetting}
+                    signal={[toggleToRecord, setToggleToRecord]}
+                  />
+                </Stack>
+              </Stack>
               <Stack>
                 <FormLabel>processing</FormLabel>
                 <Stack
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index 33fb3b8..a4c929b 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -1,3 +1,5 @@
+import { createSignal } from "solid-js";
+
 export const setting = <T>(key: string) => {
   return {
     get: () => {
@@ -17,3 +19,15 @@ export const showProfilePicture = setting<boolean>("showProfilePicture");
 export const useDominantColorAsBg = setting<boolean>("useDominantColorAsBg");
 export const backgroundColor = setting<string>("backgroundColor");
 export const frameRate = setting<number>("frameRate");
+
+export const toggleToRecordSetting = setting<boolean>("toggleToRecord");
+const [_toggleToRecord, _setToggleToRecord] = createSignal<boolean>(
+  toggleToRecordSetting.get() ?? false,
+);
+export const toggleToRecord = _toggleToRecord;
+export const setToggleToRecord = (
+  value: boolean | ((prev: boolean) => boolean),
+) => {
+  const newAccounts = _setToggleToRecord(value);
+  toggleToRecordSetting.set(newAccounts);
+};
-- 
2.51.2