From 249c5d3f974b1b9e8c89eff8c6eab79a10cd7605 Mon Sep 17 00:00:00 2001 From: BlackSigkill Date: Tue, 3 Feb 2026 22:21:34 +0100 Subject: [PATCH 1/2] Create tabs/sections in settings panel --- index.html | 1604 +++++++++++++++++++++-------------------- js/ui-interactions.js | 13 + styles.css | 49 ++ 3 files changed, 894 insertions(+), 772 deletions(-) diff --git a/index.html b/index.html index cbd187f..ed4421a 100644 --- a/index.html +++ b/index.html @@ -1915,783 +1915,843 @@

Settings

-
-
-
-
- Theme - Choose your preferred color scheme -
-
-
-
System
-
Light
-
Dark
-
Black
-
Ocean
-
Purple
-
Forest
-
Mocha
-
Machiatto
-
Frappé
-
Latte
-
Custom
-
-
-

Custom Theme

-
-
- - -
-
-
-
- Waveform Seekbar - Show a visual waveform of the track in the progress bar (Experimental) -
- -
-
-
- Smooth Scrolling - Provides a smoother scrolling experience with Lenis (Experimental) -
- -
-
-
- Album Cover Background - Use the album cover as a blurred background on album pages and as primary - color -
- -
-
-
- Full-screen Visualizer - Enable particle visualizer in full-screen mode -
- -
-
-
- Visualizer Style - Select the visualization style -
- -
-
-
- Visualizer Mode - Choose how the visualizer is displayed in full-screen -
- -
-
-
- Smart Intensity Switching - Automatically adjust visualizer intensity based on song energy -
- -
-
-
- Visualizer Sensitivity - Adjust the intensity of the visualizer effects. - Warning: High sensitivity may cause flashing lights and rapid motion, which - can trigger seizures in people with photosensitive epilepsy. -
-
- - 60% -
-
-
- -
-
-
- ListenBrainz Scrobbling - Submit listens to ListenBrainz (requires User Token) -
- -
- -
- -
-
-
- Last.fm Scrobbling - Connect your Last.fm account to scrobble tracks -
-
- -
-
- - - - -
- -
-
-
- Streaming Quality - Quality for streaming playback -
- -
-
-
- Download Quality - Quality for track downloads -
- -
-
-
- Cover Art Size - Size for downloaded/embedded cover art -
- -
-
-
- Show Quality Badges - Display "HD" badge for Hi-Res tracks -
- -
-
-
- Gapless Playback - Play audio without interruption between tracks -
- -
-
-
- ReplayGain Mode - Normalize volume across tracks -
- -
-
-
- ReplayGain Pre-Amp - Adjust gain manually (dB) -
- -
- - -
-
- Equalizer - 16-band parametric equalizer for fine audio control -
- -
- - -
- -
-
-
- Now Playing View Mode - Choose what shows when you click the album art -
- -
- -
-
- Compact Artists - Show artist cards in a compact, horizontal layout -
- -
-
-
- Compact Albums - Show album cards in a compact, horizontal layout -
- -
-
- -
-
-
- Zipped Bulk Downloads - Download multiple tracks as a single ZIP file (requires browser support) -
- -
-
-
- Download Lyrics - Include .lrc files when downloading tracks/albums -
- -
-
-
- Romaji Lyrics - Convert Japanese lyrics to Romaji (Latin characters) -
- -
-
-
- Filename Template - Customize download filenames. Available: {trackNumber}, {artist}, {title}, - {album} -
- -
-
-
- ZIP Folder Template - Customize album folder names. Available: {albumTitle}, {albumArtist}, - {year} -
- -
-
-
- Generate M3U - Include M3U playlist files in downloads -
- -
-
-
- Generate M3U8 - Include extended M3U8 playlist files in downloads -
- -
-
-
- Generate CUE - Include CUE sheets for gapless playback in downloads -
- -
-
-
- Generate NFO - Include NFO files for media center compatibility -
- -
-
-
- Generate JSON - Include JSON files with rich metadata -
- -
-
-
- Relative Paths - Use relative paths in playlist files -
- -
-
- -
-
-
- Keyboard Shortcuts - View available keyboard shortcuts -
- -
- -
-
- Cache - Stores API responses to reduce requests -
- -
-
-
- Backup & Restore - Export or import your library and history as JSON -
-
- - - -
-
-
-
- ADVANCED: Custom Database/Auth - Configure custom PocketBase and Firebase instances -
- -
-
-
+
+ + + + + + +
+
+
+
+
- API Instances + Theme + Choose your preferred color scheme +
+
+
+
System
+
Light
+
Dark
+
Black
+
Ocean
+
Purple
+
Forest
+
Mocha
+
Machiatto
+
Frappé
+
Latte
+
Custom
+
+
+

Custom Theme

+
+
+ + +
+
+
+
+ Waveform Seekbar Manage and prioritize API instances. Automatically sorted by speed.Show a visual waveform of the track in the progress bar + (Experimental)
- + +
+
+
+ Smooth Scrolling + Provides a smoother scrolling experience with Lenis (Experimental) +
+ +
+
+
+ Album Cover Background + Use the album cover as a blurred background on album pages and as primary + color +
+ +
+
+
+ Full-screen Visualizer + Enable particle visualizer in full-screen mode +
+ +
+
+
+ Visualizer Style + Select the visualization style +
+ +
+
+
+ Visualizer Mode + Choose how the visualizer is displayed in full-screen +
+ +
+
+
+ Smart Intensity Switching + Automatically adjust visualizer intensity based on song energy +
+ +
+
+
+ Visualizer Sensitivity + Adjust the intensity of the visualizer effects. + Warning: High sensitivity may cause flashing lights and rapid motion, + which can trigger seizures in people with photosensitive + epilepsy. +
+
+ + 60% +
+
+
+
+
+
+
+
+
+
+ ListenBrainz Scrobbling + Submit listens to ListenBrainz (requires User Token) +
+ +
+ +
+ +
+
+
+ Last.fm Scrobbling + Connect your Last.fm account to scrobble tracks +
+
+ +
+
+ + + + +
+
+
+
+
+
+
+
+ Streaming Quality + Quality for streaming playback +
+ +
+
+
+ Download Quality + Quality for track downloads +
+ +
+
+
+ Cover Art Size + Size for downloaded/embedded cover art +
+ +
+
+
+ Show Quality Badges + Display "HD" badge for Hi-Res tracks +
+ +
+
+
+ Gapless Playback + Play audio without interruption between tracks +
+ +
+
+
+ ReplayGain Mode + Normalize volume across tracks +
+ +
+
+
+ ReplayGain Pre-Amp + Adjust gain manually (dB) +
+ +
+ + +
+
+ Equalizer + 16-band parametric equalizer for fine audio control +
+ +
+ + +
+
+
+
+
+
+
+
+ Now Playing View Mode + Choose what shows when you click the album art +
+ +
+ +
+
+ Compact Artists + Show artist cards in a compact, horizontal layout +
+ +
+
+
+ Compact Albums + Show album cards in a compact, horizontal layout +
+ +
+
+
+
+
+
+
+
+
+ Zipped Bulk Downloads + Download multiple tracks as a single ZIP file (requires browser + support) +
+ +
+
+
+ Download Lyrics + Include .lrc files when downloading tracks/albums +
+ +
+
+
+ Romaji Lyrics + Convert Japanese lyrics to Romaji (Latin characters) +
+ +
+
+
+ Filename Template + Customize download filenames. Available: {trackNumber}, {artist}, {title}, + {album} +
+ +
+
+
+ ZIP Folder Template + Customize album folder names. Available: {albumTitle}, {albumArtist}, + {year} +
+ +
+
+
+ Generate M3U + Include M3U playlist files in downloads +
+ +
+
+
+ Generate M3U8 + Include extended M3U8 playlist files in downloads +
+ +
+
+
+ Generate CUE + Include CUE sheets for gapless playback in downloads +
+ +
+
+
+ Generate NFO + Include NFO files for media center compatibility +
+ +
+
+
+ Generate JSON + Include JSON files with rich metadata +
+ +
+
+
+ Relative Paths + Use relative paths in playlist files +
+ +
+
+
+
+
+
+
+
+
+ Keyboard Shortcuts + View available keyboard shortcuts +
+ +
+ +
+
+ Cache + Stores API responses to reduce requests +
+ +
+
+
+ Backup & Restore + Export or import your library and history as JSON +
+
+ + + +
+
+
+
+ ADVANCED: Custom Database/Auth + Configure custom PocketBase and Firebase instances +
+ +
+
+
+
+ API Instances + Manage and prioritize API instances. Automatically sorted by + speed. +
+ +
+
    -
      diff --git a/js/ui-interactions.js b/js/ui-interactions.js index 5d43030..f2fd1be 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -473,6 +473,19 @@ export function initializeUIInteractions(player, api, ui) { }); }); + // Settings tabs + document.querySelectorAll('.settings-tab').forEach((tab) => { + tab.addEventListener('click', () => { + document.querySelectorAll('.settings-tab').forEach((t) => t.classList.remove('active')); + document.querySelectorAll('.settings-tab-content').forEach((c) => c.classList.remove('active')); + + tab.classList.add('active'); + + const contentId = `settings-tab-${tab.dataset.tab}`; + document.getElementById(contentId)?.classList.add('active'); + }); + }); + // Tooltip for truncated text let tooltipEl = document.getElementById('custom-tooltip'); if (!tooltipEl) { diff --git a/styles.css b/styles.css index 95fc90e..c3f5fa0 100644 --- a/styles.css +++ b/styles.css @@ -890,6 +890,55 @@ input[type='search']::-webkit-search-cancel-button { /* Use standardized animation */ } +/* Settings Tabs */ +.settings-tabs { + display: flex; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-lg); + border-bottom: 1px solid var(--border); + flex-wrap: wrap; +} + +.settings-tab { + background: transparent; + border: none; + color: var(--muted-foreground); + padding: var(--spacing-sm) var(--spacing-lg); + cursor: pointer; + font-size: 1rem; + font-weight: 500; + border-bottom: 2px solid transparent; + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + transition: + color var(--transition-fast), + background-color var(--transition-fast), + transform var(--transition-fast); + position: relative; +} + +.settings-tab:hover { + color: var(--foreground); + background-color: rgb(var(--highlight-rgb), 0.05); +} + +.settings-tab:active { + transform: translateY(1px); +} + +.settings-tab.active { + color: var(--foreground); + border-bottom-color: var(--highlight); +} + +.settings-tab-content { + display: none; +} + +.settings-tab-content.active { + display: block; + animation: fade-in-slide-up 0.4s var(--ease-out-back); +} + .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); From 41c0eaaebefcdb56981eb4ee79a64160b53add62 Mon Sep 17 00:00:00 2001 From: Samidy Date: Wed, 4 Feb 2026 16:37:32 +0300 Subject: [PATCH 2/2] Revert "Tabbed settings / settings split in sections" --- index.html | 1533 +++++++++++++++++++---------------------- js/ui-interactions.js | 13 - styles.css | 49 -- 3 files changed, 728 insertions(+), 867 deletions(-) diff --git a/index.html b/index.html index fe600e0..7173669 100644 --- a/index.html +++ b/index.html @@ -1964,174 +1964,147 @@

      Settings

      -
      - - - - - - -
      -
      -
      -
      -
      -
      - Theme - Choose your preferred color scheme -
      +
      +
      +
      +
      + Theme + Choose your preferred color scheme
      -
      -
      System
      -
      Light
      -
      Dark
      -
      Black
      -
      Ocean
      -
      Purple
      -
      Forest
      -
      Mocha
      -
      Machiatto
      -
      Frappé
      -
      Latte
      -
      Custom
      +
      +
      +
      System
      +
      Light
      +
      Dark
      +
      Black
      +
      Ocean
      +
      Purple
      +
      Forest
      +
      Mocha
      +
      Machiatto
      +
      Frappé
      +
      Latte
      +
      Custom
      +
      +
      +

      Custom Theme

      +
      +
      + +
      -
      -

      Custom Theme

      -
      -
      - - -
      +
      +
      +
      + Waveform Seekbar + Show a visual waveform of the track in the progress bar (Experimental)
      -
      -
      - Waveform Seekbar - Show a visual waveform of the track in the progress bar - (Experimental) -
      - + +
      +
      +
      + Smooth Scrolling + Provides a smoother scrolling experience with Lenis (Experimental)
      -
      -
      - Smooth Scrolling - Provides a smoother scrolling experience with Lenis (Experimental) -
      - + +
      +
      +
      + Album Cover Background + Use the album cover as a blurred background on album pages and as primary + color
      -
      -
      - Album Cover Background - Use the album cover as a blurred background on album pages and as primary - color -
      - + +
      +
      +
      + Full-screen Visualizer + Enable particle visualizer in full-screen mode
      -
      -
      - Full-screen Visualizer - Enable particle visualizer in full-screen mode -
      - + +
      +
      +
      + Visualizer Style + Select the visualization style
      -
      -
      - Visualizer Style - Select the visualization style -
      - + +
      +
      +
      + Visualizer Mode + Choose how the visualizer is displayed in full-screen
      -
      -
      - Visualizer Mode - Choose how the visualizer is displayed in full-screen -
      - + +
      +
      +
      + Smart Intensity Switching + Automatically adjust visualizer intensity based on song energy
      -
      -
      - Smart Intensity Switching - Automatically adjust visualizer intensity based on song energy -
      - + +
      +
      +
      + Visualizer Sensitivity + Adjust the intensity of the visualizer effects. + Warning: High sensitivity may cause flashing lights and rapid motion, which + can trigger seizures in people with photosensitive epilepsy.
      -
      -
      - Visualizer Sensitivity - Adjust the intensity of the visualizer effects. - Warning: High sensitivity may cause flashing lights and rapid motion, - which can trigger seizures in people with photosensitive - epilepsy. -
      -
      - - 60% -
      +
      + + 60%
      -
      -
      -
      -
      -
      -
      - ListenBrainz Scrobbling - Submit listens to ListenBrainz (requires User Token) -
      -
      @@ -2291,119 +2264,107 @@ >Submit listens to ListenBrainz (requires User Token)
      - +
      - -
      -
      -
      - Last.fm Scrobbling - Connect your Last.fm account to scrobble tracks -
      -
      - -
      -
      - - - - -
      -
      -
      -
      -
      -
      - Streaming Quality - Quality for streaming playback -
      - + +
      +
      +
      + Last.fm Scrobbling + Connect your Last.fm account to scrobble tracks
      -
      -
      - Download Quality - Quality for track downloads -
      - +
      +
      -
      -
      - Cover Art Size - Size for downloaded/embedded cover art -
      - +
      + + + +
      +
      +
      + Streaming Quality + Quality for streaming playback +
      + +
      +
      +
      + Download Quality + Quality for track downloads +
      + +
      +
      +
      + Cover Art Size + Size for downloaded/embedded cover art +
      + +
      +
      +
      + Show Quality Badges + Display "HD" badge for Hi-Res tracks
      -
      -
      - Gapless Playback - Play audio without interruption between tracks -
      -
      -
      -
      - ReplayGain Mode - Normalize volume across tracks -
      - + +
      +
      +
      + ReplayGain Mode + Normalize volume across tracks
      -
      -
      - ReplayGain Pre-Amp - Adjust gain manually (dB) -
      - + +
      +
      +
      + ReplayGain Pre-Amp + Adjust gain manually (dB)
      + +
      - -
      -
      - Equalizer - 16-band parametric equalizer for fine audio control -
      - + +
      +
      + Equalizer + 16-band parametric equalizer for fine audio control
      + +
      - -
      -
      -
      -
      -
      -
      -
      -
      - Now Playing View Mode - Choose what shows when you click the album art -
      - -
      - -
      -
      - Compact Artists - Show artist cards in a compact, horizontal layout -
      - -
      -
      -
      - Compact Albums - Show album cards in a compact, horizontal layout -
      - -
      -
      -
      -
      -
      -
      -
      -
      -
      - Zipped Bulk Downloads - Download multiple tracks as a single ZIP file (requires browser - support) -
      - -
      -
      -
      - Download Lyrics - Include .lrc files when downloading tracks/albums -
      - -
      -
      -
      - Romaji Lyrics - Convert Japanese lyrics to Romaji (Latin characters) -
      - -
      -
      -
      - Filename Template - Customize download filenames. Available: {trackNumber}, {artist}, {title}, - {album} -
      - -
      -
      -
      - ZIP Folder Template - Customize album folder names. Available: {albumTitle}, {albumArtist}, - {year} -
      - -
      -
      -
      - Generate M3U - Include M3U playlist files in downloads -
      - -
      -
      -
      - Generate M3U8 - Include extended M3U8 playlist files in downloads -
      - -
      -
      -
      - Generate CUE - Include CUE sheets for gapless playback in downloads -
      - -
      -
      -
      - Generate NFO - Include NFO files for media center compatibility -
      - -
      -
      -
      - Generate JSON - Include JSON files with rich metadata -
      - -
      -
      -
      - Relative Paths - Use relative paths in playlist files -
      - -
      -
      -
      -
      -
      -
      -
      -
      -
      - Keyboard Shortcuts - View available keyboard shortcuts -
      - -
      - -
      -
      - Cache - Stores API responses to reduce requests -
      - -
      -
      -
      - Backup & Restore - Export or import your library and history as JSON -
      -
      - - - -
      -
      -
      -
      - ADVANCED: Custom Database/Auth - Configure custom PocketBase and Firebase instances -
      - -
      -
      -
      -
      - API Instances - Manage and prioritize API instances. Automatically sorted by - speed. -
      -
      -
        + +
        + +
        + + 0 + 25 +
        +
        + + 0 + 40 +
        +
        + + 0 + 63 +
        +
        + + 0 + 100 +
        +
        + + 0 + 160 +
        +
        + + 0 + 250 +
        +
        + + 0 + 400 +
        +
        + + 0 + 630 +
        +
        + + 0 + 1K +
        +
        + + 0 + 1.6K +
        +
        + + 0 + 2.5K +
        +
        + + 0 + 4K +
        +
        + + 0 + 6.3K +
        +
        + + 0 + 10K +
        +
        + + 0 + 16K +
        +
        + + 0 + 20K +
        +
        + +
        + +30 dB + 0 dB + -30 dB +
        +
        +
        + +
        +
        +
        + Now Playing View Mode + Choose what shows when you click the album art +
        + +
        + +
        +
        + Compact Artists + Show artist cards in a compact, horizontal layout +
        + +
        +
        +
        + Compact Albums + Show album cards in a compact, horizontal layout +
        + +
        +
        + +
        +
        +
        + Zipped Bulk Downloads + Download multiple tracks as a single ZIP file (requires browser support) +
        + +
        +
        +
        + Download Lyrics + Include .lrc files when downloading tracks/albums +
        + +
        +
        +
        + Romaji Lyrics + Convert Japanese lyrics to Romaji (Latin characters) +
        + +
        +
        +
        + Filename Template + Customize download filenames. Available: {trackNumber}, {artist}, {title}, + {album} +
        + +
        +
        +
        + ZIP Folder Template + Customize album folder names. Available: {albumTitle}, {albumArtist}, + {year} +
        + +
        +
        +
        + Generate M3U + Include M3U playlist files in downloads +
        + +
        +
        +
        + Generate M3U8 + Include extended M3U8 playlist files in downloads +
        + +
        +
        +
        + Generate CUE + Include CUE sheets for gapless playback in downloads +
        + +
        +
        +
        + Generate NFO + Include NFO files for media center compatibility +
        + +
        +
        +
        + Generate JSON + Include JSON files with rich metadata +
        + +
        +
        +
        + Relative Paths + Use relative paths in playlist files +
        + +
        +
        + +
        +
        +
        + Keyboard Shortcuts + View available keyboard shortcuts +
        + +
        + +
        +
        + Cache + Stores API responses to reduce requests +
        + +
        +
        +
        + Backup & Restore + Export or import your library and history as JSON +
        +
        + + + +
        +
        +
        +
        + ADVANCED: Custom Database/Auth + Configure custom PocketBase and Firebase instances +
        + +
        +
        +
        +
        + API Instances + Manage and prioritize API instances. Automatically sorted by speed. +
        + +
        +
          diff --git a/js/ui-interactions.js b/js/ui-interactions.js index f2fd1be..5d43030 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -473,19 +473,6 @@ export function initializeUIInteractions(player, api, ui) { }); }); - // Settings tabs - document.querySelectorAll('.settings-tab').forEach((tab) => { - tab.addEventListener('click', () => { - document.querySelectorAll('.settings-tab').forEach((t) => t.classList.remove('active')); - document.querySelectorAll('.settings-tab-content').forEach((c) => c.classList.remove('active')); - - tab.classList.add('active'); - - const contentId = `settings-tab-${tab.dataset.tab}`; - document.getElementById(contentId)?.classList.add('active'); - }); - }); - // Tooltip for truncated text let tooltipEl = document.getElementById('custom-tooltip'); if (!tooltipEl) { diff --git a/styles.css b/styles.css index 6620248..1ef7b15 100644 --- a/styles.css +++ b/styles.css @@ -890,55 +890,6 @@ input[type='search']::-webkit-search-cancel-button { /* Use standardized animation */ } -/* Settings Tabs */ -.settings-tabs { - display: flex; - gap: var(--spacing-xs); - margin-bottom: var(--spacing-lg); - border-bottom: 1px solid var(--border); - flex-wrap: wrap; -} - -.settings-tab { - background: transparent; - border: none; - color: var(--muted-foreground); - padding: var(--spacing-sm) var(--spacing-lg); - cursor: pointer; - font-size: 1rem; - font-weight: 500; - border-bottom: 2px solid transparent; - border-radius: var(--radius-sm) var(--radius-sm) 0 0; - transition: - color var(--transition-fast), - background-color var(--transition-fast), - transform var(--transition-fast); - position: relative; -} - -.settings-tab:hover { - color: var(--foreground); - background-color: rgb(var(--highlight-rgb), 0.05); -} - -.settings-tab:active { - transform: translateY(1px); -} - -.settings-tab.active { - color: var(--foreground); - border-bottom-color: var(--highlight); -} - -.settings-tab-content { - display: none; -} - -.settings-tab-content.active { - display: block; - animation: fade-in-slide-up 0.4s var(--ease-out-back); -} - .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));