vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix UIRenderer constructor to properly accept and assign 'player' instance

Browse source 
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.
This commit is contained in:
Julien Maille 2025-12-26 12:16:04 +01:00
parent 2ae6b620f2
commit 45380ea148
2 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/app.js
View file

@ -175,12 +175,12 @@ function hideOfflineNotification() {
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
const api = new LosslessAPI(apiSettings); const api = new LosslessAPI(apiSettings);
const ui = new UIRenderer(api);
const audioPlayer = document.getElementById('audio-player'); const audioPlayer = document.getElementById('audio-player');
const currentQuality = localStorage.getItem('playback-quality') || 'LOSSLESS'; const currentQuality = localStorage.getItem('playback-quality') || 'LOSSLESS';
const player = new Player(audioPlayer, api, currentQuality); const player = new Player(audioPlayer, api, currentQuality);
const ui = new UIRenderer(api, player);
const scrobbler = new LastFMScrobbler(); const scrobbler = new LastFMScrobbler();
const lyricsManager = new LyricsManager(api); const lyricsManager = new LyricsManager(api);
const lyricsPanel = createLyricsPanel(); const lyricsPanel = createLyricsPanel();

16
js/ui.js
View file

@ -3,8 +3,9 @@ import { SVG_PLAY, SVG_DOWNLOAD, SVG_MENU, formatTime, createPlaceholder, trackD
import { recentActivityManager, backgroundSettings, trackListSettings } from './storage.js'; import { recentActivityManager, backgroundSettings, trackListSettings } from './storage.js';
export class UIRenderer { export class UIRenderer {
constructor(api) { constructor(api, player) {
this.api = api; this.api = api;
this.player = player;
this.currentTrack = null; this.currentTrack = null;
this.searchAbortController = null; this.searchAbortController = null;
} }
@ -72,6 +73,7 @@ export class UIRenderer {
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : ''; const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const trackArtists = getTrackArtists(track); const trackArtists = getTrackArtists(track);
const trackTitle = getTrackTitle(track); const trackTitle = getTrackTitle(track);
const isCurrentTrack = this.player?.currentTrack?.id === track.id;
let yearDisplay = ''; let yearDisplay = '';
const releaseDate = track.album?.releaseDate || track.streamStartDate; const releaseDate = track.album?.releaseDate || track.streamStartDate;
@ -112,7 +114,7 @@ export class UIRenderer {
`; `;
return ` return `
<div class="track-item" data-track-id="${track.id}"> <div class="track-item ${isCurrentTrack ? 'playing' : ''}" data-track-id="${track.id}">
${trackNumberHTML} ${trackNumberHTML}
<div class="track-item-info"> <div class="track-item-info">
<div class="track-item-details"> <div class="track-item-details">
@ -627,7 +629,7 @@ export class UIRenderer {
} }
} }
async renderPlaylistPage(playlistId) { async renderPlaylistPage(playlistId) {
this.showPage('playlist'); this.showPage('playlist');
const imageEl = document.getElementById('playlist-detail-image'); const imageEl = document.getElementById('playlist-detail-image');
@ -662,13 +664,11 @@ async renderPlaylistPage(playlistId) {
imageEl.style.backgroundColor = ''; imageEl.style.backgroundColor = '';
titleEl.textContent = playlist.title; titleEl.textContent = playlist.title;
this.adjustTitleFontSize(titleEl, playlist.title); this.adjustTitleFontSize(titleEl, playlist.title);
const totalDuration = calculateTotalDuration(tracks); const totalDuration = calculateTotalDuration(tracks);
metaEl.textContent = `${playlist.numberOfTracks} tracks • ${formatDuration(totalDuration)}`; metaEl.textContent = `${playlist.numberOfTracks} tracks • ${formatDuration(totalDuration)}`;
descEl.textContent = playlist.description || ''; descEl.textContent = playlist.description || '';
tracklistContainer.innerHTML = ` tracklistContainer.innerHTML = `
@ -680,14 +680,14 @@ async renderPlaylistPage(playlistId) {
`; `;
this.renderListWithTracks(tracklistContainer, tracks, true); this.renderListWithTracks(tracklistContainer, tracks, true);
recentActivityManager.addPlaylist(playlist); recentActivityManager.addPlaylist(playlist);
document.title = `${playlist.title || 'Artist Mix'} - Monochrome`; } catch (error) { document.title = `${playlist.title || 'Artist Mix'} - Monochrome`;
} catch (error) {
console.error("Failed to load playlist:", error); console.error("Failed to load playlist:", error);
tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`); tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`);
} }
} }
async renderArtistPage(artistId) { async renderArtistPage(artistId) {
this.showPage('artist'); this.showPage('artist');