Again, working on my audio player...

I've rediscovered a mediasession updater in my code that adds a little notification from the browser with controls for my music, and it used to work ok, a little finicky, but now...

Nothing. I tinkered around a bit and got my play/pause buttons working, along with the next/prev songs and seek buttons, and the music title and artist. But I have now found that if you press the play button, the next/prev button, or sometimes the pause button, that the options and the song details disappear, leaving me with only the play/pause button, which works perfectly...

Now, to the code. I have a function that loads the songs in my player (loadSong(songIndex)), and near the end, I have a few lines of code that reset the navigator's metadata:

navigator.mediaSession.metadata.title = song.songname;
navigator.mediaSession.metadata.author = song.artistname;
navigator.mediaSession.metadata.artwork = ("./Music/" + song.thumbnail);

The artist and name work perfectly, but the thumbnail doesn't... More on that in a separate question.

I set up the actual controls like this:

/*media controls*/
let index = 0;
let skipTime = 10;

const actionHandlers = [
  ['play',          () => { main.playPauseControl.click(); navigator.mediaSession.playbackState = "playing"; updatePositionState();}],
  ['pause',         () => { main.playPauseControl.click(); navigator.mediaSession.playbackState = "paused"; updatePositionState();}],
  ['previoustrack', () => { main.prevControl.click(); updatePositionState();}],
  ['nexttrack',     () => { main.nextControl.click(); updatePositionState();}],
  ['seekbackward',  (details) => { main.audio.currentTime = Math.max(main.audio.currentTime - skipTime, 0); updatePositionState();}],
  ['seekforward',   (details) => { main.audio.currentTime = Math.min(main.audio.currentTime + skipTime, main.audio.duration); updatePositionState();}],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}

I have some other things linked to the mediaSession in order to register interactions outside the navigator

main.audio.addEventListener('play', function() {
  navigator.mediaSession.playbackState = 'playing';
  main.playPauseControl.classList.remove("paused");
});

main.audio.addEventListener('pause', function() {
  navigator.mediaSession.playbackState = 'paused';
  main.playPauseControl.classList.add("paused");
});

Now this all works, initially, but as soon as I interact with the navigator, BOOM, everything disappears. Can someone PLEASE tell me what's happening... this has been bugging me for a while...

P.S. sorry for the long question.