add sonner, create audio error toast

Author: Thenlie

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",

pnpm-lock.yaml

@@ -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/app/(browse)/layout.tsx

@@ -2,7 +2,7 @@
 
 import Head from 'next/head';
 import Link from 'next/link';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 import player from '../lib/player';
@@ -18,6 +18,7 @@ import {
   RewindIcon,
   Volume2Icon,
 } from 'lucide-react';
+import { Toaster } from 'sonner';
 
 interface Props {
   artistSlugsToName: Record<string, string | undefined>;
@@ -30,7 +31,6 @@ const Player = ({ artistSlugsToName }: Props) => {
   const [volume, setVolume] = useState(
     (typeof localStorage !== 'undefined' && localStorage.volume) || 1
   );
-  // const [hasAudioError, setHasAudioError] = useState(false);
 
   const { year, month, day } = splitShowDate(playback.showDate);
   const { artistSlug, source } = playback;
@@ -73,17 +73,6 @@ const Player = ({ artistSlugsToName }: Props) => {
     localStorage.volume = Math.max(0, Math.min(1, nextVolume));
   };
 
-  // useEffect(() => {
-  //   const handleAudioError = () => {
-  //     setHasAudioError(true);
-  //   };
-
-  //   window.addEventListener('gapless-audio-error', handleAudioError);
-  //   return () => {
-  //     window.removeEventListener('gapless-audio-error', handleAudioError);
-  //   };
-  // }, []);
-
   return (
     <Flex className="content relative h-[50px] flex-1 px-2">
       {false && activeTrack && (
@@ -201,12 +190,6 @@ const Player = ({ artistSlugsToName }: Props) => {
           </div>
         </Link>
       )}
-      {/* {hasAudioError && (
-        <Flex className="items-center">
-          <AlertCircle color="red" />
-          <p className="m-2">Error loading audio</p>
-        </Flex>
-      )} */}
     </Flex>
   );
 };

src/components/Player.tsx

@@ -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 {
@@ -157,7 +158,10 @@ const player = new Gapless.Queue({
     }
   },
   onError: () => {
-    console.log('Leithen errors');
+    toast.error('There was an error loading your audio', {
+      toasterId: 'audio-error',
+      duration: Infinity,
+    });
   },
 });