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

Merge pull request #380 from DanTheMan827/singleton

Browse source 
Convert classes to singleton pattern
This commit is contained in:
edidealt 2026-03-22 03:36:13 +02:00 committed by GitHub
commit 7e16dc23c2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 366 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
js/HiFi.ts
View file

@ -18,7 +18,23 @@ export class TidalResponse extends Response {
}
}
interface HiFiConstructorOptions {
clientId?: string;
clientSecret?: string;
countryCode?: string;
token?: string;
tokenExpiry?: number;
}
export class HiFiClient {
static #instance: HiFiClient | null = null;
static get instance() {
if (!HiFiClient.#instance) {
throw new Error('HiFiClient is not initialized. Call HiFiClient.initialize(options) first.');
}
return HiFiClient.#instance;
}
private static tokenPromise: Promise<string> | null = null;
private static albumTracksMax = 20;
private static albumTracksActive = 0;
@ -90,15 +106,7 @@ export class HiFiClient {
return u.toString();
}
private static encodeBasic(id: string, secret: string) {
if (typeof globalThis.btoa === 'function') {
return btoa(`${id}:${secret}`);
}
// Node fallback
return Buffer.from(`${id}:${secret}`).toString('base64');
}
static setToken(token: string, expiry: number = Date.now() + 60000) {
static setToken(token: string, expiry: number = -1) {
HiFiClient.token = token;
HiFiClient.appTokenExpiry = expiry;
}
@ -108,7 +116,8 @@ export class HiFiClient {
clientId: string,
clientSecret: string
) {
if (HiFiClient.token && Date.now() < HiFiClient.appTokenExpiry) return HiFiClient.token;
if (HiFiClient.token && (HiFiClient.appTokenExpiry < 0 || Date.now() < HiFiClient.appTokenExpiry))
return HiFiClient.token;
return await (HiFiClient.tokenPromise ??= (async () => {
try {
@ -116,7 +125,6 @@ export class HiFiClient {
method: 'POST',
headers: {
'content-type': 'application/x-www-form-urlencoded',
authorization: `Basic ${this.encodeBasic(clientId, clientSecret)}`,
},
body: new URLSearchParams({
grant_type: 'client_credentials',
@ -144,10 +152,38 @@ export class HiFiClient {
})());
}
constructor(clientId = BROWSER_CLIENT_ID, clientSecret = BROWSER_CLIENT_SECRET, countryCode = 'US') {
private static getOptions({
clientId = BROWSER_CLIENT_ID,
clientSecret = BROWSER_CLIENT_SECRET,
countryCode = 'US',
token,
tokenExpiry,
}: HiFiConstructorOptions = {}) {
return { clientId, clientSecret, countryCode, token, tokenExpiry };
}
private constructor(options: HiFiConstructorOptions = {}) {
const { clientId, clientSecret, countryCode, token, tokenExpiry } = HiFiClient.getOptions(options);
this.countryCode = countryCode;
this.clientId = clientId;
this.clientSecret = clientSecret;
if (token) {
HiFiClient.setToken(token, tokenExpiry ?? -1);
}
}
static async initialize(options: HiFiConstructorOptions = {}) {
if (HiFiClient.#instance) {
throw new Error('HiFiClient is already initialized');
}
const instance = (HiFiClient.#instance = new HiFiClient(options));
if (!options.token && !options.clientId && !options.clientSecret) {
await HiFiClient.fetchAppToken(new AbortController().signal, instance.clientId, instance.clientSecret);
}
return (HiFiClient.#instance = instance);
}
private async fetchJson(url: string, params?: Params, signal: AbortSignal = new AbortController().signal) {

3
js/api.js
View file

@ -26,7 +26,6 @@ import { HiFiClient, TidalResponse } from './HiFi.ts';
export const DASH_MANIFEST_UNAVAILABLE_CODE = 'DASH_MANIFEST_UNAVAILABLE';
export { resolveDownloadTotalBytes };
const TIDAL_V2_TOKEN = 'txNoH4kkV41MfH25';
const client = new HiFiClient();
export class LosslessAPI {
constructor(settings) {
@ -64,7 +63,7 @@ export class LosslessAPI {
console.log(relativePath);
}
return await client.queryResponse(relativePath);
return await HiFiClient.instance.queryResponse(relativePath);
} catch (err) {
console.warn(
`Direct fetch failed for ${relativePath}. Falling back to configured API instances...`,

318
js/app.js
View file

@ -71,6 +71,7 @@ import {
SVG_CLOSE,
SVG_RESET,
} from './icons.js';
import { HiFiClient } from './HiFi.js';
// Capture real iOS state before spoofing (needed for background audio)
if (typeof window !== 'undefined') {
@ -106,8 +107,6 @@ let settingsModule = null;
let downloadsModule = null;
let metadataModule = null;
export const managers = {};
async function loadSettingsModule() {
if (!settingsModule) {
settingsModule = await import('./settings.js');
@ -265,23 +264,20 @@ function initializeKeyboardShortcuts(player, _audioPlayer) {
},
visualizerNext: () => {
trackKeyboardShortcut('VisualizerNext');
const ui = window.monochromeUi;
if (ui?.visualizer?.presets?.['butterchurn']) {
ui.visualizer.presets['butterchurn'].nextPreset();
if (UIRenderer.instance.visualizer?.presets?.['butterchurn']) {
UIRenderer.instance.visualizer.presets['butterchurn'].nextPreset();
}
},
visualizerPrev: () => {
trackKeyboardShortcut('VisualizerPrev');
const ui = window.monochromeUi;
if (ui?.visualizer?.presets?.['butterchurn']) {
ui.visualizer.presets['butterchurn'].prevPreset();
if (UIRenderer.instance.visualizer?.presets?.['butterchurn']) {
UIRenderer.instance.visualizer.presets['butterchurn'].prevPreset();
}
},
visualizerCycle: () => {
trackKeyboardShortcut('VisualizerCycle');
const ui = window.monochromeUi;
if (ui?.visualizer?.presets?.['butterchurn']) {
ui.visualizer.presets['butterchurn'].toggleCycle();
if (UIRenderer.instance.visualizer?.presets?.['butterchurn']) {
UIRenderer.instance.visualizer.presets['butterchurn'].toggleCycle();
}
},
};
@ -385,12 +381,23 @@ async function uploadCoverImage(file) {
document.addEventListener('DOMContentLoaded', async () => {
await modernSettings.waitPending();
if (import.meta.env.DEV) {
window.monochrome = {
HiFiClient,
LyricsManager,
MusicAPI,
Player,
UIRenderer,
};
}
// Initialize analytics
initAnalytics();
new ThemeStore();
await HiFiClient.initialize();
await MusicAPI.initialize(apiSettings);
const api = new MusicAPI(apiSettings);
const audioPlayer = document.getElementById('audio-player');
// i love ios and macos!!!! webkit fucking SUCKS BULLSHIT sorry ios/macos heads yall getting lossless only playback
@ -418,21 +425,19 @@ document.addEventListener('DOMContentLoaded', async () => {
}
const currentQuality = localStorage.getItem('playback-quality') || 'HI_RES_LOSSLESS';
const player = new Player(audioPlayer, api, currentQuality);
await player.init();
window.monochromePlayer = player;
await Player.initialize(audioPlayer, MusicAPI.instance, currentQuality);
// Initialize tracker
initTracker(player);
initTracker();
// Linux Media Keys Fix
if (window.NL_MODE) {
import('./desktop/neutralino-bridge.js').then(({ events }) => {
events.on('mediaNext', () => player.playNext());
events.on('mediaPrevious', () => player.playPrev());
events.on('mediaPlayPause', () => player.handlePlayPause());
events.on('mediaNext', () => Player.instance.playNext());
events.on('mediaPrevious', () => Player.instance.playPrev());
events.on('mediaPlayPause', () => Player.instance.handlePlayPause());
events.on('mediaStop', () => {
const el = player.activeElement;
const el = Player.instance.activeElement;
el.pause();
el.currentTime = 0;
});
@ -450,7 +455,7 @@ document.addEventListener('DOMContentLoaded', async () => {
window.NL_MODE = true;
try {
const desktopModule = await import('./desktop/desktop.js');
await desktopModule.initDesktop(player);
await desktopModule.initDesktop(Player.instance);
import('./desktop/neutralino-bridge.js').then(({ updater }) => {
setTimeout(async () => {
@ -499,8 +504,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const castBtn = document.getElementById('cast-btn');
initializeCasting(audioPlayer, castBtn);
const ui = new UIRenderer(api, player);
window.monochromeUi = ui;
await UIRenderer.initialize(MusicAPI.instance, Player.instance);
/**
* Scans the configured local media folder and refreshes `window.localFilesCache`.
@ -552,7 +556,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const metadata = await readTrackMetadata(file);
metadata.id = `local-${idCounter++}-${entry.entry}`;
tracks.push(metadata);
window.monochromeUi?.renderLocalFiles(
UIRenderer.instance.renderLocalFiles(
document.getElementById('library-local-container')
);
} catch (e) {
@ -589,7 +593,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const metadata = await readTrackMetadata(file);
metadata.id = `local-${idCounter++}-${file.name}`;
tracks.push(metadata);
window.monochromeUi?.renderLocalFiles(
UIRenderer.instance.renderLocalFiles(
document.getElementById('library-local-container')
);
}
@ -603,7 +607,7 @@ document.addEventListener('DOMContentLoaded', async () => {
tracks.sort((a, b) => (a.artist.name || '').localeCompare(b.artist.name || ''));
// Update only the local-files section without navigating to the library page.
window.monochromeUi?.renderLocalFiles(document.getElementById('library-local-container'));
UIRenderer.instance.renderLocalFiles(document.getElementById('library-local-container'));
} finally {
window.localFilesScanInProgress = false;
}
@ -636,7 +640,7 @@ document.addEventListener('DOMContentLoaded', async () => {
window.localFilesCache = [...existing, metadata].sort((a, b) =>
(a.artist.name || '').localeCompare(b.artist.name || '')
);
window.monochromeUi?.renderLocalFiles(document.getElementById('library-local-container'));
UIRenderer.instance.renderLocalFiles(document.getElementById('library-local-container'));
} catch {
// Fall back to a full rescan if metadata extraction fails.
await scanLocalMediaFolder(true);
@ -656,9 +660,9 @@ document.addEventListener('DOMContentLoaded', async () => {
const scrobbler = new MultiScrobbler();
window.monochromeScrobbler = scrobbler;
const lyricsManager = new LyricsManager(api);
ui.lyricsManager = lyricsManager;
managers.lyricsManager = lyricsManager;
const lyricsManager = await LyricsManager.initialize(MusicAPI.instance);
UIRenderer.instance.lyricsManager = lyricsManager;
// Check browser support for local files
const selectLocalBtn = document.getElementById('select-local-folder-btn');
@ -691,11 +695,11 @@ document.addEventListener('DOMContentLoaded', async () => {
sidebarSettings.restoreState();
// Render pinned items
await ui.renderPinnedItems();
await UIRenderer.instance.renderPinnedItems();
// Load settings module and initialize
const { initializeSettings } = await loadSettingsModule();
await initializeSettings(scrobbler, player, api, ui);
await initializeSettings(scrobbler, Player.instance, MusicAPI.instance, UIRenderer.instance);
// Track sidebar navigation clicks
document.querySelectorAll('.sidebar-nav a').forEach((link) => {
@ -708,28 +712,28 @@ document.addEventListener('DOMContentLoaded', async () => {
});
});
initializePlayerEvents(player, audioPlayer, scrobbler, ui);
initializePlayerEvents(Player.instance, audioPlayer, scrobbler, UIRenderer.instance);
initializeTrackInteractions(
player,
api,
Player.instance,
MusicAPI.instance,
document.querySelector('.main-content'),
document.getElementById('context-menu'),
lyricsManager,
ui,
UIRenderer.instance,
scrobbler
);
initializeUIInteractions(player, api, ui);
initializeKeyboardShortcuts(player, audioPlayer);
initializeUIInteractions(Player.instance, MusicAPI.instance, UIRenderer.instance);
initializeKeyboardShortcuts(Player.instance, audioPlayer);
// Restore UI state for the current track (like button, theme)
if (player.currentTrack) {
ui.setCurrentTrack(player.currentTrack);
if (Player.instance.currentTrack) {
UIRenderer.instance.setCurrentTrack(Player.instance.currentTrack);
}
document.querySelector('.now-playing-bar').addEventListener('click', async (e) => {
if (!e.target.closest('.cover')) return;
if (!player.currentTrack) {
if (!Player.instance.currentTrack) {
alert('No track is currently playing');
return;
}
@ -740,16 +744,16 @@ document.addEventListener('DOMContentLoaded', async () => {
const isActive = sidePanelManager.isActive('lyrics');
if (isActive) {
trackCloseLyrics(player.currentTrack);
trackCloseLyrics(Player.instance.currentTrack);
} else {
trackOpenLyrics(player.currentTrack);
trackOpenLyrics(Player.instance.currentTrack);
}
} else if (mode === 'cover') {
const overlay = document.getElementById('fullscreen-cover-overlay');
if (overlay && overlay.style.display === 'flex') {
trackCloseFullscreenCover();
} else {
trackOpenFullscreenCover(player.currentTrack);
trackOpenFullscreenCover(Player.instance.currentTrack);
}
}
@ -758,9 +762,9 @@ document.addEventListener('DOMContentLoaded', async () => {
if (isActive) {
sidePanelManager.close();
clearLyricsPanelSync(player.activeElement, sidePanelManager.panel);
clearLyricsPanelSync(Player.instance.activeElement, sidePanelManager.panel);
} else {
openLyricsPanel(player.currentTrack, player.activeElement, lyricsManager);
openLyricsPanel(Player.instance.currentTrack, Player.instance.activeElement, lyricsManager);
}
} else if (mode === 'cover') {
const overlay = document.getElementById('fullscreen-cover-overlay');
@ -768,16 +772,21 @@ document.addEventListener('DOMContentLoaded', async () => {
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
UIRenderer.instance.closeFullscreenCover();
}
} else {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack, lyricsManager, player.activeElement);
const nextTrack = Player.instance.getNextTrack();
UIRenderer.instance.showFullscreenCover(
Player.instance.currentTrack,
nextTrack,
lyricsManager,
Player.instance.activeElement
);
}
} else {
// Default to 'album' mode - navigate to album
if (player.currentTrack.album?.id) {
navigate(`/album/${player.currentTrack.album.id}`);
if (Player.instance.currentTrack.album?.id) {
navigate(`/album/${Player.instance.currentTrack.album.id}`);
}
}
});
@ -793,7 +802,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
UIRenderer.instance.closeFullscreenCover();
}
});
@ -805,14 +814,14 @@ document.addEventListener('DOMContentLoaded', async () => {
const action = fullscreenCoverClickSettings.getAction();
const overlay = document.getElementById('fullscreen-cover-overlay');
const playerInstance = window.monochromePlayer;
const playerInstance = Player.instance;
switch (action) {
case 'exit':
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
UIRenderer.instance.closeFullscreenCover();
}
break;
case 'hide-ui':
@ -835,11 +844,11 @@ document.addEventListener('DOMContentLoaded', async () => {
toggleBtn.title = 'Show UI';
}
}
if (ui && typeof ui.setupUIToggleButton === 'function') {
if (ui.uiToggleCleanup) {
ui.uiToggleCleanup();
if (UIRenderer.instance && typeof UIRenderer.instance.setupUIToggleButton === 'function') {
if (UIRenderer.instance.uiToggleCleanup) {
UIRenderer.instance.uiToggleCleanup();
}
ui.setupUIToggleButton(overlay);
UIRenderer.instance.setupUIToggleButton(overlay);
}
}
break;
@ -858,7 +867,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (window.location.hash === '#fullscreen') {
window.history.back();
} else {
ui.closeFullscreenCover();
UIRenderer.instance.closeFullscreenCover();
}
}
});
@ -1049,7 +1058,7 @@ document.addEventListener('DOMContentLoaded', async () => {
document.getElementById('toggle-lyrics-btn')?.addEventListener('click', async (e) => {
e.stopPropagation();
if (!player.currentTrack) {
if (!Player.instance.currentTrack) {
alert('No track is currently playing');
return;
}
@ -1058,44 +1067,57 @@ document.addEventListener('DOMContentLoaded', async () => {
if (isActive) {
sidePanelManager.close();
clearLyricsPanelSync(player.activeElement, sidePanelManager.panel);
clearLyricsPanelSync(Player.instance.activeElement, sidePanelManager.panel);
} else {
openLyricsPanel(player.currentTrack, player.activeElement, lyricsManager);
openLyricsPanel(Player.instance.currentTrack, Player.instance.activeElement, lyricsManager);
}
});
document.getElementById('download-current-btn')?.addEventListener('click', () => {
if (player.currentTrack) {
handleTrackAction('download', player.currentTrack, player, api, lyricsManager, 'track', ui);
if (Player.instance.currentTrack) {
handleTrackAction(
'download',
Player.instance.currentTrack,
Player.instance,
MusicAPI.instance,
lyricsManager,
'track',
UIRenderer.instance
);
}
});
// Auto-update lyrics when track changes
let previousTrackId = null;
audioPlayer.addEventListener('play', async () => {
if (!player.currentTrack) return;
if (!Player.instance.currentTrack) return;
// Update UI with current track info for theme
ui.setCurrentTrack(player.currentTrack);
UIRenderer.instance.setCurrentTrack(Player.instance.currentTrack);
// Update Media Session with new track
player.updateMediaSession(player.currentTrack);
Player.instance.updateMediaSession(Player.instance.currentTrack);
const currentTrackId = player.currentTrack.id;
const currentTrackId = Player.instance.currentTrack.id;
if (currentTrackId === previousTrackId) return;
previousTrackId = currentTrackId;
// Update lyrics panel if it's open
if (sidePanelManager.isActive('lyrics')) {
// Re-open forces update/refresh of content and sync
openLyricsPanel(player.currentTrack, player.activeElement, lyricsManager, true);
openLyricsPanel(Player.instance.currentTrack, Player.instance.activeElement, lyricsManager, true);
}
// Update Fullscreen if it's open
const fullscreenOverlay = document.getElementById('fullscreen-cover-overlay');
if (fullscreenOverlay && getComputedStyle(fullscreenOverlay).display !== 'none') {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack, lyricsManager, player.activeElement);
const nextTrack = Player.instance.getNextTrack();
UIRenderer.instance.showFullscreenCover(
Player.instance.currentTrack,
nextTrack,
lyricsManager,
Player.instance.activeElement
);
}
// DEV: Auto-open fullscreen mode if ?fullscreen=1 in URL
@ -1105,8 +1127,13 @@ document.addEventListener('DOMContentLoaded', async () => {
fullscreenOverlay &&
getComputedStyle(fullscreenOverlay).display === 'none'
) {
const nextTrack = player.getNextTrack();
ui.showFullscreenCover(player.currentTrack, nextTrack, lyricsManager, player.activeElement);
const nextTrack = Player.instance.getNextTrack();
UIRenderer.instance.showFullscreenCover(
Player.instance.currentTrack,
nextTrack,
lyricsManager,
Player.instance.activeElement
);
}
});
@ -1126,7 +1153,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (!albumId) return;
try {
const { tracks } = await api.getAlbum(albumId);
const { tracks } = await MusicAPI.instance.getAlbum(albumId);
if (tracks && tracks.length > 0) {
// Sort tracks by disc and track number for consistent playback
const sortedTracks = [...tracks].sort((a, b) => {
@ -1136,11 +1163,11 @@ document.addEventListener('DOMContentLoaded', async () => {
return a.trackNumber - b.trackNumber;
});
player.setQueue(sortedTracks, 0);
Player.instance.setQueue(sortedTracks, 0);
const shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn) shuffleBtn.classList.remove('active');
player.shuffleActive = false;
await player.playTrackFromQueue();
Player.instance.shuffleActive = false;
await Player.instance.playTrackFromQueue();
}
} catch (error) {
console.error('Failed to play album:', error);
@ -1164,14 +1191,14 @@ document.addEventListener('DOMContentLoaded', async () => {
if (!albumId) return;
try {
const { tracks } = await api.getAlbum(albumId);
const { tracks } = await MusicAPI.instance.getAlbum(albumId);
if (tracks && tracks.length > 0) {
const shuffledTracks = [...tracks].sort(() => Math.random() - 0.5);
player.setQueue(shuffledTracks, 0);
Player.instance.setQueue(shuffledTracks, 0);
const shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn) shuffleBtn.classList.remove('active');
player.shuffleActive = false;
await player.playTrackFromQueue();
Player.instance.shuffleActive = false;
await Player.instance.playTrackFromQueue();
const { showNotification } = await loadDownloadsModule();
showNotification('Shuffling album');
@ -1194,7 +1221,7 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.innerHTML = `${SVG_ANIMATE_SPIN(18)}<span>Shuffling...</span>`;
try {
const artist = await api.getArtist(artistId);
const artist = await MusicAPI.instance.getArtist(artistId);
const allReleases = [...(artist.albums || []), ...(artist.eps || [])];
const trackSet = new Set();
const allTracks = [];
@ -1206,7 +1233,7 @@ document.addEventListener('DOMContentLoaded', async () => {
await Promise.all(
chunk.map(async (album) => {
try {
const { tracks } = await api.getAlbum(album.id);
const { tracks } = await MusicAPI.instance.getAlbum(album.id);
tracks.forEach((track) => {
if (!trackSet.has(track.id)) {
trackSet.add(track.id);
@ -1235,11 +1262,11 @@ document.addEventListener('DOMContentLoaded', async () => {
}
const shuffledTracks = [...allTracks].sort(() => Math.random() - 0.5);
player.setQueue(shuffledTracks, 0);
Player.instance.setQueue(shuffledTracks, 0);
const shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn) shuffleBtn.classList.remove('active');
player.shuffleActive = false;
await player.playTrackFromQueue();
Player.instance.shuffleActive = false;
await Player.instance.playTrackFromQueue();
const { showNotification } = await loadDownloadsModule();
showNotification('Shuffling artist discography');
@ -1266,9 +1293,15 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.innerHTML = `${SVG_ANIMATE_SPIN(20)}<span>Downloading...</span>`;
try {
const { mix, tracks } = await api.getMix(mixId);
const { mix, tracks } = await MusicAPI.instance.getMix(mixId);
const { downloadPlaylistAsZip } = await loadDownloadsModule();
await downloadPlaylistAsZip(mix, tracks, api, downloadQualitySettings.getQuality(), lyricsManager);
await downloadPlaylistAsZip(
mix,
tracks,
MusicAPI.instance,
downloadQualitySettings.getQuality(),
lyricsManager
);
} catch (error) {
console.error('Mix download failed:', error);
alert('Failed to download mix: ' + error.message);
@ -1305,13 +1338,19 @@ document.addEventListener('DOMContentLoaded', async () => {
playlist = { ...userPlaylist, title: userPlaylist.name || userPlaylist.title };
tracks = userPlaylist.tracks || [];
} else {
const data = await api.getPlaylist(playlistId);
const data = await MusicAPI.instance.getPlaylist(playlistId);
playlist = data.playlist;
tracks = data.tracks;
}
const { downloadPlaylistAsZip } = await loadDownloadsModule();
await downloadPlaylistAsZip(playlist, tracks, api, downloadQualitySettings.getQuality(), lyricsManager);
await downloadPlaylistAsZip(
playlist,
tracks,
MusicAPI.instance,
downloadQualitySettings.getQuality(),
lyricsManager
);
} catch (error) {
console.error('Playlist download failed:', error);
alert('Failed to download playlist: ' + error.message);
@ -1392,7 +1431,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const folder = await db.createFolder(name, cover);
trackCreateFolder(folder);
await syncManager.syncUserFolder(folder, 'create');
ui.renderLibraryPage();
UIRenderer.instance.renderLibraryPage();
document.getElementById('folder-modal').classList.remove('active');
trackCloseModal('Create Folder');
} else {
@ -1454,10 +1493,10 @@ document.addEventListener('DOMContentLoaded', async () => {
await handlePublicStatus(playlist);
await db.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
syncManager.syncUserPlaylist(playlist, 'update');
ui.renderLibraryPage();
UIRenderer.instance.renderLibraryPage();
// Also update current page if we are on it
if (window.location.pathname === `/userplaylist/${editingId}`) {
ui.renderPlaylistPage(editingId, 'user');
UIRenderer.instance.renderPlaylistPage(editingId, 'user');
}
modal.classList.remove('active');
delete modal.dataset.editingId;
@ -1548,7 +1587,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const result = await parseCSV(
csvText,
api,
MusicAPI.instance,
(progress) => {
const percentage = totalTracks > 0 ? (progress.current / totalTracks) * 100 : 0;
progressFill.style.width = `${Math.min(percentage, 100)}%`;
@ -1609,7 +1648,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const jspfText = await file.text();
const result = await parseJSPF(jspfText, api, (progress) => {
const result = await parseJSPF(jspfText, MusicAPI.instance, (progress) => {
const percentage = progress.total > 0 ? (progress.current / progress.total) * 100 : 0;
progressFill.style.width = `${Math.min(percentage, 100)}%`;
progressCurrent.textContent = progress.current.toString();
@ -1697,7 +1736,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const result = await parseDynamicCSV(
csvText,
api,
MusicAPI.instance,
(progress) => {
const percentage = totalItems > 0 ? (progress.current / totalItems) * 100 : 0;
progressFill.style.width = `${Math.min(percentage, 100)}%`;
@ -1808,7 +1847,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const xspfText = await file.text();
const result = await parseXSPF(xspfText, api, (progress) => {
const result = await parseXSPF(xspfText, MusicAPI.instance, (progress) => {
const percentage = progress.total > 0 ? (progress.current / progress.total) * 100 : 0;
progressFill.style.width = `${Math.min(percentage, 100)}%`;
progressCurrent.textContent = progress.current.toString();
@ -1867,7 +1906,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const xmlText = await file.text();
const result = await parseXML(xmlText, api, (progress) => {
const result = await parseXML(xmlText, MusicAPI.instance, (progress) => {
const percentage = progress.total > 0 ? (progress.current / progress.total) * 100 : 0;
progressFill.style.width = `${Math.min(percentage, 100)}%`;
progressCurrent.textContent = progress.current.toString();
@ -1926,7 +1965,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const m3uText = await file.text();
const result = await parseM3U(m3uText, api, (progress) => {
const result = await parseM3U(m3uText, MusicAPI.instance, (progress) => {
const percentage = progress.total > 0 ? (progress.current / progress.total) * 100 : 0;
progressFill.style.width = `${Math.min(percentage, 100)}%`;
progressCurrent.textContent = progress.current.toString();
@ -1980,7 +2019,7 @@ document.addEventListener('DOMContentLoaded', async () => {
await db.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
await syncManager.syncUserPlaylist(playlist, 'create');
trackCreatePlaylist(playlist, importSource);
ui.renderLibraryPage();
UIRenderer.instance.renderLibraryPage();
modal.classList.remove('active');
trackCloseModal('Create Playlist');
});
@ -2058,7 +2097,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (confirm('Are you sure you want to delete this playlist?')) {
db.deletePlaylist(playlistId).then(() => {
syncManager.syncUserPlaylist({ id: playlistId }, 'delete');
ui.renderLibraryPage();
UIRenderer.instance.renderLibraryPage();
});
}
}
@ -2152,7 +2191,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const updatedPlaylist = await db.removeTrackFromPlaylist(playlistId, trackId, trackType);
syncManager.syncUserPlaylist(updatedPlaylist, 'update');
const scrollTop = document.querySelector('.main-content').scrollTop;
await ui.renderPlaylistPage(playlistId, 'user');
await UIRenderer.instance.renderPlaylistPage(playlistId, 'user');
document.querySelector('.main-content').scrollTop = scrollTop;
}
});
@ -2173,7 +2212,7 @@ document.addEventListener('DOMContentLoaded', async () => {
} else {
// Try API, if fail, try Public Pocketbase
try {
const { tracks: apiTracks } = await api.getPlaylist(playlistId);
const { tracks: apiTracks } = await MusicAPI.instance.getPlaylist(playlistId);
tracks = apiTracks;
} catch (e) {
const publicPlaylist = await syncManager.getPublicPlaylist(playlistId);
@ -2185,9 +2224,9 @@ document.addEventListener('DOMContentLoaded', async () => {
}
}
if (tracks.length > 0) {
player.setQueue(tracks, 0);
Player.instance.setQueue(tracks, 0);
document.getElementById('shuffle-btn').classList.remove('active');
await player.playTrackFromQueue();
await Player.instance.playTrackFromQueue();
}
} catch (error) {
console.error('Failed to play playlist:', error);
@ -2207,9 +2246,15 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.innerHTML = `${SVG_ANIMATE_SPIN(20)}<span>Downloading...</span>`;
try {
const { album, tracks } = await api.getAlbum(albumId);
const { album, tracks } = await MusicAPI.instance.getAlbum(albumId);
const { downloadAlbumAsZip } = await loadDownloadsModule();
await downloadAlbumAsZip(album, tracks, api, downloadQualitySettings.getQuality(), lyricsManager);
await downloadAlbumAsZip(
album,
tracks,
MusicAPI.instance,
downloadQualitySettings.getQuality(),
lyricsManager
);
} catch (error) {
console.error('Album download failed:', error);
alert('Failed to download album: ' + error.message);
@ -2227,7 +2272,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (!albumId) return;
try {
const { tracks } = await api.getAlbum(albumId);
const { tracks } = await MusicAPI.instance.getAlbum(albumId);
if (!tracks || tracks.length === 0) {
const { showNotification } = await loadDownloadsModule();
@ -2330,7 +2375,7 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.innerHTML = `${SVG_ANIMATE_SPIN(20)}<span>Loading...</span>`;
try {
const artist = await api.getArtist(artistId);
const artist = await MusicAPI.instance.getArtist(artistId);
const allReleases = [...(artist.albums || []), ...(artist.eps || [])];
if (allReleases.length === 0) {
@ -2352,7 +2397,7 @@ document.addEventListener('DOMContentLoaded', async () => {
await Promise.all(
chunk.map(async (album) => {
try {
const { tracks } = await api.getAlbum(album.id);
const { tracks } = await MusicAPI.instance.getAlbum(album.id);
tracks.forEach((track) => {
if (!trackSet.has(track.id)) {
trackSet.add(track.id);
@ -2372,8 +2417,8 @@ document.addEventListener('DOMContentLoaded', async () => {
[allTracks[i], allTracks[j]] = [allTracks[j], allTracks[i]];
}
player.setQueue(allTracks, 0);
await player.playTrackFromQueue();
Player.instance.setQueue(allTracks, 0);
await Player.instance.playTrackFromQueue();
} else {
throw new Error('No tracks found across all albums');
}
@ -2400,9 +2445,9 @@ document.addEventListener('DOMContentLoaded', async () => {
const j = Math.floor(Math.random() * (i + 1));
[likedTracks[i], likedTracks[j]] = [likedTracks[j], likedTracks[i]];
}
player.setQueue(likedTracks, 0);
Player.instance.setQueue(likedTracks, 0);
document.getElementById('shuffle-btn').classList.remove('active');
await player.playTrackFromQueue();
await Player.instance.playTrackFromQueue();
}
} catch (error) {
console.error('Failed to shuffle liked tracks:', error);
@ -2424,7 +2469,12 @@ document.addEventListener('DOMContentLoaded', async () => {
return;
}
const { downloadLikedTracks } = await loadDownloadsModule();
await downloadLikedTracks(likedTracks, api, downloadQualitySettings.getQuality(), lyricsManager);
await downloadLikedTracks(
likedTracks,
MusicAPI.instance,
downloadQualitySettings.getQuality(),
lyricsManager
);
} catch (error) {
console.error('Liked tracks download failed:', error);
alert('Failed to download liked tracks: ' + error.message);
@ -2442,8 +2492,14 @@ document.addEventListener('DOMContentLoaded', async () => {
if (!artistId) return;
try {
const artist = await api.getArtist(artistId);
showDiscographyDownloadModal(artist, api, downloadQualitySettings.getQuality(), lyricsManager, btn);
const artist = await MusicAPI.instance.getArtist(artistId);
showDiscographyDownloadModal(
artist,
MusicAPI.instance,
downloadQualitySettings.getQuality(),
lyricsManager,
btn
);
} catch (error) {
console.error('Failed to load artist for discography download:', error);
alert('Failed to load artist: ' + error.message);
@ -2486,7 +2542,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const tracks = scanLocalMediaFolder(true);
trackSelectLocalFolder(tracks?.length ?? 0);
ui.renderLibraryPage();
UIRenderer.instance.renderLibraryPage();
} catch (err) {
if (err.name !== 'AbortError') {
console.error('Error selecting folder:', err);
@ -2506,7 +2562,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
ui.setupSearchClearButton(searchInput);
UIRenderer.instance.setupSearchClearButton(searchInput);
const performSearch = (query) => {
if (query) {
@ -2559,16 +2615,16 @@ document.addEventListener('DOMContentLoaded', async () => {
searchInput.addEventListener('change', (e) => {
const query = e.target.value.trim();
if (query) {
ui.addToSearchHistory(query);
UIRenderer.instance.addToSearchHistory(query);
}
});
searchInput.addEventListener('focus', () => {
ui.renderSearchHistory();
UIRenderer.instance.renderSearchHistory();
});
searchInput.addEventListener('click', () => {
ui.renderSearchHistory();
UIRenderer.instance.renderSearchHistory();
});
document.addEventListener('click', (e) => {
@ -2584,7 +2640,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (!query) return;
if (!handleExternalLink(query)) {
ui.addToSearchHistory(query);
UIRenderer.instance.addToSearchHistory(query);
performSearch(query);
const historyEl = document.getElementById('search-history');
if (historyEl) historyEl.style.display = 'none';
@ -2603,14 +2659,14 @@ document.addEventListener('DOMContentLoaded', async () => {
document.querySelector('.now-playing-bar .play-pause-btn').innerHTML = SVG_PLAY(20);
const router = createRouter(ui);
const router = createRouter(UIRenderer.instance);
const handleRouteChange = async (event) => {
const overlay = document.getElementById('fullscreen-cover-overlay');
const isFullscreenOpen = overlay && getComputedStyle(overlay).display === 'flex';
if (isFullscreenOpen && window.location.hash !== '#fullscreen') {
ui.closeFullscreenCover();
UIRenderer.instance.closeFullscreenCover();
}
if (event && event.state && event.state.exitTrap) {
@ -2639,7 +2695,7 @@ document.addEventListener('DOMContentLoaded', async () => {
}
await router();
updateTabTitle(player);
updateTabTitle(Player.instance);
};
await handleRouteChange();
@ -2661,7 +2717,7 @@ document.addEventListener('DOMContentLoaded', async () => {
});
audioPlayer.addEventListener('play', () => {
updateTabTitle(player);
updateTabTitle(Player.instance);
});
// PWA Update Logic
@ -2714,14 +2770,14 @@ document.addEventListener('DOMContentLoaded', async () => {
window.addEventListener('library-changed', () => {
const path = window.location.pathname;
if (path === '/library') {
ui.renderLibraryPage();
UIRenderer.instance.renderLibraryPage();
} else if (path === '/' || path === '/home') {
ui.renderHomePage();
UIRenderer.instance.renderHomePage();
} else if (path.startsWith('/userplaylist/')) {
const playlistId = path.split('/')[2];
const content = document.querySelector('.main-content');
const scroll = content ? content.scrollTop : 0;
ui.renderPlaylistPage(playlistId, 'user').then(() => {
UIRenderer.instance.renderPlaylistPage(playlistId, 'user').then(() => {
if (content) content.scrollTop = scroll;
});
}
@ -2729,7 +2785,7 @@ document.addEventListener('DOMContentLoaded', async () => {
window.addEventListener('history-changed', () => {
const path = window.location.pathname;
if (path === '/recent') {
ui.renderRecentPage();
UIRenderer.instance.renderRecentPage();
}
});

46
js/commandPalette.js
View file

@ -44,6 +44,8 @@ import {
SVG_MIC,
SVG_RADIO,
} from './icons.js';
import { Player } from './player.js';
import { UIRenderer } from './ui.js';
const ICON_SIZE = 16;
@ -214,7 +216,7 @@ class CommandPalette {
keywords: ['play', 'pause', 'toggle', 'resume', 'stop'],
shortcut: 'Space',
action: () => {
window.monochromePlayer?.handlePlayPause();
Player.instance.handlePlayPause();
},
},
{
@ -225,7 +227,7 @@ class CommandPalette {
keywords: ['next', 'skip', 'forward'],
shortcut: 'Shift+\u2192',
action: () => {
window.monochromePlayer?.playNext();
Player.instance.playNext();
},
},
{
@ -236,7 +238,7 @@ class CommandPalette {
keywords: ['previous', 'back', 'rewind'],
shortcut: 'Shift+\u2190',
action: () => {
window.monochromePlayer?.playPrev();
Player.instance.playPrev();
},
},
{
@ -269,7 +271,7 @@ class CommandPalette {
keywords: ['mute', 'unmute', 'sound', 'volume', 'silent'],
shortcut: 'M',
action: () => {
const el = window.monochromePlayer?.activeElement;
const el = Player.instance.activeElement;
if (el) el.muted = !el.muted;
},
},
@ -281,7 +283,7 @@ class CommandPalette {
keywords: ['volume', 'louder'],
shortcut: '\u2191',
action: () => {
const p = window.monochromePlayer;
const p = Player.instance;
if (p) p.setVolume(p.userVolume + 0.1);
},
},
@ -293,7 +295,7 @@ class CommandPalette {
keywords: ['volume', 'quieter', 'softer'],
shortcut: '\u2193',
action: () => {
const p = window.monochromePlayer;
const p = Player.instance;
if (p) p.setVolume(p.userVolume - 0.1);
},
},
@ -337,7 +339,7 @@ class CommandPalette {
label: 'Clear Queue',
keywords: ['wipe', 'clear', 'empty', 'queue'],
action: () => {
window.monochromePlayer?.wipeQueue();
Player.instance.wipeQueue();
this.notify('Queue cleared');
},
},
@ -827,7 +829,7 @@ class CommandPalette {
async searchMusic(query) {
if (!query || query.length < 2) return;
const api = window.monochromeUi?.api;
const api = UIRenderer.instance.api;
if (!api) return;
this.cancelMusicSearch();
@ -856,8 +858,8 @@ class CommandPalette {
label: track.title,
description: `${track.artist?.name || 'Unknown'} \u2022 ${track.album?.title || ''}`,
action: async () => {
window.monochromePlayer.setQueue([track], 0);
await window.monochromePlayer.playTrackFromQueue();
Player.instance.setQueue([track], 0);
await Player.instance.playTrackFromQueue();
},
}));
}
@ -1173,15 +1175,15 @@ class CommandPalette {
const overlay = document.getElementById('fullscreen-cover-overlay');
if (overlay && getComputedStyle(overlay).display !== 'none') {
window.monochromeUi?.closeFullscreenCover();
UIRenderer.instance.closeFullscreenCover();
}
}
async setVisualizerPreset(preset) {
const { visualizerSettings } = await import('./storage.js');
visualizerSettings.setPreset(preset);
if (window.monochromeUi?.visualizer) {
window.monochromeUi.visualizer.setPreset(preset);
if (UIRenderer.instance.visualizer) {
UIRenderer.instance.visualizer.setPreset(preset);
}
this.notify(`Visualizer preset: ${preset}`);
}
@ -1189,8 +1191,8 @@ class CommandPalette {
async setQuality(quality) {
const qualityNames = { LOW: 'Low', HIGH: 'High', LOSSLESS: 'Lossless', HI_RES_LOSSLESS: 'Hi-Res' };
if (window.monochromePlayer) {
window.monochromePlayer.setQuality(quality);
if (Player.instance) {
Player.instance.setQuality(quality);
localStorage.setItem('playback-quality', quality);
const streamingSelect = document.getElementById('streaming-quality-setting');
if (streamingSelect) streamingSelect.value = quality;
@ -1205,15 +1207,15 @@ class CommandPalette {
}
setSleepTimer(minutes) {
if (window.monochromePlayer) {
window.monochromePlayer.setSleepTimer(minutes);
if (Player.instance) {
Player.instance.setSleepTimer(minutes);
this.notify(`Sleep timer: ${minutes} minutes`);
}
}
async likeAllInQueue() {
const player = window.monochromePlayer;
const ui = window.monochromeUi;
const player = Player.instance;
const ui = UIRenderer.instance;
if (!player || !ui) return;
const queue = player.getCurrentQueue();
@ -1238,8 +1240,8 @@ class CommandPalette {
}
async downloadQueue() {
const player = window.monochromePlayer;
const ui = window.monochromeUi;
const player = Player.instance;
const ui = UIRenderer.instance;
if (!player || !ui) return;
const queue = player.getCurrentQueue();
@ -1268,7 +1270,7 @@ class CommandPalette {
}
async clearCache() {
const api = window.monochromeUi?.api;
const api = UIRenderer.instance.api;
if (api) {
await api.clearCache();
this.notify('Cache cleared');

17
js/lyrics.js
View file

@ -151,6 +151,16 @@ class GeniusManager {
}
export class LyricsManager {
static #instance = null;
static get instance() {
if (!LyricsManager.#instance) {
throw new Error('LyricsManager is not initialized. Call LyricsManager.initialize() first.');
}
return LyricsManager.#instance;
}
/** @private */
constructor(api) {
this.api = api;
this.currentLyrics = null;
@ -174,6 +184,13 @@ export class LyricsManager {
this.timingOffset = 0; // Offset in milliseconds (positive = delay lyrics, negative = advance lyrics)
}
static async initialize(api) {
if (LyricsManager.#instance) {
throw new Error('LyricsManager is already initialized');
}
return (LyricsManager.#instance = new LyricsManager(api));
}
// Get timing offset for current track
getTimingOffset(trackId) {
try {

4
js/metadata.js
View file

@ -1,7 +1,7 @@
import { getCoverBlob, getTrackTitle, getFullArtistString, getMimeType, getTrackCoverId } from './utils.js';
import { addMetadataWithTagLib, getMetadataWithTagLib } from './taglib.ts';
import { doTimed, doTimedAsync } from './doTimed.ts';
import { managers } from './app.js';
import { LyricsManager } from './lyrics.js';
export function prefetchMetadataObjects(track, api, coverBlob = null) {
const coverId = getTrackCoverId(track);
@ -10,7 +10,7 @@ export function prefetchMetadataObjects(track, api, coverBlob = null) {
: coverId
? getCoverBlob(api, coverId).catch(console.error)
: Promise.resolve(null);
const lyricsFetch = managers?.lyricsManager?.fetchLyrics?.(track.id, track)?.catch(console.error);
const lyricsFetch = LyricsManager.initialize.fetchLyrics?.(track.id, track)?.catch(console.error);
return { coverFetch, lyricsFetch };
}

18
js/music-api.js
View file

@ -6,6 +6,15 @@ import { QobuzAPI } from './qobuz-api.js';
import { musicProviderSettings } from './storage.js';
export class MusicAPI {
static #instance = null;
static get instance() {
if (!MusicAPI.#instance) {
throw new Error('MusicAPI not initialized. Call MusicAPI.initialize(settings) first.');
}
return MusicAPI.#instance;
}
/** @private */
constructor(settings) {
this.tidalAPI = new LosslessAPI(settings);
this.qobuzAPI = new QobuzAPI();
@ -13,6 +22,15 @@ export class MusicAPI {
this.videoArtworkCache = new Map();
}
static async initialize(settings) {
if (MusicAPI.#instance) {
throw new Error('MusicAPI is already initialized');
}
const api = new MusicAPI(settings);
return (MusicAPI.#instance = api);
}
getCurrentProvider() {
return musicProviderSettings.getProvider();
}

33
js/player.js
View file

@ -23,7 +23,19 @@ import { db } from './db.js';
import('./dash-media-player.js');
import { SVG_CLOCK } from './icons.js';
import { UIRenderer } from './ui.js';
export class Player {
static #instance = null;
static get instance() {
if (!Player.#instance) {
throw new Error('Player is not initialized. Call Player.initialize(audioElement, api) first.');
}
return Player.#instance;
}
/** @private */
constructor(audioElement, api, quality = 'HI_RES_LOSSLESS') {
this.audio = audioElement;
this.video = document.getElementById('video-player');
@ -63,6 +75,17 @@ export class Player {
};
}
static async initialize(audioElement, api, quality) {
if (Player.#instance) {
throw new Error('Player is already initialized');
}
const player = new Player(audioElement, api, quality);
await player.init();
Player.#instance = player;
return player;
}
async init() {
// Apply audio effects when track is ready
this.audio.addEventListener('canplay', () => {
@ -825,12 +848,12 @@ export class Player {
const played = await this.safePlay(activeElement);
if (!played) return;
} else if (track.type === 'video') {
if (window.monochromeUi) {
if (UIRenderer.instance) {
const isInFullscreen =
document.getElementById('fullscreen-cover-overlay')?.style.display === 'flex';
if (!isInFullscreen) {
const lyricsManager = window.monochromeUi.lyricsManager;
window.monochromeUi.showFullscreenCover(
const lyricsManager = UIRenderer.instance.lyricsManager;
UIRenderer.instance.showFullscreenCover(
track,
this.getNextTrack(),
lyricsManager,
@ -1483,8 +1506,8 @@ export class Player {
this.originalQueueBeforeShuffle = [];
this.currentQueueIndex = -1;
this.saveQueueState();
if (window.monochromeUi) {
window.monochromeUi.setCurrentTrack(null);
if (UIRenderer.instance) {
UIRenderer.instance.setCurrentTrack(null);
}
if (window.renderQueueFunction) {
window.renderQueueFunction();

7
js/profile.js
View file

@ -4,6 +4,7 @@ import { navigate } from './router.js';
import { MusicAPI } from './music-api.js';
import { apiSettings } from './storage.js';
import { debounce, escapeHtml } from './utils.js';
import { Player } from './player.js';
// objects execution february 29th 2027
@ -826,9 +827,9 @@ async function handleTrackClick(title, artist) {
const results = await api.searchTracks(query, { limit: 1 });
if (results.items.length > 0) {
const track = results.items[0];
if (window.monochromePlayer) {
window.monochromePlayer.setQueue([track], 0);
window.monochromePlayer.playTrackFromQueue();
if (Player.instance) {
Player.instance.setQueue([track], 0);
Player.instance.playTrackFromQueue();
}
} else {
alert('Track not found');

41
js/tracker.js
View file

@ -2,10 +2,10 @@
import { escapeHtml, trackDataStore, formatTime } from './utils.js';
import { navigate } from './router.js';
import { SVG_MENU, SVG_PLAY, SVG_HEART } from './icons.js';
import { Player } from './player.js';
let artistsData = [];
let artistsPopularity = new Map(); // name -> popularity score
let globalPlayer = null;
// Map to store artist info keyed by sheetId for quick lookup
const artistBySheetId = new Map();
@ -372,8 +372,8 @@ export async function renderTrackerArtistPage(sheetId, container) {
const availableTracks = allTracks.filter((t) => !t.unavailable);
if (availableTracks.length > 0) {
const shuffled = [...availableTracks].sort(() => Math.random() - 0.5);
globalPlayer.setQueue(shuffled, 0);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(shuffled, 0);
Player.instance.playTrackFromQueue();
}
};
}
@ -450,8 +450,8 @@ export async function renderTrackerArtistPage(sheetId, container) {
}
const availableTracks = eraTracks.filter((t) => !t.unavailable);
if (availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, 0);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(availableTracks, 0);
Player.instance.playTrackFromQueue();
}
} else if (e.target.closest('.card-menu-btn')) {
e.stopPropagation();
@ -521,8 +521,8 @@ export async function renderTrackerArtistPage(sheetId, container) {
const availableTracks = searchTracks.filter((t) => !t.unavailable);
const trackIndex = availableTracks.findIndex((t) => t.id === track.id);
if (trackIndex >= 0 && availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, trackIndex);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(availableTracks, trackIndex);
Player.instance.playTrackFromQueue();
}
};
});
@ -601,8 +601,8 @@ export async function renderTrackerProjectPage(sheetId, projectName, container,
playBtn.onclick = () => {
const availableTracks = eraTracks.filter((t) => !t.unavailable);
if (availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, 0);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(availableTracks, 0);
Player.instance.playTrackFromQueue();
}
};
}
@ -612,8 +612,8 @@ export async function renderTrackerProjectPage(sheetId, projectName, container,
const availableTracks = eraTracks.filter((t) => !t.unavailable);
if (availableTracks.length > 0) {
const shuffled = [...availableTracks].sort(() => Math.random() - 0.5);
globalPlayer.setQueue(shuffled, 0);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(shuffled, 0);
Player.instance.playTrackFromQueue();
}
};
}
@ -643,8 +643,8 @@ export async function renderTrackerProjectPage(sheetId, projectName, container,
const availableTracks = eraTracks.filter((t) => !t.unavailable);
const trackIndex = availableTracks.findIndex((t) => t.id === track.id);
if (trackIndex >= 0 && availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, trackIndex);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(availableTracks, trackIndex);
Player.instance.playTrackFromQueue();
}
};
});
@ -702,8 +702,8 @@ export async function renderTrackerProjectPage(sheetId, projectName, container,
}
const availableTracks = otherEraTracks.filter((t) => !t.unavailable);
if (availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, 0);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(availableTracks, 0);
Player.instance.playTrackFromQueue();
}
} else if (e.target.closest('.card-menu-btn')) {
e.stopPropagation();
@ -907,8 +907,8 @@ export async function renderTrackerTrackPage(trackId, container, _ui) {
const availableTracks = allTracks.filter((t) => !t.unavailable);
const trackPos = availableTracks.findIndex((t) => t.id === currentTrack.id);
if (trackPos >= 0 && availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, trackPos);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(availableTracks, trackPos);
Player.instance.playTrackFromQueue();
}
};
}
@ -938,8 +938,8 @@ export async function renderTrackerTrackPage(trackId, container, _ui) {
const availableTracks = allTracks.filter((t) => !t.unavailable);
const trackPos = availableTracks.findIndex((t) => t.id === currentTrack.id);
if (trackPos >= 0 && availableTracks.length > 0) {
globalPlayer.setQueue(availableTracks, trackPos);
globalPlayer.playTrackFromQueue();
Player.instance.setQueue(availableTracks, trackPos);
Player.instance.playTrackFromQueue();
}
};
}
@ -982,8 +982,7 @@ export async function renderTrackerTrackPage(trackId, container, _ui) {
document.title = `${currentTrack.title} - ${artist.name}`;
}
export async function initTracker(player) {
globalPlayer = player;
export async function initTracker() {
await Promise.all([loadArtistsPopularity(), loadArtistsData()]);
}

17
js/ui.js
View file

@ -117,6 +117,16 @@ function sortTracks(tracks, sortType) {
}
export class UIRenderer {
static #instance = null;
static get instance() {
if (!UIRenderer.#instance) {
throw new Error('UIRenderer is not initialized. Call UIRenderer.initialize(api, player) first.');
}
return UIRenderer.#instance;
}
/** @private */
constructor(api, player) {
this.api = api;
this.player = player;
@ -145,6 +155,13 @@ export class UIRenderer {
});
}
static async initialize(api, player) {
if (UIRenderer.#instance) {
throw new Error('UIRenderer is already initialized');
}
return (UIRenderer.#instance = new UIRenderer(api, player));
}
// Helper for Heart Icon
createHeartIcon(filled = false) {
if (filled) {