Add invisible input

Author: FilipChalupa

components/ControlPanel.tsx

@@ -41,6 +41,7 @@ import {
 import { useRoomState } from '../utilities/useRoomState'
 import { Countdown } from './Countdown'
 import { IdSpecificThemeProvider } from './IdSpecificThemeProvider'
+import { InvisibleTimeInput } from './InvisibleTimeInput'
 import { CastButton } from './chromecast/sender/components/CastButton'
 import { useIsChromecastSenderAvailable } from './chromecast/sender/useIsChromecastAvailable'
 
@@ -449,6 +450,14 @@ export const ControlPanel: React.FunctionComponent<ControlPanelProps> = ({
 										Set
 									</Button>
 								</Grid>
+								<InvisibleTimeInput
+									onInput={(seconds) => {
+										setCountdown(roomDocumentReference, seconds)
+									}}
+									onTogglePause={() => {
+										togglePaused(roomState, roomDocumentReference)
+									}}
+								/>
 							</>
 						)}
 					</Grid>

components/InvisibleTimeInput.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState, type FunctionComponent } from 'react'
+
+export type InvisibleTimeInputProps = {
+	onInput: (seconds: number) => void
+	onTogglePause: () => void
+}
+
+export const InvisibleTimeInput: FunctionComponent<InvisibleTimeInputProps> = ({
+	onInput,
+	onTogglePause,
+}) => {
+	const [input, setInput] = useState('')
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setInput('')
+		}, 5000)
+
+		return () => {
+			clearTimeout(timer)
+		}
+	}, [input])
+
+	useEffect(() => {
+		const callback = (event: KeyboardEvent) => {
+			const isInteractive =
+				event.target instanceof HTMLInputElement ||
+				event.target instanceof HTMLTextAreaElement ||
+				event.target instanceof HTMLButtonElement ||
+				event.target instanceof HTMLAnchorElement ||
+				event.target instanceof HTMLSelectElement
+			if (isInteractive) {
+				return
+			}
+			if (event.key === 'Enter') {
+				if (input.length === 0) {
+					onTogglePause()
+				} else {
+					const [seconds = 0, minutes = 0, hours = 0] = input
+						.split(':')
+						.map((part) => parseInt(part, 10) || 0)
+						.reverse()
+					const totalSeconds = seconds + minutes * 60 + hours * 60 * 60
+					onInput(totalSeconds)
+					setInput('')
+				}
+			} else if (event.code === 'Delete') {
+				setInput('')
+			} else if (event.code === 'Backspace') {
+				setInput((input) => input.slice(0, -1))
+			} else {
+				const number = (() => {
+					if (event.code.startsWith('Digit') && event.code.length === 6) {
+						return event.code.substring(5)
+					}
+					if (event.code.startsWith('Numpad') && event.code.length === 7) {
+						return event.code.substring(6)
+					}
+					return null
+				})()
+				setInput((input) => {
+					if (number !== null) {
+						return input + number
+					}
+					if (input.length > 0 && input.split(':').length <= 2) {
+						return input + ':'
+					}
+					return input
+				})
+			}
+		}
+		window.addEventListener('keydown', callback)
+		return () => {
+			window.removeEventListener('keydown', callback)
+		}
+	}, [input, input.length, onInput, onTogglePause])
+
+	return <div className="invisibleInput">{input}</div>
+}

styles/globals.css

@@ -129,3 +129,10 @@ body:has(.fullScreenCountdown.is-iframe) {
 		transition-duration: 0.3s;
 	}
 }
+
+.invisibleInput {
+	position: fixed;
+	inset: 0 auto auto 0;
+	z-index: 10;
+	padding: 0.125rem;
+}