Function useButtonIsHeldDown

app/components/AiPushToTalkButton.tsx:10–64

({
	key,
	disabled,
}: {
	key: string
	disabled: boolean
})

import { Button } from './Button'

function useButtonIsHeldDown({
	key,
	disabled,
}: {
	key: string
	disabled: boolean
}) {
	const [keyIsHeldDown, setKeyIsHeldDown] = useState(false)
	const buttonRef = useRef<HTMLButtonElement>(null)

	useEffect(() => {
		const button = buttonRef.current
		let timeout = -1
		const setTrue = () => {
			if (!disabled) {
				setKeyIsHeldDown(true)
				clearTimeout(timeout)
			}
		}
		const setFalse = () => {
			timeout = window.setTimeout(() => {
				setKeyIsHeldDown(false)
			}, 200)
		}

		const onKeyDown = (e: KeyboardEvent) => {
			if (e.key.toLowerCase() === key.toLowerCase()) {
				setTrue()
			}
		}

		const onKeyUp = (e: KeyboardEvent) => {
			if (e.key.toLowerCase() === key.toLowerCase()) {
				setFalse()
			}
		}

		document.addEventListener('keydown', onKeyDown)
		document.addEventListener('keyup', onKeyUp)
		document.addEventListener('blur', setFalse)
		button?.addEventListener('pointerdown', setTrue)
		button?.addEventListener('pointerup', setFalse)

		return () => {
			clearTimeout(timeout)
			document.removeEventListener('keydown', onKeyDown)
			document.removeEventListener('keyup', onKeyUp)
			document.removeEventListener('blur', setFalse)
			button?.removeEventListener('pointerdown', setTrue)
			button?.removeEventListener('pointerup', setFalse)
		}
	}, [disabled, key])

	return [keyIsHeldDown, buttonRef] as const
}

export function AiPushToTalkButtion() {
	const {