starting to figure out playlist

site/radiostasis.js

@@ -36,8 +36,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 var Player = /** @class */ (function () {
-    function Player() {
+    function Player(playlist) {
         var _this = this;
+        this.playlist = playlist;
         var controls = document.getElementById('controls');
         var timeVolume = document.getElementById('timeVolume');
         this.nowPlaying = document.getElementById('nowPlaying');
@@ -45,6 +46,7 @@ var Player = /** @class */ (function () {
         this.playButton = controls.getElementsByTagName('button').item(1);
         this.playButtonPath = this.playButton.getElementsByTagName('path').item(0);
         this.ffwButton = controls.getElementsByTagName('button').item(2);
+        this.skipButton = controls.getElementsByTagName('button').item(3);
         this.cover = this.nowPlaying.getElementsByTagName('img').item(0);
         this.seriesName = this.nowPlaying.getElementsByTagName('span').item(0);
         this.episodeName = this.nowPlaying.getElementsByTagName('span').item(1);
@@ -80,6 +82,10 @@ var Player = /** @class */ (function () {
                 return _this.rewind();
             });
         }
+        // set up playlist changed handler
+        this.playlist.setPlaylistChangedHandler(function () {
+            _this.skipButton.disabled = !_this.playlist.hasNextEpisode();
+        });
     }
     Player.prototype.setErrorUI = function (message) {
         this.stopPlaybackAndResetUi();
@@ -145,6 +151,7 @@ var Player = /** @class */ (function () {
             if (newPos < 0)
                 newPos = 0;
             this.howl.seek(newPos);
+            this.updateTimeUI();
         }
     };
     Player.prototype.fastForward = function () {
@@ -153,6 +160,7 @@ var Player = /** @class */ (function () {
             if (newPos > this.howl.duration())
                 newPos = this.howl.duration();
             this.howl.seek(newPos);
+            this.updateTimeUI();
         }
     };
     Player.prototype.setPlayButtonUI = function () {
@@ -197,6 +205,7 @@ var Player = /** @class */ (function () {
             this.rewButton.disabled = false;
             this.ffwButton.disabled = false;
         }
+        this.skipButton.disabled = !this.playlist.hasNextEpisode();
     };
     Player.prototype.sendMediaSessionMetadata = function () {
         if ('mediaSession' in navigator) {
@@ -266,10 +275,9 @@ var Player = /** @class */ (function () {
     return Player;
 }());
 var Playlist = /** @class */ (function () {
-    function Playlist(player) {
+    function Playlist() {
         var _this = this;
         this.queueExpandedHeight = 'calc(100% - 6ex)';
-        this.player = player;
         this.queueContainer = document.getElementById('queue-container');
         this.queueInitialHeight = getComputedStyle(this.queueContainer).height;
         this.queueTab = this.queueContainer.getElementsByTagName('h2').item(0);
@@ -291,6 +299,12 @@ var Playlist = /** @class */ (function () {
             this.overlay.style.pointerEvents = 'none';
         }
     };
+    Playlist.prototype.setPlaylistChangedHandler = function (handler) {
+        this.changedHandler = handler;
+    };
+    Playlist.prototype.hasNextEpisode = function () {
+        return false;
+    };
     return Playlist;
 }());
 var Radiostasis = /** @class */ (function () {
@@ -298,8 +312,8 @@ var Radiostasis = /** @class */ (function () {
         var _this = this;
         this.lastSearch = null;
         this.debouncer = null;
-        this.player = new Player();
-        this.playlist = new Playlist(this.player);
+        this.playlist = new Playlist();
+        this.player = new Player(this.playlist);
         this.main = document.getElementsByTagName('main').item(0);
         // set up htmx event handlers
         document.addEventListener('htmx:historyRestore', function () { return _this.wireLoadedFragment(); });

src/Player.ts

@@ -5,6 +5,7 @@ class Player {
   private readonly playButton: HTMLButtonElement;
   private readonly playButtonPath: SVGPathElement;
   private readonly ffwButton: HTMLButtonElement;
+  private readonly skipButton: HTMLButtonElement;
   private readonly cover: HTMLImageElement;
   private readonly seriesName: HTMLElement;
   private readonly episodeName: HTMLElement;
@@ -18,10 +19,12 @@ class Player {
   // the actual howler that plays the episodes
   private howl: Howl | null;
 
-  // currently playing episode
+  // currently playing episode and playlist
   private episode: Episode | null;
+  private playlist: Playlist;
 
-  public constructor() {
+  public constructor(playlist: Playlist) {
+    this.playlist = playlist;
     const controls = document.getElementById('controls')!;
     const timeVolume = document.getElementById('timeVolume')!;
     this.nowPlaying = document.getElementById('nowPlaying')!;
@@ -29,6 +32,7 @@ class Player {
     this.playButton = controls.getElementsByTagName('button').item(1)!;
     this.playButtonPath = this.playButton.getElementsByTagName('path').item(0)!;
     this.ffwButton = controls.getElementsByTagName('button').item(2)!;
+    this.skipButton = controls.getElementsByTagName('button').item(3)!;
     this.cover = this.nowPlaying.getElementsByTagName('img').item(0)!;
     this.seriesName = this.nowPlaying.getElementsByTagName('span').item(0)!;
     this.episodeName = this.nowPlaying.getElementsByTagName('span').item(1)!;
@@ -63,6 +67,11 @@ class Player {
       navigator.mediaSession.setActionHandler('previoustrack', () =>
         this.rewind());
     }
+
+    // set up playlist changed handler
+    this.playlist.setPlaylistChangedHandler(() => {
+      this.skipButton.disabled = !this.playlist.hasNextEpisode();
+    });
   }
 
   private setErrorUI(message: string): void {
@@ -119,6 +128,7 @@ class Player {
       let newPos = this.howl.seek() - 10;
       if (newPos < 0) newPos = 0;
       this.howl.seek(newPos);
+      this.updateTimeUI();
     }
   }
 
@@ -127,6 +137,7 @@ class Player {
       let newPos = this.howl.seek() + 30;
       if (newPos > this.howl.duration()) newPos = this.howl.duration();
       this.howl.seek(newPos);
+      this.updateTimeUI();
     }
   }
 
@@ -175,6 +186,8 @@ class Player {
       this.rewButton.disabled = false;
       this.ffwButton.disabled = false;
     }
+
+    this.skipButton.disabled = !this.playlist.hasNextEpisode();
   }
 
   private sendMediaSessionMetadata() {

src/Playlist.ts

@@ -4,10 +4,11 @@ class Playlist {
   private readonly overlay: HTMLElement;
   private readonly queueInitialHeight: string;
   private readonly queueExpandedHeight = 'calc(100% - 6ex)';
-  private readonly player : Player;
 
-  constructor(player: Player) {
-    this.player = player;
+  // changed event handler
+  private changedHandler?: () => void;
+
+  constructor() {
     this.queueContainer = document.getElementById('queue-container')!;
     this.queueInitialHeight = getComputedStyle(this.queueContainer).height;
     this.queueTab = this.queueContainer.getElementsByTagName('h2').item(0)!;
@@ -30,4 +31,12 @@ class Playlist {
       this.overlay.style.pointerEvents = 'none';
     }
   }
+
+  public setPlaylistChangedHandler(handler: () => void) {
+    this.changedHandler = handler;
+  }
+
+  public hasNextEpisode(): boolean {
+    return false;
+  }
 }

src/Radiostasis.ts

@@ -10,8 +10,8 @@ class Radiostasis {
   private debouncer: number | null = null;
 
   constructor() {
-    this.player = new Player();
-    this.playlist = new Playlist(this.player);
+    this.playlist = new Playlist();
+    this.player = new Player(this.playlist);
 
     this.main = document.getElementsByTagName('main').item(0)!;