@@ -138,9 +138,9 @@
![]()
-
Album
+
- })
` : '';
- const trackNumberHTML = `
Black
+ System
+ Light
Dark
+ Black
Ocean
Purple
Forest
diff --git a/js/api.js b/js/api.js
index 7b78883..aa1a2c0 100644
--- a/js/api.js
+++ b/js/api.js
@@ -324,6 +324,20 @@ export class LosslessAPI {
}
}
+ // If album exists but has no releaseDate, try to extract from tracks
+ if (album && !album.releaseDate && tracksSection?.items && tracksSection.items.length > 0) {
+ const firstTrack = tracksSection.items[0];
+ const track = firstTrack.item || firstTrack;
+
+ if (track) {
+ if (track.album && track.album.releaseDate) {
+ album = { ...album, releaseDate: track.album.releaseDate };
+ } else if (track.streamStartDate) {
+ album = { ...album, releaseDate: track.streamStartDate.split('T')[0] };
+ }
+ }
+ }
+
const tracks = (tracksSection?.items || []).map(i => this.prepareTrack(i.item || i));
const result = { album, tracks };
diff --git a/js/downloads.js b/js/downloads.js
index 9774f85..ffea632 100644
--- a/js/downloads.js
+++ b/js/downloads.js
@@ -207,10 +207,13 @@ export async function downloadAlbumAsZip(album, tracks, api, quality, lyricsMana
const zip = new JSZip();
const template = localStorage.getItem('zip-folder-template') || '{albumTitle} - {albumArtist} - monochrome.tf';
+ const releaseDate = album.releaseDate ? new Date(album.releaseDate) : null;
+ const year = (releaseDate && !isNaN(releaseDate.getTime())) ? releaseDate.getFullYear() : '';
+
const folderName = formatTemplate(template, {
albumTitle: album.title,
albumArtist: album.artist?.name,
- year: new Date(album.releaseDate).getFullYear()
+ year: year
});
const notification = createBulkDownloadNotification('album', album.title, tracks.length);
@@ -380,10 +383,13 @@ export async function downloadDiscography(artist, api, quality, lyricsManager =
try {
const { album: fullAlbum, tracks } = await api.getAlbum(album.id);
+ const releaseDate = fullAlbum.releaseDate ? new Date(fullAlbum.releaseDate) : null;
+ const year = (releaseDate && !isNaN(releaseDate.getTime())) ? releaseDate.getFullYear() : '';
+
const albumFolder = formatTemplate(template, {
albumTitle: fullAlbum.title,
albumArtist: fullAlbum.artist?.name,
- year: new Date(fullAlbum.releaseDate).getFullYear()
+ year: year
});
for (const track of tracks) {
diff --git a/js/events.js b/js/events.js
index 39c239b..209f0d4 100644
--- a/js/events.js
+++ b/js/events.js
@@ -275,9 +275,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
contextTrack = trackDataStore.get(trackItem);
if (contextTrack) {
const rect = menuBtn.getBoundingClientRect();
- contextMenu.style.top = `${rect.bottom + 5}px`;
- contextMenu.style.left = `${rect.left}px`;
- contextMenu.style.display = 'block';
+ positionMenu(contextMenu, rect.left, rect.bottom + 5, rect);
}
}
return;
@@ -307,9 +305,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
contextTrack = trackDataStore.get(trackItem);
if (contextTrack) {
- contextMenu.style.top = `${e.pageY}px`;
- contextMenu.style.left = `${e.pageX}px`;
- contextMenu.style.display = 'block';
+ positionMenu(contextMenu, e.pageX, e.pageY);
}
}
});
@@ -387,3 +383,42 @@ function formatTime(seconds) {
const s = Math.floor(seconds % 60);
return `${m}:${String(s).padStart(2, '0')}`;
}
+
+function positionMenu(menu, x, y, anchorRect = null) {
+ // Temporarily show to measure dimensions
+ menu.style.visibility = 'hidden';
+ menu.style.display = 'block';
+
+ const menuWidth = menu.offsetWidth;
+ const menuHeight = menu.offsetHeight;
+ const windowWidth = window.innerWidth;
+ const windowHeight = window.innerHeight;
+
+ let left = x;
+ let top = y;
+
+ if (anchorRect) {
+ // Adjust horizontal position if it overflows right
+ if (left + menuWidth > windowWidth - 10) { // 10px buffer
+ left = anchorRect.right - menuWidth;
+ if (left < 10) left = 10;
+ }
+ // Adjust vertical position if it overflows bottom
+ if (top + menuHeight > windowHeight - 10) {
+ top = anchorRect.top - menuHeight - 5;
+ }
+ } else {
+ // Adjust horizontal position if it overflows right
+ if (left + menuWidth > windowWidth - 10) {
+ left = windowWidth - menuWidth - 10;
+ }
+ // Adjust vertical position if it overflows bottom
+ if (top + menuHeight > windowHeight - 10) {
+ top = y - menuHeight;
+ }
+ }
+
+ menu.style.top = `${top}px`;
+ menu.style.left = `${left}px`;
+ menu.style.visibility = 'visible';
+}
diff --git a/js/storage.js b/js/storage.js
index 20ef4d2..58660e4 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -229,8 +229,9 @@ export const themeManager = {
CUSTOM_THEME_KEY: 'monochrome-custom-theme',
defaultThemes: {
- monochrome: {},
+ light: {},
dark: {},
+ monochrome: {},
ocean: {},
purple: {},
forest: {}
@@ -238,15 +239,21 @@ export const themeManager = {
getTheme() {
try {
- return localStorage.getItem(this.STORAGE_KEY) || 'monochrome';
+ return localStorage.getItem(this.STORAGE_KEY) || 'system';
} catch (e) {
- return 'monochrome';
+ return 'system';
}
},
setTheme(theme) {
localStorage.setItem(this.STORAGE_KEY, theme);
- document.documentElement.setAttribute('data-theme', theme);
+
+ if (theme === 'system') {
+ const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+ } else {
+ document.documentElement.setAttribute('data-theme', theme);
+ }
},
getCustomTheme() {
@@ -318,3 +325,12 @@ export const lyricsSettings = {
localStorage.setItem(this.DOWNLOAD_WITH_TRACKS, enabled ? 'true' : 'false');
}
};
+
+// System theme listener
+if (typeof window !== 'undefined' && window.matchMedia) {
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+ if (themeManager.getTheme() === 'system') {
+ document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
+ }
+ });
+}
diff --git a/js/ui.js b/js/ui.js
index 7b72122..d3474cf 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -23,14 +23,41 @@ export class UIRenderer {
`;
}
- createTrackItemHTML(track, index, showCover = false) {
+ adjustTitleFontSize(element, text) {
+ element.classList.remove('long-title', 'very-long-title');
+ if (text.length > 40) {
+ element.classList.add('very-long-title');
+ } else if (text.length > 25) {
+ element.classList.add('long-title');
+ }
+ }
+
+ createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) {
const playIconSmall = '';
const trackImageHTML = showCover ? `${showCover ? trackImageHTML : index + 1}
`;
+
+ let displayIndex;
+ if (hasMultipleDiscs && !showCover) {
+ const discNum = track.volumeNumber ?? track.discNumber ?? 1;
+ displayIndex = `${discNum}-${track.trackNumber}`;
+ } else {
+ displayIndex = index + 1;
+ }
+
+ const trackNumberHTML = `${showCover ? trackImageHTML : displayIndex}
`;
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
const trackArtists = getTrackArtists(track);
const trackTitle = getTrackTitle(track);
+ let yearDisplay = '';
+ const releaseDate = track.album?.releaseDate || track.streamStartDate;
+ if (releaseDate) {
+ const date = new Date(releaseDate);
+ if (!isNaN(date.getTime())) {
+ yearDisplay = ` • ${date.getFullYear()}`;
+ }
+ }
+
return `
${trackNumberHTML}
@@ -40,7 +67,7 @@ export class UIRenderer {
${trackTitle}
${explicitBadge}
- ${trackArtists}
+ ${trackArtists}${yearDisplay}
${formatTime(track.duration)}
@@ -57,13 +84,21 @@ export class UIRenderer {
createAlbumCardHTML(album) {
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
+ let yearDisplay = '';
+ if (album.releaseDate) {
+ const date = new Date(album.releaseDate);
+ if (!isNaN(date.getTime())) {
+ yearDisplay = `${date.getFullYear()}`;
+ }
+ }
return `
${album.title} ${explicitBadge}
-Album • ${album.artist?.name ?? ''}
+${album.artist?.name ?? ''}
+${yearDisplay}
`; } @@ -75,7 +110,6 @@ export class UIRenderer {