fix word-break overflow for CJK characters on lyrics

- Use `compilation=false` for Navidrome recent releases with artist credit
- Add `YesNoSelect` (yes, no, undefined) for `favorite` for Navidrome/Jellyfin `album`/`track`, and Navidrome `compilation`
- Fix folderButton translation

.github/ISSUE_TEMPLATE/01-feature_request.yml

@@ -0,0 +1,33 @@
+name: Feature request
+description: Request a feature to be added to Feishin
+title: '[Feature]: '
+labels: ['enhancement']
+body:
+    - type: checkboxes
+      id: check-duplicate
+      attributes:
+          label: I have already checked through the existing feature requests and found no duplicates
+          options:
+              - label: 'Yes'
+                required: true
+
+    - type: dropdown
+      id: server-specific
+      attributes:
+          label: Is this a server-specific feature?
+          options:
+              - Not server-specific
+              - OpenSubsonic
+              - Jellyfin
+              - Navidrome
+          default: 0
+      validations:
+          required: true
+
+    - type: textarea
+      id: solution
+      attributes:
+          label: What do you want to be added?
+          placeholder: I would like to see [...]
+      validations:
+          required: true

.github/ISSUE_TEMPLATE/02-bug_report.yml

@@ -0,0 +1,74 @@
+name: Bug report
+description: You're having technical issues.
+title: '[Bug]: '
+labels: ['bug']
+body:
+    - type: checkboxes
+      id: check-duplicate
+      attributes:
+          label: I have already checked through the existing bug reports and found no duplicates
+          options:
+              - label: 'Yes'
+                required: true
+
+    - type: input
+      id: version
+      attributes:
+          label: App Version
+          description: What version of the app are you running?
+          placeholder: ex. 1.0.0
+      validations:
+          required: true
+
+    - type: input
+      id: server-version
+      attributes:
+          label: Music Server and Version
+          description: What music server are you using?
+          placeholder: ex. Navidrome v0.55.0, LMS v3.67.0, Jellyfin v10.10.7, etc.
+      validations:
+          required: true
+
+    - type: dropdown
+      id: environments
+      attributes:
+          label: What local environments are you seeing the problem on?
+          multiple: true
+          options:
+              - Desktop Windows
+              - Desktop macOS
+              - Desktop Linux
+              - Web Firefox
+              - Web Chrome
+              - Web Safari
+              - Web Microsoft Edge
+              - Other (please specify in the next field)
+
+    - type: textarea
+      id: what-happened
+      attributes:
+          label: What happened?
+          description: Also tell us, what did you expect to happen?
+          placeholder: Include screenshots and error logs if possible. The browser devtools can be opened using CTRL + SHIFT + I (Windows/Linux) or CMD + SHIFT + I (macOS).
+      validations:
+          required: true
+
+    - type: textarea
+      id: reproduction
+      attributes:
+          label: Steps to reproduce
+          description: How can we reproduce this issue? Are there any specific settings that are enabled that could be the cause?
+          placeholder: |
+              1. Go to '...'
+              2. Click on '....'
+              3. Scroll down to '....'
+              4. See error
+      validations:
+          required: true
+
+    - type: textarea
+      id: logs
+      attributes:
+          label: Relevant log output
+          description: Please copy and paste any relevant log output. This will be automatically formatted into code.
+          render: shell

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,63 +0,0 @@
-name: Bug report
-description: You're having technical issues. 🐞
-labels: ['bug']
-body:
-    - type: textarea
-      attributes:
-          label: Expected Behavior
-          description: What should have happened?
-      validations:
-          required: true
-    - type: textarea
-      attributes:
-          label: Current Behavior
-          description: What went wrong? Add screenshots to help explain your problem. (Open the browser dev tools in the menu or using CTRL + SHIFT + I)
-      validations:
-          required: true
-    - type: textarea
-      attributes:
-          label: Steps to Reproduce
-          placeholder: |
-              <!-- Add relevant code and/or a live example -->
-              <!-- Add stack traces -->
-              1.
-              2.
-              3.
-              4.
-      validations:
-          required: true
-    - type: textarea
-      attributes:
-          label: Possible Solution
-          description: Suggest a reason for the bug or how to fix it.
-      validations:
-          required: false
-    - type: textarea
-      attributes:
-          label: Context
-          description: How has this issue affected you? What are you trying to accomplish?
-      validations:
-          required: false
-    - type: input
-      attributes:
-          label: Application version
-          placeholder: (e.g. v0.1.0)
-      validations:
-          required: true
-    - type: input
-      attributes:
-          label: Operating System and version
-          placeholder: (e.g. Windows 11 desktop, Webapp in Firefox)
-      validations:
-          required: true
-    - type: input
-      attributes:
-          label: Server and Version
-          placeholder: (e.g. Navidrome v0.48.0)
-      validations:
-          required: true
-    - type: input
-      attributes:
-          label: Node Version (if developing locally)
-      validations:
-          required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,11 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
-    - name: Question
+    - name: Questions or help
       url: https://github.com/jeffvli/feishin/discussions
-      about: Please ask and answer questions here.
+      about: Ask questions or get help in the discussions section
+    - name: Discord Community
+      url: https://discord.gg/FVKpcMDy5f
+      about: The discord/matrix servers are bridged so you can join whichever you prefer
+    - name: Matrix Community
+      url: https://matrix.to/#/#sonixd:matrix.org
+      about: The discord/matrix servers are bridged so you can join whichever you prefer

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,20 +0,0 @@
-name: Feature request - NOT ACCEPTING NEW FEATURE REQUESTS
-description: Feature requests are currently closed. The application is actively being rewritten https://github.com/audioling/audioling.
-labels: ['enhancement']
-body:
-    - type: textarea
-      attributes:
-          label: What do you want to be added?
-      validations:
-          required: true
-    - type: textarea
-      attributes:
-          label: Additional context
-      validations:
-          required: false
-    - type: checkboxes
-      attributes:
-          label: Is this a server-specific feature? (e.g. Jellyfin only)
-          options:
-              - label: 'Yes'
-                required: false

.stylelintrc.json

@@ -10,7 +10,7 @@
         "selector-type-no-unknown": [true, { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }],
         "declaration-block-no-shorthand-property-overrides": null,
         "declaration-block-no-redundant-longhand-properties": null,
-        "at-rule-no-unknown": [true, { "ignoreAtRules": ["mixin"] }],
+        "at-rule-no-unknown": [true, { "ignoreAtRules": ["mixin", "value"] }],
         "function-no-unknown": [true, { "ignoreFunctions": ["darken", "alpha", "lighten"] }],
         "declaration-property-value-no-unknown": null,
         "no-descending-specificity": null,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "feishin",
-    "version": "0.15.1",
+    "version": "0.17.0",
     "description": "A modern self-hosted music player.",
     "keywords": [
         "subsonic",

src/i18n/locales/cs.json

@@ -124,7 +124,7 @@
         "hotkey_toggleShuffle": "přepnutí náhodného přehrávání",
         "theme": "motiv",
         "playbackStyle_description": "nastavení způsobu přehrávání pro přehrávač zvuku",
-        "discordRichPresence_description": "povolit stav přehrávání v {{discord}} rich presence. Klíče obrázků jsou: {{icon}}, {{playing}}, {{paused}} ",
+        "discordRichPresence_description": "povolit stav přehrávání v {{discord}} rich presence. Klíče obrázků jsou: {{icon}}, {{playing}}, {{paused}}",
         "mpvExecutablePath": "cesta ke spustitelnému souboru mpv",
         "audioDevice": "zvukové zařízení",
         "hotkey_rate2": "hodnocení 2 hvězdami",
@@ -171,7 +171,7 @@
         "hotkey_zoomOut": "oddálení",
         "hotkey_unfavoriteCurrentSong": "zrušení oblíbení u $t(common.currentSong)",
         "hotkey_rate0": "vymazání hodnocení",
-        "discordApplicationId": "aplikační id pro {{discord}}",
+        "discordApplicationId": "id aplikace pro {{discord}}",
         "applicationHotkeys_description": "nastavení klávesových zkratek aplikace. přepněte pole pro nastavení jako globální zkratku (pouze na počítači)",
         "floatingQueueArea_description": "zobrazit ikonu přejetí myší na pravé straně obrazovky pro zobrazení fronty",
         "hotkey_volumeMute": "ztlumení",
@@ -265,7 +265,13 @@
         "musicbrainz": "zobrazit odkazy na musicbrainz",
         "musicbrainz_description": "na stránkách umělců a alb, kde existuje mbid, zobrazit odkazy na musicbrainz",
         "neteaseTranslation": "Povolit překlady NetEase",
-        "neteaseTranslation_description": "Pokud je povoleno, načte a zobrazí přeložené texty ze služby NetEase, pokud jsou dostupné."
+        "neteaseTranslation_description": "Pokud je povoleno, načte a zobrazí přeložené texty ze služby NetEase, pokud jsou dostupné.",
+        "preferLocalLyrics": "preferovat místní texty",
+        "preferLocalLyrics_description": "preferovat místní texty před vzdálenými, pokud jsou dostupné",
+        "discordPausedStatus": "zobrazit rich presence při pozastavení",
+        "discordPausedStatus_description": "pokud je povoleno, bude při pozastavení přehrávače zobrazen stav",
+        "preservePitch": "zachovat výšku",
+        "preservePitch_description": "zachová výšku při úpravě rychlosti přehrávání"
     },
     "action": {
         "editPlaylist": "upravit $t(entity.playlist_one)",
@@ -373,7 +379,7 @@
         "size": "velikost",
         "biography": "biografie",
         "note": "poznámka",
-        "albumGain": "zisk (gain) alba",
+        "albumGain": "gain alba",
         "albumPeak": "vrchol alba",
         "close": "zavřít",
         "mbid": "ID MusicBrainz",
@@ -385,14 +391,18 @@
         "preview": "náhled",
         "translation": "překlad",
         "additionalParticipants": "další přispívající",
-        "tags": "štítky"
+        "tags": "štítky",
+        "viewReleaseNotes": "zobrazit seznam změn",
+        "newVersion": "byla nainstalována nová verze ({{version}})"
     },
     "table": {
         "config": {
             "view": {
                 "card": "karta",
                 "table": "tabulka",
-                "poster": "plakát"
+                "poster": "plakát",
+                "list": "seznam",
+                "grid": "mřížka"
             },
             "general": {
                 "displayType": "typ zobrazení",
@@ -544,7 +554,8 @@
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
             "albumArtists": "$t(entity.albumArtist_other)",
-            "shared": "$t(entity.playlist_other) sdíleny"
+            "shared": "$t(entity.playlist_other) sdíleny",
+            "myLibrary": "moje knihovna"
         },
         "fullscreenPlayer": {
             "config": {
@@ -720,7 +731,8 @@
         },
         "queryEditor": {
             "input_optionMatchAll": "shoda všeho",
-            "input_optionMatchAny": "shoda libovolného"
+            "input_optionMatchAny": "shoda libovolného",
+            "title": "editor dotazů"
         },
         "lyricSearch": {
             "input_name": "$t(common.name)",

src/i18n/locales/de.json

@@ -113,7 +113,9 @@
         "trackPeak": "Track-Spitzenpegel",
         "codec": "Codec",
         "albumPeak": "Album-Spitzenpegel",
-        "albumGain": "Album-Pegelverstärkung"
+        "albumGain": "Album-Pegelverstärkung",
+        "tags": "tags",
+        "viewReleaseNotes": "Release Notes anzeigen"
     },
     "error": {
         "remotePortWarning": "Starten Sie den Server neu, um den neuen Port anzuwenden",
@@ -237,7 +239,8 @@
             "description": "Beschreibung",
             "setExpiration": "Ablaufdatum setzen",
             "expireInvalid": "Ablaufdatum muss in der Zukunft liegen",
-            "allowDownloading": "Herunterladen zulassen"
+            "allowDownloading": "Herunterladen zulassen",
+            "success": "Link in die Zwischenablage kopiert (oder hier klicken um zu öffnen)"
         }
     },
     "entity": {
@@ -429,7 +432,8 @@
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
             "albumArtists": "$t(entity.albumArtist_other)",
-            "shared": "$t(entity.playlist_other) geteilt"
+            "shared": "$t(entity.playlist_other) geteilt",
+            "myLibrary": "meine bibliothek"
         },
         "setting": {
             "playbackTab": "Wiedergabe",
@@ -516,7 +520,7 @@
         "playSimilarSongs": "Ähnliche Lieder abspielen"
     },
     "setting": {
-        "audioDevice_description": "Wählen Sie das Audiogerät aus, das für die Wiedergabe verwendet werden soll (nur Webplayer).",
+        "audioDevice_description": "Wählen Sie das Audiogerät aus, das für die Wiedergabe verwendet werden soll (nur Webplayer)",
         "audioExclusiveMode": "Audio-Exklusivmodus",
         "audioDevice": "Audiogerät",
         "accentColor": "Akzentfarbe",
@@ -670,12 +674,23 @@
         "windowBarStyle_description": "Wähle den Stil der Windows-Leiste",
         "hotkey_toggleCurrentSongFavorite": "$t(common.currentSong) zu Favoriten hinzufügen",
         "clearQueryCache_description": "\"Weiches\" Zurücksetzen. Dies wird Playlisten, Musik-Metadaten und gespeicherte Liedtexte zurücksetzen, Zugangsinformationen und zwischengespeicherte Bilder werden behalten",
-        "discordRichPresence_description": "Zeige deinen Wiedergabe-Status in {{discord}} als rich presence an. Angezeigte Bilder sind: {{icon}}, {{playing}}, und {{paused}} ",
+        "discordRichPresence_description": "Zeige deinen Wiedergabe-Status in {{discord}} als rich presence an. Angezeigte Bilder sind: {{icon}}, {{playing}}, und {{paused}}",
         "clearCache": "Browser-Zwischenspeicher löschen",
         "clearQueryCache": "feishins Zwischenspeicher leeren",
         "clearCache_description": "Hartes Zurücksetzen. Neben feishins Zwischenspeicher wird auch der des Browsers gelöscht (Bilder und andere Daten). Zugangsinformationen und Einstellungen werden behalten",
         "sidePlayQueueStyle": "Wiedergabelistenstil in der Seitenleiste",
         "zoom_description": "Setzt den Zoom (in %) für das Programm",
-        "zoom": "Zoom"
+        "zoom": "Zoom",
+        "albumBackground": "Album Hintergrund",
+        "customCss": "Benutzerdefiniert css",
+        "homeConfiguration": "Startseite Konfiguration",
+        "lastfmApiKey": "{{lastfm}} API-Schlüssel",
+        "lastfmApiKey_description": "Der API-Schlüssel für {{lastfm}}. wird für benötigt",
+        "discordListening": "Status als hört zu anzeigen",
+        "discordListening_description": "Status als hört zu statt als spielt anzeigen",
+        "lastfm": "zeige last.fm links",
+        "lastfm_description": "zeige links zu last.fm auf dem Künstler/Album-Seiten",
+        "musicbrainz": "Zeig musicbrainz links",
+        "customCssEnable": "aktiviere Benutzerdefinierte css"
     }
 }

src/i18n/locales/en.json

@@ -514,12 +514,14 @@
         "disableLibraryUpdateOnStartup": "disable checking for new versions on startup",
         "discordApplicationId": "{{discord}} application id",
         "discordApplicationId_description": "the application id for {{discord}} rich presence (defaults to {{defaultId}})",
+        "discordPausedStatus": "show rich presence when paused",
+        "discordPausedStatus_description": "when enabled, status will show when player is paused",
         "discordIdleStatus": "show rich presence idle status",
         "discordIdleStatus_description": "when enabled, update status while player is idle",
         "discordListening": "show status as listening",
         "discordListening_description": "show status as listening instead of playing",
         "discordRichPresence": "{{discord}} rich presence",
-        "discordRichPresence_description": "enable playback status in {{discord}} rich presence. Image keys are: {{icon}}, {{playing}}, and {{paused}} ",
+        "discordRichPresence_description": "enable playback status in {{discord}} rich presence. Image keys are: {{icon}}, {{playing}}, and {{paused}}",
         "discordServeImage": "serve {{discord}} images from server",
         "discordServeImage_description": "share cover art for {{discord}} rich presence from server itself, only available for jellyfin and navidrome",
         "discordUpdateInterval": "{{discord}} rich presence update interval",
@@ -536,6 +538,8 @@
         "floatingQueueArea_description": "display a hover icon on the right side of the screen to view the play queue",
         "followLyric": "follow current lyric",
         "followLyric_description": "scroll the lyric to the current playing position",
+        "preferLocalLyrics": "prefer local lyrics",
+        "preferLocalLyrics_description": "prefer local lyrics over remote lyrics when available",
         "font": "font",
         "font_description": "sets the font to use for the application",
         "fontType": "font type",
@@ -703,6 +707,8 @@
         "volumeWidth_description": "the width of the volume slider",
         "webAudio": "use web audio",
         "webAudio_description": "use web audio. this enables advanced features like replaygain. disable if you experience otherwise",
+        "preservePitch": "preserve pitch",
+        "preservePitch_description": "preserves pitch when modifying playback speed",
         "windowBarStyle": "window bar style",
         "windowBarStyle_description": "select the style of the window bar",
         "zoom": "zoom percentage",

src/i18n/locales/es.json

@@ -120,7 +120,7 @@
         "hotkey_toggleShuffle": "alterna aleatorio",
         "theme": "tema",
         "playbackStyle_description": "selecciona el estilo de reproducción a usar por el reproductor de audio",
-        "discordRichPresence_description": "activa el estado de reproducción en el estado de actividad de {{discord}}. Las teclas de imagen son: {{icon}}, {{playing}}, y {{paused}} ",
+        "discordRichPresence_description": "activa el estado de reproducción en el estado de actividad de {{discord}}. Las teclas de imagen son: {{icon}}, {{playing}}, y {{paused}}",
         "mpvExecutablePath": "ruta del ejecutable mpv",
         "audioDevice": "dispositivo de audio",
         "hotkey_rate2": "calificar con 2 estrellas",
@@ -265,7 +265,13 @@
         "musicbrainz": "Mostrar enlaces de MusicBrainz",
         "musicbrainz_description": "Muestra enlaces a MusicBrainz en las páginas de artistas/álbumes, donde exista mbid",
         "neteaseTranslation": "Activar traducciones de NetEase",
-        "neteaseTranslation_description": "Cuando se habilita, busca y muestra letras traducidas desde NetEase si está disponible."
+        "neteaseTranslation_description": "Cuando se habilita, busca y muestra letras traducidas desde NetEase si está disponible.",
+        "preferLocalLyrics_description": "Prefiere letras locales sobre letras remotas cuando esté disponible",
+        "preferLocalLyrics": "Preferir letras locales",
+        "discordPausedStatus": "Mostrar estado de actividad cuando esté en pausa",
+        "discordPausedStatus_description": "Cuando está activado, el estado mostrará cuando el reproductor esté en pausa",
+        "preservePitch": "Mantener el tono",
+        "preservePitch_description": "Mantiene el tono cuando se modifica la velocidad de reproducción"
     },
     "action": {
         "editPlaylist": "editar $t(entity.playlist_one)",
@@ -385,7 +391,9 @@
         "preview": "Vista previa",
         "translation": "traducción",
         "additionalParticipants": "Participantes adicionales",
-        "tags": "Etiquetas"
+        "tags": "Etiquetas",
+        "newVersion": "Una nueva versión ha sido instalada ({{version}})",
+        "viewReleaseNotes": "Ver notas de lanzamiento"
     },
     "error": {
         "remotePortWarning": "reiniciar el servidor para aplicar el nuevo puerto",
@@ -469,7 +477,8 @@
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
             "albumArtists": "$t(entity.albumArtist_other)",
-            "shared": "compartido $t(entity.playlist_other)"
+            "shared": "compartido $t(entity.playlist_other)",
+            "myLibrary": "Mi biblioteca"
         },
         "appMenu": {
             "selectServer": "seleccionar servidor",
@@ -655,7 +664,8 @@
         },
         "queryEditor": {
             "input_optionMatchAll": "coincidir todos",
-            "input_optionMatchAny": "coincidir cualquiera"
+            "input_optionMatchAny": "coincidir cualquiera",
+            "title": "Editor de consultas"
         },
         "shareItem": {
             "createFailed": "No se pudo crear el recurso compartido (¿está habilitado el uso compartido?)",
@@ -737,7 +747,9 @@
             "view": {
                 "card": "tarjeta",
                 "table": "tabla",
-                "poster": "cartel"
+                "poster": "cartel",
+                "list": "Lista",
+                "grid": "Cuadrícula"
             }
         }
     },

src/i18n/locales/fi.json

@@ -90,7 +90,9 @@
         "trackGain": "raidan vahvistus (gain)",
         "trackPeak": "kappaleen huippu (peak)",
         "additionalParticipants": "muut osallistujat",
-        "tags": "tägit"
+        "tags": "tägit",
+        "newVersion": "uusi versio on asennettu ({{version}})",
+        "viewReleaseNotes": "katsele julkaisutietoja"
     },
     "entity": {
         "album_one": "albumi",
@@ -279,7 +281,8 @@
         },
         "queryEditor": {
             "input_optionMatchAny": "sovita joku",
-            "input_optionMatchAll": "sovita kaikki"
+            "input_optionMatchAll": "sovita kaikki",
+            "title": "kyselyeditori"
         }
     },
     "setting": {
@@ -359,7 +362,7 @@
         "doubleClickBehavior": "lisää kaikki haetut kappaleet soittojonoon tuplaklikkauksella",
         "discordUpdateInterval_description": "päivitysväli sekunnteina (vähintään 15 sekunttia)",
         "discordRichPresence": "{{discord}} rich presence",
-        "discordRichPresence_description": "ota toiston tila käyttöön {{discord}}n rich presence-toiminnossa. Kuvakkeiden avaimet ovat {{icon}}, {{playing}} ja {{paused}}. ",
+        "discordRichPresence_description": "ota toiston tila käyttöön {{discord}}n rich presence-toiminnossa. Kuvakkeiden avaimet ovat {{icon}}, {{playing}} ja {{paused}}",
         "discordUpdateInterval": "{{discord}} rich presencen päivitysväli",
         "enableRemote": "aktivoi etäohjauspalvelin",
         "externalLinks_description": "ottaa ulkoiset linkit (Last.fm, MusicBrainz) artistien/albumien sivuilla",
@@ -515,7 +518,13 @@
         "lastfm_description": "näytä linkit last.fm sivulle artistin/albumin sivuilla",
         "musicbrainz": "näytä musicbrainz linkit",
         "neteaseTranslation": "Ota NetEasen käännökset käyttöön",
-        "neteaseTranslation_description": "Käytöss ollessa noutaa ja näyttää käännetyt sanat NetEasesta, jos ne ovat saatavilla."
+        "neteaseTranslation_description": "Käytöss ollessa noutaa ja näyttää käännetyt sanat NetEasesta, jos ne ovat saatavilla.",
+        "preferLocalLyrics_description": "suosi paikallisia sanoituksia ulkoisten sijasta, kun saatavilla",
+        "preferLocalLyrics": "suosi paikallisia sanoituksia",
+        "discordPausedStatus": "näytä rich presence tauotettuna",
+        "discordPausedStatus_description": "ollessak käytössä, status näyttää milloin soitin on tautotettuna",
+        "preservePitch": "säilytä sävelkorkeus",
+        "preservePitch_description": "säilytä sävelkorkeus toistonopeutta muokatessa"
     },
     "page": {
         "itemDetail": {
@@ -584,7 +593,8 @@
             "home": "$t(common.home)",
             "nowPlaying": "nyt soi",
             "playlists": "$t(entity.playlist_other)",
-            "search": "$t(common.search)"
+            "search": "$t(common.search)",
+            "myLibrary": "oma kirjasto"
         },
         "setting": {
             "generalTab": "yleinen",
@@ -745,7 +755,9 @@
             "view": {
                 "table": "taulukko",
                 "card": "kortti",
-                "poster": "juliste"
+                "poster": "juliste",
+                "grid": "ruudukko",
+                "list": "lista"
             }
         },
         "column": {

src/i18n/locales/fr.json

@@ -150,7 +150,9 @@
         "codec": "codec",
         "translation": "traduction",
         "additionalParticipants": "participants additionnels",
-        "tags": "tags"
+        "tags": "tags",
+        "newVersion": "une nouvelle version vient d'être installé ({{version}})",
+        "viewReleaseNotes": "voir la note de version"
     },
     "error": {
         "remotePortWarning": "redémarrer le serveur pour appliquer le nouveau port",
@@ -234,7 +236,8 @@
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
             "albumArtists": "$t(entity.albumArtist_other)",
-            "shared": "partagé $t(entity.playlist_other)"
+            "shared": "partagé $t(entity.playlist_other)",
+            "myLibrary": "ma bibliothèque"
         },
         "fullscreenPlayer": {
             "config": {
@@ -446,7 +449,7 @@
         "playbackStyle": "style de lecture",
         "hotkey_toggleShuffle": "basculer la lecture aléatoire",
         "playbackStyle_description": "sélectionnez le style de lecture à utiliser pour le lecteur audio",
-        "discordRichPresence_description": "active l'état de lecteur dans le status d'activité {{discord}}. Les images clés sont : {{icon}}, {{playing}}, et {{paused}} ",
+        "discordRichPresence_description": "active l'état de lecteur dans le status d'activité {{discord}}. Les images clés sont : {{icon}}, {{playing}}, et {{paused}}",
         "mpvExecutablePath": "chemin de l'exécutable mpv",
         "hotkey_rate2": "noter 2 étoiles",
         "playButtonBehavior_description": "définit le comportement par défaut du bouton play, lors de l'ajout de chanson à la file d'attente",
@@ -602,7 +605,15 @@
         "lastfm": "affiche les liens de last.fm",
         "musicbrainz_description": "affiches les liens vers musicbrainz sur les pages des artistes/albums, quand mbid existes",
         "lastfm_description": "affiche les liens vers last.fm sur les pages des artistes/albums",
-        "musicbrainz": "affiches les liens musicbrainz"
+        "musicbrainz": "affiches les liens musicbrainz",
+        "neteaseTranslation": "Activer les traductions NetEase",
+        "neteaseTranslation_description": "Lorsque cette option est activée, récupère et affiche les paroles traduites de NetEase si elles sont disponibles.",
+        "preferLocalLyrics_description": "privilégier les paroles locales aux paroles distantes lorsqu'elles sont disponibles",
+        "preferLocalLyrics": "privilégier les paroles locales",
+        "discordPausedStatus_description": "quand activé, le status s'affichera lorsque le lecteur est en pause",
+        "discordPausedStatus": "afficher le status d'activité en pause",
+        "preservePitch": "préserver la hauteur",
+        "preservePitch_description": "préserver la hauteur lors du changement de la vitesse de lecture"
     },
     "form": {
         "deletePlaylist": {
@@ -643,7 +654,8 @@
         },
         "queryEditor": {
             "input_optionMatchAll": "correspondre à tous",
-            "input_optionMatchAny": "correspondre à n'importe quel"
+            "input_optionMatchAny": "correspondre à n'importe quel",
+            "title": "éditeur de requête"
         },
         "editPlaylist": {
             "title": "modifier $t(entity.playlist_one)",
@@ -733,7 +745,9 @@
             "view": {
                 "table": "liste",
                 "poster": "poster",
-                "card": "Carte"
+                "card": "Carte",
+                "grid": "grille",
+                "list": "liste"
             },
             "label": {
                 "releaseDate": "date de sortie",

src/i18n/locales/hu.json

@@ -163,7 +163,7 @@
         "remotePortWarning": "indítsd újra a szervert az új PORT használatához",
         "genericError": "hiba történt",
         "endpointNotImplementedError": "a(z) {{endpoint}} végpont nincs implementálva a következőhöz: {{serverType}}",
-        "badAlbum": "azért látod ezt az oldalt mert ez a zeneszám nem része egy albumnak. ez általában akkor történik amikor egy szám a zenekönyvtárad gyökerébe kerül. a Jellyfin csak mappákba rendezett számokat csoportosít",
+        "badAlbum": "azért látod ezt az oldalt mert ez a zeneszám nem része egy albumnak. ez általában akkor történik amikor egy szám a zenekönyvtárad gyökerébe kerül. a Jellyfin csak mappákba rendezett számokat csoportosít.",
         "loginRateError": "túl sok bejelentkezési kísérlet, kérlek próbáld újra pár másodperc múlva",
         "mpvRequired": "MPV szükséges",
         "invalidServer": "érvénytelen szerver",

src/i18n/locales/id.json

@@ -491,7 +491,7 @@
         "discordListening": "Tampilkan status sebagai mendengarkan",
         "discordListening_description": "tampilkan status sebagai mendengarkan alih-alih bermain",
         "discordRichPresence": "status aktivitas {{discord}}",
-        "discordRichPresence_description": "aktifkan status pemutaran di status aktivitas {{discord}}. Gambar tombol adalah: {{icon}}, {{playing}}, dan {{paused}} ",
+        "discordRichPresence_description": "aktifkan status pemutaran di status aktivitas {{discord}}. Gambar tombol adalah: {{icon}}, {{playing}}, dan {{paused}}",
         "discordUpdateInterval": "interval pembaruan status aktivitas {{discord}}",
         "discordUpdateInterval_description": "waktu dalam detik antara setiap pembaruan (minimal 15 detik)",
         "doubleClickBehavior": "masukkan semua lagu yang dicari saat mengklik dua kali",

src/i18n/locales/it.json

@@ -209,7 +209,7 @@
         "hotkey_toggleShuffle": "attiva/disattiva mescolamento",
         "theme": "tema",
         "playbackStyle_description": "selezione lo stile di riproduzione da usare per il player audio",
-        "discordRichPresence_description": "abilita lo status del playback nello stato attività di {{discord}}. Le chiavi immagine sono: {{icon}}, {{playing}} e {{paused}} ",
+        "discordRichPresence_description": "abilita lo status del playback nello stato attività di {{discord}}. Le chiavi immagine sono: {{icon}}, {{playing}} e {{paused}}",
         "mpvExecutablePath": "percorso eseguibile mpv",
         "audioDevice": "device audio",
         "hotkey_rate2": "voto 2 stelle",

src/i18n/locales/ja.json

@@ -122,7 +122,7 @@
         "hotkey_toggleShuffle": "シャッフルの切り替え",
         "theme": "テーマ",
         "playbackStyle_description": "オーディオプレーヤーに使用する再生スタイルを選択します",
-        "discordRichPresence_description": "{{discord}} のRich Presenceに再生ステータスを表示するようにします。画像キー: {{icon}}, {{playing}}, {{paused}} ",
+        "discordRichPresence_description": "{{discord}} のRich Presenceに再生ステータスを表示するようにします。画像キー: {{icon}}, {{playing}}, {{paused}}",
         "mpvExecutablePath": "mpv 実行ファイルパス",
         "audioDevice": "オーディオデバイス",
         "hotkey_rate2": "2つ星で評価",

src/i18n/locales/pl.json

@@ -533,7 +533,7 @@
         "crossfadeDuration_description": "ustaw czas trwania efektu przenikania",
         "language": "język",
         "hotkey_toggleShuffle": "przełącz kolejność losową",
-        "discordRichPresence_description": "włącz status odtwarzania w {{discord}} (rich presence). Dzięki temu będą wyświetlane informacje takie jak: {{icon}}, {{playing}} i {{paused}}. ",
+        "discordRichPresence_description": "włącz status odtwarzania w {{discord}} (rich presence). Dzięki temu będą wyświetlane informacje takie jak: {{icon}}, {{playing}} i {{paused}}",
         "audioDevice": "urządzenia dźwiękowe",
         "hotkey_rate2": "oceń na 2 gwiazdki",
         "exitToTray": "zamknij do zasobnika",

src/i18n/locales/ru.json

@@ -86,7 +86,7 @@
         "confirm": "подтвердить",
         "resetToDefault": "сбросить настройки",
         "home": "главная",
-        "comingSoon": "скоро...",
+        "comingSoon": "скоро…",
         "reset": "сбросить",
         "channel_one": "канал",
         "channel_few": "канала",
@@ -333,7 +333,7 @@
         "next": "следующий",
         "shuffle": "перемешать",
         "playbackFetchNoResults": "песни не найдены",
-        "playbackFetchInProgress": "загрузка песен..",
+        "playbackFetchInProgress": "загрузка песен…",
         "addNext": "воспроизвести следующим",
         "playbackSpeed": "скорость воспроизведения",
         "playbackFetchCancel": "пожалуйста, подождите немного... закройте уведомление для отмены",
@@ -759,7 +759,7 @@
         "artistConfiguration": "конфигурация страницы альбомов исполнителей",
         "artistConfiguration_description": "позволяет настроить видимость и порядок элементов на странице альбомов исполнителей",
         "fontType_description": "встроенный позволяет выбрать один из шрифтов, предоставляемых Feishin. системный позволяет выбрать любой шрифт, предоставляемый вашей операционной системой. пользовательский позволяет выбрать свой собственный шрифт",
-        "discordRichPresence_description": "включить статус воспроизведения в статус профиля в {{discord}}. Ключи изображений: {{icon}}, {{playing}} и {{paused}} ",
+        "discordRichPresence_description": "включить статус воспроизведения в статус профиля в {{discord}}. Ключи изображений: {{icon}}, {{playing}} и {{paused}}",
         "lyricOffset": "синхронизация текста треков (мс)"
     }
 }

src/i18n/locales/sr.json

@@ -112,7 +112,7 @@
         "hotkey_localSearch": "pretraživanje na stranici",
         "hotkey_toggleQueue": "promeni listu za reprodukciju",
         "zoom_description": "postavlja stepen zumiranja za aplikaciju",
-        "remotePassword_description": "postavlja lozinku za daljinsku kontrolu servera. Ove informacije se prenose nezaštićeno, pa biste trebali koristiti jedinstvenu lozinku koja vam nije važna.",
+        "remotePassword_description": "postavlja lozinku za daljinsku kontrolu servera. Ove informacije se prenose nezaštićeno, pa biste trebali koristiti jedinstvenu lozinku koja vam nije važna",
         "hotkey_rate5": "oceni sa 5 zvezdica",
         "hotkey_playbackPrevious": "prethodna pesma",
         "showSkipButtons_description": "prikaži ili sakrij dugmad za preskakanje na traci za reprodukciju",
@@ -122,7 +122,7 @@
         "hotkey_toggleShuffle": "promeni slučajan redosled",
         "theme": "tema",
         "playbackStyle_description": "izaberite stil reprodukcije za audio plejer",
-        "discordRichPresence_description": "omogućava status reprodukcije u {{discord}} bogatom prikazu. Ključevi slika su: {{icon}}, {{playing}}, i {{paused}} ",
+        "discordRichPresence_description": "omogućava status reprodukcije u {{discord}} bogatom prikazu. Ključevi slika su: {{icon}}, {{playing}}, i {{paused}}",
         "mpvExecutablePath": "putanja do mpv izvršne datoteke",
         "audioDevice": "audio uređaj",
         "hotkey_rate2": "oceni sa 2 zvezdice",
@@ -158,7 +158,7 @@
         "useSystemTheme_description": "prati sistemski određene postavke za svetlu ili tamnu temu",
         "playButtonBehavior_optionAddNext": "$t(player.addNext)",
         "lyricFetch_description": "preuzimanje tekstova sa različitih izvora na internetu",
-        "lyricFetchProvider_description": "izaberite pružatelje tekstova za preuzimanje. Redosled pružatelja je redosled upita.",
+        "lyricFetchProvider_description": "izaberite pružatelje tekstova za preuzimanje. Redosled pružatelja je redosled upita",
         "globalMediaHotkeys_description": "omogućava ili onemogućava korišćenje medijskih tastera sistema za kontrolu reprodukcije",
         "customFontPath": "prilagođena putanja fonta",
         "followLyric": "prati trenutni tekst pesme",

src/i18n/locales/ta.json

@@ -224,7 +224,7 @@
             "input_password": "கடவுச்சொல்",
             "error_savePassword": "கடவுச்சொல்லை சேமிக்க முயற்சிக்கும்போது பிழை ஏற்பட்டது",
             "ignoreCors": "CORS ஐ புறக்கணிக்கவும் ($ t (Common.RestartRequired))",
-            "ignoreSsl": "SSL ஐ புறக்கணிக்கவும் ($ t (பொதுவானது.",
+            "ignoreSsl": "SSL ஐ புறக்கணிக்கவும் ($ t (பொதுவானது",
             "input_legacyAuthentication": "மரபு அங்கீகாரத்தை இயக்கவும்",
             "input_name": "சேவையக பெயர்",
             "input_savePassword": "கடவுச்சொல்லைச் சேமிக்கவும்",
@@ -521,7 +521,7 @@
         "hotkey_volumeMute": "தொகுதி முடக்கு",
         "hotkey_volumeUp": "தொகுதி",
         "language": "மொழி",
-        "language_description": "பயன்பாட்டிற்கான மொழியை அமைக்கிறது ($ t (பொதுவானது.",
+        "language_description": "பயன்பாட்டிற்கான மொழியை அமைக்கிறது ($ t (பொதுவானது",
         "lastfmApiKey": "{{lastfm}} பநிஇ key",
         "lastfmApiKey_description": "{{lastfm} க்கு க்கான பநிஇ விசை. கவர் கலைக்கு தேவை",
         "lyricFetch": "இணையத்திலிருந்து வரிகளை பெறுங்கள்",
@@ -615,7 +615,7 @@
         "discordIdleStatus_description": "இயக்கப்பட்டால், பிளேயர் சும்மா இருக்கும்போது நிலையைப் புதுப்பிக்கவும்",
         "discordListening_description": "விளையாடுவதற்குப் பதிலாக கேட்பது என்று அந்த நிலையைக் காட்டுங்கள்",
         "discordRichPresence": "{{discord}} பணக்கார இருப்பு",
-        "discordRichPresence_description": "{{discord}} பணக்கார இருப்பில் பின்னணி நிலையை இயக்கவும். பட விசைகள்: {{icon}}, {{playing}}, மற்றும் {{paused}} ",
+        "discordRichPresence_description": "{{discord}} பணக்கார இருப்பில் பின்னணி நிலையை இயக்கவும். பட விசைகள்: {{icon}}, {{playing}}, மற்றும் {{paused}}",
         "customCss_description": "தனிப்பயன் சிஎச்எச் உள்ளடக்கம். குறிப்பு: உள்ளடக்கம் மற்றும் தொலைநிலை முகவரி கள் அனுமதிக்கப்படாத பண்புகள். உங்கள் உள்ளடக்கத்தின் முன்னோட்டம் கீழே காட்டப்பட்டுள்ளது. நீங்கள் அமைக்காத கூடுதல் புலங்கள் சுத்திகரிப்பு காரணமாக உள்ளன.",
         "doubleClickBehavior": "இரட்டை சொடுக்கு செய்யும் போது தேடப்பட்ட அனைத்து தடங்களையும் வரிசைப்படுத்தவும்",
         "doubleClickBehavior_description": "உண்மை என்றால், தட தேடலில் பொருந்தக்கூடிய அனைத்து தடங்களும் வரிசையில் நிற்கப்படும். இல்லையெனில், சொடுக்கு செய்யப்பட்ட ஒன்று மட்டுமே வரிசையில் நிற்கப்படும்",
@@ -705,14 +705,14 @@
                 "rowIndex": "வரிசை அட்டவணை",
                 "size": "$ t (common.size)",
                 "trackNumber": "ட்ராக் எண்",
-                "year": "$ t (பொதுவானது.",
+                "year": "$ t (பொதுவானது",
                 "lastPlayed": "கடைசியாக விளையாடியது",
                 "note": "$ t (பொதுவானது. குறிப்பு)",
                 "owner": "$ t (பொதுவானவர்)",
                 "actions": "$ t (common.action_other)",
                 "albumArtist": "$ t (entity.albumartist_one)",
                 "discNumber": "வட்டு எண்",
-                "duration": "$ t (பொதுவானது.",
+                "duration": "$ t (பொதுவானது",
                 "favorite": "$ t (common.foavorite)",
                 "genre": "$ t (entity.genre_one)",
                 "path": "$ t (common.path)",

src/i18n/locales/zh-Hans.json

@@ -111,7 +111,9 @@
         "preview": "预览",
         "translation": "翻译",
         "additionalParticipants": "其他参与者",
-        "tags": "标签"
+        "tags": "标签",
+        "viewReleaseNotes": "查看发行说明",
+        "newVersion": "已安装新版本 ({{version}})"
     },
     "entity": {
         "albumArtist_other": "专辑艺术家",
@@ -323,7 +325,7 @@
         "discordUpdateInterval": "{{discord}} rich presence 更新间隔",
         "discordApplicationId_description": "{{discord}} rich presence 应用 id（默认为 {{defaultId}}）",
         "discordUpdateInterval_description": "更新间隔秒数（至少 15 秒）",
-        "discordRichPresence_description": "在 {{discord}} rich presence 中显示播放状态。图片键为：{{icon}}、{{playing}} 和 {{paused}} ",
+        "discordRichPresence_description": "在 {{discord}} rich presence 中显示播放状态。图片键为：{{icon}}、{{playing}} 和 {{paused}}",
         "accentColor": "强调色",
         "accentColor_description": "设置应用的强调色",
         "replayGainPreamp_description": "调整应用在{{ReplayGain}}值上的前置放大增益",
@@ -399,7 +401,13 @@
         "musicbrainz": "显示 musicbrainz 链接",
         "musicbrainz_description": "在 mbid 的艺术家/专辑页面上显示 musicbrainz 的链接",
         "lastfm": "显示 last.fm 链接",
-        "lastfm_description": "在艺术家/专辑页面上显示 last.fm 的链接"
+        "lastfm_description": "在艺术家/专辑页面上显示 last.fm 的链接",
+        "preferLocalLyrics_description": "优先选择本地歌词（如有），而不是远程歌词",
+        "preferLocalLyrics": "首选本地歌词",
+        "discordPausedStatus": "暂停时显示rich presence",
+        "discordPausedStatus_description": "启用后将在播放器暂停时显示状态",
+        "preservePitch": "保持音高",
+        "preservePitch_description": "在调整播放速度时保持音高"
     },
     "error": {
         "remotePortWarning": "重启服务器使新端口生效",
@@ -483,7 +491,8 @@
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
             "albumArtists": "$t(entity.albumArtist_other)",
-            "shared": "共享$t(entity.playlist_other)"
+            "shared": "共享$t(entity.playlist_other)",
+            "myLibrary": "我的媒体库"
         },
         "fullscreenPlayer": {
             "config": {
@@ -659,7 +668,8 @@
         },
         "queryEditor": {
             "input_optionMatchAll": "匹配全部",
-            "input_optionMatchAny": "匹配任何"
+            "input_optionMatchAny": "匹配任何",
+            "title": "查询编辑器"
         },
         "editPlaylist": {
             "title": "编辑$t(entity.playlist_one)",
@@ -695,7 +705,9 @@
             "view": {
                 "table": "表格",
                 "poster": "海报",
-                "card": "卡片"
+                "card": "卡片",
+                "grid": "网格",
+                "list": "列表"
             },
             "label": {
                 "releaseDate": "发布日期",

src/i18n/locales/zh-Hant.json

@@ -261,7 +261,7 @@
         "discordApplicationId_description": "{{discord}} rich presence 應用 id（默認爲 {{defaultId}}）",
         "discordIdleStatus": "顯示 rich presence 閑置狀態",
         "discordIdleStatus_description": "啓用後將會在播放器閑置時更新狀態",
-        "discordRichPresence_description": "在 {{discord}} rich presence 中顯示播放狀態。圖片鍵爲：{{icon}}、{{playing}} 和 {{paused}} ",
+        "discordRichPresence_description": "在 {{discord}} rich presence 中顯示播放狀態。圖片鍵爲：{{icon}}、{{playing}} 和 {{paused}}",
         "discordUpdateInterval": "{{discord}} rich presence 更新間隔",
         "discordUpdateInterval_description": "更新間隔秒數（至少 15 秒）",
         "enableRemote": "啓用遠程控制服務器",

src/main/features/core/lyrics/netease.ts

@@ -201,25 +201,23 @@ function mergeLyrics(original: string | undefined, translated: string | undefine
         return original;
     }
 
-    // Iterate through each line of the original LRC. If a translation exists for
-    // the same timestamp, insert it as a new, fully-formatted LRC line.
-    const finalLines = original.split('\n').flatMap((line) => {
+    // Iterate through each line of the original LRC. If a translation exists for the same timestamp, append the translated text after the original text.
+    const finalLines = original.split('\n').map((line) => {
         const match = line.match(lrcLineRegex);
 
         if (match) {
             const timestamp = match[1];
+            const originalText = match[2].trim();
             const translatedText = translatedMap.get(timestamp);
 
-            if (translatedText) {
-                // Return an array containing both the original line and the new translated line.
-                // flatMap will flatten this into the final array of lines.
-                const translatedLine = `[${timestamp}]${translatedText}`;
-                return [line, translatedLine];
+            if (translatedText && originalText) {
+                // Append and add a break delimiter to separate the original and translated text
+                return [`[${timestamp}]${originalText}`, translatedText].join('_BREAK_');
             }
         }
 
-        // If no match or no translation is found, return only the original line.
-        return [line];
+        // If no match or no translation is found, return the original line unchanged.
+        return line;
     });
 
     return finalLines.join('\n');

src/main/features/core/player/index.ts

@@ -105,7 +105,7 @@ const createMpv = async (data: {
     try {
         await mpv.start();
     } catch (error: any) {
-        console.log('mpv failed to start', error);
+        console.error('mpv failed to start', error);
     } finally {
         await mpv.setMultipleProperties(properties || {});
     }

src/main/features/core/remote/index.ts

@@ -405,7 +405,7 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                             }
                             case 'proxy': {
                                 const toFetch = currentState.song?.imageUrl?.replaceAll(
-                                    /&(size|width|height=\d+)/g,
+                                    /&(size|width|height)=\d+/g,
                                     '',
                                 );
 

src/main/features/linux/mpris.ts

@@ -177,7 +177,7 @@ ipcMain.on('update-song', (_event, song: QueueSong | undefined) => {
             'xesam:userRating': song.userRating ? song.userRating / 5 : null,
         };
     } catch (err) {
-        console.log(err);
+        console.error(err);
     }
 });
 

src/main/index.ts

@@ -49,7 +49,7 @@ export default class AppUpdater {
 protocol.registerSchemesAsPrivileged([{ privileges: { bypassCSP: true }, scheme: 'feishin' }]);
 
 process.on('uncaughtException', (error: any) => {
-    console.log('Error in main process', error);
+    console.error('Error in main process', error);
 });
 
 if (store.get('ignore_ssl')) {

src/remote/components/player-image.tsx

@@ -12,7 +12,7 @@ export const PlayerImage = ({ src }: PlayerImageProps) => {
         <img
             className={styles.container}
             onError={() => send({ event: 'proxy' })}
-            src={src?.replaceAll(/&(size|width|height=\d+)/g, '')}
+            src={src?.replaceAll(/&(size|width|height)=\d+/g, '')}
         />
     );
 };

src/renderer/api/subsonic/subsonic-controller.ts

@@ -398,8 +398,124 @@ export const SubsonicController: ControllerEndpoint = {
             totalRecordCount: null,
         };
     },
-    getAlbumListCount: async (args) =>
-        SubsonicController.getAlbumList(args).then((res) => res!.totalRecordCount!),
+    getAlbumListCount: async (args) => {
+        const { apiClientProps, query } = args;
+
+        if (query.searchTerm) {
+            let fetchNextPage = true;
+            let startIndex = 0;
+            let totalRecordCount = 0;
+
+            while (fetchNextPage) {
+                const res = await ssApiClient(apiClientProps).search3({
+                    query: {
+                        albumCount: 500,
+                        albumOffset: startIndex,
+                        artistCount: 0,
+                        artistOffset: 0,
+                        query: query.searchTerm || '""',
+                        songCount: 0,
+                        songOffset: 0,
+                    },
+                });
+
+                if (res.status !== 200) {
+                    throw new Error('Failed to get album list count');
+                }
+
+                const albumCount = (res.body.searchResult3?.album || [])?.length;
+
+                totalRecordCount += albumCount;
+                startIndex += albumCount;
+
+                // The max limit size for Subsonic is 500
+                fetchNextPage = albumCount === 500;
+            }
+
+            return totalRecordCount;
+        }
+
+        if (query.favorite) {
+            const res = await ssApiClient(apiClientProps).getStarred({
+                query: {
+                    musicFolderId: query.musicFolderId,
+                },
+            });
+
+            if (res.status !== 200) {
+                throw new Error('Failed to get album list');
+            }
+
+            return (res.body.starred?.album || []).length || 0;
+        }
+
+        let type = AlbumListSortType.ALPHABETICAL_BY_NAME;
+
+        let fetchNextPage = true;
+        let startIndex = 0;
+        let totalRecordCount = 0;
+
+        if (query.genres?.length) {
+            type = AlbumListSortType.BY_GENRE;
+        }
+
+        if (query.minYear || query.maxYear) {
+            type = AlbumListSortType.BY_YEAR;
+        }
+
+        let fromYear: number | undefined;
+        let toYear: number | undefined;
+
+        if (query.minYear) {
+            fromYear = query.minYear;
+            toYear = dayjs().year();
+        }
+
+        if (query.maxYear) {
+            toYear = query.maxYear;
+
+            if (!query.minYear) {
+                fromYear = 0;
+            }
+        }
+
+        while (fetchNextPage) {
+            const res = await ssApiClient(apiClientProps).getAlbumList2({
+                query: {
+                    fromYear,
+                    genre: query.genres?.length ? query.genres[0] : undefined,
+                    musicFolderId: query.musicFolderId,
+                    offset: startIndex,
+                    size: 500,
+                    toYear,
+                    type,
+                },
+            });
+
+            const headers = res.headers;
+
+            // Navidrome returns the total count in the header
+            if (headers.get('x-total-count')) {
+                fetchNextPage = false;
+                totalRecordCount = Number(headers.get('x-total-count'));
+                break;
+            }
+
+            if (res.status !== 200) {
+                throw new Error('Failed to get album list count');
+            }
+
+            const albumCount = res.body.albumList2.album.length;
+
+            totalRecordCount += albumCount;
+            startIndex += albumCount;
+
+            // The max limit size for Subsonic is 500
+            fetchNextPage = albumCount === 500;
+        }
+
+        return totalRecordCount;
+    },
     getArtistList: async (args) => {
         const { apiClientProps, query } = args;
 

src/renderer/api/utils.ts

@@ -10,7 +10,7 @@ export const authenticationFailure = (currentServer: null | ServerListItem) => {
     if (currentServer) {
         const serverId = currentServer.id;
         const token = currentServer.ndCredential;
-        console.log(`token is expired: ${token}`);
+        console.error(`token is expired: ${token}`);
         useAuthStore.getState().actions.updateServer(serverId, { ndCredential: undefined });
         useAuthStore.getState().actions.setCurrentServer(null);
     }

src/renderer/components/audio-player/index.tsx

@@ -120,6 +120,7 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
     const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
     const playback = useSettingsStore((state) => state.playback.mpvProperties);
     const shouldUseWebAudio = useSettingsStore((state) => state.playback.webAudio);
+    const preservesPitch = useSettingsStore((state) => state.playback.preservePitch);
     const { resetSampleRate } = useSettingsStoreActions();
     const playbackSpeed = useSpeed();
     const { transcode } = usePlaybackSettings();
@@ -230,21 +231,23 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
                 // calling play() is not necessarily a safe option (https://developer.chrome.com/blog/play-request-was-interrupted)
                 // In practice, this failure is only likely to happen when using the 0-second wav:
                 // play() + play() in rapid succession will cause problems as the frist one ends the track.
-                player1Ref.current
-                    ?.getInternalPlayer()
-                    ?.play()
-                    .catch(() => {});
+                const internalPlayer = player1Ref.current?.getInternalPlayer();
+                if (internalPlayer) {
+                    internalPlayer.preservesPitch = preservesPitch;
+                    internalPlayer.play().catch(() => {});
+                }
             } else {
-                player2Ref.current
-                    ?.getInternalPlayer()
-                    ?.play()
-                    .catch(() => {});
+                const internalPlayer = player2Ref.current?.getInternalPlayer();
+                if (internalPlayer) {
+                    internalPlayer.preservesPitch = preservesPitch;
+                    internalPlayer.play().catch(() => {});
+                }
             }
         } else {
             player1Ref.current?.getInternalPlayer()?.pause();
             player2Ref.current?.getInternalPlayer()?.pause();
         }
-    }, [currentPlayer, status]);
+    }, [currentPlayer, status, preservesPitch]);
 
     const handleCrossfade1 = useCallback(
         (e: AudioPlayerProgress) => {

src/renderer/components/virtual-table/hooks/use-virtual-table.ts

@@ -251,7 +251,7 @@ export const useVirtualTable = <TFilter extends BaseQuery<any>>({
                     properties.table.pagination.itemsPerPage;
                 event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
             } catch (err) {
-                console.log(err);
+                console.error(err);
             }
 
             if (isSearchParams) {

src/renderer/features/action-required/components/route-error-boundary.tsx

@@ -17,7 +17,7 @@ const RouteErrorBoundary = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const error = useRouteError() as any;
-    console.log('error', error);
+    console.error('error', error);
 
     const handleReload = () => {
         navigate(0);

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -62,7 +62,8 @@ const ActionRequiredRoute = () => {
                     </Group>
                     <Stack mt="2rem">
                         {canReturnHome && <Navigate to={AppRoute.HOME} />}
-                        {!displayedCheck && (
+                        {/* This should be displayed if a credential is required */}
+                        {isCredentialRequired && (
                             <Group
                                 justify="center"
                                 wrap="nowrap"

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -414,18 +414,23 @@ export const AlbumListHeaderFilters = ({
             Object.values(filter?._custom?.jellyfin).some((value) => value !== undefined);
 
         const isSubsonicFilterApplied =
-            server?.type === ServerType.SUBSONIC &&
-            (filter.maxYear || filter.minYear || filter.favorite);
+            server?.type === ServerType.SUBSONIC && (filter.maxYear || filter.minYear);
+
+        const isCompilationFilterApplied =
+            server?.type === ServerType.NAVIDROME && filter.compilation !== undefined;
 
         return (
             isNavidromeFilterApplied ||
             isJellyfinFilterApplied ||
             isSubsonicFilterApplied ||
-            filter.genres?.length
+            filter.genres?.length ||
+            filter.favorite !== undefined ||
+            isCompilationFilterApplied
         );
     }, [
         filter?._custom?.jellyfin,
         filter?._custom?.navidrome,
+        filter.compilation,
         filter.favorite,
         filter.genres?.length,
         filter.maxYear,

src/renderer/features/albums/components/jellyfin-album-filters.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { ChangeEvent, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -12,8 +12,8 @@ import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
-import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import {
     AlbumArtistListSort,
     AlbumListQuery,
@@ -72,15 +72,15 @@ export const JellyfinAlbumFilters = ({
         return filter?._custom?.jellyfin?.Tags?.split('|');
     }, [filter?._custom?.jellyfin?.Tags]);
 
-    const toggleFilters = [
+    const yesNoFilter = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            onChange: (favorite?: boolean) => {
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
                         _custom: filter?._custom,
-                        favorite: e.currentTarget.checked ? true : undefined,
+                        favorite,
                     },
                     itemType: LibraryItem.ALBUM,
                     key: pageKey,
@@ -189,16 +189,16 @@ export const JellyfinAlbumFilters = ({
 
     return (
         <Stack p="0.8rem">
-            {toggleFilters.map((filter) => (
+            {yesNoFilter.map((filter) => (
                 <Group
                     justify="space-between"
                     key={`nd-filter-${filter.label}`}
                 >
                     <Text>{filter.label}</Text>
-                    <Switch
-                        checked={filter?.value || false}
+                    <YesNoSelect
                         onChange={filter.onChange}
                         size="xs"
+                        value={filter.value}
                     />
                 </Group>
             ))}
@@ -250,7 +250,7 @@ export const JellyfinAlbumFilters = ({
                     searchValue={albumArtistSearchTerm}
                 />
             </Group>
-            {tagsQuery.data?.boolTags?.length && (
+            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
                 <Group grow>
                     <MultiSelectWithInvalidData
                         clearable

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -14,6 +14,7 @@ import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import {
     AlbumArtistListSort,
     AlbumListQuery,
@@ -78,6 +79,41 @@ export const NavidromeAlbumFilters = ({
         serverId,
     });
 
+    const yesNoUndefinedFilters = [
+        {
+            label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
+            onChange: (favorite?: boolean) => {
+                const updatedFilters = setFilter({
+                    customFilters,
+                    data: {
+                        _custom: filter._custom,
+                        favorite,
+                    },
+                    itemType: LibraryItem.ALBUM,
+                    key: pageKey,
+                }) as AlbumListFilter;
+                onFilterChange(updatedFilters);
+            },
+            value: filter.favorite,
+        },
+        {
+            label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
+            onChange: (compilation?: boolean) => {
+                const updatedFilters = setFilter({
+                    customFilters,
+                    data: {
+                        _custom: filter._custom,
+                        compilation,
+                    },
+                    itemType: LibraryItem.ALBUM,
+                    key: pageKey,
+                }) as AlbumListFilter;
+                onFilterChange(updatedFilters);
+            },
+            value: filter.compilation,
+        },
+    ];
+
     const toggleFilters = [
         {
             label: t('filter.isRated', { postProcess: 'sentenceCase' }),
@@ -100,38 +136,6 @@ export const NavidromeAlbumFilters = ({
             },
             value: filter._custom?.navidrome?.has_rating,
         },
-        {
-            label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
-                const updatedFilters = setFilter({
-                    customFilters,
-                    data: {
-                        _custom: filter._custom,
-                        favorite: e.currentTarget.checked ? true : undefined,
-                    },
-                    itemType: LibraryItem.ALBUM,
-                    key: pageKey,
-                }) as AlbumListFilter;
-                onFilterChange(updatedFilters);
-            },
-            value: filter.favorite,
-        },
-        {
-            label: t('filter.isCompilation', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
-                const updatedFilters = setFilter({
-                    customFilters,
-                    data: {
-                        _custom: filter._custom,
-                        compilation: e.currentTarget.checked ? true : undefined,
-                    },
-                    itemType: LibraryItem.ALBUM,
-                    key: pageKey,
-                }) as AlbumListFilter;
-                onFilterChange(updatedFilters);
-            },
-            value: filter.compilation,
-        },
         {
             label: t('filter.isRecentlyPlayed', { postProcess: 'sentenceCase' }),
             onChange: (e: ChangeEvent<HTMLInputElement>) => {
@@ -236,6 +240,19 @@ export const NavidromeAlbumFilters = ({
 
     return (
         <Stack p="0.8rem">
+            {yesNoUndefinedFilters.map((filter) => (
+                <Group
+                    justify="space-between"
+                    key={`nd-filter-${filter.label}`}
+                >
+                    <Text>{filter.label}</Text>
+                    <YesNoSelect
+                        onChange={filter.onChange}
+                        size="xs"
+                        value={filter.value}
+                    />
+                </Group>
+            ))}
             {toggleFilters.map((filter) => (
                 <Group
                     justify="space-between"

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -103,6 +103,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         },
         query: {
             artistIds: [routeId],
+            compilation: false,
             limit: 15,
             sortBy: AlbumListSort.RELEASE_DATE,
             sortOrder: SortOrder.DESC,

src/renderer/features/discord-rpc/use-discord-rpc.ts

@@ -24,8 +24,13 @@ export const useDiscordRpc = () => {
             current: (number | PlayerStatus | QueueSong | undefined)[],
             previous: (number | PlayerStatus | QueueSong | undefined)[],
         ) => {
-            // No current song, or we switched to a new track and the player was paused (end of album, etc.)
-            if (!current[0] || (current[0] && current[2] === 'paused' && current[1] === 0))
+            if (
+                !current[0] || // No track
+                (current[0] &&
+                    current[2] === 'paused' && // Track paused
+                    (discordSettings.showPaused ? current[1] === 0 : true)) || // Beginning of track (only if show paused setting enabled)
+                (discordSettings.showPaused ? false : current[1] === 0) // Beginning of track (only if show paused setting disabled)
+            )
                 return discordRpc?.clearActivity();
 
             // Handle change detection
@@ -122,6 +127,7 @@ export const useDiscordRpc = () => {
         [
             discordSettings.showAsListening,
             discordSettings.showServerImage,
+            discordSettings.showPaused,
             generalSettings.lastfmApiKey,
             lastUniqueId,
         ],

src/renderer/features/lyrics/lyric-line.module.css

@@ -1,7 +1,9 @@
 .lyric-line {
     padding: 0 1rem;
     font-weight: 600;
+    line-height: 1.2;
     color: var(--theme-colors-foreground);
+    word-break: normal;
     opacity: 0.5;
     transition:
         opacity 0.3s ease-in-out,

src/renderer/features/lyrics/lyric-line.tsx

@@ -3,7 +3,8 @@ import { ComponentPropsWithoutRef } from 'react';
 
 import styles from './lyric-line.module.css';
 
-import { TextTitle } from '/@/shared/components/text-title/text-title';
+import { Box } from '/@/shared/components/box/box';
+import { Stack } from '/@/shared/components/stack/stack';
 
 interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
     alignment: 'center' | 'left' | 'right';
@@ -12,8 +13,10 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
 }
 
 export const LyricLine = ({ alignment, className, fontSize, text, ...props }: LyricLineProps) => {
+    const lines = text.split('_BREAK_');
+
     return (
-        <TextTitle
+        <Box
             className={clsx(styles.lyricLine, className)}
             style={{
                 fontSize,
@@ -21,7 +24,11 @@ export const LyricLine = ({ alignment, className, fontSize, text, ...props }: Ly
             }}
             {...props}
         >
-            {text}
-        </TextTitle>
+            <Stack gap={0}>
+                {lines.map((line, index) => (
+                    <span key={index}>{line}</span>
+                ))}
+            </Stack>
+        </Box>
     );
 };

src/renderer/features/lyrics/queries/lyric-query.ts

@@ -86,7 +86,7 @@ export const useSongLyricsBySong = (
     song: QueueSong | undefined,
 ): UseQueryResult<FullLyricsMetadata | StructuredLyric[]> => {
     const { query } = args;
-    const { fetch } = useLyricsSettings();
+    const { fetch, preferLocalLyrics } = useLyricsSettings();
     const server = getServerById(song?.serverId);
 
     return useQuery({
@@ -97,6 +97,9 @@ export const useSongLyricsBySong = (
             if (!server) throw new Error('Server not found');
             if (!song) return null;
 
+            let localLyrics: FullLyricsMetadata | null | StructuredLyric[] = null;
+            let remoteLyrics: FullLyricsMetadata | null | StructuredLyric[] = null;
+
             if (hasFeature(server, ServerFeature.LYRICS_MULTIPLE_STRUCTURED)) {
                 const subsonicLyrics = await api.controller
                     .getStructuredLyrics({
@@ -106,7 +109,7 @@ export const useSongLyricsBySong = (
                     .catch(console.error);
 
                 if (subsonicLyrics?.length) {
-                    return subsonicLyrics;
+                    localLyrics = subsonicLyrics;
                 }
             } else if (hasFeature(server, ServerFeature.LYRICS_SINGLE_STRUCTURED)) {
                 const jfLyrics = await api.controller
@@ -114,10 +117,10 @@ export const useSongLyricsBySong = (
                         apiClientProps: { server, signal },
                         query: { songId: song.id },
                     })
-                    .catch((err) => console.log(err));
+                    .catch((err) => console.error(err));
 
                 if (jfLyrics) {
-                    return {
+                    localLyrics = {
                         artist: song.artists?.[0]?.name,
                         lyrics: jfLyrics,
                         name: song.name,
@@ -126,7 +129,7 @@ export const useSongLyricsBySong = (
                     };
                 }
             } else if (song.lyrics) {
-                return {
+                localLyrics = {
                     artist: song.artists?.[0]?.name,
                     lyrics: formatLyrics(song.lyrics),
                     name: song.name,
@@ -135,12 +138,16 @@ export const useSongLyricsBySong = (
                 };
             }
 
+            if (preferLocalLyrics && localLyrics) {
+                return localLyrics;
+            }
+
             if (fetch) {
                 const remoteLyricsResult: InternetProviderLyricResponse | null =
                     await lyricsIpc?.getRemoteLyricsBySong(song);
 
                 if (remoteLyricsResult) {
-                    return {
+                    remoteLyrics = {
                         ...remoteLyricsResult,
                         lyrics: formatLyrics(remoteLyricsResult.lyrics),
                         remote: true,
@@ -148,6 +155,14 @@ export const useSongLyricsBySong = (
                 }
             }
 
+            if (remoteLyrics) {
+                return remoteLyrics;
+            }
+
+            if (localLyrics) {
+                return localLyrics;
+            }
+
             return null;
         },
         queryKey: queryKeys.songs.lyrics(server?.id || '', query),
@@ -183,9 +198,7 @@ export const useSongLyricsByRemoteId = (
             );
         },
         queryFn: async () => {
-            const remoteLyricsResult = await lyricsIpc?.getRemoteLyricsByRemoteId(
-                query as LyricGetQuery,
-            );
+            const remoteLyricsResult = await lyricsIpc?.getRemoteLyricsByRemoteId(query as any);
 
             if (remoteLyricsResult) {
                 return formatLyrics(remoteLyricsResult);

src/renderer/features/lyrics/synchronized-lyrics.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import isElectron from 'is-electron';
-import { useCallback, useEffect, useRef } from 'react';
+import { Fragment, useCallback, useEffect, useRef } from 'react';
 
 import styles from './synchronized-lyrics.module.css';
 
@@ -338,7 +338,7 @@ export const SynchronizedLyrics = ({
                 />
             )}
             {lyrics.map(([time, text], idx) => (
-                <div key={idx}>
+                <Fragment key={idx}>
                     <LyricLine
                         alignment={settings.alignment}
                         className="lyric-line synchronized"
@@ -356,7 +356,7 @@ export const SynchronizedLyrics = ({
                             text={translatedLyrics.split('\n')[idx]}
                         />
                     )}
-                </div>
+                </Fragment>
             ))}
         </div>
     );

src/renderer/features/player/components/full-screen-player-image.module.css

@@ -2,8 +2,6 @@
     position: absolute;
     max-width: 100%;
     height: 100%;
-    object-fit: var(--theme-image-fit);
-    object-position: 50% 100%;
     border-radius: 5px;
     filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%));
 }
@@ -24,8 +22,13 @@
     justify-content: center;
     padding: 1rem;
     text-align: center;
+    cursor: default;
     border-radius: 5px;
 
+    a {
+        cursor: pointer;
+    }
+
     h1 {
         font-size: 3.5vh;
     }

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -16,9 +16,7 @@ import { Center } from '/@/shared/components/center/center';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
-import { Image } from '/@/shared/components/image/image';
 import { Stack } from '/@/shared/components/stack/stack';
-import { TextTitle } from '/@/shared/components/text-title/text-title';
 import { Text } from '/@/shared/components/text/text';
 import { PlayerData, QueueSong } from '/@/shared/types/domain-types';
 
@@ -52,9 +50,14 @@ const scaleImageUrl = (imageSize: number, url?: null | string) => {
         .replace(/&height=\d+/, `&height=${imageSize}`);
 };
 
-const MotionImage = motion.create(Image);
+const MotionImage = motion.img;
+
+const ImageWithPlaceholder = ({
+    className,
+    ...props
+}: HTMLMotionProps<'img'> & { placeholder?: string }) => {
+    const nativeAspectRatio = useSettingsStore((store) => store.general.nativeAspectRatio);
 
-const ImageWithPlaceholder = ({ ...props }: HTMLMotionProps<'img'> & { placeholder?: string }) => {
     if (!props.src) {
         return (
             <Center
@@ -76,7 +79,11 @@ const ImageWithPlaceholder = ({ ...props }: HTMLMotionProps<'img'> & { placehold
 
     return (
         <MotionImage
-            className={styles.image}
+            className={clsx(styles.image, className)}
+            style={{
+                objectFit: nativeAspectRatio ? 'contain' : 'cover',
+                width: nativeAspectRatio ? 'auto' : '100%',
+            }}
             {...props}
         />
     );
@@ -201,45 +208,35 @@ export const FullScreenPlayerImage = () => {
             </div>
             <Stack
                 className={styles.metadataContainer}
-                gap="xs"
+                gap="md"
                 maw="100%"
             >
-                <TextTitle
+                <Text
                     fw={900}
-                    order={1}
+                    lh="1.2"
                     overflow="hidden"
+                    size="4xl"
                     w="100%"
                 >
                     {currentSong?.name}
-                </TextTitle>
-                <TextTitle
+                </Text>
+                <Text
                     component={Link}
-                    fw={600}
                     isLink
-                    order={3}
                     overflow="hidden"
-                    style={{
-                        textShadow: 'var(--theme-fullscreen-player-text-shadow)',
-                    }}
+                    size="xl"
                     to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
                         albumId: currentSong?.albumId || '',
                     })}
                     w="100%"
                 >
-                    {currentSong?.album}{' '}
-                </TextTitle>
-                <TextTitle
-                    key="fs-artists"
-                    order={3}
-                    style={{
-                        textShadow: 'var(--theme-fullscreen-player-text-shadow)',
-                    }}
-                >
+                    {currentSong?.album}
+                </Text>
+                <Text key="fs-artists">
                     {currentSong?.artists?.map((artist, index) => (
                         <Fragment key={`fs-artist-${artist.id}`}>
                             {index > 0 && (
                                 <Text
-                                    isMuted
                                     style={{
                                         display: 'inline-block',
                                         padding: '0 0.5rem',
@@ -250,12 +247,7 @@ export const FullScreenPlayerImage = () => {
                             )}
                             <Text
                                 component={Link}
-                                fw={600}
                                 isLink
-                                isMuted
-                                style={{
-                                    textShadow: 'var(--theme-fullscreen-player-text-shadow)',
-                                }}
                                 to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                                     albumArtistId: artist.id,
                                 })}
@@ -264,7 +256,7 @@ export const FullScreenPlayerImage = () => {
                             </Text>
                         </Fragment>
                     ))}
-                </TextTitle>
+                </Text>
                 <Group
                     justify="center"
                     mt="sm"

src/renderer/features/player/components/full-screen-player.tsx

@@ -1,6 +1,6 @@
 import { useHotkeys } from '@mantine/hooks';
 import { motion, Variants } from 'motion/react';
-import { CSSProperties, useLayoutEffect, useRef } from 'react';
+import { CSSProperties, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router';
 
@@ -32,7 +32,11 @@ import { Platform } from '/@/shared/types/types';
 
 const mainBackground = 'var(--theme-colors-background)';
 
-const Controls = () => {
+interface ControlsProps {
+    isPageHovered: boolean;
+}
+
+const Controls = ({ isPageHovered }: ControlsProps) => {
     const { t } = useTranslation();
     const {
         dynamicBackground,
@@ -77,7 +81,7 @@ const Controls = () => {
                 iconProps={{ size: 'lg' }}
                 onClick={handleToggleFullScreenPlayer}
                 tooltip={{ label: t('common.minimize', { postProcess: 'titleCase' }) }}
-                variant="subtle"
+                variant={isPageHovered ? 'default' : 'subtle'}
             />
             <Popover position="bottom-start">
                 <Popover.Target>
@@ -85,7 +89,7 @@ const Controls = () => {
                         icon="settings"
                         iconProps={{ size: 'lg' }}
                         tooltip={{ label: t('common.configure', { postProcess: 'titleCase' }) }}
-                        variant="subtle"
+                        variant={isPageHovered ? 'default' : 'subtle'}
                     />
                 </Popover.Target>
                 <Popover.Dropdown>
@@ -410,6 +414,8 @@ export const FullScreenPlayer = () => {
     const { setStore } = useFullScreenPlayerStoreActions();
     const { windowBarStyle } = useWindowSettings();
 
+    const [isPageHovered, setIsPageHovered] = useState(false);
+
     const location = useLocation();
     const isOpenedRef = useRef<boolean | null>(null);
 
@@ -441,10 +447,12 @@ export const FullScreenPlayer = () => {
             custom={{ background, backgroundImage, dynamicBackground, windowBarStyle }}
             exit="closed"
             initial="closed"
+            onMouseEnter={() => setIsPageHovered(true)}
+            onMouseLeave={() => setIsPageHovered(false)}
             transition={{ duration: 2 }}
             variants={containerVariants}
         >
-            <Controls />
+            <Controls isPageHovered={isPageHovered} />
             {dynamicBackground && (
                 <div
                     className={styles.backgroundImageOverlay}

src/renderer/features/player/components/left-controls.tsx

@@ -71,7 +71,7 @@ export const LeftControls = () => {
             <LayoutGroup>
                 <AnimatePresence
                     initial={false}
-                    mode="wait"
+                    mode="popLayout"
                 >
                     {!hideImage && (
                         <div className={styles.imageWrapper}>
@@ -83,7 +83,7 @@ export const LeftControls = () => {
                                 key="playerbar-image"
                                 onClick={handleToggleFullScreenPlayer}
                                 role="button"
-                                transition={{ duration: 0.3, ease: 'easeInOut' }}
+                                transition={{ duration: 0.2, ease: 'easeIn' }}
                             >
                                 <Tooltip
                                     label={t('player.toggleFullscreenPlayer', {

src/renderer/features/player/components/player-button.module.css

@@ -37,6 +37,7 @@
 }
 
 .main {
+    background: var(--theme-colors-foreground) !important;
     border-radius: 50%;
 
     svg {

src/renderer/features/player/components/player-button.tsx

@@ -15,7 +15,7 @@ interface PlayerButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
 }
 
 export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
-    ({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps) => {
+    ({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps, ref) => {
         if (tooltip) {
             return (
                 <Tooltip {...tooltip}>
@@ -23,6 +23,7 @@ export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
                         className={clsx({
                             [styles.active]: isActive,
                         })}
+                        ref={ref}
                         {...rest}
                         onClick={(e) => {
                             e.stopPropagation();
@@ -41,6 +42,7 @@ export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
                 className={clsx(styles.playerButton, styles[variant], {
                     [styles.active]: isActive,
                 })}
+                ref={ref}
                 {...rest}
                 onClick={(e) => {
                     e.stopPropagation();
@@ -58,21 +60,23 @@ interface PlayButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
     isPaused?: boolean;
 }
 
-export const PlayButton = ({ isPaused, ...props }: PlayButtonProps) => {
-    return (
-        <ActionIcon
-            className={styles.main}
-            icon={isPaused ? 'mediaPlay' : 'mediaPause'}
-            iconProps={{
-                size: 'lg',
-            }}
-            tooltip={
-                isPaused
-                    ? t('player.play', { postProcess: 'sentenceCase' })
-                    : t('player.pause', { postProcess: 'sentenceCase' })
-            }
-            variant="white"
-            {...props}
-        />
-    );
-};
+export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
+    ({ isPaused, ...props }: PlayButtonProps, ref) => {
+        return (
+            <ActionIcon
+                className={styles.main}
+                icon={isPaused ? 'mediaPlay' : 'mediaPause'}
+                iconProps={{
+                    size: 'lg',
+                }}
+                ref={ref}
+                tooltip={{
+                    label: isPaused
+                        ? (t('player.play', { postProcess: 'sentenceCase' }) as string)
+                        : (t('player.pause', { postProcess: 'sentenceCase' }) as string),
+                }}
+                {...props}
+            />
+        );
+    },
+);

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -207,7 +207,7 @@ export const PlaylistDetailSongListContent = ({ songs, tableRef }: PlaylistDetai
                 const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage;
                 event.api?.ensureIndexVisible(currentPageStartIndex, 'top');
             } catch (err) {
-                console.log(err);
+                console.error(err);
             }
 
             setPagination(playlistId, {

src/renderer/features/settings/components/playback/audio-settings.tsx

@@ -155,6 +155,26 @@ export const AudioSettings = ({ hasFancyAudio }: { hasFancyAudio: boolean }) =>
                 postProcess: 'sentenceCase',
             }),
         },
+        {
+            control: (
+                <Switch
+                    defaultChecked={settings.preservePitch}
+                    onChange={(e) => {
+                        setSettings({
+                            playback: { ...settings, preservePitch: e.currentTarget.checked },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.preservePitch', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: settings.type !== PlaybackType.WEB,
+            title: t('setting.preservePitch', {
+                postProcess: 'sentenceCase',
+            }),
+        },
         {
             control: (
                 <Slider

src/renderer/features/settings/components/playback/lyric-settings.tsx

@@ -43,6 +43,28 @@ export const LyricSettings = () => {
             }),
             title: t('setting.followLyric', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Switch
+                    aria-label="Prefer local lyrics"
+                    defaultChecked={settings.preferLocalLyrics}
+                    onChange={(e) => {
+                        setSettings({
+                            lyrics: {
+                                ...settings,
+                                preferLocalLyrics: e.currentTarget.checked,
+                            },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.preferLocalLyrics', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: !isElectron(),
+            title: t('setting.preferLocalLyrics', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/features/settings/components/window/discord-settings.tsx

@@ -74,6 +74,29 @@ export const DiscordSettings = () => {
                 postProcess: 'sentenceCase',
             }),
         },
+        {
+            control: (
+                <Switch
+                    checked={settings.showPaused}
+                    onChange={(e) => {
+                        setSettings({
+                            discord: {
+                                ...settings,
+                                showPaused: e.currentTarget.checked,
+                            },
+                        });
+                    }}
+                />
+            ),
+            description: t('setting.discordPausedStatus', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: !isElectron(),
+            title: t('setting.discordPausedStatus', {
+                postProcess: 'sentenceCase',
+            }),
+        },
         {
             control: (
                 <Switch

src/renderer/features/shared/components/folder-button.tsx

@@ -18,7 +18,7 @@ export const FolderButton = ({ isActive, ...props }: FolderButtonProps) => {
                 ...props.iconProps,
             }}
             tooltip={{
-                label: t('entity.folder', { postProcess: 'sentenceCase' }),
+                label: t('entity.folder', { count: 1, postProcess: 'sentenceCase' }),
                 ...props.tooltip,
             }}
             variant="subtle"

src/renderer/features/shared/components/play-button.tsx

@@ -14,8 +14,7 @@ export const PlayButton = ({ className, ...props }: PlayButtonProps) => {
             className={clsx(styles.button, className)}
             icon="mediaPlay"
             iconProps={{
-                fill: 'default',
-                size: 'lg',
+                size: 'xl',
             }}
             variant="filled"
             {...props}

src/renderer/features/sidebar/components/collapsed-sidebar.module.css

@@ -4,7 +4,6 @@
     height: 100%;
     max-height: calc(100vh - 119px);
     user-select: none;
-    background: var(--theme-colors-background-alternate);
 }
 
 .sidebar-container.web,

src/renderer/features/sidebar/components/sidebar-item.module.css

@@ -9,6 +9,20 @@
     }
 }
 
+.inner {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.label {
+    display: block;
+    align-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .link {
     display: flex;
     width: 100%;

src/renderer/features/sidebar/components/sidebar-item.tsx

@@ -10,13 +10,20 @@ interface SidebarItemProps extends ButtonProps {
     to: LinkProps['to'];
 }
 
-export const SidebarItem = ({ children, to, ...props }: SidebarItemProps) => {
+export const SidebarItem = ({ children, className, to, ...props }: SidebarItemProps) => {
     return (
         <Button
-            className={clsx({
-                [styles.disabled]: props.disabled,
-                [styles.link]: true,
-            })}
+            className={clsx(
+                {
+                    [styles.disabled]: props.disabled,
+                    [styles.link]: true,
+                },
+                className,
+            )}
+            classNames={{
+                inner: styles.inner,
+                label: styles.label,
+            }}
             component={Link}
             to={to}
             variant="subtle"

src/renderer/features/sidebar/components/sidebar-playlist-list.module.css

@@ -1,3 +1,5 @@
+@value label from './sidebar-item.module.css';
+
 .list {
     padding: var(--theme-spacing-sm) var(--theme-spacing-md);
 }
@@ -8,6 +10,12 @@
     width: 100%;
 }
 
+.row-hover {
+    :global(.label) {
+        margin-right: 135px;
+    }
+}
+
 .controls {
     position: absolute;
     top: 50%;

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -1,4 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
+import clsx from 'clsx';
 import { MouseEvent, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router';
@@ -43,6 +44,9 @@ const PlaylistRowButton = ({ name, onPlay, to, ...props }: PlaylistRowButtonProp
             onMouseLeave={() => setIsHovered(false)}
         >
             <SidebarItem
+                className={clsx({
+                    [styles.rowHover]: isHovered,
+                })}
                 to={url}
                 variant="subtle"
                 {...props}
@@ -181,7 +185,9 @@ export const SidebarPlaylistList = () => {
         const owned: Array<[boolean, () => void] | Playlist> = [];
 
         for (const playlist of data.items) {
-            owned.push(playlist);
+            if (!playlist.owner || playlist.owner === server.username) {
+                owned.push(playlist);
+            }
         }
 
         return { ...base, items: owned };

src/renderer/features/sidebar/components/sidebar.module.css

@@ -8,6 +8,10 @@
     background: var(--theme-colors-background-alternate);
 }
 
+.container.custom-bar {
+    max-height: calc(100vh - 120px);
+}
+
 .scroll-area {
     padding: 0 var(--theme-spacing-md) var(--theme-spacing-md) var(--theme-spacing-md);
 }
@@ -24,6 +28,7 @@
 
 .image-container {
     position: relative;
+    width: var(--sidebar-image-height);
     height: var(--sidebar-image-height);
     cursor: pointer;
     animation: fade-in 0.2s ease-in-out;

src/renderer/features/sidebar/components/sidebar.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
 import { CSSProperties, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,13 +20,18 @@ import {
     useSetFullScreenPlayerStore,
     useSidebarStore,
 } from '/@/renderer/store';
-import { SidebarItemType, useGeneralSettings } from '/@/renderer/store/settings.store';
+import {
+    SidebarItemType,
+    useGeneralSettings,
+    useWindowSettings,
+} from '/@/renderer/store/settings.store';
 import { Accordion } from '/@/shared/components/accordion/accordion';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Group } from '/@/shared/components/group/group';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
+import { Platform } from '/@/shared/types/types';
 
 export const Sidebar = () => {
     const { t } = useTranslation();
@@ -64,6 +70,7 @@ export const Sidebar = () => {
     };
 
     const { sidebarItems } = useGeneralSettings();
+    const { windowBarStyle } = useWindowSettings();
 
     const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
         if (!sidebarItems) return [];
@@ -80,9 +87,26 @@ export const Sidebar = () => {
         return items;
     }, [sidebarItems, translatedSidebarItemMap]);
 
+    const scrollAreaHeight = useMemo(() => {
+        if (showImage) {
+            if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
+                return `calc(100% - 105px - ${sidebar.leftWidth})`;
+            }
+
+            return `calc(100% - ${sidebar.leftWidth})`;
+        }
+
+        return '100%';
+    }, [showImage, sidebar.leftWidth, windowBarStyle]);
+
+    const isCustomWindowBar =
+        windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS;
+
     return (
         <div
-            className={styles.container}
+            className={clsx(styles.container, {
+                [styles.customBar]: isCustomWindowBar,
+            })}
             id="left-sidebar"
         >
             <Group
@@ -95,7 +119,7 @@ export const Sidebar = () => {
                 allowDragScroll
                 className={styles.scrollArea}
                 style={{
-                    maxHeight: showImage ? `calc(100vh - 90px - ${sidebar.leftWidth})` : '100%',
+                    height: scrollAreaHeight,
                 }}
             >
                 <Accordion

src/renderer/features/songs/components/jellyfin-song-filters.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { ChangeEvent, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -10,8 +10,8 @@ import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { Stack } from '/@/shared/components/stack/stack';
-import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/shared/types/domain-types';
 
 interface JellyfinSongFiltersProps {
@@ -69,10 +69,10 @@ export const JellyfinSongFilters = ({
         return filter?._custom?.jellyfin?.Tags?.split('|');
     }, [filter?._custom?.jellyfin?.Tags]);
 
-    const toggleFilters = [
+    const yesNoFilters = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            onChange: (favorite?: boolean) => {
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
@@ -83,7 +83,7 @@ export const JellyfinSongFilters = ({
                                 IncludeItemTypes: 'Audio',
                             },
                         },
-                        favorite: e.currentTarget.checked ? true : undefined,
+                        favorite,
                     },
                     itemType: LibraryItem.SONG,
                     key: pageKey,
@@ -174,15 +174,16 @@ export const JellyfinSongFilters = ({
 
     return (
         <Stack p="0.8rem">
-            {toggleFilters.map((filter) => (
+            {yesNoFilters.map((filter) => (
                 <Group
                     justify="space-between"
                     key={`nd-filter-${filter.label}`}
                 >
                     <Text>{filter.label}</Text>
-                    <Switch
-                        checked={filter?.value || false}
+                    <YesNoSelect
                         onChange={filter.onChange}
+                        size="xs"
+                        value={filter.value}
                     />
                 </Group>
             ))}
@@ -218,7 +219,7 @@ export const JellyfinSongFilters = ({
                     />
                 </Group>
             )}
-            {tagsQuery.data?.boolTags?.length && (
+            {tagsQuery.data?.boolTags && tagsQuery.data.boolTags.length > 0 && (
                 <Group grow>
                     <MultiSelectWithInvalidData
                         clearable

src/renderer/features/songs/components/navidrome-song-filters.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { ChangeEvent, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -10,8 +10,8 @@ import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { Stack } from '/@/shared/components/stack/stack';
-import { Switch } from '/@/shared/components/switch/switch';
 import { Text } from '/@/shared/components/text/text';
+import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
 import { GenreListSort, LibraryItem, SongListQuery, SortOrder } from '/@/shared/types/domain-types';
 
 interface NavidromeSongFiltersProps {
@@ -93,12 +93,12 @@ export const NavidromeSongFilters = ({
     const toggleFilters = [
         {
             label: t('filter.isFavorited', { postProcess: 'sentenceCase' }),
-            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            onChange: (favorite: boolean | undefined) => {
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
                         _custom: filter._custom,
-                        favorite: e.currentTarget.checked ? true : undefined,
+                        favorite,
                     },
                     itemType: LibraryItem.SONG,
                     key: pageKey,
@@ -137,10 +137,10 @@ export const NavidromeSongFilters = ({
                     key={`nd-filter-${filter.label}`}
                 >
                     <Text>{filter.label}</Text>
-                    <Switch
-                        checked={filter?.value || false}
+                    <YesNoSelect
                         onChange={filter.onChange}
                         size="xs"
+                        value={filter.value}
                     />
                 </Group>
             ))}

src/renderer/features/songs/components/song-list-header-filters.tsx

@@ -467,7 +467,7 @@ export const SongListHeaderFilters = ({
                 .filter((value) => value !== 'Audio') // Don't account for includeItemTypes: Audio
                 .some((value) => value !== undefined);
 
-        const isGenericFilterApplied = filter?.favorite || filter?.genreIds?.length;
+        const isGenericFilterApplied = filter?.favorite !== undefined || filter?.genreIds?.length;
 
         return isNavidromeFilterApplied || isJellyfinFilterApplied || isGenericFilterApplied;
     }, [

src/renderer/features/songs/components/subsonic-song-filter.tsx

@@ -69,7 +69,7 @@ export const SubsonicSongFilters = ({
                 const updatedFilters = setFilter({
                     customFilters,
                     data: {
-                        favorite: e.target.checked,
+                        favorite: e.target.checked ? true : undefined,
                     },
                     itemType: LibraryItem.SONG,
                     key: pageKey,

src/renderer/hooks/use-fast-average-color.tsx

@@ -49,7 +49,7 @@ export const useFastAverageColor = (args: {
                     return setBackground(color.rgb);
                 })
                 .catch((e) => {
-                    console.log('Error fetching average color', e);
+                    console.error('Error fetching average color', e);
                     idRef.current = id;
                     return setBackground('rgba(0, 0, 0, 0)');
                 });

src/renderer/hooks/use-server-authenticated.ts

@@ -1,40 +1,57 @@
+import isElectron from 'is-electron';
 import { debounce } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { api } from '/@/renderer/api';
-import { useCurrentServer } from '/@/renderer/store';
+import { useAuthStoreActions, useCurrentServer } from '/@/renderer/store';
 import { toast } from '/@/shared/components/toast/toast';
 import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { AuthState, ServerListItem, ServerType } from '/@/shared/types/types';
 
+const localSettings = isElectron() ? window.api.localSettings : null;
+
 export const useServerAuthenticated = () => {
     const priorServerId = useRef<string | undefined>(undefined);
     const server = useCurrentServer();
     const [ready, setReady] = useState(
-        server?.type === ServerType.NAVIDROME ? AuthState.LOADING : AuthState.VALID,
+        server?.type === ServerType.NAVIDROME ? AuthState.VALID : AuthState.VALID,
     );
 
-    const authenticateNavidrome = useCallback(async (server: ServerListItem) => {
-        // This trick works because navidrome-api.ts will internally check for authentication
-        // failures and try to log in again (where available). So, all that's necessary is
-        // making one request first
-        try {
-            await api.controller.getSongList({
-                apiClientProps: { server },
-                query: {
-                    limit: 1,
-                    sortBy: SongListSort.NAME,
-                    sortOrder: SortOrder.ASC,
-                    startIndex: 0,
-                },
-            });
+    const { updateServer } = useAuthStoreActions();
 
-            setReady(AuthState.VALID);
-        } catch (error) {
-            toast.error({ message: (error as Error).message });
-            setReady(AuthState.INVALID);
-        }
-    }, []);
+    const authenticateNavidrome = useCallback(
+        async (server: ServerListItem) => {
+            // This trick works because navidrome-api.ts will internally check for authentication
+            // failures and try to log in again (where available). So, all that's necessary is
+            // making one request first
+            try {
+                await api.controller.getSongList({
+                    apiClientProps: { server },
+                    query: {
+                        limit: 1,
+                        sortBy: SongListSort.NAME,
+                        sortOrder: SortOrder.ASC,
+                        startIndex: 0,
+                    },
+                });
+
+                setReady(AuthState.VALID);
+            } catch (error) {
+                // Clear server credentials (and saved password).
+                if (server.savePassword && localSettings) {
+                    localSettings.passwordRemove(server.id);
+                }
+
+                server.credential = '';
+                updateServer(server.id, server);
+
+                toast.error({ message: (error as Error).message });
+
+                setReady(AuthState.INVALID);
+            }
+        },
+        [updateServer],
+    );
 
     const debouncedAuth = debounce((server: ServerListItem) => {
         authenticateNavidrome(server).catch(console.error);

src/renderer/is-updated-dialog.tsx

@@ -34,7 +34,10 @@ export function IsUpdatedDialog() {
         >
             <Stack>
                 <Text>{t('common.newVersion', { postProcess: 'sentenceCase', version })}</Text>
-                <Group wrap="nowrap">
+                <Group
+                    justify="flex-end"
+                    wrap="nowrap"
+                >
                     <Button
                         component="a"
                         href={`https://github.com/jeffvli/feishin/releases/tag/v${version}`}

src/renderer/layouts/default-layout/left-sidebar.module.css

@@ -1,5 +1,6 @@
 .container {
     position: relative;
     grid-area: sidebar;
+    background: var(--theme-colors-background-alternate);
     border-right: 1px solid alpha(var(--theme-colors-border), 0.3);
 }

src/renderer/store/settings.store.ts

@@ -200,6 +200,7 @@ export interface SettingsState {
         clientId: string;
         enabled: boolean;
         showAsListening: boolean;
+        showPaused: boolean;
         showServerImage: boolean;
     };
     font: {
@@ -266,6 +267,7 @@ export interface SettingsState {
         fontSizeUnsync: number;
         gap: number;
         gapUnsync: number;
+        preferLocalLyrics: boolean;
         showMatch: boolean;
         showProvider: boolean;
         sources: LyricSource[];
@@ -280,6 +282,7 @@ export interface SettingsState {
         mpvExtraParameters: string[];
         mpvProperties: MpvSettings;
         muted: boolean;
+        preservePitch: boolean;
         scrobble: {
             enabled: boolean;
             scrobbleAtDuration: number;
@@ -351,6 +354,7 @@ const initialState: SettingsState = {
         clientId: '1165957668758900787',
         enabled: false,
         showAsListening: false,
+        showPaused: true,
         showServerImage: false,
     },
     font: {
@@ -448,6 +452,7 @@ const initialState: SettingsState = {
         fontSizeUnsync: 24,
         gap: 24,
         gapUnsync: 24,
+        preferLocalLyrics: true,
         showMatch: true,
         showProvider: true,
         sources: [LyricSource.NETEASE, LyricSource.LRCLIB],
@@ -471,6 +476,7 @@ const initialState: SettingsState = {
             replayGainPreampDB: 0,
         },
         muted: false,
+        preservePitch: true,
         scrobble: {
             enabled: true,
             scrobbleAtDuration: 240,

src/renderer/themes/use-app-theme.ts

@@ -50,7 +50,10 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
     useEffect(() => {
         if (type === FontType.SYSTEM && system) {
             const root = document.documentElement;
-            root.style.setProperty('--theme-content-font-family', 'dynamic-font');
+            root.style.setProperty(
+                '--theme-content-font-family',
+                'dynamic-font, "Noto Sans JP", sans-serif',
+            );
 
             if (!textStyleRef.current) {
                 textStyleRef.current = document.createElement('style');
@@ -64,7 +67,10 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
             }`;
         } else if (type === FontType.CUSTOM && custom) {
             const root = document.documentElement;
-            root.style.setProperty('--theme-content-font-family', 'dynamic-font');
+            root.style.setProperty(
+                '--theme-content-font-family',
+                'dynamic-font, "Noto Sans JP", sans-serif',
+            );
 
             if (!textStyleRef.current) {
                 textStyleRef.current = document.createElement('style');
@@ -78,7 +84,10 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
             }`;
         } else {
             const root = document.documentElement;
-            root.style.setProperty('--theme-content-font-family', builtIn);
+            root.style.setProperty(
+                '--theme-content-font-family',
+                `${builtIn}, "Noto Sans JP", sans-serif`,
+            );
         }
     }, [builtIn, custom, system, type]);
 

src/shared/components/action-icon/action-icon.module.css

@@ -53,6 +53,11 @@
         &:focus-visible {
             background: darken(var(--theme-colors-primary-filled), 10%);
         }
+
+        svg {
+            color: var(--theme-colors-primary-contrast);
+            fill: var(--theme-colors-primary-contrast);
+        }
     }
 
     &[data-variant='subtle'] {
@@ -60,8 +65,15 @@
         background: transparent;
 
         &:hover,
+        &:active,
         &:focus-visible {
-            background: lighten(var(--theme-colors-surface), 10%);
+            @mixin dark {
+                background: lighten(var(--theme-colors-background), 5%);
+            }
+
+            @mixin light {
+                background: darken(var(--theme-colors-background), 5%);
+            }
         }
     }
 

src/shared/components/button/button.module.css

@@ -92,7 +92,13 @@
         &:hover,
         &:active,
         &:focus-visible {
-            background-color: lighten(var(--button-bg), 10%);
+            @mixin dark {
+                background-color: lighten(var(--theme-colors-background), 10%);
+            }
+
+            @mixin light {
+                background-color: darken(var(--theme-colors-background), 5%);
+            }
         }
     }
 
@@ -100,11 +106,11 @@
         border: 1px solid transparent;
 
         &:hover {
-            background-color: darken(var(--button-bg), 5%);
+            background-color: darken(var(--theme-colors-background), 5%);
         }
 
         &:focus-visible {
-            background-color: darken(var(--button-bg), 10%);
+            background-color: darken(var(--theme-colors-background), 10%);
         }
     }
 

src/shared/components/icon/icon.module.css

@@ -70,6 +70,10 @@
     fill: var(--theme-colors-foreground);
 }
 
+.fill-contrast {
+    fill: var(--theme-colors-primary-contrast);
+}
+
 .fill-inherit {
     fill: inherit;
 }

src/shared/components/icon/icon.tsx

@@ -224,11 +224,21 @@ export const AppIcon = {
 
 export interface IconProps extends Omit<IconBaseProps, 'color' | 'fill' | 'size'> {
     animate?: 'pulse' | 'spin';
-    color?: 'default' | 'error' | 'info' | 'inherit' | 'muted' | 'primary' | 'success' | 'warn';
-    fill?: 'default' | 'error' | 'info' | 'inherit' | 'muted' | 'primary' | 'success' | 'warn';
+    color?: IconColor;
+    fill?: IconColor;
     icon: keyof typeof AppIcon;
     size?: '2xl' | '3xl' | '4xl' | '5xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs' | number | string;
 }
+type IconColor =
+    | 'contrast'
+    | 'default'
+    | 'error'
+    | 'info'
+    | 'inherit'
+    | 'muted'
+    | 'primary'
+    | 'success'
+    | 'warn';
 
 export const Icon = forwardRef<HTMLDivElement, IconProps>((props, ref) => {
     const { animate, className, color, fill, icon, size = 'md' } = props;

src/shared/components/image/image.tsx

@@ -1,16 +1,18 @@
-import type { ImgHTMLAttributes } from 'react';
-
 import clsx from 'clsx';
+import { motion, MotionConfigProps } from 'motion/react';
+import { type ImgHTMLAttributes } from 'react';
 import { Img } from 'react-image';
 
 import styles from './image.module.css';
 
+import { animationProps } from '/@/shared/components/animations/animation-props';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 
-interface ImageContainerProps {
+interface ImageContainerProps extends MotionConfigProps {
     children: React.ReactNode;
     className?: string;
+    enableAnimation?: boolean;
 }
 
 interface ImageLoaderProps {
@@ -19,6 +21,8 @@ interface ImageLoaderProps {
 
 interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
     containerClassName?: string;
+    enableAnimation?: boolean;
+    imageContainerProps?: Omit<ImageContainerProps, 'children'>;
     includeLoader?: boolean;
     includeUnloader?: boolean;
     src: string | string[] | undefined;
@@ -32,6 +36,8 @@ interface ImageUnloaderProps {
 export function Image({
     className,
     containerClassName,
+    enableAnimation,
+    imageContainerProps,
     includeLoader = true,
     includeUnloader = true,
     src,
@@ -41,7 +47,13 @@ export function Image({
             <Img
                 className={clsx(styles.image, className)}
                 container={(children) => (
-                    <ImageContainer className={containerClassName}>{children}</ImageContainer>
+                    <ImageContainer
+                        className={containerClassName}
+                        enableAnimation={enableAnimation}
+                        {...imageContainerProps}
+                    >
+                        {children}
+                    </ImageContainer>
                 )}
                 loader={
                     includeLoader ? (
@@ -50,7 +62,6 @@ export function Image({
                         </ImageContainer>
                     ) : null
                 }
-                loading="lazy"
                 src={src}
                 unloader={
                     includeUnloader ? (
@@ -66,8 +77,27 @@ export function Image({
     return <ImageUnloader />;
 }
 
-function ImageContainer({ children, className }: ImageContainerProps) {
-    return <div className={clsx(styles.imageContainer, className)}>{children}</div>;
+function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) {
+    if (!enableAnimation) {
+        return (
+            <div
+                className={clsx(styles.imageContainer, className)}
+                {...props}
+            >
+                {children}
+            </div>
+        );
+    }
+
+    return (
+        <motion.div
+            className={clsx(styles.imageContainer, className)}
+            {...animationProps.fadeIn}
+            {...props}
+        >
+            {children}
+        </motion.div>
+    );
 }
 
 function ImageLoader({ className }: ImageLoaderProps) {

src/shared/components/yes-no-select/yes-no-select.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next';
+
+import { Select, SelectProps } from '/@/shared/components/select/select';
+
+export interface YesNoSelectProps extends Omit<SelectProps, 'data' | 'onChange' | 'value'> {
+    onChange: (e?: boolean) => void;
+    value?: boolean;
+}
+
+export const YesNoSelect = ({ onChange, value, ...props }: YesNoSelectProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <Select
+            clearable
+            data={[
+                {
+                    label: t('common.no', { postProcess: 'sentenceCase' }),
+                    value: 'false',
+                },
+                {
+                    label: t('common.yes', { postProcess: 'sentenceCase' }),
+                    value: 'true',
+                },
+            ]}
+            onChange={(e) => {
+                onChange(e ? e === 'true' : undefined);
+            }}
+            value={value !== undefined ? value.toString() : null}
+            {...props}
+        />
+    );
+};

src/shared/styles/global.css

@@ -11,7 +11,8 @@
     text-rendering: optimizelegibility;
     -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
     text-size-adjust: none;
-    outline: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 body {
@@ -122,59 +123,56 @@ button {
 @font-face {
     font-family: Archivo;
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/Archivo-VariableFont_wdth,wght.ttf')
-        format('truetype-variations');
+    src: url('../../../assets/fonts/Archivo-VariableFont_wdth,wght.ttf');
 }
 
 @font-face {
     font-family: Raleway;
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
+    src: url('../../../assets/fonts/Raleway-VariableFont_wght.ttf');
 }
 
 @font-face {
     font-family: Fredoka;
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/Fredoka-VariableFont_wdth,wght.ttf')
-        format('truetype-variations');
+    src: url('../../../assets/fonts/Fredoka-VariableFont_wdth,wght.ttf');
 }
 
 @font-face {
     font-family: 'League Spartan';
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/LeagueSpartan-VariableFont_wght.ttf')
-        format('truetype-variations');
+    src: url('../../../assets/fonts/LeagueSpartan-VariableFont_wght.ttf');
 }
 
 @font-face {
     font-family: Lexend;
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations');
+    src: url('../../../assets/fonts/Lexend-VariableFont_wght.ttf');
 }
 
 @font-face {
     font-family: Inter;
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
+    src: url('../../../assets/fonts/Inter-VariableFont_slnt,wght.ttf');
 }
 
 @font-face {
     font-family: Sora;
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/Sora-VariableFont_wght.ttf') format('truetype-variations');
+    src: url('../../../assets/fonts/Sora-VariableFont_wght.ttf');
 }
 
 @font-face {
     font-family: 'Work Sans';
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
+    src: url('../../../assets/fonts/WorkSans-VariableFont_wght.ttf');
 }
 
 @font-face {
     font-family: Poppins;
     font-style: normal;
     font-weight: 400;
-    src: url('../../renderer/fonts/Poppins-Regular.ttf') format('truetype');
+    src: url('../../../assets/fonts/Poppins-Regular.ttf');
     font-display: swap;
 }
 
@@ -182,7 +180,7 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 600;
-    src: url('../../renderer/fonts/Poppins-SemiBold.ttf') format('truetype');
+    src: url('../../../assets/fonts/Poppins-SemiBold.ttf');
     font-display: swap;
 }
 
@@ -190,7 +188,7 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 700;
-    src: url('../../renderer/fonts/Poppins-Bold.ttf') format('truetype');
+    src: url('../../../assets/fonts/Poppins-Bold.ttf');
     font-display: swap;
 }
 
@@ -198,7 +196,7 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 800;
-    src: url('../../renderer/fonts/Poppins-ExtraBold.ttf') format('truetype');
+    src: url('../../../assets/fonts/Poppins-ExtraBold.ttf');
     font-display: swap;
 }
 
@@ -206,28 +204,21 @@ button {
     font-family: Poppins;
     font-style: normal;
     font-weight: 900;
-    src: url('../../renderer/fonts/Poppins-Black.ttf') format('truetype');
+    src: url('../../../assets/fonts/Poppins-Black.ttf');
     font-display: swap;
 }
 
 @font-face {
     font-family: Raleway;
     font-weight: 100 1000;
-    src: url('../../renderer/fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
+    src: url('../../../assets/fonts/Raleway-VariableFont_wght.ttf');
 }
 
 @font-face {
-    font-family: DroidSerif;
-    src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf')
-        format('truetype');
-    unicode-range: U+000-5FF; /* Latin glyphs */
-}
-
-@font-face {
-    font-family: DroidSerif;
-    src: url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2')
-        format('truetype');
-    unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
+    font-family: 'Noto Sans JP';
+    font-weight: 100 900;
+    src: url('../../../assets/fonts/NotoSansJP-VariableFont_wght.ttf');
+    unicode-range: U+3000-9FFF, U+FF00-FFEF; /* Japanese characters */
 }
 
 :root {

src/shared/themes/default-light/default-light.ts

@@ -11,8 +11,8 @@ export const defaultLight: AppThemeConfiguration = {
         'scrollbar-track-background': 'transparent',
     },
     colors: {
-        background: 'rgb(255, 255, 255)',
-        'background-alternate': 'rgb(245, 245, 245)',
+        background: 'rgb(235, 235, 235)',
+        'background-alternate': 'rgb(240, 240, 240)',
         black: 'rgb(0, 0, 0)',
         foreground: 'rgb(25, 25, 25)',
         'foreground-muted': 'rgb(80, 80, 80)',
@@ -20,7 +20,7 @@ export const defaultLight: AppThemeConfiguration = {
         'state-info': 'rgb(0, 122, 255)',
         'state-success': 'rgb(48, 209, 88)',
         'state-warning': 'rgb(255, 214, 0)',
-        surface: 'rgb(245, 245, 245)',
+        surface: 'rgb(225, 225, 225)',
         'surface-foreground': 'rgb(0, 0, 0)',
         white: 'rgb(255, 255, 255)',
     },

src/shared/themes/default.ts

@@ -3,7 +3,7 @@ import { AppThemeConfiguration } from './app-theme-types';
 export const defaultTheme: AppThemeConfiguration = {
     app: {
         'overlay-header':
-            'linear-gradient(transparent 0%, rgb(0 0 0 / 75%) 100%), var(--theme-background-noise)',
+            'linear-gradient(transparent 0%, rgb(0 0 0 / 85%) 100%), var(--theme-background-noise)',
         'overlay-subheader':
             'linear-gradient(180deg, rgb(0 0 0 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
         'root-font-size': '16px',