Restarting playing after abrupt stream end

index.html

@@ -47,7 +47,8 @@
           playlistButtonBorderColor: '#eee',
           playlistActiveBorderColor: '#eee',
           errormsgBackgroundColor: '#ff0022dd',
-          errormsgTextColor: '#dedede'
+          errormsgTextColor: '#dedede',
+          restartOnStreamEndMs: 3000
         });
         radioPlayer.start();
     });

src/index.ts

@@ -26,14 +26,15 @@ interface PlayerLocalStorage {
 }
 
 interface Config {
-  rootElement: HTMLDivElement,
+  rootElement: HTMLDivElement
   streams: Array<StationItem>
-  bgColor: string,
-  playlistHoverColor: string,
-  playlistButtonBorderColor: string,
+  bgColor: string
+  playlistHoverColor: string
+  playlistButtonBorderColor: string
   playlistActiveBorderColor: string
-  errormsgBackgroundColor: string,
+  errormsgBackgroundColor: string
   errormsgTextColor: string
+  restartOnStreamEndMs: number
 }
 
 const autoplayErrorMsg =
@@ -56,6 +57,8 @@ class RadioPlayer {
   // private playerIcyOptions!: IcecastMetadataPlayerIcyOptions
   private playerIcyOptions!: IcecastMetadataPlayerIcyOptionsWithCallbacks
   private marquee!: Marquee
+  private timeoutStreamEndRestart: ReturnType<typeof setTimeout> | undefined
+  private startedStreamId: number = 1
 
   constructor(config: Config) {
     this.config = config
@@ -66,8 +69,6 @@ class RadioPlayer {
   }
 
   private onClickStreamChoice(streamId: number) {
-    if (this.playerState.playing && this.playerState.streamId === streamId)
-      return
     this.play(streamId)
   }
 
@@ -82,7 +83,7 @@ class RadioPlayer {
     this.play(this.playerState.streamId)
   }
 
-  onError(text: string, exc: Error) {
+  private onError(text: string, exc: Error) {
     if (exc.name === 'NotAllowedError') {
       this.playButton.setAttribute('title', autoplayErrorMsg)
       this.playButton.classList.add('has-error')
@@ -92,6 +93,16 @@ class RadioPlayer {
     }
   }
 
+  private onStreamEnd() {
+    // console.debug('onStreamEnd', this.playerState)
+    if (
+        this.playerState.playing && this.config.restartOnStreamEndMs &&
+        !this.timeoutStreamEndRestart)
+      this.timeoutStreamEndRestart = setTimeout(
+        this.play.bind(this, this.playerState.streamId),
+        this.config.restartOnStreamEndMs)
+  }
+
   public start() {
     // When loading the script tag with "defer", and initializing with onload
     // DOMContentLoaded might have already been fired at loading
@@ -123,11 +134,14 @@ class RadioPlayer {
   }
 
   play(streamId: number) {
+    if (this.timeoutStreamEndRestart) {
+      clearTimeout(this.timeoutStreamEndRestart)
+      this.timeoutStreamEndRestart = undefined
+    }
     const url: string =
       this.config.streams[streamId - 1]?.listenUrl
     if (!url) return
-    this.playerState = { playing: true, streamId }
-    this.storeState()
+    this.startedStreamId = streamId
     if (this.icyPlayer) {
       this.icyPlayer.stop().then((x) => {
         this.icyPlayer = new IcecastMetadataPlayer(url, this.playerIcyOptions)
@@ -197,6 +211,9 @@ class RadioPlayer {
         this.playButton.innerHTML = '<i class="fa-solid fa-pause"></i>'
         this.isLoading = false;
         this.errorWrapper.classList.remove('shown');
+        this.playerState = { playing: true, streamId: this.startedStreamId }
+        this.storeState()
+        // console.debug('onPlay', this.playerState)
       },
       onRetry: this.markButtonLoading.bind(this),
       onStop: () => {
@@ -205,7 +222,10 @@ class RadioPlayer {
         const streamTitle =
           this.config.streams[this.playerState.streamId - 1].streamName
         this.marquee.changeTo(streamTitle)
+        this.playerState.playing = false
+        // console.debug('onStop', this.playerState)
       },
+      onStreamEnd: this.onStreamEnd.bind(this),
       onError: this.onError.bind(this),
     }
     root.classList.remove('hidden')

src/sass/player.sass

@@ -15,6 +15,7 @@
 #karolyimusic-webplayer
   &.hidden
     display: none
+  overflow: hidden
   user-select: none
   background-color: var(--icyplayer-bgcolor)
   width: 100%
@@ -99,7 +100,6 @@
       align-self: center
       cursor: pointer
       display: flex
-      border-radius: .2em
       border: .15em dotted transparent
       transition: background-color 200ms linear
       &.active