feat: added push-to-talk-button

Eyevinn · Apr 16, 2024 · 708b982 · 708b982
1 parent 264178e
commit 708b982
Showing 1 changed file with 62 additions and 1 deletion.
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -17,6 +17,7 @@ import { DisplayContainer, FlexContainer } from "../generic-components.ts";
 import { useHeartbeat } from "./use-heartbeat.ts";
 import { JoinProduction } from "../landing-page/join-production.tsx";
 import { useDeviceLabels } from "./use-device-labels.ts";
+import { isMobile } from "../../bowser.ts";
 
 const TempDiv = styled.div`
   padding: 1rem 0;
@@ -59,6 +60,9 @@ export const ProductionLine: FC = () => {
 
   const [loading, setLoading] = useState<boolean>(true);
   const [production, setProduction] = useState<TProduction | null>(null);
+  const [downTime, setDownTime] = useState(0);
+  const [longPressTimeout, setLongPressTimeout] =
+    useState<ReturnType<typeof setTimeout>>();
 
   const inputAudioStream = useAudioInput({
     inputId: joinProductionOptions?.audioinput ?? null,
@@ -125,6 +129,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]);
@@ -152,6 +157,41 @@ export const ProductionLine: FC = () => {
   }
 
   // TODO detect if browser back button is pressed and run exit();
+  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 (
     <>
       <HeaderWrapper>
@@ -200,13 +240,34 @@ export const ProductionLine: FC = () => {
               <TempDiv>
                 <UserControlBtn
                   type="button"
-                  onClick={() => setMicMute(!micMute)}
+                  onClick={() => {
+                    setMicMute(!micMute);
+                  }}
                 >
                   <ButtonIcon>
                     {micMute ? <MicMuted /> : <MicUnmuted />}
                   </ButtonIcon>
                   {micMute ? "Muted" : "Unmuted"}
                 </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>
 
               {deviceLabels?.inputLabel && (