From 45380ea148ff52a08729f353d7f14a7eccc2ff71 Mon Sep 17 00:00:00 2001 From: Julien Maille Date: Fri, 26 Dec 2025 12:16:04 +0100 Subject: [PATCH] Fix UIRenderer constructor to properly accept and assign 'player' instance Resolved TypeError where 'this.player' was undefined in UIRenderer, preventing 'isCurrentTrack' check from working correctly. Updated constructor to accept 'player' argument passed from app.js. --- js/app.js | 2 +- js/ui.js | 94 +++++++++++++++++++++++++++---------------------------- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/js/app.js b/js/app.js index e086e50..35de81c 100644 --- a/js/app.js +++ b/js/app.js @@ -175,12 +175,12 @@ function hideOfflineNotification() { document.addEventListener('DOMContentLoaded', async () => { const api = new LosslessAPI(apiSettings); - const ui = new UIRenderer(api); const audioPlayer = document.getElementById('audio-player'); const currentQuality = localStorage.getItem('playback-quality') || 'LOSSLESS'; const player = new Player(audioPlayer, api, currentQuality); + const ui = new UIRenderer(api, player); const scrobbler = new LastFMScrobbler(); const lyricsManager = new LyricsManager(api); const lyricsPanel = createLyricsPanel(); diff --git a/js/ui.js b/js/ui.js index e39e7e6..fa23d2a 100644 --- a/js/ui.js +++ b/js/ui.js @@ -3,8 +3,9 @@ import { SVG_PLAY, SVG_DOWNLOAD, SVG_MENU, formatTime, createPlaceholder, trackD import { recentActivityManager, backgroundSettings, trackListSettings } from './storage.js'; export class UIRenderer { - constructor(api) { + constructor(api, player) { this.api = api; + this.player = player; this.currentTrack = null; this.searchAbortController = null; } @@ -72,6 +73,7 @@ export class UIRenderer { const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : ''; const trackArtists = getTrackArtists(track); const trackTitle = getTrackTitle(track); + const isCurrentTrack = this.player?.currentTrack?.id === track.id; let yearDisplay = ''; const releaseDate = track.album?.releaseDate || track.streamStartDate; @@ -112,7 +114,7 @@ export class UIRenderer { `; return ` -
+
${trackNumberHTML}
@@ -627,67 +629,65 @@ export class UIRenderer { } } -async renderPlaylistPage(playlistId) { - this.showPage('playlist'); + async renderPlaylistPage(playlistId) { + this.showPage('playlist'); - const imageEl = document.getElementById('playlist-detail-image'); - const titleEl = document.getElementById('playlist-detail-title'); - const metaEl = document.getElementById('playlist-detail-meta'); - const descEl = document.getElementById('playlist-detail-description'); - const tracklistContainer = document.getElementById('playlist-detail-tracklist'); + const imageEl = document.getElementById('playlist-detail-image'); + const titleEl = document.getElementById('playlist-detail-title'); + const metaEl = document.getElementById('playlist-detail-meta'); + const descEl = document.getElementById('playlist-detail-description'); + const tracklistContainer = document.getElementById('playlist-detail-tracklist'); const playBtn = document.getElementById('play-playlist-btn'); if (playBtn) playBtn.innerHTML = `${SVG_PLAY}Play`; const dlBtn = document.getElementById('download-playlist-btn'); if (dlBtn) dlBtn.innerHTML = `${SVG_DOWNLOAD}Download`; imageEl.src = ''; - imageEl.style.backgroundColor = 'var(--muted)'; - titleEl.innerHTML = '
'; - metaEl.innerHTML = '
'; - descEl.innerHTML = '
'; - tracklistContainer.innerHTML = ` -
- # - Title - Duration -
- ${this.createSkeletonTracks(10, true)} - `; - - try { - const { playlist, tracks } = await this.api.getPlaylist(playlistId); - - const imageId = playlist.squareImage || playlist.image; - imageEl.src = this.api.getCoverUrl(imageId, '1080'); - imageEl.style.backgroundColor = ''; - - titleEl.textContent = playlist.title; - - this.adjustTitleFontSize(titleEl, playlist.title); - - const totalDuration = calculateTotalDuration(tracks); - - metaEl.textContent = `${playlist.numberOfTracks} tracks • ${formatDuration(totalDuration)}`; - - descEl.textContent = playlist.description || ''; - + imageEl.style.backgroundColor = 'var(--muted)'; + titleEl.innerHTML = '
'; + metaEl.innerHTML = '
'; + descEl.innerHTML = '
'; tracklistContainer.innerHTML = `
# Title Duration
+ ${this.createSkeletonTracks(10, true)} `; - this.renderListWithTracks(tracklistContainer, tracks, true); - - recentActivityManager.addPlaylist(playlist); - - document.title = `${playlist.title || 'Artist Mix'} - Monochrome`; } catch (error) { - console.error("Failed to load playlist:", error); - tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`); + try { + const { playlist, tracks } = await this.api.getPlaylist(playlistId); + + const imageId = playlist.squareImage || playlist.image; + imageEl.src = this.api.getCoverUrl(imageId, '1080'); + imageEl.style.backgroundColor = ''; + + titleEl.textContent = playlist.title; + this.adjustTitleFontSize(titleEl, playlist.title); + + const totalDuration = calculateTotalDuration(tracks); + + metaEl.textContent = `${playlist.numberOfTracks} tracks • ${formatDuration(totalDuration)}`; + descEl.textContent = playlist.description || ''; + + tracklistContainer.innerHTML = ` +
+ # + Title + Duration +
+ `; + + this.renderListWithTracks(tracklistContainer, tracks, true); + recentActivityManager.addPlaylist(playlist); + + document.title = `${playlist.title || 'Artist Mix'} - Monochrome`; + } catch (error) { + console.error("Failed to load playlist:", error); + tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`); + } } -} async renderArtistPage(artistId) { this.showPage('artist');