Merge branch 'development' into react-image-lazy-loaded

.github/workflows/stale.yml

@@ -1,53 +1,47 @@
 name: 'Close stale issues and PRs'
 on:
-  workflow_dispatch:
+    workflow_dispatch:
-  schedule:
+    schedule:
-    - cron: '30 1 * * *'
+        - cron: '30 1 * * *'
 permissions:
-  contents: read
+    contents: read
 jobs:
-  stale:
+    stale:
-    permissions:
+        permissions:
-      issues: write
+            issues: write
-      pull-requests: write
+            pull-requests: write
-    runs-on: ubuntu-latest
+        runs-on: ubuntu-latest
-    steps:
+        steps:
-      - uses: dessant/lock-threads@v5
+            - uses: dessant/lock-threads@v5
-        with:
+              with:
-          process-only: 'issues, prs'
+                  process-only: 'issues, prs'
-          issue-inactive-days: 120
+                  issue-inactive-days: 120
-          pr-inactive-days: 120
+                  pr-inactive-days: 120
-          log-output: true
+                  log-output: true
-          add-issue-labels: 'frozen-due-to-age'
+                  add-issue-labels: 'frozen-due-to-age'
-          add-pr-labels: 'frozen-due-to-age'
+                  add-pr-labels: 'frozen-due-to-age'
-          issue-comment: >
+            - uses: actions/stale@v9
-            This issue has been automatically locked since there
+              with:
-            has not been any recent activity after it was closed.
+                  operations-per-run: 999
-            Please open a new issue for related bugs.
+                  days-before-issue-stale: 180
-          pr-comment: >
+                  days-before-pr-stale: 180
-            This pull request has been automatically locked since there
+                  days-before-issue-close: 30
-            has not been any recent activity after it was closed.
+                  days-before-pr-close: 30
-            Please open a new issue for related bugs.
+                  stale-issue-message: >
-      - uses: actions/stale@v9
+                      This issue has been automatically marked as stale because it has not had recent activity. The resources of the Feishin team are limited, and so we are asking for your help.
-        with:
-          operations-per-run: 999
-          days-before-issue-stale: 180
-          days-before-pr-stale: 180
-          days-before-issue-close: 30
-          days-before-pr-close: 30
-          stale-issue-message: >
-            This issue has been automatically marked as stale because it has not had recent activity.
-            The resources of the Feishin team are limited, and so we are asking for your help.
 
-            If this is a **bug** and you can still reproduce this error on the <code>development</code> branch, please reply with all of the information you have about it in order to keep the issue open.
+                      If this is a **bug** and you can still reproduce this error on the <code>development</code> branch, please reply with all of the information you have about it in order to keep the issue open.
 
-            This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.
+                      This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.
-          stale-pr-message: >
-            This PR has been automatically marked as stale because it has not had recent activity.
-            The resources of the Feishin team are limited, and so we are asking for your help.
 
-            This PR will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.
+
-          stale-issue-label: 'stale'
+                  stale-pr-message: >
-          exempt-issue-labels: 'enhancement,keep,security'
+                      This PR has been automatically marked as stale because it has not had recent activity. The resources of the Feishin team are limited, and so we are asking for your help.
-          stale-pr-label: 'stale'
+
-          exempt-pr-labels: 'keep,security'
+                      This PR will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.
+
+
+                  stale-issue-label: 'stale'
+                  exempt-issue-labels: 'enhancement,keep,security'
+                  stale-pr-label: 'stale'
+                  exempt-pr-labels: 'keep,security'

.prettierrc.yaml

@@ -8,7 +8,7 @@ arrowParens: always
 proseWrap: never
 htmlWhitespaceSensitivity: strict
 endOfLine: lf
-singleAttributePerLine: true
+singleAttributePerLine: false
 bracketSpacing: true
 plugins:
     - prettier-plugin-packagejson

README.md

@@ -129,6 +129,7 @@ Feishin supports any music server that implements a [Navidrome](https://www.navi
     - [LMS](https://github.com/epoupon/lms)
     - [Nextcloud Music](https://apps.nextcloud.com/apps/music)
     - [Supysonic](https://github.com/spl0k/supysonic)
+    - [Qm-Music](https://github.com/chenqimiao/qm-music)
     - More (?)
 
 ### I have the issue "The SUID sandbox helper binary was found, but is not configured correctly" on Linux

electron-builder.yml

@@ -35,39 +35,13 @@ mac:
     notarize: false
 dmg:
     contents: [{ x: 130, y: 220 }, { x: 410, y: 220, type: link, path: /Applications }]
-deb:
-    depends:
-        - libgssapi_krb5.so.2
-        - libavahi-common.so.3
-        - libavahi-client.so.3
-        - libkrb5.so.3
-        - libkrb5support.so.0
-        - libkeyutils.so.1
-        - libcups.so.2
-rpm:
-    depends:
-        - libgssapi_krb5.so.2
-        - libavahi-common.so.3
-        - libavahi-client.so.3
-        - libkrb5.so.3
-        - libkrb5support.so.0
-        - libkeyutils.so.1
-        - libcups.so.2
-freebsd:
-    depends:
-        - libgssapi_krb5.so.2
-        - libavahi-common.so.3
-        - libavahi-client.so.3
-        - libkrb5.so.3
-        - libkrb5support.so.0
-        - libkeyutils.so.1
-        - libcups.so.2
 linux:
     target:
         - AppImage
         - tar.xz
     category: AudioVideo;Audio;Player
     icon: assets/icons/icon.png
+    artifactName: ${productName}-${os}-${arch}.${ext}
 npmRebuild: false
 publish:
     provider: github

package.json

@@ -1,6 +1,6 @@
 {
     "name": "feishin",
-    "version": "0.17.0",
+    "version": "0.19.0",
     "description": "A modern self-hosted music player.",
     "keywords": [
         "subsonic",
@@ -75,7 +75,7 @@
         "@tanstack/react-query-devtools": "^4.32.1",
         "@tanstack/react-query-persist-client": "^4.32.1",
         "@ts-rest/core": "^3.23.0",
-        "@xhayper/discord-rpc": "^1.0.24",
+        "@xhayper/discord-rpc": "^1.3.0",
         "audiomotion-analyzer": "^4.5.0",
         "auto-text-size": "^0.2.3",
         "axios": "^1.6.0",

pnpm-lock.yaml

@@ -72,8 +72,8 @@ importers:
         specifier: ^3.23.0
         version: 3.52.1(@types/node@22.15.32)(zod@3.25.23)
       '@xhayper/discord-rpc':
-        specifier: ^1.0.24
+        specifier: ^1.3.0
-        version: 1.2.1
+        version: 1.3.0
       audiomotion-analyzer:
         specifier: ^4.5.0
         version: 4.5.0
@@ -509,8 +509,8 @@ packages:
     resolution: {integrity: sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg==}
     engines: {node: '>=18'}
 
-  '@discordjs/rest@2.5.0':
+  '@discordjs/rest@2.5.1':
-    resolution: {integrity: sha512-PWhchxTzpn9EV3vvPRpwS0EE2rNYB9pvzDU/eLLW3mByJl0ZHZjHI2/wA8EbH2gRMQV7nu+0FoDF84oiPl8VAQ==}
+    resolution: {integrity: sha512-Tg9840IneBcbrAjcGaQzHUJWFNq1MMWZjTdjJ0WS/89IffaNKc++iOvffucPxQTF/gviO9+9r8kEPea1X5J2Dw==}
     engines: {node: '>=18'}
 
   '@discordjs/util@1.1.1':
@@ -769,6 +769,10 @@ packages:
     resolution: {integrity: sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/core@0.15.1':
+    resolution: {integrity: sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/eslintrc@3.3.1':
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -781,8 +785,8 @@ packages:
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.3.1':
+  '@eslint/plugin-kit@0.3.4':
-    resolution: {integrity: sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==}
+    resolution: {integrity: sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.7.0':
@@ -837,26 +841,24 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
-  '@jridgewell/gen-mapping@0.3.8':
+  '@jridgewell/gen-mapping@0.3.12':
-    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
+    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
-    engines: {node: '>=6.0.0'}
 
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
+  '@jridgewell/source-map@0.3.10':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    resolution: {integrity: sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q==}
-    engines: {node: '>=6.0.0'}
-
-  '@jridgewell/source-map@0.3.6':
-    resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
 
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
-  '@jridgewell/trace-mapping@0.3.25':
+  '@jridgewell/sourcemap-codec@1.5.4':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
+
+  '@jridgewell/trace-mapping@0.3.29':
+    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
 
   '@keyv/serialize@1.0.3':
     resolution: {integrity: sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g==}
@@ -1359,8 +1361,8 @@ packages:
     resolution: {integrity: sha512-RaI5qZo6D2CVS6sTHFKg1v5Ohq/+Bo2LZ5gzUEwZ/WkHhwtGTCB/sVLw8ijOkAUxasZ+WshN/Rzj4ywsABJ5ZA==}
     engines: {node: '>=v14.0.0', npm: '>=7.0.0'}
 
-  '@xhayper/discord-rpc@1.2.1':
+  '@xhayper/discord-rpc@1.3.0':
-    resolution: {integrity: sha512-Ch04/7hq0nfV47nJzDcLIKx0SLUcPOMlkYV43faWpKtEO9SgLrTD4FAOMBBT+JORceQytnzBMPvktW2q9ZCMiw==}
+    resolution: {integrity: sha512-0NmUTiODl7u3UEjmO6y0Syp3dmgVLAt2EHrH4QKTQcXRwtF8Wl7Eipdn/GSSZ8HkDwxQFvcDGJMxT9VWB0pH8g==}
     engines: {node: '>=18.20.7'}
 
   '@xmldom/xmldom@0.8.10':
@@ -1960,11 +1962,8 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  discord-api-types@0.37.120:
+  discord-api-types@0.38.18:
-    resolution: {integrity: sha512-7xpNK0EiWjjDFp2nAhHXezE4OUWm7s1zhc/UXXN6hnFFU8dfoPHgV0Hx0RPiCa3ILRpdeh152icc68DGCyXYIw==}
+    resolution: {integrity: sha512-ygenySjZKUaBf5JT8BNhZSxLzwpwdp41O0wVroOTu/N2DxFH7dxYTZUSnFJ6v+/2F3BMcnD47PC47u4aLOLxrQ==}
-
-  discord-api-types@0.38.8:
-    resolution: {integrity: sha512-xuRXPD44FcbKHrQK15FS1HFlMRNJtsaZou/SVws18vQ7zHqmlxyDktMkZpyvD6gE2ctGOVYC/jUyoMMAyBWfcw==}
 
   dmg-builder@26.0.12:
     resolution: {integrity: sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==}
@@ -2373,8 +2372,8 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
-  form-data@4.0.2:
+  form-data@4.0.4:
-    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
     engines: {node: '>= 6'}
 
   format-duration@2.0.0:
@@ -4140,8 +4139,8 @@ packages:
     resolution: {integrity: sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==}
     engines: {node: '>= 10'}
 
-  socks@2.8.5:
+  socks@2.8.6:
-    resolution: {integrity: sha512-iF+tNDQla22geJdTyJB1wM/qrX9DMRwWrciEPwWLPRWAUEM8sQiyxgckLxWT1f7+9VabJS0jTGGr4QgBuvi6Ww==}
+    resolution: {integrity: sha512-pe4Y2yzru68lXCb38aAqRf5gvN8YdjP1lok5o0J7BOHljkyCGKVz7H3vpVIXKD27rj2giOJ7DwVyk/GWrPHDWA==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
   sort-keys@5.1.0:
@@ -4461,10 +4460,6 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici@6.21.1:
-    resolution: {integrity: sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==}
-    engines: {node: '>=18.17'}
-
   undici@6.21.3:
     resolution: {integrity: sha512-gBLkYIlEnSp8pFbT64yFgGE6UIB9tAkhukC23PmMDCe5Nd+cRqKxSjw5y54MK2AZMgZfJWMaNE4nYUHgi1XEOw==}
     engines: {node: '>=18.17'}
@@ -4708,6 +4703,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xml2js@0.4.23:
     resolution: {integrity: sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==}
     engines: {node: '>=4.0.0'}
@@ -4798,8 +4805,8 @@ snapshots:
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/trace-mapping': 0.3.29
 
   '@atlaskit/pragmatic-drag-and-drop-auto-scroll@2.1.1':
     dependencies:
@@ -4855,8 +4862,8 @@ snapshots:
     dependencies:
       '@babel/parser': 7.27.2
       '@babel/types': 7.27.1
-      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/trace-mapping': 0.3.29
       jsesc: 3.1.0
 
   '@babel/helper-compilation-targets@7.27.2':
@@ -4964,17 +4971,17 @@ snapshots:
 
   '@discordjs/collection@2.1.1': {}
 
-  '@discordjs/rest@2.5.0':
+  '@discordjs/rest@2.5.1':
     dependencies:
       '@discordjs/collection': 2.1.1
       '@discordjs/util': 1.1.1
       '@sapphire/async-queue': 1.5.5
       '@sapphire/snowflake': 3.5.5
       '@vladfrangu/async_event_emitter': 2.4.6
-      discord-api-types: 0.38.8
+      discord-api-types: 0.38.18
       magic-bytes.js: 1.12.1
       tslib: 2.8.1
-      undici: 6.21.1
+      undici: 6.21.3
 
   '@discordjs/util@1.1.1': {}
 
@@ -5218,6 +5225,10 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/core@0.15.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
@@ -5236,9 +5247,9 @@ snapshots:
 
   '@eslint/object-schema@2.1.6': {}
 
-  '@eslint/plugin-kit@0.3.1':
+  '@eslint/plugin-kit@0.3.4':
     dependencies:
-      '@eslint/core': 0.14.0
+      '@eslint/core': 0.15.1
       levn: 0.4.1
 
   '@floating-ui/core@1.7.0':
@@ -5294,28 +5305,27 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@jridgewell/gen-mapping@0.3.8':
+  '@jridgewell/gen-mapping@0.3.12':
     dependencies:
-      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.4
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.29
-      '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/set-array@1.2.1': {}
+  '@jridgewell/source-map@0.3.10':
-
-  '@jridgewell/source-map@0.3.6':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.25
+      '@jridgewell/trace-mapping': 0.3.29
     optional: true
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
-  '@jridgewell/trace-mapping@0.3.25':
+  '@jridgewell/sourcemap-codec@1.5.4': {}
+
+  '@jridgewell/trace-mapping@0.3.29':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/sourcemap-codec': 1.5.4
 
   '@keyv/serialize@1.0.3':
     dependencies:
@@ -5856,12 +5866,12 @@ snapshots:
 
   '@vladfrangu/async_event_emitter@2.4.6': {}
 
-  '@xhayper/discord-rpc@1.2.1':
+  '@xhayper/discord-rpc@1.3.0':
     dependencies:
-      '@discordjs/rest': 2.5.0
+      '@discordjs/rest': 2.5.1
       '@vladfrangu/async_event_emitter': 2.4.6
-      discord-api-types: 0.37.120
+      discord-api-types: 0.38.18
-      ws: 8.18.2
+      ws: 8.18.3
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
@@ -6074,7 +6084,7 @@ snapshots:
   axios@1.9.0:
     dependencies:
       follow-redirects: 1.15.9
-      form-data: 4.0.2
+      form-data: 4.0.4
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
@@ -6572,9 +6582,7 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
-  discord-api-types@0.37.120: {}
+  discord-api-types@0.38.18: {}
-
-  discord-api-types@0.38.8: {}
 
   dmg-builder@26.0.12(electron-builder-squirrel-windows@26.0.12):
     dependencies:
@@ -6720,7 +6728,7 @@ snapshots:
       builder-util: 26.0.11
       builder-util-runtime: 9.3.1
       chalk: 4.1.2
-      form-data: 4.0.2
+      form-data: 4.0.4
       fs-extra: 10.1.0
       lazy-val: 1.0.5
       mime: 2.6.0
@@ -7021,7 +7029,7 @@ snapshots:
       '@eslint/core': 0.14.0
       '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.27.0
-      '@eslint/plugin-kit': 0.3.1
+      '@eslint/plugin-kit': 0.3.4
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
@@ -7183,11 +7191,12 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  form-data@4.0.2:
+  form-data@4.0.4:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
       mime-types: 2.1.35
 
   format-duration@2.0.0: {}
@@ -8958,11 +8967,11 @@ snapshots:
     dependencies:
       agent-base: 6.0.2
       debug: 4.4.1
-      socks: 2.8.5
+      socks: 2.8.6
     transitivePeerDependencies:
       - supports-color
 
-  socks@2.8.5:
+  socks@2.8.6:
     dependencies:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
@@ -9262,7 +9271,7 @@ snapshots:
 
   terser@5.39.2:
     dependencies:
-      '@jridgewell/source-map': 0.3.6
+      '@jridgewell/source-map': 0.3.10
       acorn: 8.15.0
       commander: 2.20.3
       source-map-support: 0.5.21
@@ -9386,8 +9395,6 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici@6.21.1: {}
-
   undici@6.21.3: {}
 
   unique-filename@2.0.1:
@@ -9633,6 +9640,8 @@ snapshots:
 
   ws@8.18.2: {}
 
+  ws@8.18.3: {}
+
   xml2js@0.4.23:
     dependencies:
       sax: 1.4.1

src/i18n/i18n.ts

@@ -19,6 +19,7 @@ import nl from './locales/nl.json';
 import pl from './locales/pl.json';
 import ptBr from './locales/pt-BR.json';
 import ru from './locales/ru.json';
+import sl from './locales/sl.json';
 import sr from './locales/sr.json';
 import sv from './locales/sv.json';
 import ta from './locales/ta.json';
@@ -43,6 +44,7 @@ const resources = {
     pl: { translation: pl },
     'pt-BR': { translation: ptBr },
     ru: { translation: ru },
+    sl: { translation: sl },
     sr: { translation: sr },
     sv: { translation: sv },
     ta: { translation: ta },
@@ -119,6 +121,10 @@ export const languages = [
         label: 'Русский',
         value: 'ru',
     },
+    {
+        label: 'Slovenščina',
+        value: 'sl',
+    },
     {
         label: 'Srpski',
         value: 'sr',

src/i18n/locales/cs.json

@@ -271,7 +271,9 @@
         "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í"
+        "preservePitch_description": "zachová výšku při úpravě rychlosti přehrávání",
+        "notify": "povolit oznámení o skladbách",
+        "notify_description": "zobrazit oznámení při změně aktuální skladby"
     },
     "action": {
         "editPlaylist": "upravit $t(entity.playlist_one)",
@@ -393,7 +395,9 @@
         "additionalParticipants": "další přispívající",
         "tags": "štítky",
         "viewReleaseNotes": "zobrazit seznam změn",
-        "newVersion": "byla nainstalována nová verze ({{version}})"
+        "newVersion": "byla nainstalována nová verze ({{version}})",
+        "bitDepth": "bitová hloubka",
+        "sampleRate": "vzorkovací frekvence"
     },
     "table": {
         "config": {
@@ -495,7 +499,8 @@
         "badAlbum": "tuto stránku vidíte, protože tato skladba není součástí alba. tento problém může nastat, pokud máte skladbu na nejvyšší úrovni vaší složky s hudbou. jellyfin seskupuje skladby pouze, pokud se nacházejí ve složce.",
         "networkError": "vyskytla se chyba sítě",
         "openError": "nepodařilo se otevřít soubor",
-        "badValue": "neplatná možnost „{{value}}“. tato možnost již neexistuje"
+        "badValue": "neplatná možnost „{{value}}“. tato možnost již neexistuje",
+        "notificationDenied": "oprávnění k posílání oznámení byla zamítnuta. toto nastavení nemá žádný vliv"
     },
     "filter": {
         "mostPlayed": "nejvíce přehráváno",

src/i18n/locales/en.json

@@ -36,6 +36,7 @@
         "ascending": "ascending",
         "backward": "backward",
         "biography": "biography",
+        "bitDepth": "bit depth",
         "bitrate": "bitrate",
         "bpm": "bpm",
         "cancel": "cancel",
@@ -99,6 +100,7 @@
         "resetToDefault": "reset to default",
         "restartRequired": "restart required",
         "right": "right",
+        "sampleRate": "sample rate",
         "save": "save",
         "saveAndReplace": "save and replace",
         "saveAs": "save as",
@@ -286,6 +288,11 @@
         "updateServer": {
             "success": "server updated successfully",
             "title": "update server"
+        },
+        "privateMode": {
+            "enabled": "private mode enabled, playback status is now hidden from external integrations",
+            "disabled": "private mode disabled, playback status is now visible to enabled external integrations",
+            "title": "private mode"
         }
     },
     "page": {
@@ -319,6 +326,8 @@
             "goBack": "go back",
             "goForward": "go forward",
             "manageServers": "manage servers",
+            "privateModeOff": "turn off private mode",
+            "privateModeOn": "turn on private mode",
             "openBrowserDevtools": "open browser devtools",
             "quit": "$t(common.quit)",
             "selectServer": "select server",
@@ -527,6 +536,10 @@
         "discordServeImage_description": "share cover art for {{discord}} rich presence from server itself, only available for jellyfin and navidrome",
         "discordUpdateInterval": "{{discord}} rich presence update interval",
         "discordUpdateInterval_description": "the time in seconds between each update (minimum 15 seconds)",
+        "discordDisplayType": "{{discord}} presence display type",
+        "discordDisplayType_description": "changes what you are listening to in your status",
+        "discordDisplayType_songname": "song name",
+        "discordDisplayType_artistname": "artist name(s)",
         "doubleClickBehavior": "queue all searched tracks when double clicking",
         "doubleClickBehavior_description": "if true, all matching tracks in a track search will be queued. otherwise, only the clicked one will be queued",
         "enableRemote": "enable remote control server",

src/i18n/locales/es.json

@@ -271,7 +271,9 @@
         "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"
+        "preservePitch_description": "Mantiene el tono cuando se modifica la velocidad de reproducción",
+        "notify": "Activar notificaciones de canciones",
+        "notify_description": "Muestra notificaciones cuando se cambia la canción actual"
     },
     "action": {
         "editPlaylist": "editar $t(entity.playlist_one)",
@@ -393,7 +395,9 @@
         "additionalParticipants": "Participantes adicionales",
         "tags": "Etiquetas",
         "newVersion": "Una nueva versión ha sido instalada ({{version}})",
-        "viewReleaseNotes": "Ver notas de lanzamiento"
+        "viewReleaseNotes": "Ver notas de lanzamiento",
+        "bitDepth": "Profundidad de bit",
+        "sampleRate": "Frecuencia de muestreo"
     },
     "error": {
         "remotePortWarning": "reiniciar el servidor para aplicar el nuevo puerto",
@@ -418,7 +422,8 @@
         "badAlbum": "Estás viendo esta página porque esta canción no forma parte de un álbum. Este problema puede ocurrir si tienes una canción en el nivel superior de tu carpeta de música. Jellyfin solo agrupa pistas si están en una carpeta.",
         "networkError": "Ocurrió un error de red",
         "openError": "No se pudo abrir el archivo",
-        "badValue": "Opción inválida \"{{value}}\". Este valor ya no existe"
+        "badValue": "Opción inválida \"{{value}}\". Este valor ya no existe",
+        "notificationDenied": "Se denegaron los permisos para notificaciones. Esta configuración no tiene efecto"
     },
     "filter": {
         "mostPlayed": "más reproducido",

src/i18n/locales/fr.json

@@ -101,6 +101,7 @@
         "forceRestartRequired": "redémarrer pour appliquer les changements… fermer la notification pour redémarrer",
         "setting": "paramètre",
         "setting_one": "paramètre",
+        "setting_many": "",
         "setting_other": "paramètres",
         "version": "version",
         "title": "titre",
@@ -154,7 +155,9 @@
         "additionalParticipants": "participants additionnels",
         "tags": "tags",
         "newVersion": "une nouvelle version vient d'être installé ({{version}})",
-        "viewReleaseNotes": "voir la note de version"
+        "viewReleaseNotes": "voir la note de version",
+        "sampleRate": "taux d'échantillonnage",
+        "bitDepth": "bit par échantillon"
     },
     "error": {
         "remotePortWarning": "redémarrer le serveur pour appliquer le nouveau port",
@@ -179,7 +182,8 @@
         "openError": "impossible d'ouvrir le fichier",
         "networkError": "une erreur de réseau est survenue",
         "badAlbum": "vous voyez cette page parce que cette chanson ne fait pas parti d'un album. vous rencontrez probablement cette erreur si vous avez une chanson qui n'est pas dans votre répertoire de musique. jellyfin gère les chansons uniquement si elles sont dans un sous-dossier, qui est lui-même dans un dossier \"Musique(s)\".",
-        "badValue": "option {{value}} invalide. Cette valeur n'existe plus"
+        "badValue": "option {{value}} invalide. Cette valeur n'existe plus",
+        "notificationDenied": "les autorisations pour les notifications ont été refusées. ce paramètre n'a aucun effet"
     },
     "filter": {
         "mostPlayed": "plus joués",
@@ -400,7 +404,7 @@
         "discordIdleStatus_description": "quand activé, mettre à jour le status pendant que le lecteur est inactif",
         "showSkipButtons": "affiche les boutons suivants et précédents",
         "minimumScrobblePercentage": "durée minimal du scobble (pourcentage)",
-        "lyricFetch": "récupère les paroles depuis internet",
+        "lyricFetch": "récupérer les paroles depuis internet",
         "scrobble": "scrobble",
         "enableRemote_description": "activer le serveur de contrôle à distance, qui permet à d'autres appareils de contrôler l'application",
         "fontType_optionSystem": "police système",
@@ -578,7 +582,7 @@
         "artistConfiguration": "page de configuration de l'artiste de l'album",
         "artistConfiguration_description": "configurer les éléments et l'ordre à afficher, sur la page de l'artiste de l'album",
         "doubleClickBehavior": "mettre en file d'attente toutes les pistes recherchées lors d'un double clic",
-        "contextMenu": "configuration du menu contexte (clic droit)",
+        "contextMenu": "configuration du menu contextuel (clic droit)",
         "contextMenu_description": "permet de masquer les éléments qui s'affichent dans le menu lorsque vous cliquez avec le bouton droit de la souris sur un élément. les éléments qui ne sont pas cochés seront masqués",
         "albumBackground": "image d'arrière-plan de l'album",
         "albumBackground_description": "ajoute une image d'arrière-plan pour les pages de l'album contenant les illustrations de l'album",
@@ -615,7 +619,9 @@
         "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"
+        "preservePitch_description": "préserver la hauteur lors du changement de la vitesse de lecture",
+        "notify": "activer les notifications des chansons",
+        "notify_description": "affiche une notification lors du changement de chanson"
     },
     "form": {
         "deletePlaylist": {

src/i18n/locales/it.json

@@ -16,7 +16,12 @@
         "toggleSmartPlaylistEditor": "attiva/disattiva editor $t(entity.smartPlaylist)",
         "removeFromFavorites": "rimuovi da $t(entity.favorite_other)",
         "moveToTop": "sposta in cima",
-        "moveToBottom": "sposta in fondo"
+        "moveToBottom": "sposta in fondo",
+        "moveToNext": "passa al successivo",
+        "openIn": {
+            "lastfm": "Apri in Last.fm",
+            "musicbrainz": "Apri in MusicBrainz"
+        }
     },
     "common": {
         "backward": "indietro",
@@ -99,7 +104,22 @@
         "yes": "si",
         "random": "casuale",
         "size": "dimensione",
-        "note": "nota"
+        "note": "nota",
+        "additionalParticipants": "partecipanti aggiuntivi",
+        "newVersion": "è stata installata una nuova versione ({{version}})",
+        "viewReleaseNotes": "mostra le note di rilascio",
+        "albumGain": "guadagno (gain) dell'album",
+        "albumPeak": "picco di volume dell'album",
+        "close": "chiudi",
+        "codec": "codec",
+        "mbid": "MusicBrainz ID",
+        "preview": "anteprima",
+        "reload": "ricarica",
+        "share": "condividi",
+        "tags": "tags",
+        "trackGain": "normalizzazione (gain) del brano",
+        "trackPeak": "picco di volume del brano",
+        "translation": "traduzione"
     },
     "player": {
         "repeat_all": "ripeti coda",
@@ -113,7 +133,7 @@
         "skip_back": "salta indietro",
         "favorite": "preferito",
         "next": "successivo",
-        "shuffle": "mescola",
+        "shuffle": "riproduzione casuale",
         "playbackFetchNoResults": "nessuna canzone trovata",
         "playbackFetchInProgress": "caricamento canzoni…",
         "addNext": "aggiungi successivo",
@@ -130,7 +150,9 @@
         "shuffle_off": "non mescolare",
         "addLast": "aggiungi in coda",
         "mute": "silenzia",
-        "skip_forward": "salta avanti"
+        "skip_forward": "salta avanti",
+        "playSimilarSongs": "riproduci brani simili",
+        "viewQueue": "visualizza coda"
     },
     "setting": {
         "crossfadeStyle_description": "seleziona lo stile dissolvenza da usare per il player audio",
@@ -150,7 +172,7 @@
         "skipDuration_description": "imposta la durata da saltare quando vengono usati i pulsanti di salto nella barra del player",
         "enableRemote_description": "abilita il controllo remoto del server per permettere ad altri dispositivi di controllare l'applicazione",
         "fontType_optionSystem": "font di sistema",
-        "mpvExecutablePath_description": "imposta il percorso dell'eseguibile di mpv",
+        "mpvExecutablePath_description": "imposta il percorso dell'eseguibile mpv. se lasciato vuoto, verrà utilizzato il percorso predefinito",
         "hotkey_favoriteCurrentSong": "$t(common.currentSong) preferita",
         "crossfadeStyle": "stile dissolvenza",
         "sidebarConfiguration": "configurazione barra laterale",
@@ -268,7 +290,7 @@
         "replayGainMode_description": "aggiusta il volume secondo i valori {{ReplayGain}} salvati nei metadati del file",
         "showSkipButtons": "mostra pulsanti per saltare",
         "sampleRate": "frequenza di campionamento",
-        "sampleRate_description": "seleziona la frequenza di campionamento di output da usare se la frequenza di campionamento selezionata è diversa da quella della del media attuale",
+        "sampleRate_description": "seleziona la frequenza di campionamento di output da utilizzare se quella selezionata è diversa da quella del file sorgente in riproduzione. Un valore inferiore a 8000 utilizzerà la frequenza predefinita",
         "hotkey_togglePreviousSongFavorite": "imposta/rimuovi $t(common.previousSong) favorito",
         "hotkey_unfavoritePreviousSong": "rimuovi $t(common.previousSong) dai preferiti",
         "showSkipButton_description": "mostra o nascondi i pulsanti per saltare nella barra del player",
@@ -293,7 +315,85 @@
         "clearQueryCache": "pulisci cache di feishin",
         "buttonSize_description": "Dimensione bottoni nella barra di riproduzione",
         "clearCache": "pulisci la cache del browser",
-        "clearQueryCache_description": "\"leggera\" pulizia di feishin. verranno aggiornate le playlist, metadata delle tracce e i testi salvati. impostazioni, credenziali del server e le immagini salvate saranno mantenute"
+        "clearQueryCache_description": "\"leggera\" pulizia di feishin. verranno aggiornate le playlist, metadata delle tracce e i testi salvati. impostazioni, credenziali del server e le immagini salvate saranno mantenute",
+        "albumBackground": "immagine di sfondo dell'album",
+        "albumBackground_description": "aggiunge un'immagine di sfondo per le pagine degli album contenenti l'album art",
+        "albumBackgroundBlur": "intensità sfocatura immagine di sfondo dell'album",
+        "albumBackgroundBlur_description": "regola la quantità di sfocatura applicata all'immagine di sfondo dell'album",
+        "artistConfiguration": "configurazione della pagina artista dell’album",
+        "artistConfiguration_description": "configurare quali elementi vengono visualizzati, e in quale ordine, nella pagina dell'artista dell'album",
+        "buttonSize": "dimensione del bottone nella barra di riproduzione",
+        "clearCacheSuccess": "cache pulita correttamente",
+        "contextMenu": "configurazione menu contestuale (clic destro)",
+        "contextMenu_description": "consente di nascondere gli elementi che vengono visualizzati nel menu quando si fa clic destro su un elemento. gli oggetti non selezionati saranno nascosti",
+        "customCssEnable": "abilita css personalizzato",
+        "customCssEnable_description": "consente di scrivere css personalizzati.",
+        "customCssNotice": "Attenzione: sebbene ci sia una certa sanitizzazione (vengono bloccati url() e content:), l’uso di CSS personalizzati può comunque comportare dei rischi modificando l’interfaccia.",
+        "customCss": "css personalizzato",
+        "customCss_description": "contenuto CSS personalizzato. Nota: le proprietà content e gli URL remoti non sono consentiti. Di seguito è mostrata un’anteprima del tuo contenuto. Sono presenti anche altri campi non impostati da te a causa della sanitizzazione.",
+        "discordPausedStatus": "mostra rich presence di Discord quando la riproduzione è in pausa",
+        "discordPausedStatus_description": "quando abilitato, verrà mostrato lo stato del lettore in standby/pausa (nessun brano in riproduzione)",
+        "discordListening": "mostra stato come in ascolto",
+        "discordListening_description": "mostra lo stato come in ascolto invece che in riproduzione",
+        "discordServeImage": "recupera le immagini di {{discord}} dal server",
+        "discordServeImage_description": "condividi la copertina per la rich presence di {{discord}} direttamente dal server, disponibile solo per Jellyfin e Navidrome",
+        "doubleClickBehavior": "aggiungi alla coda tutte le tracce cercate, con un doppio clic",
+        "doubleClickBehavior_description": "se attivato, tutte le tracce corrispondenti alla ricerca verranno aggiunte alla coda. altrimenti, verrà aggiunta alla coda solo la traccia selezionata",
+        "externalLinks": "mostra link esterni",
+        "externalLinks_description": "consente di visualizzare link esterni (Last.fm, MusicBrainz) sulle pagine di artista/album",
+        "preferLocalLyrics": "utilizza i testi locali",
+        "preferLocalLyrics_description": "usa i testi locali anziché quelli online, quando disponibili",
+        "genreBehavior": "comportamento predefinito della pagina genere",
+        "genreBehavior_description": "determina se cliccando su un genere si apre di default la lista dei brani o degli album",
+        "homeConfiguration": "configurazione della home page",
+        "homeConfiguration_description": "configura quali elementi vengono mostrati e in quale ordine nella home page",
+        "homeFeature": "carosello in evidenza nella home page",
+        "homeFeature_description": "controlla se mostrare il grande carosello in evidenza nella pagina principale",
+        "imageAspectRatio": "usa dimensioni originali(aspect ratio) della copertina",
+        "imageAspectRatio_description": "se abilitato, la copertina verrà mostrata utilizzando le dimesioni originali. per le immagini con rapporto diverso da 1:1, lo spazio residuo resterà vuoto",
+        "lastfm": "mostra links last.fm",
+        "lastfm_description": "mostra i link per last.fm sulle pagine di artista/album",
+        "lastfmApiKey": "{{lastfm}} chiave API",
+        "lastfmApiKey_description": "chiave API per {{lastfm}}. necessaria per visualizzare le copertine",
+        "mpvExtraParameters_help": "uno per linea",
+        "musicbrainz": "mostra links musicbrainz",
+        "musicbrainz_description": "mostra link a musicbrainz sulle pagine degli artisti/album, se è disponibile un mbid",
+        "neteaseTranslation": "Abilita traduzioni di NetEase",
+        "neteaseTranslation_description": "Se abilitato, recupera e mostra i testi tradotti da NetEase, se disponibili.",
+        "passwordStore": "Archivio di password/segreti",
+        "passwordStore_description": "specifica quale archivio di password e segreti utilizzare. modificalo in caso di problemi nel salvataggio delle credenziali.",
+        "playButtonBehavior_optionPlayShuffled": "$t(player.shuffle)",
+        "playerAlbumArtResolution": "risoluzione della copertina nel lettore",
+        "playerAlbumArtResolution_description": "la risoluzione dell’anteprima della copertina nel lettore in formato grande. valori più alti la rendono più nitida, ma possono rallentare il caricamento. Il valore predefinito è 0, che indica la modalità automatica",
+        "sidePlayQueueStyle_optionAttached": "fissata",
+        "sidePlayQueueStyle_optionDetached": "sganciata",
+        "startMinimized": "avvia minimizzato",
+        "startMinimized_description": "avvia l'app nella barra di sistema",
+        "transcodeNote": "ha effetto dopo 1 brano (web) - 2 brani (mpv)",
+        "transcode": "abilita la transcodifica",
+        "transcode_description": "abilita la transcodifica in formati diversi",
+        "playerbarOpenDrawer": "attiva/disattiva schermo intero",
+        "playerbarOpenDrawer_description": "consente di cliccare sulla barra del lettore per aprire il lettore a schermo intero",
+        "replayGainClipping": "clipping di {{ReplayGain}}",
+        "replayGainFallback": "metodo alternativo di {{ReplayGain}}",
+        "transcodeBitrate": "bitrate per la transcodifica",
+        "transcodeBitrate_description": "seleziona il bitrate per la transcodifica. 0 significa lasciare che sia il server a scegliere",
+        "transcodeFormat": "formato per la transcodifica",
+        "transcodeFormat_description": "seleziona il formato per la transcodifica. se vuoto viene decisco dal server",
+        "translationApiProvider": "translation api provider",
+        "translationApiProvider_description": "api provider for translation",
+        "translationApiKey": "chiave api translation",
+        "translationApiKey_description": "chiave api per la traduzione (supporta solo endpoint di servizio globali)",
+        "translationTargetLanguage": "lingua di destinazione della traduzione",
+        "translationTargetLanguage_description": "lingua di destinazione per la traduzione",
+        "trayEnabled": "Mostra icona app nella barra di sistema",
+        "trayEnabled_description": "mostra/nascondi icona app nella barra si sistema. se disabilitato, disattiva anche minimizza/chiudi nella barra di sistema",
+        "volumeWidth": "larghezza della barra del volume",
+        "webAudio": "use audio web",
+        "webAudio_description": "usa audio web. abilita funzionalità avanzate come ReplayGain. disabilita se riscontri problemi",
+        "preservePitch": "mantieni tono (pitch)",
+        "preservePitch_description": "mantiene il tono (pitch) durante la modifica della velocità di riproduzione",
+        "volumeWidth_description": "larghezza del cursore del volume"
     },
     "error": {
         "remotePortWarning": "riavvia il server per applicare la nuova porta",
@@ -314,7 +414,11 @@
         "mpvRequired": "MPV richiesto",
         "audioDeviceFetchError": "si è verificato un errore nel provare ad ottenre i device audio",
         "invalidServer": "server non valido",
-        "loginRateError": "troppi tentativi di accesso, per favore riprova tra qualche secondo"
+        "loginRateError": "troppi tentativi di accesso, per favore riprova tra qualche secondo",
+        "badAlbum": "stai visualizzando questa pagina perché questa canzone non fa parte di un album. probabilmente vedi questo messaggio perché hai una canzone posizionata direttamente nella cartella principale della tua libreria musicale. jellyfin raggruppa le tracce solo se si trovano all’interno di una cartella.",
+        "badValue": "opzione non valida \"{{value}}\". valore inesistente",
+        "networkError": "si è verificato un errore di rete",
+        "openError": "impossibile aprire il file"
     },
     "filter": {
         "mostPlayed": "più riprodotti",
@@ -372,7 +476,9 @@
             "settings": "$t(common.setting_other)",
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
-            "albumArtists": "$t(entity.albumArtist_other)"
+            "albumArtists": "$t(entity.albumArtist_other)",
+            "myLibrary": "la mia libreria",
+            "shared": "condivisa $t(entity.playlist_other)"
         },
         "fullscreenPlayer": {
             "config": {
@@ -386,11 +492,16 @@
                 "unsynchronized": "non sinncronizzato",
                 "lyricAlignment": "allineamento testo",
                 "useImageAspectRatio": "usa le proporzioni dell'immagine",
-                "lyricGap": "gap testo"
+                "lyricGap": "gap testo",
+                "dynamicImageBlur": "intensità sfocatura immagine",
+                "dynamicIsImage": "abilita immagine di sfondo",
+                "lyricOffset": "ritardo testi (ms)"
             },
             "upNext": "successivamente",
             "lyrics": "testi",
-            "related": "correlati"
+            "related": "correlati",
+            "visualizer": "visualizzatore audio",
+            "noLyrics": "nessun testo trovato"
         },
         "appMenu": {
             "selectServer": "seleziona server",
@@ -420,7 +531,13 @@
             "addFavorite": "$t(action.addToFavorites)",
             "play": "$t(player.play)",
             "numberSelected": "{{count}} selezionati",
-            "removeFromQueue": "$t(action.removeFromQueue)"
+            "removeFromQueue": "$t(action.removeFromQueue)",
+            "download": "download",
+            "moveToNext": "$t(action.moveToNext)",
+            "playSimilarSongs": "$t(player.playSimilarSongs)",
+            "playShuffled": "$t(player.shuffle)",
+            "shareItem": "condividi elemento",
+            "showDetails": "mostra info"
         },
         "home": {
             "mostPlayed": "più riprodotti",
@@ -431,22 +548,28 @@
         },
         "albumDetail": {
             "moreFromArtist": "di più da questo $t(entity.artist_one)",
-            "moreFromGeneric": "di più da {{item}}"
+            "moreFromGeneric": "di più da {{item}}",
+            "released": "rilasciato"
         },
         "setting": {
             "playbackTab": "riproduzione",
             "generalTab": "generale",
             "hotkeysTab": "tasti a scelta rapida",
-            "windowTab": "finestra"
+            "windowTab": "finestra",
+            "advanced": "avanzate"
         },
         "albumArtistList": {
             "title": "$t(entity.albumArtist_other)"
         },
         "genreList": {
-            "title": "$t(entity.genre_other)"
+            "title": "$t(entity.genre_other)",
+            "showAlbums": "mostra $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "mostra $t(entity.genre_one) $t(entity.track_other)"
         },
         "trackList": {
-            "title": "$t(entity.track_other)"
+            "title": "$t(entity.track_other)",
+            "artistTracks": "tracce di {{artist}}",
+            "genreTracks": "\"{{genre}}\" $t(entity.track_other)"
         },
         "globalSearch": {
             "commands": {
@@ -460,7 +583,36 @@
             "title": "$t(entity.playlist_other)"
         },
         "albumList": {
-            "title": "$t(entity.album_other)"
+            "title": "$t(entity.album_other)",
+            "artistAlbums": "albums di {{artist}}",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)"
+        },
+        "albumArtistDetail": {
+            "about": "Info {{artist}}",
+            "appearsOn": "compare su",
+            "recentReleases": "uscite recenti",
+            "viewDiscography": "mostra discografia",
+            "relatedArtists": "correlati $t(entity.artist_other)",
+            "topSongs": "brani migliori",
+            "topSongsFrom": "brani migliori da {{title}}",
+            "viewAll": "mostra tutto",
+            "viewAllTracks": "mostra tutto $t(entity.track_other)"
+        },
+        "manageServers": {
+            "title": "gestisci servers",
+            "serverDetails": "dettagli server",
+            "url": "URL",
+            "username": "nome utente",
+            "editServerDetailsTooltip": "modifica dettagli server",
+            "removeServer": "rimuovi server"
+        },
+        "itemDetail": {
+            "copyPath": "copia percorso negli appunti",
+            "copiedPath": "percorso copiato con successo",
+            "openFile": "mostra traccia nel gestore file"
+        },
+        "playlist": {
+            "reorder": "riordino abilitato solo quando si ordina per id"
         }
     },
     "form": {
@@ -491,7 +643,7 @@
             "error_savePassword": "si è verificato un errore quando si è provato a salvare la password"
         },
         "addToPlaylist": {
-            "success": "aggiunto {{message}} $t(entity.track_other) a {{numOfPlaylists}} $t(entity.playlist_other)",
+            "success": "aggiunto $t(entity.trackWithCount, {\"count\": {{message}} }) a $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
             "title": "aggiungi a $t(entity.playlist_one)",
             "input_skipDuplicates": "salta duplicati",
             "input_playlists": "$t(entity.playlist_other)"
@@ -502,7 +654,8 @@
         },
         "queryEditor": {
             "input_optionMatchAll": "soddisfa tutti",
-            "input_optionMatchAny": "soddisfa qualsiasi"
+            "input_optionMatchAny": "soddisfa qualsiasi",
+            "title": "editor di query"
         },
         "lyricSearch": {
             "input_name": "$t(common.name)",
@@ -510,7 +663,17 @@
             "title": "cerca testi"
         },
         "editPlaylist": {
-            "title": "modifica $t(entity.playlist_one)"
+            "title": "modifica $t(entity.playlist_one)",
+            "publicJellyfinNote": "Jellyfin non mostra se una playlist è pubblica o meno. Se vuoi che rimanga pubblica, assicurati di selezionare l’opzione seguente",
+            "success": "$t(entity.playlist_one) aggiornato con successo"
+        },
+        "shareItem": {
+            "allowDownloading": "consentire il download",
+            "description": "descrizione",
+            "setExpiration": "imposta scadenza",
+            "success": "link di condivisione copiato negli appunti (o clicca qui per aprirlo)",
+            "expireInvalid": "la scadenza deve essere nel futuro",
+            "createFailed": "condivisione fallita (è abilitata la condivisione?)"
         }
     },
     "table": {
@@ -520,11 +683,17 @@
                 "gap": "$t(common.gap)",
                 "tableColumns": "tabella colonne",
                 "autoFitColumns": "adatta colonne automaticamente",
-                "size": "$t(common.size)"
+                "size": "$t(common.size)",
+                "followCurrentSong": "segui il brano corrente",
+                "itemGap": "spaziatura tra gli elementi (px)",
+                "itemSize": "dimensione dell’elemento (px)"
             },
             "view": {
                 "table": "tabella",
-                "card": "Scheda"
+                "card": "Scheda",
+                "grid": "griglia",
+                "list": "lista",
+                "poster": "poster"
             },
             "label": {
                 "releaseDate": "data rilascio",
@@ -552,7 +721,9 @@
                 "discNumber": "numero disco",
                 "favorite": "$t(common.favorite)",
                 "year": "$t(common.year)",
-                "albumArtist": "$t(entity.albumArtist_one)"
+                "albumArtist": "$t(entity.albumArtist_one)",
+                "codec": "$t(common.codec)",
+                "songCount": "$t(entity.track_other)"
             }
         },
         "column": {
@@ -578,7 +749,8 @@
             "path": "percorso",
             "discNumber": "disco",
             "channels": "$t(common.channel_other)",
-            "size": "$t(common.size)"
+            "size": "$t(common.size)",
+            "codec": "$t(common.codec)"
         }
     },
     "entity": {
@@ -627,6 +799,12 @@
         "genreWithCount_other": "{{count}} generi",
         "trackWithCount_one": "{{count}} traccia",
         "trackWithCount_many": "{{count}} tracce",
-        "trackWithCount_other": "{{count}} tracce"
+        "trackWithCount_other": "{{count}} tracce",
+        "play_one": "{{count}} riproduzione",
+        "play_many": "{{count}} riproduzioni",
+        "play_other": "{{count}} riproduzioni",
+        "song_one": "traccia",
+        "song_many": "tracce",
+        "song_other": "tracce"
     }
 }

src/i18n/locales/nb-NO.json

@@ -104,13 +104,14 @@
         "year": "år",
         "yes": "ja",
         "descending": "synkende",
-        "dismiss": "avkreft",
+        "dismiss": "lukk",
         "delete": "slett",
         "description": "beskrivelse",
         "manage": "håndtere",
         "maximize": "maksimer",
         "right": "høyre",
-        "sortOrder": "rekkefølge"
+        "sortOrder": "rekkefølge",
+        "tags": "tagger"
     },
     "entity": {
         "smartPlaylist": "smart $t(entity.playlist_one)",
@@ -233,7 +234,7 @@
         "addServer": {
             "ignoreCors": "ignorer cors ($t(common.restartRequired))",
             "ignoreSsl": "ignorer ssl ($t(common.restartRequired))",
-            "error_savePassword": "en problem oppstod ved lagring av passord",
+            "error_savePassword": "et problem oppstod ved lagring av passord",
             "input_savePassword": "lagre passord",
             "input_url": "lenke",
             "input_username": "brukernavn",
@@ -269,6 +270,10 @@
         "updateServer": {
             "success": "vellykket oppdatering av serveren",
             "title": "oppdater server"
+        },
+        "queryEditor": {
+            "input_optionMatchAll": "match alle",
+            "input_optionMatchAny": "matche hvilken som helst"
         }
     },
     "page": {
@@ -338,7 +343,7 @@
                 "lyricGap": "sangtekstavstand",
                 "dynamicImageBlur": "bilduskarphetstørrelse",
                 "lyricAlignment": "sangtekstjustering",
-                "lyricOffset": "sangtekstjustering (ms)",
+                "lyricOffset": "sangtekstforskyvning (ms)",
                 "lyricSize": "sangtekststørrelse",
                 "opacity": "absorpsjon",
                 "showLyricMatch": "vis sangteksttreff",
@@ -405,7 +410,8 @@
             "search": "$t(common.search)",
             "settings": "$t(common.setting_other)",
             "shared": "delt $t(entity.playlist_other)",
-            "artists": "$t(entity.artist_other)"
+            "artists": "$t(entity.artist_other)",
+            "myLibrary": "mitt bibliotek"
         },
         "setting": {
             "generalTab": "generelt",
@@ -416,6 +422,9 @@
         },
         "playlistList": {
             "title": "$t(entity.playlist_other)"
+        },
+        "playlist": {
+            "reorder": "omorganisering kun mulig ved sortering på id"
         }
     },
     "player": {
@@ -439,6 +448,68 @@
         "queue_moveToTop": "flytt valgte til bunnen",
         "playbackFetchNoResults": "ingen sanger funnet",
         "playbackSpeed": "avspillingshastighet",
-        "playSimilarSongs": "spill lignende sanger"
+        "playSimilarSongs": "spill lignende sanger",
+        "skip": "hopp over",
+        "shuffle": "spill i tilfeldig rekkefølge",
+        "shuffle_off": "tilfeldig rekkefølge skrudd av",
+        "skip_back": "hopp bakover",
+        "skip_forward": "hopp fremover",
+        "stop": "stopp",
+        "toggleFullscreenPlayer": "bytt til fullskjermspiller",
+        "pause": "sett på pause",
+        "viewQueue": "se kø",
+        "unfavorite": "fjern fra favoritter"
+    },
+    "setting": {
+        "accentColor": "aksentfarge",
+        "accentColor_description": "setter aksentfarge i applikasjonen",
+        "albumBackground": "album bakgrunnsbilde",
+        "albumBackgroundBlur": "album bakgrunnsbilde uskarphetsstørrelse",
+        "albumBackgroundBlur_description": "justerer grad av uskarphet lagt til på album bakgrunnsbilde",
+        "audioDevice": "lydenhet",
+        "zoom": "zoomprosent",
+        "zoom_description": "angir zoomprosent for applikasjonen"
+    },
+    "table": {
+        "config": {
+            "label": {
+                "playCount": "antall avspillinger",
+                "releaseDate": "utgivelsesdato",
+                "trackNumber": "spornummer",
+                "rowIndex": "radindeks",
+                "dateAdded": "dato lagt til",
+                "discNumber": "skivenummer",
+                "lastPlayed": "sist avspilt"
+            },
+            "view": {
+                "table": "tabell",
+                "card": "kort",
+                "grid": "rutenett",
+                "list": "liste",
+                "poster": "plakat"
+            },
+            "general": {
+                "autoFitColumns": "automatisk kolonnetilpasning",
+                "displayType": "visningstype",
+                "followCurrentSong": "følg gjeldende sang"
+            }
+        },
+        "column": {
+            "releaseYear": "år",
+            "comment": "kommentar",
+            "biography": "biografi",
+            "album": "album",
+            "albumArtist": "albumartist",
+            "dateAdded": "dato lagt til",
+            "discNumber": "skive",
+            "favorite": "favoritt",
+            "lastPlayed": "sist avspilt",
+            "path": "sti",
+            "playCount": "avspillinger",
+            "rating": "vurdering",
+            "releaseDate": "utgivelsesdato",
+            "title": "tittel",
+            "trackNumber": "spor"
+        }
     }
 }

src/i18n/locales/pt-BR.json

@@ -93,7 +93,9 @@
         "albumPeak": "pico do álbum",
         "trackGain": "ganho da faixa",
         "additionalParticipants": "participantes adicionais",
-        "tags": "tags"
+        "tags": "tags",
+        "newVersion": "uma nova versão foi instalada ({{version}})",
+        "viewReleaseNotes": "ver notas de lançamento"
     },
     "action": {
         "goToPage": "vá para página",
@@ -216,7 +218,9 @@
         "crossfadeDuration_description": "define a duração do efeito crossfade",
         "customCssNotice": "Aviso: apesar de existir alguma higienização (url() e content: não são permitidas), o uso de CSS personalizado ainda pode representar riscos ao alterar a interface.",
         "crossfadeStyle": "estilo do crossfade",
-        "crossfadeStyle_description": "seleciona qual estilo de crossfade usado no player de áudio"
+        "crossfadeStyle_description": "seleciona qual estilo de crossfade usado no player de áudio",
+        "disableAutomaticUpdates": "desabilitar atualizações automáticas",
+        "disableLibraryUpdateOnStartup": "desabilitar a verificação de novas versões na inicialização"
     },
     "table": {
         "config": {
@@ -273,7 +277,8 @@
             "nowPlaying": "tocando agora",
             "playlists": "$t(entity.playlist_other)",
             "search": "$t(common.search)",
-            "settings": "$t(common.setting_other)"
+            "settings": "$t(common.setting_other)",
+            "myLibrary": "minha biblioteca"
         },
         "playlistList": {
             "title": "$t(entity.playlist_other)"

src/i18n/locales/sl.json

@@ -0,0 +1,647 @@
+{
+    "action": {
+        "addToFavorites": "dodaj na $t(entity.favorite_other)",
+        "addToPlaylist": "dodaj na $t(entity.playlist_one)",
+        "clearQueue": "počisti čakalno vrsto",
+        "createPlaylist": "ustvari $t(entity.playlist_one)",
+        "deletePlaylist": "izbriši $t(entity.playlist_one)",
+        "deselectAll": "odizberi vse",
+        "editPlaylist": "uredi $t(entity.playlist_one)",
+        "goToPage": "pojdi na stran",
+        "moveToNext": "pojdi na naslednjo",
+        "moveToBottom": "pojdi na dno",
+        "moveToTop": "pojdi na vrh",
+        "refresh": "$t(common.refresh)",
+        "removeFromFavorites": "odstrani iz $t(entity.favorite_other)",
+        "removeFromPlaylist": "odstrani iz seznama predvajanja",
+        "removeFromQueue": "odstrani iz čakalne vrste",
+        "setRating": "nastavi oceno",
+        "toggleSmartPlaylistEditor": "preklopi urejevalnik $t(entity.smartPlaylist)",
+        "viewPlaylists": "poglej $t(entity.playlist_other)",
+        "openIn": {
+            "lastfm": "Odpri v Last.fm",
+            "musicbrainz": "Odpri v MusicBrainz"
+        }
+    },
+    "common": {
+        "action_one": "dejanje",
+        "action_two": "dejanji",
+        "action_few": "dejanja",
+        "action_other": "dejanj",
+        "add": "dodaj",
+        "additionalParticipants": "dodatni udeleženci",
+        "newVersion": "nova verzija je bila nameščena ({{version}})",
+        "viewReleaseNotes": "poglej zapiske o različici",
+        "albumGain": "ojačitev albuma",
+        "albumPeak": "vrh albuma",
+        "areYouSure": "ali si prepričan?",
+        "ascending": "naraščajoče",
+        "backward": "nazaj",
+        "biography": "biografija",
+        "bitrate": "bitna hitrost",
+        "bpm": "unm",
+        "cancel": "prekliči",
+        "center": "center",
+        "channel_one": "kanal",
+        "channel_two": "kanala",
+        "channel_few": "kanali",
+        "channel_other": "kanalov",
+        "clear": "počisti",
+        "close": "zapri",
+        "codec": "kodek",
+        "collapse": "strni",
+        "comingSoon": "prihaja kmalu …",
+        "configure": "prilagodi",
+        "confirm": "potrdi",
+        "create": "ustvari",
+        "currentSong": "trenutna $t(entity.track_one)",
+        "decrease": "zmanjšaj",
+        "delete": "izbriši",
+        "descending": "padajoče",
+        "description": "opis",
+        "disable": "onemogoči",
+        "disc": "disk",
+        "dismiss": "spreglej",
+        "duration": "trajanje",
+        "edit": "uredi",
+        "enable": "omogoči",
+        "expand": "razširi",
+        "favorite": "najljubša",
+        "filter_one": "filter",
+        "filter_two": "filtra",
+        "filter_few": "filtri",
+        "filter_other": "filtrov",
+        "filters": "filtri",
+        "forceRestartRequired": "znova zaženi, da potrdiš spremembe ... zapri obvestilo, da znova zaženeš",
+        "forward": "naprej",
+        "gap": "reža",
+        "home": "domov",
+        "increase": "povišaj",
+        "limit": "omeji",
+        "manage": "upravljaj",
+        "maximize": "maksimiziraj",
+        "menu": "meni",
+        "minimize": "pomanjšaj",
+        "modified": "spremenjeno",
+        "mbid": "MusicBrainz identifikator (ID)",
+        "left": "levo",
+        "no": "ne",
+        "none": "noben",
+        "noResultsFromQuery": "poizvedba ni vrnila rezultatov",
+        "note": "opomba",
+        "ok": "ok",
+        "owner": "lastnik",
+        "path": "pot",
+        "playerMustBePaused": "predvajalnik mora biti ustavljen",
+        "preview": "predogled",
+        "previousSong": "prejšnja $t(entity.track_one)",
+        "quit": "izhod",
+        "random": "naključno",
+        "rating": "ocena",
+        "refresh": "osveži",
+        "reload": "ponovno naloži",
+        "reset": "ponastavi",
+        "resetToDefault": "ponastavi na privzeto",
+        "restartRequired": "zahtevan je ponovni zagon",
+        "right": "desno",
+        "save": "shrani",
+        "saveAndReplace": "shrani in zamenjaj",
+        "saveAs": "shrani kot",
+        "search": "išči",
+        "setting": "nastavitev",
+        "share": "deli",
+        "size": "velikost",
+        "sortOrder": "vrstni red",
+        "tags": "oznake",
+        "title": "naslov",
+        "trackNumber": "skladba",
+        "trackGain": "glasnost skladbe",
+        "trackPeak": "vrhunec skladbe",
+        "translation": "prevod",
+        "unknown": "neznan",
+        "version": "verzija",
+        "year": "leto",
+        "yes": "da",
+        "name": "ime"
+    },
+    "entity": {
+        "album_one": "album",
+        "album_two": "albuma",
+        "album_few": "albumi",
+        "album_other": "albumov",
+        "albumArtist_one": "izvajalec albuma",
+        "albumArtist_two": "izvajalec albumov",
+        "albumArtist_few": "izvajalec albumov",
+        "albumArtist_other": "izvajalec albumov",
+        "albumArtistCount_one": "{{count}} izvajalec albuma",
+        "albumArtistCount_two": "{{count}} izvajalca albuma",
+        "albumArtistCount_few": "{{count}} izvajalci albuma",
+        "albumArtistCount_other": "{{count}} izvajalcev albuma",
+        "albumWithCount_one": "{{count}} album",
+        "albumWithCount_two": "{{count}} albuma",
+        "albumWithCount_few": "{{count}} albumi",
+        "albumWithCount_other": "{{count}} albumov",
+        "artist_one": "izvajalec",
+        "artist_two": "izvajalca",
+        "artist_few": "izvajalci",
+        "artist_other": "izvajalcev",
+        "artistWithCount_one": "{{count}} izvajalec",
+        "artistWithCount_two": "{{count}} izvajalca",
+        "artistWithCount_few": "{{count}} izvajalci",
+        "artistWithCount_other": "{{count}} izvajalcev",
+        "favorite_one": "priljubljen",
+        "favorite_two": "priljubljena",
+        "favorite_few": "priljubljeni",
+        "favorite_other": "priljubljenih",
+        "folder_one": "mapa",
+        "folder_two": "mapi",
+        "folder_few": "mape",
+        "folder_other": "map",
+        "folderWithCount_one": "{{count}} mapa",
+        "folderWithCount_two": "{{count}} mapi",
+        "folderWithCount_few": "{{count}} mape",
+        "folderWithCount_other": "{{count}} map",
+        "genre_one": "zvrst",
+        "genre_two": "zvrsti",
+        "genre_few": "zvrsti",
+        "genre_other": "zvrsti",
+        "genreWithCount_one": "{{count}} zvrst",
+        "genreWithCount_two": "{{count}} zvrsti",
+        "genreWithCount_few": "{{count}} zvrsti",
+        "genreWithCount_other": "{{count}} zvrsti",
+        "playlist_one": "seznam predvajanja",
+        "playlist_two": "seznama predvajanja",
+        "playlist_few": "seznami predvajanja",
+        "playlist_other": "seznamov predvajanja",
+        "play_one": "{{count}} predvajanje",
+        "play_two": "{{count}} predvajanji",
+        "play_few": "{{count}} predvajanja",
+        "play_other": "{{count}} predvajanj",
+        "playlistWithCount_one": "{{count}} seznam predvajanja",
+        "playlistWithCount_two": "{{count}} seznama predvajanja",
+        "playlistWithCount_few": "{{count}} seznami predvajanja",
+        "playlistWithCount_other": "{{count}} seznamov predvajanja",
+        "smartPlaylist": "pametni $t(entity.playlist_one)",
+        "track_one": "skladba",
+        "track_two": "skladbi",
+        "track_few": "skladbe",
+        "track_other": "skladb",
+        "song_one": "pesem",
+        "song_two": "pesmi",
+        "song_few": "pesmi",
+        "song_other": "pesmi",
+        "trackWithCount_one": "{{count}} skladba",
+        "trackWithCount_two": "{{count}} skladbi",
+        "trackWithCount_few": "{{count}} skladbe",
+        "trackWithCount_other": "{{count}} skladb"
+    },
+    "error": {
+        "apiRouteError": "preusmeritev zahteve ni bila mogoča",
+        "audioDeviceFetchError": "napaka pri poskusu pridobivanja avdio naprav",
+        "authenticationFailed": "napaka pri avtentikaciji",
+        "badAlbum": "ta stran je prikazana ker skladba ne pripada nobenemu albumu. skladba se verjetno nahaja na vrhu datotečne strukture direktorija z glasbo. jellyfin razporedi skladbe v skupine samo v primeru, ko se nahajajo v direktoriju.",
+        "badValue": "neveljavna možnost \"{{value}}\". ta vrednost ne obstaja več",
+        "credentialsRequired": "zahtevana prijava",
+        "endpointNotImplementedError": "{{serverType}} ne implementira končne točke {{endpoint}}",
+        "genericError": "prišlo je do napake",
+        "invalidServer": "neveljaven strežnik",
+        "localFontAccessDenied": "dostop do lokalnih pisav je bil zavrnjen",
+        "loginRateError": "preveč poskusov prijave, prosimo, poskusite čez nekaj sekund",
+        "mpvRequired": "obvezen MPV",
+        "networkError": "prišlo je do mrežne napake",
+        "openError": "datoteke ni mogoče odpreti",
+        "playbackError": "prišlo je do napake pri poskusu predvajanja skladbe",
+        "remoteDisableError": "oddaljenega strežnika ni bilo mogoče $t(common.disable)ti",
+        "remoteEnableError": "oddaljenega strežnika ni bilo mogoče $t(common.enable)ti",
+        "remotePortError": "pri nastavljanju vrat oddaljenega strežnika je prišlo do napake",
+        "remotePortWarning": "ponovno zaženite strežnik da aplicirate spremembo strežniških vrat",
+        "serverNotSelectedError": "izbran ni bil noben strežnik",
+        "serverRequired": "strežnik zahtevan",
+        "sessionExpiredError": "vaša seja se je iztekla",
+        "systemFontError": "napaka pri pridobivanju sistemskih pisav"
+    },
+    "filter": {
+        "album": "$t(entity.album_one)",
+        "albumArtist": "$t(entity.albumArtist_one)",
+        "albumCount": "število $t(entity.album_other)",
+        "artist": "$t(entity.artist_one)",
+        "biography": "biografija",
+        "bitrate": "bitna hitrost",
+        "bpm": "bpm",
+        "channels": "$t(common.channel_other)",
+        "comment": "komentar",
+        "communityRating": "ocena skupnosti",
+        "criticRating": "ocena kritikov",
+        "dateAdded": "dodano",
+        "disc": "disk",
+        "duration": "trajanje",
+        "favorited": "priljubljeno",
+        "fromYear": "od leta",
+        "genre": "$t(entity.genre_one)",
+        "id": "identifikator",
+        "isCompilation": "je kompilacija",
+        "isFavorited": "je dodan med priljubljene",
+        "isPublic": "je javno",
+        "isRated": "je ocenjen",
+        "isRecentlyPlayed": "je bil nedavno predvajan",
+        "lastPlayed": "zadnje predvajano",
+        "mostPlayed": "najpogosteje predvajano",
+        "name": "ime",
+        "note": "opomba",
+        "owner": "$t(common.owner)",
+        "path": "pot",
+        "playCount": "število predvajanj",
+        "random": "naključno",
+        "rating": "ocena",
+        "recentlyAdded": "nedavno dodano",
+        "recentlyPlayed": "nedavno predvajano",
+        "recentlyUpdated": "nedavno posodobljeno",
+        "releaseDate": "datum izida",
+        "releaseYear": "leto izida",
+        "search": "išči",
+        "songCount": "število pesmi",
+        "title": "naslov",
+        "toYear": "do leta",
+        "trackNumber": "skladba"
+    },
+    "form": {
+        "addServer": {
+            "error_savePassword": "pri shranjevanju gesla je prišlo do napake",
+            "ignoreCors": "ignoriraj cors $t(common.restartRequired)",
+            "ignoreSsl": "ignoriraj ssl $t(common.restartRequired)",
+            "input_legacyAuthentication": "omogoči legacy avtentikacijo",
+            "input_name": "ime strežnika",
+            "input_password": "geslo",
+            "input_savePassword": "shrani geslo",
+            "input_url": "url",
+            "input_username": "uporabniško ime",
+            "success": "dodajanje strežnika uspešno",
+            "title": "dodaj strežnik"
+        },
+        "addToPlaylist": {
+            "input_playlists": "$t(entity.playlist_other)",
+            "input_skipDuplicates": "preskoči duplikate",
+            "success": "$t(entity.trackWithCount, {\"count\": {{message}} }) dodan v $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
+            "title": "dodaj v $t(entity.playlist_one)"
+        },
+        "createPlaylist": {
+            "input_description": "$t(common.description)",
+            "input_name": "$t(common.name)",
+            "input_owner": "$t(common.owner)",
+            "input_public": "javno",
+            "success": "$t(entity.playlist_one) je bil uspešno ustvarjen",
+            "title": "ustvari $t(entity.playlist_one)"
+        },
+        "deletePlaylist": {
+            "input_confirm": "vpišite ime $t(entity.playlist_one) za potrditev",
+            "success": "$t(entity.playlist_one) uspešno izbrisan",
+            "title": "izbriši $t(entity.playlist_one)"
+        },
+        "editPlaylist": {
+            "publicJellyfinNote": "Jellyfin ne poda informacij o tem, ali gre za javni ali zasebni seznam predvajanja. Če želite, da seznam predvajanja ostane javen, izberite naslednji vnos",
+            "success": "$t(entity.playlist_one) uspešno posodobljen",
+            "title": "uredi $t(entity.playlist_one)"
+        },
+        "lyricSearch": {
+            "input_artist": "$t(entity.artist_one)",
+            "input_name": "$t(common.name)",
+            "title": "iskanje po besedilu"
+        },
+        "queryEditor": {
+            "title": "urejevalnik poizvedb",
+            "input_optionMatchAll": "ujemanje vseh",
+            "input_optionMatchAny": "ujemanje z najmanj enim"
+        },
+        "shareItem": {
+            "allowDownloading": "dovoli prenašanje",
+            "description": "opis",
+            "setExpiration": "nastavi datum poteka veljavnosti",
+            "success": "deli povezavo v odložišču (ali klikni tukaj za odpiranje)",
+            "expireInvalid": "datum poteka veljavnosti mora biti v prihodnosti",
+            "createFailed": "deljenje ni uspelo (je deljenje omogočeno?)"
+        },
+        "updateServer": {
+            "success": "strežnik uspešno posodobljen",
+            "title": "posodobi strežnik"
+        }
+    },
+    "page": {
+        "albumArtistDetail": {
+            "about": "O izvajalcu",
+            "appearsOn": "se pojavi na",
+            "recentReleases": "zadnje izdaje",
+            "viewDiscography": "poglej diskografijo",
+            "relatedArtists": "sorodni $t(entity.artist_other)",
+            "topSongs": "najboljše skladbe",
+            "topSongsFrom": "najboljše skladbe iz {{title}}",
+            "viewAll": "poglej vse",
+            "viewAllTracks": "poglej vse $t(entity.track_other)"
+        },
+        "albumArtistList": {
+            "title": "$t(entity.albumArtist_other)"
+        },
+        "albumDetail": {
+            "moreFromArtist": "več od $t(entity.artist_one)",
+            "moreFromGeneric": "več iz {{item}}",
+            "released": "izdano"
+        },
+        "albumList": {
+            "artistAlbums": "albumi izvajalca {{artist}}",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)",
+            "title": "$t(entity.album_other)"
+        },
+        "appMenu": {
+            "collapseSidebar": "skrij stransko vrstico",
+            "expandSidebar": "razširi stransko vrstico",
+            "goBack": "nazaj",
+            "goForward": "naprej",
+            "manageServers": "urejanje strežnikov",
+            "openBrowserDevtools": "odpri orodja za razvijalce brskalnika",
+            "quit": "$t(common.quit)",
+            "selectServer": "izberi strežnik",
+            "settings": "$t(common.setting_other)",
+            "version": "verzija {{version}}"
+        },
+        "manageServers": {
+            "title": "urejanje strežnikov",
+            "serverDetails": "podrobosti o strežniku",
+            "url": "URL",
+            "username": "uporabniško ime",
+            "editServerDetailsTooltip": "urejanje podrobnosti strežnika",
+            "removeServer": "odstrani strežnik"
+        },
+        "contextMenu": {
+            "addFavorite": "$t(action.addToFavorites)",
+            "addLast": "$t(player.addLast)",
+            "addNext": "$t(player.addNext)",
+            "addToFavorites": "$t(action.addToFavorites)",
+            "addToPlaylist": "$t(action.addToPlaylist)",
+            "createPlaylist": "$t(action.createPlaylist)",
+            "deletePlaylist": "$t(action.deletePlaylist)",
+            "deselectAll": "$t(action.deselectAll)",
+            "download": "prenesi",
+            "moveToNext": "$t(action.moveToNext)",
+            "moveToBottom": "$t(action.moveToBottom)",
+            "moveToTop": "$t(action.moveToTop)",
+            "numberSelected": "{{count}} izbranih",
+            "play": "$t(player.play)",
+            "playSimilarSongs": "$t(player.playSimilarSongs)",
+            "removeFromFavorites": "$t(action.removeFromFavorites)",
+            "removeFromPlaylist": "$t(action.removeFromPlaylist)",
+            "removeFromQueue": "$t(action.removeFromQueue)",
+            "setRating": "$t(action.setRating)",
+            "playShuffled": "$t(player.shuffle)",
+            "shareItem": "deli",
+            "showDetails": "pridobi informacije"
+        },
+        "fullscreenPlayer": {
+            "config": {
+                "dynamicBackground": "dinamično ozadje",
+                "dynamicImageBlur": "velikost zameglitve slike",
+                "dynamicIsImage": "omogoči sliko v ozadju",
+                "followCurrentLyric": "sledi besedilu",
+                "lyricAlignment": "poravnava besedila",
+                "lyricOffset": "zamik besedila (ms)",
+                "lyricGap": "razmik besedila",
+                "lyricSize": "velikost besedila",
+                "opacity": "prosojnost",
+                "showLyricMatch": "prikaži ujemanje besedila",
+                "showLyricProvider": "pokaži ponudnika besedila",
+                "synchronized": "sinhronizirano",
+                "unsynchronized": "nesinhronizirano",
+                "useImageAspectRatio": "uporabi razmerje stranic slike"
+            },
+            "lyrics": "besedilo",
+            "related": "sorodno",
+            "upNext": "sledi",
+            "visualizer": "vizualizator",
+            "noLyrics": "ni bilo najdenih besedil"
+        },
+        "genreList": {
+            "showAlbums": "prikaži $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "prikaži $t(entity.genre_one) $t(entity.track_other)",
+            "title": "$t(entity.genre_other)"
+        },
+        "globalSearch": {
+            "commands": {
+                "goToPage": "pojdi na stran",
+                "searchFor": "išči {{query}}",
+                "serverCommands": "strežniški ukazi"
+            },
+            "title": "ukazi"
+        },
+        "home": {
+            "explore": "razišči knjižnico",
+            "mostPlayed": "najpogosteje predvajano",
+            "newlyAdded": "zadnje dodane izdaje",
+            "recentlyPlayed": "nedavno predvajano",
+            "title": "$t(common.home)"
+        },
+        "itemDetail": {
+            "copyPath": "kopiraj v odložišče",
+            "copiedPath": "kopiranje poti uspešno",
+            "openFile": "prikaži skladbo v upravitelju datotek"
+        },
+        "playlist": {
+            "reorder": "preurejanje je omogočeno samo pri razvrščanju po identifikatorju"
+        },
+        "playlistList": {
+            "title": "$t(entity.playlist_other)"
+        },
+        "setting": {
+            "advanced": "napredno",
+            "generalTab": "splošno",
+            "hotkeysTab": "blžnjice",
+            "playbackTab": "predvajanje",
+            "windowTab": "okno"
+        },
+        "sidebar": {
+            "albumArtists": "$t(entity.albumArtist_other)",
+            "albums": "$t(entity.album_other)",
+            "artists": "$t(entity.artist_other)",
+            "folders": "$t(entity.folder_other)",
+            "genres": "$t(entity.genre_other)",
+            "home": "$t(common.home)",
+            "myLibrary": "moja knjižnica",
+            "nowPlaying": "trenutno se predvaja",
+            "playlists": "$t(entity.playlist_other)",
+            "search": "$t(common.search)",
+            "settings": "$t(common.setting_other)",
+            "shared": "deljen $t(entity.playlist_other)",
+            "tracks": "$t(entity.track_other)"
+        },
+        "trackList": {
+            "artistTracks": "skladbe po {{artist}}",
+            "genreTracks": "\"{{genre}}\" $t(entity.track_other)",
+            "title": "$t(entity.track_other)"
+        }
+    },
+    "player": {
+        "addLast": "dodaj zadnje",
+        "addNext": "dodaj naslednje",
+        "favorite": "dodaj med priljubljene",
+        "mute": "utišaj",
+        "muted": "utišano",
+        "next": "naslednje",
+        "play": "predvajaj",
+        "playbackFetchCancel": "akcija traja dlje časa... zaprite obvestilo za preklic",
+        "playbackFetchInProgress": "nalaganje pesmi…",
+        "playbackFetchNoResults": "nobena pesem ni bila najdena",
+        "playbackSpeed": "hitrost predvajanja",
+        "playRandom": "predvajaj naključno",
+        "playSimilarSongs": "predvajaj sorodne pesmi",
+        "previous": "prejšnje",
+        "queue_clear": "počisti čakalno vrsto",
+        "queue_moveToBottom": "premakni izbrano na vrh",
+        "queue_moveToTop": "premakni izbrano na dno",
+        "queue_remove": "odstrani izbrano",
+        "repeat": "ponovi",
+        "repeat_all": "ponovi vse",
+        "repeat_off": "ne ponavljaj",
+        "shuffle": "predvajaj v naključnem vrstnem redu",
+        "shuffle_off": "prevajanje v naključnem vrstnem redu izključeno",
+        "skip": "preskoči",
+        "skip_back": "preskoči nazaj",
+        "skip_forward": "preskoči naprej",
+        "stop": "ustavi",
+        "toggleFullscreenPlayer": "preklopi predvajalnik v celozaslonski način",
+        "unfavorite": "odstrani iz priljubljenih",
+        "pause": "premor",
+        "viewQueue": "poglej čakalno vrsto"
+    },
+    "setting": {
+        "accentColor": "barva poudarka",
+        "accentColor_description": "nastavi barva poudarka aplikacije",
+        "albumBackground": "slika ozadja albuma",
+        "albumBackground_description": "doda sliko ozadja za strani albuma",
+        "albumBackgroundBlur": "velikost zameglitve slike ozadja albuma",
+        "albumBackgroundBlur_description": "spremeni moč zameglitve slike ozadja albuma",
+        "applicationHotkeys": "bližnjične tipke aplikacije",
+        "applicationHotkeys_description": "konfigurira bližnjične tipke aplikacije. obkljukajte da nastavite globalne bližnjico na tipkovnici (samo na namizju)",
+        "artistConfiguration": "konfiguracija strani izvajalca albuma",
+        "artistConfiguration_description": "konfiguriranje vsebine in vrstnega reda prikaza na strani izvajalca albuma",
+        "audioDevice": "avdio naprava",
+        "audioDevice_description": "izberite avdio napravo za predvajanje (samo v spletnem predvajalniku)",
+        "audioExclusiveMode": "avdio način",
+        "audioExclusiveMode_description": "omogoči način ekskluzivnega predvajanja. V tem načinu je sistem običajno zaklenjen in samo mpv lahko oddaja zvok",
+        "audioPlayer": "avdio predvajalnik",
+        "audioPlayer_description": "izberite avdio predvajalnik za predvajanje",
+        "buttonSize": "velikost gumbov vrstice predvajalnika",
+        "buttonSize_description": "velikost gumbov v vrstici predvajalnika",
+        "clearCache": "izbriši začasni pomnilnik",
+        "clearCache_description": "poleg brisanja feishinovega začasnega pomnilnika bo izbrisan tudi začasni pomnilnik brskalnika. nastavitve in prijavni podatki strežnikov se ohranijo",
+        "clearQueryCache": "počisti feishinov začasni pomnilnik",
+        "clearQueryCache_description": "osveži sezname predvajanja, metapodatke in ponastavi shranjena besedila. nastavitve, prijavni podatki za strežnike in slike se ohranijo",
+        "clearCacheSuccess": "začasni pomnilnik uspešno izbrisan",
+        "contextMenu": "konfiguracija kontekstnega menija (desni klik)",
+        "contextMenu_description": "omogoči skrivanje vrstic v meniju, prikazanem ob desnem kliku. odznačeni predmeti bodo skriti",
+        "crossfadeDuration": "trajanje prehoda",
+        "crossfadeDuration_description": "nastavi čas trajanja prehoda med pesmimi",
+        "crossfadeStyle": "tip prehoda",
+        "crossfadeStyle_description": "izbira tipa efekta prehoda",
+        "customCssEnable": "omogoči css po meri",
+        "customCssEnable_description": "omogoča urejanje css-ja po meri.",
+        "customCssNotice": "Opozorilo: kljub določenim varnostnim ukrepom (prepoved url() in content:) lahko uporaba CSS po meri s spreminjanjem vmesnika še vedno predstavlja tveganje.",
+        "customCss": "css po meri",
+        "customCss_description": "vsebina css po meri. Opomba: vsebina in oddaljeni url-ji so prepovedane lastnosti. Spodaj je prikazan predogled vaše vsebine. Dodatna polja, ki jih niste nastavili, so prisotna zaradi prečiščevanja.",
+        "customFontPath": "pot za pisavo po meri",
+        "customFontPath_description": "nastavi pot do pisave po meri",
+        "disableAutomaticUpdates": "onemogoči samodejne posodobitve",
+        "disableLibraryUpdateOnStartup": "onemogoči prevejranje novih verzij ob zagonu",
+        "discordApplicationId": "{{discord}} identifikator aplikacije",
+        "discordApplicationId_description": "identifikator aplikacije za {{discord}} bogato prezenco (privzeto {{defaultId}})",
+        "discordPausedStatus": "prikaži bogato prezenco med ustavljenim predvajanjem",
+        "discordPausedStatus_description": "ko je nastavitev omogočena, se bo status prikazal tudi ko je predvajanje začasno zaustavljeno",
+        "discordIdleStatus": "prikaže stanje mirovanja v bogati prezenci",
+        "discordIdleStatus_description": "ko je nastavitev omogočena, se bo status posodabljal ko predvajalnik miruje",
+        "discordListening": "prikaži status poslušanja",
+        "discordListening_description": "prikaži status poslušanja namesto predvajanja",
+        "discordRichPresence": "{{discord}} bogata prezenca",
+        "discordRichPresence_description": "omogoči prikaz statusa predvajanja v {{discord}} bogati prezenci. Oznake slike so: {{icon}}, {{playing}} in {{paused}}",
+        "discordServeImage": "pošiljaj {{discord}} u slike iz strežnika",
+        "discordServeImage_description": "deli naslovne slike za {{discord}} bogato prisotnost iz samega strežnika, na voljo samo za jellyfin in navidrome",
+        "discordUpdateInterval": "interval posodabljanja {{discord}} bogate prezence",
+        "discordUpdateInterval_description": "čas v sekundah med posameznimi posodobitvami (najmanj 15 sekund)",
+        "doubleClickBehavior": "dvojni klik doda vse iskane skladbe v čakalno vrsto",
+        "doubleClickBehavior_description": "če je nastavitev vklopljena se bodo v čakalno vrsto dodale vse skladbe, ki ustrezajo iskanju. v nasprotnem primeru se v čakalno vrsto doda samo izbrana skladba",
+        "enableRemote": "omogoči oddaljeno upravljanje strežnika",
+        "enableRemote_description": "omogoči oddaljeno nadzorovanje strežnika in s tem dovoli drugim napravam da upravljajo aplikacijo",
+        "externalLinks": "prikaži zunanje povezave",
+        "externalLinks_description": "omogoči prikaz zunanjih povezav (Last.fm, MusicBrainz) na straneh albumov,izvajalcev",
+        "exitToTray": "minimiziraj",
+        "exitToTray_description": "ob izhodu se aplikacija minimizira v opravilno vrstico",
+        "floatingQueueArea": "prikaži območje plavajoče čakalne vrste",
+        "floatingQueueArea_description": "na desni strani zaslona prikažite ikono za ogled čakalne vrste predvajanja",
+        "followLyric": "sledenje besedilu",
+        "followLyric_description": "pomaknite besedilo pesmi do trenutnega položaja predvajanja",
+        "preferLocalLyrics": "prioritiziraj lokalna besedila",
+        "preferLocalLyrics_description": "prioritiziraj lokalna besedila pred oddaljenimi, kadar so na voljo",
+        "font": "pisava",
+        "font_description": "nastavi pisavo, ki jo bo aplikacija uporabljala",
+        "fontType": "tip pisave",
+        "fontType_description": "vgrajena pisava izbere eno od pisav, ki jih ponuja Feishin. sistemska pisava vam omogoča, da izberete katero koli pisavo, ki jo ponuja vaš operacijski sistem. po meri lahko izberete svojo pisavo",
+        "fontType_optionBuiltIn": "vgrajena pisava",
+        "fontType_optionCustom": "pisava po meri",
+        "fontType_optionSystem": "sistemska pisava",
+        "gaplessAudio": "neprekinjen avdio",
+        "gaplessAudio_description": "nastavi neprekinjen avdio za mpv",
+        "gaplessAudio_optionWeak": "šibko (priporočeno)",
+        "genreBehavior": "privzeto vedenje strani z zvrstmi",
+        "genreBehavior_description": "določa, ali se ob kliku na zvrst privzeto odpre seznam skladb ali albumov",
+        "globalMediaHotkeys": "globalne bližnjične tipke za vsebino",
+        "globalMediaHotkeys_description": "omogočite ali onemogočite uporabo bližnjic za sistemske medije za nadzor predvajanja",
+        "homeConfiguration": "konfiguracija domače strani",
+        "homeConfiguration_description": "konfigurirajte, kateri elementi so prikazani na domači strani in v kakšnem vrstnem redu",
+        "homeFeature": "tekoči trak na domači strani",
+        "homeFeature_description": "nadzoruje, ali naj se na domači strani prikaže velik tekoči trak",
+        "hotkey_browserBack": "nazaj (brskalnik)",
+        "hotkey_browserForward": "naprej (brskalnik)",
+        "hotkey_favoriteCurrentSong": "dodaj $t(common.currentSong) med priljubljene",
+        "hotkey_favoritePreviousSong": "dodaj $t(common.previousSong) med priljubljene",
+        "hotkey_globalSearch": "globalno iskanje",
+        "hotkey_localSearch": "iskanje na strani",
+        "hotkey_playbackNext": "naslednja skladba",
+        "hotkey_playbackPause": "pavza",
+        "hotkey_playbackPlay": "predvajaj",
+        "hotkey_playbackPlayPause": "predvajaj / pavza",
+        "hotkey_playbackPrevious": "prejšnja skladba",
+        "hotkey_playbackStop": "ustavi",
+        "hotkey_rate0": "počisti oceno",
+        "hotkey_rate1": "oceni z 1 zvezdico",
+        "hotkey_rate2": "oceni z 2 zvezdicama",
+        "hotkey_rate3": "oceni s 3 zvezdicami",
+        "hotkey_rate4": "oceni s 4 zvezdicami",
+        "hotkey_rate5": "oceni s 5 zvezdicami",
+        "hotkey_skipBackward": "preskoči nazaj",
+        "hotkey_skipForward": "preskoči naprej",
+        "hotkey_toggleCurrentSongFavorite": "dodaj/odstrani $t(common.currentSong) iz seznama priljubljenih",
+        "hotkey_toggleFullScreenPlayer": "preklopi predvajalnik na celozaslonski način",
+        "hotkey_togglePreviousSongFavorite": "dodaj/odstrani $t(common.previousSong) iz seznama priljubljenih",
+        "hotkey_toggleQueue": "preklopi čakalno vrsto",
+        "hotkey_toggleRepeat": "preklopi ponovitve",
+        "hotkey_toggleShuffle": "preklopi naključni vrstni red predvajanja",
+        "hotkey_unfavoriteCurrentSong": "odstrani $t(common.currentSong) iz seznama priljubljenih",
+        "hotkey_unfavoritePreviousSong": "odstrani $t(common.previousSong) iz seznama priljubljenih",
+        "hotkey_volumeDown": "znižaj glasnost",
+        "hotkey_volumeMute": "utišaj",
+        "hotkey_volumeUp": "povišaj glasnost",
+        "hotkey_zoomIn": "povečaj",
+        "hotkey_zoomOut": "pomanjšaj",
+        "imageAspectRatio": "uporabi razmerje stranic izvorne naslovnice",
+        "imageAspectRatio_description": "če je omogočeno, bo naslovnica prikazana z izvornim razmerjem stranic. za slike, ki niso 1:1, bo preostali prostor prazen",
+        "language": "jezik",
+        "language_description": "nastavi jezik aplikacije ($t(common.restartRequired))",
+        "lastfm": "prikaži last.fm povezave",
+        "lastfm_description": "prikaži povezave do last.fm na straneh izvajalcev/albumov",
+        "lastfmApiKey": "API ključ {{lastfm}}",
+        "lastfmApiKey_description": "API ključ za {{lastfm}}. potreben za naslovnico albuma",
+        "lyricFetch": "pridobi besedila iz interneta",
+        "lyricFetch_description": "pridobivanje besedil iz različnih internetnih virov",
+        "lyricFetchProvider": "ponudniki za pridobivanje besedil",
+        "lyricFetchProvider_description": "izberite ponudnike, od katerih želite pridobiti besedila. vrstni red ponudnikov je vrstni red, v katerem bodo poizvedovani",
+        "lyricOffset": "zamik besedila (ms)",
+        "lyricOffset_description": "zamakni besedilo za določeno število milisekund",
+        "minimizeToTray": "minimiziraj v sistemsko vrstico",
+        "minimizeToTray_description": "minimizirajte aplikacijo v sistemsko vrstico"
+    }
+}

src/i18n/locales/zh-Hans.json

@@ -113,7 +113,9 @@
         "additionalParticipants": "其他参与者",
         "tags": "标签",
         "viewReleaseNotes": "查看发行说明",
-        "newVersion": "已安装新版本 ({{version}})"
+        "newVersion": "已安装新版本 ({{version}})",
+        "bitDepth": "位深度",
+        "sampleRate": "采样率"
     },
     "entity": {
         "albumArtist_other": "专辑艺术家",
@@ -407,7 +409,9 @@
         "discordPausedStatus": "暂停时显示rich presence",
         "discordPausedStatus_description": "启用后将在播放器暂停时显示状态",
         "preservePitch": "保持音高",
-        "preservePitch_description": "在调整播放速度时保持音高"
+        "preservePitch_description": "在调整播放速度时保持音高",
+        "notify": "启用歌曲通知",
+        "notify_description": "更改当前歌曲时显示通知"
     },
     "error": {
         "remotePortWarning": "重启服务器使新端口生效",
@@ -432,7 +436,8 @@
         "badAlbum": "您看到此页面是因为这首歌不是专辑的一部分。如果您的音乐文件夹顶层有一首歌曲，您很可能会遇到此问题。jellyfin 仅对位于文件夹中的曲目进行分组。",
         "networkError": "发生网络错误",
         "openError": "无法打开文件",
-        "badValue": "无效的选项 \"{{value}}\". 此值不再存在"
+        "badValue": "无效的选项 \"{{value}}\". 此值不再存在",
+        "notificationDenied": "通知权限被拒绝。此设置无效"
     },
     "filter": {
         "mostPlayed": "最多播放过",

src/main/index.ts

@@ -421,9 +421,6 @@ async function createWindow(first = true): Promise<void> {
         store.set('fullscreen', mainWindow?.isFullScreen());
 
         if (!exitFromTray && store.get('window_exit_to_tray')) {
-            if (isMacOS() && !forceQuit) {
-                exitFromTray = true;
-            }
             event.preventDefault();
             mainWindow?.hide();
         }
@@ -432,8 +429,6 @@ async function createWindow(first = true): Promise<void> {
             event.preventDefault();
             saved = true;
 
-            getMainWindow()?.webContents.send('renderer-save-queue');
-
             ipcMain.once('player-save-queue', async (_event, data: Record<string, any>) => {
                 const queueLocation = join(app.getPath('userData'), 'queue');
                 const serialized = JSON.stringify(data);
@@ -457,12 +452,19 @@ async function createWindow(first = true): Promise<void> {
                 } catch (error) {
                     console.error('error saving queue state: ', error);
                 } finally {
-                    mainWindow?.close();
+                    if (!isMacOS()) {
+                        mainWindow?.close();
+                    }
                     if (forceQuit) {
                         app.exit();
                     }
                 }
             });
+            getMainWindow()?.webContents.send('renderer-save-queue');
+        } else {
+            if (forceQuit) {
+                app.exit();
+            }
         }
     });
 

src/remote/app.tsx

@@ -22,10 +22,7 @@ export const App = () => {
     const { mode, theme } = useAppTheme(isDark ? AppTheme.DEFAULT_DARK : AppTheme.DEFAULT_LIGHT);
 
     return (
-        <MantineProvider
+        <MantineProvider defaultColorScheme={mode} theme={theme}>
-            defaultColorScheme={mode}
-            theme={theme}
-        >
             <Shell />
         </MantineProvider>
     );

src/remote/components/buttons/theme-button.tsx

@@ -18,17 +18,7 @@ export const ThemeButton = () => {
             }}
             variant="default"
         >
-            {isDark ? (
+            {isDark ? <Icon icon="themeLight" size={30} /> : <Icon icon="themeDark" size={30} />}
-                <Icon
-                    icon="themeLight"
-                    size={30}
-                />
-            ) : (
-                <Icon
-                    icon="themeDark"
-                    size={30}
-                />
-            )}
         </ActionIcon>
     );
 };

src/remote/components/remote-container.tsx

@@ -32,17 +32,9 @@ export const RemoteContainer = () => {
     const debouncedSetRating = debounce(setRating, 400);
 
     return (
-        <Stack
+        <Stack gap="md" h="100dvh" w="100%">
-            gap="md"
-            h="100dvh"
-            w="100%"
-        >
             {showImage && (
-                <Flex
+                <Flex align="center" justify="center" w="100%">
-                    align="center"
-                    justify="center"
-                    w="100%"
-                >
                     <PlayerImage src={song?.imageUrl} />
                 </Flex>
             )}
@@ -87,10 +79,7 @@ export const RemoteContainer = () => {
                     </Group>
                 </Stack>
             )}
-            <Group
+            <Group gap={0} grow>
-                gap={0}
-                grow
-            >
                 <ActionIcon
                     disabled={!id}
                     icon="favorite"
@@ -109,10 +98,7 @@ export const RemoteContainer = () => {
                 />
                 {(song?.serverType === 'navidrome' || song?.serverType === 'subsonic') && (
                     <div style={{ margin: 'auto' }}>
-                        <Tooltip
+                        <Tooltip label="Double click to clear" openDelay={1000}>
-                            label="Double click to clear"
-                            openDelay={1000}
-                        >
                             <Rating
                                 onChange={debouncedSetRating}
                                 onDoubleClick={() => debouncedSetRating(0)}
@@ -123,10 +109,7 @@ export const RemoteContainer = () => {
                     </div>
                 )}
             </Group>
-            <Group
+            <Group gap="xs" grow>
-                gap="xs"
-                grow
-            >
                 <ActionIcon
                     disabled={!id}
                     icon="mediaPrevious"
@@ -174,10 +157,7 @@ export const RemoteContainer = () => {
                     variant="default"
                 />
             </Group>
-            <Group
+            <Group gap="xs" grow>
-                gap="xs"
-                grow
-            >
                 <ActionIcon
                     icon="mediaShuffle"
                     iconProps={{
@@ -232,10 +212,7 @@ export const RemoteContainer = () => {
                     max={100}
                     onChangeEnd={(e) => send({ event: 'volume', volume: e })}
                     rightLabel={
-                        <Text
+                        <Text fw={600} size="xs">
-                            fw={600}
-                            size="xs"
-                        >
                             {volume ?? 0}
                         </Text>
                     }

src/remote/components/shell.tsx

@@ -13,16 +13,9 @@ export const Shell = () => {
     const connected = useConnected();
 
     return (
-        <AppShell
+        <AppShell h="100vh" padding="md" w="100vw">
-            h="100vh"
-            padding="md"
-            w="100vw"
-        >
             <AppShell.Header style={{ background: 'var(--theme-colors-surface)' }}>
-                <Grid
+                <Grid px="md" py="sm">
-                    px="md"
-                    py="sm"
-                >
                     <Grid.Col span={4}>
                         <Flex
                             align="center"
@@ -33,20 +26,11 @@ export const Shell = () => {
                                 justifySelf: 'flex-start',
                             }}
                         >
-                            <Image
+                            <Image fit="contain" height={32} src="/favicon.ico" width={32} />
-                                fit="contain"
-                                height={32}
-                                src="/favicon.ico"
-                                width={32}
-                            />
                         </Flex>
                     </Grid.Col>
                     <Grid.Col span={8}>
-                        <Group
+                        <Group gap="sm" justify="flex-end" wrap="nowrap">
-                            gap="sm"
-                            justify="flex-end"
-                            wrap="nowrap"
-                        >
                             <ReconnectButton />
                             <ImageButton />
                             <ThemeButton />
@@ -58,10 +42,7 @@ export const Shell = () => {
                 {connected ? (
                     <RemoteContainer />
                 ) : (
-                    <Center
+                    <Center h="100vh" w="100vw">
-                        h="100vh"
-                        w="100vw"
-                    >
                         <Spinner />
                     </Center>
                 )}

src/remote/components/wrapped-slider.tsx

@@ -61,10 +61,7 @@ export const WrappedSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
     const [seek, setSeek] = useState(0);
 
     return (
-        <Group
+        <Group align="center" wrap="nowrap">
-            align="center"
-            wrap="nowrap"
-        >
             {leftLabel && <Text size="sm">{leftLabel}</Text>}
             <PlayerbarSlider
                 {...props}

src/renderer/api/jellyfin/jellyfin-api.ts

@@ -118,7 +118,7 @@ export const contract = c.router({
     },
     getGenreList: {
         method: 'GET',
-        path: 'genres',
+        path: 'musicgenres',
         query: jfType._parameters.genreList,
         responses: {
             200: jfType._response.genreList,

src/renderer/api/navidrome/navidrome-api.ts

@@ -349,7 +349,14 @@ axiosClient.interceptors.response.use(
                     .catch((newError: any) => {
                         if (newError !== TIMEOUT_ERROR) {
                             console.error('Error when trying to reauthenticate: ', newError);
-                            limitedFail(currentServer);
+
+                            if (isAxiosError(newError) && newError.code === 'ERR_NETWORK') {
+                                console.log(
+                                    'Network error during reauthentication - preserving credentials',
+                                );
+                            } else {
+                                limitedFail(currentServer);
+                            }
                         }
 
                         // make sure to pass the error so axios will error later on
@@ -360,7 +367,11 @@ axiosClient.interceptors.response.use(
                     });
             }
 
-            limitedFail(currentServer);
+            if (isAxiosError(error) && error.code === 'ERR_NETWORK') {
+                console.log('Network error during authentication - preserving credentials');
+            } else {
+                limitedFail(currentServer);
+            }
         }
 
         return Promise.reject(error);

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

@@ -251,6 +251,9 @@ axiosClient.interceptors.response.use(
                     message: data['subsonic-response'].error.message,
                     title: i18n.t('error.genericError', { postProcess: 'sentenceCase' }) as string,
                 });
+
+                // Since we do status === 200, override this value with the error code
+                response.status = data['subsonic-response'].error.code;
             }
         }
 

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

@@ -46,6 +46,10 @@ const ALBUM_LIST_SORT_MAPPING: Record<AlbumListSort, AlbumListSortType | undefin
     [AlbumListSort.YEAR]: AlbumListSortType.BY_YEAR,
 };
 
+const MAX_SUBSONIC_ITEMS = 500;
+// A trick to skip ahead 10x
+const SUBSONIC_FAST_BATCH_SIZE = MAX_SUBSONIC_ITEMS * 10;
+
 export const SubsonicController: ControllerEndpoint = {
     addToPlaylist: async ({ apiClientProps, body, query }) => {
         const res = await ssApiClient(apiClientProps).updatePlaylist({
@@ -90,7 +94,7 @@ export const SubsonicController: ControllerEndpoint = {
             };
         }
 
-        await ssApiClient({ server: null, url: cleanServerUrl }).authenticate({
+        const resp = await ssApiClient({ server: null, url: cleanServerUrl }).authenticate({
             query: {
                 c: 'Feishin',
                 f: 'json',
@@ -99,6 +103,10 @@ export const SubsonicController: ControllerEndpoint = {
             },
         });
 
+        if (resp.status !== 200) {
+            throw new Error('Failed to log in');
+        }
+
         return {
             credential,
             userId: null,
@@ -269,7 +277,7 @@ export const SubsonicController: ControllerEndpoint = {
                     albumOffset: query.startIndex,
                     artistCount: 0,
                     artistOffset: 0,
-                    query: query.searchTerm || '""',
+                    query: query.searchTerm || '',
                     songCount: 0,
                     songOffset: 0,
                 },
@@ -418,11 +426,11 @@ export const SubsonicController: ControllerEndpoint = {
             while (fetchNextPage) {
                 const res = await ssApiClient(apiClientProps).search3({
                     query: {
-                        albumCount: 500,
+                        albumCount: MAX_SUBSONIC_ITEMS,
                         albumOffset: startIndex,
                         artistCount: 0,
                         artistOffset: 0,
-                        query: query.searchTerm || '""',
+                        query: query.searchTerm || '',
                         songCount: 0,
                         songOffset: 0,
                     },
@@ -437,8 +445,7 @@ export const SubsonicController: ControllerEndpoint = {
                 totalRecordCount += albumCount;
                 startIndex += albumCount;
 
-                // The max limit size for Subsonic is 500
+                fetchNextPage = albumCount === MAX_SUBSONIC_ITEMS;
-                fetchNextPage = albumCount === 500;
             }
 
             return totalRecordCount;
@@ -522,7 +529,7 @@ export const SubsonicController: ControllerEndpoint = {
                     genre: query.genres?.length ? query.genres[0] : undefined,
                     musicFolderId: query.musicFolderId,
                     offset: startIndex,
-                    size: 500,
+                    size: MAX_SUBSONIC_ITEMS,
                     toYear,
                     type,
                 },
@@ -546,8 +553,7 @@ export const SubsonicController: ControllerEndpoint = {
             totalRecordCount += albumCount;
             startIndex += albumCount;
 
-            // The max limit size for Subsonic is 500
+            fetchNextPage = albumCount === MAX_SUBSONIC_ITEMS;
-            fetchNextPage = albumCount === 500;
         }
 
         return totalRecordCount;
@@ -904,7 +910,7 @@ export const SubsonicController: ControllerEndpoint = {
                     albumOffset: 0,
                     artistCount: 0,
                     artistOffset: 0,
-                    query: query.searchTerm || '""',
+                    query: query.searchTerm || '',
                     songCount: query.limit,
                     songOffset: query.startIndex,
                 },
@@ -1046,7 +1052,7 @@ export const SubsonicController: ControllerEndpoint = {
                 albumOffset: 0,
                 artistCount: 0,
                 artistOffset: 0,
-                query: query.searchTerm || '""',
+                query: query.searchTerm || '',
                 songCount: query.limit,
                 songOffset: query.startIndex,
             },
@@ -1086,8 +1092,8 @@ export const SubsonicController: ControllerEndpoint = {
                         albumOffset: 0,
                         artistCount: 0,
                         artistOffset: 0,
-                        query: query.searchTerm || '""',
+                        query: query.searchTerm || '',
-                        songCount: 500,
+                        songCount: MAX_SUBSONIC_ITEMS,
                         songOffset: startIndex,
                     },
                 });
@@ -1101,8 +1107,7 @@ export const SubsonicController: ControllerEndpoint = {
                 totalRecordCount += songCount;
                 startIndex += songCount;
 
-                // The max limit size for Subsonic is 500
+                fetchNextPage = songCount === MAX_SUBSONIC_ITEMS;
-                fetchNextPage = songCount === 500;
             }
 
             return totalRecordCount;
@@ -1110,6 +1115,10 @@ export const SubsonicController: ControllerEndpoint = {
 
         if (query.genreIds) {
             let totalRecordCount = 0;
+
+            // Rather than just do `getSongsByGenre` by groups of 500, instead
+            // jump the offset 10x, and then backtrack on the last chunk. This improves
+            // performance for extremely large libraries
             while (fetchNextSection) {
                 const res = await ssApiClient(apiClientProps).getSongsByGenre({
                     query: {
@@ -1128,17 +1137,17 @@ export const SubsonicController: ControllerEndpoint = {
 
                 if (numberOfResults !== 1) {
                     fetchNextSection = false;
-                    startIndex = sectionIndex === 0 ? 0 : sectionIndex - 5000;
+                    startIndex = sectionIndex === 0 ? 0 : sectionIndex - SUBSONIC_FAST_BATCH_SIZE;
                     break;
                 } else {
-                    sectionIndex += 5000;
+                    sectionIndex += SUBSONIC_FAST_BATCH_SIZE;
                 }
             }
 
             while (fetchNextPage) {
                 const res = await ssApiClient(apiClientProps).getSongsByGenre({
                     query: {
-                        count: 500,
+                        count: MAX_SUBSONIC_ITEMS,
                         genre: query.genreIds[0],
                         musicFolderId: query.musicFolderId,
                         offset: startIndex,
@@ -1154,7 +1163,7 @@ export const SubsonicController: ControllerEndpoint = {
                 totalRecordCount = startIndex + numberOfResults;
                 startIndex += numberOfResults;
 
-                fetchNextPage = numberOfResults === 500;
+                fetchNextPage = numberOfResults === MAX_SUBSONIC_ITEMS;
             }
 
             return totalRecordCount;
@@ -1176,6 +1185,9 @@ export const SubsonicController: ControllerEndpoint = {
 
         let totalRecordCount = 0;
 
+        // Rather than just do `search3` by groups of 500, instead
+        // jump the offset 10x, and then backtrack on the last chunk. This improves
+        // performance for extremely large libraries
         while (fetchNextSection) {
             const res = await ssApiClient(apiClientProps).search3({
                 query: {
@@ -1183,7 +1195,7 @@ export const SubsonicController: ControllerEndpoint = {
                     albumOffset: 0,
                     artistCount: 0,
                     artistOffset: 0,
-                    query: query.searchTerm || '""',
+                    query: query.searchTerm || '',
                     songCount: 1,
                     songOffset: sectionIndex,
                 },
@@ -1195,13 +1207,12 @@ export const SubsonicController: ControllerEndpoint = {
 
             const numberOfResults = (res.body.searchResult3?.song || []).length || 0;
 
-            // Check each batch of 5000 songs to check for data
+            if (numberOfResults !== 1) {
-            sectionIndex += 5000;
+                fetchNextSection = false;
-            fetchNextSection = numberOfResults === 1;
+                startIndex = sectionIndex === 0 ? 0 : sectionIndex - SUBSONIC_FAST_BATCH_SIZE;
-
+                break;
-            if (!fetchNextSection) {
+            } else {
-                // fetchNextBlock will be false on the next loop so we need to subtract 5000 * 2
+                sectionIndex += SUBSONIC_FAST_BATCH_SIZE;
-                startIndex = sectionIndex - 10000;
             }
         }
 
@@ -1212,8 +1223,8 @@ export const SubsonicController: ControllerEndpoint = {
                     albumOffset: 0,
                     artistCount: 0,
                     artistOffset: 0,
-                    query: query.searchTerm || '""',
+                    query: query.searchTerm || '',
-                    songCount: 500,
+                    songCount: MAX_SUBSONIC_ITEMS,
                     songOffset: startIndex,
                 },
             });
@@ -1227,8 +1238,7 @@ export const SubsonicController: ControllerEndpoint = {
             totalRecordCount = startIndex + numberOfResults;
             startIndex += numberOfResults;
 
-            // The max limit size for Subsonic is 500
+            fetchNextPage = numberOfResults === MAX_SUBSONIC_ITEMS;
-            fetchNextPage = numberOfResults === 500;
         }
 
         return totalRecordCount;

src/renderer/app.tsx

@@ -190,15 +190,8 @@ export const App = () => {
     }, [language]);
 
     return (
-        <MantineProvider
+        <MantineProvider defaultColorScheme={mode as 'dark' | 'light'} theme={theme}>
-            defaultColorScheme={mode as 'dark' | 'light'}
+            <Notifications containerWidth="300px" position="bottom-center" zIndex={50000} />
-            theme={theme}
-        >
-            <Notifications
-                containerWidth="300px"
-                position="bottom-center"
-                zIndex={5}
-            />
             <PlayQueueHandlerContext.Provider value={providerValue}>
                 <ContextMenuProvider>
                     <WebAudioContext.Provider value={webAudioProvider}>

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

@@ -225,6 +225,28 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
         setIsTransitioning(false);
     };
 
+    const handleOnError = (playerRef: React.RefObject<ReactPlayer>) => {
+        return ({ target }: ErrorEvent) => {
+            const { current: player } = playerRef;
+            if (!player || !(target instanceof Audio)) {
+                return;
+            }
+
+            const { error } = target;
+            if (error?.code !== MediaError.MEDIA_ERR_DECODE) {
+                return;
+            }
+
+            const duration = player.getDuration();
+            const currentTime = player.getCurrentTime();
+
+            // Decode error within last second, handle as track ended
+            if (duration && duration - currentTime < 1) {
+                handleOnEnded();
+            }
+        };
+    };
+
     useEffect(() => {
         if (status === PlayerStatus.PLAYING) {
             if (currentPlayer === 1) {
@@ -424,6 +446,7 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
                 muted={muted}
                 // If there is no stream url, we do not need to handle when the audio finishes
                 onEnded={stream1 ? handleOnEnded : undefined}
+                onError={handleOnError(player1Ref)}
                 onProgress={
                     playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1
                 }
@@ -443,6 +466,7 @@ export const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>((props,
                 height={0}
                 muted={muted}
                 onEnded={stream2 ? handleOnEnded : undefined}
+                onError={handleOnError(player2Ref)}
                 onProgress={
                     playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2
                 }

src/renderer/components/card/card-controls.tsx

@@ -47,10 +47,7 @@ export const CardControls = ({
     return (
         <div className={styles.gridCardControlsContainer}>
             <div className={styles.bottomControls}>
-                <button
+                <button className={styles.playButton} onClick={handlePlay}>
-                    className={styles.playButton}
-                    onClick={handlePlay}
-                >
                     <Icon icon="mediaPlay" />
                 </button>
                 <Group gap="xs">

src/renderer/components/card/poster-card.tsx

@@ -55,14 +55,8 @@ export const PosterCard = ({
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}
             >
-                <Link
+                <Link className={styles.imageContainer} to={path}>
-                    className={styles.imageContainer}
+                    <Image className={styles.image} src={data?.imageUrl} />
-                    to={path}
-                >
-                    <Image
-                        className={styles.image}
-                        src={data?.imageUrl}
-                    />
                     <GridCardControls
                         handleFavorite={controls.handleFavorite}
                         handlePlayQueueAdd={controls.handlePlayQueueAdd}
@@ -72,30 +66,21 @@ export const PosterCard = ({
                     />
                 </Link>
                 <div className={styles.detailContainer}>
-                    <CardRows
+                    <CardRows data={data} rows={controls.cardRows} />
-                        data={data}
-                        rows={controls.cardRows}
-                    />
                 </div>
             </div>
         );
     }
 
     return (
-        <div
+        <div className={styles.container} key={`placeholder-${uniqueId}-${data.id}`}>
-            className={styles.container}
-            key={`placeholder-${uniqueId}-${data.id}`}
-        >
             <div className={styles.imageContainer}>
                 <Skeleton className={styles.image} />
             </div>
             <div className={styles.detailContainer}>
                 <Stack gap="xs">
                     {(controls?.cardRows || []).map((row, index) => (
-                        <Skeleton
+                        <Skeleton height={14} key={`${index}-${row.arrayProperty}`} />
-                            height={14}
-                            key={`${index}-${row.arrayProperty}`}
-                        />
                     ))}
                 </Stack>
             </div>

src/renderer/components/context-menu/context-menu.tsx

@@ -35,14 +35,8 @@ export const ContextMenuButton = forwardRef(
                 onClick={props.onClick}
                 ref={ref}
             >
-                <Group
+                <Group justify="space-between" w="100%">
-                    justify="space-between"
+                    <Group className={styles.left} gap="md">
-                    w="100%"
-                >
-                    <Group
-                        className={styles.left}
-                        gap="md"
-                    >
                         {leftIcon}
                         {children}
                     </Group>

src/renderer/components/feature-carousel/feature-carousel.tsx

@@ -77,11 +77,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
             className={styles.wrapper}
             to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: currentItem?.id || '' })}
         >
-            <AnimatePresence
+            <AnimatePresence custom={direction} initial={false} mode="popLayout">
-                custom={direction}
-                initial={false}
-                mode="popLayout"
-            >
                 {data && (
                     <motion.div
                         animate="animate"
@@ -101,10 +97,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                                 />
                             </div>
                             <div className={styles.infoColumn}>
-                                <Stack
+                                <Stack gap="md" style={{ width: '100%' }}>
-                                    gap="md"
-                                    style={{ width: '100%' }}
-                                >
                                     <div className={styles.titleWrapper}>
                                         <TextTitle
                                             fw={900}
@@ -117,10 +110,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                                     </div>
                                     <div className={styles.titleWrapper}>
                                         {currentItem?.albumArtists.slice(0, 1).map((artist) => (
-                                            <Text
+                                            <Text fw={600} key={`carousel-artist-${artist.id}`}>
-                                                fw={600}
-                                                key={`carousel-artist-${artist.id}`}
-                                            >
                                                 {artist.name}
                                             </Text>
                                         ))}

src/renderer/components/grid-carousel/grid-carousel.tsx

@@ -60,10 +60,7 @@ const Title = ({ handleNext, handlePrev, label, pagination }: TitleProps) => {
             {isValidElement(label) ? (
                 label
             ) : (
-                <TextTitle
+                <TextTitle order={3} weight={700}>
-                    order={3}
-                    weight={700}
-                >
                     {label}
                 </TextTitle>
             )}
@@ -280,11 +277,7 @@ export const SwiperGridCarousel = ({
     }, []);
 
     return (
-        <Stack
+        <Stack className="grid-carousel" gap="md" ref={containerRef as any}>
-            className="grid-carousel"
-            gap="md"
-            ref={containerRef as any}
-        >
             {title ? (
                 <Title
                     {...title}

src/renderer/components/native-scroll-area/native-scroll-area.tsx

@@ -91,11 +91,7 @@ export const NativeScrollArea = forwardRef(
                         {...pageHeaderProps}
                     />
                 )}
-                <div
+                <div className={styles.scrollArea} ref={mergedRef} {...props}>
-                    className={styles.scrollArea}
-                    ref={mergedRef}
-                    {...props}
-                >
                     {children}
                 </div>
             </>

src/renderer/components/query-builder/index.tsx

@@ -99,10 +99,7 @@ export const QueryBuilder = ({
     };
 
     return (
-        <Stack
+        <Stack gap="sm" ml={`${level * 10}px`}>
-            gap="sm"
-            ml={`${level * 10}px`}
-        >
             <Group gap="sm">
                 <Select
                     data={FILTER_GROUP_OPTIONS_DATA}
@@ -112,12 +109,7 @@ export const QueryBuilder = ({
                     value={data.type}
                     width="20%"
                 />
-                <ActionIcon
+                <ActionIcon icon="add" onClick={handleAddRule} size="sm" variant="subtle" />
-                    icon="add"
-                    onClick={handleAddRule}
-                    size="sm"
-                    variant="subtle"
-                />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <ActionIcon
@@ -150,24 +142,14 @@ export const QueryBuilder = ({
                                 <DropdownMenu.Divider />
                                 <DropdownMenu.Item
                                     isDanger
-                                    leftSection={
+                                    leftSection={<Icon color="error" icon="refresh" />}
-                                        <Icon
-                                            color="error"
-                                            icon="refresh"
-                                        />
-                                    }
                                     onClick={onResetFilters}
                                 >
                                     Reset to default
                                 </DropdownMenu.Item>
                                 <DropdownMenu.Item
                                     isDanger
-                                    leftSection={
+                                    leftSection={<Icon color="error" icon="delete" />}
-                                        <Icon
-                                            color="error"
-                                            icon="delete"
-                                        />
-                                    }
                                     onClick={onClearFilters}
                                 >
                                     Clear filters

src/renderer/components/query-builder/query-builder-option.tsx

@@ -48,13 +48,7 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
                 />
             );
         case 'date':
-            return (
+            return <TextInput onChange={onChange} size="sm" {...props} />;
-                <TextInput
-                    onChange={onChange}
-                    size="sm"
-                    {...props}
-                />
-            );
         case 'dateRange':
             return (
                 <>
@@ -92,21 +86,9 @@ const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
                 />
             );
         case 'playlist':
-            return (
+            return <Select data={data} onChange={onChange} {...props} />;
-                <Select
-                    data={data}
-                    onChange={onChange}
-                    {...props}
-                />
-            );
         case 'string':
-            return (
+            return <TextInput onChange={onChange} size="sm" {...props} />;
-                <TextInput
-                    onChange={onChange}
-                    size="sm"
-                    {...props}
-                />
-            );
 
         default:
             return <></>;
@@ -188,10 +170,7 @@ export const QueryBuilderOption = ({
     const ml = (level + 1) * 10;
 
     return (
-        <Group
+        <Group gap="sm" ml={ml}>
-            gap="sm"
-            ml={ml}
-        >
             <Select
                 data={filters}
                 maxWidth={170}

src/renderer/components/virtual-grid/grid-card/default-card.tsx

@@ -81,10 +81,7 @@ export const DefaultCard = ({
                             data?.userFavorite && styles.isFavorite,
                         )}
                     >
-                        <Image
+                        <Image className={styles.image} src={data?.imageUrl} />
-                            className={styles.image}
-                            src={data?.imageUrl}
-                        />
                         <GridCardControls
                             handleFavorite={controls.handleFavorite}
                             handlePlayQueueAdd={controls.handlePlayQueueAdd}
@@ -95,10 +92,7 @@ export const DefaultCard = ({
                         />
                     </div>
                     <div className={styles.detailContainer}>
-                        <CardRows
+                        <CardRows data={data} rows={controls.cardRows} />
-                            data={data}
-                            rows={controls.cardRows}
-                        />
                     </div>
                 </div>
             </div>

src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx

@@ -86,10 +86,7 @@ export const GridCardControls = ({
                         onClick={handlePlay}
                         variant="filled"
                     >
-                        <Icon
+                        <Icon icon="mediaPlay" size="xl" />
-                            icon="mediaPlay"
-                            size="xl"
-                        />
                     </Button>
                     <div className={styles.bottomControls}>
                         {itemType !== LibraryItem.PLAYLIST && (

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -73,17 +73,11 @@ export const PosterCard = ({
                     margin: controls.itemGap,
                 }}
             >
-                <div
+                <div className={styles.linkContainer} onClick={() => navigate(path)}>
-                    className={styles.linkContainer}
-                    onClick={() => navigate(path)}
-                >
                     <div
                         className={`${styles.imageContainer} ${data?.userFavorite ? styles.isFavorite : ''}`}
                     >
-                        <Image
+                        <Image className={styles.image} src={data?.imageUrl} />
-                            className={styles.image}
-                            src={data?.imageUrl}
-                        />
                         <GridCardControls
                             handleFavorite={controls.handleFavorite}
                             handlePlayQueueAdd={controls.handlePlayQueueAdd}
@@ -95,10 +89,7 @@ export const PosterCard = ({
                     </div>
                 </div>
                 <div className={styles.detailContainer}>
-                    <CardRows
+                    <CardRows data={data} rows={controls.cardRows} />
-                        data={data}
-                        rows={controls.cardRows}
-                    />
                 </div>
             </div>
         );

src/renderer/components/virtual-table/cells/album-artist-cell.tsx

@@ -15,21 +15,14 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
+                <Skeleton height="1rem" width="80%" />
-                    height="1rem"
-                    width="80%"
-                />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
+            <Text isMuted overflow="hidden" size="md">
-                isMuted
-                overflow="hidden"
-                size="md"
-            >
                 {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
@@ -47,11 +40,7 @@ export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
                                 {item.name || '—'}
                             </Text>
                         ) : (
-                            <Text
+                            <Text isMuted overflow="hidden" size="md">
-                                isMuted
-                                overflow="hidden"
-                                size="md"
-                            >
                                 {item.name || '—'}
                             </Text>
                         )}

src/renderer/components/virtual-table/cells/artist-cell.tsx

@@ -15,21 +15,14 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
+                <Skeleton height="1rem" width="80%" />
-                    height="1rem"
-                    width="80%"
-                />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
+            <Text isMuted overflow="hidden" size="md">
-                isMuted
-                overflow="hidden"
-                size="md"
-            >
                 {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
@@ -47,11 +40,7 @@ export const ArtistCell = ({ data, value }: ICellRendererParams) => {
                                 {item.name || '—'}
                             </Text>
                         ) : (
-                            <Text
+                            <Text isMuted overflow="hidden" size="md">
-                                isMuted
-                                overflow="hidden"
-                                size="md"
-                            >
                                 {item.name || '—'}
                             </Text>
                         )}

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -41,11 +41,7 @@ export const CombinedTitleCell = ({
                 >
                     <Skeleton className={styles.image} />
                 </div>
-                <Skeleton
+                <Skeleton className={styles.skeletonMetadata} height="1rem" width="80%" />
-                    className={styles.skeletonMetadata}
-                    height="1rem"
-                    width="80%"
-                />
             </div>
         );
     }
@@ -62,11 +58,7 @@ export const CombinedTitleCell = ({
                     width: `${(node.rowHeight || 40) - 10}px`,
                 }}
             >
-                <Image
+                <Image alt="cover" className={styles.image} src={value.imageUrl} />
-                    alt="cover"
-                    className={styles.image}
-                    src={value.imageUrl}
-                />
 
                 <ListCoverControls
                     className={styles.playButton}
@@ -77,18 +69,10 @@ export const CombinedTitleCell = ({
                 />
             </div>
             <div className={styles.metadataWrapper}>
-                <Text
+                <Text className="current-song-child" overflow="hidden" size="md">
-                    className="current-song-child"
-                    overflow="hidden"
-                    size="md"
-                >
                     {value.name}
                 </Text>
-                <Text
+                <Text isMuted overflow="hidden" size="md">
-                    isMuted
-                    overflow="hidden"
-                    size="md"
-                >
                     {artists?.length ? (
                         artists.map((artist: AlbumArtist | Artist, index: number) => (
                             <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>

src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx

@@ -25,10 +25,7 @@ export const FullWidthDiscCell = ({ api, data, node }: ICellRendererParams) => {
 
     return (
         <div className={styles.container}>
-            <Group
+            <Group justify="space-between" w="100%">
-                justify="space-between"
-                w="100%"
-            >
                 <Button
                     leftSection={isSelected ? <Icon icon="squareCheck" /> : <Icon icon="square" />}
                     onClick={handleToggleDiscNodes}

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -23,10 +23,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
     if (value === undefined) {
         return (
             <CellContainer position={position || 'left'}>
-                <Skeleton
+                <Skeleton height="1rem" width="80%" />
-                    height="1rem"
-                    width="80%"
-                />
             </CellContainer>
         );
     }
@@ -45,12 +42,7 @@ export const GenericCell = ({ value, valueFormatted }: ICellRendererParams, opti
                     {isLink ? displayedValue.value : displayedValue}
                 </Text>
             ) : (
-                <Text
+                <Text isMuted={!primary} isNoSelect={false} overflow="hidden" size="md">
-                    isMuted={!primary}
-                    isNoSelect={false}
-                    overflow="hidden"
-                    size="md"
-                >
                     {displayedValue}
                 </Text>
             )}

src/renderer/components/virtual-table/cells/genre-cell.tsx

@@ -13,11 +13,7 @@ export const GenreCell = ({ data, value }: ICellRendererParams) => {
     const genrePath = useGenreRoute();
     return (
         <CellContainer position="left">
-            <Text
+            <Text isMuted overflow="hidden" size="md">
-                isMuted
-                overflow="hidden"
-                size="md"
-            >
                 {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}

src/renderer/components/virtual-table/cells/note-cell.tsx

@@ -19,20 +19,14 @@ export const NoteCell = ({ value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
+                <Skeleton height="1rem" width="80%" />
-                    height="1rem"
-                    width="80%"
-                />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
+            <Text isMuted overflow="hidden">
-                isMuted
-                overflow="hidden"
-            >
                 {formattedValue}
             </Text>
         </CellContainer>

src/renderer/components/virtual-table/cells/rating-cell.tsx

@@ -26,11 +26,7 @@ export const RatingCell = ({ node, value }: ICellRendererParams) => {
 
     return (
         <CellContainer position="center">
-            <Rating
+            <Rating onChange={handleUpdateRating} size="xs" value={value?.userRating} />
-                onChange={handleUpdateRating}
-                size="xs"
-                value={value?.userRating}
-            />
         </CellContainer>
     );
 };

src/renderer/components/virtual-table/cells/row-index-cell.tsx

@@ -144,15 +144,9 @@ export const RowIndexCell = ({ eGridCell, value }: ICellRendererParams) => {
     return (
         <CellContainer position="right">
             {isPlaying && isCurrentSong ? (
-                <Icon
+                <Icon fill="primary" icon="mediaPlay" />
-                    fill="primary"
-                    icon="mediaPlay"
-                />
             ) : isCurrentSong ? (
-                <Icon
+                <Icon fill="primary" icon="mediaPause" />
-                    fill="primary"
-                    icon="mediaPause"
-                />
             ) : (
                 <Text
                     className="current-song-child current-song-index"

src/renderer/components/virtual-table/cells/title-cell.tsx

@@ -8,21 +8,14 @@ export const TitleCell = ({ value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer position="left">
-                <Skeleton
+                <Skeleton height="1rem" width="80%" />
-                    height="1rem"
-                    width="80%"
-                />
             </CellContainer>
         );
     }
 
     return (
         <CellContainer position="left">
-            <Text
+            <Text className="current-song-child" overflow="hidden" size="md">
-                className="current-song-child"
-                overflow="hidden"
-                size="md"
-            >
                 {value}
             </Text>
         </CellContainer>

src/renderer/components/virtual-table/headers/duration-header.tsx

@@ -7,10 +7,5 @@ export interface ICustomHeaderParams extends IHeaderParams {
 }
 
 export const DurationHeader = () => {
-    return (
+    return <Icon icon="duration" size="sm" />;
-        <Icon
-            icon="duration"
-            size="sm"
-        />
-    );
 };

src/renderer/components/virtual-table/headers/generic-table-header.tsx

@@ -16,36 +16,11 @@ type Options = {
 type Presets = 'actions' | 'duration' | 'rowIndex' | 'userFavorite' | 'userRating';
 
 const headerPresets = {
-    actions: (
+    actions: <Icon icon="ellipsisHorizontal" size="sm" />,
-        <Icon
+    duration: <Icon icon="duration" size="sm" />,
-            icon="ellipsisHorizontal"
+    rowIndex: <Icon icon="hash" size="sm" />,
-            size="sm"
+    userFavorite: <Icon icon="favorite" size="sm" />,
-        />
+    userRating: <Icon icon="star" size="sm" />,
-    ),
-    duration: (
-        <Icon
-            icon="duration"
-            size="sm"
-        />
-    ),
-    rowIndex: (
-        <Icon
-            icon="hash"
-            size="sm"
-        />
-    ),
-    userFavorite: (
-        <Icon
-            icon="favorite"
-            size="sm"
-        />
-    ),
-    userRating: (
-        <Icon
-            icon="star"
-            size="sm"
-        />
-    ),
 };
 
 export const GenericTableHeader = (

src/renderer/components/virtual-table/index.tsx

@@ -635,15 +635,8 @@ export const VirtualTable = forwardRef(
                     onNewColumnsLoaded={handleNewColumnsLoaded}
                 />
                 {paginationProps && (
-                    <AnimatePresence
+                    <AnimatePresence initial={false} mode="wait" presenceAffectsLayout>
-                        initial={false}
+                        <TablePagination {...paginationProps} tableRef={tableRef} />
-                        mode="wait"
-                        presenceAffectsLayout
-                    >
-                        <TablePagination
-                            {...paginationProps}
-                            tableRef={tableRef}
-                        />
                     </AnimatePresence>
                 )}
             </div>

src/renderer/components/virtual-table/table-pagination.tsx

@@ -76,10 +76,7 @@ export const TablePagination = ({
             ref={containerQuery.ref}
             style={{ borderTop: '1px solid var(--theme-generic-border-color)' }}
         >
-            <Text
+            <Text isMuted size="md">
-                isMuted
-                size="md"
-            >
                 {containerQuery.isMd ? (
                     <>
                         Showing <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
@@ -97,11 +94,7 @@ export const TablePagination = ({
                     </>
                 )}
             </Text>
-            <Group
+            <Group gap="sm" ref={containerQuery.ref} wrap="nowrap">
-                gap="sm"
-                ref={containerQuery.ref}
-                wrap="nowrap"
-            >
                 <Popover
                     onClose={() => handlers.close()}
                     opened={isGoToPageOpen}
@@ -127,10 +120,7 @@ export const TablePagination = ({
                                     min={1}
                                     width={70}
                                 />
-                                <Button
+                                <Button type="submit" variant="filled">
-                                    type="submit"
-                                    variant="filled"
-                                >
                                     Go
                                 </Button>
                             </Group>

src/renderer/features/action-required/components/action-required-container.tsx

@@ -13,15 +13,8 @@ interface ActionRequiredContainerProps {
 export const ActionRequiredContainer = ({ children, title }: ActionRequiredContainerProps) => (
     <Stack style={{ cursor: 'default', maxWidth: '700px' }}>
         <Group>
-            <Icon
+            <Icon fill="warn" icon="warn" size="lg" />
-                fill="warn"
+            <Text size="xl" style={{ textTransform: 'uppercase' }}>
-                icon="warn"
-                size="lg"
-            />
-            <Text
-                size="xl"
-                style={{ textTransform: 'uppercase' }}
-            >
                 {title}
             </Text>
         </Group>

src/renderer/features/action-required/components/error-fallback.tsx

@@ -21,18 +21,11 @@ export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
             <Center style={{ height: '100vh' }}>
                 <Stack style={{ maxWidth: '50%' }}>
                     <Group gap="xs">
-                        <Icon
+                        <Icon fill="error" icon="error" size="lg" />
-                            fill="error"
-                            icon="error"
-                            size="lg"
-                        />
                         <Text size="lg">{t('error.genericError')}</Text>
                     </Group>
                     <Text>{error?.message}</Text>
-                    <Button
+                    <Button onClick={resetErrorBoundary} variant="filled">
-                        onClick={resetErrorBoundary}
-                        variant="filled"
-                    >
                         {t('common.reload')}
                     </Button>
                 </Stack>

src/renderer/features/action-required/components/mpv-required.tsx

@@ -43,18 +43,11 @@ export const MpvRequired = () => {
             <Text>Set your MPV executable location below and restart the application.</Text>
             <Text>
                 MPV is available at the following:{' '}
-                <a
+                <a href="https://mpv.io/installation/" rel="noreferrer" target="_blank">
-                    href="https://mpv.io/installation/"
-                    rel="noreferrer"
-                    target="_blank"
-                >
                     https://mpv.io/
                 </a>
             </Text>
-            <FileInput
+            <FileInput disabled={disabled} onChange={handleSetMpvPath} />
-                disabled={disabled}
-                onChange={handleSetMpvPath}
-            />
             <Text>{t('setting.disable_mpv', { context: 'description' })}</Text>
             <Checkbox
                 label={t('setting.disableMpv')}

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

@@ -42,19 +42,12 @@ const RouteErrorBoundary = () => {
                             px={10}
                             variant="subtle"
                         />
-                        <Icon
+                        <Icon fill="error" icon="error" size="lg" />
-                            fill="error"
-                            icon="error"
-                            size="lg"
-                        />
                         <Text size="lg">{t('error.genericError')}</Text>
                     </Group>
                     <Divider my={5} />
                     <Text size="sm">{error?.message}</Text>
-                    <Group
+                    <Group gap="sm" grow>
-                        gap="sm"
-                        grow
-                    >
                         <Button
                             leftSection={<Icon icon="home" />}
                             onClick={handleHome}
@@ -81,11 +74,7 @@ const RouteErrorBoundary = () => {
                         </DropdownMenu>
                     </Group>
                     <Group grow>
-                        <Button
+                        <Button onClick={handleReload} size="md" variant="filled">
-                            onClick={handleReload}
-                            size="md"
-                            variant="filled"
-                        >
                             {t('common.reload')}
                         </Button>
                     </Group>

src/renderer/features/action-required/components/server-required.tsx

@@ -132,10 +132,7 @@ function ServerSelector() {
                         }}
                         variant={server.id === currentServer?.id ? 'filled' : 'default'}
                     >
-                        <Group
+                        <Group justify="space-between" w="100%">
-                            justify="space-between"
-                            w="100%"
-                        >
                             <Group>
                                 <img
                                     src={logo}
@@ -144,10 +141,7 @@ function ServerSelector() {
                                         width: 'var(--theme-font-size-2xl)',
                                     }}
                                 />
-                                <Text
+                                <Text fw={600} size="lg">
-                                    fw={600}
-                                    size="lg"
-                                >
                                     {server.name}
                                 </Text>
                             </Group>

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

@@ -49,10 +49,7 @@ const ActionRequiredRoute = () => {
         <AnimatedPage>
             <PageHeader />
             <Center style={{ height: '100%', width: '100vw' }}>
-                <Stack
+                <Stack gap="xl" style={{ maxWidth: '50%' }}>
-                    gap="xl"
-                    style={{ maxWidth: '50%' }}
-                >
                     <Group wrap="nowrap">
                         {displayedCheck && (
                             <ActionRequiredContainer title={displayedCheck.title}>
@@ -64,10 +61,7 @@ const ActionRequiredRoute = () => {
                         {canReturnHome && <Navigate to={AppRoute.HOME} />}
                         {/* This should be displayed if a credential is required */}
                         {isCredentialRequired && (
-                            <Group
+                            <Group justify="center" wrap="nowrap">
-                                justify="center"
-                                wrap="nowrap"
-                            >
                                 <Button
                                     fullWidth
                                     leftSection={<Icon icon="edit" />}

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

@@ -18,24 +18,14 @@ const InvalidRoute = () => {
         <AnimatedPage>
             <Center style={{ height: '100%', width: '100%' }}>
                 <Stack>
-                    <Group
+                    <Group justify="center" wrap="nowrap">
-                        justify="center"
+                        <Icon color="warn" icon="error" />
-                        wrap="nowrap"
-                    >
-                        <Icon
-                            color="warn"
-                            icon="error"
-                        />
                         <Text size="xl">
                             {t('error.apiRouteError', { postProcess: 'sentenceCase' })}
                         </Text>
                     </Group>
                     <Text>{location.pathname}</Text>
-                    <ActionIcon
+                    <ActionIcon icon="arrowLeftS" onClick={() => navigate(-1)} variant="filled" />
-                        icon="arrowLeftS"
-                        onClick={() => navigate(-1)}
-                        variant="filled"
-                    />
                 </Stack>
             </Center>
         </AnimatedPage>

src/renderer/features/albums/components/album-detail-content.tsx

@@ -319,17 +319,11 @@ export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentP
     const mbzId = detailQuery?.data?.mbzId;
 
     return (
-        <div
+        <div className={styles.contentContainer} ref={cq.ref}>
-            className={styles.contentContainer}
-            ref={cq.ref}
-        >
             <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 <section>
-                    <Group
+                    <Group gap="sm" justify="space-between">
-                        gap="sm"
-                        justify="space-between"
-                    >
                         <Group>
                             <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
                             <Group gap="xs">
@@ -485,11 +479,7 @@ export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentP
                         suppressRowDrag
                     />
                 </div>
-                <Stack
+                <Stack gap="lg" mt="3rem" ref={cq.ref}>
-                    gap="lg"
-                    mt="3rem"
-                    ref={cq.ref}
-                >
                     {cq.height || cq.width ? (
                         <>
                             {carousels

src/renderer/features/albums/components/album-list-content.tsx

@@ -33,15 +33,9 @@ export const AlbumListContent = ({ gridRef, itemCount, tableRef }: AlbumListCont
     return (
         <Suspense fallback={<Spinner container />}>
             {display === ListDisplayType.CARD || display === ListDisplayType.GRID ? (
-                <AlbumListGridView
+                <AlbumListGridView gridRef={gridRef} itemCount={itemCount} />
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
             ) : (
-                <AlbumListTableView
+                <AlbumListTableView itemCount={itemCount} tableRef={tableRef} />
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
             )}
         </Suspense>
     );

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

@@ -448,11 +448,7 @@ export const AlbumListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
+            <Group gap="sm" ref={cq.ref} w="100%">
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -471,10 +467,7 @@ export const AlbumListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <Divider orientation="vertical" />
@@ -497,10 +490,7 @@ export const AlbumListHeaderFilters = ({
                         </DropdownMenu>
                     </>
                 )}
-                <FilterButton
+                <FilterButton isActive={!!isFilterApplied} onClick={handleOpenFiltersModal} />
-                    isActive={!!isFilterApplied}
-                    onClick={handleOpenFiltersModal}
-                />
                 <RefreshButton onClick={handleRefresh} />
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
@@ -535,10 +525,7 @@ export const AlbumListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
+            <Group gap="sm" wrap="nowrap">
-                gap="sm"
-                wrap="nowrap"
-            >
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     disabledViewTypes={[ListDisplayType.LIST]}

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

@@ -61,15 +61,9 @@ export const AlbumListHeader = ({
     }, [filter, genreId, refresh, tableRef]);
 
     return (
-        <Stack
+        <Stack gap={0} ref={cq.ref}>
-            gap={0}
-            ref={cq.ref}
-        >
             <PageHeader backgroundColor="var(--theme-colors-background)">
-                <Flex
+                <Flex justify="space-between" w="100%">
-                    justify="space-between"
-                    w="100%"
-                >
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.PlayButton
                             onClick={() => handlePlay?.({ playType: playButtonBehavior })}
@@ -85,10 +79,7 @@ export const AlbumListHeader = ({
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
                     </Group>
                 </Flex>
             </PageHeader>

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

@@ -227,16 +227,9 @@ export const JellyfinAlbumFilters = ({
     return (
         <Stack p="0.8rem">
             {yesNoFilter.map((filter) => (
-                <Group
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
                     <Text>{filter.label}</Text>
-                    <YesNoSelect
+                    <YesNoSelect onChange={filter.onChange} size="xs" value={filter.value} />
-                        onChange={filter.onChange}
-                        size="xs"
-                        value={filter.value}
-                    />
                 </Group>
             ))}
             <Divider my="0.5rem" />

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

@@ -248,28 +248,15 @@ export const NavidromeAlbumFilters = ({
     return (
         <Stack p="0.8rem">
             {yesNoUndefinedFilters.map((filter) => (
-                <Group
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
                     <Text>{filter.label}</Text>
-                    <YesNoSelect
+                    <YesNoSelect onChange={filter.onChange} size="xs" value={filter.value} />
-                        onChange={filter.onChange}
-                        size="xs"
-                        value={filter.value}
-                    />
                 </Group>
             ))}
             {toggleFilters.map((filter) => (
-                <Group
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
                     <Text>{filter.label}</Text>
-                    <Switch
+                    <Switch checked={filter?.value || false} onChange={filter.onChange} />
-                        checked={filter?.value || false}
-                        onChange={filter.onChange}
-                    />
                 </Group>
             ))}
             <Divider my="0.5rem" />
@@ -307,10 +294,7 @@ export const NavidromeAlbumFilters = ({
             {tagsQuery.data?.enumTags?.length &&
                 tagsQuery.data.enumTags.length > 0 &&
                 tagsQuery.data.enumTags.map((tag) => (
-                    <Group
+                    <Group grow key={tag.name}>
-                        grow
-                        key={tag.name}
-                    >
                         <SelectWithInvalidData
                             clearable
                             data={tag.options}

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

@@ -148,15 +148,9 @@ export const SubsonicAlbumFilters = ({
     return (
         <Stack p="0.8rem">
             {toggleFilters.map((filter) => (
-                <Group
+                <Group justify="space-between" key={`nd-filter-${filter.label}`}>
-                    justify="space-between"
-                    key={`nd-filter-${filter.label}`}
-                >
                     <Text>{filter.label}</Text>
-                    <Switch
+                    <Switch checked={filter?.value || false} onChange={filter.onChange} />
-                        checked={filter?.value || false}
-                        onChange={filter.onChange}
-                    />
                 </Group>
             ))}
             <Divider my="0.5rem" />

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -70,10 +70,7 @@ const AlbumDetailRoute = () => {
                     }}
                     ref={headerRef}
                 />
-                <AlbumDetailContent
+                <AlbumDetailContent background={background} tableRef={tableRef} />
-                    background={background}
-                    tableRef={tableRef}
-                />
             </NativeScrollArea>
         </AnimatedPage>
     );

src/renderer/features/albums/routes/album-list-route.tsx

@@ -144,11 +144,7 @@ const AlbumListRoute = () => {
                     tableRef={tableRef}
                     title={title}
                 />
-                <AlbumListContent
+                <AlbumListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -174,10 +174,7 @@ const DummyAlbumDetailRoute = () => {
             </Stack>
             <div className={styles.detailContainer}>
                 <section>
-                    <Group
+                    <Group gap="sm" justify="space-between">
-                        gap="sm"
-                        justify="space-between"
-                    >
                         <Group>
                             <PlayButton onClick={() => handlePlay()} />
                             <ActionIcon
@@ -231,11 +228,7 @@ const DummyAlbumDetailRoute = () => {
                 <section>
                     <Center>
                         <Group mr={5}>
-                            <Icon
+                            <Icon fill="error" icon="error" size={30} />
-                                fill="error"
-                                icon="error"
-                                size={30}
-                            />
                         </Group>
                         <h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
                     </Center>

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

@@ -202,10 +202,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 order: itemOrder.recentAlbums,
                 title: (
                     <Group align="flex-end">
-                        <TextTitle
+                        <TextTitle fw={700} order={2}>
-                            fw={700}
-                            order={2}
-                        >
                             {t('page.albumArtistDetail.recentReleases', {
                                 postProcess: 'sentenceCase',
                             })}
@@ -232,10 +229,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 loading: compilationAlbumsQuery?.isLoading || compilationAlbumsQuery.isFetching,
                 order: itemOrder.compilations,
                 title: (
-                    <TextTitle
+                    <TextTitle fw={700} order={2}>
-                        fw={700}
-                        order={2}
-                    >
                         {t('page.albumArtistDetail.appearsOn', { postProcess: 'sentenceCase' })}
                     </TextTitle>
                 ),
@@ -247,10 +241,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 itemType: LibraryItem.ALBUM_ARTIST,
                 order: itemOrder.similarArtists,
                 title: (
-                    <TextTitle
+                    <TextTitle fw={700} order={2}>
-                        fw={700}
-                        order={2}
-                    >
                         {t('page.albumArtistDetail.relatedArtists', {
                             postProcess: 'sentenceCase',
                         })}
@@ -355,19 +346,10 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         detailQuery?.isLoading ||
         (server?.type === ServerType.NAVIDROME && enabledItem.topSongs && topSongsQuery?.isLoading);
 
-    if (isLoading)
+    if (isLoading) return <div className={styles.contentContainer} ref={cq.ref} />;
-        return (
-            <div
-                className={styles.contentContainer}
-                ref={cq.ref}
-            />
-        );
 
     return (
-        <div
+        <div className={styles.contentContainer} ref={cq.ref}>
-            className={styles.contentContainer}
-            ref={cq.ref}
-        >
             <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 <Group gap="md">
@@ -481,15 +463,9 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 ) : null}
                 <Grid gutter="xl">
                     {biography ? (
-                        <Grid.Col
+                        <Grid.Col order={itemOrder.biography} span={12}>
-                            order={itemOrder.biography}
-                            span={12}
-                        >
                             <section style={{ maxWidth: '1280px' }}>
-                                <TextTitle
+                                <TextTitle fw={700} order={2}>
-                                    fw={700}
-                                    order={2}
-                                >
                                     {t('page.albumArtistDetail.about', {
                                         artist: detailQuery?.data?.name,
                                     })}
@@ -499,23 +475,11 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                         </Grid.Col>
                     ) : null}
                     {showTopSongs ? (
-                        <Grid.Col
+                        <Grid.Col order={itemOrder.topSongs} span={12}>
-                            order={itemOrder.topSongs}
-                            span={12}
-                        >
                             <section>
-                                <Group
+                                <Group justify="space-between" wrap="nowrap">
-                                    justify="space-between"
+                                    <Group align="flex-end" wrap="nowrap">
-                                    wrap="nowrap"
+                                        <TextTitle fw={700} order={2}>
-                                >
-                                    <Group
-                                        align="flex-end"
-                                        wrap="nowrap"
-                                    >
-                                        <TextTitle
-                                            fw={700}
-                                            order={2}
-                                        >
                                             {t('page.albumArtistDetail.topSongs', {
                                                 postProcess: 'sentenceCase',
                                             })}

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

@@ -42,15 +42,9 @@ export const AlbumArtistListContent = ({
     return (
         <Suspense fallback={<Spinner container />}>
             {isGrid ? (
-                <AlbumArtistListGridView
+                <AlbumArtistListGridView gridRef={gridRef} itemCount={itemCount} />
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
             ) : (
-                <AlbumArtistListTableView
+                <AlbumArtistListTableView itemCount={itemCount} tableRef={tableRef} />
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
             )}
         </Suspense>
     );

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

@@ -372,11 +372,7 @@ export const AlbumArtistListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
+            <Group gap="sm" ref={cq.ref} w="100%">
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -395,10 +391,7 @@ export const AlbumArtistListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <DropdownMenu position="bottom-start">
@@ -437,10 +430,7 @@ export const AlbumArtistListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
+            <Group gap="sm" wrap="nowrap">
-                gap="sm"
-                wrap="nowrap"
-            >
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     disabledViewTypes={[ListDisplayType.LIST]}

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -46,15 +46,9 @@ export const AlbumArtistListHeader = ({
     }, 500);
 
     return (
-        <Stack
+        <Stack gap={0} ref={cq.ref}>
-            gap={0}
-            ref={cq.ref}
-        >
             <PageHeader>
-                <Flex
+                <Flex justify="space-between" w="100%">
-                    justify="space-between"
-                    w="100%"
-                >
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>
                             {t('page.albumArtistList.title', { postProcess: 'titleCase' })}
@@ -66,18 +60,12 @@ export const AlbumArtistListHeader = ({
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
                     </Group>
                 </Flex>
             </PageHeader>
             <FilterBar>
-                <AlbumArtistListHeaderFilters
+                <AlbumArtistListHeaderFilters gridRef={gridRef} tableRef={tableRef} />
-                    gridRef={gridRef}
-                    tableRef={tableRef}
-                />
             </FilterBar>
         </Stack>
     );

src/renderer/features/artists/components/artist-list-content.tsx

@@ -34,15 +34,9 @@ export const ArtistListContent = ({ gridRef, itemCount, tableRef }: ArtistListCo
     return (
         <Suspense fallback={<Spinner container />}>
             {isGrid ? (
-                <ArtistListGridView
+                <ArtistListGridView gridRef={gridRef} itemCount={itemCount} />
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
             ) : (
-                <ArtistListTableView
+                <ArtistListTableView itemCount={itemCount} tableRef={tableRef} />
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
             )}
         </Suspense>
     );

src/renderer/features/artists/components/artist-list-header-filters.tsx

@@ -388,11 +388,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
 
     return (
         <Flex justify="space-between">
-            <Group
+            <Group gap="sm" ref={cq.ref} w="100%">
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -411,19 +407,13 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <Divider orientation="vertical" />
                         <DropdownMenu position="bottom-start">
                             <DropdownMenu.Target>
-                                <ActionIcon
+                                <ActionIcon icon="folder" variant="subtle" />
-                                    icon="folder"
-                                    variant="subtle"
-                                />
                             </DropdownMenu.Target>
                             <DropdownMenu.Dropdown>
                                 {musicFoldersQuery.data?.items.map((folder) => (
@@ -442,11 +432,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                 )}
                 {roles.data?.length && (
                     <>
-                        <Select
+                        <Select data={roles.data} onChange={handleSetRole} value={filter.role} />
-                            data={roles.data}
-                            onChange={handleSetRole}
-                            value={filter.role}
-                        />
                     </>
                 )}
                 <RefreshButton onClick={handleRefresh} />
@@ -466,10 +452,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
             </Group>
-            <Group
+            <Group gap="xs" wrap="nowrap">
-                gap="xs"
-                wrap="nowrap"
-            >
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     displayType={display}

src/renderer/features/artists/components/artist-list-header.tsx

@@ -42,15 +42,9 @@ export const ArtistListHeader = ({ gridRef, itemCount, tableRef }: ArtistListHea
     }, 500);
 
     return (
-        <Stack
+        <Stack gap={0} ref={cq.ref}>
-            gap={0}
-            ref={cq.ref}
-        >
             <PageHeader>
-                <Flex
+                <Flex justify="space-between" w="100%">
-                    justify="space-between"
-                    w="100%"
-                >
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>
                             {t('entity.artist_other', { postProcess: 'titleCase' })}
@@ -62,18 +56,12 @@ export const ArtistListHeader = ({ gridRef, itemCount, tableRef }: ArtistListHea
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
                     </Group>
                 </Flex>
             </PageHeader>
             <FilterBar>
-                <ArtistListHeaderFilters
+                <ArtistListHeaderFilters gridRef={gridRef} tableRef={tableRef} />
-                    gridRef={gridRef}
-                    tableRef={tableRef}
-                />
             </FilterBar>
         </Stack>
     );

src/renderer/features/artists/routes/artist-list-route.tsx

@@ -41,16 +41,8 @@ const ArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <ArtistListHeader
+                <ArtistListHeader gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
-                    gridRef={gridRef}
+                <ArtistListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
-                <ArtistListContent
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -533,10 +533,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
 
         openModal({
             children: (
-                <ConfirmModal
+                <ConfirmModal loading={removeFromPlaylistMutation.isLoading} onConfirm={confirm}>
-                    loading={removeFromPlaylistMutation.isLoading}
-                    onConfirm={confirm}
-                >
                     {t('common.areYouSure', { postProcess: 'sentenceCase' })}
                 </ConfirmModal>
             ),
@@ -922,26 +919,15 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
             <Portal>
                 <AnimatePresence>
                     {opened && (
-                        <ContextMenu
+                        <ContextMenu minWidth={125} ref={mergedRef} xPos={ctx.xPos} yPos={ctx.yPos}>
-                            minWidth={125}
-                            ref={mergedRef}
-                            xPos={ctx.xPos}
-                            yPos={ctx.yPos}
-                        >
                             <Stack gap={0}>
-                                <Stack
+                                <Stack gap={0} onClick={closeContextMenu}>
-                                    gap={0}
-                                    onClick={closeContextMenu}
-                                >
                                     {ctx.menuItems?.map((item) => {
                                         return (
                                             !contextMenuItems[item.id].disabled && (
                                                 <Fragment key={`context-menu-${item.id}`}>
                                                     {item.children ? (
-                                                        <HoverCard
+                                                        <HoverCard offset={0} position="right">
-                                                            offset={0}
-                                                            position="right"
-                                                        >
                                                             <HoverCard.Target>
                                                                 <ContextMenuButton
                                                                     leftIcon={

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

@@ -1,10 +1,12 @@
-import { SetActivity } from '@xhayper/discord-rpc';
+import { SetActivity, StatusDisplayType } from '@xhayper/discord-rpc';
 import isElectron from 'is-electron';
 import { useCallback, useEffect, useState } from 'react';
 
 import { controller } from '/@/renderer/api/controller';
 import {
+    DiscordDisplayType,
     getServerById,
+    useAppStore,
     useDiscordSetttings,
     useGeneralSettings,
     usePlayerStore,
@@ -17,6 +19,7 @@ const discordRpc = isElectron() ? window.api.discordRpc : null;
 export const useDiscordRpc = () => {
     const discordSettings = useDiscordSetttings();
     const generalSettings = useGeneralSettings();
+    const { privateMode } = useAppStore();
     const [lastUniqueId, setlastUniqueId] = useState('');
 
     const setActivity = useCallback(
@@ -26,10 +29,8 @@ export const useDiscordRpc = () => {
         ) => {
             if (
                 !current[0] || // No track
-                (current[0] &&
+                current[1] === 0 || // Start of track
-                    current[2] === 'paused' && // Track paused
+                (current[2] === 'paused' && !discordSettings.showPaused) // Track paused with show paused setting disabled
-                    (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();
 
@@ -38,11 +39,13 @@ export const useDiscordRpc = () => {
             const trackChanged = lastUniqueId !== song.uniqueId;
 
             /*
-                1. If we jump more then 1.2 seconds from last state, update status to match
+                1. If the song has just started, update status
-                2. If the current song id is completely different, update status
+                2. If we jump more then 1.2 seconds from last state, update status to match
-                3. If the player state changed, update status
+                3. If the current song id is completely different, update status
+                4. If the player state changed, update status
             */
             if (
+                previous[1] === 0 ||
                 Math.abs((current[1] as number) - (previous[1] as number)) > 1.2 ||
                 trackChanged ||
                 current[2] !== previous[2]
@@ -54,6 +57,12 @@ export const useDiscordRpc = () => {
 
                 const artists = song?.artists.map((artist) => artist.name).join(', ');
 
+                const statusDisplayMap = {
+                    [DiscordDisplayType.ARTIST_NAME]: StatusDisplayType.STATE,
+                    [DiscordDisplayType.FEISHIN]: StatusDisplayType.NAME,
+                    [DiscordDisplayType.SONG_NAME]: StatusDisplayType.DETAILS,
+                };
+
                 const activity: SetActivity = {
                     details: song?.name.padEnd(2, ' ') || 'Idle',
                     instance: false,
@@ -61,7 +70,8 @@ export const useDiscordRpc = () => {
                     largeImageText: song?.album || 'Unknown album',
                     smallImageKey: undefined,
                     smallImageText: current[2] as string,
-                    state: (artists && `By ${artists}`) || 'Unknown artist',
+                    state: artists || 'Unknown artist',
+                    statusDisplayType: statusDisplayMap[discordSettings.displayType],
                     // I would love to use the actual type as opposed to hardcoding to 2,
                     // but manually installing the discord-types package appears to break things
                     type: discordSettings.showAsListening ? 2 : 0,
@@ -134,20 +144,21 @@ export const useDiscordRpc = () => {
             discordSettings.showPaused,
             generalSettings.lastfmApiKey,
             discordSettings.clientId,
+            discordSettings.displayType,
             lastUniqueId,
         ],
     );
 
     useEffect(() => {
-        if (!discordSettings.enabled) return discordRpc?.quit();
+        if (!discordSettings.enabled || privateMode) return discordRpc?.quit();
 
         return () => {
             discordRpc?.quit();
         };
-    }, [discordSettings.clientId, discordSettings.enabled]);
+    }, [discordSettings.clientId, privateMode, discordSettings.enabled]);
 
     useEffect(() => {
-        if (!discordSettings.enabled) return;
+        if (!discordSettings.enabled || privateMode) return;
         const unsubSongChange = usePlayerStore.subscribe(
             (state) => [state.current.song, state.current.time, state.current.status],
             setActivity,
@@ -155,5 +166,5 @@ export const useDiscordRpc = () => {
         return () => {
             unsubSongChange();
         };
-    }, [discordSettings.enabled, setActivity]);
+    }, [discordSettings.enabled, privateMode, setActivity]);
 };

src/renderer/features/genres/components/genre-list-content.tsx

@@ -33,15 +33,9 @@ export const GenreListContent = ({ gridRef, itemCount, tableRef }: AlbumListCont
     return (
         <Suspense fallback={<Spinner container />}>
             {display === ListDisplayType.CARD || display === ListDisplayType.GRID ? (
-                <GenreListGridView
+                <GenreListGridView gridRef={gridRef} itemCount={itemCount} />
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                />
             ) : (
-                <GenreListTableView
+                <GenreListTableView itemCount={itemCount} tableRef={tableRef} />
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
             )}
         </Suspense>
     );

src/renderer/features/genres/components/genre-list-header-filters.tsx

@@ -254,11 +254,7 @@ export const GenreListHeaderFilters = ({
 
     return (
         <Flex justify="space-between">
-            <Group
+            <Group gap="sm" ref={cq.ref} w="100%">
-                gap="sm"
-                ref={cq.ref}
-                w="100%"
-            >
                 <DropdownMenu position="bottom-start">
                     <DropdownMenu.Target>
                         <Button variant="subtle">{sortByLabel}</Button>
@@ -277,10 +273,7 @@ export const GenreListHeaderFilters = ({
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <Divider orientation="vertical" />
-                <OrderToggleButton
+                <OrderToggleButton onToggle={handleToggleSortOrder} sortOrder={filter.sortOrder} />
-                    onToggle={handleToggleSortOrder}
-                    sortOrder={filter.sortOrder}
-                />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
                         <Divider orientation="vertical" />
@@ -340,10 +333,7 @@ export const GenreListHeaderFilters = ({
                     </Button>
                 </DropdownMenu>
             </Group>
-            <Group
+            <Group gap="sm" wrap="nowrap">
-                gap="sm"
-                wrap="nowrap"
-            >
                 <ListConfigMenu
                     autoFitColumns={table.autoFit}
                     disabledViewTypes={[ListDisplayType.LIST]}

src/renderer/features/genres/components/genre-list-header.tsx

@@ -40,15 +40,9 @@ export const GenreListHeader = ({ gridRef, itemCount, tableRef }: GenreListHeade
     }, 500);
 
     return (
-        <Stack
+        <Stack gap={0} ref={cq.ref}>
-            gap={0}
-            ref={cq.ref}
-        >
             <PageHeader>
-                <Flex
+                <Flex justify="space-between" w="100%">
-                    justify="space-between"
-                    w="100%"
-                >
                     <LibraryHeaderBar>
                         <LibraryHeaderBar.Title>
                             {t('page.genreList.title', { postProcess: 'titleCase' })}
@@ -60,10 +54,7 @@ export const GenreListHeader = ({ gridRef, itemCount, tableRef }: GenreListHeade
                         </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
-                        <SearchInput
+                        <SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
-                            defaultValue={filter.searchTerm}
-                            onChange={handleSearch}
-                        />
                     </Group>
                 </Flex>
             </PageHeader>

src/renderer/features/genres/routes/genre-list-route.tsx

@@ -42,16 +42,8 @@ const GenreListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
-                <GenreListHeader
+                <GenreListHeader gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
-                    gridRef={gridRef}
+                <GenreListContent gridRef={gridRef} itemCount={itemCount} tableRef={tableRef} />
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
-                <GenreListContent
-                    gridRef={gridRef}
-                    itemCount={itemCount}
-                    tableRef={tableRef}
-                />
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/item-details/components/item-details-modal.tsx

@@ -81,10 +81,7 @@ const formatArtists = (artists: null | RelatedArtist[] | undefined) =>
                     {artist.name || '—'}
                 </Text>
             ) : (
-                <Text
+                <Text overflow="visible" size="md">
-                    overflow="visible"
-                    size="md"
-                >
                     {artist.name || '-'}
                 </Text>
             )}
@@ -119,17 +116,7 @@ const FormatGenre = (item: Album | AlbumArtist | Playlist | Song) => {
 };
 
 const BoolField = (key: boolean) =>
-    key ? (
+    key ? <Icon color="success" icon="check" /> : <Icon color="error" icon="x" />;
-        <Icon
-            color="success"
-            icon="check"
-        />
-    ) : (
-        <Icon
-            color="error"
-            icon="x"
-        />
-    );
 
 const AlbumPropertyMapping: ItemDetailRow<Album>[] = [
     { key: 'name', label: 'common.title' },
@@ -287,6 +274,8 @@ const SongPropertyMapping: ItemDetailRow<Song>[] = [
     { label: 'filter.isCompilation', render: (song) => BoolField(song.compilation || false) },
     { key: 'container', label: 'common.codec' },
     { key: 'bitRate', label: 'common.bitrate', render: (song) => `${song.bitRate} kbps` },
+    { key: 'sampleRate', label: 'common.sampleRate' },
+    { key: 'bitDepth', label: 'common.bitDepth' },
     { key: 'channels', label: 'common.channel_other' },
     { key: 'size', label: 'common.size', render: (song) => formatSizeString(song.size) },
     {
@@ -409,12 +398,7 @@ export const ItemDetailsModal = ({ item }: ItemDetailsModalProps) => {
     }
 
     return (
-        <Table
+        <Table highlightOnHover variant="vertical" withRowBorders={false} withTableBorder>
-            highlightOnHover
-            variant="vertical"
-            withRowBorders={false}
-            withTableBorder
-        >
             <Table.Tbody>{body}</Table.Tbody>
         </Table>
     );

src/renderer/features/item-details/components/song-path.tsx

@@ -22,10 +22,7 @@ export const SongPath = ({ path }: SongPathProps) => {
 
     return (
         <Group>
-            <CopyButton
+            <CopyButton timeout={2000} value={path}>
-                timeout={2000}
-                value={path}
-            >
                 {({ copied, copy }) => (
                     <Tooltip
                         label={t(
@@ -36,10 +33,7 @@ export const SongPath = ({ path }: SongPathProps) => {
                         )}
                         withinPortal
                     >
-                        <ActionIcon
+                        <ActionIcon onClick={copy} variant="transparent">
-                            onClick={copy}
-                            variant="transparent"
-                        >
                             {copied ? <Icon icon="check" /> : <Icon icon="clipboardCopy" />}
                         </ActionIcon>
                     </Tooltip>

src/renderer/features/lyrics/components/lyrics-search-form.tsx

@@ -38,33 +38,15 @@ const SearchResult = ({ data, onClick }: SearchResultProps) => {
         source === LyricSource.GENIUS ? id.replace(/^((http[s]?|ftp):\/)?\/?([^:/\s]+)/g, '') : id;
 
     return (
-        <button
+        <button className={styles.searchItem} onClick={onClick}>
-            className={styles.searchItem}
+            <Group justify="space-between" wrap="nowrap">
-            onClick={onClick}
+                <Stack gap={0} maw="65%">
-        >
+                    <Text fw={600} size="md">
-            <Group
-                justify="space-between"
-                wrap="nowrap"
-            >
-                <Stack
-                    gap={0}
-                    maw="65%"
-                >
-                    <Text
-                        fw={600}
-                        size="md"
-                    >
                         {name}
                     </Text>
                     <Text isMuted>{artist}</Text>
-                    <Group
+                    <Group gap="sm" wrap="nowrap">
-                        gap="sm"
+                        <Text isMuted size="sm">
-                        wrap="nowrap"
-                    >
-                        <Text
-                            isMuted
-                            size="sm"
-                        >
                             {[source, cleanId].join(' — ')}
                         </Text>
                     </Group>
@@ -167,11 +149,7 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
 export const openLyricSearchModal = ({ artist, name, onSearchOverride }: LyricSearchFormProps) => {
     openModal({
         children: (
-            <LyricsSearchForm
+            <LyricsSearchForm artist={artist} name={name} onSearchOverride={onSearchOverride} />
-                artist={artist}
-                name={name}
-                onSearchOverride={onSearchOverride}
-            />
         ),
         size: 'lg',
         title: i18n.t('form.lyricSearch.title', { postProcess: 'titleCase' }) as string,

src/renderer/features/lyrics/lyrics.tsx

@@ -151,10 +151,7 @@ export const Lyrics = () => {
         <ErrorBoundary FallbackComponent={ErrorFallback}>
             <div className={styles.lyricsContainer}>
                 {isLoadingLyrics ? (
-                    <Spinner
+                    <Spinner container size={25} />
-                        container
-                        size={25}
-                    />
                 ) : (
                     <AnimatePresence mode="sync">
                         {hasNoLyrics ? (

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

@@ -29,10 +29,7 @@ export const UnsynchronizedLyrics = ({
     }, [translatedLyrics]);
 
     return (
-        <div
+        <div className={styles.container} style={{ gap: `${settings.gapUnsync}px` }}>
-            className={styles.container}
-            style={{ gap: `${settings.gapUnsync}px` }}
-        >
             {settings.showProvider && source && (
                 <LyricLine
                     alignment={settings.alignment}

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -11,30 +11,17 @@ export const DrawerPlayQueue = () => {
     const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
 
     return (
-        <Flex
+        <Flex direction="column" h="100%">
-            direction="column"
-            h="100%"
-        >
             <div
                 style={{
                     backgroundColor: 'var(--theme-colors-background)',
                     borderRadius: '10px',
                 }}
             >
-                <PlayQueueListControls
+                <PlayQueueListControls tableRef={queueRef} type="sideQueue" />
-                    tableRef={queueRef}
-                    type="sideQueue"
-                />
             </div>
-            <Flex
+            <Flex bg="var(--theme-colors-background)" h="100%" mb="0.6rem">
-                bg="var(--theme-colors-background)"
+                <PlayQueue ref={queueRef} type="sideQueue" />
-                h="100%"
-                mb="0.6rem"
-            >
-                <PlayQueue
-                    ref={queueRef}
-                    type="sideQueue"
-                />
             </Flex>
         </Flex>
     );

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -174,10 +174,7 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
                 />
             </Group>
             <Group>
-                <Popover
+                <Popover position="top-end" transitionProps={{ transition: 'fade' }}>
-                    position="top-end"
-                    transitionProps={{ transition: 'fade' }}
-                >
                     <Popover.Target>
                         <ActionIcon
                             icon="settings"

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -18,19 +18,10 @@ export const SidebarPlayQueue = () => {
     const isWeb = windowBarStyle === Platform.WEB;
     return (
         <VirtualGridContainer>
-            <Box
+            <Box display={!isWeb ? 'flex' : undefined} h="65px">
-                display={!isWeb ? 'flex' : undefined}
+                <PlayQueueListControls tableRef={queueRef} type="sideQueue" />
-                h="65px"
-            >
-                <PlayQueueListControls
-                    tableRef={queueRef}
-                    type="sideQueue"
-                />
             </Box>
-            <PlayQueue
+            <PlayQueue ref={queueRef} type="sideQueue" />
-                ref={queueRef}
-                type="sideQueue"
-            />
         </VirtualGridContainer>
     );
 };

src/renderer/features/now-playing/routes/now-playing-route.tsx

@@ -16,14 +16,8 @@ const NowPlayingRoute = () => {
         <AnimatedPage>
             <VirtualGridContainer>
                 <NowPlayingHeader />
-                <PlayQueueListControls
+                <PlayQueueListControls tableRef={queueRef} type="nowPlaying" />
-                    tableRef={queueRef}
+                <PlayQueue ref={queueRef} type="nowPlaying" />
-                    type="nowPlaying"
-                />
-                <PlayQueue
-                    ref={queueRef}
-                    type="nowPlaying"
-                />
             </VirtualGridContainer>
         </AnimatedPage>
     );

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

@@ -115,13 +115,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             <div className={styles.controlsContainer}>
                 <div className={styles.buttonsContainer}>
                     <PlayerButton
-                        icon={
+                        icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
-                            <Icon
-                                fill="default"
-                                icon="mediaStop"
-                                size={buttonSize - 2}
-                            />
-                        }
                         onClick={handleStop}
                         tooltip={{
                             label: t('player.stop', { postProcess: 'sentenceCase' }),
@@ -152,13 +146,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         variant="tertiary"
                     />
                     <PlayerButton
-                        icon={
+                        icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
-                            <Icon
-                                fill="default"
-                                icon="mediaPrevious"
-                                size={buttonSize}
-                            />
-                        }
                         onClick={handlePrevTrack}
                         tooltip={{
                             label: t('player.previous', { postProcess: 'sentenceCase' }),
@@ -169,11 +157,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     {skip?.enabled && (
                         <PlayerButton
                             icon={
-                                <Icon
+                                <Icon fill="default" icon="mediaStepBackward" size={buttonSize} />
-                                    fill="default"
-                                    icon="mediaStepBackward"
-                                    size={buttonSize}
-                                />
                             }
                             onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
                             tooltip={{
@@ -194,13 +178,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                     {skip?.enabled && (
                         <PlayerButton
-                            icon={
+                            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
-                                <Icon
-                                    fill="default"
-                                    icon="mediaStepForward"
-                                    size={buttonSize}
-                                />
-                            }
                             onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
                             tooltip={{
                                 label: t('player.skip', {
@@ -214,13 +192,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         />
                     )}
                     <PlayerButton
-                        icon={
+                        icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
-                            <Icon
-                                fill="default"
-                                icon="mediaNext"
-                                size={buttonSize}
-                            />
-                        }
                         onClick={handleNextTrack}
                         tooltip={{
                             label: t('player.next', { postProcess: 'sentenceCase' }),
@@ -231,11 +203,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     <PlayerButton
                         icon={
                             repeat === PlayerRepeat.ONE ? (
-                                <Icon
+                                <Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
-                                    fill="primary"
-                                    icon="mediaRepeatOne"
-                                    size={buttonSize}
-                                />
                             ) : (
                                 <Icon
                                     fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
@@ -268,13 +236,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         variant="tertiary"
                     />
                     <PlayerButton
-                        icon={
+                        icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
-                            <Icon
-                                fill="default"
-                                icon="mediaRandom"
-                                size={buttonSize}
-                            />
-                        }
                         onClick={() =>
                             openShuffleAllModal({
                                 handlePlayQueueAdd,
@@ -291,12 +253,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             </div>
             <div className={styles.sliderContainer}>
                 <div className={styles.sliderValueWrapper}>
-                    <Text
+                    <Text fw={600} isMuted isNoSelect size="xs">
-                        fw={600}
-                        isMuted
-                        isNoSelect
-                        size="xs"
-                    >
                         {formattedTime}
                     </Text>
                 </div>
@@ -324,12 +281,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                     />
                 </div>
                 <div className={styles.sliderValueWrapper}>
-                    <Text
+                    <Text fw={600} isMuted isNoSelect size="xs">
-                        fw={600}
-                        isMuted
-                        isNoSelect
-                        size="xs"
-                    >
                         {duration}
                     </Text>
                 </div>

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

@@ -68,11 +68,7 @@ const ImageWithPlaceholder = ({
                     width: '100%',
                 }}
             >
-                <Icon
+                <Icon color="muted" icon="itemAlbum" size="25%" />
-                    color="muted"
-                    icon="itemAlbum"
-                    size="25%"
-                />
             </Center>
         );
     }
@@ -167,14 +163,8 @@ export const FullScreenPlayerImage = () => {
             justify="flex-start"
             p="1rem"
         >
-            <div
+            <div className={styles.imageContainer} ref={mainImageRef}>
-                className={styles.imageContainer}
+                <AnimatePresence initial={false} mode="sync">
-                ref={mainImageRef}
-            >
-                <AnimatePresence
-                    initial={false}
-                    mode="sync"
-                >
                     {imageState.current === 0 && (
                         <ImageWithPlaceholder
                             animate="open"
@@ -206,18 +196,8 @@ export const FullScreenPlayerImage = () => {
                     )}
                 </AnimatePresence>
             </div>
-            <Stack
+            <Stack className={styles.metadataContainer} gap="md" maw="100%">
-                className={styles.metadataContainer}
+                <Text fw={900} lh="1.2" overflow="hidden" size="4xl" w="100%">
-                gap="md"
-                maw="100%"
-            >
-                <Text
-                    fw={900}
-                    lh="1.2"
-                    overflow="hidden"
-                    size="4xl"
-                    w="100%"
-                >
                     {currentSong?.name}
                 </Text>
                 <Text
@@ -257,10 +237,7 @@ export const FullScreenPlayerImage = () => {
                         </Fragment>
                     ))}
                 </Text>
-                <Group
+                <Group justify="center" mt="sm">
-                    justify="center"
-                    mt="sm"
-                >
                     {currentSong?.container && (
                         <Badge variant="transparent">{currentSong?.container}</Badge>
                     )}

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

@@ -76,10 +76,7 @@ export const FullScreenPlayerQueue = () => {
                 justify="center"
             >
                 {headerItems.map((item) => (
-                    <div
+                    <div className={styles.headerItemWrapper} key={`tab-${item.label}`}>
-                        className={styles.headerItemWrapper}
-                        key={`tab-${item.label}`}
-                    >
                         <Button
                             flex={1}
                             fw="600"

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

@@ -238,10 +238,7 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
                             })}
                         </Option.Label>
                         <Option.Control>
-                            <Group
+                            <Group w="100%" wrap="nowrap">
-                                w="100%"
-                                wrap="nowrap"
-                            >
                                 <Slider
                                     defaultValue={lyricConfig.fontSize}
                                     label={(e) =>
@@ -278,10 +275,7 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
                             })}
                         </Option.Label>
                         <Option.Control>
-                            <Group
+                            <Group w="100%" wrap="nowrap">
-                                w="100%"
-                                wrap="nowrap"
-                            >
                                 <Slider
                                     defaultValue={lyricConfig.gap}
                                     label={(e) => `Synchronized: ${e}px`}

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

@@ -4,10 +4,5 @@ import { useCurrentSong } from '/@/renderer/store';
 export const FullScreenSimilarSongs = () => {
     const currentSong = useCurrentSong();
 
-    return currentSong?.id ? (
+    return currentSong?.id ? <SimilarSongsList fullScreen song={currentSong} /> : null;
-        <SimilarSongsList
-            fullScreen
-            song={currentSong}
-        />
-    ) : null;
 };

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

@@ -69,10 +69,7 @@ export const LeftControls = () => {
     return (
         <div className={styles.leftControlsContainer}>
             <LayoutGroup>
-                <AnimatePresence
+                <AnimatePresence initial={false} mode="popLayout">
-                    initial={false}
-                    mode="popLayout"
-                >
                     {!hideImage && (
                         <div className={styles.imageWrapper}>
                             <motion.div
@@ -123,19 +120,9 @@ export const LeftControls = () => {
                         </div>
                     )}
                 </AnimatePresence>
-                <motion.div
+                <motion.div className={styles.metadataStack} layout="position">
-                    className={styles.metadataStack}
+                    <div className={styles.lineItem} onClick={stopPropagation}>
-                    layout="position"
+                        <Group align="center" gap="xs" wrap="nowrap">
-                >
-                    <div
-                        className={styles.lineItem}
-                        onClick={stopPropagation}
-                    >
-                        <Group
-                            align="center"
-                            gap="xs"
-                            wrap="nowrap"
-                        >
                             <Text
                                 component={Link}
                                 fw={500}

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

@@ -61,7 +61,7 @@ interface PlayButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
 }
 
 export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
-    ({ isPaused, ...props }: PlayButtonProps, ref) => {
+    ({ isPaused, onClick, ...props }: PlayButtonProps, ref) => {
         return (
             <ActionIcon
                 className={styles.main}
@@ -69,6 +69,10 @@ export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
                 iconProps={{
                     size: 'lg',
                 }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    onClick?.(e);
+                }}
                 ref={ref}
                 tooltip={{
                     label: isPaused