Bump to v0.7.3

Currently translated at 100.0% (593 of 593 strings)

Co-authored-by: ENDzZ <godzmichael@outlook.com>
Co-authored-by: Hosted Weblate <hosted@weblate.org>
Translate-URL: https://hosted.weblate.org/projects/feishin/translation/zh_Hans/
Translation: feishin/Translation

.editorconfig

@@ -2,7 +2,7 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

.github/ISSUE_TEMPLATE/1-Bug_report.md

@@ -1,45 +0,0 @@
----
-name: Bug report
-about: You're having technical issues. 🐞
-labels: 'bug'
----
-
-## Expected Behavior
-
-<!--- What should have happened? -->
-
-## Current Behavior
-
-<!--- What went wrong? -->
-<!-- Add screenshots to help explain your problem -->
-<!-- (Open the browser dev tools in the menu or using CTRL + SHIFT + I) -->
-
-## Steps to Reproduce
-
-<!-- Add relevant code and/or a live example -->
-<!-- Add stack traces -->
-
-1.
-
-2.
-
-3.
-
-4.
-
-## Possible Solution (Not obligatory)
-
-<!--- Suggest a reason for the bug or how to fix it. -->
-
-## Context
-
-<!--- How has this issue affected you? What are you trying to accomplish? -->
-
-## Your Environment
-
-<!--- Include as many relevant details about the environment you experienced the bug in -->
-
--   Application version (e.g. v0.1.0) :
--   Operating System and version (e.g. Windows 10) :
--   Server and version (e.g. Navidrome v0.48.0) :
--   Node version (if developing locally) :

.github/ISSUE_TEMPLATE/2-Question.md

@@ -1,9 +0,0 @@
----
-name: Question
-about: Ask a question.❓
-labels: 'question'
----
-
-<!-- Question issues will be closed. -->
-<!-- Ask questions in the discussions tab: Please use discussions https://github.com/jeffvli/feishin/discussions -->
-<!-- Or join the Discord/Matrix servers: https://discord.gg/FVKpcMDy5f https://matrix.to/#/#sonixd:matrix.org -->

.github/ISSUE_TEMPLATE/3-Feature_request.md

@@ -1,11 +0,0 @@
----
-name: Feature request
-about: Request a feature to be added to Feishin 🎉
-labels: 'enhancement'
----
-
-## What do you want to be added?
-
-## Additional context
-
-<!-- Is this a server-specific feature? (e.g. Jellyfin only). -->

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+    - name: Question
+      url: https://github.com/jeffvli/feishin/discussions
+      about: Please ask and answer questions here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,22 @@
+name: Feature request
+description: Request a feature to be added to Feishin 🎉
+labels: ['enhancement']
+body:
+    - type: textarea
+      attributes:
+          label: What do you want to be added?
+      validations:
+          required: true
+    - type: textarea
+      attributes:
+          label: Additional context
+      validations:
+          required: false
+    - type: checkboxes
+      attributes:
+          label: Is this a server-specific feature? (e.g. Jellyfin only)
+          options:
+              - label: 'Yes'
+                required: false
+      validations:
+          required: false

.github/workflows/publish-linux.yml

@@ -17,7 +17,7 @@ jobs:
             - name: Install Node and NPM
               uses: actions/setup-node@v1
               with:
-                  node-version: 16
+                  node-version: 18
                   cache: npm
 
             - name: Install dependencies

.github/workflows/publish-macos.yml

@@ -1,4 +1,4 @@
-name: Publish Windows and macOS (Manual)
+name: Publish macOS (Manual)
 
 on: workflow_dispatch
 
@@ -17,7 +17,7 @@ jobs:
             - name: Install Node and NPM
               uses: actions/setup-node@v1
               with:
-                  node-version: 16
+                  node-version: 18
                   cache: npm
 
             - name: Install dependencies
@@ -35,5 +35,5 @@ jobs:
                   command: |
                       npm run postinstall
                       npm run build
-                      npm exec electron-builder -- --publish always --win --mac
+                      npm exec electron-builder -- --publish always --mac
                   on_retry_command: npm cache clean --force

.github/workflows/publish-pr.yml

@@ -20,7 +20,7 @@ jobs:
             - name: Install Node and NPM
               uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 18
                   cache: npm
 
             - name: Install dependencies

.github/workflows/publish-windows.yml

@@ -0,0 +1,39 @@
+name: Publish Windows (Manual)
+
+on: workflow_dispatch
+
+jobs:
+    publish:
+        runs-on: ${{ matrix.os }}
+
+        strategy:
+            matrix:
+                os: [windows-latest]
+
+        steps:
+            - name: Checkout git repo
+              uses: actions/checkout@v1
+
+            - name: Install Node and NPM
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 18
+                  cache: npm
+
+            - name: Install dependencies
+              run: |
+                  npm install --legacy-peer-deps
+
+            - name: Publish releases
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              uses: nick-invision/retry@v2.8.2
+              with:
+                  timeout_minutes: 30
+                  max_attempts: 3
+                  retry_on: error
+                  command: |
+                      npm run postinstall
+                      npm run build
+                      npm exec electron-builder -- --publish always --win
+                  on_retry_command: npm cache clean --force

README.md

@@ -70,6 +70,29 @@ docker build -t feishin .
 docker run --name feishin -p 9180:9180 feishin
 ```
 
+#### Docker Compose
+To install via Docker Compose use the following snippit. This also works on Portainer.
+```
+version: '3'
+services:
+  feishin:
+    container_name: feishin
+    image: 'ghcr.io/jeffvli/feishin:latest'
+    environment:
+      - SERVER_NAME=jellyfin # pre defined server name
+      - SERVER_LOCK=true # When true AND name/type/url are set, only username/password can be toggled
+      - SERVER_TYPE=jellyfin # navidrome also works
+      - SERVER_URL= # http://address:port
+      - PUID=1000
+      - PGID=1000
+      - UMASK=002
+      - TZ=America/Los_Angeles
+    ports:
+      - 9180:9180
+    restart: unless-stopped
+```
+
+
 ### Configuration
 
 1. Upon startup you will be greeted with a prompt to select the path to your MPV binary. If you do not have MPV installed, you can download it [here](https://mpv.io/installation/) or install it using any package manager supported by your OS. After inputting the path, restart the app.
@@ -93,11 +116,20 @@ First thing to do is check that your MPV binary path is correct. Navigate to the
 
 Feishin supports any music server that implements a [Navidrome](https://www.navidrome.org/) or [Jellyfin](https://jellyfin.org/) API. **Subsonic API is not currently supported**. This will likely be added in [later when the new Subsonic API is decided on](https://support.symfonium.app/t/subsonic-servers-participation/1233).
 
--   [Navidrome](https://github.com/navidrome/navidrome) version 0.48.0 and newer
+-   [Navidrome](https://github.com/navidrome/navidrome)
 -   [Jellyfin](https://github.com/jellyfin/jellyfin)
 -   [Funkwhale](https://funkwhale.audio/) - TBD
 -   Subsonic-compatible servers - TBD
 
+### I have the issue "The SUID sandbox helper binary was found, but is not configured correctly" on Linux
+
+This happens when you have user (unprivileged) namespaces disabled (`sysctl kernel.unprivileged_userns_clone` returns 0). You can fix this by either enabling unprivileged namespaces, or by making the `chrome-sandbox` Setuid.
+
+```bash
+chmod 4755 chrome-sandbox
+sudo chown root:root chrome-sandbox
+```
+
 ## Development
 
 Built and tested using Node `v16.15.0`.

docker-compose.yaml

@@ -2,7 +2,7 @@ version: '3.5'
 services:
     feishin:
         container_name: feishin
-        image: jeffvli/feishin
+        image: ghcr.io/jeffvli/feishin:latest
         restart: unless-stopped
         ports:
             - 9180:9180

package.json

@@ -2,7 +2,7 @@
     "name": "feishin",
     "productName": "Feishin",
     "description": "Feishin music server",
-    "version": "0.6.0",
+    "version": "0.7.3",
     "scripts": {
         "build": "concurrently \"npm run build:main\" \"npm run build:renderer\" \"npm run build:remote\"",
         "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
@@ -14,12 +14,12 @@
         "lint": "concurrently \"npm run lint:code\" \"npm run lint:styles\"",
         "lint:code": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx --fix",
         "lint:styles": "npx stylelint **/*.tsx --fix",
-        "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
-        "package:pr": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win --mac --linux",
-        "package:dev": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --dir",
-        "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
-        "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
-        "start:main": "cross-env NODE_ENV=development electron -r ts-node/register/transpile-only ./src/main/main.ts",
+        "package": "node --import tsx ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
+        "package:pr": "node --import tsx ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win --mac --linux",
+        "package:dev": "node --import tsx ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --dir",
+        "postinstall": "node --import tsx .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
+        "start": "node --import tsx ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
+        "start:main": "cross-env NODE_ENV=development  NODE_OPTIONS=\"--import tsx\" electron -r ts-node/register/transpile-only ./src/main/main.ts",
         "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
         "start:remote": "cross-env NODE_ENV=developemnt TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.remote.dev.ts",
         "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
@@ -56,7 +56,7 @@
             "package.json"
         ],
         "afterSign": ".erb/scripts/notarize.js",
-        "electronVersion": "27.1.0",
+        "electronVersion": "31.2.0",
         "mac": {
             "target": {
                 "target": "default",
@@ -199,7 +199,7 @@
         ]
     },
     "devDependencies": {
-        "@electron/rebuild": "^3.2.10",
+        "@electron/rebuild": "^3.6.0",
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
         "@stylelint/postcss-css-in-js": "^0.38.0",
         "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
@@ -216,6 +216,7 @@
         "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/react-window": "^1.8.5",
         "@types/react-window-infinite-loader": "^1.0.6",
+        "@types/sanitize-html": "^2.11.0",
         "@types/styled-components": "^5.1.26",
         "@types/terser-webpack-plugin": "^5.0.4",
         "@types/webpack-bundle-analyzer": "^4.4.1",
@@ -230,8 +231,8 @@
         "css-loader": "^6.7.1",
         "css-minimizer-webpack-plugin": "^3.4.1",
         "detect-port": "^1.3.0",
-        "electron": "^27.1.0",
-        "electron-builder": "^24.9.0",
+        "electron": "^31.2.0",
+        "electron-builder": "^24.13.3",
         "electron-devtools-installer": "^3.2.0",
         "electron-notarize": "^1.2.1",
         "electronmon": "^2.0.2",
@@ -277,8 +278,9 @@
         "terser-webpack-plugin": "^5.3.1",
         "ts-jest": "^27.1.4",
         "ts-loader": "^9.2.8",
-        "ts-node": "^10.7.0",
+        "ts-node": "^10.9.2",
         "tsconfig-paths-webpack-plugin": "^4.0.0",
+        "tsx": "^4.16.2",
         "typescript": "^5.2.2",
         "typescript-plugin-styled-components": "^3.0.0",
         "url-loader": "^4.1.1",
@@ -318,7 +320,7 @@
         "electron-updater": "^4.6.5",
         "fast-average-color": "^9.3.0",
         "format-duration": "^2.0.0",
-        "framer-motion": "^10.13.0",
+        "framer-motion": "^11.0.0",
         "fuse.js": "^6.6.2",
         "history": "^5.3.0",
         "i18next": "^21.10.0",
@@ -345,6 +347,7 @@
         "react-virtualized-auto-sizer": "^1.0.17",
         "react-window": "^1.8.9",
         "react-window-infinite-loader": "^1.0.9",
+        "sanitize-html": "^2.13.0",
         "semver": "^7.5.4",
         "styled-components": "^6.0.8",
         "swiper": "^9.3.1",
@@ -355,7 +358,7 @@
         "styled-components": "^6"
     },
     "devEngines": {
-        "node": ">=14.x",
+        "node": ">=18.x",
         "npm": ">=7.x"
     },
     "browserslist": [],

release/app/package-lock.json

@@ -1,21 +1,21 @@
 {
     "name": "feishin",
-    "version": "0.5.3",
+    "version": "0.7.2",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "feishin",
-            "version": "0.5.3",
+            "version": "0.7.2",
             "hasInstallScript": true,
             "license": "GPL-3.0",
             "dependencies": {
                 "cheerio": "^1.0.0-rc.12",
                 "mpris-service": "^2.1.2",
-                "ws": "^8.13.0"
+                "ws": "^8.18.0"
             },
             "devDependencies": {
-                "electron": "25.8.4"
+                "electron": "31.1.0"
             }
         },
         "node_modules/@electron/get": {
@@ -99,10 +99,13 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "18.16.19",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.19.tgz",
-            "integrity": "sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==",
-            "dev": true
+            "version": "20.14.9",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz",
+            "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==",
+            "dev": true,
+            "dependencies": {
+                "undici-types": "~5.26.4"
+            }
         },
         "node_modules/@types/responselike": {
             "version": "1.0.0",
@@ -453,14 +456,14 @@
             "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
         },
         "node_modules/electron": {
-            "version": "25.8.4",
-            "resolved": "https://registry.npmjs.org/electron/-/electron-25.8.4.tgz",
-            "integrity": "sha512-hUYS3RGdaa6E1UWnzeGnsdsBYOggwMMg4WGxNGvAoWtmRrr6J1BsjFW/yRq4WsJHJce2HdzQXtz4OGXV6yUCLg==",
+            "version": "31.1.0",
+            "resolved": "https://registry.npmjs.org/electron/-/electron-31.1.0.tgz",
+            "integrity": "sha512-TBOwqLxSxnx6+pH6GMri7R3JPH2AkuGJHfWZS0p1HsmN+Qr1T9b0IRJnnehSd/3NZAmAre4ft9Ljec7zjyKFJA==",
             "dev": true,
             "hasInstallScript": true,
             "dependencies": {
                 "@electron/get": "^2.0.0",
-                "@types/node": "^18.11.18",
+                "@types/node": "^20.9.0",
                 "extract-zip": "^2.0.1"
             },
             "bin": {
@@ -1270,6 +1273,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/undici-types": {
+            "version": "5.26.5",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+            "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+            "dev": true
+        },
         "node_modules/universalify": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -1286,9 +1295,9 @@
             "dev": true
         },
         "node_modules/ws": {
-            "version": "8.13.0",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-            "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+            "version": "8.18.0",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+            "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
             "engines": {
                 "node": ">=10.0.0"
             },
@@ -1408,10 +1417,13 @@
             }
         },
         "@types/node": {
-            "version": "18.16.19",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.19.tgz",
-            "integrity": "sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==",
-            "dev": true
+            "version": "20.14.9",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz",
+            "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==",
+            "dev": true,
+            "requires": {
+                "undici-types": "~5.26.4"
+            }
         },
         "@types/responselike": {
             "version": "1.0.0",
@@ -1672,13 +1684,13 @@
             "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
         },
         "electron": {
-            "version": "25.8.4",
-            "resolved": "https://registry.npmjs.org/electron/-/electron-25.8.4.tgz",
-            "integrity": "sha512-hUYS3RGdaa6E1UWnzeGnsdsBYOggwMMg4WGxNGvAoWtmRrr6J1BsjFW/yRq4WsJHJce2HdzQXtz4OGXV6yUCLg==",
+            "version": "31.1.0",
+            "resolved": "https://registry.npmjs.org/electron/-/electron-31.1.0.tgz",
+            "integrity": "sha512-TBOwqLxSxnx6+pH6GMri7R3JPH2AkuGJHfWZS0p1HsmN+Qr1T9b0IRJnnehSd/3NZAmAre4ft9Ljec7zjyKFJA==",
             "dev": true,
             "requires": {
                 "@electron/get": "^2.0.0",
-                "@types/node": "^18.11.18",
+                "@types/node": "^20.9.0",
                 "extract-zip": "^2.0.1"
             }
         },
@@ -2278,6 +2290,12 @@
             "dev": true,
             "optional": true
         },
+        "undici-types": {
+            "version": "5.26.5",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+            "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+            "dev": true
+        },
         "universalify": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -2291,9 +2309,9 @@
             "dev": true
         },
         "ws": {
-            "version": "8.13.0",
-            "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-            "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA=="
+            "version": "8.18.0",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+            "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw=="
         },
         "xml2js": {
             "version": "0.4.23",

release/app/package.json

@@ -1,6 +1,6 @@
 {
     "name": "feishin",
-    "version": "0.6.0",
+    "version": "0.7.3",
     "description": "",
     "main": "./dist/main/main.js",
     "author": {
@@ -15,10 +15,10 @@
     "dependencies": {
         "cheerio": "^1.0.0-rc.12",
         "mpris-service": "^2.1.2",
-        "ws": "^8.13.0"
+        "ws": "^8.18.0"
     },
     "devDependencies": {
-        "electron": "25.8.4"
+        "electron": "31.1.0"
     },
     "license": "GPL-3.0"
 }

src/i18n/i18n.ts

@@ -16,6 +16,9 @@ import sv from './locales/sv.json';
 import cs from './locales/cs.json';
 import nbNO from './locales/nb-NO.json';
 import nl from './locales/nl.json';
+import zhHant from './locales/zh-Hant.json';
+import fa from './locales/fa.json';
+import ko from './locales/ko.json';
 
 const resources = {
     en: { translation: en },
@@ -24,10 +27,13 @@ const resources = {
     it: { translation: it },
     ru: { translation: ru },
     'pt-BR': { translation: ptBr },
+    fa: { translation: fa },
     fr: { translation: fr },
     ja: { translation: ja },
+    ko: { translation: ko },
     pl: { translation: pl },
     'zh-Hans': { translation: zhHans },
+    'zh-Hant': { translation: zhHant },
     sr: { translation: sr },
     sv: { translation: sv },
     cs: { translation: cs },
@@ -64,6 +70,10 @@ export const languages = [
         label: '日本語',
         value: 'ja',
     },
+    {
+        label: '한국어',
+        value: 'ko',
+    },
     {
         label: 'Nederlands',
         value: 'nl',
@@ -72,7 +82,10 @@ export const languages = [
         label: 'Norsk (Bokmål)',
         value: 'nb-NO',
     },
-
+    {
+        label: 'فارسی',
+        value: 'fa',
+    },
     {
         label: 'Português (Brasil)',
         value: 'pt-BR',
@@ -97,6 +110,10 @@ export const languages = [
         label: '简体中文',
         value: 'zh-Hans',
     },
+    {
+        label: '繁體中文',
+        value: 'zh-Hant',
+    },
 ];
 
 const lowerCasePostProcessor: PostProcessorModule = {
@@ -125,7 +142,7 @@ const titleCasePostProcessor: PostProcessorModule = {
     },
 };
 
-const ignoreSentenceCaseLanguages = ['de']
+const ignoreSentenceCaseLanguages = ['de'];
 
 const sentenceCasePostProcessor: PostProcessorModule = {
     type: 'postProcessor',
@@ -136,7 +153,10 @@ const sentenceCasePostProcessor: PostProcessorModule = {
         return sentences
             .map((sentence) => {
                 return (
-                    sentence.charAt(0).toLocaleUpperCase() + (!ignoreSentenceCaseLanguages.includes(translator.language) ? sentence.slice(1).toLocaleLowerCase() : sentence.slice(1))
+                    sentence.charAt(0).toLocaleUpperCase() +
+                    (!ignoreSentenceCaseLanguages.includes(translator.language)
+                        ? sentence.slice(1).toLocaleLowerCase()
+                        : sentence.slice(1))
                 );
             })
             .join('. ');

src/i18n/locales/cs.json

@@ -28,7 +28,8 @@
         "shuffle_off": "náhodně zakázáno",
         "addLast": "přidat poslední",
         "mute": "ztlumit",
-        "skip_forward": "přeskočit dopředu"
+        "skip_forward": "přeskočit dopředu",
+        "playSimilarSongs": "přehrát podobné skladby"
     },
     "setting": {
         "crossfadeStyle_description": "vyberte způsob prolnutí u přehrávače zvuku",
@@ -196,7 +197,25 @@
         "clearCache": "vymazat mezipaměť prohlížeče",
         "clearCache_description": "„tvrdé pročištění“ aplikace feishin. kromě mezipaměti aplikace feishin vymaže i mezipaměť prohlížeče (uložené obrázky a další zdroje). přihlašovací údaje k serveru a nastavení nebudou ovlivněny",
         "clearQueryCache": "vymazat mezipaměť aplikace feishin",
-        "clearQueryCache_description": "„lehké pročištění“ aplikace feishin. tímto obnovíte seznamy skladeb, metadata skladeb a resetujete uložené texty. nastavení, přihlašovací údaje k serveru a obrázky v mezipaměti nebudou ovlivněny"
+        "clearQueryCache_description": "„lehké pročištění“ aplikace feishin. tímto obnovíte seznamy skladeb, metadata skladeb a resetujete uložené texty. nastavení, přihlašovací údaje k serveru a obrázky v mezipaměti nebudou ovlivněny",
+        "startMinimized": "spustit minimalizované",
+        "homeConfiguration_description": "nastavte, které položky a v jakém pořadí mají být zobrazeny na domovské stránce",
+        "passwordStore": "ukládání hesel / tajných klíčů",
+        "mpvExtraParameters_help": "jeden na řádek",
+        "homeConfiguration": "nastavení domovské stránky",
+        "playerAlbumArtResolution_description": "rozlišení náhledu obalu alba ve velkém přehrávači. větší hodnota znamená kvalitnější obrázek, ale může se déle načítat. výchozí hodnota je 0, což znamená automatické rozlišení",
+        "playerAlbumArtResolution": "rozlišení obalu alba v přehrávači",
+        "genreBehavior": "výchozí chování stránky žánrů",
+        "externalLinks_description": "zapne zobrazování externích odkazů (Last.fm, MusicBrainz) na stránce umělce/alba",
+        "genreBehavior_description": "určuje, zda kliknutí na žánr otevře seznam skladeb nebo alb",
+        "clearCacheSuccess": "mezipaměť úspěšně vymazána",
+        "externalLinks": "zobrazit externí odkazy",
+        "startMinimized_description": "spustit aplikaci do systémové lišty",
+        "passwordStore_description": "který způsob ukládání hesel / tajných klíčů použít. změňte tuto možnost, pokud máte problémy s ukládáním hesel.",
+        "homeFeature": "carousel doporučení na domovské stránce",
+        "homeFeature_description": "ovládá, zda se má zobrazovat velký carousel s doporučenými alby na domovské stránce",
+        "imageAspectRatio": "použít nativní poměr stran obalů alb",
+        "imageAspectRatio_description": "pokud je povoleno, budou obaly alb zobrazeny s jejich nativním poměrem stran. u obalů, které nemají poměr 1:1, bude zbývající místo prázdné"
     },
     "action": {
         "editPlaylist": "upravit $t(entity.playlist_one)",
@@ -215,7 +234,11 @@
         "moveToBottom": "přesunout dolů",
         "setRating": "nastavit hodnocení",
         "toggleSmartPlaylistEditor": "přepnout editor $t(entity.smartPlaylist)",
-        "removeFromFavorites": "odebrat z $t(entity.favorite_other)"
+        "removeFromFavorites": "odebrat z $t(entity.favorite_other)",
+        "openIn": {
+            "lastfm": "Otevřít v Last.fm",
+            "musicbrainz": "Otevřít v MusicBrainz"
+        }
     },
     "common": {
         "backward": "zpátky",
@@ -298,7 +321,17 @@
         "random": "náhodně",
         "size": "velikost",
         "biography": "biografie",
-        "note": "poznámka"
+        "note": "poznámka",
+        "albumGain": "zisk (gain) alba",
+        "albumPeak": "vrchol alba",
+        "close": "zavřít",
+        "mbid": "ID MusicBrainz",
+        "trackGain": "zisk (gain) skladby",
+        "reload": "znovu načíst",
+        "share": "sdílet",
+        "codec": "kodek",
+        "trackPeak": "vrchol skladby",
+        "preview": "náhled"
     },
     "table": {
         "config": {
@@ -312,7 +345,9 @@
                 "gap": "$t(common.gap)",
                 "tableColumns": "sloupce tabulky",
                 "autoFitColumns": "automaticky přizpůsobit sloupce",
-                "size": "$t(common.size)"
+                "size": "$t(common.size)",
+                "itemGap": "mezera mezi položkami (px)",
+                "itemSize": "velikost položek (px)"
             },
             "label": {
                 "releaseDate": "datum vydání",
@@ -340,7 +375,9 @@
                 "discNumber": "číslo disku",
                 "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": {
@@ -365,7 +402,9 @@
             "albumArtist": "umělec alba",
             "path": "cesta",
             "discNumber": "disk",
-            "channels": "$t(common.channel_other)"
+            "channels": "$t(common.channel_other)",
+            "size": "$t(common.size)",
+            "codec": "$t(common.codec)"
         }
     },
     "error": {
@@ -387,7 +426,10 @@
         "mpvRequired": "vyžadován přehrávač MPV",
         "audioDeviceFetchError": "při pokusu o přístup ke zvukovým zařízením se vyskytla chyba",
         "invalidServer": "neplatný server",
-        "loginRateError": "příliš mnoho pokusů o přihlášení, zkuste to znovu za pár vteřin"
+        "loginRateError": "příliš mnoho pokusů o přihlášení, zkuste to znovu za pár vteřin",
+        "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"
     },
     "filter": {
         "mostPlayed": "nejvíce přehráváno",
@@ -445,7 +487,8 @@
             "settings": "$t(common.setting_other)",
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
-            "albumArtists": "$t(entity.albumArtist_other)"
+            "albumArtists": "$t(entity.albumArtist_other)",
+            "shared": "$t(entity.playlist_other) sdíleny"
         },
         "fullscreenPlayer": {
             "config": {
@@ -459,7 +502,9 @@
                 "unsynchronized": "nesynchronizováno",
                 "lyricAlignment": "zarovnání textů",
                 "useImageAspectRatio": "použít poměr stran obrázku",
-                "lyricGap": "mezera textů"
+                "lyricGap": "mezera textů",
+                "dynamicImageBlur": "velikost rozostření obrázku",
+                "dynamicIsImage": "povolit obrázek na pozadí"
             },
             "upNext": "další",
             "lyrics": "texty",
@@ -493,7 +538,10 @@
             "addFavorite": "$t(action.addToFavorites)",
             "play": "$t(player.play)",
             "numberSelected": "vybráno {{count}}",
-            "removeFromQueue": "$t(action.removeFromQueue)"
+            "removeFromQueue": "$t(action.removeFromQueue)",
+            "showDetails": "získat informace",
+            "shareItem": "sdílet položku",
+            "playSimilarSongs": "$t(player.playSimilarSongs)"
         },
         "home": {
             "mostPlayed": "nejpřehrávanější",
@@ -516,10 +564,14 @@
             "title": "$t(entity.albumArtist_other)"
         },
         "genreList": {
-            "title": "$t(entity.genre_other)"
+            "title": "$t(entity.genre_other)",
+            "showTracks": "zobrazit $t(entity.track_other) s žánrem",
+            "showAlbums": "zobrazit $t(entity.album_other) s žánrem"
         },
         "trackList": {
-            "title": "$t(entity.track_other)"
+            "title": "$t(entity.track_other)",
+            "artistTracks": "skladby od umělce {{artist}}",
+            "genreTracks": "$t(entity.track_other) s žánrem „{{genre}}“"
         },
         "globalSearch": {
             "commands": {
@@ -533,7 +585,25 @@
             "title": "$t(entity.playlist_other)"
         },
         "albumList": {
-            "title": "$t(entity.album_other)"
+            "title": "$t(entity.album_other)",
+            "artistAlbums": "alba od umělce {{artist}}",
+            "genreAlbums": "$t(entity.album_other) s žánrem „{{genre}}“"
+        },
+        "albumArtistDetail": {
+            "recentReleases": "nedávno vydáno",
+            "viewDiscography": "zobrazit diskografii",
+            "about": "O umělci {{artist}}",
+            "appearsOn": "také v",
+            "topSongs": "nejlepší skladby",
+            "topSongsFrom": "nejlepší skladby od umělce {{title}}",
+            "relatedArtists": "podobní $t(entity.artist_other)",
+            "viewAllTracks": "zobrazit všechny $t(entity.track_other)",
+            "viewAll": "zobrazit vše"
+        },
+        "itemDetail": {
+            "copiedPath": "cesta úspěšně zkopírována",
+            "copyPath": "kopírovat cestu do schránky",
+            "openFile": "zobrazit skladbu ve správci souborů"
         }
     },
     "form": {
@@ -584,6 +654,14 @@
         },
         "editPlaylist": {
             "title": "upravit $t(entity.playlist_one)"
+        },
+        "shareItem": {
+            "allowDownloading": "umožnit stahování",
+            "success": "odkaz ke sdílení zkopírován do schránky (klikněte sem pro otevření)",
+            "description": "popis",
+            "expireInvalid": "čas vypršení musí být v budoucnosti",
+            "setExpiration": "nastavit vypršení",
+            "createFailed": "nepodařilo se vytvořit sdílení (je sdílení povoleno?)"
         }
     },
     "entity": {

src/i18n/locales/de.json

@@ -310,7 +310,8 @@
             "discNumber": "Disk",
             "genre": "$t(entity.genre_one)",
             "songCount": "$t(entity.track_other)",
-            "trackNumber": "Nr."
+            "trackNumber": "Nr.",
+            "size": "$t(common.size)"
         }
     },
     "page": {

src/i18n/locales/en.json

@@ -26,6 +26,8 @@
         "action_one": "action",
         "action_other": "actions",
         "add": "add",
+        "albumGain": "album gain",
+        "albumPeak": "album peak",
         "areYouSure": "are you sure?",
         "ascending": "ascending",
         "backward": "backward",
@@ -72,6 +74,7 @@
         "menu": "menu",
         "minimize": "minimize",
         "modified": "modified",
+        "mbid": "MusicBrainz ID",
         "name": "name",
         "no": "no",
         "none": "none",
@@ -81,6 +84,7 @@
         "owner": "owner",
         "path": "path",
         "playerMustBePaused": "player must be paused",
+        "preview": "preview",
         "previousSong": "previous $t(entity.track_one)",
         "quit": "quit",
         "random": "random",
@@ -98,10 +102,13 @@
         "setting": "setting",
         "setting_one": "setting",
         "setting_other": "settings",
+        "share": "share",
         "size": "size",
         "sortOrder": "order",
         "title": "title",
         "trackNumber": "track",
+        "trackGain": "track gain",
+        "trackPeak": "track peak",
         "unknown": "unknown",
         "version": "version",
         "year": "year",
@@ -144,6 +151,7 @@
         "apiRouteError": "unable to route request",
         "audioDeviceFetchError": "an error occurred when trying to get audio devices",
         "authenticationFailed": "authentication failed",
+        "badAlbum": "you are seeing this page because this song is not part of an album. you are most likely seeing this issue if you have a song at the top level of your music folder. jellyfin only groups tracks if they are in a folder.",
         "credentialsRequired": "credentials required",
         "endpointNotImplementedError": "endpoint {{endpoint}} is not implemented for {{serverType}}",
         "genericError": "an error occurred",
@@ -152,6 +160,7 @@
         "loginRateError": "too many login attempts, please try again in a few seconds",
         "mpvRequired": "MPV required",
         "networkError": "a network error occurred",
+        "openError": "could not open file",
         "playbackError": "an error occurred when trying to play the media",
         "remoteDisableError": "an error occurred when trying to $t(common.disable) the remote server",
         "remoteEnableError": "an error occurred when trying to $t(common.enable) the remote server",
@@ -251,6 +260,14 @@
             "input_optionMatchAll": "match all",
             "input_optionMatchAny": "match any"
         },
+        "shareItem": {
+            "allowDownloading": "allow downloading",
+            "description": "description",
+            "setExpiration": "set expiration",
+            "success": "share link copied to clipboard (or click here to open)",
+            "expireInvalid": "expiration must be in the future",
+            "createFailed": "failed to create share (is sharing enabled?)"
+        },
         "updateServer": {
             "success": "server updated successfully",
             "title": "update server"
@@ -264,7 +281,7 @@
             "viewDiscography": "view discography",
             "relatedArtists": "related $t(entity.artist_other)",
             "topSongs": "top songs",
-            "topSongsFrom": "Top songs from {{title}}",
+            "topSongsFrom": "top songs from {{title}}",
             "viewAll": "view all",
             "viewAllTracks": "view all $t(entity.track_other)"
         },
@@ -276,6 +293,8 @@
             "moreFromGeneric": "more from {{item}}"
         },
         "albumList": {
+            "artistAlbums": "albums by {{artist}}",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)",
             "title": "$t(entity.album_other)"
         },
         "appMenu": {
@@ -303,10 +322,13 @@
             "moveToTop": "$t(action.moveToTop)",
             "numberSelected": "{{count}} selected",
             "play": "$t(player.play)",
+            "playSimilarSongs": "$t(player.playSimilarSongs)",
             "removeFromFavorites": "$t(action.removeFromFavorites)",
             "removeFromPlaylist": "$t(action.removeFromPlaylist)",
             "removeFromQueue": "$t(action.removeFromQueue)",
-            "setRating": "$t(action.setRating)"
+            "setRating": "$t(action.setRating)",
+            "shareItem": "share item",
+            "showDetails": "get info"
         },
         "fullscreenPlayer": {
             "config": {
@@ -329,6 +351,8 @@
             "upNext": "up next"
         },
         "genreList": {
+            "showAlbums": "show $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "show $t(entity.genre_one) $t(entity.track_other)",
             "title": "$t(entity.genre_other)"
         },
         "globalSearch": {
@@ -346,6 +370,11 @@
             "recentlyPlayed": "recently played",
             "title": "$t(common.home)"
         },
+        "itemDetail": {
+            "copyPath": "copy path to clipboard",
+            "copiedPath": "path copied successfully",
+            "openFile": "show track in file manager"
+        },
         "playlistList": {
             "title": "$t(entity.playlist_other)"
         },
@@ -370,7 +399,7 @@
             "tracks": "$t(entity.track_other)"
         },
         "trackList": {
-            "artistTracks": "Tracks by {{artist}}",
+            "artistTracks": "tracks by {{artist}}",
             "genreTracks": "\"{{genre}}\" $t(entity.track_other)",
             "title": "$t(entity.track_other)"
         }
@@ -388,6 +417,7 @@
         "playbackFetchNoResults": "no songs found",
         "playbackSpeed": "playback speed",
         "playRandom": "play random",
+        "playSimilarSongs": "play similar songs",
         "previous": "previous",
         "queue_clear": "clear queue",
         "queue_moveToBottom": "move selected to top",
@@ -462,10 +492,14 @@
         "gaplessAudio": "gapless audio",
         "gaplessAudio_description": "sets the gapless audio setting for mpv",
         "gaplessAudio_optionWeak": "weak (recommended)",
+        "genreBehavior": "genre page default behavior",
+        "genreBehavior_description": "determines whether clicking on a genre opens by default in track or album list",
         "globalMediaHotkeys": "global media hotkeys",
         "globalMediaHotkeys_description": "enable or disable the usage of your system media hotkeys to control playback",
         "homeConfiguration": "home page configuration",
         "homeConfiguration_description": "configure what items are shown, and in what order, on the home page",
+        "homeFeature": "home featured carousel",
+        "homeFeature_description": "controls whether to show the large featured carousel on the home page",
         "hotkey_browserBack": "browser back",
         "hotkey_browserForward": "browser forward",
         "hotkey_favoriteCurrentSong": "favorite $t(common.currentSong)",
@@ -499,6 +533,8 @@
         "hotkey_volumeUp": "volume up",
         "hotkey_zoomIn": "zoom in",
         "hotkey_zoomOut": "zoom out",
+        "imageAspectRatio": "use native cover art aspect ratio",
+        "imageAspectRatio_description": "if enabled, cover art will be shown using their native aspect ratio. for art that is not 1:1, the remaining space will be empty",
         "language": "language",
         "language_description": "sets the language for the application ($t(common.restartRequired))",
         "lyricFetch": "fetch lyrics from the internet",
@@ -610,6 +646,7 @@
             "rating": "rating",
             "releaseDate": "release date",
             "releaseYear": "year",
+            "size": "$t(common.size)",
             "songCount": "$t(entity.track_other)",
             "title": "title",
             "trackNumber": "track"
@@ -648,6 +685,7 @@
                 "releaseDate": "release date",
                 "rowIndex": "row index",
                 "size": "$t(common.size)",
+                "songCount": "$t(entity.track_other)",
                 "title": "$t(common.title)",
                 "titleCombined": "$t(common.title) (combined)",
                 "trackNumber": "track number",

src/i18n/locales/es.json

@@ -28,7 +28,8 @@
         "addLast": "añadir último",
         "mute": "silencio",
         "skip_forward": "saltar hacia delante",
-        "pause": "pausa"
+        "pause": "pausa",
+        "playSimilarSongs": "Reproducir canciones similares"
     },
     "setting": {
         "crossfadeStyle_description": "selecciona el estilo de crossfade a usar por el reproductor de audio",
@@ -159,7 +160,7 @@
         "audioPlayer": "reproductor de audio",
         "hotkey_zoomOut": "reducir",
         "hotkey_unfavoriteCurrentSong": "$t(common.currentSong) no favorito",
-        "hotkey_rate0": "limpiar calificación",
+        "hotkey_rate0": "Limpiar calificación",
         "discordApplicationId": "id de aplicación {{discord}}",
         "applicationHotkeys_description": "configura las teclas de acceso rápido de la aplicación. marca la casilla para establecerlas como teclas de acceso rápido globales (solo escritorio)",
         "floatingQueueArea_description": "muestra un icono flotante en el lado derecho de la pantalla para ver la cola de reproducción",
@@ -191,12 +192,30 @@
         "skipPlaylistPage": "saltar página de lista de reproducción",
         "hotkey_browserForward": "avance",
         "hotkey_browserBack": "retroceso",
-        "clearCache": "limpiar la caché del navegador",
-        "clearQueryCache": "limpiar la caché de feishin",
-        "clearQueryCache_description": "una 'limpieza suave' de feishin. esto refrescará las listas de reproducción, metadatos de pistas y restablece las letras guardadas. se mantienen los ajustes, credenciales del servidor y las imágenes en caché",
+        "clearCache": "Limpiar la caché del navegador",
+        "clearQueryCache": "Limpiar la caché de Feishin",
+        "clearQueryCache_description": "Una 'limpieza suave' de Feishin. Esto refrescará las listas de reproducción, metadatos de pistas y restablecerá las letras guardadas. Se mantienen los ajustes, credenciales del servidor y las imágenes en caché",
         "buttonSize": "tamaño del botón de la barra de reproducción",
-        "clearCache_description": "una 'limpieza fuerte' de feishin. para limpiar la caché de feishin, vacía la caché del navegador (imágenes guardadas y otros elementos). se mantienen las credenciales y ajustes del servidor",
-        "buttonSize_description": "el tamaño de los botones de la barra de reproducción"
+        "clearCache_description": "Una 'limpieza fuerte' de Feishin. Para limpiar la caché de Feishin, vacía la caché del navegador (imágenes guardadas y otros elementos). Se mantienen las credenciales y ajustes del servidor",
+        "buttonSize_description": "el tamaño de los botones de la barra de reproducción",
+        "passwordStore_description": "qué método de almacenamiento de contraseñas/claves secretas utilizar. cambie esta opción si tiene problemas para guardar contraseñas.",
+        "startMinimized_description": "iniciar la aplicación en la bandeja del sistema",
+        "startMinimized": "iniciar minimizado",
+        "passwordStore": "contraseñas/almacenamiento secreto",
+        "playerAlbumArtResolution_description": "la resolución para la vista previa de la carátula del álbum del reproductor grande. más grande hace que parezca más nítido, pero puede ralentizar la carga. El valor predeterminado es 0, lo que significa automático",
+        "playerAlbumArtResolution": "resolución de la carátula del álbum del reproductor",
+        "homeConfiguration": "Configuración de la página de inicio",
+        "mpvExtraParameters_help": "Uno por línea",
+        "genreBehavior": "Comportamiento predeterminado de la página de géneros",
+        "externalLinks_description": "Permite mostrar enlaces externos (Last.fm, MusicBrainz) en páginas de artista/álbum",
+        "genreBehavior_description": "Determina si al pulsar en un género se abre por defecto la lista de pistas o de álbumes",
+        "homeConfiguration_description": "Configura qué elementos son mostrados y en qué orden en la página de inicio",
+        "clearCacheSuccess": "Caché limpiada correctamente",
+        "externalLinks": "Mostrar enlaces externos",
+        "homeFeature": "Carrusel destacado de inicio",
+        "homeFeature_description": "Controla si se muestra el gran carrusel destacado en la página de inicio",
+        "imageAspectRatio_description": "Si está habilitado, la portada será mostrada usando su relación de aspecto nativa. Para arte que no es 1:1, el espacio restante estará vacío",
+        "imageAspectRatio": "Usar relación de aspecto nativa de portada"
     },
     "action": {
         "editPlaylist": "editar $t(entity.playlist_one)",
@@ -215,7 +234,11 @@
         "moveToBottom": "mover al fondo",
         "setRating": "establecer calificación",
         "toggleSmartPlaylistEditor": "cambiar editor $t(entity.smartPlaylist)",
-        "removeFromFavorites": "eliminar de $t(entity.favorite_other)"
+        "removeFromFavorites": "eliminar de $t(entity.favorite_other)",
+        "openIn": {
+            "lastfm": "Abrir en Last.fm",
+            "musicbrainz": "Abrir en MusicBrainz"
+        }
     },
     "common": {
         "backward": "hacia atrás",
@@ -298,7 +321,17 @@
         "action_other": "acciones",
         "channel_one": "Canal",
         "channel_many": "Canales",
-        "channel_other": "Canales"
+        "channel_other": "Canales",
+        "trackPeak": "la más alta de la canción",
+        "albumPeak": "lo más destacado del álbum",
+        "albumGain": "Ganancia de álbum",
+        "mbid": "ID de MusicBrainz",
+        "codec": "Códec",
+        "close": "Cerrar",
+        "reload": "Recargar",
+        "share": "Compartir",
+        "trackGain": "Ganancia de pista",
+        "preview": "Vista previa"
     },
     "error": {
         "remotePortWarning": "reiniciar el servidor para aplicar el nuevo puerto",
@@ -319,7 +352,10 @@
         "mpvRequired": "MPV requerido",
         "audioDeviceFetchError": "un error ocurrió cuando se intentó obtener los dispositivos de audio",
         "invalidServer": "servidor inválido",
-        "loginRateError": "demasiados intentos de inicio de sesión, por favor inténtalo en unos segundos"
+        "loginRateError": "demasiados intentos de inicio de sesión, por favor inténtalo en unos segundos",
+        "badAlbum": "Estás viendo esta página porque esta canción no forma parte de un álbum. Este problema puede ocurrir si tiene una canción en el nivel superior de su 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"
     },
     "filter": {
         "mostPlayed": "más reproducido",
@@ -377,7 +413,8 @@
             "settings": "$t(common.setting_other)",
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
-            "albumArtists": "$t(entity.albumArtist_other)"
+            "albumArtists": "$t(entity.albumArtist_other)",
+            "shared": "compartido $t(entity.playlist_other)"
         },
         "appMenu": {
             "selectServer": "seleccionar servidor",
@@ -407,7 +444,10 @@
             "addFavorite": "$t(action.addToFavorites)",
             "play": "$t(player.play)",
             "numberSelected": "{{count}} seleccionado",
-            "removeFromQueue": "$t(action.removeFromQueue)"
+            "removeFromQueue": "$t(action.removeFromQueue)",
+            "shareItem": "Compartir elemento",
+            "showDetails": "Obtener información",
+            "playSimilarSongs": "$t(player.playSimilarSongs)"
         },
         "home": {
             "mostPlayed": "más reproducidos",
@@ -429,7 +469,9 @@
                 "lyricAlignment": "alineación de letra",
                 "useImageAspectRatio": "usar ratio de aspecto de imagen",
                 "showLyricMatch": "mostrar coincidencia de letras",
-                "lyricGap": "desfase de letra"
+                "lyricGap": "desfase de letra",
+                "dynamicImageBlur": "tamaño de desenfoque de imagen",
+                "dynamicIsImage": "habilitar imagen de fondo"
             },
             "lyrics": "letras",
             "related": "relacionado"
@@ -448,10 +490,14 @@
             "title": "$t(entity.albumArtist_other)"
         },
         "genreList": {
-            "title": "$t(entity.genre_other)"
+            "title": "$t(entity.genre_other)",
+            "showAlbums": "Mostrar $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "Mostrar $t(entity.genre_one) $t(entity.track_other)"
         },
         "trackList": {
-            "title": "$t(entity.track_other)"
+            "title": "$t(entity.track_other)",
+            "genreTracks": "\"{{genre}}\" $t(entity.track_other)",
+            "artistTracks": "pistas por {{artist}}"
         },
         "globalSearch": {
             "commands": {
@@ -465,7 +511,25 @@
             "title": "$t(entity.playlist_other)"
         },
         "albumList": {
-            "title": "$t(entity.album_other)"
+            "title": "$t(entity.album_other)",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)",
+            "artistAlbums": "álbumes de {{artist}}"
+        },
+        "albumArtistDetail": {
+            "viewAllTracks": "ver todo de $t(entity.track_other)",
+            "relatedArtists": "similar a $t(entity.artist_other)",
+            "topSongs": "mejores canciones",
+            "topSongsFrom": "las mejores canciones de {{title}}",
+            "viewAll": "Ver todo",
+            "recentReleases": "Lanzamientos recientes",
+            "viewDiscography": "Ver discografía",
+            "about": "Sobre {{artist}}",
+            "appearsOn": "Aparece en"
+        },
+        "itemDetail": {
+            "copiedPath": "Ruta copiada correctamente",
+            "openFile": "Mostrar pista en el gestor de archivos",
+            "copyPath": "Copiar ruta al portapapeles"
         }
     },
     "form": {
@@ -516,6 +580,14 @@
         "queryEditor": {
             "input_optionMatchAll": "coincidir todos",
             "input_optionMatchAny": "coincidir cualquiera"
+        },
+        "shareItem": {
+            "createFailed": "No se pudo crear el recurso compartido (¿está habilitado el uso compartido?)",
+            "allowDownloading": "Permitir la descarga",
+            "description": "Descripción",
+            "setExpiration": "Establecer expiración",
+            "success": "Enlace de compartición copiado al portapapeles (o pulsa aquí para abrir)",
+            "expireInvalid": "La expiración debe ser en el futuro"
         }
     },
     "table": {
@@ -541,7 +613,9 @@
             "albumArtist": "artista de álbum",
             "path": "ruta",
             "discNumber": "disco",
-            "channels": "$t(common.channel_other)"
+            "channels": "$t(common.channel_other)",
+            "size": "$t(common.size)",
+            "codec": "$t(common.codec)"
         },
         "config": {
             "label": {
@@ -570,14 +644,18 @@
                 "playCount": "número de reproducción",
                 "genre": "$t(entity.genre_one)",
                 "favorite": "$t(common.favorite)",
-                "year": "$t(common.year)"
+                "year": "$t(common.year)",
+                "codec": "$t(common.codec)",
+                "songCount": "$t(entity.track_other)"
             },
             "general": {
                 "gap": "$t(common.gap)",
                 "tableColumns": "columnas de la tabla",
                 "autoFitColumns": "ajuste automático de columnas",
                 "size": "$t(common.size)",
-                "displayType": "tipo de visualización"
+                "displayType": "tipo de visualización",
+                "itemGap": "espacio entre elementos (px)",
+                "itemSize": "tamaño del elemento (px)"
             },
             "view": {
                 "card": "tarjeta",

src/i18n/locales/fi.json

@@ -0,0 +1,144 @@
+{
+    "common": {
+        "size": "koko",
+        "search": "etsi",
+        "sortOrder": "järjestys",
+        "setting": "asetus",
+        "title": "otsikko",
+        "trackNumber": "raita",
+        "action_one": "toiminto",
+        "action_other": "toiminnot",
+        "add": "lisää",
+        "areYouSure": "oletko varma?",
+        "ascending": "nouseva",
+        "backward": "takaperin",
+        "bitrate": "bittinopeus",
+        "channel_one": "kanava",
+        "channel_other": "kanavat",
+        "collapse": "luhista",
+        "comingSoon": "tulossa pian…",
+        "configure": "konfiguroi",
+        "confirm": "hyväksy",
+        "disable": "poista käytöstä",
+        "disc": "levy",
+        "dismiss": "hylkää",
+        "favorite": "suosikki",
+        "filter_one": "suodatin",
+        "filter_other": "suodatinta",
+        "filters": "suodattimet",
+        "forceRestartRequired": "käynnistä uudelleen ottaaksesi muutokset käyttöön… sulje ilmoitus käynnistääksesi uudelleen",
+        "gap": "väli",
+        "home": "koti",
+        "left": "vasen",
+        "limit": "raja",
+        "manage": "hallitse",
+        "menu": "valikko",
+        "minimize": "minimoi",
+        "modified": "muokattu",
+        "name": "nimi",
+        "no": "ei",
+        "none": "ei mitään",
+        "noResultsFromQuery": "kysely palautti ei tuloksia",
+        "note": "huomautus",
+        "ok": "ok",
+        "owner": "omistaja",
+        "path": "reitti",
+        "preview": "esikatsele",
+        "previousSong": "edellinen $t(entity.track_one)",
+        "resetToDefault": "palauta oletusarvoihin",
+        "restartRequired": "uudelleen käynnistys vaaditaan",
+        "right": "oikea",
+        "save": "tallenna",
+        "saveAndReplace": "tallenna ja korvaa",
+        "saveAs": "tallenna nimellä",
+        "unknown": "tuntematon",
+        "version": "versio",
+        "year": "vuosi",
+        "yes": "kyllä",
+        "close": "sulje",
+        "descending": "laskeva",
+        "biography": "elämänkerta",
+        "cancel": "peruuta",
+        "bpm": "bpm",
+        "decrease": "pienennä",
+        "center": "keskitä",
+        "clear": "tyhjennä",
+        "codec": "koodekki",
+        "create": "luo",
+        "description": "kuvaus",
+        "currentSong": "nykyinen $t(entity.track_one)",
+        "delete": "poista",
+        "duration": "kesto",
+        "edit": "muokkaa",
+        "enable": "ota käyttöön",
+        "expand": "laajenna",
+        "increase": "lisää",
+        "forward": "eteenpäin",
+        "maximize": "maksimoi",
+        "mbid": "MusicBrainz ID",
+        "share": "jaa",
+        "random": "satunnainen",
+        "reload": "lataa uudelleen",
+        "quit": "poistu",
+        "rating": "arvostelu",
+        "refresh": "virkistä",
+        "reset": "nollaa",
+        "playerMustBePaused": "soitin täytyy olla pysäytetty"
+    },
+    "entity": {
+        "album_one": "albumi",
+        "album_other": "albumia",
+        "albumArtist_one": "albumi artisti",
+        "albumArtist_other": "albumi artistia",
+        "artistWithCount_one": "{{count}} artisti",
+        "artistWithCount_other": "{{count}} artistia",
+        "playlist_one": "soittolista",
+        "playlist_other": "soittolistaa",
+        "playlistWithCount_one": "{{count}} soittolista",
+        "playlistWithCount_other": "{{count}} soittolistaa",
+        "albumArtistCount_one": "{{count}} albumi artisti",
+        "albumArtistCount_other": "{{count}} albumi artistia",
+        "albumWithCount_one": "{{count}} albumi",
+        "albumWithCount_other": "{{count}} albumia",
+        "artist_one": "artisti",
+        "artist_other": "artistia",
+        "favorite_one": "suosikki",
+        "favorite_other": "suosikkia",
+        "folder_one": "kansio",
+        "folder_other": "kansiota",
+        "folderWithCount_one": "{{count}} kansio",
+        "folderWithCount_other": "{{count}} kansiota",
+        "genre_one": "genre",
+        "genre_other": "genreä",
+        "genreWithCount_one": "{{count}} genre",
+        "genreWithCount_other": "{{count}} genreä",
+        "smartPlaylist": "älykäs $t(entity.playlist_one)",
+        "track_one": "raita",
+        "track_other": "raitaa",
+        "trackWithCount_one": "{{count}} raita",
+        "trackWithCount_other": "{{count}} raitaa"
+    },
+    "action": {
+        "clearQueue": "tyhjennä jono",
+        "createPlaylist": "luo $t(entity.playlist_one)",
+        "deselectAll": "poista valinta kaikista",
+        "editPlaylist": "muokkaa $t(entity.playlist_one)",
+        "removeFromQueue": "poista jonosta",
+        "viewPlaylists": "katsele $t(entity.playlist_other)",
+        "openIn": {
+            "lastfm": "Avaa Last.fm:ssä",
+            "musicbrainz": "Avaa MusicBrainz:ssä"
+        },
+        "goToPage": "mene sivulle",
+        "moveToBottom": "siirry pohjalle",
+        "moveToTop": "siirry ylös",
+        "addToFavorites": "lisää $t(entity.favorite_other)",
+        "addToPlaylist": "lisää $t(entity.playlist_one)",
+        "refresh": "$t(common.refresh)",
+        "removeFromFavorites": "poista kohteesta $t(entity.favorite_other)",
+        "toggleSmartPlaylistEditor": "kytke $t(entity.smartPlaylist) editori",
+        "deletePlaylist": "poista $t(entity.playlist_one)",
+        "removeFromPlaylist": "poista kohteesta $t(entity.playlist_one)",
+        "setRating": "aseta arvostelu"
+    }
+}

src/i18n/locales/fr.json

@@ -253,7 +253,7 @@
             "moreFromGeneric": "plus de {{item}}"
         },
         "setting": {
-            "generalTab": "générale",
+            "generalTab": "général",
             "hotkeysTab": "raccourci",
             "windowTab": "fenêtre",
             "playbackTab": "lecteur"
@@ -328,10 +328,10 @@
         "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",
-        "mpvExecutablePath_description": "définit le chemin vers l'exécutable mpv",
+        "mpvExecutablePath_description": "définit le chemin vers l'exécutable mpv, si vide, le chemin par défaut sera utilisé",
         "hotkey_favoriteCurrentSong": "favori $t(common.currentSong)",
         "sampleRate": "taux d'échantillonnage",
-        "sampleRate_description": "sélectionnez le taux d'échantillonnage de sortie utilisé si la fréquence d'échantillonnage sélectionnée est différente de celle du média actuel",
+        "sampleRate_description": "sélectionner le taux d'échantillonnage de sortie utilisé si la fréquence d'échantillonnage sélectionnée est différente de celle du média actuel. une valeur en inférieur à 8000 utilisera la fréquence par défaut",
         "hotkey_zoomIn": "zoom avant",
         "scrobble_description": "scrobble les lectures à votre serveur multimédia",
         "hotkey_browserForward": "avancer",
@@ -399,7 +399,7 @@
         "lyricFetchProvider_description": "sélectionnez le fournisseur auprès desquels récupérer les paroles. l'ordre des fournisseurs et l'ordre dans lequel ils seront interrogés",
         "globalMediaHotkeys_description": "active ou désactive l'utilisation des raccourcis clavier multimédia système pour contrôler la lecture",
         "followLyric": "suivre les paroles actuelles",
-        "discordIdleStatus": "afficher l'état d'inactivité dans le status de l'activité",
+        "discordIdleStatus": "afficher l'état d'inactivité dans le statut de l'activité",
         "hotkey_zoomOut": "zoom arrière",
         "hotkey_unfavoriteCurrentSong": "retirer des favoris la $t(common.currentSong)",
         "hotkey_rate0": "supprimer la note",
@@ -437,7 +437,7 @@
         "skipPlaylistPage_description": "lors de la navigation dans une playlist, aller directement vers le liste des morceaux, au lieu de la page par défaut",
         "volumeWheelStep": "valeur du pas de volume",
         "windowBarStyle": "style de la barre de la fenêtre",
-        "useSystemTheme_description": "suivre les préférence du système (sombre ou clair)",
+        "useSystemTheme_description": "suivre les préférences du système (sombre ou clair)",
         "skipPlaylistPage": "sauter la page de playlist",
         "themeDark": "thème (sombre)",
         "windowBarStyle_description": "sélectionner le style de la barre de la fenêtre",
@@ -460,7 +460,13 @@
         "replayGainClipping": "{{ReplayGain}} clipping",
         "replayGainMode": "mode de {{ReplayGain}}",
         "replayGainFallback_description": "gain en dB à appliquer si le fichier n'a pas de tag {{ReplayGain}}",
-        "replayGainPreamp_description": "ajuste le gain de préampli appliqué a la valeur de {{ReplayGain}}"
+        "replayGainPreamp_description": "ajuste le gain de préampli appliqué a la valeur de {{ReplayGain}}",
+        "clearQueryCache": "vide le cache de feishin",
+        "clearCache": "Vider le cache navigateur",
+        "buttonSize_description": "la taille des boutons de la barre de lecture",
+        "clearQueryCache_description": "un 'soft clear' de feishin. cela actualisera les playlists, les métadonnées des pistes, et réinitialisera les paroles enregistrées. les paramètres, identifiants serveurs et les images mises en cache sont conservés",
+        "clearCache_description": "un 'hard clear' de feishin. en plus de vider le cache de feishin, vide le cache du navigateur (images sauvegardées et autres ressources). les identifiants serveurs et paramètres sont conservés",
+        "buttonSize": "taille des boutons de la barre de lecture"
     },
     "form": {
         "deletePlaylist": {
@@ -482,7 +488,7 @@
             "error_savePassword": "une erreur s’est produite lors de la tentative de sauvegarde du mot de passe"
         },
         "addToPlaylist": {
-            "success": "{{message}} $t(entity.track_other) ajouté à {{numOfPlaylists}} $t(entity.playlist_other)",
+            "success": "$t(entity.trackWithCount, {\"count\": {{message}} }) ajouté à $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
             "title": "ajouter à $t(entity.playlist_one)",
             "input_skipDuplicates": "sauter les doublons",
             "input_playlists": "$t(entity.playlist_other)"
@@ -625,7 +631,8 @@
             "artist": "$t(entity.artist_one)",
             "genre": "$t(entity.genre_one)",
             "songCount": "$t(entity.track_other)",
-            "channels": "$t(common.channel_other)"
+            "channels": "$t(common.channel_other)",
+            "size": "$t(common.size)"
         }
     }
 }

src/i18n/locales/it.json

@@ -288,7 +288,12 @@
         "replayGainFallback_description": "gain in db da applicare se il file non possiede tag {{ReplayGain}}",
         "replayGainPreamp_description": "aggiusta la preamplificazione del gain applicato sui valori {{ReplayGain}}",
         "skipPlaylistPage": "Salta la pagina playlist",
-        "sidebarCollapsedNavigation": "navigazione con barra laterale (collassata)"
+        "sidebarCollapsedNavigation": "navigazione con barra laterale (collassata)",
+        "clearCache_description": "pulitura \"forzata\" di feishin. Oltre a pulire la cache di feishin, elimina la cache del browser(immagini salvate e altri elementi). credenziali e impostazioni del server saranno mantenute",
+        "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"
     },
     "error": {
         "remotePortWarning": "riavvia il server per applicare la nuova porta",
@@ -572,7 +577,8 @@
             "albumArtist": "artista album",
             "path": "percorso",
             "discNumber": "disco",
-            "channels": "$t(common.channel_other)"
+            "channels": "$t(common.channel_other)",
+            "size": "$t(common.size)"
         }
     },
     "entity": {

src/i18n/locales/ja.json

@@ -353,7 +353,8 @@
             "albumArtist": "アルバムアーティスト",
             "path": "パス",
             "discNumber": "ディスク",
-            "channels": "$t(common.channel_other)"
+            "channels": "$t(common.channel_other)",
+            "size": "$t(common.size)"
         }
     },
     "error": {

src/i18n/locales/ko.json

@@ -0,0 +1,14 @@
+{
+    "action": {
+        "createPlaylist": "$t(entity.playlist_one) 생성",
+        "addToFavorites": "$t(entity.favorite_other)에 추가",
+        "addToPlaylist": "$t(entity.playlist_one)에 추가",
+        "clearQueue": "대기열 지우기",
+        "deletePlaylist": "$t(entity.playlist_one) 삭제",
+        "deselectAll": "모두 선택 해제",
+        "editPlaylist": "$t(entity.playlist_one) 편집",
+        "goToPage": "페이지 이동",
+        "moveToBottom": "맨 아래로 이동",
+        "moveToTop": "맨 위로 이동"
+    }
+}

src/i18n/locales/nl.json

@@ -249,7 +249,8 @@
     },
     "table": {
         "column": {
-            "rating": "rating"
+            "rating": "rating",
+            "size": "$t(common.size)"
         },
         "config": {
             "label": {

src/i18n/locales/pl.json

@@ -16,7 +16,11 @@
         "createPlaylist": "utwórz $t(entity.playlist_one)",
         "deletePlaylist": "usuń $t(entity.playlist_one)",
         "moveToBottom": "przesuń na dół",
-        "setRating": "oceń"
+        "setRating": "oceń",
+        "openIn": {
+            "lastfm": "Otwórz w Last.fm",
+            "musicbrainz": "Otwórz w MusicBrainz"
+        }
     },
     "common": {
         "increase": "zwiększ",
@@ -99,7 +103,17 @@
         "decrease": "obniż",
         "path": "ścieżka",
         "center": "środkowy",
-        "note": "notatka"
+        "note": "notatka",
+        "albumPeak": "spadek albumu",
+        "albumGain": "wzrost albumu",
+        "mbid": "ID MusicBrainz",
+        "reload": "przeładuj",
+        "share": "udostępnij",
+        "trackGain": "gain utworu",
+        "trackPeak": "peak utworu",
+        "codec": "kodek",
+        "preview": "podgląd",
+        "close": "zamknij"
     },
     "entity": {
         "genre_one": "gatunek",
@@ -168,7 +182,10 @@
         "mpvRequired": "wymagane MPV",
         "audioDeviceFetchError": "wystąpił błąd podczas próby znalezienia urządzeń dźwiękowych",
         "invalidServer": "nieprawidłowy serwer",
-        "loginRateError": "zbyt dużo prób logowania, poczekaj chwilę i spróbuj ponownie"
+        "loginRateError": "zbyt dużo prób logowania, poczekaj chwilę i spróbuj ponownie",
+        "badAlbum": "ta strona jest wyświetlana, ponieważ ten utwór nie jest częścią albumu. najprawdopodobniej ten problem występuje, jeśli utwór znajduje się w nadrzędnym folderze plików z muzyką. jellyfin grupuje utwory tylko wtedy, gdy znajdują się one w folderze.",
+        "networkError": "wystąpił błąd sieciowy",
+        "openError": "nie można otworzyć pliku"
     },
     "filter": {
         "mostPlayed": "najczęściej odtwarzane",
@@ -262,6 +279,14 @@
         },
         "editPlaylist": {
             "title": "edytuj $t(entity.playlist_one)"
+        },
+        "shareItem": {
+            "allowDownloading": "zezwól na pobieranie",
+            "description": "opis",
+            "setExpiration": "ustaw czas wygaśnięcia",
+            "success": "link do udostępniania skopiowany do schowka (lub kliknij tutaj, aby otworzyć)",
+            "createFailed": "nie udało się utworzyć linku do udostępniania (czy udostępnianie jest włączone?)",
+            "expireInvalid": "ustawiony czas wygaśnięcia musi być w przyszłości"
         }
     },
     "page": {
@@ -277,7 +302,9 @@
                 "unsynchronized": "niezsynchronizowane",
                 "lyricAlignment": "wyrównaj tekst",
                 "useImageAspectRatio": "użyj współczynnika proporcji obrazu",
-                "lyricGap": "odstępy tekstu"
+                "lyricGap": "odstępy tekstu",
+                "dynamicImageBlur": "rozmiar rozmycia obrazu",
+                "dynamicIsImage": "włącz obraz w tle"
             },
             "upNext": "następny",
             "lyrics": "tekst",
@@ -311,7 +338,9 @@
             "addFavorite": "$t(action.addToFavorites)",
             "play": "$t(player.play)",
             "numberSelected": "zaznaczono {{count}}",
-            "removeFromQueue": "$t(action.removeFromQueue)"
+            "removeFromQueue": "$t(action.removeFromQueue)",
+            "shareItem": "udostępnij pozycję",
+            "showDetails": "zobacz informacje"
         },
         "albumDetail": {
             "moreFromArtist": "więcej od $t(entity.artist_one)",
@@ -321,10 +350,14 @@
             "title": "$t(entity.albumArtist_other)"
         },
         "genreList": {
-            "title": "$t(entity.genre_other)"
+            "title": "$t(entity.genre_other)",
+            "showAlbums": "pokaż $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "pokaż $t(entity.genre_one) $t(entity.track_other)"
         },
         "albumList": {
-            "title": "$t(entity.album_other)"
+            "title": "$t(entity.album_other)",
+            "artistAlbums": "albumy artysty {{artist}}",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)"
         },
         "sidebar": {
             "nowPlaying": "teraz odtwarzane",
@@ -337,7 +370,8 @@
             "settings": "$t(common.setting_other)",
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
-            "albumArtists": "$t(entity.albumArtist_other)"
+            "albumArtists": "$t(entity.albumArtist_other)",
+            "shared": "udostępnione $t(entity.playlist_other)"
         },
         "home": {
             "mostPlayed": "najczęściej odtwarzane",
@@ -353,7 +387,9 @@
             "windowTab": "okno"
         },
         "trackList": {
-            "title": "$t(entity.track_other)"
+            "title": "$t(entity.track_other)",
+            "artistTracks": "utwory przez {{artist}}",
+            "genreTracks": "\"{{genre}}\" $t(entity.track_other)"
         },
         "globalSearch": {
             "commands": {
@@ -365,6 +401,22 @@
         },
         "playlistList": {
             "title": "$t(entity.playlist_other)"
+        },
+        "albumArtistDetail": {
+            "topSongs": "popularne utwory",
+            "topSongsFrom": "popularne utwory z {{title}}",
+            "about": "O {{artist}}",
+            "recentReleases": "ostatnie wydania",
+            "viewAll": "zobacz wszystko",
+            "viewDiscography": "przeglądaj dyskografię",
+            "relatedArtists": "powiązane z $t(entity.artist_other)",
+            "appearsOn": "pojawia się na",
+            "viewAllTracks": "zobacz wszystko $t(entity.track_other)"
+        },
+        "itemDetail": {
+            "copyPath": "kopiuj ścieżkę do schowka",
+            "copiedPath": "ścieżka została skopiowana pomyślnie",
+            "openFile": "pokaż utwór w menedżerze plików"
         }
     },
     "player": {
@@ -413,7 +465,7 @@
         "hotkey_zoomIn": "przybliż",
         "hotkey_browserForward": "przeglądarka w przód",
         "audioExclusiveMode_description": "włącz wyłączny tryb wyjścia. W tym trybie, system zwykle jest zablokowany i może odtwarzać tylko poprzez mpv",
-        "discordUpdateInterval": "{{discord}} interwał aktualizacji obszernej obecności",
+        "discordUpdateInterval": "{{discord}} interwał aktualizacji rich presence",
         "fontType_optionBuiltIn": "wbudowana czcionka",
         "hotkey_playbackPlayPause": "odtwarzaj / wstrzymaj",
         "hotkey_rate1": "oceń na 1 gwiazdkę",
@@ -449,7 +501,7 @@
         "crossfadeDuration_description": "ustaw czas trwania efektu przenikania",
         "language": "język",
         "hotkey_toggleShuffle": "przełącz kolejność losową",
-        "discordRichPresence_description": "włącz status odtwarzania w {{discord}} obszernie obecny. Klucze obrazów to {{icon}}, {{playing}} i {{paused}}. ",
+        "discordRichPresence_description": "włącz status odtwarzania w {{discord}} rich presence. Dzięki temu będą wyświetlane informacje takie jak: {{icon}}, {{playing}} i {{paused}}. ",
         "audioDevice": "urządzenia dźwiękowe",
         "hotkey_rate2": "oceń na 2 gwiazdki",
         "exitToTray": "zamknij do zasobnika",
@@ -475,7 +527,7 @@
         "hotkey_zoomOut": "oddal",
         "hotkey_unfavoriteCurrentSong": "usuń $t(common.currentSong) z ulubionych",
         "hotkey_rate0": "wyczyść oceny",
-        "discordApplicationId": "id aplikacji {{discord}}",
+        "discordApplicationId": "ID aplikacji {{discord}}",
         "applicationHotkeys_description": "ustaw skróty klawiszowe aplikacji. przełącz pole wyboru aby ustawić skrót globalny (tylko komputery)",
         "floatingQueueArea_description": "wyświetl ikonę najechania kursorem po prawej stronie ekranu, aby wyświetlić kolejkę odtwarzania",
         "hotkey_volumeMute": "wycisz",
@@ -489,7 +541,7 @@
         "font_description": "ustaw czcionkę dla aplikacji",
         "playButtonBehavior_optionPlay": "$t(player.play)",
         "minimumScrobblePercentage": "minimalny czas trwania scrobble (procentowy)",
-        "mpvExecutablePath_description": "ustaw ścieżkę dla plików wykonywalnych mpv",
+        "mpvExecutablePath_description": "ustaw ścieżkę dla plików wykonywalnych mpv. gdy puste, zostanie użyta domyślna ścieżka",
         "playButtonBehavior_optionAddLast": "$t(player.addLast)",
         "minimizeToTray_description": "zminimalizuj aplikację do zasobnika systemowego",
         "remotePassword": "hasło dla serwera zdalnej kontroli",
@@ -518,10 +570,10 @@
         "sampleRate": "częstotliwość próbkowania",
         "sidePlayQueueStyle_optionAttached": "przyłączony",
         "sidebarConfiguration": "konfiguracja paska bocznego",
-        "sampleRate_description": "wybierz wyjściową częstotliwość próbkowania, która ma być używana, jeśli wybrana częstotliwość próbkowania różni się od częstotliwości bieżącego utworu",
+        "sampleRate_description": "wybierz wyjściową częstotliwość próbkowania, która ma być używana, jeśli wybrana częstotliwość próbkowania różni się od częstotliwości bieżącego utworu. wartość mniejsza niż 8000 spowoduje użycie częstotliwości domyślnej",
         "replayGainMode_optionNone": "$t(common.none)",
         "replayGainClipping": "wzmocnienie {{ReplayGain}}",
-        "scrobble_description": "odtwarzanie scrobble na serwerze multimediów",
+        "scrobble_description": "przekazywanie informacji o odtwarzaniu (scrobbling) do twojego serwera multimediów",
         "sidePlayQueueStyle": "boczny styl kolejki odtwarzania",
         "remoteUsername_description": "ustaw nazwę użytkownika dla serwera zdalnej kontroli. Jeśli nazwa użytkownika i hasło są puste, autoryzacja będzie wyłączona",
         "replayGainMode_optionAlbum": "$t(entity.album_one)",
@@ -558,7 +610,27 @@
         "skipPlaylistPage": "pomiń stronę list odtwarzania",
         "themeDark": "motyw (ciemny)",
         "windowBarStyle_description": "wybierz styl paska okna",
-        "useSystemTheme": "użyj motywu systemowego"
+        "useSystemTheme": "użyj motywu systemowego",
+        "buttonSize": "Rozmiar przycisku paska odtwarzacza",
+        "clearQueryCache": "wyczyść pamięć podręczną feishin",
+        "clearCache_description": "\"twarde wyczyszczenie\" feishin. oprócz wyczyszczenia pamięci podręcznej feishin, opróżnij pamięć podręczną przeglądarki (zapisane obrazy i inne zasoby). dane i ustawienia serwera zostaną zachowane",
+        "clearQueryCache_description": "\"miękkie wyczyszczenie\" feishin. spowoduje to odświeżenie list odtwarzania, metadanych utworów i zresetowanie zapisanych tekstów. ustawienia, dane uwierzytelniające serwera i obrazy w pamięci podręcznej zostaną zachowane",
+        "buttonSize_description": "rozmiar przycisków paska odtwarzacza",
+        "clearCache": "wyczyść pamięć podręczną przeglądarki",
+        "playerAlbumArtResolution": "rozdzielczość okładki albumu odtwarzacza",
+        "externalLinks": "pokaż zewnętrzne linki",
+        "genreBehavior_description": "określa, czy kliknięcie gatunku domyślnie otwiera listę utworów czy albumów",
+        "mpvExtraParameters_help": "po jednym na linię",
+        "passwordStore": "hasła",
+        "passwordStore_description": "jakie hasło ma być używane. zmień to, jeśli masz problemy z przechowywaniem haseł.",
+        "playerAlbumArtResolution_description": "rozdzielczość podglądu okładki albumu w dużym odtwarzaczu. większa sprawia, że wygląda bardziej wyraziście, ale może spowolnić ładowanie. domyślnie 0, czyli auto",
+        "startMinimized": "uruchom zminimalizowany",
+        "startMinimized_description": "uruchom aplikację w zasobniku systemowym",
+        "clearCacheSuccess": "pamięć podręczna została wyczyszczona pomyślnie",
+        "genreBehavior": "domyślne zachowanie strony gatunek",
+        "externalLinks_description": "umożliwia wyświetlanie linków zewnętrznych (Last.fm, MusicBrainz) na stronach artystów/albumów",
+        "homeConfiguration": "konfiguracja strony głównej",
+        "homeConfiguration_description": "konfiguracja elementów wyświetlanych na stronie głównej i ich kolejności"
     },
     "table": {
         "config": {
@@ -572,7 +644,9 @@
                 "gap": "$t(common.gap)",
                 "tableColumns": "kolumny tabeli",
                 "autoFitColumns": "automatyczne dopasowanie kolumn",
-                "size": "$t(common.size)"
+                "size": "$t(common.size)",
+                "itemSize": "rozmiar elementu (px)",
+                "itemGap": "odstęp między elementami (px)"
             },
             "label": {
                 "releaseDate": "data premiery",
@@ -600,7 +674,8 @@
                 "discNumber": "numer płyty",
                 "favorite": "$t(common.favorite)",
                 "year": "$t(common.year)",
-                "albumArtist": "$t(entity.albumArtist_one)"
+                "albumArtist": "$t(entity.albumArtist_one)",
+                "codec": "$t(common.codec)"
             }
         },
         "column": {
@@ -625,7 +700,9 @@
             "albumArtist": "artysta albumu",
             "path": "ścieżka",
             "discNumber": "płyta",
-            "channels": "$t(common.channel_other)"
+            "channels": "$t(common.channel_other)",
+            "size": "$t(common.size)",
+            "codec": "$t(common.codec)"
         }
     }
 }

src/i18n/locales/pt-BR.json

@@ -80,7 +80,13 @@
         "yes": "sim",
         "random": "aleatório",
         "size": "tamanho",
-        "note": "observação"
+        "note": "observação",
+        "mbid": "ID no MusicBrainz",
+        "reload": "recarregar",
+        "codec": "codec",
+        "preview": "pré-visualizar",
+        "share": "compartilhar",
+        "close": "fechar"
     },
     "action": {
         "goToPage": "vá para página",
@@ -98,17 +104,34 @@
         "removeFromPlaylist": "remover da $t(entity.playlist_one)",
         "deletePlaylist": "deletar $t(entity.playlist_one)",
         "deselectAll": "desmarcar todos",
-        "removeFromFavorites": "remover de $t(entity.favorite_other)"
+        "removeFromFavorites": "remover de $t(entity.favorite_other)",
+        "openIn": {
+            "lastfm": "Abrir em Last.fm",
+            "musicbrainz": "Abrir em MusicBrainz"
+        }
     },
     "form": {
         "deletePlaylist": {
-            "title": "deletar $t(entity.playlist_one)"
+            "title": "deletar $t(entity.playlist_one)",
+            "input_confirm": "escreva o nome da $t(entity.playlist_one) para confirmar"
         },
         "addServer": {
-            "title": "adicionar servidor"
+            "title": "adicionar servidor",
+            "input_password": "senha",
+            "input_legacyAuthentication": "habilitar autenticação legada",
+            "error_savePassword": "um erro ocorreu ao tentar salvar a senha",
+            "ignoreSsl": "ignorar ssl ($t(common.restartRequired))",
+            "input_savePassword": "salvar senha",
+            "input_url": "url",
+            "success": "servidor adicionado com sucesso",
+            "input_name": "nome do servidor",
+            "input_username": "nome de usuário"
         },
         "createPlaylist": {
-            "title": "criar $t(entity.playlist_one)"
+            "title": "criar $t(entity.playlist_one)",
+            "input_public": "público",
+            "input_description": "$t(common.description)",
+            "success": "$t(entity.playlist_one) criada com sucesso"
         },
         "updateServer": {
             "title": "atualizar servidor"
@@ -117,7 +140,10 @@
             "title": "editar $t(entity.playlist_one)"
         },
         "addToPlaylist": {
-            "title": "adicionar à $t(entity.playlist_one)"
+            "title": "adicionar à $t(entity.playlist_one)",
+            "input_playlists": "$t(entity.playlist_other)",
+            "input_skipDuplicates": "pular duplicadas",
+            "success": "adicionado $t(entity.trackWithCount, {\"count\": {{message}} }) para $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })"
         },
         "lyricSearch": {
             "title": "pesquisa de letras"
@@ -139,7 +165,8 @@
         },
         "column": {
             "title": "titulo",
-            "discNumber": "disco"
+            "discNumber": "disco",
+            "size": "$t(common.size)"
         }
     },
     "page": {
@@ -175,7 +202,33 @@
     "filter": {
         "title": "titulo",
         "disc": "disco",
-        "mostPlayed": "mais tocado"
+        "mostPlayed": "mais tocado",
+        "album": "$t(entity.album_one)",
+        "name": "nome",
+        "biography": "bibliografia",
+        "duration": "duração",
+        "favorited": "favoritado",
+        "fromYear": "a partir do ano",
+        "songCount": "contador de músicas",
+        "toYear": "até o ano",
+        "random": "aleatório",
+        "search": "buscar",
+        "lastPlayed": "última tocada",
+        "isCompilation": "é compilação",
+        "trackNumber": "faixa",
+        "communityRating": "Nota da comunidade",
+        "isPublic": "é público",
+        "playCount": "contador de execuções",
+        "recentlyUpdated": "atualizado recentemente",
+        "dateAdded": "data de adição",
+        "isRecentlyPlayed": "foi tocado recentemente",
+        "albumArtist": "$t(entity.albumArtist_one)",
+        "recentlyAdded": "adicionado recentemente",
+        "releaseDate": "data de lançamento",
+        "recentlyPlayed": "tocado recentemente",
+        "criticRating": "Nota da crítica",
+        "isFavorited": "é favoritado",
+        "releaseYear": "ano de lançamento"
     },
     "player": {
         "playbackFetchNoResults": "nenhuma música encontrada",
@@ -220,7 +273,13 @@
         "folderWithCount_other": "{{count}} pastas",
         "genreWithCount_one": "{{count}} gênero",
         "genreWithCount_many": "{{count}} gêneros",
-        "genreWithCount_other": "{{count}} gêneros"
+        "genreWithCount_other": "{{count}} gêneros",
+        "trackWithCount_one": "faixa",
+        "trackWithCount_many": "faixas",
+        "trackWithCount_other": "faixas",
+        "track_one": "faixa",
+        "track_many": "faixas",
+        "track_other": "faixas"
     },
     "error": {
         "remotePortWarning": "reinicie o servidor para aplicar a nova porta",
@@ -241,6 +300,9 @@
         "mpvRequired": "MPV necessário",
         "audioDeviceFetchError": "ocorreu um erro ao tentar obter dispositivos de áudio",
         "invalidServer": "servidor inválido",
-        "loginRateError": "muitas tentativas de login, tente novamente em alguns segundos"
+        "loginRateError": "muitas tentativas de login, tente novamente em alguns segundos",
+        "badAlbum": "você está vendo este erro por que está música não é parte de algum album. um motivo comum para você estar vendo este erro é se a sua música estiver na raiz da sua pasta de músicas. o jellyfin apenas agrupa as músicas se elas estiveram na mesma pasta.",
+        "networkError": "ocorreu um erro na internet",
+        "openError": "não foi possível abrir o arquivo"
     }
 }

src/i18n/locales/ru.json

@@ -15,14 +15,18 @@
         "deselectAll": "снять выделение",
         "moveToBottom": "вниз",
         "setRating": "оценить",
-        "toggleSmartPlaylistEditor": "вкл/выкл $t(entity.smartPlaylist) редактор",
-        "removeFromFavorites": "удалить из $t(entity.favorite_other)"
+        "toggleSmartPlaylistEditor": "вкл./откл. редактор $t(entity.smartPlaylist)",
+        "removeFromFavorites": "удалить из $t(entity.favorite_other)",
+        "openIn": {
+            "lastfm": "открыть на Last.fm",
+            "musicbrainz": "открыть на MusicBrainz"
+        }
     },
     "common": {
         "backward": "назад",
         "increase": "увеличить",
         "rating": "рейтинг",
-        "bpm": "ударов в мин.",
+        "bpm": "уд./мин.",
         "refresh": "обновить",
         "unknown": "неизвестно",
         "areYouSure": "вы уверены?",
@@ -34,19 +38,19 @@
         "currentSong": "текущий $t(entity.track_one)",
         "collapse": "закрыть",
         "trackNumber": "трек",
-        "descending": "убывающий",
+        "descending": "убывание",
         "add": "добавить",
         "gap": "промежуток",
-        "ascending": "возрастающий",
+        "ascending": "возрастанию",
         "dismiss": "отклонить",
         "year": "год",
         "manage": "управлять",
-        "limit": "лимит",
+        "limit": "ограничение",
         "minimize": "минимизировать",
         "modified": "изменено",
-        "duration": "продолжительность",
+        "duration": "длительность",
         "name": "имя",
-        "maximize": "максимизировать",
+        "maximize": "развернуть",
         "decrease": "уменьшить",
         "ok": "ок",
         "description": "описание",
@@ -60,7 +64,7 @@
         "forward": "вперёд",
         "delete": "удалить",
         "cancel": "отменить",
-        "forceRestartRequired": "перезапустите приложение, чтобы применить изменения... закройте уведомление, чтобы перезапустить приложение",
+        "forceRestartRequired": "перезапустите приложение, чтобы применить изменения... закройте уведомление для перезапуска",
         "setting": "настройка",
         "version": "версия",
         "title": "название",
@@ -76,14 +80,14 @@
         "action_many": "действий",
         "playerMustBePaused": "воспроизведение должно быть остановлено",
         "confirm": "подтвердить",
-        "resetToDefault": "сбросить к настройкам по умолчанию",
-        "home": "Главная страница",
+        "resetToDefault": "по умолчанию",
+        "home": "главная страница",
         "comingSoon": "скоро будет…",
         "reset": "сбросить",
         "channel_one": "канал",
         "channel_few": "канала",
         "channel_many": "каналов",
-        "disable": "выключить",
+        "disable": "отключить",
         "sortOrder": "порядок",
         "menu": "меню",
         "restartRequired": "необходим перезапуск приложения",
@@ -91,7 +95,7 @@
         "noResultsFromQuery": "нет результатов",
         "quit": "выйти",
         "expand": "расширить",
-        "search": "Поиск",
+        "search": "поиск",
         "saveAs": "сохранить как",
         "disc": "диск",
         "yes": "да",
@@ -99,7 +103,13 @@
         "size": "размер",
         "biography": "биография",
         "note": "заметка",
-        "none": "нет"
+        "none": "нет",
+        "mbid": "MusicBrainz ID",
+        "reload": "перезагрузить",
+        "preview": "просмотр",
+        "codec": "кодек",
+        "share": "поделиться",
+        "close": "закрыть"
     },
     "entity": {
         "album_one": "альбом",
@@ -161,7 +171,9 @@
                 "gap": "$t(common.gap)",
                 "tableColumns": "столбцы таблицы",
                 "autoFitColumns": "автоматически расставить столбцы",
-                "size": "$t(common.size)"
+                "size": "$t(common.size)",
+                "itemSize": "рамер элементов (px)",
+                "itemGap": "отступ между элементами (px)"
             },
             "label": {
                 "releaseDate": "дата выхода",
@@ -189,7 +201,9 @@
                 "discNumber": "номер диска",
                 "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": {
@@ -204,29 +218,44 @@
             "trackNumber": "трек",
             "genre": "$t(entity.genre_one)",
             "path": "путь",
-            "discNumber": "диск"
+            "discNumber": "диск",
+            "size": "$t(common.size)",
+            "dateAdded": "дата добавления",
+            "album": "альбом",
+            "albumArtist": "исполнитель альбома",
+            "biography": "биография",
+            "codec": "$t(common.codec)",
+            "comment": "комментарий",
+            "albumCount": "$t(entity.album_other)",
+            "artist": "$t(entity.artist_one)",
+            "bitrate": "битрейт",
+            "channels": "$t(common.channel_other)",
+            "bpm": "bpm"
         }
     },
     "error": {
         "remotePortWarning": "перезапустить сервер для применения нового порта",
         "systemFontError": "произошла ошибка при попытке получить системные шрифты",
         "playbackError": "произошла ошибка при попытке проиграть медиа",
-        "endpointNotImplementedError": "запрос {{endpoint}} is not implemented for {{serverType}}",
+        "endpointNotImplementedError": "запрос {{endpoint}} не реализован для {{serverType}}",
         "remotePortError": "произошла ошибка при попытке установить порт удаленного сервера",
         "serverRequired": "необходим сервер",
-        "authenticationFailed": "аутентификация завершилась с ошибкой",
+        "authenticationFailed": "авторизация завершилась с ошибкой",
         "apiRouteError": "невозможно выполнить запрос",
         "genericError": "произошла ошибка",
         "credentialsRequired": "необходимы учётные данные",
-        "sessionExpiredError": "ваш сеанс истек",
-        "remoteEnableError": "ошибка произошла при попытке $t(common.enable) удаленного сервера",
+        "sessionExpiredError": "ваш сеанс истёк",
+        "remoteEnableError": "ошибка произошла при попытке $t(common.enable) удалённый сервер",
         "localFontAccessDenied": "не получилось получить доступ к шрифтам",
         "serverNotSelectedError": "не выбран сервер",
-        "remoteDisableError": "ошибка произошла при попытке $t(common.disable) удаленного сервера",
-        "mpvRequired": "Необходим MPV",
+        "remoteDisableError": "ошибка произошла при попытке $t(common.disable) удалённый сервер",
+        "mpvRequired": "необходим MPV",
         "audioDeviceFetchError": "произошла ошибка с аудиоустройством",
         "invalidServer": "недействительный сервер",
-        "loginRateError": "слишком много попыток входа, пожалуйста, попробуйте еще раз через несколько секунд"
+        "loginRateError": "слишком много попыток входа, пожалуйста, попробуйте ещё раз через несколько секунд",
+        "openError": "не удалось открыть файл",
+        "badAlbum": "вы видите эту страницу из-за того, что эта песня не входит в альбом. скорее всего, вы видите эту ошибку, так как песня находится в корневой директории папки с музыкой. jellyfin группирует треки только по папкам.",
+        "networkError": "возникла ошибка сети"
     },
     "filter": {
         "isCompilation": "сборник",
@@ -237,14 +266,14 @@
         "favorited": "любимый",
         "albumArtist": "$t(entity.albumArtist_one)",
         "isFavorited": "любимый",
-        "bpm": "ударов в мин.",
+        "bpm": "уд./мин.",
         "disc": "диск",
         "biography": "биография",
         "artist": "$t(entity.artist_one)",
-        "duration": "продолжительность",
+        "duration": "длительность",
         "fromYear": "из года",
         "criticRating": "рейтинг критиков",
-        "mostPlayed": "наибольшое кол-во воспроизведений",
+        "mostPlayed": "самое воспроизводимое",
         "comment": "комментировать",
         "playCount": "кол-во воспроизведений",
         "recentlyUpdated": "недавно обновлено",
@@ -253,17 +282,17 @@
         "owner": "$t(common.owner)",
         "title": "название",
         "rating": "рейтинг",
-        "search": "Поиск",
+        "search": "поиск",
         "genre": "$t(entity.genre_one)",
         "recentlyAdded": "недавно добавлено",
         "note": "заметка",
         "name": "название",
         "releaseDate": "дата выхода",
-        "albumCount": "$t(entity.album_other) кол-во",
+        "albumCount": "кол-во $t(entity.album_other)",
         "path": "путь",
         "isRecentlyPlayed": "недавно проигрывалась",
         "releaseYear": "год выхода",
-        "id": "#",
+        "id": "№",
         "songCount": "кол-во песен",
         "isPublic": "публичный",
         "random": "случайный",
@@ -276,16 +305,16 @@
         "repeat_all": "повтор всех",
         "stop": "остановить",
         "repeat": "повтор",
-        "queue_remove": "удалить выделенные",
+        "queue_remove": "удалить выбранное",
         "playRandom": "случайные песни",
         "skip": "пропустить",
         "previous": "предыдущий",
         "toggleFullscreenPlayer": "включить полноэкранный режим",
         "skip_back": "назад",
         "favorite": "любимый",
-        "next": "следующее",
+        "next": "следующий",
         "shuffle": "перемешать",
-        "playbackFetchNoResults": "нет песен",
+        "playbackFetchNoResults": "песни не найдены",
         "playbackFetchInProgress": "загрузка песен..",
         "addNext": "добавить следующий",
         "playbackSpeed": "скорость воспроизведения",
@@ -296,8 +325,8 @@
         "queue_clear": "очистить очередь",
         "muted": "звук отключён",
         "unfavorite": "убрать из любимых",
-        "queue_moveToTop": "переместить выделение вниз",
-        "queue_moveToBottom": "переместить выделение вверх",
+        "queue_moveToTop": "переместить выделенное вниз",
+        "queue_moveToBottom": "переместить выделенное вверх",
         "shuffle_off": "перемешивание выключено",
         "addLast": "добавить последний",
         "mute": "отключить звук",
@@ -329,7 +358,9 @@
                 "unsynchronized": "несинхронизировано",
                 "lyricAlignment": "выравнивание слов песни",
                 "useImageAspectRatio": "использовать соотношение сторон изображения",
-                "lyricGap": "пробел между словами"
+                "lyricGap": "пробел между словами",
+                "dynamicIsImage": "включить фоновое изображение",
+                "dynamicImageBlur": "сила размытия изображения"
             },
             "upNext": "следующее",
             "lyrics": "слова песни",
@@ -363,7 +394,9 @@
             "addFavorite": "$t(action.addToFavorites)",
             "play": "$t(player.play)",
             "numberSelected": "{{count}} выбрано",
-            "removeFromQueue": "$t(action.removeFromQueue)"
+            "removeFromQueue": "$t(action.removeFromQueue)",
+            "showDetails": "получить информацию",
+            "shareItem": "поделиться"
         },
         "home": {
             "mostPlayed": "наибольшее кол-во воспроизведений",
@@ -373,7 +406,7 @@
             "recentlyPlayed": "недавно прослушано"
         },
         "albumDetail": {
-            "moreFromArtist": "больше из жанра $t(entity.genre_one)",
+            "moreFromArtist": "больше от $t(entity.artist_one)",
             "moreFromGeneric": "больше из {{item}}"
         },
         "setting": {
@@ -386,10 +419,13 @@
             "title": "$t(entity.albumArtist_other)"
         },
         "genreList": {
-            "title": "$t(entity.genre_other)"
+            "title": "$t(entity.genre_other)",
+            "showAlbums": "показать $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "показать $t(entity.genre_one) $t(entity.track_other)"
         },
         "trackList": {
-            "title": "$t(entity.track_other)"
+            "title": "$t(entity.track_other)",
+            "genreTracks": "\"{{genre}}\" $t(entity.track_other)"
         },
         "globalSearch": {
             "commands": {
@@ -403,14 +439,32 @@
             "title": "$t(entity.playlist_other)"
         },
         "albumList": {
-            "title": "$t(entity.album_other)"
+            "title": "$t(entity.album_other)",
+            "artistAlbums": "альбомы {{artist}}",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)"
+        },
+        "albumArtistDetail": {
+            "topSongs": "популярные треки",
+            "viewAll": "посмотреть всё",
+            "appearsOn": "появляется в",
+            "viewDiscography": "посмотреть дискографию",
+            "relatedArtists": "похож на $t(entity.artist_other)",
+            "viewAllTracks": "посмотреть все $t(entity.track_other)",
+            "recentReleases": "недавние релизы",
+            "about": "О {{artist}}",
+            "topSongsFrom": "популярные треки из {{title}}"
+        },
+        "itemDetail": {
+            "copyPath": "скопировать путь в буфер обмена",
+            "openFile": "открыть трек в менеджере файлов",
+            "copiedPath": "путь успешно скопирован"
         }
     },
     "form": {
         "deletePlaylist": {
             "title": "удалить $t(entity.playlist_one)",
             "success": "$t(entity.playlist_one) успешно удалён",
-            "input_confirm": "напишите название $t(entity.playlist_one), чтобы подтвердить действие"
+            "input_confirm": "напишите название $t(entity.playlist_one)а для подтверждения"
         },
         "createPlaylist": {
             "input_description": "$t(common.description)",
@@ -425,16 +479,16 @@
             "input_username": "пользователь",
             "input_url": "url",
             "input_password": "пароль",
-            "input_legacyAuthentication": "включить старую аутентификацию",
+            "input_legacyAuthentication": "включить старую авторизацию",
             "input_name": "название сервера",
             "success": "сервер добавлен успешно",
             "input_savePassword": "сохранить пароль",
-            "ignoreSsl": "ignore ssl $t(common.restartRequired)",
-            "ignoreCors": "$t(common.restartRequired)",
+            "ignoreSsl": "игнорирование ssl ($t(common.restartRequired))",
+            "ignoreCors": "игнорирование корсетов ($t(common.restartRequired))",
             "error_savePassword": "произошла ошибка во время попытки сохранения пароля"
         },
         "addToPlaylist": {
-            "success": "добавлено(а) {{message}} $t(entity.track_other) в {{numOfPlaylists}} $t(entity.playlist_other)",
+            "success": "добавлено: $t(entity.trackWithCount, {\"count\": {{message}} }) в $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
             "title": "добавить в $t(entity.playlist_one)",
             "input_skipDuplicates": "пропустить дубликаты",
             "input_playlists": "$t(entity.playlist_other)"
@@ -454,35 +508,191 @@
         },
         "editPlaylist": {
             "title": "редактировать $t(entity.playlist_one)"
+        },
+        "shareItem": {
+            "success": "ссылка скопирована в буфер обмена (нажмите здесь, чтобы открыть)",
+            "expireInvalid": "время истечения срока действия должно быть в будущем",
+            "createFailed": "не удалось создать ссылку для общего доступа (общий доступ включён?)",
+            "allowDownloading": "разрешить скачивание",
+            "setExpiration": "установить срок действия",
+            "description": "описание"
         }
     },
     "setting": {
         "accentColor": "цвет акцента",
         "accentColor_description": "устанавливает цвет акцента для приложения",
         "applicationHotkeys": "горячие клавиши приложения",
-        "crossfadeStyle_description": "Выберите вид эффекта crossfade для аудиоплеера",
-        "enableRemote_description": "Включает сервер удалённого управления для управления воспроизведением с помощью других устройств",
-        "fontType_optionSystem": "Системный шрифт",
-        "mpvExecutablePath_description": "Укажите папку, в которой находится исполняющий файл аудиоплеера MPV",
+        "crossfadeStyle_description": "выберите вид эффекта crossfade для аудиоплеера",
+        "enableRemote_description": "включает сервер удалённого управления для управления воспроизведением с помощью других устройств",
+        "fontType_optionSystem": "системный",
+        "mpvExecutablePath_description": "укажите папку, в которой находится исполняющий файл аудиоплеера MPV. если оставить пустым, будет использоваться путь по умолчанию",
         "crossfadeStyle": "Вид эффекта crossfade",
-        "fontType_optionBuiltIn": "Встроенный в приложение",
+        "fontType_optionBuiltIn": "встроенный",
         "disableLibraryUpdateOnStartup": "Отключить проверку новых версий при запуске приложения",
         "minimizeToTray_description": "Сворачивать приложение в панель уведомлений",
         "audioPlayer_description": "Укажите - какой аудиоплеер использовать для воспроизведения",
-        "disableAutomaticUpdates": "Отключить проверку обновлений",
+        "disableAutomaticUpdates": "отключить проверку обновлений",
         "exitToTray_description": "При закрытии приложения - оно останется в панели уведомлений",
-        "fontType_optionCustom": "Пользовательский шрифт",
-        "remotePassword": "Пароль к серверу удалённого управления",
+        "fontType_optionCustom": "пользовательский",
+        "remotePassword": "пароль к серверу удалённого управления",
         "font": "Шрифт",
         "crossfadeDuration_description": "Укажите длительность эффекта crossfade",
-        "mpvExecutablePath": "Папка с аудиоплеером MPV",
-        "exitToTray": "Сворачивать в панель уведомлений при закрытии",
-        "enableRemote": "Включить сервер удалённого управления",
-        "fontType": "Источник шрифта",
+        "mpvExecutablePath": "папка с аудиоплеером MPV",
+        "exitToTray": "сворачивать в панель уведомлений при закрытии",
+        "enableRemote": "включить сервер удалённого управления",
+        "fontType": "тип шрифта",
         "crossfadeDuration": "Длительность эффекта crossfade",
         "audioPlayer": "Аудиоплеер",
-        "minimizeToTray": "Сворачивать в панель уведомлений",
+        "minimizeToTray": "сворачивать в панель уведомлений",
         "font_description": "Выберите - какой шрифт использовать в приложении",
-        "remoteUsername": "Имя пользователя для доступа к серверу удалённого управления"
+        "remoteUsername": "имя пользователя для доступа к серверу удалённого управления",
+        "buttonSize_description": "размер кнопок в панели управления воспроизведением",
+        "clearCache": "очистить кэш браузера",
+        "clearQueryCache": "очистить кэш feishin",
+        "audioDevice": "устройство воспроизведения",
+        "audioDevice_description": "выберите устройство воспроизведения (только в режиме аудиоплеера web)",
+        "buttonSize": "размер кнопок панели управления воспроизведением",
+        "hotkey_volumeDown": "уменьшить громкость",
+        "playButtonBehavior_optionAddLast": "$t(player.addLast)",
+        "theme_description": "устанавливает тему, которая будет использоваться приложением",
+        "passwordStore": "хранилище паролей/секретов",
+        "sidebarPlaylistList": "список плейлистов в боковой панели",
+        "windowBarStyle_description": "выберите стиль заголовка окна",
+        "followLyric": "следовать тексту трека",
+        "volumeWheelStep": "шаг регулировки громкости колёсиком мыши",
+        "windowBarStyle": "стиль заголовка окна",
+        "hotkey_zoomOut": "уменьшить масштаб",
+        "playbackStyle_optionCrossFade": "затухание",
+        "replayGainMode": "режим {{ReplayGain}}",
+        "replayGainMode_optionAlbum": "$t(entity.album_one)",
+        "replayGainMode_optionNone": "$t(common.none)",
+        "replayGainMode_optionTrack": "$t(entity.track_one)",
+        "clearQueryCache_description": "\"мягкая очистка\" feishin. при выполнении обновляются плейлисты, метаданные треков, но сохранённые тексты треков сбрасываются. настройки, учётные данные и кэшированные изображения сохраняются",
+        "hotkey_favoriteCurrentSong": "добавить $t(common.currentSong) в избранное",
+        "genreBehavior": "поведения страницы жанров",
+        "globalMediaHotkeys": "глобальные мультимедийные горячие клавиши",
+        "hotkey_browserForward": "кнопка браузера \"вперёд\"",
+        "hotkey_favoritePreviousSong": "добавить $t(common.previousSong) в избранное",
+        "hotkey_globalSearch": "глобальный поиск",
+        "hotkey_playbackNext": "следующий трек",
+        "hotkey_playbackPause": "пауза",
+        "hotkey_playbackPlay": "прослушать",
+        "hotkey_playbackPlayPause": "прослушать / пауза",
+        "hotkey_playbackPrevious": "предыдущий трек",
+        "hotkey_playbackStop": "остановить",
+        "hotkey_rate0": "очистить оценку",
+        "hotkey_rate1": "оценить в 1 звезду",
+        "hotkey_rate2": "оценить в 2 звезды",
+        "hotkey_rate3": "оценить в 3 звезды",
+        "hotkey_rate4": "оценить в 4 звезды",
+        "hotkey_rate5": "оценить в 5 звёзд",
+        "hotkey_skipForward": "перемотать вперёд",
+        "hotkey_toggleCurrentSongFavorite": "добавить/удалить $t(common.currentSong) в избранное",
+        "hotkey_toggleFullScreenPlayer": "включение/выключение полноэкранного плеера",
+        "hotkey_togglePreviousSongFavorite": "добавить/удалить $t(common.previousSong) в избранное",
+        "hotkey_toggleRepeat": "переключить режим повтора",
+        "hotkey_toggleShuffle": "переключить перемешивание",
+        "hotkey_unfavoriteCurrentSong": "удалить $t(common.currentSong) из избранного",
+        "hotkey_unfavoritePreviousSong": "удалить $t(common.previousSong) из избранного",
+        "hotkey_volumeUp": "увеличить громкость",
+        "hotkey_zoomIn": "увеличить масштаб",
+        "language": "язык",
+        "lyricFetchProvider_description": "выберите источники для получения текстов песен. порядок источников соответствует очередности их запросов",
+        "minimumScrobblePercentage_description": "минимальный процент прослушивания трека, прежде чем он будет засчитан как прослушанный",
+        "minimumScrobbleSeconds_description": "минимальное время прослушивания трека в секундах, прежде чем он будет засчитан как прослушанный",
+        "playbackStyle_optionNormal": "нормальный",
+        "mpvExtraParameters": "параметры mpv",
+        "mpvExtraParameters_help": "по одному на строчку",
+        "playbackStyle_description": "выберите стиль воспроизведения, который будет использоваться аудиоплеером",
+        "playButtonBehavior_description": "устанавливает поведение кнопки воспроизведения при добавлении треков в очередь",
+        "playButtonBehavior": "поведение кнопки воспроизведения",
+        "playButtonBehavior_optionAddNext": "$t(player.addNext)",
+        "playButtonBehavior_optionPlay": "$t(player.play)",
+        "playerAlbumArtResolution_description": "разрешение большой версии обложки альбома в проигрывателе. при большем разрешении она выглядит более четкой, но может замедлить загрузку. по умолчанию равно 0 - устанавливает разрешение автоматически",
+        "remotePort": "порт сервера удалённого управления",
+        "remotePort_description": "устанавливает порт для сервера удалённого управления",
+        "replayGainClipping": "{{ReplayGain}} клиппинг",
+        "replayGainFallback": "{{ReplayGain}} по умолчанию",
+        "sampleRate_description": "выберите выходную частоту дискретизации, которая будет использоваться, если выбранная частота дискретизации отличается от частоты дискретизации текущего трека. при значении меньше 8000 будет использоваться частота по умолчанию",
+        "savePlayQueue_description": "сохранять очередь воспроизведения при закрытии приложения и восстанавливать при запуске приложения",
+        "showSkipButton_description": "показывать или скрывать кнопки перемотки на панели управления воспроизведением",
+        "sidebarConfiguration": "конфигурация боковой панели",
+        "sidebarConfiguration_description": "выбрать элементы и порядок их отображения на боковой панели",
+        "sidebarCollapsedNavigation": "кнопки навигации в боковой панели (в свёрнутом режиме)",
+        "showSkipButtons": "показывать кнопки перемотки",
+        "showSkipButtons_description": "показывать или скрывать кнопки перемотки на панели управления воспроизведением",
+        "sidebarPlaylistList_description": "показать или скрыть список плейлистов на боковой панели",
+        "skipDuration": "время перемотки",
+        "skipDuration_description": "задает время перемотки при использовании кнопок перемотки на панели проигрывателя",
+        "useSystemTheme": "использовать тему системы",
+        "themeLight": "тема (светлая)",
+        "themeLight_description": "устанавливает светлую тему приложения",
+        "useSystemTheme_description": "использует тему, заданную в системе (светлую/тёмную)",
+        "zoom": "процент масштабирования",
+        "zoom_description": "устанавливает процент масштабирования приложения",
+        "floatingQueueArea": "показать область наведения для всплывающей очереди",
+        "genreBehavior_description": "определяет, что отобразится при открытии на жанр — список треков или альбомов",
+        "globalMediaHotkeys_description": "включить или отключить использование системных мультимедийных горячих клавиш для управления воспроизведением",
+        "homeConfiguration_description": "позволяет настроить видимость и порядок элементов на домашней странице",
+        "hotkey_toggleQueue": "показать/скрыть очередь воспроизведения",
+        "imageAspectRatio": "использовать оригинальное соотношение сторон обложки",
+        "imageAspectRatio_description": "если эта опция включена, обложки будут отображаться в соответствии с их собственным соотношением сторон. для обложек не 1:1 оставшееся пространство будет пустым",
+        "minimumScrobblePercentage": "минимальное время для скробблинга (в процентах)",
+        "playbackStyle": "стиль воспроизведения",
+        "playerAlbumArtResolution": "разрешение обложки альбома",
+        "remotePassword_description": "задает пароль для сервера удалённого управления. По умолчанию эти учетные данные передаются небезопасным способом, поэтому следует использовать уникальный пароль, который вам не важен",
+        "replayGainClipping_description": "Предотвращение клиппинга, вызванного {{ReplayGain}}, путём автоматического снижения усиления",
+        "replayGainFallback_description": "усиление в db для применения, если у файла нет тегов {{ReplayGain}}",
+        "replayGainMode_description": "регулировать усиление громкости в соответствии со значениями {{ReplayGain}}, хранящимися в метаданных файла",
+        "savePlayQueue": "сохранять очередь воспроизведения",
+        "showSkipButton": "показывать кнопки перемотки",
+        "theme": "тема",
+        "themeDark": "тема (тёмная)",
+        "externalLinks": "показывать ссылки на внешние ресурсы",
+        "gaplessAudio": "бесшовное воспроизведение",
+        "gaplessAudio_optionWeak": "слабое (рекомендуется)",
+        "gaplessAudio_description": "устанавливает настройку mpv для бесшовного воспроизведение",
+        "hotkey_browserBack": "кнопка браузера \"назад\"",
+        "hotkey_localSearch": "поиск на странице",
+        "hotkey_skipBackward": "перемотать назад",
+        "startMinimized": "запуск в свёрнутом режиме",
+        "themeDark_description": "устанавливает тёмную тему приложения",
+        "hotkey_volumeMute": "отключить звук",
+        "clearCache_description": "\"жесткая очистка\" feishin. кроме очистки кэша feishin, также очищает кэш браузера (сохранённые картинки и другие ресурсы). учётные данные и настройки сохраняются",
+        "clearCacheSuccess": "кэш успешно удалён",
+        "customFontPath": "путь к пользовательскому шрифту",
+        "customFontPath_description": "укажите путь к пользовательскому шрифту, который будет использоваться в приложении",
+        "externalLinks_description": "включает отображение внешних ссылок (Last.fm, MusicBrainz) на страницах альбомов и артистов",
+        "floatingQueueArea_description": "включить отображение иконки наведения на правой части экрана, чтобы показать очередь воспроизведения",
+        "followLyric_description": "прокручивать текст трека до текущей позиции воспроизведения",
+        "language_description": "устанавливает язык приложения ($t(common.restartRequired))",
+        "lyricFetch_description": "получать тексты треков из различных интернет-источников",
+        "lyricFetchProvider": "источник текстов треков",
+        "minimumScrobbleSeconds": "минимальное время для скробблинга (в секундах)",
+        "replayGainPreamp": "предусиление {{ReplayGain}} (дБ)",
+        "sidebarCollapsedNavigation_description": "показать или скрыть кнопки навигации в свёрнутой боковой панели",
+        "homeConfiguration": "конфигурация домашней страницы",
+        "remoteUsername_description": "задает имя пользователя для сервера удалённого управления. если имя пользователя и пароль пусты, аутентификация будет отключена",
+        "scrobble": "скробблинг",
+        "replayGainPreamp_description": "настройка усиления предусилителя, применяемого к значениям {{ReplayGain}}",
+        "passwordStore_description": "какое хранилище паролей/секретов использовать. измените это значение, если у вас есть проблемы с хранением паролей.",
+        "lyricFetch": "получать тексты треков из интернета",
+        "sampleRate": "частота дискретизации",
+        "scrobble_description": "скробблинг треков на вашем медиасервере",
+        "startMinimized_description": "запуск приложения в области уведомлений",
+        "volumeWheelStep_description": "количество громкости, изменяемое при прокрутке колёсика мыши над ползунком громкости",
+        "discordRichPresence": "состояние профиля {{discord}}",
+        "discordApplicationId": "{{discord}} application id",
+        "discordApplicationId_description": "application id приложения {{discord}} которое будет отображаться в статусе профиля (по умолчанию {{defaultId}})",
+        "discordIdleStatus": "показывать состояние простоя",
+        "discordIdleStatus_description": "если включено, то обновляет статус, когда пользователь бездействует",
+        "discordUpdateInterval": "интервал обновления статуса профиля {{discord}}",
+        "discordUpdateInterval_description": "время в секундах между каждым обновлением (минимум 15 секунд)",
+        "lyricOffset_description": "Смещение появления текста треков на указанное количество миллисекунд",
+        "skipPlaylistPage": "пропустить страницу плейлиста",
+        "applicationHotkeys_description": "настройка горячих клавиш приложения. включите чекбокс, чтобы сделать горячую клавишу глобальной (только для ПК)",
+        "fontType_description": "встроенный позволяет выбрать один из шрифтов, предоставляемых Feishin. системный позволяет выбрать любой шрифт, предоставляемый вашей операционной системой. пользовательский позволяет выбрать свой собственный шрифт",
+        "discordRichPresence_description": "включить статус воспроизведения в статус профиля в {{discord}}. Ключи изображений: {{icon}}, {{playing}} и {{paused}} ",
+        "lyricOffset": "синхронизация текста треков (мс)"
     }
 }

src/i18n/locales/sr.json

@@ -359,7 +359,8 @@
             "albumArtist": "album artist",
             "path": "putanja",
             "discNumber": "disk",
-            "channels": "$t(common.channel_other)"
+            "channels": "$t(common.channel_other)",
+            "size": "$t(common.size)"
         }
     },
     "error": {

src/i18n/locales/zh-Hans.json

@@ -16,7 +16,11 @@
         "setRating": "评分",
         "toggleSmartPlaylistEditor": "切换$t(entity.smartPlaylist)编辑器",
         "removeFromFavorites": "从$t(entity.favorite_other)移除",
-        "goToPage": "转到页面"
+        "goToPage": "转到页面",
+        "openIn": {
+            "lastfm": "在 Last.fm 中打开",
+            "musicbrainz": "在 MusicBrainz 中打开"
+        }
     },
     "common": {
         "increase": "增高",
@@ -93,7 +97,17 @@
         "yes": "是",
         "size": "大小",
         "areYouSure": "是否继续？",
-        "note": "注释"
+        "note": "注释",
+        "close": "关闭",
+        "albumPeak": "专辑峰值",
+        "mbid": "MusicBrainz ID",
+        "reload": "重新加载",
+        "trackGain": "音轨增益",
+        "trackPeak": "音轨峰值",
+        "albumGain": "专辑增益",
+        "codec": "编解码器",
+        "share": "分享",
+        "preview": "预览"
     },
     "entity": {
         "albumArtist_other": "专辑艺术家",
@@ -142,7 +156,8 @@
         "mute": "静音",
         "skip_forward": "向前跳过",
         "playbackSpeed": "播放速度",
-        "pause": "暂停"
+        "pause": "暂停",
+        "playSimilarSongs": "播放类似的曲目"
     },
     "setting": {
         "crossfadeStyle_description": "选择用于音频播放器的淡入淡出风格",
@@ -310,7 +325,25 @@
         "buttonSize_description": "播放器栏按钮大小",
         "clearCache_description": "feishin的“硬清除”。除了清除feishin的缓存，清空浏览器缓存（保存的图像和其他资源）。会保留服务器凭据和设置",
         "clearQueryCache_description": "feishin的“软清除”。这将会刷新播放列表、元数据并重置保存的歌词。会保留设置、服务器凭据和缓存图像",
-        "clearQueryCache": "清除feishin缓存"
+        "clearQueryCache": "清除feishin缓存",
+        "externalLinks": "显示外部链接",
+        "externalLinks_description": "允许在艺术家/专辑页面上显示外部链接（Last.fm、MusicBrainz）",
+        "mpvExtraParameters_help": "每行一个",
+        "startMinimized": "启动最小化",
+        "startMinimized_description": "在系统托盘中启动应用程序",
+        "passwordStore_description": "使用什么密码/秘密存储。如果您在存储密码时遇到问题，请更改此设置。",
+        "clearCacheSuccess": "缓存清除成功",
+        "playerAlbumArtResolution": "播放器专辑封面分辨率",
+        "playerAlbumArtResolution_description": "大型播放器专辑封面预览的分辨率。较大使其看起来更清晰，但可能会减慢加载速度。默认为0，表示自动",
+        "genreBehavior": "类型页面默认行为",
+        "genreBehavior_description": "确定单击流派是否默认在曲目或专辑列表中打开",
+        "homeConfiguration": "主页配置",
+        "homeConfiguration_description": "配置主页上显示的项目以及显示顺序",
+        "passwordStore": "密码/秘密存储",
+        "homeFeature_description": "控制是否在主页上显示大型特色轮播",
+        "homeFeature": "首页 精选 轮播",
+        "imageAspectRatio": "使用原生封面艺术纵横比",
+        "imageAspectRatio_description": "如果启用，封面艺术将使用其原生纵横比显示。对于不是1:1的艺术，剩余的空间将是空的"
     },
     "error": {
         "remotePortWarning": "重启服务器使新端口生效",
@@ -331,7 +364,10 @@
         "mpvRequired": "需要 MPV",
         "audioDeviceFetchError": "无法获取音频设备",
         "invalidServer": "无效的服务器",
-        "loginRateError": "登录请求尝试次数过多，请稍后再试"
+        "loginRateError": "登录请求尝试次数过多，请稍后再试",
+        "badAlbum": "您看到此页面是因为这首歌不是专辑的一部分。如果您的音乐文件夹顶层有一首歌曲，您很可能会遇到此问题。jellyfin 仅对位于文件夹中的曲目进行分组。",
+        "networkError": "发生网络错误",
+        "openError": "无法打开文件"
     },
     "filter": {
         "mostPlayed": "播放最多",
@@ -389,7 +425,8 @@
             "settings": "$t(common.setting_other)",
             "home": "$t(common.home)",
             "artists": "$t(entity.artist_other)",
-            "albumArtists": "$t(entity.albumArtist_other)"
+            "albumArtists": "$t(entity.albumArtist_other)",
+            "shared": "共享 $t(entity.playlist_other)"
         },
         "fullscreenPlayer": {
             "config": {
@@ -403,7 +440,9 @@
                 "lyricAlignment": "歌词对齐",
                 "useImageAspectRatio": "使用图片纵横比",
                 "lyricGap": "歌词间距",
-                "followCurrentLyric": "跟随当前歌词"
+                "followCurrentLyric": "跟随当前歌词",
+                "dynamicImageBlur": "图像模糊大小",
+                "dynamicIsImage": "启用背景图像"
             },
             "lyrics": "歌词",
             "related": "相关",
@@ -462,22 +501,47 @@
             "addNext": "$t(player.addNext)",
             "deselectAll": "$t(action.deselectAll)",
             "addLast": "$t(player.addLast)",
-            "addFavorite": "$t(action.addToFavorites)"
+            "addFavorite": "$t(action.addToFavorites)",
+            "showDetails": "获取信息",
+            "shareItem": "分享项目",
+            "playSimilarSongs": "$t(player.playSimilarSongs)"
         },
         "trackList": {
-            "title": "$t(entity.track_other)"
+            "title": "$t(entity.track_other)",
+            "genreTracks": "\"{{genre}}\" $t(entity.track_other)",
+            "artistTracks": "{{artist}} 的曲目"
         },
         "albumArtistList": {
             "title": "$t(entity.albumArtist_other)"
         },
         "albumList": {
-            "title": "$t(entity.album_other)"
+            "title": "$t(entity.album_other)",
+            "artistAlbums": "{{artist}} 的专辑",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)"
         },
         "genreList": {
-            "title": "$t(entity.genre_other)"
+            "title": "$t(entity.genre_other)",
+            "showAlbums": "显示 $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "显示 $t(entity.genre_one) $t(entity.track_other)"
         },
         "playlistList": {
             "title": "$t(entity.playlist_other)"
+        },
+        "albumArtistDetail": {
+            "recentReleases": "最近发布",
+            "viewDiscography": "查看唱片目录",
+            "relatedArtists": "相关 $t(entity.artist_other)",
+            "topSongs": "热门歌曲",
+            "topSongsFrom": "{{title}} 的热门歌曲",
+            "viewAllTracks": "查看所有 $t(entity.track_other)",
+            "about": "关于 {{artist}}",
+            "appearsOn": "出现在",
+            "viewAll": "查看全部"
+        },
+        "itemDetail": {
+            "copyPath": "将路径复制到剪贴板",
+            "copiedPath": "路径复制成功",
+            "openFile": "在文件管理器中显示曲目"
         }
     },
     "form": {
@@ -528,6 +592,14 @@
             "title": "搜索歌词",
             "input_name": "$t(common.name)",
             "input_artist": "$t(entity.artist_one)"
+        },
+        "shareItem": {
+            "expireInvalid": "过期时间必须是将来的时间",
+            "createFailed": "创建共享失败（是否启用共享？）",
+            "allowDownloading": "允许下载",
+            "description": "描述",
+            "setExpiration": "设置过期时间",
+            "success": "共享链接已复制到剪贴板（或单击此处打开）"
         }
     },
     "table": {
@@ -537,7 +609,9 @@
                 "gap": "$t(common.gap)",
                 "tableColumns": "列",
                 "autoFitColumns": "列宽自适应",
-                "size": "$t(common.size)"
+                "size": "$t(common.size)",
+                "itemGap": "项目间隙（px）",
+                "itemSize": "项目大小 (px)"
             },
             "view": {
                 "table": "表格",
@@ -570,7 +644,9 @@
                 "favorite": "$t(common.favorite)",
                 "year": "$t(common.year)",
                 "albumArtist": "$t(entity.albumArtist_one)",
-                "titleCombined": "$t(common.title)（合并）"
+                "titleCombined": "$t(common.title)（合并）",
+                "codec": "$t(common.codec)",
+                "songCount": "$t(entity.track_other)"
             }
         },
         "column": {
@@ -595,7 +671,9 @@
             "albumArtist": "专辑艺术家",
             "path": "路径",
             "channels": "$t(common.channel_other)",
-            "discNumber": "盘"
+            "discNumber": "盘",
+            "size": "$t(common.size)",
+            "codec": "$t(common.codec)"
         }
     }
 }

src/i18n/locales/zh-Hant.json

@@ -463,7 +463,8 @@
             "bpm": "bpm",
             "songCount": "$t(entity.track_other)",
             "title": "標題",
-            "trackNumber": "音軌編號"
+            "trackNumber": "音軌編號",
+            "size": "$t(common.size)"
         }
     },
     "action": {

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

@@ -72,7 +72,7 @@ const getRemoteLyrics = async (song: QueueSong) => {
         const params = {
             album: song.album || song.name,
             artist: song.artistName,
-            duration: song.duration,
+            duration: song.duration / 1000.0,
             name: song.name,
         };
         const response = await FETCHERS[source](params);

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

@@ -1,4 +1,6 @@
 import console from 'console';
+import { rm } from 'fs/promises';
+import { pid } from 'node:process';
 import { app, ipcMain } from 'electron';
 import uniq from 'lodash/uniq';
 import MpvAPI from 'node-mpv';
@@ -18,6 +20,7 @@ declare module 'node-mpv';
 // }
 
 let mpvInstance: MpvAPI | null = null;
+const socketPath = isWindows() ? `\\\\.\\pipe\\mpvserver-${pid}` : `/tmp/node-mpv-${pid}.sock`;
 
 const NodeMpvErrorCode = {
     0: 'Unable to load file or stream',
@@ -62,7 +65,6 @@ const mpvLog = (
 };
 
 const MPV_BINARY_PATH = store.get('mpv_path') as string | undefined;
-const isDevelopment = process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
 
 const prefetchPlaylistParams = [
     '--prefetch-playlist=no',
@@ -89,14 +91,12 @@ const createMpv = async (data: {
 
     const params = uniq([...DEFAULT_MPV_PARAMETERS(extraParameters), ...(extraParameters || [])]);
 
-    const extra = isDevelopment ? '-dev' : '';
-
     const mpv = new MpvAPI(
         {
             audio_only: true,
             auto_restart: false,
             binary: binaryPath || MPV_BINARY_PATH || undefined,
-            socket: isWindows() ? `\\\\.\\pipe\\mpvserver${extra}` : `/tmp/node-mpv${extra}.sock`,
+            socket: socketPath,
             time_update: 1,
         },
         params,
@@ -149,6 +149,16 @@ export const getMpvInstance = () => {
     return mpvInstance;
 };
 
+const quit = async () => {
+    const instance = getMpvInstance();
+    if (instance) {
+        await instance.quit();
+        if (!isWindows()) {
+            await rm(socketPath);
+        }
+    }
+};
+
 const setAudioPlayerFallback = (isError: boolean) => {
     getMainWindow()?.webContents.send('renderer-player-fallback', isError);
 };
@@ -180,7 +190,11 @@ ipcMain.handle(
 
             // Clean up previous mpv instance
             getMpvInstance()?.stop();
-            getMpvInstance()?.quit();
+            getMpvInstance()
+                ?.quit()
+                .catch((error) => {
+                    mpvLog({ action: 'Failed to quit existing MPV' }, error);
+                });
             mpvInstance = null;
 
             mpvInstance = await createMpv(data);
@@ -211,11 +225,12 @@ ipcMain.handle(
 
 ipcMain.on('player-quit', async () => {
     try {
-        getMpvInstance()?.stop();
-        getMpvInstance()?.quit();
-        mpvInstance = null;
+        await getMpvInstance()?.stop();
+        await quit();
     } catch (err: NodeMpvError | any) {
         mpvLog({ action: 'Failed to quit mpv' }, err);
+    } finally {
+        mpvInstance = null;
     }
 });
 
@@ -301,7 +316,7 @@ ipcMain.on('player-seek-to', async (_event, time: number) => {
 
 // Sets the queue in position 0 and 1 to the given data. Used when manually starting a song or using the next/prev buttons
 ipcMain.on('player-set-queue', async (_event, data: PlayerData, pause?: boolean) => {
-    if (!data.queue.current && !data.queue.next) {
+    if (!data.queue.current?.id && !data.queue.next?.id) {
         try {
             await getMpvInstance()?.clearPlaylist();
             await getMpvInstance()?.pause();
@@ -312,14 +327,14 @@ ipcMain.on('player-set-queue', async (_event, data: PlayerData, pause?: boolean)
     }
 
     try {
-        if (data.queue.current) {
+        if (data.queue.current?.streamUrl) {
             await getMpvInstance()
                 ?.load(data.queue.current.streamUrl, 'replace')
                 .catch(() => {
                     getMpvInstance()?.play();
                 });
 
-            if (data.queue.next) {
+            if (data.queue.next?.streamUrl) {
                 await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
             }
         }
@@ -348,7 +363,7 @@ ipcMain.on('player-set-queue-next', async (_event, data: PlayerData) => {
             await getMpvInstance()?.playlistRemove(1);
         }
 
-        if (data.queue.next) {
+        if (data.queue.next?.streamUrl) {
             await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
         }
     } catch (err: NodeMpvError | any) {
@@ -368,7 +383,7 @@ ipcMain.on('player-auto-next', async (_event, data: PlayerData) => {
                 getMpvInstance()?.pause();
             });
 
-        if (data.queue.next) {
+        if (data.queue.next?.streamUrl) {
             await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
         }
     } catch (err: NodeMpvError | any) {
@@ -407,11 +422,34 @@ ipcMain.handle('player-get-time', async (): Promise<number | undefined> => {
     }
 });
 
-app.on('before-quit', () => {
-    getMpvInstance()?.stop();
-    getMpvInstance()?.quit();
-});
+enum MpvState {
+    STARTED,
+    IN_PROGRESS,
+    DONE,
+}
 
-app.on('window-all-closed', () => {
-    getMpvInstance()?.quit();
+let mpvState = MpvState.STARTED;
+
+app.on('before-quit', async (event) => {
+    switch (mpvState) {
+        case MpvState.DONE:
+            return;
+        case MpvState.IN_PROGRESS:
+            event.preventDefault();
+            break;
+        case MpvState.STARTED: {
+            try {
+                mpvState = MpvState.IN_PROGRESS;
+                event.preventDefault();
+                await getMpvInstance()?.stop();
+                await quit();
+            } catch (err: NodeMpvError | any) {
+                mpvLog({ action: `Failed to cleanly before-quit` }, err);
+            } finally {
+                mpvState = MpvState.DONE;
+                app.quit();
+            }
+            break;
+        }
+    }
 });

src/main/features/core/player/media-keys.ts

@@ -6,18 +6,20 @@ import { store } from '../settings';
 export const enableMediaKeys = (window: BrowserWindow | null) => {
     if (isMacOS()) {
         const shouldPrompt = store.get('should_prompt_accessibility', true) as boolean;
+        const shownWarning = store.get('shown_accessibility_warning', false) as boolean;
         const trusted = systemPreferences.isTrustedAccessibilityClient(shouldPrompt);
 
         if (shouldPrompt) {
             store.set('should_prompt_accessibility', false);
         }
 
-        if (!trusted) {
+        if (!trusted && !shownWarning) {
             window?.webContents.send('toast-from-main', {
                 message:
                     'Feishin is not a trusted accessibility client. Media keys will not work until this setting is changed',
                 type: 'warning',
             });
+            store.set('shown_accessibility_warning', true);
         }
     }
 

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

@@ -8,9 +8,10 @@ import { app, ipcMain } from 'electron';
 import { Server as WsServer, WebSocketServer, WebSocket } from 'ws';
 import manifest from './manifest.json';
 import { ClientEvent, ServerEvent } from '../../../../remote/types';
-import { PlayerRepeat, SongUpdate } from '../../../../renderer/types';
+import { PlayerRepeat, PlayerStatus, SongState } from '../../../../renderer/types';
 import { getMainWindow } from '../../../main';
 import { isLinux } from '../../../utils';
+import type { QueueSong } from '/@/renderer/api/types';
 
 let mprisPlayer: any | undefined;
 
@@ -100,9 +101,7 @@ enum Encoding {
 const GZIP_REGEX = /\bgzip\b/;
 const ZLIB_REGEX = /bdeflate\b/;
 
-let currentSong: SongUpdate = {
-    currentTime: 0,
-};
+const currentState: SongState = {};
 
 const getEncoding = (encoding: string | string[]): Encoding => {
     const encodingArray = Array.isArray(encoding) ? encoding : [encoding];
@@ -388,7 +387,7 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                                 break;
                             }
                             case 'proxy': {
-                                const toFetch = currentSong.song?.imageUrl?.replaceAll(
+                                const toFetch = currentState.song?.imageUrl?.replaceAll(
                                     /&(size|width|height=\d+)/g,
                                     '',
                                 );
@@ -438,9 +437,9 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                                     volume = 0;
                                 }
 
-                                currentSong.volume = volume;
+                                currentState.volume = volume;
 
-                                broadcast({ data: { volume }, event: 'song' });
+                                broadcast({ data: volume, event: 'volume' });
                                 getMainWindow()?.webContents.send('request-volume', {
                                     volume,
                                 });
@@ -452,22 +451,22 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                             }
                             case 'favorite': {
                                 const { favorite, id } = json;
-                                if (id && id === currentSong.song?.id) {
+                                if (id && id === currentState.song?.id) {
                                     getMainWindow()?.webContents.send('request-favorite', {
                                         favorite,
                                         id,
-                                        serverId: currentSong.song.serverId,
+                                        serverId: currentState.song.serverId,
                                     });
                                 }
                                 break;
                             }
                             case 'rating': {
                                 const { rating, id } = json;
-                                if (id && id === currentSong.song?.id) {
+                                if (id && id === currentState.song?.id) {
                                     getMainWindow()?.webContents.send('request-rating', {
                                         id,
                                         rating,
-                                        serverId: currentSong.song.serverId,
+                                        serverId: currentState.song.serverId,
                                     });
                                 }
                                 break;
@@ -482,7 +481,7 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                     ws.alive = true;
                 });
 
-                ws.send(JSON.stringify({ data: currentSong, event: 'song' }));
+                ws.send(JSON.stringify({ data: currentState, event: 'state' }));
             });
 
             const heartBeat = setInterval(() => {
@@ -564,13 +563,13 @@ ipcMain.on('remote-username', (_event, username: string) => {
 });
 
 ipcMain.on('update-favorite', (_event, favorite: boolean, serverId: string, ids: string[]) => {
-    if (currentSong.song?.serverId !== serverId) return;
+    if (currentState.song?.serverId !== serverId) return;
 
-    const id = currentSong.song.id;
+    const id = currentState.song.id;
 
     for (const songId of ids) {
         if (songId === id) {
-            currentSong.song.userFavorite = favorite;
+            currentState.song.userFavorite = favorite;
             broadcast({ data: { favorite, id: songId }, event: 'favorite' });
             return;
         }
@@ -578,13 +577,13 @@ ipcMain.on('update-favorite', (_event, favorite: boolean, serverId: string, ids:
 });
 
 ipcMain.on('update-rating', (_event, rating: number, serverId: string, ids: string[]) => {
-    if (currentSong.song?.serverId !== serverId) return;
+    if (currentState.song?.serverId !== serverId) return;
 
-    const id = currentSong.song.id;
+    const id = currentState.song.id;
 
     for (const songId of ids) {
         if (songId === id) {
-            currentSong.song.userRating = rating;
+            currentState.song.userRating = rating;
             broadcast({ data: { id: songId, rating }, event: 'rating' });
             return;
         }
@@ -592,42 +591,32 @@ ipcMain.on('update-rating', (_event, rating: number, serverId: string, ids: stri
 });
 
 ipcMain.on('update-repeat', (_event, repeat: PlayerRepeat) => {
-    currentSong.repeat = repeat;
-    broadcast({ data: { repeat }, event: 'song' });
+    currentState.repeat = repeat;
+    broadcast({ data: repeat, event: 'repeat' });
 });
 
 ipcMain.on('update-shuffle', (_event, shuffle: boolean) => {
-    currentSong.shuffle = shuffle;
-    broadcast({ data: { shuffle }, event: 'song' });
+    currentState.shuffle = shuffle;
+    broadcast({ data: shuffle, event: 'shuffle' });
 });
 
-ipcMain.on('update-song', (_event, data: SongUpdate) => {
-    const { song, ...rest } = data;
-    const songChanged = song?.id !== currentSong.song?.id;
+ipcMain.on('update-playback', (_event, status: PlayerStatus) => {
+    currentState.status = status;
+    broadcast({ data: status, event: 'playback' });
+});
 
-    if (!song?.id) {
-        currentSong = {
-            ...currentSong,
-            ...data,
-            song: undefined,
-        };
-    } else {
-        currentSong = {
-            ...currentSong,
-            ...data,
-        };
-    }
+ipcMain.on('update-song', (_event, song: QueueSong | undefined) => {
+    const songChanged = song?.id !== currentState.song?.id;
+    currentState.song = song;
 
     if (songChanged) {
-        broadcast({ data: { ...rest, song: song || null }, event: 'song' });
-    } else {
-        broadcast({ data: rest, event: 'song' });
+        broadcast({ data: song || null, event: 'song' });
     }
 });
 
 ipcMain.on('update-volume', (_event, volume: number) => {
-    currentSong.volume = volume;
-    broadcast({ data: { volume }, event: 'song' });
+    currentState.volume = volume;
+    broadcast({ data: volume, event: 'volume' });
 });
 
 if (mprisPlayer) {
@@ -639,13 +628,13 @@ if (mprisPlayer) {
                 ? PlayerRepeat.ONE
                 : PlayerRepeat.NONE;
 
-        currentSong.repeat = repeat;
-        broadcast({ data: { repeat }, event: 'song' });
+        currentState.repeat = repeat;
+        broadcast({ data: repeat, event: 'repeat' });
     });
 
     mprisPlayer.on('shuffle', (shuffle: boolean) => {
-        currentSong.shuffle = shuffle;
-        broadcast({ data: { shuffle }, event: 'song' });
+        currentState.shuffle = shuffle;
+        broadcast({ data: shuffle, event: 'shuffle' });
     });
 
     mprisPlayer.on('volume', (vol: number) => {
@@ -656,7 +645,7 @@ if (mprisPlayer) {
         } else if (volume < 0) {
             volume = 0;
         }
-        currentSong.volume = volume;
-        broadcast({ data: { volume }, event: 'song' });
+        currentState.volume = volume;
+        broadcast({ data: volume, event: 'volume' });
     });
 }

src/main/features/linux/mpris.ts

@@ -1,7 +1,8 @@
 import { ipcMain } from 'electron';
 import Player from 'mpris-service';
-import { PlayerRepeat, PlayerStatus, SongUpdate } from '../../../renderer/types';
+import { PlayerRepeat, PlayerStatus } from '../../../renderer/types';
 import { getMainWindow } from '../../main';
+import { QueueSong } from '/@/renderer/api/types';
 
 const mprisPlayer = Player({
     identity: 'Feishin',
@@ -18,22 +19,29 @@ mprisPlayer.on('quit', () => {
     process.exit();
 });
 
+const hasData = (): boolean => {
+    return mprisPlayer.metadata && !!mprisPlayer.metadata['mpris:length'];
+};
+
 mprisPlayer.on('stop', () => {
     getMainWindow()?.webContents.send('renderer-player-stop');
     mprisPlayer.playbackStatus = 'Paused';
 });
 
 mprisPlayer.on('pause', () => {
+    if (!hasData()) return;
     getMainWindow()?.webContents.send('renderer-player-pause');
     mprisPlayer.playbackStatus = 'Paused';
 });
 
 mprisPlayer.on('play', () => {
+    if (!hasData()) return;
     getMainWindow()?.webContents.send('renderer-player-play');
     mprisPlayer.playbackStatus = 'Playing';
 });
 
 mprisPlayer.on('playpause', () => {
+    if (!hasData()) return;
     getMainWindow()?.webContents.send('renderer-player-play-pause');
     if (mprisPlayer.playbackStatus !== 'Playing') {
         mprisPlayer.playbackStatus = 'Playing';
@@ -43,6 +51,7 @@ mprisPlayer.on('playpause', () => {
 });
 
 mprisPlayer.on('next', () => {
+    if (!hasData()) return;
     getMainWindow()?.webContents.send('renderer-player-next');
 
     if (mprisPlayer.playbackStatus !== 'Playing') {
@@ -51,6 +60,7 @@ mprisPlayer.on('next', () => {
 });
 
 mprisPlayer.on('previous', () => {
+    if (!hasData()) return;
     getMainWindow()?.webContents.send('renderer-player-previous');
 
     if (mprisPlayer.playbackStatus !== 'Playing') {
@@ -108,6 +118,10 @@ ipcMain.on('update-volume', (_event, volume) => {
     mprisPlayer.volume = Number(volume) / 100;
 });
 
+ipcMain.on('update-playback', (_event, status: PlayerStatus) => {
+    mprisPlayer.playbackStatus = status === PlayerStatus.PLAYING ? 'Playing' : 'Paused';
+});
+
 const REPEAT_TO_MPRIS: Record<PlayerRepeat, string> = {
     [PlayerRepeat.ALL]: 'Playlist',
     [PlayerRepeat.ONE]: 'Track',
@@ -122,22 +136,13 @@ ipcMain.on('update-shuffle', (_event, shuffle: boolean) => {
     mprisPlayer.shuffle = shuffle;
 });
 
-ipcMain.on('update-song', (_event, args: SongUpdate) => {
-    const { song, status, repeat, shuffle } = args || {};
-
+ipcMain.on('update-song', (_event, song: QueueSong | undefined) => {
     try {
-        mprisPlayer.playbackStatus = status === PlayerStatus.PLAYING ? 'Playing' : 'Paused';
-
-        if (repeat) {
-            mprisPlayer.loopStatus = REPEAT_TO_MPRIS[repeat];
+        if (!song?.id) {
+            mprisPlayer.metadata = {};
+            return;
         }
 
-        if (shuffle) {
-            mprisPlayer.shuffle = shuffle;
-        }
-
-        if (!song) return;
-
         const upsizedImageUrl = song.imageUrl
             ? song.imageUrl
                   ?.replace(/&size=\d+/, '&size=300')

src/main/main.ts

@@ -24,6 +24,8 @@ import {
     BrowserWindowConstructorOptions,
     protocol,
     net,
+    Rectangle,
+    screen,
 } from 'electron';
 import electronLocalShortcut from 'electron-localshortcut';
 import log from 'electron-log/main';
@@ -65,8 +67,8 @@ if (store.get('ignore_ssl')) {
 
 // From https://github.com/tutao/tutanota/commit/92c6ed27625fcf367f0fbcc755d83d7ff8fde94b
 if (isLinux() && !process.argv.some((a) => a.startsWith('--password-store='))) {
-    const paswordStore = store.get('password_store', 'gnome-libsecret') as string;
-    app.commandLine.appendSwitch('password-store', paswordStore);
+    const passwordStore = store.get('password_store', 'gnome-libsecret') as string;
+    app.commandLine.appendSwitch('password-store', passwordStore);
 }
 
 let mainWindow: BrowserWindow | null = null;
@@ -197,7 +199,7 @@ const createTray = () => {
         },
     ]);
 
-    tray.on('double-click', () => {
+    tray.on('click', () => {
         mainWindow?.show();
         createWinThumbarButtons();
     });
@@ -208,7 +210,7 @@ const createTray = () => {
 
 const createWindow = async (first = true) => {
     if (isDevelopment) {
-        await installExtensions();
+        await installExtensions().catch(console.log);
     }
 
     const nativeFrame = store.get('window_window_bar_style') === 'linux';
@@ -256,6 +258,26 @@ const createWindow = async (first = true) => {
         ...(nativeFrame && isWindows() && nativeFrameConfig.windows),
     });
 
+    // From https://github.com/electron/electron/issues/526#issuecomment-1663959513
+    const bounds = store.get('bounds') as Rectangle | undefined;
+    if (bounds) {
+        const screenArea = screen.getDisplayMatching(bounds).workArea;
+        if (
+            bounds.x > screenArea.x + screenArea.width ||
+            bounds.x < screenArea.x ||
+            bounds.y < screenArea.y ||
+            bounds.y > screenArea.y + screenArea.height
+        ) {
+            if (bounds.width < screenArea.width && bounds.height < screenArea.height) {
+                mainWindow.setBounds({ height: bounds.height, width: bounds.width });
+            } else {
+                mainWindow.setBounds({ height: 900, width: 1440 });
+            }
+        } else {
+            mainWindow.setBounds(bounds);
+        }
+    }
+
     electronLocalShortcut.register(mainWindow, 'Ctrl+Shift+I', () => {
         mainWindow?.webContents.openDevTools();
     });
@@ -358,6 +380,16 @@ const createWindow = async (first = true) => {
         }
 
         if (!first || !startWindowMinimized) {
+            const maximized = store.get('maximized');
+            const fullScreen = store.get('fullscreen');
+
+            if (maximized) {
+                mainWindow.maximize();
+            }
+            if (fullScreen) {
+                mainWindow.setFullScreen(true);
+            }
+
             mainWindow.show();
             createWinThumbarButtons();
         }
@@ -371,6 +403,10 @@ const createWindow = async (first = true) => {
     let saved = false;
 
     mainWindow.on('close', (event) => {
+        store.set('bounds', mainWindow?.getNormalBounds());
+        store.set('maximized', mainWindow?.isMaximized());
+        store.set('fullscreen', mainWindow?.isFullScreen());
+
         if (!exitFromTray && store.get('window_exit_to_tray')) {
             if (isMacOS() && !forceQuit) {
                 exitFromTray = true;
@@ -437,7 +473,7 @@ const createWindow = async (first = true) => {
     const menuBuilder = new MenuBuilder(mainWindow);
     menuBuilder.buildMenu();
 
-    // Open urls in the user's browser
+    // Open URLs in the user's browser
     mainWindow.webContents.setWindowOpenHandler((edata) => {
         shell.openExternal(edata.url);
         return { action: 'deny' };
@@ -579,6 +615,8 @@ if (!singleInstance) {
         if (mainWindow) {
             if (mainWindow.isMinimized()) {
                 mainWindow.restore();
+            } else if (!mainWindow.isVisible()) {
+                mainWindow.show();
             }
 
             mainWindow.focus();
@@ -618,3 +656,20 @@ if (!singleInstance) {
         })
         .catch(console.log);
 }
+
+// Register 'open-item' handler globally, ensuring it is only registered once
+if (!ipcMain.eventNames().includes('open-item')) {
+    ipcMain.handle('open-item', async (_event, path: string) => {
+        return new Promise<void>((resolve, reject) => {
+            access(path, constants.F_OK, (error) => {
+                if (error) {
+                    reject(error);
+                    return;
+                }
+
+                shell.showItemInFolder(path);
+                resolve();
+            });
+        });
+    });
+}

src/main/preload/local-settings.ts

@@ -64,6 +64,7 @@ const env = {
     SERVER_NAME: process.env.SERVER_NAME ?? '',
     SERVER_TYPE,
     SERVER_URL: process.env.SERVER_URL ?? 'http://',
+    START_MAXIMIZED: store.get('maximized'),
 };
 
 export const localSettings = {

src/main/preload/remote.ts

@@ -1,5 +1,6 @@
 import { IpcRendererEvent, ipcRenderer } from 'electron';
-import { SongUpdate } from '/@/renderer/types';
+import { QueueSong } from '/@/renderer/api/types';
+import { PlayerStatus } from '/@/renderer/types';
 
 const requestFavorite = (
     cb: (
@@ -46,6 +47,10 @@ const updatePassword = (password: string) => {
     ipcRenderer.send('remote-password', password);
 };
 
+const updatePlayback = (playback: PlayerStatus) => {
+    ipcRenderer.send('update-playback', playback);
+};
+
 const updateSetting = (
     enabled: boolean,
     port: number,
@@ -67,7 +72,7 @@ const updateShuffle = (shuffle: boolean) => {
     ipcRenderer.send('update-shuffle', shuffle);
 };
 
-const updateSong = (args: SongUpdate) => {
+const updateSong = (args: QueueSong | undefined) => {
     ipcRenderer.send('update-song', args);
 };
 
@@ -89,6 +94,7 @@ export const remote = {
     setRemotePort,
     updateFavorite,
     updatePassword,
+    updatePlayback,
     updateRating,
     updateRepeat,
     updateSetting,

src/main/preload/utils.ts

@@ -10,6 +10,10 @@ const restoreQueue = () => {
     ipcRenderer.send('player-restore-queue');
 };
 
+const openItem = async (path: string) => {
+    return ipcRenderer.invoke('open-item', path);
+};
+
 const onSaveQueue = (cb: (event: IpcRendererEvent) => void) => {
     ipcRenderer.on('renderer-save-queue', cb);
 };
@@ -51,6 +55,7 @@ export const utils = {
     mainMessageListener,
     onRestoreQueue,
     onSaveQueue,
+    openItem,
     playerErrorListener,
     restoreQueue,
     saveQueue,

src/remote/components/remote-container.tsx

@@ -18,7 +18,7 @@ import {
 import { PlayerRepeat, PlayerStatus } from '/@/renderer/types';
 import { WrapperSlider } from '/@/remote/components/wrapped-slider';
 import { Tooltip } from '/@/renderer/components/tooltip';
-import { Rating } from '/@/renderer/components';
+import { Rating } from '/@/renderer/components/rating';
 
 export const RemoteContainer = () => {
     const { repeat, shuffle, song, status, volume } = useInfo();
@@ -38,7 +38,7 @@ export const RemoteContainer = () => {
 
     return (
         <>
-            {song && (
+            {id && (
                 <>
                     <Title order={1}>{song.name}</Title>
                     <Group align="flex-end">
@@ -61,6 +61,7 @@ export const RemoteContainer = () => {
                 spacing={0}
             >
                 <RemoteButton
+                    disabled={!id}
                     tooltip="Previous track"
                     variant="default"
                     onClick={() => send({ event: 'previous' })}
@@ -68,7 +69,8 @@ export const RemoteContainer = () => {
                     <RiSkipBackFill size={25} />
                 </RemoteButton>
                 <RemoteButton
-                    tooltip={status === PlayerStatus.PLAYING ? 'Pause' : 'Play'}
+                    disabled={!id}
+                    tooltip={id && status === PlayerStatus.PLAYING ? 'Pause' : 'Play'}
                     variant="default"
                     onClick={() => {
                         if (status === PlayerStatus.PLAYING) {
@@ -78,13 +80,14 @@ export const RemoteContainer = () => {
                         }
                     }}
                 >
-                    {status === PlayerStatus.PLAYING ? (
+                    {id && status === PlayerStatus.PLAYING ? (
                         <RiPauseFill size={25} />
                     ) : (
                         <RiPlayFill size={25} />
                     )}
                 </RemoteButton>
                 <RemoteButton
+                    disabled={!id}
                     tooltip="Next track"
                     variant="default"
                     onClick={() => send({ event: 'next' })}
@@ -124,7 +127,7 @@ export const RemoteContainer = () => {
                 </RemoteButton>
                 <RemoteButton
                     $active={song?.userFavorite}
-                    disabled={!song}
+                    disabled={!id}
                     tooltip={song?.userFavorite ? 'Unfavorite' : 'Favorite'}
                     variant="default"
                     onClick={() => {

src/remote/store/index.ts

@@ -4,7 +4,7 @@ import merge from 'lodash/merge';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
-import { ClientEvent, ServerEvent, SongUpdateSocket } from '/@/remote/types';
+import type { ClientEvent, ServerEvent, SongUpdateSocket } from '/@/remote/types';
 
 interface StatefulWebSocket extends WebSocket {
     natural: boolean;
@@ -133,6 +133,12 @@ export const useRemoteStore = create<SettingsSlice>()(
                                         });
                                         break;
                                     }
+                                    case 'playback': {
+                                        set((state) => {
+                                            state.info.status = data;
+                                        });
+                                        break;
+                                    }
                                     case 'proxy': {
                                         set((state) => {
                                             if (state.info.song) {
@@ -149,9 +155,34 @@ export const useRemoteStore = create<SettingsSlice>()(
                                         });
                                         break;
                                     }
+                                    case 'repeat': {
+                                        set((state) => {
+                                            state.info.repeat = data;
+                                        });
+                                        break;
+                                    }
+                                    case 'shuffle': {
+                                        set((state) => {
+                                            state.info.shuffle = data;
+                                        });
+                                        break;
+                                    }
                                     case 'song': {
-                                        set((nested) => {
-                                            nested.info = { ...nested.info, ...data };
+                                        set((state) => {
+                                            console.log(data);
+                                            state.info.song = data;
+                                        });
+                                        break;
+                                    }
+                                    case 'state': {
+                                        set((state) => {
+                                            state.info = data;
+                                        });
+                                        break;
+                                    }
+                                    case 'volume': {
+                                        set((state) => {
+                                            state.info.volume = data;
                                         });
                                     }
                                 }
@@ -212,11 +243,9 @@ export const useRemoteStore = create<SettingsSlice>()(
             { name: 'store_settings' },
         ),
         {
-            merge: (persistedState, currentState) => {
-                return merge(currentState, persistedState);
-            },
+            merge: (persistedState, currentState) => merge(currentState, persistedState),
             name: 'store_settings',
-            version: 6,
+            version: 7,
         },
     ),
 );

src/remote/types.ts

@@ -1,7 +1,7 @@
 import type { QueueSong } from '/@/renderer/api/types';
-import type { SongUpdate } from '/@/renderer/types';
+import type { PlayerRepeat, PlayerStatus, SongState } from '/@/renderer/types';
 
-export interface SongUpdateSocket extends Omit<SongUpdate, 'song'> {
+export interface SongUpdateSocket extends Omit<SongState, 'song'> {
     song?: QueueSong | null;
 }
 
@@ -15,6 +15,11 @@ export interface ServerFavorite {
     event: 'favorite';
 }
 
+export interface ServerPlayStatus {
+    data: PlayerStatus;
+    event: 'playback';
+}
+
 export interface ServerProxy {
     data: string;
     event: 'proxy';
@@ -25,12 +30,42 @@ export interface ServerRating {
     event: 'rating';
 }
 
+export interface ServerRepeat {
+    data: PlayerRepeat;
+    event: 'repeat';
+}
+
+export interface ServerShuffle {
+    data: boolean;
+    event: 'shuffle';
+}
+
 export interface ServerSong {
-    data: SongUpdateSocket;
+    data: QueueSong | null;
     event: 'song';
 }
 
-export type ServerEvent = ServerError | ServerFavorite | ServerRating | ServerSong | ServerProxy;
+export interface ServerState {
+    data: SongState;
+    event: 'state';
+}
+
+export interface ServerVolume {
+    data: number;
+    event: 'volume';
+}
+
+export type ServerEvent =
+    | ServerError
+    | ServerFavorite
+    | ServerPlayStatus
+    | ServerRating
+    | ServerRepeat
+    | ServerShuffle
+    | ServerSong
+    | ServerState
+    | ServerProxy
+    | ServerVolume;
 
 export interface ClientSimpleEvent {
     event: 'next' | 'pause' | 'play' | 'previous' | 'proxy' | 'repeat' | 'shuffle';

src/renderer/api/controller.ts

@@ -8,6 +8,7 @@ import type {
     AlbumArtistDetailArgs,
     AlbumArtistListArgs,
     SetRatingArgs,
+    ShareItemArgs,
     GenreListArgs,
     CreatePlaylistArgs,
     DeletePlaylistArgs,
@@ -55,6 +56,7 @@ import type {
     SimilarSongsArgs,
     Song,
     ServerType,
+    ShareItemResponse,
 } from '/@/renderer/api/types';
 import { DeletePlaylistResponse, RandomSongListArgs } from './types';
 import { ndController } from '/@/renderer/api/navidrome/navidrome-controller';
@@ -102,6 +104,7 @@ export type ControllerEndpoint = Partial<{
     scrobble: (args: ScrobbleArgs) => Promise<ScrobbleResponse>;
     search: (args: SearchArgs) => Promise<SearchResponse>;
     setRating: (args: SetRatingArgs) => Promise<RatingResponse>;
+    shareItem: (args: ShareItemArgs) => Promise<ShareItemResponse>;
     updatePlaylist: (args: UpdatePlaylistArgs) => Promise<UpdatePlaylistResponse>;
 }>;
 
@@ -149,6 +152,7 @@ const endpoints: ApiController = {
         scrobble: jfController.scrobble,
         search: jfController.search,
         setRating: undefined,
+        shareItem: undefined,
         updatePlaylist: jfController.updatePlaylist,
     },
     navidrome: {
@@ -178,7 +182,7 @@ const endpoints: ApiController = {
         getPlaylistSongList: ndController.getPlaylistSongList,
         getRandomSongList: ssController.getRandomSongList,
         getServerInfo: ndController.getServerInfo,
-        getSimilarSongs: ssController.getSimilarSongs,
+        getSimilarSongs: ndController.getSimilarSongs,
         getSongDetail: ndController.getSongDetail,
         getSongList: ndController.getSongList,
         getStructuredLyrics: ssController.getStructuredLyrics,
@@ -188,6 +192,7 @@ const endpoints: ApiController = {
         scrobble: ssController.scrobble,
         search: ssController.search3,
         setRating: ssController.setRating,
+        shareItem: ndController.shareItem,
         updatePlaylist: ndController.updatePlaylist,
     },
     subsonic: {
@@ -223,6 +228,7 @@ const endpoints: ApiController = {
         scrobble: ssController.scrobble,
         search: ssController.search3,
         setRating: undefined,
+        shareItem: undefined,
         updatePlaylist: undefined,
     },
 };
@@ -457,6 +463,15 @@ const updateRating = async (args: SetRatingArgs) => {
     )?.(args);
 };
 
+const shareItem = async (args: ShareItemArgs) => {
+    return (
+        apiController(
+            'shareItem',
+            args.apiClientProps.server?.type,
+        ) as ControllerEndpoint['shareItem']
+    )?.(args);
+};
+
 const getTopSongList = async (args: TopSongListArgs) => {
     return (
         apiController(
@@ -555,6 +570,7 @@ export const controller = {
     removeFromPlaylist,
     scrobble,
     search,
+    shareItem,
     updatePlaylist,
     updateRating,
 };

src/renderer/api/features-types.ts

@@ -4,6 +4,7 @@ export enum ServerFeature {
     LYRICS_MULTIPLE_STRUCTURED = 'lyricsMultipleStructured',
     LYRICS_SINGLE_STRUCTURED = 'lyricsSingleStructured',
     PLAYLISTS_SMART = 'playlistsSmart',
+    SHARING_ALBUM_SONG = 'sharingAlbumSong',
 }
 
 export type ServerFeatures = Partial<Record<ServerFeature, boolean>>;

src/renderer/api/jellyfin.types.ts

@@ -574,7 +574,7 @@ export enum JFSongListSort {
     ARTIST = 'Artist,Album,SortName',
     COMMUNITY_RATING = 'CommunityRating,SortName',
     DURATION = 'Runtime,AlbumArtist,Album,SortName',
-    NAME = 'Name,SortName',
+    NAME = 'SortName,Name',
     PLAY_COUNT = 'PlayCount,SortName',
     RANDOM = 'Random,SortName',
     RECENTLY_ADDED = 'DateCreated,SortName',
@@ -601,7 +601,7 @@ export type JFSongListParams = {
 export enum JFAlbumArtistListSort {
     ALBUM = 'Album,SortName',
     DURATION = 'Runtime,AlbumArtist,Album,SortName',
-    NAME = 'Name,SortName',
+    NAME = 'SortName,Name',
     RANDOM = 'Random,SortName',
     RECENTLY_ADDED = 'DateCreated,SortName',
     RELEASE_DATE = 'PremiereDate,AlbumArtist,Album,SortName',
@@ -618,7 +618,7 @@ export type JFAlbumArtistListParams = {
 export enum JFArtistListSort {
     ALBUM = 'Album,SortName',
     DURATION = 'Runtime,AlbumArtist,Album,SortName',
-    NAME = 'Name,SortName',
+    NAME = 'SortName,Name',
     RANDOM = 'Random,SortName',
     RECENTLY_ADDED = 'DateCreated,SortName',
     RELEASE_DATE = 'PremiereDate,AlbumArtist,Album,SortName',

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

@@ -6,8 +6,9 @@ import qs from 'qs';
 import { ServerListItem } from '/@/renderer/api/types';
 import omitBy from 'lodash/omitBy';
 import { z } from 'zod';
-import { authenticationFailure } from '/@/renderer/api/utils';
+import { authenticationFailure, getClientType } from '/@/renderer/api/utils';
 import i18n from '/@/i18n/i18n';
+import packageJson from '../../../../package.json';
 
 const c = initContract();
 
@@ -24,9 +25,6 @@ export const contract = c.router({
     },
     authenticate: {
         body: jfType._parameters.authenticate,
-        headers: z.object({
-            'X-Emby-Authorization': z.string(),
-        }),
         method: 'POST',
         path: 'users/authenticatebyname',
         responses: {
@@ -115,6 +113,15 @@ export const contract = c.router({
             400: jfType._response.error,
         },
     },
+    getInstantMix: {
+        method: 'GET',
+        path: 'songs/:itemId/InstantMix',
+        query: jfType._parameters.similarSongs,
+        responses: {
+            200: jfType._response.songList,
+            400: jfType._response.error,
+        },
+    },
     getMusicFolderList: {
         method: 'GET',
         path: 'users/:userId/items',
@@ -176,6 +183,15 @@ export const contract = c.router({
             400: jfType._response.error,
         },
     },
+    getSongData: {
+        method: 'GET',
+        path: 'users/:userId/items/:id',
+        query: jfType._parameters.songDetail,
+        responses: {
+            200: jfType._response.song,
+            400: jfType._response.error,
+        },
+    },
     getSongDetail: {
         method: 'GET',
         path: 'users/:userId/items/:id',
@@ -195,7 +211,7 @@ export const contract = c.router({
     },
     getSongLyrics: {
         method: 'GET',
-        path: 'users/:userId/Items/:id/Lyrics',
+        path: 'audio/:id/Lyrics',
         responses: {
             200: jfType._response.lyrics,
             404: jfType._response.error,
@@ -315,6 +331,12 @@ const parsePath = (fullPath: string) => {
     };
 };
 
+export const createAuthHeader = (): string => {
+    return `MediaBrowser Client="Feishin", Device="${getClientType()}", DeviceId="${
+        useAuthStore.getState().deviceId
+    }", Version="${packageJson.version}"`;
+};
+
 export const jfApiClient = (args: {
     server: ServerListItem | null;
     signal?: AbortSignal;
@@ -341,7 +363,9 @@ export const jfApiClient = (args: {
                     data: body,
                     headers: {
                         ...headers,
-                        ...(token && { 'X-MediaBrowser-Token': token }),
+                        ...(token
+                            ? { Authorization: createAuthHeader().concat(`, Token="${token}"`) }
+                            : { Authorization: createAuthHeader() }),
                     },
                     method: method as Method,
                     params,

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

@@ -57,41 +57,16 @@ import {
 import { jfApiClient } from '/@/renderer/api/jellyfin/jellyfin-api';
 import { jfNormalize } from './jellyfin-normalize';
 import { jfType } from '/@/renderer/api/jellyfin/jellyfin-types';
-import packageJson from '../../../../package.json';
 import { z } from 'zod';
 import { JFSongListSort, JFSortOrder } from '/@/renderer/api/jellyfin.types';
-import isElectron from 'is-electron';
-import { ServerFeatures } from '/@/renderer/api/features-types';
+import { ServerFeature } from '/@/renderer/api/features-types';
+import { VersionInfo, getFeatures } from '/@/renderer/api/utils';
+import chunk from 'lodash/chunk';
 
 const formatCommaDelimitedString = (value: string[]) => {
     return value.join(',');
 };
 
-function getHostname(): string {
-    if (isElectron()) {
-        return 'Desktop Client';
-    }
-    const agent = navigator.userAgent;
-    switch (true) {
-        case agent.toLowerCase().indexOf('edge') > -1:
-            return 'Microsoft Edge';
-        case agent.toLowerCase().indexOf('edg/') > -1:
-            return 'Edge Chromium'; // Match also / to avoid matching for the older Edge
-        case agent.toLowerCase().indexOf('opr') > -1:
-            return 'Opera';
-        case agent.toLowerCase().indexOf('chrome') > -1:
-            return 'Chrome';
-        case agent.toLowerCase().indexOf('trident') > -1:
-            return 'Internet Explorer';
-        case agent.toLowerCase().indexOf('firefox') > -1:
-            return 'Firefox';
-        case agent.toLowerCase().indexOf('safari') > -1:
-            return 'Safari';
-        default:
-            return 'PC';
-    }
-}
-
 const authenticate = async (
     url: string,
     body: {
@@ -106,11 +81,6 @@ const authenticate = async (
             Pw: body.password,
             Username: body.username,
         },
-        headers: {
-            'x-emby-authorization': `MediaBrowser Client="Feishin", Device="${getHostname()}", DeviceId="Feishin-${getHostname()}-${encodeURIComponent(
-                body.username,
-            )}", Version="${packageJson.version}"`,
-        },
     });
 
     if (res.status !== 200) {
@@ -231,7 +201,7 @@ const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<AlbumArtis
             ParentId: query.musicFolderId,
             Recursive: true,
             SearchTerm: query.searchTerm,
-            SortBy: albumArtistListSortMap.jellyfin[query.sortBy] || 'Name,SortName',
+            SortBy: albumArtistListSortMap.jellyfin[query.sortBy] || 'SortName,Name',
             SortOrder: sortOrderMap.jellyfin[query.sortOrder],
             StartIndex: query.startIndex,
             UserId: apiClientProps.server?.userId || undefined,
@@ -257,7 +227,7 @@ const getArtistList = async (args: ArtistListArgs): Promise<AlbumArtistListRespo
             Limit: query.limit,
             ParentId: query.musicFolderId,
             Recursive: true,
-            SortBy: artistListSortMap.jellyfin[query.sortBy] || 'Name,SortName',
+            SortBy: artistListSortMap.jellyfin[query.sortBy] || 'SortName,Name',
             SortOrder: sortOrderMap.jellyfin[query.sortOrder],
             StartIndex: query.startIndex,
         },
@@ -445,8 +415,26 @@ const getSongList = async (args: SongListArgs): Promise<SongListResponse> => {
         throw new Error('Failed to get song list');
     }
 
+    let items: z.infer<typeof jfType._response.song>[];
+
+    // Jellyfin Bodge because of code from https://github.com/jellyfin/jellyfin/blob/c566ccb63bf61f9c36743ddb2108a57c65a2519b/Emby.Server.Implementations/Data/SqliteItemRepository.cs#L3622
+    // If the Album ID filter is passed, Jellyfin will search for
+    //  1. the matching album id
+    //  2. An album with the name of the album.
+    // It is this second condition causing issues,
+    if (query.albumIds) {
+        const albumIdSet = new Set(query.albumIds);
+        items = res.body.Items.filter((item) => albumIdSet.has(item.AlbumId));
+
+        if (items.length < res.body.Items.length) {
+            res.body.TotalRecordCount -= res.body.Items.length - items.length;
+        }
+    } else {
+        items = res.body.Items;
+    }
+
     return {
-        items: res.body.Items.map((item) =>
+        items: items.map((item) =>
             jfNormalize.song(item, apiClientProps.server, '', query.imageSize),
         ),
         startIndex: query.startIndex,
@@ -454,6 +442,11 @@ const getSongList = async (args: SongListArgs): Promise<SongListResponse> => {
     };
 };
 
+// Limit the query to 50 at a time to be *extremely* conservative on the
+// length of the full URL, since the ids are part of the query string and
+// not the POST body
+const MAX_ITEMS_PER_PLAYLIST_ADD = 50;
+
 const addToPlaylist = async (args: AddToPlaylistArgs): Promise<AddToPlaylistResponse> => {
     const { query, body, apiClientProps } = args;
 
@@ -461,19 +454,23 @@ const addToPlaylist = async (args: AddToPlaylistArgs): Promise<AddToPlaylistResp
         throw new Error('No userId found');
     }
 
-    const res = await jfApiClient(apiClientProps).addToPlaylist({
-        body: null,
-        params: {
-            id: query.id,
-        },
-        query: {
-            Ids: body.songId,
-            UserId: apiClientProps.server?.userId,
-        },
-    });
+    const chunks = chunk(body.songId, MAX_ITEMS_PER_PLAYLIST_ADD);
 
-    if (res.status !== 204) {
-        throw new Error('Failed to add to playlist');
+    for (const chunk of chunks) {
+        const res = await jfApiClient(apiClientProps).addToPlaylist({
+            body: null,
+            params: {
+                id: query.id,
+            },
+            query: {
+                Ids: chunk.join(','),
+                UserId: apiClientProps.server?.userId,
+            },
+        });
+
+        if (res.status !== 204) {
+            throw new Error('Failed to add to playlist');
+        }
     }
 
     return null;
@@ -484,18 +481,22 @@ const removeFromPlaylist = async (
 ): Promise<RemoveFromPlaylistResponse> => {
     const { query, apiClientProps } = args;
 
-    const res = await jfApiClient(apiClientProps).removeFromPlaylist({
-        body: null,
-        params: {
-            id: query.id,
-        },
-        query: {
-            EntryIds: query.songId,
-        },
-    });
+    const chunks = chunk(query.songId, MAX_ITEMS_PER_PLAYLIST_ADD);
 
-    if (res.status !== 204) {
-        throw new Error('Failed to remove from playlist');
+    for (const chunk of chunks) {
+        const res = await jfApiClient(apiClientProps).removeFromPlaylist({
+            body: null,
+            params: {
+                id: query.id,
+            },
+            query: {
+                EntryIds: chunk.join(','),
+            },
+        });
+
+        if (res.status !== 204) {
+            throw new Error('Failed to remove from playlist');
+        }
     }
 
     return null;
@@ -919,7 +920,6 @@ const getLyrics = async (args: LyricsArgs): Promise<LyricsResponse> => {
     const res = await jfApiClient(apiClientProps).getSongLyrics({
         params: {
             id: query.songId,
-            userId: apiClientProps.server?.userId,
         },
     });
 
@@ -951,6 +951,8 @@ const getSongDetail = async (args: SongDetailArgs): Promise<SongDetailResponse>
     return jfNormalize.song(res.body, apiClientProps.server, '');
 };
 
+const VERSION_INFO: VersionInfo = [['10.9.0', { [ServerFeature.LYRICS_SINGLE_STRUCTURED]: [1] }]];
+
 const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
     const { apiClientProps } = args;
 
@@ -960,9 +962,7 @@ const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
         throw new Error('Failed to get server info');
     }
 
-    const features: ServerFeatures = {
-        lyricsSingleStructured: true,
-    };
+    const features = getFeatures(VERSION_INFO, res.body.Version);
 
     return {
         features,
@@ -974,6 +974,8 @@ const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
 const getSimilarSongs = async (args: SimilarSongsArgs): Promise<Song[]> => {
     const { apiClientProps, query } = args;
 
+    // Prefer getSimilarSongs, where possible. Fallback to InstantMix
+    // where no similar songs were found.
     const res = await jfApiClient(apiClientProps).getSimilarSongs({
         params: {
             itemId: query.songId,
@@ -985,11 +987,36 @@ const getSimilarSongs = async (args: SimilarSongsArgs): Promise<Song[]> => {
         },
     });
 
-    if (res.status !== 200) {
+    if (res.status === 200 && res.body.Items.length) {
+        const results = res.body.Items.reduce<Song[]>((acc, song) => {
+            if (song.Id !== query.songId) {
+                acc.push(jfNormalize.song(song, apiClientProps.server, ''));
+            }
+
+            return acc;
+        }, []);
+
+        if (results.length > 0) {
+            return results;
+        }
+    }
+
+    const mix = await jfApiClient(apiClientProps).getInstantMix({
+        params: {
+            itemId: query.songId,
+        },
+        query: {
+            Fields: 'Genres, DateCreated, MediaSources, ParentId',
+            Limit: query.count,
+            UserId: apiClientProps.server?.userId || undefined,
+        },
+    });
+
+    if (mix.status !== 200) {
         throw new Error('Failed to get similar songs');
     }
 
-    return res.body.Items.reduce<Song[]>((acc, song) => {
+    return mix.body.Items.reduce<Song[]>((acc, song) => {
         if (song.Id !== query.songId) {
             acc.push(jfNormalize.song(song, apiClientProps.server, ''));
         }

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

@@ -30,7 +30,7 @@ const getStreamUrl = (args: {
         `?userId=${server?.userId}` +
         `&deviceId=${deviceId}` +
         '&audioCodec=aac' +
-        `&api_key=${server?.credential}` +
+        `&apiKey=${server?.credential}` +
         `&playSessionId=${deviceId}` +
         '&container=opus,mp3,aac,m4a,m4b,flac,wav,ogg' +
         '&transcodingContainer=ts' +
@@ -134,7 +134,7 @@ const normalizeSong = (
             imageUrl: null,
             name: entry.Name,
         })),
-        albumId: item.AlbumId,
+        albumId: item.AlbumId || `dummy/${item.Id}`,
         artistName: item?.ArtistItems?.[0]?.Name,
         artists: item?.ArtistItems?.map((entry) => ({
             id: entry.Id,

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

@@ -387,11 +387,13 @@ const genericItem = z.object({
     Name: z.string(),
 });
 
+const songDetailParameters = baseParameters;
+
 const song = z.object({
     Album: z.string(),
     AlbumArtist: z.string(),
     AlbumArtists: z.array(genericItem),
-    AlbumId: z.string(),
+    AlbumId: z.string().optional(),
     AlbumPrimaryImageTag: z.string(),
     ArtistItems: z.array(genericItem),
     Artists: z.array(z.string()),
@@ -512,7 +514,7 @@ const albumList = pagination.extend({
 const albumArtistListSort = {
     ALBUM: 'Album,SortName',
     DURATION: 'Runtime,AlbumArtist,Album,SortName',
-    NAME: 'Name,SortName',
+    NAME: 'SortName,Name',
     RANDOM: 'Random,SortName',
     RECENTLY_ADDED: 'DateCreated,SortName',
     RELEASE_DATE: 'PremiereDate,AlbumArtist,Album,SortName',
@@ -542,7 +544,7 @@ const songListSort = {
     ARTIST: 'Artist,Album,SortName',
     COMMUNITY_RATING: 'CommunityRating,SortName',
     DURATION: 'Runtime,AlbumArtist,Album,SortName',
-    NAME: 'Name,SortName',
+    NAME: 'SortName,Name',
     PLAY_COUNT: 'PlayCount,SortName',
     RANDOM: 'Random,SortName',
     RECENTLY_ADDED: 'DateCreated,SortName',
@@ -607,14 +609,14 @@ const addToPlaylist = z.object({
 });
 
 const addToPlaylistParameters = z.object({
-    Ids: z.array(z.string()),
+    Ids: z.string(),
     UserId: z.string(),
 });
 
 const removeFromPlaylist = z.null();
 
 const removeFromPlaylistParameters = z.object({
-    EntryIds: z.array(z.string()),
+    EntryIds: z.string(),
 });
 
 const deletePlaylist = z.null();
@@ -709,6 +711,7 @@ export const jfType = {
         search: searchParameters,
         similarArtistList: similarArtistListParameters,
         similarSongs: similarSongsParameters,
+        songDetail: songDetailParameters,
         songList: songListParameters,
         updatePlaylist: updatePlaylistParameters,
     },

src/renderer/api/navidrome.types.ts

@@ -242,6 +242,7 @@ export enum NDSongListSort {
     ID = 'id',
     PLAY_COUNT = 'playCount',
     PLAY_DATE = 'playDate',
+    RANDOM = 'random',
     RATING = 'rating',
     RECENTLY_ADDED = 'createdAt',
     TITLE = 'title',
@@ -399,6 +400,7 @@ export const NDSongQueryFields = [
     { label: 'File Type', type: 'string', value: 'filetype' },
     { label: 'Genre', type: 'string', value: 'genre' },
     { label: 'Has CoverArt', type: 'boolean', value: 'hascoverart' },
+    { label: 'Playlist', type: 'playlist', value: 'id' },
     { label: 'Is Compilation', type: 'boolean', value: 'compilation' },
     { label: 'Is Favorite', type: 'boolean', value: 'loved' },
     { label: 'Lyrics', type: 'string', value: 'lyrics' },
@@ -414,6 +416,11 @@ export const NDSongQueryFields = [
     { label: 'Year', type: 'number', value: 'year' },
 ];
 
+export const NDSongQueryPlaylistOperators = [
+    { label: 'is in', value: 'inPlaylist' },
+    { label: 'is not in', value: 'notInPlaylist' },
+];
+
 export const NDSongQueryDateOperators = [
     { label: 'is', value: 'is' },
     { label: 'is not', value: 'isNot' },

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

@@ -157,6 +157,16 @@ export const contract = c.router({
             500: resultWithHeaders(ndType._response.error),
         },
     },
+    shareItem: {
+        body: ndType._parameters.shareItem,
+        method: 'POST',
+        path: 'share',
+        responses: {
+            200: resultWithHeaders(ndType._response.shareItem),
+            404: resultWithHeaders(ndType._response.error),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
     updatePlaylist: {
         body: ndType._parameters.updatePlaylist,
         method: 'PUT',
@@ -286,9 +296,10 @@ axiosClient.interceptors.response.use(
                             });
 
                             const serverId = currentServer.id;
-                            useAuthStore
-                                .getState()
-                                .actions.updateServer(serverId, { ndCredential: undefined });
+                            useAuthStore.getState().actions.updateServer(serverId, {
+                                credential: undefined,
+                                ndCredential: undefined,
+                            });
                             useAuthStore.getState().actions.setCurrentServer(null);
 
                             // special error to prevent sending a second message, and stop other messages that could be enqueued

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

@@ -1,9 +1,7 @@
 import { ndApiClient } from '/@/renderer/api/navidrome/navidrome-api';
 import { ndNormalize } from '/@/renderer/api/navidrome/navidrome-normalize';
-import { NavidromeExtensions, ndType } from '/@/renderer/api/navidrome/navidrome-types';
+import { ndType } from '/@/renderer/api/navidrome/navidrome-types';
 import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
-import semverCoerce from 'semver/functions/coerce';
-import semverGte from 'semver/functions/gte';
 import {
     AlbumArtistDetailArgs,
     AlbumArtistDetailResponse,
@@ -47,10 +45,16 @@ import {
     genreListSortMap,
     ServerInfo,
     ServerInfoArgs,
+    ShareItemArgs,
+    ShareItemResponse,
+    SimilarSongsArgs,
+    Song,
 } from '../types';
-import { hasFeature } from '/@/renderer/api/utils';
+import { VersionInfo, getFeatures, hasFeature } from '/@/renderer/api/utils';
 import { ServerFeature, ServerFeatures } from '/@/renderer/api/features-types';
 import { SubsonicExtensions } from '/@/renderer/api/subsonic/subsonic-types';
+import { NDSongListSort } from '/@/renderer/api/navidrome.types';
+import { ssNormalize } from '/@/renderer/api/subsonic/subsonic-normalize';
 
 const authenticate = async (
     url: string,
@@ -151,20 +155,18 @@ const getAlbumArtistDetail = async (
         throw new Error('Server is required');
     }
 
+    // Prefer images from getArtistInfo first (which should be proxied)
+    // Prioritize large > medium > small
     return ndNormalize.albumArtist(
         {
             ...res.body.data,
             ...(artistInfoRes.status === 200 && {
+                largeImageUrl:
+                    artistInfoRes.body.artistInfo.largeImageUrl ||
+                    artistInfoRes.body.artistInfo.mediumImageUrl ||
+                    artistInfoRes.body.artistInfo.smallImageUrl ||
+                    res.body.data.largeImageUrl,
                 similarArtists: artistInfoRes.body.artistInfo.similarArtist,
-                ...(!res.body.data.largeImageUrl && {
-                    largeImageUrl: artistInfoRes.body.artistInfo.largeImageUrl,
-                }),
-                ...(!res.body.data.mediumImageUrl && {
-                    largeImageUrl: artistInfoRes.body.artistInfo.mediumImageUrl,
-                }),
-                ...(!res.body.data.smallImageUrl && {
-                    largeImageUrl: artistInfoRes.body.artistInfo.smallImageUrl,
-                }),
             }),
         },
         apiClientProps.server,
@@ -191,7 +193,16 @@ const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<AlbumArtis
 
     return {
         items: res.body.data.map((albumArtist) =>
-            ndNormalize.albumArtist(albumArtist, apiClientProps.server),
+            // Navidrome native API will return only external URL small/medium/large
+            // image URL. Set large image to undefined to force `albumArtist` to use
+            // /rest/getCoverArt.view?id=ar-...
+            ndNormalize.albumArtist(
+                {
+                    ...albumArtist,
+                    largeImageUrl: undefined,
+                },
+                apiClientProps.server,
+            ),
         ),
         startIndex: query.startIndex,
         totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
@@ -482,34 +493,11 @@ const removeFromPlaylist = async (
     return null;
 };
 
-const VERSION_INFO: Array<[string, Record<string, number[]>]> = [
+const VERSION_INFO: VersionInfo = [
+    ['0.49.3', { [ServerFeature.SHARING_ALBUM_SONG]: [1] }],
     ['0.48.0', { [ServerFeature.PLAYLISTS_SMART]: [1] }],
 ];
 
-const getFeatures = (version: string): Record<string, number[]> => {
-    const cleanVersion = semverCoerce(version);
-    const features: Record<string, number[]> = {};
-    let matched = cleanVersion === null;
-
-    for (const [version, supportedFeatures] of VERSION_INFO) {
-        if (!matched) {
-            matched = semverGte(cleanVersion!, version);
-        }
-
-        if (matched) {
-            for (const [feature, feat] of Object.entries(supportedFeatures)) {
-                if (feature in features) {
-                    features[feature].push(...feat);
-                } else {
-                    features[feature] = feat;
-                }
-            }
-        }
-    }
-
-    return features;
-};
-
 const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
     const { apiClientProps } = args;
 
@@ -520,7 +508,10 @@ const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
         throw new Error('Failed to ping server');
     }
 
-    const navidromeFeatures: Record<string, number[]> = getFeatures(ping.body.serverVersion!);
+    const navidromeFeatures: Record<string, number[]> = getFeatures(
+        VERSION_INFO,
+        ping.body.serverVersion!,
+    );
 
     if (ping.body.openSubsonic) {
         const res = await ssApiClient(apiClientProps).getServerInfo();
@@ -541,12 +532,87 @@ const getServerInfo = async (args: ServerInfoArgs): Promise<ServerInfo> => {
 
     const features: ServerFeatures = {
         lyricsMultipleStructured: !!navidromeFeatures[SubsonicExtensions.SONG_LYRICS],
-        playlistsSmart: !!navidromeFeatures[NavidromeExtensions.SMART_PLAYLISTS],
+        playlistsSmart: !!navidromeFeatures[ServerFeature.PLAYLISTS_SMART],
+        sharingAlbumSong: !!navidromeFeatures[ServerFeature.SHARING_ALBUM_SONG],
     };
 
     return { features, id: apiClientProps.server?.id, version: ping.body.serverVersion! };
 };
 
+const shareItem = async (args: ShareItemArgs): Promise<ShareItemResponse> => {
+    const { body, apiClientProps } = args;
+
+    const res = await ndApiClient(apiClientProps).shareItem({
+        body: {
+            description: body.description,
+            downloadable: body.downloadable,
+            expires: body.expires,
+            resourceIds: body.resourceIds,
+            resourceType: body.resourceType,
+        },
+    });
+
+    if (res.status !== 200) {
+        throw new Error('Failed to share item');
+    }
+
+    return {
+        id: res.body.data.id,
+    };
+};
+
+const getSimilarSongs = async (args: SimilarSongsArgs): Promise<Song[]> => {
+    const { apiClientProps, query } = args;
+
+    // Prefer getSimilarSongs (which queries last.fm) where available
+    // otherwise find other tracks by the same album artist
+    const res = await ssApiClient({
+        ...apiClientProps,
+        silent: true,
+    }).getSimilarSongs({
+        query: {
+            count: query.count,
+            id: query.songId,
+        },
+    });
+
+    if (res.status === 200 && res.body.similarSongs?.song) {
+        const similar = res.body.similarSongs.song.reduce<Song[]>((acc, song) => {
+            if (song.id !== query.songId) {
+                acc.push(ssNormalize.song(song, apiClientProps.server, ''));
+            }
+
+            return acc;
+        }, []);
+
+        if (similar.length > 0) {
+            return similar;
+        }
+    }
+
+    const fallback = await ndApiClient(apiClientProps).getSongList({
+        query: {
+            _end: 50,
+            _order: 'ASC',
+            _sort: NDSongListSort.RANDOM,
+            _start: 0,
+            album_artist_id: query.albumArtistIds,
+        },
+    });
+
+    if (fallback.status !== 200) {
+        throw new Error('Failed to get similar songs');
+    }
+
+    return fallback.body.data.reduce<Song[]>((acc, song) => {
+        if (song.id !== query.songId) {
+            acc.push(ndNormalize.song(song, apiClientProps.server, ''));
+        }
+
+        return acc;
+    }, []);
+};
+
 export const ndController = {
     addToPlaylist,
     authenticate,
@@ -561,9 +627,11 @@ export const ndController = {
     getPlaylistList,
     getPlaylistSongList,
     getServerInfo,
+    getSimilarSongs,
     getSongDetail,
     getSongList,
     getUserList,
     removeFromPlaylist,
+    shareItem,
     updatePlaylist,
 };

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

@@ -81,7 +81,7 @@ const normalizeSong = (
     const imagePlaceholderUrl = null;
     return {
         album: item.album,
-        albumArtists: [{ id: item.artistId, imageUrl: null, name: item.artist }],
+        albumArtists: [{ id: item.albumArtistId, imageUrl: null, name: item.albumArtist }],
         albumId: item.albumId,
         artistName: item.artist,
         artists: [{ id: item.artistId, imageUrl: null, name: item.artist }],

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

@@ -343,9 +343,17 @@ const removeFromPlaylistParameters = z.object({
     id: z.array(z.string()),
 });
 
-export enum NavidromeExtensions {
-    SMART_PLAYLISTS = 'smartPlaylists',
-}
+const shareItem = z.object({
+    id: z.string(),
+});
+
+const shareItemParameters = z.object({
+    description: z.string(),
+    downloadable: z.boolean(),
+    expires: z.number(),
+    resourceIds: z.string(),
+    resourceType: z.string(),
+});
 
 export const ndType = {
     _enum: {
@@ -365,6 +373,7 @@ export const ndType = {
         genreList: genreListParameters,
         playlistList: playlistListParameters,
         removeFromPlaylist: removeFromPlaylistParameters,
+        shareItem: shareItemParameters,
         songList: songListParameters,
         updatePlaylist: updatePlaylistParameters,
         userList: userListParameters,
@@ -386,6 +395,7 @@ export const ndType = {
         playlistSong,
         playlistSongList,
         removeFromPlaylist,
+        shareItem,
         song,
         songList,
         updatePlaylist,

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

@@ -131,7 +131,6 @@ axiosClient.defaults.paramsSerializer = (params) => {
 axiosClient.interceptors.response.use(
     (response) => {
         const data = response.data;
-
         if (data['subsonic-response'].status !== 'ok') {
             // Suppress code related to non-linked lastfm or spotify from Navidrome
             if (data['subsonic-response'].error.code !== 0) {
@@ -161,12 +160,24 @@ const parsePath = (fullPath: string) => {
     };
 };
 
+const silentlyTransformResponse = (data: any) => {
+    const jsonBody = JSON.parse(data);
+    const status = jsonBody ? jsonBody['subsonic-response']?.status : undefined;
+
+    if (status && status !== 'ok') {
+        jsonBody['subsonic-response'].error.code = 0;
+    }
+
+    return jsonBody;
+};
+
 export const ssApiClient = (args: {
     server: ServerListItem | null;
     signal?: AbortSignal;
+    silent?: boolean;
     url?: string;
 }) => {
-    const { server, url, signal } = args;
+    const { server, url, signal, silent } = args;
 
     return initClient(contract, {
         api: async ({ path, method, headers, body }) => {
@@ -206,6 +217,8 @@ export const ssApiClient = (args: {
                         ...params,
                     },
                     signal,
+                    // In cases where we have a fallback, don't notify the error
+                    transformResponse: silent ? silentlyTransformResponse : undefined,
                     url: `${baseUrl}/${api}`,
                 });
 

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

@@ -469,7 +469,7 @@ const getSimilarSongs = async (args: SimilarSongsArgs): Promise<Song[]> => {
         throw new Error('Failed to get similar songs');
     }
 
-    if (!res.body.similarSongs) {
+    if (!res.body.similarSongs?.song) {
         return [];
     }
 

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

@@ -75,7 +75,13 @@ const normalizeSong = (
         discNumber: item.discNumber || 1,
         discSubtitle: null,
         duration: item.duration ? item.duration * 1000 : 0,
-        gain: null,
+        gain:
+            item.replayGain && (item.replayGain.albumGain || item.replayGain.trackGain)
+                ? {
+                      album: item.replayGain.albumGain,
+                      track: item.replayGain.trackGain,
+                  }
+                : null,
         genres: item.genre
             ? [
                   {
@@ -94,7 +100,13 @@ const normalizeSong = (
         lyrics: null,
         name: item.title,
         path: item.path,
-        peak: null,
+        peak:
+            item.replayGain && (item.replayGain.albumPeak || item.replayGain.trackPeak)
+                ? {
+                      album: item.replayGain.albumPeak,
+                      track: item.replayGain.trackPeak,
+                  }
+                : null,
         playCount: item?.playCount || 0,
         releaseDate: null,
         releaseYear: item.year ? String(item.year) : null,

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

@@ -53,6 +53,13 @@ const musicFolderList = z.object({
     }),
 });
 
+const songGain = z.object({
+    albumGain: z.number().optional(),
+    albumPeak: z.number().optional(),
+    trackGain: z.number().optional(),
+    trackPeak: z.number().optional(),
+});
+
 const song = z.object({
     album: z.string().optional(),
     albumId: z.string().optional(),
@@ -72,6 +79,7 @@ const song = z.object({
     parent: z.string(),
     path: z.string(),
     playCount: z.number().optional(),
+    replayGain: songGain.optional(),
     size: z.number(),
     starred: z.boolean().optional(),
     suffix: z.string(),

src/renderer/api/types.ts

@@ -541,7 +541,7 @@ export const songListSortMap: SongListSortMap = {
         id: NDSongListSort.ID,
         name: NDSongListSort.TITLE,
         playCount: NDSongListSort.PLAY_COUNT,
-        random: undefined,
+        random: NDSongListSort.RANDOM,
         rating: NDSongListSort.RATING,
         recentlyAdded: NDSongListSort.RECENTLY_ADDED,
         recentlyPlayed: NDSongListSort.PLAY_DATE,
@@ -766,6 +766,19 @@ export type RatingQuery = {
 
 export type SetRatingArgs = { query: RatingQuery; serverId?: string } & BaseEndpointArgs;
 
+// Sharing
+export type ShareItemResponse = { id: string } | undefined;
+
+export type ShareItemBody = {
+    description: string;
+    downloadable: boolean;
+    expires: number;
+    resourceIds: string;
+    resourceType: string;
+};
+
+export type ShareItemArgs = { body: ShareItemBody; serverId?: string } & BaseEndpointArgs;
+
 // Add to playlist
 export type AddToPlaylistResponse = null | undefined;
 
@@ -1170,6 +1183,7 @@ export type StructuredLyric = {
 } & (StructuredUnsyncedLyric | StructuredSyncedLyric);
 
 export type SimilarSongsQuery = {
+    albumArtistIds: string[];
     count?: number;
     songId: string;
 };

src/renderer/api/utils.ts

@@ -1,4 +1,7 @@
 import { AxiosHeaders } from 'axios';
+import isElectron from 'is-electron';
+import semverCoerce from 'semver/functions/coerce';
+import semverGte from 'semver/functions/gte';
 import { z } from 'zod';
 import { toast } from '/@/renderer/components';
 import { useAuthStore } from '/@/renderer/store';
@@ -47,3 +50,79 @@ export const hasFeature = (server: ServerListItem | null, feature: ServerFeature
 
     return server.features[feature] ?? false;
 };
+
+export type VersionInfo = ReadonlyArray<[string, Record<string, readonly number[]>]>;
+
+/**
+ * Returns the available server features given the version string.
+ * @param versionInfo a list, in DECREASING VERSION order, of the features supported by the server.
+ *  The first version match will automatically consider the rest matched.
+ * @example
+ * ```
+ * // The CORRECT way to order
+ * const VERSION_INFO: VersionInfo = [
+ *   ['0.49.3', { [ServerFeature.SHARING_ALBUM_SONG]: [1] }],
+ *   ['0.48.0', { [ServerFeature.PLAYLISTS_SMART]: [1] }],
+ * ];
+ * // INCORRECT way to order
+ * const VERSION_INFO: VersionInfo = [
+ *   ['0.48.0', { [ServerFeature.PLAYLISTS_SMART]: [1] }],
+ *   ['0.49.3', { [ServerFeature.SHARING_ALBUM_SONG]: [1] }],
+ * ];
+ *  ```
+ * @param version the version string (SemVer)
+ * @returns a Record containing the matched features (if any) and their versions
+ */
+export const getFeatures = (
+    versionInfo: VersionInfo,
+    version: string,
+): Record<string, number[]> => {
+    const cleanVersion = semverCoerce(version);
+    const features: Record<string, number[]> = {};
+    let matched = cleanVersion === null;
+
+    for (const [version, supportedFeatures] of versionInfo) {
+        if (!matched) {
+            matched = semverGte(cleanVersion!, version);
+        }
+
+        if (matched) {
+            for (const [feature, feat] of Object.entries(supportedFeatures)) {
+                if (feature in features) {
+                    features[feature].push(...feat);
+                } else {
+                    features[feature] = [...feat];
+                }
+            }
+        }
+    }
+
+    return features;
+};
+
+export const getClientType = (): string => {
+    if (isElectron()) {
+        return 'Desktop Client';
+    }
+    const agent = navigator.userAgent;
+    switch (true) {
+        case agent.toLowerCase().indexOf('edge') > -1:
+            return 'Microsoft Edge';
+        case agent.toLowerCase().indexOf('edg/') > -1:
+            return 'Edge Chromium'; // Match also / to avoid matching for the older Edge
+        case agent.toLowerCase().indexOf('opr') > -1:
+            return 'Opera';
+        case agent.toLowerCase().indexOf('chrome') > -1:
+            return 'Chrome';
+        case agent.toLowerCase().indexOf('trident') > -1:
+            return 'Internet Explorer';
+        case agent.toLowerCase().indexOf('firefox') > -1:
+            return 'Firefox';
+        case agent.toLowerCase().indexOf('safari') > -1:
+            return 'Safari';
+        default:
+            return 'PC';
+    }
+};
+
+export const SEPARATOR_STRING = ' · ';

src/renderer/app.tsx

@@ -3,10 +3,9 @@ import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-mod
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
 import { MantineProvider } from '@mantine/core';
-import { ModalsProvider } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { initSimpleImg } from 'react-simple-img';
-import { BaseContextModal, toast } from './components';
+import { toast } from './components';
 import { useTheme } from './hooks';
 import { IsUpdatedDialog } from './is-updated-dialog';
 import { AppRouter } from './router/app-router';
@@ -20,7 +19,6 @@ import './styles/global.scss';
 import { ContextMenuProvider } from '/@/renderer/features/context-menu';
 import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
 import { PlayQueueHandlerContext } from '/@/renderer/features/player';
-import { AddToPlaylistContextModal } from '/@/renderer/features/playlists';
 import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
 import { PlayerState, usePlayerStore, useQueueControls } from '/@/renderer/store';
 import { FontType, PlaybackType, PlayerStatus } from '/@/renderer/types';
@@ -42,6 +40,7 @@ export const App = () => {
     const theme = useTheme();
     const accent = useSettingsStore((store) => store.general.accent);
     const language = useSettingsStore((store) => store.general.language);
+    const nativeImageAspect = useSettingsStore((store) => store.general.nativeAspectRatio);
     const { builtIn, custom, system, type } = useSettingsStore((state) => state.font);
     const { type: playbackType } = usePlaybackSettings();
     const { bindings } = useHotkeySettings();
@@ -92,6 +91,11 @@ export const App = () => {
         root.style.setProperty('--primary-color', accent);
     }, [accent]);
 
+    useEffect(() => {
+        const root = document.documentElement;
+        root.style.setProperty('--image-fit', nativeImageAspect ? 'contain' : 'cover');
+    }, [nativeImageAspect]);
+
     const providerValue = useMemo(() => {
         return { handlePlayQueueAdd };
     }, [handlePlayQueueAdd]);
@@ -246,27 +250,11 @@ export const App = () => {
                 },
             }}
         >
-            <ModalsProvider
-                modalProps={{
-                    centered: true,
-                    styles: {
-                        body: { position: 'relative' },
-                        content: { overflow: 'auto' },
-                    },
-                    transitionProps: {
-                        duration: 300,
-                        exitDuration: 300,
-                        transition: 'fade',
-                    },
-                }}
-                modals={{ addToPlaylist: AddToPlaylistContextModal, base: BaseContextModal }}
-            >
-                <PlayQueueHandlerContext.Provider value={providerValue}>
-                    <ContextMenuProvider>
-                        <AppRouter />
-                    </ContextMenuProvider>
-                </PlayQueueHandlerContext.Provider>
-            </ModalsProvider>
+            <PlayQueueHandlerContext.Provider value={providerValue}>
+                <ContextMenuProvider>
+                    <AppRouter />
+                </ContextMenuProvider>
+            </PlayQueueHandlerContext.Provider>
             <IsUpdatedDialog />
         </MantineProvider>
     );

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

@@ -40,13 +40,13 @@ type WebAudio = {
     gain: GainNode;
 };
 
-// Credits: http://stackoverflow.com/questions/12150729/ddg
+// Credits: https://gist.github.com/novwhisky/8a1a0168b94f3b6abfaa?permalink_comment_id=1551393#gistcomment-1551393
 // This is used so that the player will always have an <audio> element. This means that
 // player1Source and player2Source are connected BEFORE the user presses play for
 // the first time. This workaround is important for Safari, which seems to require the
 // source to be connected PRIOR to resuming audio context
 const EMPTY_SOURCE =
-    'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA==';
+    'data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV';
 
 export const AudioPlayer = forwardRef(
     (

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import formatDuration from 'format-duration';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
@@ -6,6 +7,7 @@ import { Album, AlbumArtist, Artist, Playlist, Song } from '/@/renderer/api/type
 import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
 import { CardRow } from '/@/renderer/types';
+import { formatDateAbsolute, formatDateRelative, formatRating } from '/@/renderer/utils/format';
 
 const Row = styled.div<{ $secondary?: boolean }>`
     width: 100%;
@@ -69,7 +71,10 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                         )}
                                         onClick={(e) => e.stopPropagation()}
                                     >
-                                        {row.arrayProperty && item[row.arrayProperty]}
+                                        {row.arrayProperty &&
+                                            (row.format
+                                                ? row.format(item)
+                                                : item[row.arrayProperty])}
                                     </Text>
                                 </React.Fragment>
                             ))}
@@ -88,7 +93,8 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                     overflow="hidden"
                                     size={index > 0 ? 'sm' : 'md'}
                                 >
-                                    {row.arrayProperty && item[row.arrayProperty]}
+                                    {row.arrayProperty &&
+                                        (row.format ? row.format(item) : item[row.arrayProperty])}
                                 </Text>
                             ))}
                         </Row>
@@ -114,7 +120,7 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                 )}
                                 onClick={(e) => e.stopPropagation()}
                             >
-                                {data && data[row.property]}
+                                {data && (row.format ? row.format(data) : data[row.property])}
                             </Text>
                         ) : (
                             <Text
@@ -123,7 +129,7 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                 overflow="hidden"
                                 size={index > 0 ? 'sm' : 'md'}
                             >
-                                {data && data[row.property]}
+                                {data && (row.format ? row.format(data) : data[row.property])}
                             </Text>
                         )}
                     </Row>
@@ -151,12 +157,15 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
         },
     },
     createdAt: {
+        format: (song) => formatDateAbsolute(song.createdAt),
         property: 'createdAt',
     },
     duration: {
+        format: (album) => (album.duration === null ? null : formatDuration(album.duration)),
         property: 'duration',
     },
     lastPlayedAt: {
+        format: (album) => formatDateRelative(album.lastPlayedAt),
         property: 'lastPlayedAt',
     },
     name: {
@@ -170,6 +179,7 @@ export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
         property: 'playCount',
     },
     rating: {
+        format: (album) => formatRating(album),
         property: 'userRating',
     },
     releaseDate: {
@@ -208,12 +218,15 @@ export const SONG_CARD_ROWS: { [key: string]: CardRow<Song> } = {
         },
     },
     createdAt: {
+        format: (song) => formatDateAbsolute(song.createdAt),
         property: 'createdAt',
     },
     duration: {
+        format: (song) => (song.duration === null ? null : formatDuration(song.duration)),
         property: 'duration',
     },
     lastPlayedAt: {
+        format: (song) => formatDateRelative(song.lastPlayedAt),
         property: 'lastPlayedAt',
     },
     name: {
@@ -227,6 +240,7 @@ export const SONG_CARD_ROWS: { [key: string]: CardRow<Song> } = {
         property: 'playCount',
     },
     rating: {
+        format: (song) => formatRating(song),
         property: 'userRating',
     },
     releaseDate: {
@@ -242,12 +256,14 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
         property: 'albumCount',
     },
     duration: {
+        format: (artist) => (artist.duration === null ? null : formatDuration(artist.duration)),
         property: 'duration',
     },
     genres: {
         property: 'genres',
     },
     lastPlayedAt: {
+        format: (artist) => formatDateRelative(artist.lastPlayedAt),
         property: 'lastPlayedAt',
     },
     name: {
@@ -261,6 +277,7 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
         property: 'playCount',
     },
     rating: {
+        format: (artist) => formatRating(artist),
         property: 'userRating',
     },
     songCount: {
@@ -270,6 +287,8 @@ export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
 
 export const PLAYLIST_CARD_ROWS: { [key: string]: CardRow<Playlist> } = {
     duration: {
+        format: (playlist) =>
+            playlist.duration === null ? null : formatDuration(playlist.duration),
         property: 'duration',
     },
     name: {
@@ -295,7 +314,4 @@ export const PLAYLIST_CARD_ROWS: { [key: string]: CardRow<Playlist> } = {
     songCount: {
         property: 'songCount',
     },
-    updatedAt: {
-        property: 'songCount',
-    },
 };

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

@@ -92,7 +92,7 @@ const Image = styled(SimpleImg)`
 
     img {
         height: 100%;
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 

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

@@ -14,6 +14,7 @@ import { Badge } from '/@/renderer/components/badge';
 import { AppRoute } from '/@/renderer/router/routes';
 import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import { Play } from '/@/renderer/types';
+import { usePlayButtonBehavior } from '/@/renderer/store';
 
 const Carousel = styled(motion.div)`
     position: relative;
@@ -62,7 +63,7 @@ const BackgroundImage = styled.img`
     height: 150%;
     user-select: none;
     filter: blur(24px);
-    object-fit: cover;
+    object-fit: var(--image-fit);
     object-position: 0 30%;
 `;
 
@@ -114,6 +115,7 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
     const handlePlayQueueAdd = usePlayQueueAdd();
     const [itemIndex, setItemIndex] = useState(0);
     const [direction, setDirection] = useState(0);
+    const playType = usePlayButtonBehavior();
 
     const currentItem = data?.[itemIndex];
 
@@ -222,11 +224,18 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                                                         id: [currentItem.id],
                                                         type: LibraryItem.ALBUM,
                                                     },
-                                                    playType: Play.NOW,
+                                                    playType,
                                                 });
                                             }}
                                         >
-                                            {t('player.play', { postProcess: 'titleCase' })}
+                                            {t(
+                                                playType === Play.NOW
+                                                    ? 'player.play'
+                                                    : playType === Play.NEXT
+                                                    ? 'player.addNext'
+                                                    : 'player.addLast',
+                                                { postProcess: 'titleCase' },
+                                            )}
                                         </Button>
                                         <Group spacing="sm">
                                             <Button

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

@@ -54,8 +54,10 @@ interface QueryBuilderProps {
         boolean: { label: string; value: string }[];
         date: { label: string; value: string }[];
         number: { label: string; value: string }[];
+        playlist: { label: string; value: string }[];
         string: { label: string; value: string }[];
     };
+    playlists?: { label: string; value: string }[];
     uniqueId: string;
 }
 
@@ -73,6 +75,7 @@ export const QueryBuilder = ({
     onChangeValue,
     onClearFilters,
     onResetFilters,
+    playlists,
     groupIndex,
     uniqueId,
     filters,
@@ -180,6 +183,7 @@ export const QueryBuilder = ({
                             level={level}
                             noRemove={data?.rules?.length === 1}
                             operators={operators}
+                            selectData={playlists}
                             onChangeField={onChangeField}
                             onChangeOperator={onChangeOperator}
                             onChangeValue={onChangeValue}
@@ -204,6 +208,7 @@ export const QueryBuilder = ({
                                 groupIndex={[...(groupIndex || []), index]}
                                 level={level + 1}
                                 operators={operators}
+                                playlists={playlists}
                                 uniqueId={group.uniqueId}
                                 onAddRule={onAddRule}
                                 onAddRuleGroup={onAddRuleGroup}

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

@@ -28,9 +28,10 @@ interface QueryOptionProps {
         number: { label: string; value: string }[];
         string: { label: string; value: string }[];
     };
+    selectData?: { label: string; value: string }[];
 }
 
-const QueryValueInput = ({ onChange, type, ...props }: any) => {
+const QueryValueInput = ({ onChange, type, data, ...props }: any) => {
     const [numberRange, setNumberRange] = useState([0, 0]);
 
     switch (type) {
@@ -59,7 +60,6 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     {...props}
                 />
             );
-
         case 'dateRange':
             return (
                 <>
@@ -87,7 +87,6 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     />
                 </>
             );
-
         case 'boolean':
             return (
                 <Select
@@ -99,6 +98,14 @@ const QueryValueInput = ({ onChange, type, ...props }: any) => {
                     {...props}
                 />
             );
+        case 'playlist':
+            return (
+                <Select
+                    data={data}
+                    onChange={onChange}
+                    {...props}
+                />
+            );
 
         default:
             return <></>;
@@ -116,6 +123,7 @@ export const QueryBuilderOption = ({
     onChangeField,
     onChangeOperator,
     onChangeValue,
+    selectData,
 }: QueryOptionProps) => {
     const { field, operator, uniqueId, value } = data;
 
@@ -133,10 +141,7 @@ export const QueryBuilderOption = ({
 
     const handleChangeValue = (e: any) => {
         const isDirectValue =
-            typeof e === 'string' ||
-            typeof e === 'number' ||
-            typeof e === 'undefined' ||
-            typeof e === null;
+            typeof e === 'string' || typeof e === 'number' || typeof e === 'undefined';
 
         if (isDirectValue) {
             return onChangeValue({
@@ -207,6 +212,7 @@ export const QueryBuilderOption = ({
             />
             {field ? (
                 <QueryValueInput
+                    data={selectData || []}
                     defaultValue={value}
                     maxWidth={170}
                     size="sm"

src/renderer/components/separator/index.tsx

@@ -0,0 +1,15 @@
+import { SEPARATOR_STRING } from '/@/renderer/api/utils';
+import { Text } from '/@/renderer/components/text';
+
+export const Separator = () => {
+    return (
+        <Text
+            $noSelect
+            $secondary
+            size="md"
+            style={{ display: 'inline-block', padding: '0px 3px' }}
+        >
+            {SEPARATOR_STRING}
+        </Text>
+    );
+};

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

@@ -122,7 +122,7 @@ const Image = styled(SimpleImg)`
 
     img {
         height: 100%;
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 

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

@@ -110,7 +110,7 @@ const Image = styled(SimpleImg)`
 
     img {
         height: 100%;
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -13,12 +13,15 @@ import InfiniteLoader from 'react-window-infinite-loader';
 import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
 import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/renderer/types';
 import { ListDisplayType } from '/@/renderer/types';
-import { LibraryItem } from '/@/renderer/api/types';
+import { AnyLibraryItem, Genre, LibraryItem } from '/@/renderer/api/types';
+
+type LibraryItemOrGenre = AnyLibraryItem | Genre;
 
 export type VirtualInfiniteGridRef = {
     resetLoadMoreItemsCache: () => void;
     scrollTo: (index: number) => void;
-    setItemData: (data: any[]) => void;
+    setItemData: (data: LibraryItemOrGenre[]) => void;
+    updateItemData: (rule: (item: LibraryItemOrGenre) => LibraryItemOrGenre) => void;
 };
 
 interface VirtualGridProps
@@ -26,7 +29,7 @@ interface VirtualGridProps
     cardRows: CardRow<any>[];
     display?: ListDisplayType;
     fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
-    fetchInitialData?: () => any;
+    fetchInitialData?: () => LibraryItemOrGenre[];
     handleFavorite?: (options: {
         id: string[];
         isFavorite: boolean;
@@ -69,7 +72,10 @@ export const VirtualInfiniteGrid = forwardRef(
         const listRef = useRef<any>(null);
         const loader = useRef<InfiniteLoader>(null);
 
-        const [itemData, setItemData] = useState<any[]>(fetchInitialData?.() || []);
+        // itemData can be a sparse array. Treat the intermediate elements as being undefined
+        const [itemData, setItemData] = useState<Array<LibraryItemOrGenre | undefined>>(
+            fetchInitialData?.() || [],
+        );
 
         const { itemHeight, rowCount, columnCount } = useMemo(() => {
             const itemsPerRow = width ? Math.floor(width / (itemSize + itemGap * 2)) : 5;
@@ -107,17 +113,19 @@ export const VirtualInfiniteGrid = forwardRef(
                     take: end - start,
                 });
 
-                const newData: any[] = [...itemData];
+                setItemData((itemData) => {
+                    const newData = [...itemData];
 
-                let itemIndex = 0;
-                for (let rowIndex = start; rowIndex < end; rowIndex += 1) {
-                    newData[rowIndex] = data.items[itemIndex];
-                    itemIndex += 1;
-                }
+                    let itemIndex = 0;
+                    for (let rowIndex = start; rowIndex < itemCount; rowIndex += 1) {
+                        newData[rowIndex] = data.items[itemIndex];
+                        itemIndex += 1;
+                    }
 
-                setItemData(newData);
+                    return newData;
+                });
             },
-            [columnCount, fetchFn, itemData, setItemData],
+            [columnCount, fetchFn, itemCount],
         );
 
         const debouncedLoadMoreItems = debounce(loadMoreItems, 500);
@@ -132,9 +140,12 @@ export const VirtualInfiniteGrid = forwardRef(
             scrollTo: (index: number) => {
                 listRef?.current?.scrollToItem(index);
             },
-            setItemData: (data: any[]) => {
+            setItemData: (data: LibraryItemOrGenre[]) => {
                 setItemData(data);
             },
+            updateItemData: (rule) => {
+                setItemData((data) => data.map((item) => item && rule(item)));
+            },
         }));
 
         if (loading) return null;

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

@@ -7,6 +7,7 @@ import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { Separator } from '/@/renderer/components/separator';
 
 export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
     if (value === undefined) {
@@ -29,15 +30,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
             >
                 {value?.map((item: Artist | AlbumArtist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-                        {index > 0 && (
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
+                        {index > 0 && <Separator />}
                         {item.id ? (
                             <Text
                                 $link

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

@@ -7,6 +7,7 @@ import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { Separator } from '/@/renderer/components/separator';
 
 export const ArtistCell = ({ value, data }: ICellRendererParams) => {
     if (value === undefined) {
@@ -29,15 +30,7 @@ export const ArtistCell = ({ value, data }: ICellRendererParams) => {
             >
                 {value?.map((item: Artist | AlbumArtist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-                        {index > 0 && (
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
+                        {index > 0 && <Separator />}
                         {item.id ? (
                             <Text
                                 $link

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

@@ -10,8 +10,8 @@ import styled from 'styled-components';
 import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
-import { ServerType } from '/@/renderer/api/types';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { SEPARATOR_STRING } from '/@/renderer/api/utils';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
     display: grid;
@@ -44,14 +44,14 @@ const MetadataWrapper = styled.div`
 
 const StyledImage = styled(SimpleImg)`
     img {
-        object-fit: cover;
+        object-fit: var(--image-fit);
     }
 `;
 
 export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
     const artists = useMemo(() => {
         if (!value) return null;
-        return value?.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
+        return value.artists?.length ? value.artists : value.albumArtists;
     }, [value]);
 
     if (value === undefined) {
@@ -119,7 +119,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
                     {artists?.length ? (
                         artists.map((artist: Artist | AlbumArtist, index: number) => (
                             <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
-                                {index > 0 ? ', ' : null}
+                                {index > 0 ? SEPARATOR_STRING : null}
                                 {artist.id ? (
                                     <Text
                                         $link

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

@@ -4,9 +4,11 @@ import { generatePath, Link } from 'react-router-dom';
 import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
-import { AppRoute } from '/@/renderer/router/routes';
+import { Separator } from '/@/renderer/components/separator';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 export const GenreCell = ({ value, data }: ICellRendererParams) => {
+    const genrePath = useGenreRoute();
     return (
         <CellContainer $position="left">
             <Text
@@ -16,24 +18,14 @@ export const GenreCell = ({ value, data }: ICellRendererParams) => {
             >
                 {value?.map((item: Artist | AlbumArtist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-                        {index > 0 && (
-                            <Text
-                                $secondary
-                                size="md"
-                                style={{ display: 'inline-block' }}
-                            >
-                                ,
-                            </Text>
-                        )}{' '}
+                        {index > 0 && <Separator />}
                         <Text
                             $link
                             $secondary
                             component={Link}
                             overflow="hidden"
                             size="md"
-                            to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
-                                genreId: item.id,
-                            })}
+                            to={generatePath(genrePath, { genreId: item.id })}
                         >
                             {item.name || '—'}
                         </Text>

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

@@ -15,8 +15,6 @@ import type { AgGridReactProps } from '@ag-grid-community/react';
 import { AgGridReact } from '@ag-grid-community/react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useClickOutside, useMergedRef } from '@mantine/hooks';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
 import formatDuration from 'format-duration';
 import { AnimatePresence } from 'framer-motion';
 import { generatePath } from 'react-router';
@@ -43,6 +41,7 @@ import { useFixedTableHeader } from '/@/renderer/components/virtual-table/hooks/
 import { NoteCell } from '/@/renderer/components/virtual-table/cells/note-cell';
 import { RowIndexCell } from '/@/renderer/components/virtual-table/cells/row-index-cell';
 import i18n from '/@/i18n/i18n';
+import { formatDateAbsolute, formatDateRelative, formatSizeString } from '/@/renderer/utils/format';
 
 export * from './table-config-dropdown';
 export * from './table-pagination';
@@ -63,8 +62,6 @@ const DummyHeader = styled.div<{ height?: number }>`
     height: ${({ height }) => height || 36}px;
 `;
 
-dayjs.extend(relativeTime);
-
 const tableColumns: { [key: string]: ColDef } = {
     actions: {
         cellClass: 'ag-cell-favorite',
@@ -181,8 +178,7 @@ const tableColumns: { [key: string]: ColDef } = {
             GenericTableHeader(params, { position: 'center' }),
         headerName: i18n.t('table.column.dateAdded'),
         suppressSizeToFit: true,
-        valueFormatter: (params: ValueFormatterParams) =>
-            params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
+        valueFormatter: (params: ValueFormatterParams) => formatDateAbsolute(params.value),
         valueGetter: (params: ValueGetterParams) =>
             params.data ? params.data.createdAt : undefined,
         width: 130,
@@ -224,8 +220,7 @@ const tableColumns: { [key: string]: ColDef } = {
         headerComponent: (params: IHeaderParams) =>
             GenericTableHeader(params, { position: 'center' }),
         headerName: i18n.t('table.column.lastPlayed'),
-        valueFormatter: (params: ValueFormatterParams) =>
-            params.value ? dayjs(params.value).fromNow() : '',
+        valueFormatter: (params: ValueFormatterParams) => formatDateRelative(params.value),
         valueGetter: (params: ValueGetterParams) =>
             params.data ? params.data.lastPlayedAt : undefined,
         width: 130,
@@ -257,8 +252,7 @@ const tableColumns: { [key: string]: ColDef } = {
             GenericTableHeader(params, { position: 'center' }),
         headerName: i18n.t('table.column.releaseDate'),
         suppressSizeToFit: true,
-        valueFormatter: (params: ValueFormatterParams) =>
-            params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
+        valueFormatter: (params: ValueFormatterParams) => formatDateAbsolute(params.value),
         valueGetter: (params: ValueGetterParams) =>
             params.data ? params.data.releaseDate : undefined,
         width: 130,
@@ -320,6 +314,16 @@ const tableColumns: { [key: string]: ColDef } = {
         },
         width: 65,
     },
+    size: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.SIZE,
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: i18n.t('table.column.size'),
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? formatSizeString(params.data.size) : undefined,
+        width: 80,
+    },
     songCount: {
         cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
         colId: TableColumn.SONG_COUNT,

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

@@ -1,7 +1,7 @@
 import { Center, Group, Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
-import { RiCheckFill } from 'react-icons/ri';
-import { Link, Navigate } from 'react-router-dom';
+import { RiCheckFill, RiEdit2Line, RiHome4Line } from 'react-icons/ri';
+import { Link } from 'react-router-dom';
 import { Button, PageHeader, Text } from '/@/renderer/components';
 import { ActionRequiredContainer } from '/@/renderer/features/action-required/components/action-required-container';
 import { ServerCredentialRequired } from '/@/renderer/features/action-required/components/server-credential-required';
@@ -9,12 +9,14 @@ import { ServerRequired } from '/@/renderer/features/action-required/components/
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
+import { openModal } from '@mantine/modals';
+import { ServerList } from '/@/renderer/features/servers';
 
 const ActionRequiredRoute = () => {
     const { t } = useTranslation();
     const currentServer = useCurrentServer();
     const isServerRequired = !currentServer;
-    const isCredentialRequired = false;
+    const isCredentialRequired = currentServer && !currentServer.credential;
 
     const checks = [
         {
@@ -32,6 +34,13 @@ const ActionRequiredRoute = () => {
     const canReturnHome = checks.every((c) => c.valid);
     const displayedCheck = checks.find((c) => !c.valid);
 
+    const handleManageServersModal = () => {
+        openModal({
+            children: <ServerList />,
+            title: 'Manage Servers',
+        });
+    };
+
     return (
         <AnimatedPage>
             <PageHeader />
@@ -50,7 +59,6 @@ const ActionRequiredRoute = () => {
                     <Stack mt="2rem">
                         {canReturnHome && (
                             <>
-                                <Navigate to={AppRoute.HOME} />
                                 <Group
                                     noWrap
                                     position="center"
@@ -64,6 +72,7 @@ const ActionRequiredRoute = () => {
                                 <Button
                                     component={Link}
                                     disabled={!canReturnHome}
+                                    leftIcon={<RiHome4Line />}
                                     to={AppRoute.HOME}
                                     variant="filled"
                                 >
@@ -71,6 +80,23 @@ const ActionRequiredRoute = () => {
                                 </Button>
                             </>
                         )}
+                        {!displayedCheck && (
+                            <Group
+                                noWrap
+                                position="center"
+                            >
+                                <Button
+                                    fullWidth
+                                    leftIcon={<RiEdit2Line />}
+                                    variant="filled"
+                                    onClick={handleManageServersModal}
+                                >
+                                    {t('page.appMenu.manageServers', {
+                                        postProcess: 'sentenceCase',
+                                    })}
+                                </Button>
+                            </Group>
+                        )}
                     </Stack>
                 </Stack>
             </Center>

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

@@ -45,6 +45,7 @@ import {
 } from '/@/renderer/store/settings.store';
 import { Play } from '/@/renderer/types';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 const isFullWidthRow = (node: RowNode) => {
     return node.id?.startsWith('disc-');
@@ -81,6 +82,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
     const isFocused = useAppFocus();
     const currentSong = useCurrentSong();
     const { externalLinks } = useGeneralSettings();
+    const genreRoute = useGenreRoute();
 
     const columnDefs = useMemo(
         () => getColumnDefs(tableConfig.columns, false, 'albumDetail'),
@@ -389,7 +391,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                                     component={Link}
                                     radius={0}
                                     size="md"
-                                    to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
+                                    to={generatePath(genreRoute, {
                                         genreId: genre.id,
                                     })}
                                     variant="outline"

src/renderer/features/albums/components/album-list-grid-view.tsx

@@ -19,10 +19,10 @@ import {
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
     const queryClient = useQueryClient();
@@ -36,33 +36,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
     const scrollOffset = searchParams.get('scrollOffset');
     const initialScrollOffset = Number(id ? scrollOffset : grid?.scrollOffset) || 0;
 
-    const createFavoriteMutation = useCreateFavorite({});
-    const deleteFavoriteMutation = useDeleteFavorite({});
-
-    const handleFavorite = (options: {
-        id: string[];
-        isFavorite: boolean;
-        itemType: LibraryItem;
-    }) => {
-        const { id, itemType, isFavorite } = options;
-        if (isFavorite) {
-            deleteFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        } else {
-            createFavoriteMutation.mutate({
-                query: {
-                    id,
-                    type: itemType,
-                },
-                serverId: server?.id,
-            });
-        }
-    };
+    const handleFavorite = useHandleFavorite({ gridRef, server });
 
     const cardRows = useMemo(() => {
         const rows: CardRow<Album>[] = [ALBUM_CARD_ROWS.name];

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

@@ -545,7 +545,7 @@ export const AlbumListHeaderFilters = ({ gridRef, tableRef }: AlbumListHeaderFil
                             <Slider
                                 defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight}
                                 max={isGrid ? 300 : 100}
-                                min={isGrid ? 150 : 25}
+                                min={isGrid ? 100 : 25}
                                 onChangeEnd={handleItemSize}
                             />
                         </DropdownMenu.Item>

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

@@ -1,63 +1,59 @@
-import type { ChangeEvent, MutableRefObject } from 'react';
+import { useEffect, useRef, type ChangeEvent, type MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
-import { useListFilterRefresh } from '../../../hooks/use-list-filter-refresh';
 import { LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import { useListContext } from '/@/renderer/context/list-context';
 import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import {
-    AlbumListFilter,
-    useCurrentServer,
-    useListStoreActions,
-    useListStoreByKey,
-    usePlayButtonBehavior,
-} from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { AlbumListFilter, useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
 import { titleCase } from '/@/renderer/utils';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface AlbumListHeaderProps {
+    genreId?: string;
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
     title?: string;
 }
 
-export const AlbumListHeader = ({ itemCount, gridRef, tableRef, title }: AlbumListHeaderProps) => {
+export const AlbumListHeader = ({
+    genreId,
+    itemCount,
+    gridRef,
+    tableRef,
+    title,
+}: AlbumListHeaderProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
-    const { setFilter, setTablePagination } = useListStoreActions();
     const cq = useContainerQuery();
-    const { pageKey, handlePlay } = useListContext();
-    const { display, filter } = useListStoreByKey({ key: pageKey });
     const playButtonBehavior = usePlayButtonBehavior();
-
-    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+    const genreRef = useRef<string>();
+    const { filter, handlePlay, refresh, search } = useDisplayRefresh({
+        gridRef,
         itemType: LibraryItem.ALBUM,
         server,
+        tableRef,
     });
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        const searchTerm = e.target.value === '' ? undefined : e.target.value;
-        const updatedFilters = setFilter({
-            data: { searchTerm },
-            itemType: LibraryItem.ALBUM,
-            key: pageKey,
-        }) as AlbumListFilter;
+        const updatedFilters = search(e) as AlbumListFilter;
 
-        if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
-            handleRefreshTable(tableRef, updatedFilters);
-            setTablePagination({ data: { currentPage: 0 }, key: pageKey });
-        } else {
-            handleRefreshGrid(gridRef, updatedFilters);
-        }
+        refresh(updatedFilters);
     }, 500);
 
+    useEffect(() => {
+        if (genreRef.current && genreRef.current !== genreId) {
+            refresh(filter);
+        }
+
+        genreRef.current = genreId;
+    }, [filter, genreId, refresh, tableRef]);
+
     return (
         <Stack
             ref={cq.ref}

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

@@ -1,10 +1,11 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { LibraryItem } from '/@/renderer/api/types';
+import { GenreListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
@@ -15,19 +16,32 @@ import { AnimatedPage } from '/@/renderer/features/shared';
 import { queryClient } from '/@/renderer/lib/react-query';
 import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
 import { Play } from '/@/renderer/types';
+import { useGenreList } from '/@/renderer/features/genres';
+import { titleCase } from '/@/renderer/utils';
 
 const AlbumListRoute = () => {
+    const { t } = useTranslation();
     const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
     const [searchParams] = useSearchParams();
-    const { albumArtistId } = useParams();
+    const { albumArtistId, genreId } = useParams();
     const pageKey = albumArtistId ? `albumArtistAlbum` : 'album';
     const handlePlayQueueAdd = usePlayQueueAdd();
 
     const customFilters = useMemo(() => {
         const value = {
             ...(albumArtistId && { artistIds: [albumArtistId] }),
+            ...(genreId && {
+                _custom: {
+                    jellyfin: {
+                        GenreIds: genreId,
+                    },
+                    navidrome: {
+                        genre_id: genreId,
+                    },
+                },
+            }),
         };
 
         if (isEmpty(value)) {
@@ -35,13 +49,35 @@ const AlbumListRoute = () => {
         }
 
         return value;
-    }, [albumArtistId]);
+    }, [albumArtistId, genreId]);
 
     const albumListFilter = useListFilterByKey({
         filter: customFilters,
         key: pageKey,
     });
 
+    const genreList = useGenreList({
+        options: {
+            cacheTime: 1000 * 60 * 60,
+            enabled: !!genreId,
+        },
+        query: {
+            sortBy: GenreListSort.NAME,
+            sortOrder: SortOrder.ASC,
+            startIndex: 0,
+        },
+        serverId: server?.id,
+    });
+
+    const genreTitle = useMemo(() => {
+        if (!genreList.data) return '';
+        const genre = genreList.data.items.find((g) => g.id === genreId);
+
+        if (!genre) return 'Unknown';
+
+        return genre?.name;
+    }, [genreId, genreList.data]);
+
     const itemCountCheck = useAlbumList({
         options: {
             cacheTime: 1000 * 60,
@@ -98,19 +134,27 @@ const AlbumListRoute = () => {
         return {
             customFilters,
             handlePlay,
-            id: albumArtistId ?? undefined,
+            id: albumArtistId ?? genreId,
             pageKey,
         };
-    }, [albumArtistId, customFilters, handlePlay, pageKey]);
+    }, [albumArtistId, customFilters, genreId, handlePlay, pageKey]);
+
+    const artist = searchParams.get('artistName');
+    const title = artist
+        ? t('page.albumList.artistAlbums', { artist })
+        : genreId
+        ? t('page.albumList.genreAlbums', { genre: titleCase(genreTitle) })
+        : undefined;
 
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <AlbumListHeader
+                    genreId={genreId}
                     gridRef={gridRef}
                     itemCount={itemCount}
                     tableRef={tableRef}
-                    title={searchParams.get('artistName') || undefined}
+                    title={title}
                 />
                 <AlbumListContent
                     gridRef={gridRef}

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

@@ -0,0 +1,260 @@
+import { Button, Spinner, Spoiler, Text } from '/@/renderer/components';
+import {
+    AnimatedPage,
+    LibraryHeader,
+    PlayButton,
+    useCreateFavorite,
+    useDeleteFavorite,
+} from '/@/renderer/features/shared';
+import { Fragment } from 'react';
+import { generatePath, useParams } from 'react-router';
+import { useContainerQuery, useFastAverageColor } from '/@/renderer/hooks';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { LibraryItem, SongDetailResponse } from '/@/renderer/api/types';
+import { useCurrentServer } from '/@/renderer/store';
+import { Stack, Group, Box, Center } from '@mantine/core';
+import { Link } from 'react-router-dom';
+import { AppRoute } from '/@/renderer/router/routes';
+import { formatDurationString } from '/@/renderer/utils';
+import { RiErrorWarningLine, RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
+import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
+import { SONG_ALBUM_PAGE } from '/@/renderer/features/context-menu/context-menu-items';
+import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu';
+import { styled } from 'styled-components';
+import { queryClient } from '/@/renderer/lib/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { useTranslation } from 'react-i18next';
+
+const DetailContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 1rem 2rem 5rem;
+    overflow: hidden;
+`;
+
+const DummyAlbumDetailRoute = () => {
+    const cq = useContainerQuery();
+    const { t } = useTranslation();
+
+    const { albumId } = useParams() as { albumId: string };
+    const server = useCurrentServer();
+    const queryKey = queryKeys.songs.detail(server?.id || '', albumId);
+    const detailQuery = useQuery({
+        queryFn: ({ signal }) => {
+            if (!server) throw new Error('Server not found');
+            return api.controller.getSongDetail({
+                apiClientProps: { server, signal },
+                query: { id: albumId },
+            });
+        },
+        queryKey,
+    });
+
+    const { color: background, colorId } = useFastAverageColor({
+        id: albumId,
+        src: detailQuery.data?.imageUrl,
+        srcLoaded: !detailQuery.isLoading,
+    });
+    const handlePlayQueueAdd = usePlayQueueAdd();
+    const playButtonBehavior = usePlayButtonBehavior();
+
+    const createFavoriteMutation = useCreateFavorite({});
+    const deleteFavoriteMutation = useDeleteFavorite({});
+
+    const handleFavorite = async () => {
+        if (!detailQuery?.data) return;
+
+        const wasFavorite = detailQuery.data.userFavorite;
+
+        try {
+            if (wasFavorite) {
+                await deleteFavoriteMutation.mutateAsync({
+                    query: {
+                        id: [detailQuery.data.id],
+                        type: LibraryItem.SONG,
+                    },
+                    serverId: detailQuery.data.serverId,
+                });
+            } else {
+                await createFavoriteMutation.mutateAsync({
+                    query: {
+                        id: [detailQuery.data.id],
+                        type: LibraryItem.SONG,
+                    },
+                    serverId: detailQuery.data.serverId,
+                });
+            }
+
+            queryClient.setQueryData<SongDetailResponse>(queryKey, {
+                ...detailQuery.data,
+                userFavorite: !wasFavorite,
+            });
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
+    const comment = detailQuery?.data?.comment;
+
+    const handleGeneralContextMenu = useHandleGeneralContextMenu(LibraryItem.SONG, SONG_ALBUM_PAGE);
+
+    const handlePlay = () => {
+        handlePlayQueueAdd?.({
+            byItemType: {
+                id: [albumId],
+                type: LibraryItem.SONG,
+            },
+            playType: playButtonBehavior,
+        });
+    };
+
+    if (!background || colorId !== albumId) {
+        return <Spinner container />;
+    }
+
+    const metadataItems = [
+        {
+            id: 'releaseYear',
+            secondary: false,
+            value: detailQuery?.data?.releaseYear,
+        },
+        {
+            id: 'duration',
+            secondary: false,
+            value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
+        },
+    ];
+
+    return (
+        <AnimatedPage key={`dummy-album-detail-${albumId}`}>
+            <Stack ref={cq.ref}>
+                <LibraryHeader
+                    background={background}
+                    imageUrl={detailQuery?.data?.imageUrl}
+                    item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
+                    title={detailQuery?.data?.name || ''}
+                >
+                    <Stack spacing="sm">
+                        <Group spacing="sm">
+                            {metadataItems.map((item, index) => (
+                                <Fragment key={`item-${item.id}-${index}`}>
+                                    {index > 0 && <Text $noSelect>•</Text>}
+                                    <Text $secondary={item.secondary}>{item.value}</Text>
+                                </Fragment>
+                            ))}
+                        </Group>
+                        <Group
+                            mah="4rem"
+                            spacing="md"
+                            sx={{
+                                WebkitBoxOrient: 'vertical',
+                                WebkitLineClamp: 2,
+                                overflow: 'hidden',
+                            }}
+                        >
+                            {detailQuery?.data?.albumArtists.map((artist) => (
+                                <Text
+                                    key={`artist-${artist.id}`}
+                                    $link
+                                    component={Link}
+                                    fw={600}
+                                    size="md"
+                                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                        albumArtistId: artist.id,
+                                    })}
+                                    variant="subtle"
+                                >
+                                    {artist.name}
+                                </Text>
+                            ))}
+                        </Group>
+                    </Stack>
+                </LibraryHeader>
+            </Stack>
+            <DetailContainer>
+                <Box component="section">
+                    <Group
+                        position="apart"
+                        spacing="sm"
+                    >
+                        <Group>
+                            <PlayButton onClick={() => handlePlay()} />
+                            <Button
+                                compact
+                                loading={
+                                    createFavoriteMutation.isLoading ||
+                                    deleteFavoriteMutation.isLoading
+                                }
+                                variant="subtle"
+                                onClick={handleFavorite}
+                            >
+                                {detailQuery?.data?.userFavorite ? (
+                                    <RiHeartFill
+                                        color="red"
+                                        size={20}
+                                    />
+                                ) : (
+                                    <RiHeartLine size={20} />
+                                )}
+                            </Button>
+                            <Button
+                                compact
+                                variant="subtle"
+                                onClick={(e) => {
+                                    if (!detailQuery?.data) return;
+                                    handleGeneralContextMenu(e, [detailQuery.data!]);
+                                }}
+                            >
+                                <RiMoreFill size={20} />
+                            </Button>
+                        </Group>
+                    </Group>
+                </Box>
+                {showGenres && (
+                    <Box component="section">
+                        <Group spacing="sm">
+                            {detailQuery?.data?.genres?.map((genre) => (
+                                <Button
+                                    key={`genre-${genre.id}`}
+                                    compact
+                                    component={Link}
+                                    radius={0}
+                                    size="md"
+                                    to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
+                                        genreId: genre.id,
+                                    })}
+                                    variant="outline"
+                                >
+                                    {genre.name}
+                                </Button>
+                            ))}
+                        </Group>
+                    </Box>
+                )}
+                {comment && (
+                    <Box component="section">
+                        <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>
+                    </Box>
+                )}
+                <Box component="section">
+                    <Center>
+                        <Group mr={5}>
+                            <RiErrorWarningLine
+                                color="var(--danger-color)"
+                                size={30}
+                            />
+                        </Group>
+                        <h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
+                    </Center>
+                </Box>
+            </DetailContainer>
+        </AnimatedPage>
+    );
+};
+
+export default DummyAlbumDetailRoute;

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

@@ -39,6 +39,8 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { CardRow, Play, TableColumn } from '/@/renderer/types';
+import { sanitize } from '/@/renderer/utils/sanitize';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 const ContentContainer = styled.div`
     position: relative;
@@ -68,6 +70,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
     const cq = useContainerQuery();
     const handlePlayQueueAdd = usePlayQueueAdd();
     const server = useCurrentServer();
+    const genrePath = useGenreRoute();
 
     const detailQuery = useAlbumArtistDetail({
         query: { id: albumArtistId },
@@ -96,7 +99,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
             _custom: {
                 jellyfin: {
                     ...(server?.type === ServerType.JELLYFIN
-                        ? { ArtistIds: albumArtistId }
+                        ? { AlbumArtistIds: albumArtistId }
                         : undefined),
                 },
                 navidrome: {
@@ -330,8 +333,13 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
 
     const topSongs = topSongsQuery?.data?.items?.slice(0, 10);
 
-    const showBiography =
-        detailQuery?.data?.biography !== undefined && detailQuery?.data?.biography !== null;
+    const biography = useMemo(() => {
+        const bio = detailQuery?.data?.biography;
+
+        if (!bio) return null;
+        return sanitize(bio);
+    }, [detailQuery?.data?.biography]);
+
     const showTopSongs = topSongsQuery?.data?.items?.length;
     const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
     const mbzId = detailQuery?.data?.mbz;
@@ -408,7 +416,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                     component={Link}
                                     radius="md"
                                     size="md"
-                                    to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
+                                    to={generatePath(genrePath, {
                                         genreId: genre.id,
                                     })}
                                     variant="outline"
@@ -459,7 +467,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                         </Group>
                     </Box>
                 ) : null}
-                {showBiography ? (
+                {biography ? (
                     <Box
                         component="section"
                         maw="1280px"
@@ -472,9 +480,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                 artist: detailQuery?.data?.name,
                             })}
                         </TextTitle>
-                        <Spoiler
-                            dangerouslySetInnerHTML={{ __html: detailQuery?.data?.biography || '' }}
-                        />
+                        <Spoiler dangerouslySetInnerHTML={{ __html: biography }} />
                     </Box>
                 ) : null}
                 {showTopSongs ? (

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

@@ -11,6 +11,7 @@ import {
     AlbumArtistListQuery,
     AlbumArtistListResponse,
     AlbumArtistListSort,
+    ArtistListQuery,
     LibraryItem,
 } from '/@/renderer/api/types';
 import { ALBUMARTIST_CARD_ROWS } from '/@/renderer/components';
@@ -20,6 +21,7 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 interface AlbumArtistListGridViewProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -34,6 +36,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
     const { pageKey } = useListContext();
     const { grid, display, filter } = useListStoreByKey({ key: pageKey });
     const { setGrid } = useListStoreActions();
+    const handleFavorite = useHandleFavorite({ gridRef, server });
 
     const fetchInitialData = useCallback(() => {
         const query: Omit<AlbumArtistListQuery, 'startIndex' | 'limit'> = {
@@ -70,16 +73,13 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
 
     const fetch = useCallback(
         async ({ skip: startIndex, take: limit }: { skip: number; take: number }) => {
-            const queryKey = queryKeys.albumArtists.list(
-                server?.id || '',
-                {
-                    ...filter,
-                },
-                {
-                    limit,
-                    startIndex,
-                },
-            );
+            const query: ArtistListQuery = {
+                ...filter,
+                limit,
+                startIndex,
+            };
+
+            const queryKey = queryKeys.albumArtists.list(server?.id || '', query);
 
             const albumArtistsRes = await queryClient.fetchQuery(
                 queryKey,
@@ -154,6 +154,7 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
                         fetchInitialData={fetchInitialData}
+                        handleFavorite={handleFavorite}
                         handlePlayQueueAdd={handlePlayQueueAdd}
                         height={height}
                         initialScrollOffset={grid?.scrollOffset || 0}

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

@@ -3,8 +3,6 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
-import { useListContext } from '../../../context/list-context';
-import { useListStoreByKey } from '../../../store/list.store';
 import { FilterBar } from '../../shared/components/filter-bar';
 import { LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
@@ -12,9 +10,8 @@ import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
-import { AlbumArtistListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { AlbumArtistListFilter, useCurrentServer } from '/@/renderer/store';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface AlbumArtistListHeaderProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -29,30 +26,18 @@ export const AlbumArtistListHeader = ({
 }: AlbumArtistListHeaderProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
-    const { pageKey } = useListContext();
-    const { display, filter } = useListStoreByKey({ key: pageKey });
-    const { setFilter, setTablePagination } = useListStoreActions();
     const cq = useContainerQuery();
 
-    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+    const { filter, refresh, search } = useDisplayRefresh({
+        gridRef,
         itemType: LibraryItem.ALBUM_ARTIST,
         server,
+        tableRef,
     });
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        const searchTerm = e.target.value === '' ? undefined : e.target.value;
-        const updatedFilters = setFilter({
-            data: { searchTerm },
-            itemType: LibraryItem.ALBUM_ARTIST,
-            key: pageKey,
-        }) as AlbumArtistListFilter;
-
-        if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
-            handleRefreshTable(tableRef, updatedFilters);
-            setTablePagination({ data: { currentPage: 0 }, key: pageKey });
-        } else {
-            handleRefreshGrid(gridRef, updatedFilters);
-        }
+        const updatedFilters = search(e) as AlbumArtistListFilter;
+        refresh(updatedFilters);
     }, 500);
 
     return (

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

@@ -9,37 +9,52 @@ export const QUEUE_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { divider: true, id: 'removeFromFavorites' },
     { children: true, disabled: false, id: 'setRating' },
     { disabled: false, id: 'deselectAll' },
+    { divider: true, id: 'showDetails' },
 ];
 
 export const SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'play' },
     { id: 'playLast' },
-    { divider: true, id: 'playNext' },
+    { id: 'playNext' },
+    { divider: true, id: 'playSimilarSongs' },
     { divider: true, id: 'addToPlaylist' },
     { id: 'addToFavorites' },
     { divider: true, id: 'removeFromFavorites' },
-    { children: true, disabled: false, id: 'setRating' },
+    { children: true, disabled: false, divider: true, id: 'setRating' },
+    { divider: true, id: 'shareItem' },
+    { divider: true, id: 'showDetails' },
+];
+
+export const SONG_ALBUM_PAGE: SetContextMenuItems = [
+    { id: 'play' },
+    { id: 'playLast' },
+    { divider: true, id: 'playNext' },
+    { divider: true, id: 'addToPlaylist' },
 ];
 
 export const PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'play' },
     { id: 'playLast' },
-    { divider: true, id: 'playNext' },
+    { id: 'playNext' },
+    { divider: true, id: 'playSimilarSongs' },
     { id: 'addToPlaylist' },
     { divider: true, id: 'removeFromPlaylist' },
     { id: 'addToFavorites' },
     { divider: true, id: 'removeFromFavorites' },
     { children: true, disabled: false, id: 'setRating' },
+    { divider: true, id: 'showDetails' },
 ];
 
 export const SMART_PLAYLIST_SONG_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'play' },
     { id: 'playLast' },
-    { divider: true, id: 'playNext' },
+    { id: 'playNext' },
+    { divider: true, id: 'playSimilarSongs' },
     { divider: true, id: 'addToPlaylist' },
     { id: 'addToFavorites' },
     { divider: true, id: 'removeFromFavorites' },
     { children: true, disabled: false, id: 'setRating' },
+    { divider: true, id: 'showDetails' },
 ];
 
 export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
@@ -49,7 +64,9 @@ export const ALBUM_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { divider: true, id: 'addToPlaylist' },
     { id: 'addToFavorites' },
     { id: 'removeFromFavorites' },
-    { children: true, disabled: false, id: 'setRating' },
+    { children: true, disabled: false, divider: true, id: 'setRating' },
+    { divider: true, id: 'shareItem' },
+    { divider: true, id: 'showDetails' },
 ];
 
 export const GENRE_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
@@ -67,6 +84,7 @@ export const ARTIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [
     { id: 'addToFavorites' },
     { divider: true, id: 'removeFromFavorites' },
     { children: true, disabled: false, id: 'setRating' },
+    { divider: true, id: 'showDetails' },
 ];
 
 export const PLAYLIST_CONTEXT_MENU_ITEMS: SetContextMenuItems = [

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

@@ -11,6 +11,8 @@ import {
 import { closeAllModals, openContextModal, openModal } from '@mantine/modals';
 import { AnimatePresence } from 'framer-motion';
 import isElectron from 'is-electron';
+import { ServerFeature } from '/@/renderer/api/features-types';
+import { hasFeature } from '/@/renderer/api/utils';
 import { useTranslation } from 'react-i18next';
 import {
     RiAddBoxFill,
@@ -25,6 +27,9 @@ import {
     RiPlayListAddFill,
     RiStarFill,
     RiCloseCircleLine,
+    RiShareForwardFill,
+    RiInformationFill,
+    RiRadio2Fill,
 } from 'react-icons/ri';
 import { AnyLibraryItems, LibraryItem, ServerType, AnyLibraryItem } from '/@/renderer/api/types';
 import {
@@ -46,6 +51,7 @@ import { useDeletePlaylist } from '/@/renderer/features/playlists';
 import { useRemoveFromPlaylist } from '/@/renderer/features/playlists/mutations/remove-from-playlist-mutation';
 import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
 import {
+    getServerById,
     useAuthStore,
     useCurrentServer,
     usePlayerStore,
@@ -53,6 +59,9 @@ import {
 } from '/@/renderer/store';
 import { usePlaybackType } from '/@/renderer/store/settings.store';
 import { Play, PlaybackType } from '/@/renderer/types';
+import { ItemDetailsModal } from '/@/renderer/features/item-details/components/item-details-modal';
+import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { controller } from '/@/renderer/api/controller';
 
 type ContextMenuContextProps = {
     closeContextMenu: () => void;
@@ -76,12 +85,11 @@ const ContextMenuContext = createContext<ContextMenuContextProps>({
     },
 });
 
-const JELLYFIN_IGNORED_MENU_ITEMS: ContextMenuItemType[] = ['setRating'];
+const JELLYFIN_IGNORED_MENU_ITEMS: ContextMenuItemType[] = ['setRating', 'shareItem'];
 // const NAVIDROME_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
 // const SUBSONIC_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
-const remote = isElectron() ? window.electron.remote : null;
 
 export interface ContextMenuProviderProps {
     children: ReactNode;
@@ -600,6 +608,22 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         }
     }, [ctx.dataNodes, moveToTopOfQueue, playbackType]);
 
+    const handleShareItem = useCallback(() => {
+        if (!ctx.dataNodes && !ctx.data) return;
+
+        const uniqueIds = ctx.data.map((node) => node.id);
+
+        openContextModal({
+            innerProps: {
+                itemIds: uniqueIds,
+                resourceType: ctx.data[0].itemType,
+            },
+            modal: 'shareItem',
+            size: 'md',
+            title: t('page.contextMenu.shareItem', { postProcess: 'sentenceCase' }),
+        });
+    }, [ctx.data, ctx.dataNodes, t]);
+
     const handleRemoveSelected = useCallback(() => {
         const uniqueIds = ctx.dataNodes?.map((row) => row.data.uniqueId);
         if (!uniqueIds?.length) return;
@@ -619,7 +643,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         ctx.tableApi?.redrawRows();
 
         if (isCurrentSongRemoved) {
-            remote?.updateSong({ song: playerData.current.song });
+            updateSong(playerData.current.song);
         }
     }, [ctx.dataNodes, ctx.tableApi, playbackType, removeFromQueue]);
 
@@ -627,6 +651,28 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         ctx.tableApi?.deselectAll();
     }, [ctx.tableApi]);
 
+    const handleOpenItemDetails = useCallback(() => {
+        const item = ctx.data[0];
+
+        openModal({
+            children: <ItemDetailsModal item={item} />,
+            size: 'xl',
+            title: t('page.contextMenu.showDetails', { postProcess: 'titleCase' }),
+        });
+    }, [ctx.data, t]);
+
+    const handleSimilar = useCallback(async () => {
+        const item = ctx.data[0];
+        const songs = await controller.getSimilarSongs({
+            apiClientProps: {
+                server: getServerById(item.serverId),
+                signal: undefined,
+            },
+            query: { albumArtistIds: item.albumArtistIds, songId: item.id },
+        });
+        handlePlayQueueAdd?.({ byData: [ctx.data[0], ...songs], playType: Play.NOW });
+    }, [ctx, handlePlayQueueAdd]);
+
     const contextMenuItems: Record<ContextMenuItemType, ContextMenuItem> = useMemo(() => {
         return {
             addToFavorites: {
@@ -688,6 +734,12 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 leftIcon: <RiAddCircleFill size="1.1rem" />,
                 onClick: () => handlePlay(Play.NEXT),
             },
+            playSimilarSongs: {
+                id: 'playSimilarSongs',
+                label: t('page.contextMenu.playSimilarSongs', { postProcess: 'sentenceCase' }),
+                leftIcon: <RiRadio2Fill size="1.1rem" />,
+                onClick: handleSimilar,
+            },
             removeFromFavorites: {
                 id: 'removeFromFavorites',
                 label: t('page.contextMenu.removeFromFavorites', { postProcess: 'sentenceCase' }),
@@ -775,20 +827,39 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 onClick: () => {},
                 rightIcon: <RiArrowRightSFill size="1.2rem" />,
             },
+            shareItem: {
+                disabled: !hasFeature(server, ServerFeature.SHARING_ALBUM_SONG),
+                id: 'shareItem',
+                label: t('page.contextMenu.shareItem', { postProcess: 'sentenceCase' }),
+                leftIcon: <RiShareForwardFill size="1.1rem" />,
+                onClick: handleShareItem,
+            },
+            showDetails: {
+                disabled: ctx.data?.length !== 1 || !ctx.data[0].itemType,
+                id: 'showDetails',
+                label: t('page.contextMenu.showDetails', { postProcess: 'sentenceCase' }),
+                leftIcon: <RiInformationFill />,
+                onClick: handleOpenItemDetails,
+            },
         };
     }, [
+        t,
         handleAddToFavorites,
         handleAddToPlaylist,
+        openDeletePlaylistModal,
         handleDeselectAll,
         handleMoveToBottom,
         handleMoveToTop,
-        handlePlay,
         handleRemoveFromFavorites,
         handleRemoveFromPlaylist,
         handleRemoveSelected,
+        ctx.data,
+        handleOpenItemDetails,
+        handlePlay,
         handleUpdateRating,
-        openDeletePlaylistModal,
-        t,
+        handleShareItem,
+        server,
+        handleSimilar,
     ]);
 
     const mergedRef = useMergedRef(ref, clickOutsideRef);
@@ -819,72 +890,80 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                                 >
                                     {ctx.menuItems?.map((item) => {
                                         return (
-                                            <Fragment key={`context-menu-${item.id}`}>
-                                                {item.children ? (
-                                                    <HoverCard
-                                                        offset={5}
-                                                        position="right"
-                                                    >
-                                                        <HoverCard.Target>
-                                                            <ContextMenuButton
-                                                                disabled={item.disabled}
-                                                                leftIcon={
-                                                                    contextMenuItems[item.id]
-                                                                        .leftIcon
-                                                                }
-                                                                rightIcon={
-                                                                    contextMenuItems[item.id]
-                                                                        .rightIcon
-                                                                }
-                                                                onClick={
-                                                                    contextMenuItems[item.id]
-                                                                        .onClick
-                                                                }
-                                                            >
-                                                                {contextMenuItems[item.id].label}
-                                                            </ContextMenuButton>
-                                                        </HoverCard.Target>
-                                                        <HoverCard.Dropdown>
-                                                            <Stack spacing={0}>
-                                                                {contextMenuItems[
-                                                                    item.id
-                                                                ].children?.map((child) => (
-                                                                    <ContextMenuButton
-                                                                        key={`sub-${child.id}`}
-                                                                        disabled={child.disabled}
-                                                                        leftIcon={child.leftIcon}
-                                                                        rightIcon={child.rightIcon}
-                                                                        onClick={child.onClick}
-                                                                    >
-                                                                        {child.label}
-                                                                    </ContextMenuButton>
-                                                                ))}
-                                                            </Stack>
-                                                        </HoverCard.Dropdown>
-                                                    </HoverCard>
-                                                ) : (
-                                                    <ContextMenuButton
-                                                        disabled={item.disabled}
-                                                        leftIcon={
-                                                            contextMenuItems[item.id].leftIcon
-                                                        }
-                                                        rightIcon={
-                                                            contextMenuItems[item.id].rightIcon
-                                                        }
-                                                        onClick={contextMenuItems[item.id].onClick}
-                                                    >
-                                                        {contextMenuItems[item.id].label}
-                                                    </ContextMenuButton>
-                                                )}
+                                            !contextMenuItems[item.id].disabled && (
+                                                <Fragment key={`context-menu-${item.id}`}>
+                                                    {item.children ? (
+                                                        <HoverCard
+                                                            offset={5}
+                                                            position="right"
+                                                        >
+                                                            <HoverCard.Target>
+                                                                <ContextMenuButton
+                                                                    leftIcon={
+                                                                        contextMenuItems[item.id]
+                                                                            .leftIcon
+                                                                    }
+                                                                    rightIcon={
+                                                                        contextMenuItems[item.id]
+                                                                            .rightIcon
+                                                                    }
+                                                                    onClick={
+                                                                        contextMenuItems[item.id]
+                                                                            .onClick
+                                                                    }
+                                                                >
+                                                                    {
+                                                                        contextMenuItems[item.id]
+                                                                            .label
+                                                                    }
+                                                                </ContextMenuButton>
+                                                            </HoverCard.Target>
+                                                            <HoverCard.Dropdown>
+                                                                <Stack spacing={0}>
+                                                                    {contextMenuItems[
+                                                                        item.id
+                                                                    ].children?.map((child) => (
+                                                                        <ContextMenuButton
+                                                                            key={`sub-${child.id}`}
+                                                                            leftIcon={
+                                                                                child.leftIcon
+                                                                            }
+                                                                            rightIcon={
+                                                                                child.rightIcon
+                                                                            }
+                                                                            onClick={child.onClick}
+                                                                        >
+                                                                            {child.label}
+                                                                        </ContextMenuButton>
+                                                                    ))}
+                                                                </Stack>
+                                                            </HoverCard.Dropdown>
+                                                        </HoverCard>
+                                                    ) : (
+                                                        <ContextMenuButton
+                                                            leftIcon={
+                                                                contextMenuItems[item.id].leftIcon
+                                                            }
+                                                            rightIcon={
+                                                                contextMenuItems[item.id].rightIcon
+                                                            }
+                                                            onClick={
+                                                                contextMenuItems[item.id].onClick
+                                                            }
+                                                        >
+                                                            {contextMenuItems[item.id].label}
+                                                        </ContextMenuButton>
+                                                    )}
 
-                                                {item.divider && (
-                                                    <Divider
-                                                        key={`context-menu-divider-${item.id}`}
-                                                        color="rgb(62, 62, 62)"
-                                                        size="sm"
-                                                    />
-                                                )}
-                                            </Fragment>
+                                                    {item.divider && (
+                                                        <Divider
+                                                            key={`context-menu-divider-${item.id}`}
+                                                            color="rgb(62, 62, 62)"
+                                                            size="sm"
+                                                        />
+                                                    )}
+                                                </Fragment>
+                                            )
                                         );
                                     })}
                                 </Stack>

src/renderer/features/context-menu/events.ts

@@ -28,12 +28,15 @@ export type ContextMenuItemType =
     | 'addToFavorites'
     | 'removeFromFavorites'
     | 'setRating'
+    | 'shareItem'
     | 'deletePlaylist'
     | 'createPlaylist'
     | 'moveToBottomOfQueue'
     | 'moveToTopOfQueue'
     | 'removeFromQueue'
-    | 'deselectAll';
+    | 'deselectAll'
+    | 'showDetails'
+    | 'playSimilarSongs';
 
 export type SetContextMenuItems = {
     children?: boolean;

src/renderer/features/genres/components/genre-list-grid-view.tsx

@@ -13,9 +13,9 @@ import {
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 export const GenreListGridView = ({ gridRef, itemCount }: any) => {
     const queryClient = useQueryClient();
@@ -24,6 +24,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
     const { pageKey, id } = useListContext();
     const { grid, display, filter } = useListStoreByKey({ key: pageKey });
     const { setGrid } = useListStoreActions();
+    const genrePath = useGenreRoute();
 
     const [searchParams, setSearchParams] = useSearchParams();
     const scrollOffset = searchParams.get('scrollOffset');
@@ -137,7 +138,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
                         loading={itemCount === undefined || itemCount === null}
                         minimumBatchSize={40}
                         route={{
-                            route: AppRoute.LIBRARY_GENRES_SONGS,
+                            route: genrePath,
                             slugs: [{ idProperty: 'id', slugProperty: 'genreId' }],
                         }}
                         width={width}

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

@@ -3,7 +3,14 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { RiFolder2Fill, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+import {
+    RiAlbumLine,
+    RiFolder2Fill,
+    RiMoreFill,
+    RiMusic2Line,
+    RiRefreshLine,
+    RiSettings3Fill,
+} from 'react-icons/ri';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { GenreListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
 import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
@@ -15,9 +22,12 @@ import { useContainerQuery } from '/@/renderer/hooks';
 import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
 import {
     GenreListFilter,
+    GenreTarget,
     useCurrentServer,
+    useGeneralSettings,
     useListStoreActions,
     useListStoreByKey,
+    useSettingsStoreActions,
 } from '/@/renderer/store';
 import { ListDisplayType, TableColumn } from '/@/renderer/types';
 import i18n from '/@/i18n/i18n';
@@ -52,6 +62,8 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
     const { setFilter, setTable, setGrid, setDisplayType } = useListStoreActions();
     const { display, filter, table, grid } = useListStoreByKey({ key: pageKey });
     const cq = useContainerQuery();
+    const { genreTarget } = useGeneralSettings();
+    const { setGenreBehavior } = useSettingsStoreActions();
 
     const { handleRefreshTable, handleRefreshGrid } = useListFilterRefresh({
         itemType: LibraryItem.GENRE,
@@ -208,6 +220,11 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
         return filter.musicFolderId !== undefined;
     }, [filter.musicFolderId]);
 
+    const handleGenreToggle = useCallback(() => {
+        const newState = genreTarget === GenreTarget.ALBUM ? GenreTarget.TRACK : GenreTarget.ALBUM;
+        setGenreBehavior(newState);
+    }, [genreTarget, setGenreBehavior]);
+
     return (
         <Flex justify="space-between">
             <Group
@@ -309,6 +326,23 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
                             {t('common.refresh', { postProcess: 'titleCase' })}
                         </DropdownMenu.Item>
                     </DropdownMenu.Dropdown>
+                    <Divider orientation="vertical" />
+                    <Button
+                        compact
+                        size="md"
+                        tooltip={{
+                            label: t(
+                                genreTarget === GenreTarget.ALBUM
+                                    ? 'page.genreList.showAlbums'
+                                    : 'page.genreList.showTracks',
+                                { postProcess: 'sentenceCase' },
+                            ),
+                        }}
+                        variant="subtle"
+                        onClick={handleGenreToggle}
+                    >
+                        {genreTarget === GenreTarget.ALBUM ? <RiAlbumLine /> : <RiMusic2Line />}
+                    </Button>
                 </DropdownMenu>
             </Group>
             <Group
@@ -364,7 +398,7 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
                             <Slider
                                 defaultValue={isGrid ? grid?.itemSize || 0 : table.rowHeight}
                                 max={isGrid ? 300 : 100}
-                                min={isGrid ? 150 : 25}
+                                min={isGrid ? 100 : 25}
                                 onChangeEnd={handleItemSize}
                             />
                         </DropdownMenu.Item>

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

@@ -5,19 +5,12 @@ import debounce from 'lodash/debounce';
 import { LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import { useListContext } from '/@/renderer/context/list-context';
 import { GenreListHeaderFilters } from '/@/renderer/features/genres/components/genre-list-header-filters';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
-import {
-    GenreListFilter,
-    useCurrentServer,
-    useListStoreActions,
-    useListStoreByKey,
-} from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { GenreListFilter, useCurrentServer } from '/@/renderer/store';
 import { useTranslation } from 'react-i18next';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface GenreListHeaderProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -29,34 +22,18 @@ export const GenreListHeader = ({ itemCount, gridRef, tableRef }: GenreListHeade
     const { t } = useTranslation();
     const cq = useContainerQuery();
     const server = useCurrentServer();
-    const { pageKey } = useListContext();
-    const { display, filter } = useListStoreByKey({ key: pageKey });
-    const { setFilter, setTablePagination } = useListStoreActions();
-
-    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+    const { filter, refresh, search } = useDisplayRefresh({
+        gridRef,
         itemType: LibraryItem.GENRE,
         server,
+        tableRef,
     });
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        const searchTerm = e.target.value === '' ? undefined : e.target.value;
-        const updatedFilters = setFilter({
-            data: { searchTerm },
-            itemType: LibraryItem.GENRE,
-            key: pageKey,
-        }) as GenreListFilter;
-
-        const filterWithCustom = {
-            ...updatedFilters,
-        };
-
-        if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
-            handleRefreshTable(tableRef, filterWithCustom);
-            setTablePagination({ data: { currentPage: 0 }, key: pageKey });
-        } else {
-            handleRefreshGrid(gridRef, filterWithCustom);
-        }
+        const updatedFilters = search(e) as GenreListFilter;
+        refresh(updatedFilters);
     }, 500);
+
     return (
         <Stack
             ref={cq.ref}

src/renderer/features/genres/components/genre-list-table-view.tsx

@@ -9,7 +9,7 @@ import { useCurrentServer } from '/@/renderer/store';
 import { MutableRefObject, useCallback } from 'react';
 import { RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { generatePath, useNavigate } from 'react-router';
-import { AppRoute } from '/@/renderer/router/routes';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 interface GenreListTableViewProps {
     itemCount?: number;
@@ -20,6 +20,7 @@ export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewPr
     const server = useCurrentServer();
     const { pageKey, customFilters } = useListContext();
     const navigate = useNavigate();
+    const genrePath = useGenreRoute();
 
     const tableProps = useVirtualTable({
         contextMenu: GENRE_CONTEXT_MENU_ITEMS,
@@ -36,9 +37,9 @@ export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewPr
             const { data } = e;
             if (!data) return;
 
-            navigate(generatePath(AppRoute.LIBRARY_GENRES_SONGS, { genreId: data.id }));
+            navigate(generatePath(genrePath, { genreId: data.id }));
         },
-        [navigate],
+        [genrePath, navigate],
     );
 
     return (

src/renderer/features/home/routes/home-route.tsx

@@ -33,11 +33,12 @@ const HomeRoute = () => {
     const server = useCurrentServer();
     const itemsPerPage = 15;
     const { windowBarStyle } = useWindowSettings();
-    const { homeItems } = useGeneralSettings();
+    const { homeFeature, homeItems } = useGeneralSettings();
 
     const feature = useAlbumList({
         options: {
             cacheTime: 1000 * 60,
+            enabled: homeFeature,
             staleTime: 1000 * 60,
         },
         query: {
@@ -249,7 +250,7 @@ const HomeRoute = () => {
                     px="2rem"
                     spacing="lg"
                 >
-                    <FeatureCarousel data={featureItemsWithImage} />
+                    {homeFeature && <FeatureCarousel data={featureItemsWithImage} />}
                     {sortedCarousel.map((carousel) => (
                         <MemoizedSwiperGridCarousel
                             key={`carousel-${carousel.uniqueId}`}

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

@@ -0,0 +1,303 @@
+import { Group, Table } from '@mantine/core';
+import { RiCheckFill, RiCloseFill } from 'react-icons/ri';
+import { TFunction, useTranslation } from 'react-i18next';
+import { ReactNode } from 'react';
+import { Album, AlbumArtist, AnyLibraryItem, LibraryItem, Song } from '/@/renderer/api/types';
+import { formatDurationString, formatSizeString } from '/@/renderer/utils';
+import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
+import { Spoiler, Text } from '/@/renderer/components';
+import { sanitize } from '/@/renderer/utils/sanitize';
+import { SongPath } from '/@/renderer/features/item-details/components/song-path';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Separator } from '/@/renderer/components/separator';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
+import { formatDateRelative, formatRating } from '/@/renderer/utils/format';
+
+export type ItemDetailsModalProps = {
+    item: Album | AlbumArtist | Song;
+};
+
+type ItemDetailRow<T> = {
+    key?: keyof T;
+    label: string;
+    postprocess?: string[];
+    render?: (item: T) => ReactNode;
+};
+
+const handleRow = <T extends AnyLibraryItem>(t: TFunction, item: T, rule: ItemDetailRow<T>) => {
+    let value: ReactNode;
+
+    if (rule.render) {
+        value = rule.render(item);
+    } else {
+        const prop = item[rule.key!];
+        value = prop !== undefined && prop !== null ? String(prop) : null;
+    }
+
+    if (!value) return null;
+
+    return (
+        <tr key={rule.label}>
+            <td>{t(rule.label, { postProcess: rule.postprocess || 'sentenceCase' })}</td>
+            <td>{value}</td>
+        </tr>
+    );
+};
+
+const formatArtists = (isAlbumArtist: boolean) => (item: Album | Song) =>
+    (isAlbumArtist ? item.albumArtists : item.artists)?.map((artist, index) => (
+        <span key={artist.id || artist.name}>
+            {index > 0 && <Separator />}
+            {artist.id ? (
+                <Text
+                    $link
+                    component={Link}
+                    overflow="visible"
+                    size="md"
+                    to={
+                        artist.id
+                            ? generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                  albumArtistId: artist.id,
+                              })
+                            : ''
+                    }
+                    weight={500}
+                >
+                    {artist.name || '—'}
+                </Text>
+            ) : (
+                <Text
+                    overflow="visible"
+                    size="md"
+                >
+                    {artist.name || '-'}
+                </Text>
+            )}
+        </span>
+    ));
+
+const formatComment = (item: Album | Song) =>
+    item.comment ? <Spoiler maxHeight={50}>{replaceURLWithHTMLLinks(item.comment)}</Spoiler> : null;
+
+const FormatGenre = (item: Album | AlbumArtist | Song) => {
+    const genreRoute = useGenreRoute();
+
+    return item.genres?.map((genre, index) => (
+        <span key={genre.id}>
+            {index > 0 && <Separator />}
+            <Text
+                $link
+                component={Link}
+                overflow="visible"
+                size="md"
+                to={genre.id ? generatePath(genreRoute, { genreId: genre.id }) : ''}
+                weight={500}
+            >
+                {genre.name || '—'}
+            </Text>
+        </span>
+    ));
+};
+
+const BoolField = (key: boolean) =>
+    key ? <RiCheckFill size="1.1rem" /> : <RiCloseFill size="1.1rem" />;
+
+const AlbumPropertyMapping: ItemDetailRow<Album>[] = [
+    { key: 'name', label: 'common.title' },
+    { label: 'entity.albumArtist_one', render: formatArtists(true) },
+    { label: 'entity.genre_other', render: FormatGenre },
+    {
+        label: 'common.duration',
+        render: (album) => album.duration && formatDurationString(album.duration),
+    },
+    { key: 'releaseYear', label: 'filter.releaseYear' },
+    { key: 'songCount', label: 'filter.songCount' },
+    { label: 'filter.isCompilation', render: (album) => BoolField(album.isCompilation || false) },
+    {
+        key: 'size',
+        label: 'common.size',
+        render: (album) => album.size && formatSizeString(album.size),
+    },
+    {
+        label: 'common.favorite',
+        render: (album) => BoolField(album.userFavorite),
+    },
+    { label: 'common.rating', render: formatRating },
+    { key: 'playCount', label: 'filter.playCount' },
+    {
+        label: 'filter.lastPlayed',
+        render: (song) => formatDateRelative(song.lastPlayedAt),
+    },
+    {
+        label: 'common.modified',
+        render: (song) => formatDateRelative(song.updatedAt),
+    },
+    { label: 'filter.comment', render: formatComment },
+    {
+        label: 'common.mbid',
+        postprocess: [],
+        render: (album) =>
+            album.mbzId ? (
+                <a
+                    href={`https://musicbrainz.org/release/${album.mbzId}`}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    {album.mbzId}
+                </a>
+            ) : null,
+    },
+];
+
+const AlbumArtistPropertyMapping: ItemDetailRow<AlbumArtist>[] = [
+    { key: 'name', label: 'common.name' },
+    { label: 'entity.genre_other', render: FormatGenre },
+    {
+        label: 'common.duration',
+        render: (artist) => artist.duration && formatDurationString(artist.duration),
+    },
+    { key: 'songCount', label: 'filter.songCount' },
+    {
+        label: 'common.favorite',
+        render: (artist) => BoolField(artist.userFavorite),
+    },
+    { label: 'common.rating', render: formatRating },
+    { key: 'playCount', label: 'filter.playCount' },
+    {
+        label: 'filter.lastPlayed',
+        render: (song) => formatDateRelative(song.lastPlayedAt),
+    },
+    {
+        label: 'common.mbid',
+        postprocess: [],
+        render: (artist) =>
+            artist.mbz ? (
+                <a
+                    href={`https://musicbrainz.org/artist/${artist.mbz}`}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                >
+                    {artist.mbz}
+                </a>
+            ) : null,
+    },
+    {
+        label: 'common.biography',
+        render: (artist) =>
+            artist.biography ? (
+                <Spoiler
+                    dangerouslySetInnerHTML={{ __html: sanitize(artist.biography) }}
+                    maxHeight={50}
+                />
+            ) : null,
+    },
+];
+
+const SongPropertyMapping: ItemDetailRow<Song>[] = [
+    { key: 'name', label: 'common.title' },
+    { key: 'path', label: 'common.path', render: SongPath },
+    { label: 'entity.albumArtist_one', render: formatArtists(true) },
+    { key: 'artists', label: 'entity.artist_other', render: formatArtists(false) },
+    {
+        key: 'album',
+        label: 'entity.album_one',
+        render: (song) =>
+            song.albumId &&
+            song.album && (
+                <Text
+                    $link
+                    component={Link}
+                    overflow="visible"
+                    size="md"
+                    to={
+                        song.albumId
+                            ? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
+                                  albumId: song.albumId,
+                              })
+                            : ''
+                    }
+                    weight={500}
+                >
+                    {song.album}
+                </Text>
+            ),
+    },
+    { key: 'discNumber', label: 'common.disc' },
+    { key: 'trackNumber', label: 'common.trackNumber' },
+    { key: 'releaseYear', label: 'filter.releaseYear' },
+    { label: 'entity.genre_other', render: FormatGenre },
+    {
+        label: 'common.duration',
+        render: (song) => formatDurationString(song.duration),
+    },
+    { 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: 'channels', label: 'common.channel_other' },
+    { key: 'size', label: 'common.size', render: (song) => formatSizeString(song.size) },
+    {
+        label: 'common.favorite',
+        render: (song) => BoolField(song.userFavorite),
+    },
+    { label: 'common.rating', render: formatRating },
+    { key: 'playCount', label: 'filter.playCount' },
+    {
+        label: 'filter.lastPlayed',
+        render: (song) => formatDateRelative(song.lastPlayedAt),
+    },
+    {
+        label: 'common.modified',
+        render: (song) => formatDateRelative(song.updatedAt),
+    },
+    {
+        label: 'common.albumGain',
+        render: (song) => (song.gain?.album !== undefined ? `${song.gain.album} dB` : null),
+    },
+    {
+        label: 'common.trackGain',
+        render: (song) => (song.gain?.track !== undefined ? `${song.gain.track} dB` : null),
+    },
+    {
+        label: 'common.albumPeak',
+        render: (song) => (song.peak?.album !== undefined ? `${song.peak.album}` : null),
+    },
+    {
+        label: 'common.trackPeak',
+        render: (song) => (song.peak?.track !== undefined ? `${song.peak.track}` : null),
+    },
+    { label: 'filter.comment', render: formatComment },
+];
+
+export const ItemDetailsModal = ({ item }: ItemDetailsModalProps) => {
+    const { t } = useTranslation();
+    let body: ReactNode;
+
+    switch (item.itemType) {
+        case LibraryItem.ALBUM:
+            body = AlbumPropertyMapping.map((rule) => handleRow(t, item, rule));
+            break;
+        case LibraryItem.ALBUM_ARTIST:
+            body = AlbumArtistPropertyMapping.map((rule) => handleRow(t, item, rule));
+            break;
+        case LibraryItem.SONG:
+            body = SongPropertyMapping.map((rule) => handleRow(t, item, rule));
+            break;
+        default:
+            body = null;
+    }
+
+    return (
+        <Group>
+            <Table
+                highlightOnHover
+                horizontalSpacing="sm"
+                sx={{ userSelect: 'text' }}
+                verticalSpacing="sm"
+            >
+                <tbody>{body}</tbody>
+            </Table>
+        </Group>
+    );
+};

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

@@ -0,0 +1,67 @@
+import { ActionIcon, CopyButton, Group } from '@mantine/core';
+import isElectron from 'is-electron';
+import { useTranslation } from 'react-i18next';
+import { RiCheckFill, RiClipboardFill, RiExternalLinkFill } from 'react-icons/ri';
+import { Tooltip, toast } from '/@/renderer/components';
+import styled from 'styled-components';
+
+const util = isElectron() ? window.electron.utils : null;
+
+export type SongPathProps = {
+    path: string | null;
+};
+
+const PathText = styled.div`
+    user-select: all;
+`;
+
+export const SongPath = ({ path }: SongPathProps) => {
+    const { t } = useTranslation();
+
+    if (!path) return null;
+
+    return (
+        <Group>
+            <CopyButton
+                timeout={2000}
+                value={path}
+            >
+                {({ copied, copy }) => (
+                    <Tooltip
+                        withinPortal
+                        label={t(
+                            copied ? 'page.itemDetail.copiedPath' : 'page.itemDetail.copyPath',
+                            { postProcess: 'sentenceCase' },
+                        )}
+                    >
+                        <ActionIcon onClick={copy}>
+                            {copied ? <RiCheckFill /> : <RiClipboardFill />}
+                        </ActionIcon>
+                    </Tooltip>
+                )}
+            </CopyButton>
+            {util && (
+                <Tooltip
+                    withinPortal
+                    label={t('page.itemDetail.openFile', { postProcess: 'sentenceCase' })}
+                >
+                    <ActionIcon>
+                        <RiExternalLinkFill
+                            onClick={() => {
+                                util.openItem(path).catch((error) => {
+                                    toast.error({
+                                        message: (error as Error).message,
+                                        title: t('error.openError', {
+                                            postProcess: 'sentenceCase',
+                                        }),
+                                    });
+                                });
+                            }}
+                        />
+                    </ActionIcon>
+                </Tooltip>
+            )}
+            <PathText>{path}</PathText>
+        </Group>
+    );
+};