diff --git a/site/radiostasis.js b/site/radiostasis.js index 9653eda..bdd4719 100644 --- a/site/radiostasis.js +++ b/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(); }); diff --git a/src/Player.ts b/src/Player.ts index 4022ef2..4773da0 100644 --- a/src/Player.ts +++ b/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() { diff --git a/src/Playlist.ts b/src/Playlist.ts index e7e8b0f..4693de0 100644 --- a/src/Playlist.ts +++ b/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; + } } diff --git a/src/Radiostasis.ts b/src/Radiostasis.ts index bcf8b44..f586d4a 100644 --- a/src/Radiostasis.ts +++ b/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)!;