Link "Now Playing" track title to original YouTube video

[Copilot]

When a track filename contains a YouTube video ID in the format [videoId], the "Now Playing" title now renders as a clickable link to https://youtu.be/{id}. Tracks without video IDs display as plain text.

Changes

• Added resolveYouTubeUrlFromTrack() - Converts track object to entry format and delegates to existing resolveYouTubeUrl() to extract video ID from filename/path
• Modified "Now Playing" rendering - Dynamically creates <a> element with target="_blank" and rel="noopener" when YouTube URL detected, otherwise sets plain text
• Added .now-title-link CSS - Accent color with hover underline, matching existing .history-path-link pattern

Implementation

const tr = tracks[current];
const youtubeUrl = resolveYouTubeUrlFromTrack(tr);
if (youtubeUrl) {
  const link = document.createElement('a');
  link.className = 'now-title-link';
  link.href = youtubeUrl;
  link.target = '_blank';
  link.rel = 'noopener';
  link.textContent = tr.displayName;
  nowTitleEl.appendChild(link);
} else {
  nowTitleEl.textContent = tr.displayName;
}

Screenshot

Top example shows track with [5Dc-5DD8P-0] rendered as cyan link. Bottom shows regular track as plain text.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Link "Now Playing" track to original YouTube video</issue_title>
<issue_description>## Summary
When a track sourced from YouTube is playing, the "Now Playing" song title in the UI should link to the original YouTube video so users can easily jump to the source.

Motivation

• Provides quick attribution and context for the current track.
• Enables users to share or re-open the original video without searching manually.
• Aligns with user expectations from other media players that link back to source content.

Acceptance Criteria

• If the current track comes from YouTube, the "Now Playing" song title renders as a hyperlink to the original video URL.
• Opening the link should respect the user's default browser behavior (new tab/window).
• Tracks without an associated YouTube URL continue to render as plain text.

Additional Notes

• Consider how the URL will be stored or passed alongside the track metadata so the link remains available.
• Ensure the design remains accessible and that the link state is communicated clearly (e.g., hover/focus styles).</issue_description>

Comments on the Issue (you are @copilot in this section)

@paulpv Heads-up on existing behaviour: the history list already derives a YouTube URL from each entry when possible. In `player.html` the helper `resolveYouTubeUrl` (around line 1470) inspects the track name and relative path, strips the file extension, and looks for a trailing `[VIDEO_ID]` token. When it finds a match, it turns that into `https://youtu.be/` and uses it while rendering the history rows. That is why history entries with filenames like `My Track [abcd1234].m4a` already expose a clickable link to the original video. The feature request here would simply bring the same extraction to the "Now Playing" header.

• Fixes Link "Now Playing" track to original YouTube video #32

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[paulpv]

@copilot When this new now playing title link is clicked the player should pause

[Copilot]

Pull Request Overview

This PR adds clickable YouTube links to the now-playing title display. When a track contains a YouTube ID in its filename or path (formatted as [VIDEO_ID]), the track title becomes a hyperlink that opens the corresponding YouTube video in a new tab.

• Introduces CSS styling for clickable track title links
• Adds a helper function resolveYouTubeUrlFromTrack to extract YouTube URLs from track objects
• Modifies the playIndex function to conditionally render the track title as either a link or plain text

Comments suppressed due to low confidence (1)

player.html:565

• When dynamically changing the nowTitle element from plain text to containing a link (or vice versa), the aria-atomic="true" attribute causes screen readers to announce the entire element content. However, using innerHTML = '' and appendChild at lines 2859-2866 may interfere with the intended accessibility behavior. Consider testing with screen readers to ensure the link is properly announced when tracks change, or maintaining consistent text content in the element to preserve the ARIA live region behavior.

          <span id="nowTitle" class="now-title" aria-live="polite" aria-atomic="true">—</span>

[Copilot]

The rel attribute should include both noopener and noreferrer for enhanced security when opening links in a new tab. This prevents the new page from accessing the window.opener property and also strips referrer information. Update to link.rel = 'noopener noreferrer';.

Suggested change

	link.rel = 'noopener';
	link.rel = 'noopener noreferrer';