diff --git a/js/settings.js b/js/settings.js
index 7a36c9f..0079f6a 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -1,5 +1,5 @@
//js/settings
-import { themeManager, lastFMStorage, nowPlayingSettings, lyricsSettings, backgroundSettings, trackListSettings } from './storage.js';
+import { themeManager, lastFMStorage, nowPlayingSettings, lyricsSettings, backgroundSettings, trackListSettings, cardSettings } from './storage.js';
import { db } from './db.js';
import { authManager } from './firebase/auth.js';
import { syncManager } from './firebase/sync.js';
@@ -266,6 +266,24 @@ export function initializeSettings(scrobbler, player, api, ui) {
});
}
+ // Compact Artist Toggle
+ const compactArtistToggle = document.getElementById('compact-artist-toggle');
+ if (compactArtistToggle) {
+ compactArtistToggle.checked = cardSettings.isCompactArtist();
+ compactArtistToggle.addEventListener('change', (e) => {
+ cardSettings.setCompactArtist(e.target.checked);
+ });
+ }
+
+ // Compact Album Toggle
+ const compactAlbumToggle = document.getElementById('compact-album-toggle');
+ if (compactAlbumToggle) {
+ compactAlbumToggle.checked = cardSettings.isCompactAlbum();
+ compactAlbumToggle.addEventListener('change', (e) => {
+ cardSettings.setCompactAlbum(e.target.checked);
+ });
+ }
+
// Download Lyrics Toggle
const downloadLyricsToggle = document.getElementById('download-lyrics-toggle');
if (downloadLyricsToggle) {
diff --git a/js/storage.js b/js/storage.js
index 098d564..67426ab 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -446,6 +446,36 @@ export const trackListSettings = {
}
};
+export const cardSettings = {
+ COMPACT_ARTIST_KEY: 'card-compact-artist',
+ COMPACT_ALBUM_KEY: 'card-compact-album',
+
+ isCompactArtist() {
+ try {
+ const val = localStorage.getItem(this.COMPACT_ARTIST_KEY);
+ return val === null ? true : val === 'true';
+ } catch (e) {
+ return true;
+ }
+ },
+
+ setCompactArtist(enabled) {
+ localStorage.setItem(this.COMPACT_ARTIST_KEY, enabled ? 'true' : 'false');
+ },
+
+ isCompactAlbum() {
+ try {
+ return localStorage.getItem(this.COMPACT_ALBUM_KEY) === 'true';
+ } catch (e) {
+ return false;
+ }
+ },
+
+ setCompactAlbum(enabled) {
+ localStorage.setItem(this.COMPACT_ALBUM_KEY, enabled ? 'true' : 'false');
+ }
+};
+
export const queueManager = {
STORAGE_KEY: 'monochrome-queue',
diff --git a/js/ui.js b/js/ui.js
index 71d4d1c..7d163a3 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,7 +1,7 @@
//js/ui.js
import { SVG_PLAY, SVG_DOWNLOAD, SVG_MENU, SVG_HEART, formatTime, createPlaceholder, trackDataStore, hasExplicitContent, getTrackArtists, getTrackTitle, calculateTotalDuration, formatDuration } from './utils.js';
import { openLyricsPanel } from './lyrics.js';
-import { recentActivityManager, backgroundSettings, trackListSettings } from './storage.js';
+import { recentActivityManager, backgroundSettings, trackListSettings, cardSettings } from './storage.js';
import { db } from './db.js';
import { getVibrantColorFromImage } from './vibrant-color.js';
@@ -190,8 +190,9 @@ export class UIRenderer {
createPlaylistCardHTML(playlist) {
const imageId = playlist.squareImage || playlist.image || playlist.uuid; // Fallback or use a specific cover getter if needed
+ const isCompact = cardSettings.isCompactAlbum();
return `
-
+
})
-
${playlist.title}
-
${playlist.numberOfTracks || 0} tracks
+
+
${playlist.title}
+
${playlist.numberOfTracks || 0} tracks
+
`;
}
@@ -210,9 +213,10 @@ export class UIRenderer {
createMixCardHTML(mix) {
const imageSrc = mix.cover || 'assets/appicon.png';
const description = mix.subTitle || mix.description || '';
+ const isCompact = cardSettings.isCompactAlbum();
return `
-
+
-
${mix.title}
-
${description}
+
+
${mix.title}
+
${description}
+
`;
}
@@ -266,8 +272,10 @@ export class UIRenderer {
}
}
+ const isCompact = cardSettings.isCompactAlbum();
+
return `
-
+
${imageHTML}
-
${playlist.name}
-
${playlist.tracks ? playlist.tracks.length : (playlist.numberOfTracks || 0)} tracks
+
+
${playlist.name}
+
${playlist.tracks ? playlist.tracks.length : (playlist.numberOfTracks || 0)} tracks
+
`;
}
@@ -312,8 +322,10 @@ export class UIRenderer {
typeLabel = ' • Single';
}
+ const isCompact = cardSettings.isCompactAlbum();
+
return `
-
+
})
-
${album.title} ${explicitBadge}
-
${album.artist?.name ?? ''}
-
${yearDisplay}${typeLabel}
+
+
${album.title} ${explicitBadge}
+
${album.artist?.name ?? ''}
+
${yearDisplay}${typeLabel}
+
`;
}
createArtistCardHTML(artist) {
+ const isCompact = cardSettings.isCompactArtist();
return `
-
+
})