diff --git a/src/room/PTTButton.jsx b/src/room/PTTButton.jsx index 6da9b86..3a20e64 100644 --- a/src/room/PTTButton.jsx +++ b/src/room/PTTButton.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useCallback, useEffect, useState } from "react"; import classNames from "classnames"; import styles from "./PTTButton.module.css"; import { ReactComponent as MicIcon } from "../icons/Mic.svg"; @@ -14,14 +14,32 @@ export function PTTButton({ startTalking, stopTalking, }) { + const [isHeld, setHeld] = useState(false); + const onDocumentMouseUp = useCallback(() => { + if (isHeld) stopTalking(); + setHeld(false); + }, [isHeld, setHeld]); + + const onButtonMouseDown = useCallback(() => { + setHeld(true); + startTalking(); + }, [setHeld]); + + useEffect(() => { + window.addEventListener("mouseup", onDocumentMouseUp); + + return () => { + window.removeEventListener("mouseup", onDocumentMouseUp); + }; + }, [onDocumentMouseUp]); + return (