asteroid/issue-now-playing-not-updating.md at 3aa21c82786508836c2844f7af4872e7fcb8f348

2.8 KiB

Raw Blame History

Description

After implementing AJAX navigation for the frameset mode, the "Now Playing" panel on the player page (/asteroid/player-content) does not update with current track information. The panel remains empty or shows stale data even though the audio stream is playing correctly.

Steps to Reproduce

Navigate to the frameset mode at /asteroid/frameset
Click on the "Player" navigation link to load the player page
Observe that the "Now Playing" panel does not populate with current track information
Navigate to another page and back to the player page
The panel still does not update

Expected Behavior

The "Now Playing" panel should:

Populate with current track information shortly after page load
Update every 10 seconds with fresh data from the Icecast server
Continue working after AJAX navigation between pages

Root Cause

When content pages are loaded via AJAX using document.write(), the JavaScript files (including player.js) are being inserted into the DOM but not executed. The <script> tags are present in the HTML but the browser does not run them because they are added after the initial page load.

This means that:

The updateNowPlaying() function is never called
The setInterval() for periodic updates is never started
Event listeners are not attached

Proposed Solution

Modify the loadInFrame() function in all -content.ctml template files to manually re-execute scripts after loading new content via AJAX:

// Execute scripts in the new content
const scripts = document.querySelectorAll('script');
scripts.forEach(oldScript => {
  const newScript = document.createElement('script');
  if (oldScript.src) {
    newScript.src = oldScript.src;
  } else {
    newScript.textContent = oldScript.textContent;
  }
  oldScript.parentNode.replaceChild(newScript, oldScript);
});

This approach:

Finds all <script> tags in the newly loaded content
Creates fresh script elements
Copies the source URL or inline content
Replaces the old (non-executed) scripts with new ones that the browser will execute

Files to Modify

template/front-page-content.ctml
template/player-content.ctml
template/admin-content.ctml
template/profile-content.ctml
template/login-content.ctml
template/status-content.ctml

Testing Plan

After implementing the fix:

Navigate to /asteroid/frameset
Click "Player" - verify the Now Playing panel populates within 1 second
Navigate to other pages and back - verify the panel continues to update correctly
Verify all dynamic content on all pages works as expected

This fix should also resolve similar issues with other dynamic content that relies on JavaScript execution after page load.

2.8 KiB Raw Blame History

Issue: Now Playing Panel Not Updating on Player Page After Navigation