fix: implement backup for audio playback on ios

davwheat · Jun 8, 2024 · beb9e00 · beb9e00
1 parent 3bbf242
commit beb9e00
Show file tree

Hide file tree

Showing 4 changed files with 572 additions and 13 deletions.
diff --git a/gatsby-node.ts b/gatsby-node.ts
@@ -7,7 +7,7 @@ export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({ sta
       module: {
         rules: [
           {
-            test: /crunker/,
+            test: /crunker/g,
             use: loaders.null(),
           },
         ],

diff --git a/src/announcement-data/AnnouncementSystem.ts b/src/announcement-data/AnnouncementSystem.ts
@@ -1,4 +1,4 @@
-import Crunker from 'crunker'
+import Crunker from '../helpers/crunker'
 
 import type { ICustomAnnouncementPaneProps } from '@components/PanelPanes/CustomAnnouncementPane'
 import type { ICustomButtonPaneProps } from '@components/PanelPanes/CustomButtonPane'
@@ -170,6 +170,12 @@ export default abstract class AnnouncementSystem {
       return
     }
 
+    window.Crunker = Crunker
+
+    if ('audioSession' in window.navigator) {
+      window.navigator.audioSession.type = 'playback'
+    }
+
     window.__audio = fileIds
     console.info('Playing audio files:', fileIds)
 
@@ -186,20 +192,52 @@ export default abstract class AnnouncementSystem {
 
     if (audio.numberOfChannels > 1) {
       // This is stereo. We need to mux it to mono.
-
       audio.copyToChannel(audio.getChannelData(0), 1, 0)
     }
 
     if (download) {
       crunker.download(crunker.export(audio, 'audio/wav').blob, 'announcement')
       window.__audio = undefined
     } else {
-      const source = crunker.play(audio)
-
       return new Promise<void>(resolve => {
-        source.addEventListener('ended', () => {
-          window.__audio = undefined
-          resolve()
+        crunker.play(audio, source => {
+          console.log('[Crunker] About to play audio...')
+          crunker._context.onstatechange = () => console.log('state changed to: ', audioContext.state)
+          console.log('Context state: ', crunker._context.state)
+
+          if (crunker._context.state === 'suspended') {
+            console.log('[Crunker] Resuming audio context')
+            crunker._context.resume()
+            console.log('Context state: ', crunker._context.state)
+
+            if (crunker._context.state === 'suspended') {
+              console.error('[Crunker] Failed to resume audio context')
+
+              document.getElementById('resume-audio-button')?.remove()
+
+              const button = document.createElement('button')
+              button.textContent = 'Resume audio'
+              button.id = 'resume-audio-button'
+              button.style.margin = '16px'
+              button.onclick = () => {
+                crunker._context.resume()
+                button.remove()
+              }
+              document.body.appendChild(button)
+
+              alert(
+                "Your device or web browser is refusing to let the website play audio.\n\nThis is especially common on iPhones and iPads. We'd recommend you try using a desktop computer or an alterantive device.\n\nTry scrolling to the bottom of the page and pressing the 'Resume audio' button. If this doesn't help, there's nothing else that we can do. Sorry!",
+              )
+
+              button.scrollIntoView()
+            }
+          }
+
+          source.addEventListener('ended', () => {
+            console.log('[Crunker] Finished playing audio')
+            window.__audio = undefined
+            resolve()
+          })
         })
       })
     }

diff --git a/src/components/AmeyLiveTrainAnnouncements.tsx b/src/components/AmeyLiveTrainAnnouncements.tsx
@@ -388,7 +388,26 @@ export function LiveTrainAnnouncements<SystemKeys extends string>({
     false,
     x => x === true || x === false,
   )
-  const [isPlaying, setIsPlaying] = useState(false)
+  const [isPlaying, _setIsPlaying] = useState(false)
+  const setIsPlaying = useCallback(
+    function setIsPlaying(val: boolean) {
+      console.log(`Setting isPlaying to ${val}`)
+
+      _setIsPlaying(val)
+    },
+    [_setIsPlaying],
+  )
+  const setIsPlayingAfter = useCallback(
+    function setIsPlayingAfter(val: boolean, timeout: number) {
+      console.log(`Setting isPlaying to ${val} after ${timeout}ms`)
+
+      setTimeout(() => {
+        setIsPlaying(val)
+      }, timeout)
+    },
+    [setIsPlaying],
+  )
+
   const [enabledAnnouncements, setEnabledAnnouncements] = useStateWithLocalStorage<AnnouncementType[]>('amey.live-trains.announcement-types', [
     AnnouncementType.Next,
     AnnouncementType.Approaching,
@@ -598,7 +617,18 @@ export function LiveTrainAnnouncements<SystemKeys extends string>({
         setIsPlaying(false)
       }
     },
-    [markNextTrainAnnounced, systems, setIsPlaying, standingTrainHandler, selectedCrs, getStation, addLog, useLegacyTocNames, announceViaPoints],
+    [
+      markNextTrainAnnounced,
+      systems,
+      setIsPlaying,
+      standingTrainHandler,
+      selectedCrs,
+      getStation,
+      addLog,
+      useLegacyTocNames,
+      announceViaPoints,
+      setIsPlayingAfter,
+    ],
   )
 
   const announceApproachingTrain = useCallback(
@@ -673,6 +703,7 @@ export function LiveTrainAnnouncements<SystemKeys extends string>({
       useLegacyTocNames,
       chimeType,
       announceViaPoints,
+      setIsPlayingAfter,
     ],
   )
 
@@ -740,7 +771,18 @@ export function LiveTrainAnnouncements<SystemKeys extends string>({
         setIsPlaying(false)
       }
     },
-    [markNextTrainAnnounced, systems, setIsPlaying, nextTrainHandler, getStation, addLog, useLegacyTocNames, chimeType, announceViaPoints],
+    [
+      markNextTrainAnnounced,
+      systems,
+      setIsPlaying,
+      nextTrainHandler,
+      getStation,
+      addLog,
+      useLegacyTocNames,
+      chimeType,
+      announceViaPoints,
+      setIsPlayingAfter,
+    ],
   )
 
   const announceDisruptedTrain = useCallback(
@@ -835,7 +877,17 @@ export function LiveTrainAnnouncements<SystemKeys extends string>({
         }
       }
     },
-    [markDisruptedTrainAnnounced, systems, setIsPlaying, disruptedTrainHandler, addLog, useLegacyTocNames, chimeType, announceViaPoints],
+    [
+      markDisruptedTrainAnnounced,
+      systems,
+      setIsPlaying,
+      disruptedTrainHandler,
+      addLog,
+      useLegacyTocNames,
+      chimeType,
+      announceViaPoints,
+      setIsPlayingAfter,
+    ],
   )
 
   useEffect(() => {
@@ -869,7 +921,7 @@ export function LiveTrainAnnouncements<SystemKeys extends string>({
 
       try {
         const resp = await fetch(
-          process.env.NODE_ENV === 'development' ? `http://localhost:8787/api/get-services?${params}` : `/api/get-services?${params}`,
+          process.env.NODE_ENV === 'development' ? `http://local.davw.network:8787/api/get-services?${params}` : `/api/get-services?${params}`,
         )
 
         if (!resp.ok) {