feat: added push-to-talk-button

Eyevinn · Apr 15, 2024 · 2eb7115 · 2eb7115
1 parent fe27a5f
commit 2eb7115
Showing 1 changed file with 65 additions and 1 deletion.
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -11,6 +11,7 @@ import { API } from "../../api/api.ts";
 import { noop } from "../../helpers.ts";
 import { MicMuted, MicUnmuted } from "../../assets/icons/icon.tsx";
 import { Spinner } from "../loader/loader.tsx";
+import { isMobile } from "../../bowser.ts";
 
 const TempDiv = styled.div`
   padding: 1rem;
@@ -32,6 +33,9 @@ export const ProductionLine: FC = () => {
     { name: string; sessionid: string }[] | null
   >(null);
   const [loading, setLoading] = useState<boolean>(true);
+  const [downTime, setDownTime] = useState(0);
+  const [longPressTimeout, setLongPressTimeout] =
+    useState<ReturnType<typeof setTimeout>>();
 
   const inputAudioStream = useAudioInput({
     inputId: joinProductionOptions?.audioinput ?? null,
@@ -95,6 +99,7 @@ export const ProductionLine: FC = () => {
       mediaStreamInput.getTracks().forEach((track) => {
         // eslint-disable-next-line no-param-reassign
         track.enabled = !micMute;
+        console.log("Is audio enabled?", track.enabled);
       });
     }
   }, [mediaStreamInput, micMute]);
@@ -103,6 +108,41 @@ export const ProductionLine: FC = () => {
   // Show active sink and mic
   // Exit button (link to /, clear production from state)
 
+  useEffect(() => {
+    return () => {
+      if (longPressTimeout) {
+        clearTimeout(longPressTimeout);
+      }
+    };
+  }, [longPressTimeout]);
+
+  const getKeyPressTime = (
+    e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>
+  ) => {
+    let timeoutId: NodeJS.Timeout;
+
+    const caseStart = isMobile ? "touchstart" : "mousedown";
+    const caseStop = isMobile ? "touchend" : "mouseup";
+
+    switch (e.type) {
+      case caseStart:
+        setDownTime(e.timeStamp);
+        timeoutId = setTimeout(() => {
+          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+          e.timeStamp - downTime > 800 ? setMicMute(true) : setMicMute(false);
+          setMicMute(false);
+        }, 800);
+        setLongPressTimeout(timeoutId);
+        break;
+      case caseStop:
+        setMicMute(true);
+        clearTimeout(longPressTimeout);
+        break;
+      default:
+        console.error(`Invalid event type received: ${e.type}`);
+    }
+  };
+
   return (
     <div>
       <TempDiv>
@@ -113,9 +153,33 @@ export const ProductionLine: FC = () => {
         <>
           <TempDiv>Production View</TempDiv>
           <TempDiv>
-            <UserControlBtn type="button" onClick={() => setMicMute(!micMute)}>
+            <UserControlBtn
+              type="button"
+              onClick={() => {
+                setMicMute(!micMute);
+              }}
+            >
               {micMute ? <MicMuted /> : <MicUnmuted />}
             </UserControlBtn>
+            <ActionButton
+              className={!micMute ? "submit" : ""}
+              type="button"
+              onTouchStart={(e) => {
+                getKeyPressTime(e);
+              }}
+              onTouchEnd={(e) => {
+                getKeyPressTime(e);
+              }}
+              onMouseDown={(e) => {
+                getKeyPressTime(e);
+              }}
+              onMouseUp={(e) => {
+                getKeyPressTime(e);
+              }}
+            >
+              Press to Talk
+              {!micMute && <Spinner className="push-to-talk" />}
+            </ActionButton>
           </TempDiv>
           <TempDiv ref={audioContainerRef} />
           {audioElements.length && (