Move to next talk on the STT automatically

Author: HugoGresse

src/public/transcription/TranscriptionApp.tsx

@@ -1,9 +1,9 @@
 import { useLocalStorage } from '@uidotdev/usehooks'
 import { Box, Button, Container, TextField, Typography } from '@mui/material'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { usePasswordProtectedEvent } from '../hooks/usePasswordProtectedEvent'
 import { useTalkSelection } from './useTalkSelection'
-import { useAutoReloadAfterTalk } from './useAutoReloadAfterTalk'
+import { useAutoAdvanceAfterTalk } from './useAutoAdvanceAfterTalk'
 import { LiveTranscriptionView } from './LiveTranscriptionView'
 import { DateTime } from 'luxon'
 
@@ -21,8 +21,15 @@ export const TranscriptionApp = ({ eventId }: PublicEventTranscriptionProps) =>
 
     const [selectedTalk, upcomingTalks, resetSelectedTalk, setSelectedTalk] = useTalkSelection(selectedTrack, eventData)
 
-    // Roll the screen over automatically 5 min after the current talk ends.
-    useAutoReloadAfterTalk(selectedTalk?.dateEnd)
+    const advanceToNextTalk = useCallback(() => {
+        if (!selectedTalk) return
+        const currentIndex = upcomingTalks.findIndex((t) => t.id === selectedTalk.id)
+        const next = upcomingTalks[currentIndex + 1]
+        if (next) setSelectedTalk(next)
+    }, [selectedTalk, upcomingTalks, setSelectedTalk])
+
+    // Roll over to the next talk automatically 5 min after the current one ends.
+    useAutoAdvanceAfterTalk(selectedTalk?.dateEnd, advanceToNextTalk)
 
     const saveStuffInLocalStorage = (pagePassword: string, selectedTrack: string) => {
         setSelectedTrack(selectedTrack)

src/public/transcription/useAutoAdvanceAfterTalk.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+import { DateTime } from 'luxon'
+
+const ADVANCE_DELAY_MS = 5 * 60 * 1000
+// setTimeout delays above 2^31-1 ms overflow and fire immediately — ignore anything that far out.
+const MAX_TIMEOUT_MS = 2 ** 31 - 1
+
+// Advances to the next talk 5 minutes after the current one ends, so the caption screen rolls over
+// without anyone touching the machine.
+export const useAutoAdvanceAfterTalk = (talkEndIso: string | undefined, onAdvance: () => void) => {
+    useEffect(() => {
+        if (!talkEndIso) return
+        const end = DateTime.fromISO(talkEndIso)
+        if (!end.isValid) return
+
+        const delay = end.toMillis() + ADVANCE_DELAY_MS - DateTime.now().toMillis()
+        if (delay > MAX_TIMEOUT_MS) return
+
+        if (delay <= 0) {
+            onAdvance()
+            return
+        }
+
+        const timer = setTimeout(onAdvance, delay)
+        return () => clearTimeout(timer)
+    }, [talkEndIso, onAdvance])
+}