Merge branch 'main' into deploy

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

package.json

@@ -24,10 +24,10 @@
   },
   "dependencies": {
     "@material-ui/styles": "^4.11.5",
-    "@sentry/gatsby": "^7.77.0",
-    "@sentry/tracing": "^7.77.0",
+    "@sentry/gatsby": "^7.80.1",
+    "@sentry/tracing": "^7.80.1",
     "clsx": "^2.0.0",
-    "crunker": "^2.2.0",
+    "crunker": "^2.3.0",
     "dayjs": "^1.11.10",
     "gatsby": "^5.12.9",
     "gatsby-plugin-image": "^3.12.3",
@@ -45,19 +45,19 @@
     "react-dom": "^18.2.0",
     "react-fullscreen-crossbrowser": "^1.1.3",
     "react-head": "^3.4.2",
-    "react-select": "^5.7.7",
+    "react-select": "^5.8.0",
     "react-tabs": "^6.0.2",
     "recoil": "^0.7.7",
     "recoil-persistence": "^0.3.0-beta.1",
     "uk-railway-stations": "^1.5.1"
   },
   "devDependencies": {
-    "@sentry/cli": "^2.21.2",
-    "@types/react-beautiful-dnd": "^13.1.6",
+    "@sentry/cli": "^2.21.5",
+    "@types/react-beautiful-dnd": "^13.1.7",
     "cross-env": "^7.0.3",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31",
-    "prettier": "^3.0.3",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
+    "prettier": "^3.1.0",
     "typescript": "^5.2.2"
   },
-  "packageManager": "[email protected].1"
+  "packageManager": "[email protected].2"
 }

src/announcement-data/systems/stations/KeTechPhil.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import StationAnnouncementSystem from '@announcement-data/StationAnnouncementSystem'
 import CallingAtSelector, { CallingAtPoint } from '@components/CallingAtSelector'
 import CustomAnnouncementPane, { ICustomAnnouncementPaneProps, ICustomAnnouncementPreset } from '@components/PanelPanes/CustomAnnouncementPane'
@@ -3334,6 +3334,7 @@ export default class KeTechPhil extends StationAnnouncementSystem {
     'UPT',
     'UPW',
     'URM',
+    'UTT',
     'UTY',
     'UWL',
     'VAL',
@@ -3887,7 +3888,7 @@ function LiveTrainAnnouncements({ nextTrainHandler, system }: LiveTrainAnnouncem
   const [hasEnabledFeature, setHasEnabledFeature] = useState(false)
   const [isPlaying, setIsPlaying] = useState(false)
 
-  const [nextTrainAnnounced, setNextTrainAnnounced] = useState<Record<string, number>>({})
+  const nextTrainAnnounced = useRef<Record<string, number>>({})
 
   const stationNameToCrsMap = useMemo(
     () =>
@@ -3904,22 +3905,21 @@ function LiveTrainAnnouncements({ nextTrainHandler, system }: LiveTrainAnnouncem
     [supportedStations],
   )
 
-  function removeOldIds() {
-    const now = Date.now()
-
-    setNextTrainAnnounced(prev => {
-      const newIds = Object.fromEntries(Object.entries(prev).filter(([_, v]) => now - v < 1000 * 60 * 60))
-
-      return newIds
-    })
-  }
+  const removeOldIds = useCallback(
+    function removeOldIds() {
+      const now = Date.now()
+      const newIds = Object.fromEntries(Object.entries(nextTrainAnnounced.current).filter(([_, v]) => now - v < 1000 * 60 * 60))
+      nextTrainAnnounced.current = newIds
+    },
+    [nextTrainAnnounced.current],
+  )
 
-  function markTrainIdAnnounced(id: string) {
-    setNextTrainAnnounced(prev => ({
-      ...prev,
-      [id]: Date.now(),
-    }))
-  }
+  const markTrainIdAnnounced = useCallback(
+    function markTrainIdAnnounced(id: string) {
+      nextTrainAnnounced.current[id] = Date.now()
+    },
+    [nextTrainAnnounced.current],
+  )
 
   useEffect(() => {
     const key = setInterval(removeOldIds, 1000 * 60 * 5)
@@ -3929,62 +3929,68 @@ function LiveTrainAnnouncements({ nextTrainHandler, system }: LiveTrainAnnouncem
     }
   }, [removeOldIds])
 
-  function calculateDelayMins(std: string, etd: string): number {
-    const isDelayed = etd !== 'On time' && etd !== std
-    if (!isDelayed) return 0
+  const calculateDelayMins = useCallback(
+    function calculateDelayMins(std: string, etd: string): number {
+      const isDelayed = etd !== 'On time' && etd !== std
+      if (!isDelayed) return 0
 
-    const hasRealEta = (etd as string).includes(':')
+      const hasRealEta = (etd as string).includes(':')
 
-    if (!hasRealEta) return 0
+      if (!hasRealEta) return 0
 
-    const sTime = std.split(':')
-    const eTime = etd.split(':')
+      const sTime = std.split(':')
+      const eTime = etd.split(':')
 
-    const [h, m] = sTime.map(x => parseInt(x))
-    const [eH, eM] = eTime.map(x => parseInt(x))
+      const [h, m] = sTime.map(x => parseInt(x))
+      const [eH, eM] = eTime.map(x => parseInt(x))
 
-    console.log(`[Delay Mins] ${h}:${m} (${std}) -> ${eH}:${eM} (${etd}) = ${eH * 60 + eM - (h * 60 + m)}`)
+      console.log(`[Delay Mins] ${h}:${m} (${std}) -> ${eH}:${eM} (${etd}) = ${eH * 60 + eM - (h * 60 + m)}`)
 
-    let delayMins = Math.abs(eH * 60 + eM - (h * 60 + m))
+      let delayMins = Math.abs(eH * 60 + eM - (h * 60 + m))
 
-    if (delayMins < 0) {
-      // crosses over midnight
-      return calculateDelayMins(std, '23:59') + calculateDelayMins('00:00', etd)
-    }
+      if (delayMins < 0) {
+        // crosses over midnight
+        return calculateDelayMins(std, '23:59') + calculateDelayMins('00:00', etd)
+      }
 
-    return delayMins
-  }
+      return delayMins
+    },
+    [console.log],
+  )
 
-  function calculateArrivalInMins(etd: string): number {
-    // HH:mm in UK
-    const std = new Date().toLocaleTimeString('en-GB', { hour12: false, timeZone: 'Europe/London' }).slice(0, 5)
+  const calculateArrivalInMins = useCallback(
+    function calculateArrivalInMins(etd: string): number {
+      // HH:mm in UK
+      const std = new Date().toLocaleTimeString('en-GB', { hour12: false, timeZone: 'Europe/London' }).slice(0, 5)
 
-    const isDelayed = etd !== 'On time' && etd !== std
-    if (!isDelayed) return 0
+      const isDelayed = etd !== 'On time' && etd !== std
+      if (!isDelayed) return 0
 
-    const hasRealEta = (etd as string).includes(':')
+      const hasRealEta = (etd as string).includes(':')
 
-    if (!hasRealEta) return 0
+      if (!hasRealEta) return 0
 
-    const sTime = std.split(':')
-    const eTime = etd.split(':')
+      const sTime = std.split(':')
+      const eTime = etd.split(':')
 
-    const [h, m] = sTime.map(x => parseInt(x))
-    const [eH, eM] = eTime.map(x => parseInt(x))
+      const [h, m] = sTime.map(x => parseInt(x))
+      const [eH, eM] = eTime.map(x => parseInt(x))
 
-    console.log(`[ETA mins] ${h}:${m} (${std}) -> ${eH}:${eM} (${etd}) = ${eH * 60 + eM - (h * 60 + m)}`)
+      console.log(`[ETA mins] ${h}:${m} (${std}) -> ${eH}:${eM} (${etd}) = ${eH * 60 + eM - (h * 60 + m)}`)
 
-    let delayMins = Math.abs(eH * 60 + eM - (h * 60 + m))
+      let delayMins = Math.abs(eH * 60 + eM - (h * 60 + m))
 
-    if (delayMins < 0) {
-      // crosses over midnight
-      return calculateDelayMins(std, '23:59') + calculateDelayMins('00:00', etd)
-    }
+      if (delayMins < 0) {
+        // crosses over midnight
+        return calculateDelayMins(std, '23:59') + calculateDelayMins('00:00', etd)
+      }
 
-    return delayMins
-  }
+      return delayMins
+    },
+    [calculateDelayMins, console.log],
+  )
 
-  function processToc(toc: string, originCrs: string, destinationCrs: string): string {
+  const processToc = useCallback(function processToc(toc: string, originCrs: string, destinationCrs: string): string {
     switch (toc.toLowerCase()) {
       default:
         return system.ALL_AVAILABLE_TOCS.find(t => t?.toLowerCase() === toc?.toLowerCase()) ?? ''
@@ -3998,11 +4004,13 @@ function LiveTrainAnnouncements({ nextTrainHandler, system }: LiveTrainAnnouncem
           return 'west midlands railway'
         }
     }
-  }
+  }, [])
 
   useEffect(() => {
     if (!hasEnabledFeature) return
 
+    const abortController = new AbortController()
+
     const checkAndPlay = async () => {
       if (isPlaying) {
         console.log('[Live Trains] Still playing an announcement; skipping this check')
@@ -4146,27 +4154,32 @@ function LiveTrainAnnouncements({ nextTrainHandler, system }: LiveTrainAnnouncem
       }
 
       console.log(options)
-
-      setIsPlaying(true)
       try {
+        if (abortController.signal.aborted) {
+          console.warn('[Live Trains] Aborted; skipping announcement')
+          return
+        }
+
+        setIsPlaying(true)
         console.log(
           `[Live Trains] Playing announcement for ${firstUnannounced.serviceIdGuid} (${firstUnannounced.std} to ${firstUnannounced.destination[0].locationName})`,
         )
         await nextTrainHandler(options)
       } catch (e) {
         console.warn(`[Live Trains] Error playing announcement for ${firstUnannounced.serviceIdGuid}; see below`)
         console.error(e)
-        setIsPlaying(false)
       }
-      console.log(`[Live Trains] Announcement for ${firstUnannounced.serviceIdGuid} complete`)
-      setIsPlaying(false)
+      console.log(`[Live Trains] Announcement for ${firstUnannounced.serviceIdGuid} complete: waiting 5s until next`)
+      setTimeout(() => setIsPlaying(false), 5000)
     }
 
     const refreshInterval = setInterval(checkAndPlay, 10_000)
     checkAndPlay()
 
     return () => {
+      console.log('Clearing interval', refreshInterval)
       clearInterval(refreshInterval)
+      abortController.abort()
     }
   }, [
     hasEnabledFeature,