diff --git a/src/room/PTTButton.tsx b/src/room/PTTButton.tsx index 10f45ed..6638370 100644 --- a/src/room/PTTButton.tsx +++ b/src/room/PTTButton.tsx @@ -43,23 +43,50 @@ export const PTTButton: React.FC = ({ stopTalking, }) => { const [isHeld, setHeld] = useState(false); - const onDocumentMouseUp = useCallback(() => { - if (isHeld) stopTalking(); - setHeld(false); - }, [isHeld, setHeld, stopTalking]); + const onWindowMouseUp = useCallback( + (e) => { + if (isHeld) stopTalking(); + setHeld(false); + }, + [isHeld, setHeld, stopTalking] + ); - const onButtonMouseDown = useCallback(() => { - setHeld(true); - startTalking(); - }, [setHeld, startTalking]); + const onWindowTouchEnd = useCallback( + (e: TouchEvent) => { + e.preventDefault(); + if (isHeld) stopTalking(); + setHeld(false); + }, + [isHeld, setHeld, stopTalking] + ); + + const onButtonMouseDown = useCallback( + (e: React.MouseEvent) => { + e.preventDefault(); + setHeld(true); + startTalking(); + }, + [setHeld, startTalking] + ); + + const onButtonTouchStart = useCallback( + (e: React.TouchEvent) => { + e.preventDefault(); + setHeld(true); + startTalking(); + }, + [setHeld, startTalking] + ); useEffect(() => { - window.addEventListener("mouseup", onDocumentMouseUp); + window.addEventListener("mouseup", onWindowMouseUp); + window.addEventListener("touchend", onWindowTouchEnd); return () => { - window.removeEventListener("mouseup", onDocumentMouseUp); + window.removeEventListener("mouseup", onWindowMouseUp); + window.removeEventListener("touchend", onWindowTouchEnd); }; - }, [onDocumentMouseUp]); + }, [onWindowMouseUp, onWindowTouchEnd]); return (