Add alert for audio loading errors

package.json

@@ -42,6 +42,7 @@
     "react-timeago": "^8.3.0",
     "react-use-cookie": "^1.6.1",
     "redux": "^4.2.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "thenby": "^1.3.4",
     "ua-parser-js": "^1.0.37",

public/gapless.cjs

@@ -42,6 +42,7 @@
         onPlayPreviousTrack,
         onStartNewTrack,
         webAudioIsDisabled = false,
+        onError,
       } = props;
 
       this.props = {
@@ -50,6 +51,7 @@
         onPlayNextTrack,
         onPlayPreviousTrack,
         onStartNewTrack,
+        onError,
       };
 
       this.state = {
@@ -209,6 +211,10 @@
 
       this.tracks.map((track) => track.setVolume(nextVolume));
     }
+
+    onError() {
+      if (this.props.onError) this.props.onError();
+    }
   }
 
   class Track {
@@ -485,6 +491,7 @@
     // basic event handlers
     audioOnError = (e) => {
       this.debug('audioOnError', e);
+      this.queue.onError();
     };
 
     onEnded(from) {

src/app/(browse)/layout.tsx

@@ -3,6 +3,7 @@ import NavBar from '@/components/NavBar';
 import cn from '@/lib/cn';
 import { getIsInIframe } from '@/lib/isInIframe';
 import { ReactNode } from 'react';
+import { Toaster } from 'sonner';
 
 export default async function BrowseLayout({
   children,
@@ -23,6 +24,7 @@ export default async function BrowseLayout({
 
   return (
     <Flex column className="h-screen">
+      <Toaster id="audio-error" position="top-center" richColors closeButton />
       <NavBar />
       <div
         className={cn(

src/components/Player.tsx

@@ -9,6 +9,7 @@ import player from '../lib/player';
 import { durationToHHMMSS, removeLeadingZero, splitShowDate } from '../lib/utils';
 import Flex from './Flex';
 import {
+  AlertCircle,
   ChevronDown,
   FastForwardIcon,
   ListMusicIcon,
@@ -17,6 +18,7 @@ import {
   RewindIcon,
   Volume2Icon,
 } from 'lucide-react';
+import { Toaster } from 'sonner';
 
 interface Props {
   artistSlugsToName: Record<string, string | undefined>;

src/lib/player.ts

@@ -5,6 +5,7 @@ import { splitShowDate } from './utils';
 import { scrobblePlay } from '../redux/modules/live';
 import { updatePlayback } from '../redux/modules/playback';
 import { ActiveTrack, GaplessMetadata } from '../types';
+import { toast } from 'sonner';
 
 declare global {
   interface Window {
@@ -156,6 +157,12 @@ const player = new Gapless.Queue({
       }
     }
   },
+  onError: () => {
+    toast.error('There was an error loading your audio', {
+      toasterId: 'audio-error',
+      duration: Infinity,
+    });
+  },
 });
 
 export function initGaplessPlayer(nextStore, changeURL) {