diff --git a/src/components/Player.astro b/src/components/Player.astro index 0cd9271..46f774f 100644 --- a/src/components/Player.astro +++ b/src/components/Player.astro @@ -404,6 +404,13 @@ const playerArtworkOpacity = 0.4; this.RING_C = 182.2; // 2 * PI * 29, must match dasharray in markup + if (!this.playlist.length) { + // Nothing to play: hide the shell instead of crashing below. + $("player-shell")?.style.setProperty("display", "none"); + $("player:spacer")?.style.setProperty("display", "none"); + return; + } + this.UI = { root: $("player-shell"), spacer: $("player:spacer"), @@ -925,6 +932,7 @@ const playerArtworkOpacity = 0.4; } addToQueue(track, immediatePlay = false) { + if (!this.playlist.length) return; var current = this.playlist[this.index]; if ( @@ -946,13 +954,39 @@ const playerArtworkOpacity = 0.4; if (!window.playerIsInitialised) { window.player = new Player(initialQueue); } else { - // View-transition restore: re-grab nodes and re-apply. + // View-transition restore: re-grab every node without re-binding listeners (they persist with the shell), then re-apply. try { const p = window.player; p.UI.root = $("player-shell"); p.UI.spacer = $("player:spacer"); p.UI.full = document.querySelector("#player-shell .player-full"); p.UI.face = document.querySelector("#player-shell .player-face"); + p.UI.controls.play = $("player:controls:play"); + p.UI.controls.pause = $("player:controls:pause"); + p.UI.controls.previous = $("player:controls:previous"); + p.UI.controls.next = $("player:controls:next"); + p.UI.controls.minimise = $("player:controls:minimise"); + p.UI.controls.mute = $("player:controls:mute"); + p.UI.controls.volumeOn = $("player:controls:volume-on"); + p.UI.controls.volumeOff = $("player:controls:volume-off"); + p.UI.controls.volume = $("player:controls:volume"); + p.UI.times.current = $("player:times:current"); + p.UI.times.duration = $("player:times:duration"); + p.UI.metadata.title = $("player:metadata:title"); + p.UI.metadata.subtitle = $("player:metadata:subtitle"); + p.UI.metadata.extra = $("player:metadata:extra"); + p.UI.progress.bar = $("player:time:progress"); + p.UI.progress.buffered = $("player:time:progress:buffered"); + p.UI.progress.played = $("player:time:progress:played"); + p.UI.artwork.background = $("player:artwork:background"); + p.UI.faceArtwork.img = $("player:face:artwork"); + p.UI.faceArtwork.fallback = $("player:face:fallback"); + p.UI.faceProgress.buffered = $("player:face:progress:buffered"); + p.UI.faceProgress.played = $("player:face:progress:played"); + p.UI.faceControls.toggle = $("player:face:controls:toggle"); + p.UI.faceControls.play = $("player:face:controls:play"); + p.UI.faceControls.pause = $("player:face:controls:pause"); + p.UI.faceControls.expand = $("player:face:controls:expand"); p.applyminimised(); } catch (e) { /* ignore */