From 901d001075ba293d3e97f6736c0eee9471fa598d Mon Sep 17 00:00:00 2001 From: Eduard Prigoana Date: Sun, 8 Feb 2026 19:39:43 +0000 Subject: [PATCH 1/3] Clicking on the album in the player bar navigates to the album page and todo list --- index.html | 2 +- js/events.js | 7 +++++++ styles.css | 6 ++++++ todo.md | 24 ++++++++++++++++++++++++ 4 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 todo.md diff --git a/index.html b/index.html index 9379a9c..1118a56 100644 --- a/index.html +++ b/index.html @@ -2913,7 +2913,7 @@ Choose what shows when you click the album art diff --git a/js/events.js b/js/events.js index 5850e4c..9d46e89 100644 --- a/js/events.js +++ b/js/events.js @@ -1521,6 +1521,13 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen } }); + document.querySelector('.now-playing-bar .album').addEventListener('click', () => { + const track = player.currentTrack; + if (track?.album?.id) { + navigate(`/album/${track.album.id}`); + } + }); + document.querySelector('.now-playing-bar .artist').addEventListener('click', (e) => { const link = e.target.closest('.artist-link'); if (link) { diff --git a/styles.css b/styles.css index 4be47ee..bbe666f 100644 --- a/styles.css +++ b/styles.css @@ -1881,6 +1881,12 @@ input:checked + .slider::before { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + cursor: pointer; + transition: color var(--transition); +} + +.track-info .details .album:hover { + color: var(--highlight); } .track-info .details .artist { diff --git a/todo.md b/todo.md new file mode 100644 index 0000000..de59d21 --- /dev/null +++ b/todo.md @@ -0,0 +1,24 @@ +# Feature Requests + +Sorted by ease of implementation (easiest to hardest): + +- [x] Album click navigation: Clicking on the album in the player bar navigates to the album page (default behavior - can be changed in settings) +- [ ] Fix button overlap: Next track and casting buttons overlap on some screen resolutions +- [ ] Reduce API calls: Minimize unnecessary API calls throughout the app +- [ ] Editor's Picks: Create a JSON file of curated album IDs with metadata for the home screen. Include an option to disable in settings to avoid extra API calls. + +- [ ] Update notifications: Add ability to show the update popup in settings, with an option to automatically update (enabled by default) +- [ ] Volume curve option: Add setting to switch between exponential and linear volume scaling +- [ ] Custom fonts: Allow users to change fonts in settings or add custom fonts from Google Fonts or direct links + +- [ ] Audio effects: Add ability to change pitch and playback speed, plus effects like reverb, delay, and bitcrushing +- [ ] Customizable EQ: Allow users to change the number of EQ bands and their range (-30 to 30), with a drag-to-adjust interface similar to FL Studio's velocity editor + +[ ] SoundCloud support: Integrate SoundCloud through SoundCloak +[ ] Qobuz support: Integrate Qobuz through Qobuz-DL + +--- + +## Bug Fixes + +- [ ] Next track and casting buttons overlap on some resolutions From c3b88da0542ee8d331b240bfb1a247f3e096e719 Mon Sep 17 00:00:00 2001 From: Samidy Date: Sun, 8 Feb 2026 22:50:41 +0300 Subject: [PATCH 2/3] feat(UI): Font Selection --- index.html | 16 ++++++++++++++++ js/app.js | 14 ++++++++++++++ js/ui.js | 2 ++ styles.css | 2 +- 4 files changed, 33 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9379a9c..5d25713 100644 --- a/index.html +++ b/index.html @@ -2087,6 +2087,22 @@ +
+
+ Font + Choose the application font +
+ +
Waveform Seekbar diff --git a/js/app.js b/js/app.js index 58e975d..ae561cb 100644 --- a/js/app.js +++ b/js/app.js @@ -1432,6 +1432,20 @@ document.addEventListener('DOMContentLoaded', async () => { showKeyboardShortcuts(); }); + // Font Settings + const fontSelect = document.getElementById('font-select'); + if (fontSelect) { + const savedFont = localStorage.getItem('monochrome-font'); + if (savedFont) { + fontSelect.value = savedFont; + } + fontSelect.addEventListener('change', (e) => { + const font = e.target.value; + document.documentElement.style.setProperty('--font-family', font); + localStorage.setItem('monochrome-font', font); + }); + } + // Listener for Pocketbase Sync updates window.addEventListener('library-changed', () => { const path = window.location.pathname; diff --git a/js/ui.js b/js/ui.js index 8f97063..3336680 100644 --- a/js/ui.js +++ b/js/ui.js @@ -42,6 +42,8 @@ import { createProjectCardHTML, createTrackFromSong, } from './tracker.js'; +const savedFont = localStorage.getItem('monochrome-font'); +if (savedFont) document.documentElement.style.setProperty('--font-family', savedFont); function sortTracks(tracks, sortType) { if (sortType === 'custom') return [...tracks]; diff --git a/styles.css b/styles.css index 4be47ee..0056733 100644 --- a/styles.css +++ b/styles.css @@ -280,7 +280,7 @@ html { body { background-color: var(--background); color: var(--foreground); - font-family: Inter, sans-serif; + font-family: var(--font-family, 'Inter', sans-serif); overflow: hidden; transition: background-color 0.3s ease, From d21680ee2c7eefcea6e651367d1e97c375551dbb Mon Sep 17 00:00:00 2001 From: SamidyFR <168582143+SamidyFR@users.noreply.github.com> Date: Sun, 8 Feb 2026 19:51:03 +0000 Subject: [PATCH 3/3] style: auto-fix linting issues --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b2a0eef..9bcd855 100644 --- a/index.html +++ b/index.html @@ -2099,7 +2099,11 @@ - +