Move to next talk on the STT automatically (#276)

* Move to next talk on the STT automatically

* fix(transcription): allow endpointing 0 + prod webhook logging

Address Copilot review on #275:
- endpointing settings field & URL param now accept 0 (disable
  endpointing); previously the falsy `|| fallback` and the num()
  `> 0` guard made 0 impossible to set.
- move GO-reminder scheduling error from request.log to console.*
  so it reaches Cloud Logging in production (Fastify logger is
  disabled outside dev/test).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* fix(transcription): avoid double auto-advance under StrictMode

Address Copilot review on #276: calling onAdvance() synchronously
for an already-ended talk fired twice under React 18 StrictMode,
skipping a talk. Always schedule via setTimeout (clamped to 0) with
a cleanup so the remount cleanup cancels the first invocation.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: HugoGresse

functions/src/api/routes/whatsapp/whatsapp.ts

@@ -290,7 +290,9 @@ export const whatsappRoutes = (fastify: FastifyInstance, options: any, done: ()
                     )
                 )
             } catch (err) {
-                request.log?.error({ err }, 'failed to schedule whatsapp panel reminders')
+                // console.* (not request.log) so this reaches Cloud Logging in production, where the
+                // Fastify logger is disabled.
+                console.error('[whatsapp go] failed to schedule panel reminders', err)
             }
 
             reply.status(200).send({ sent: true })

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/TranscriptionSettingsPanel.tsx

@@ -126,7 +126,14 @@ export const TranscriptionSettingsPanel = ({ settings, onChange }: Transcription
                 label="Endpointing (s)"
                 inputProps={{ step: 0.05, min: 0 }}
                 value={settings.endpointing}
-                onChange={(e) => set('endpointing', Number(e.target.value) || settings.endpointing)}
+                onChange={(e) => {
+                    const parsed = Number(e.target.value)
+                    // Keep 0 (valid = disable endpointing); only fall back on empty/invalid input.
+                    set(
+                        'endpointing',
+                        e.target.value === '' || Number.isNaN(parsed) || parsed < 0 ? settings.endpointing : parsed
+                    )
+                }}
                 sx={fieldSx}
             />
             <Button variant="contained" size="small" onClick={() => set('hideSettings', true)} sx={{ ml: 'auto' }}>

src/public/transcription/transcriptionSettings.ts

@@ -44,9 +44,12 @@ export const toHexColor = (value: string): string => (value.startsWith('#') ? va
 // Read settings from a URL query string, falling back to defaults for anything missing/invalid.
 export const settingsFromQuery = (search: string): TranscriptionSettings => {
     const q = new URLSearchParams(search)
-    const num = (key: string, fallback: number) => {
-        const parsed = Number(q.get(key))
-        return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback
+    const num = (key: string, fallback: number, allowZero = false) => {
+        const raw = q.get(key)
+        if (raw === null) return fallback
+        const parsed = Number(raw)
+        if (!Number.isFinite(parsed)) return fallback
+        return parsed > 0 || (allowZero && parsed === 0) ? parsed : fallback
     }
     const csv = (raw: string | null): string[] | null =>
         raw
@@ -69,7 +72,7 @@ export const settingsFromQuery = (search: string): TranscriptionSettings => {
         alignment: alignment === 'left' || alignment === 'right' ? alignment : DEFAULT_SETTINGS.alignment,
         languages: languages?.length ? languages : DEFAULT_SETTINGS.languages,
         customVocabulary: csv(q.get('custom_vocabulary')) ?? DEFAULT_SETTINGS.customVocabulary,
-        endpointing: num('endpointing', DEFAULT_SETTINGS.endpointing),
+        endpointing: num('endpointing', DEFAULT_SETTINGS.endpointing, true),
         hideSettings: q.has('hide_settings') ? q.get('hide_settings') === 'true' : DEFAULT_SETTINGS.hideSettings,
     }
 }

src/public/transcription/useAutoAdvanceAfterTalk.ts

@@ -0,0 +1,25 @@
+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
+
+        // Always go through setTimeout (clamped to 0 for already-ended talks) rather than calling
+        // onAdvance synchronously: the returned cleanup lets React 18 StrictMode's dev remount cancel
+        // the first run, so we don't advance twice / skip a talk.
+        const timer = setTimeout(onAdvance, Math.max(0, delay))
+        return () => clearTimeout(timer)
+    }, [talkEndIso, onAdvance])
+}