add onError queue method

Author: Thenlie

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,7 +491,8 @@
     // basic event handlers
     audioOnError = (e) => {
       this.debug('audioOnError', e);
-      window.dispatchEvent(new CustomEvent('gapless-audio-error', { error: e }));
+      // window.dispatchEvent(new CustomEvent('gapless-audio-error', { error: e }));
+      this.queue.onError();
     };
 
     onEnded(from) {

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,
@@ -29,6 +30,7 @@ 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;
@@ -71,16 +73,16 @@ const Player = ({ artistSlugsToName }: Props) => {
     localStorage.volume = Math.max(0, Math.min(1, nextVolume));
   };
 
-  useEffect(() => {
-    const handleAudioError = (e: CustomEvent) => {
-      console.log('Audio error detected', e);
-    };
+  // useEffect(() => {
+  //   const handleAudioError = () => {
+  //     setHasAudioError(true);
+  //   };
 
-    window.addEventListener('gapless-audio-error', handleAudioError);
-    return () => {
-      window.removeEventListener('gapless-audio-error', handleAudioError);
-    };
-  });
+  //   window.addEventListener('gapless-audio-error', handleAudioError);
+  //   return () => {
+  //     window.removeEventListener('gapless-audio-error', handleAudioError);
+  //   };
+  // }, []);
 
   return (
     <Flex className="content relative h-[50px] flex-1 px-2">
@@ -199,6 +201,12 @@ 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/lib/player.ts

@@ -156,6 +156,9 @@ const player = new Gapless.Queue({
       }
     }
   },
+  onError: () => {
+    console.log('Leithen errors');
+  },
 });
 
 export function initGaplessPlayer(nextStore, changeURL) {