wired up next episode from playlist functionality

site/radiostasis.js

@@ -63,6 +63,7 @@ var Player = /** @class */ (function () {
         this.playButton.addEventListener('click', function () { return _this.playPause(); });
         this.rewButton.addEventListener('click', function () { return _this.rewind(); });
         this.ffwButton.addEventListener('click', function () { return _this.fastForward(); });
+        this.skipButton.addEventListener('click', function () { return _this.nextEpisode(); });
         this.volumeSlider.addEventListener('change', function () { return _this.setVolume(); });
         // wire up mediaSession events
         if ('mediaSession' in navigator) {
@@ -77,6 +78,9 @@ var Player = /** @class */ (function () {
             navigator.mediaSession.setActionHandler('seekbackward', function () {
                 return _this.rewind();
             });
+            navigator.mediaSession.setActionHandler('nexttrack', function () {
+                return _this.nextEpisode();
+            });
             // don't support previous track yet, queue removes them once finished
             // wire this up to rewind instead
             navigator.mediaSession.setActionHandler('previoustrack', function () {
@@ -134,7 +138,7 @@ var Player = /** @class */ (function () {
                                 _this.setPlayButtonUI();
                                 _this.stopTicker();
                             },
-                            onend: function () { return _this.stopPlaybackAndResetUi(); },
+                            onend: function () { return _this.nextEpisode(); },
                             onloaderror: function () { return _this.setErrorUI('Playback error'); },
                         });
                         return [2 /*return*/];
@@ -175,6 +179,17 @@ var Player = /** @class */ (function () {
             this.updateTimeUI();
         }
     };
+    Player.prototype.nextEpisode = function () {
+        var next = this.playlist.nextEpisode();
+        if (next)
+            this.playEpisode(next);
+        else {
+            this.stopPlaybackAndResetUi();
+            // manually trigger playlist changed
+            // so that currently playing media gets wiped
+            this.playlist.triggerPlaylistChanged();
+        }
+    };
     Player.prototype.setPlayButtonUI = function () {
         this.playButtonPath.setAttribute('d', 'M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z');
     };
@@ -209,13 +224,14 @@ var Player = /** @class */ (function () {
             this.playButton.disabled = true;
             this.rewButton.disabled = true;
             this.ffwButton.disabled = true;
+            this.skipButton.disabled = true;
         }
         else {
             this.playButton.disabled = false;
             this.rewButton.disabled = false;
             this.ffwButton.disabled = false;
+            this.skipButton.disabled = !this.playlist.hasNextEpisode();
         }
-        this.skipButton.disabled = !this.playlist.hasNextEpisode();
     };
     Player.prototype.sendMediaSessionMetadata = function () {
         if ('mediaSession' in navigator) {
@@ -360,6 +376,9 @@ var Playlist = /** @class */ (function () {
     Playlist.prototype.isQueued = function (episode) {
         return this.episodeHash.has(episode.id);
     };
+    Playlist.prototype.triggerPlaylistChanged = function () {
+        this.playlistChanged();
+    };
     Playlist.prototype.playlistChanged = function () {
         for (var _i = 0, _a = this.changedHandlers; _i < _a.length; _i++) {
             var handler = _a[_i];

src/Player.ts

@@ -71,6 +71,7 @@ class Player {
     this.playButton.addEventListener('click', () => this.playPause());
     this.rewButton.addEventListener('click', () => this.rewind());
     this.ffwButton.addEventListener('click', () => this.fastForward());
+    this.skipButton.addEventListener('click', () => this.nextEpisode());
     this.volumeSlider.addEventListener('change', () => this.setVolume());
 
     // wire up mediaSession events
@@ -86,6 +87,9 @@ class Player {
       navigator.mediaSession.setActionHandler('seekbackward', () =>
         this.rewind()
       );
+      navigator.mediaSession.setActionHandler('nexttrack', () =>
+        this.nextEpisode()
+      );
       // don't support previous track yet, queue removes them once finished
       // wire this up to rewind instead
       navigator.mediaSession.setActionHandler('previoustrack', () =>
@@ -137,7 +141,7 @@ class Player {
             this.setPlayButtonUI();
             this.stopTicker();
           },
-          onend: () => this.stopPlaybackAndResetUi(),
+          onend: () => this.nextEpisode(),
           onloaderror: () => this.setErrorUI('Playback error'),
         });
       })
@@ -176,6 +180,17 @@ class Player {
     }
   }
 
+  private nextEpisode(): void {
+    const next = this.playlist.nextEpisode();
+    if (next) this.playEpisode(next);
+    else {
+      this.stopPlaybackAndResetUi();
+      // manually trigger playlist changed
+      // so that currently playing media gets wiped
+      this.playlist.triggerPlaylistChanged();
+    }
+  }
+
   private setPlayButtonUI(): void {
     this.playButtonPath.setAttribute(
       'd',
@@ -218,13 +233,13 @@ class Player {
       this.playButton.disabled = true;
       this.rewButton.disabled = true;
       this.ffwButton.disabled = true;
+      this.skipButton.disabled = true;
     } else {
       this.playButton.disabled = false;
       this.rewButton.disabled = false;
       this.ffwButton.disabled = false;
+      this.skipButton.disabled = !this.playlist.hasNextEpisode();
     }
-
-    this.skipButton.disabled = !this.playlist.hasNextEpisode();
   }
 
   private sendMediaSessionMetadata(): void {

src/Playlist.ts

@@ -91,6 +91,10 @@ class Playlist {
     return this.episodeHash.has(episode.id);
   }
 
+  public triggerPlaylistChanged(): void {
+    this.playlistChanged();
+  }
+
   private playlistChanged(): void {
     for (const handler of this.changedHandlers) {
       handler();