fix: updated action-button on long-press

Eyevinn · Apr 17, 2024 · 309afd6 · 309afd6
1 parent 88fdd12
commit 309afd6
Showing 1 changed file with 20 additions and 6 deletions.
diff --git a/src/components/production-line/long-press-to-talk-button.tsx b/src/components/production-line/long-press-to-talk-button.tsx
@@ -1,12 +1,26 @@
 import { useEffect, useState } from "react";
+import styled from "@emotion/styled";
 import { ActionButton } from "../landing-page/form-elements";
-import { Spinner } from "../loader/loader";
+import { PulseLoader } from "../loader/loader";
+import { isMobile } from "../../bowser";
 
 type TLongPressToTalkButton = {
   micMute: boolean;
   setMicMute: (input: boolean) => void;
 };
 
+const Button = styled(ActionButton)`
+  position: relative;
+
+  &:active {
+    color: rgba(255, 255, 255, 0);
+  }
+
+  &.mobile {
+    user-select: none;
+  }
+`;
+
 export const LongPressToTalkButton = ({
   micMute,
   setMicMute,
@@ -33,7 +47,7 @@ export const LongPressToTalkButton = ({
       case "pointerdown":
         timeoutId = setTimeout(() => {
           setMicMute(false);
-        }, 800);
+        }, 600);
         setLongPressTimeout(timeoutId);
         break;
       case "pointerup":
@@ -46,8 +60,8 @@ export const LongPressToTalkButton = ({
   };
 
   return (
-    <ActionButton
-      className={!micMute ? "submit" : ""}
+    <Button
+      className={isMobile ? "mobile" : ""}
       type="button"
       onPointerDown={(e) => {
         toggleMuteAfterTimeout(e);
@@ -57,7 +71,7 @@ export const LongPressToTalkButton = ({
       }}
     >
       Press to Talk
-      {!micMute && <Spinner className="push-to-talk" />}
-    </ActionButton>
+      {!micMute && <PulseLoader />}
+    </Button>
   );
 };