Turn off barcode reader after 15m timeout

A future enhancement would be to make sure it only times out 15m after
an album is done playing (possibly by ignoring signals while an album is
playing, and then at the end of the album set the timer again?) but that
wasn't something I've implemented yet.

src/App.tsx

@@ -62,6 +62,22 @@ function App() {
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [lastClicked, setLastClicked] = useState(new Date);
+
+  const click = () => setLastClicked(new Date);
+
+  useEffect(() => {
+    const IDLE_TIMEOUT_MS = 15 * 60 * 1000; // 15 minutes
+    window.setTimeout(() => {
+      setDisplayText("Asleep. Tap screen to scan.");
+      fetch('/api/reader/auto', { method: 'POST' });
+    }, lastClicked.getTime() + IDLE_TIMEOUT_MS - new Date().getTime());
+
+    return () => {
+      setDisplayText(WELCOME_TEXT);
+      fetch('/api/reader/on', { method: 'POST' });
+    }
+  }, [lastClicked]);
 
   const handleEnded = () => {
     if ((album?.tracks?.length ?? 0) > nowPlaying + 1) { // if there's a next track
@@ -216,7 +232,7 @@ function App() {
       <p className='welcome' style={{ gridColumn: 'span 2' }}>This album cannot be played, as Chandler doesn't own a copy.</p>
     );
     return (
-      <div className="app">
+      <div className="app" onPointerDown={click}>
         <audio
           ref={audioRef}
           src={album.tracks[nowPlaying].source}
@@ -234,7 +250,7 @@ function App() {
       </div>
     )
   } else {
-    return (<div className="welcome">{displayText}</div>);
+    return (<div className="welcome" onPointerDown={click}>{displayText}</div>);
   }
 }