Bump to v0.1.1

* fix text overflow making image take up too much space in full screen

* Fix missing key

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

.dockerignore

@@ -1,4 +0,0 @@
-node_modules
-release/app/node_modules
-release/app/dist
-src/server/node_modules

.erb/configs/webpack.config.base.ts

@@ -5,6 +5,7 @@
 import webpack from 'webpack';
 import { dependencies as externals } from '../../release/app/package.json';
 import webpackPaths from './webpack.paths';
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 
 const configuration: webpack.Configuration = {
   externals: [...Object.keys(externals || {})],
@@ -48,6 +49,7 @@ const configuration: webpack.Configuration = {
     fallback: {
       child_process: false,
     },
+    plugins: [new TsconfigPathsPlugin({ baseUrl: webpackPaths.srcPath })],
     modules: [webpackPaths.srcPath, 'node_modules'],
   },
 

.erb/configs/webpack.config.renderer.dev.ts

@@ -22,21 +22,16 @@ if (process.env.NODE_ENV === 'production') {
 const port = process.env.PORT || 4343;
 const manifest = path.resolve(webpackPaths.dllPath, 'renderer.json');
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const requiredByDLLConfig = module.parent!.filename.includes(
-  'webpack.config.renderer.dev.dll'
-);
+const requiredByDLLConfig = module.parent!.filename.includes('webpack.config.renderer.dev.dll');
 
 /**
  * Warn if the DLL is not built
  */
-if (
-  !requiredByDLLConfig &&
-  !(fs.existsSync(webpackPaths.dllPath) && fs.existsSync(manifest))
-) {
+if (!requiredByDLLConfig && !(fs.existsSync(webpackPaths.dllPath) && fs.existsSync(manifest))) {
   console.log(
     chalk.black.bgYellow.bold(
-      'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"'
-    )
+      'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"',
+    ),
   );
   execSync('npm run postinstall');
 }

.eslintrc.js

@@ -1,18 +1,27 @@
 module.exports = {
   extends: ['erb', 'plugin:typescript-sort-keys/recommended'],
+  ignorePatterns: ['.erb/*', 'server'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     createDefaultProgram: true,
-    ecmaVersion: 2020,
+    ecmaVersion: 12,
+    parser: '@typescript-eslint/parser',
     project: './tsconfig.json',
     sourceType: 'module',
-    tsconfigRootDir: __dirname,
+    tsconfigRootDir: './',
   },
-  plugins: ['import', 'sort-keys-fix'],
+  plugins: ['@typescript-eslint', 'import', 'sort-keys-fix'],
   rules: {
+    '@typescript-eslint/naming-convention': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-shadow': ['off'],
+    'default-case': 'off',
+    'import/extensions': 'off',
+    'import/no-absolute-path': 'off',
     // A temporary hack related to IDE not resolving correct package.json
     'import/no-extraneous-dependencies': 'off',
+
     'import/no-unresolved': 'error',
     'import/order': [
       'error',
@@ -41,6 +50,8 @@ module.exports = {
     'no-console': 'off',
     'no-nested-ternary': 'off',
     'no-restricted-syntax': 'off',
+    'no-underscore-dangle': 'off',
+    'prefer-destructuring': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/jsx-sort-props': [
       'error',
@@ -53,8 +64,9 @@ module.exports = {
         shorthandLast: false,
       },
     ],
-    // Since React 17 and typescript 4.1 you can safely disable the rule
+    'react/no-array-index-key': 'off',
     'react/react-in-jsx-scope': 'off',
+    'react/require-default-props': 'off',
     'sort-keys-fix/sort-keys-fix': 'warn',
   },
   settings: {
@@ -66,7 +78,10 @@ module.exports = {
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
-      typescript: {},
+      typescript: {
+        alwaysTryTypes: true,
+        project: './tsconfig.json',
+      },
       webpack: {
         config: require.resolve('./.erb/configs/webpack.config.eslint.ts'),
       },

.github/FUNDING.yml

@@ -1,5 +1,3 @@
 # These are supported funding model platforms
 
-github: [electron-react-boilerplate, amilajack]
-patreon: amilajack
-open_collective: electron-react-boilerplate-594
+ko_fi: jeffvli

.github/ISSUE_TEMPLATE/1-Bug_report.md

@@ -4,18 +4,6 @@ about: You're having technical issues. 🐞
 labels: 'bug'
 ---
 
-<!-- Please use the following issue template or your issue will be closed -->
-
-## Prerequisites
-
-<!-- If the following boxes are not ALL checked, your issue is likely to be closed -->
-
-- [ ] Using npm
-- [ ] Using an up-to-date [`main` branch](https://github.com/electron-react-boilerplate/electron-react-boilerplate/tree/main)
-- [ ] Using latest version of devtools. [Check the docs for how to update](https://electron-react-boilerplate.js.org/docs/dev-tools/)
-- [ ] Tried solutions mentioned in [#400](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/400)
-- [ ] For issue in production release, add devtools output of `DEBUG_PROD=true npm run build && npm start`
-
 ## Expected Behavior
 
 <!--- What should have happened? -->
@@ -23,6 +11,8 @@ labels: 'bug'
 ## 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
 
@@ -44,24 +34,12 @@ labels: 'bug'
 ## Context
 
 <!--- How has this issue affected you? What are you trying to accomplish? -->
-<!--- Did you make any changes to the boilerplate after cloning it? -->
-<!--- Providing context helps us come up with a solution that is most useful in the real world -->
 
 ## Your Environment
 
 <!--- Include as many relevant details about the environment you experienced the bug in -->
 
-- Node version :
-- electron-react-boilerplate version or branch :
-- Operating System and version :
-- Link to your project :
-
-<!---
-❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
-
-Donations will ensure the following:
-
-🔨 Long term maintenance of the project
-🛣 Progress on the roadmap
-🐛 Quick responses to bug reports and help requests
- -->
+- 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

@@ -4,16 +4,6 @@ about: Ask a question.❓
 labels: 'question'
 ---
 
-## Summary
-
-<!-- What do you need help with? -->
-
-<!---
-❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
-
-Donations will ensure the following:
-
-🔨 Long term maintenance of the project
-🛣 Progress on the roadmap
-🐛 Quick responses to bug reports and help requests
- -->
+<!-- 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,15 +1,11 @@
 ---
 name: Feature request
-about: You want something added to the boilerplate. 🎉
+about: Request a feature to be added to Feishin 🎉
 labels: 'enhancement'
 ---
 
-<!---
-❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
+## What do you want to be added?
 
-Donations will ensure the following:
+## Additional context
 
-🔨 Long term maintenance of the project
-🛣 Progress on the roadmap
-🐛 Quick responses to bug reports and help requests
- -->
+<!-- Is this a server-specific feature? (e.g. Jellyfin only). -->

.github/workflows/publish-linux.yml

@@ -0,0 +1,39 @@
+name: Publish Linux (Manual)
+
+on: workflow_dispatch
+
+jobs:
+  publish:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+
+    steps:
+      - name: Checkout git repo
+        uses: actions/checkout@v1
+
+      - name: Install Node and NPM
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          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 --linux
+          on_retry_command: npm cache clean --force

.github/workflows/publish-macos.yml

@@ -0,0 +1,39 @@
+name: Publish Windows and macOS (Manual)
+
+on: workflow_dispatch
+
+jobs:
+  publish:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest]
+
+    steps:
+      - name: Checkout git repo
+        uses: actions/checkout@v1
+
+      - name: Install Node and NPM
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          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 --mac
+          on_retry_command: npm cache clean --force

.github/workflows/publish-pr-comment.yml

@@ -0,0 +1,54 @@
+name: Comment on pull request
+on:
+  workflow_run:
+    workflows: ['Publish (PR)']
+    types: [completed]
+jobs:
+  pr_comment:
+    if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v6
+        with:
+          # This snippet is public-domain, taken from
+          # https://github.com/oprypin/nightly.link/blob/master/.github/workflows/pr-comment.yml
+          script: |
+            async function upsertComment(owner, repo, issue_number, purpose, body) {
+              const {data: comments} = await github.rest.issues.listComments(
+                {owner, repo, issue_number});
+              const marker = `<!-- bot: ${purpose} -->`;
+              body = marker + "\n" + body;
+              const existing = comments.filter((c) => c.body.includes(marker));
+              if (existing.length > 0) {
+                const last = existing[existing.length - 1];
+                core.info(`Updating comment ${last.id}`);
+                await github.rest.issues.updateComment({
+                  owner, repo,
+                  body,
+                  comment_id: last.id,
+                });
+              } else {
+                core.info(`Creating a comment in issue / PR #${issue_number}`);
+                await github.rest.issues.createComment({issue_number, body, owner, repo});
+              }
+            }
+            const {owner, repo} = context.repo;
+            const run_id = ${{github.event.workflow_run.id}};
+            const pull_requests = ${{ toJSON(github.event.workflow_run.pull_requests) }};
+            if (!pull_requests.length) {
+              return core.error("This workflow doesn't match any pull requests!");
+            }
+            const artifacts = await github.paginate(
+              github.rest.actions.listWorkflowRunArtifacts, {owner, repo, run_id});
+            if (!artifacts.length) {
+              return core.error(`No artifacts found`);
+            }
+            let body = `Download the artifacts for this pull request:\n`;
+            for (const art of artifacts) {
+              body += `\n* [${art.name}.zip](https://nightly.link/${owner}/${repo}/actions/artifacts/${art.id}.zip)`;
+            }
+            core.info("Review thread message body:", body);
+            for (const pr of pull_requests) {
+              await upsertComment(owner, repo, pr.number,
+                "nightly-link", body);
+            }

.github/workflows/publish-pr.yml

@@ -0,0 +1,60 @@
+name: Publish (PR)
+
+on:
+  pull_request:
+    branches:
+      - development
+
+jobs:
+  publish:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest]
+
+    steps:
+      - name: Checkout git repo
+        uses: actions/checkout@v3
+
+      - name: Install Node and NPM
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+
+      - name: Install dependencies
+        run: |
+          npm install --legacy-peer-deps
+
+      - name: Build releases
+        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 run package:pr
+          on_retry_command: npm cache clean --force
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: windows-binaries
+          path: |
+            release/build/*.exe
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: linux-binaries
+          path: |
+            release/build/*.AppImage
+            release/build/*.deb
+            release/build/*.rpm
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: macos-binaries
+          path: |
+            release/build/*.dmg

.github/workflows/publish.yml

@@ -1,46 +0,0 @@
-name: Publish
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  publish:
-    # To enable auto publishing to github, update your electron publisher
-    # config in package.json > "build" and remove the conditional below
-    if: ${{ github.repository_owner == 'electron-react-boilerplate' }}
-
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [macos-latest]
-
-    steps:
-      - name: Checkout git repo
-        uses: actions/checkout@v1
-
-      - name: Install Node and NPM
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16
-          cache: npm
-
-      - name: Install dependencies
-        run: |
-          npm install --legacy-peer-deps
-
-      - name: Publish releases
-        env:
-          # These values are used for auto updates signing
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_ID_PASS: ${{ secrets.APPLE_ID_PASS }}
-          CSC_LINK: ${{ secrets.CSC_LINK }}
-          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
-          # This is used for uploading release assets to github
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          npm run postinstall
-          npm run build
-          npm exec electron-builder -- --publish always --win --mac --linux

.prettierrc

@@ -1,8 +1,20 @@
 {
-  "trailingComma": "es5",
-  "tabWidth": 2,
+  "printWidth": 100,
   "semi": true,
   "singleQuote": true,
-  "printWidth": 100,
-  "arrowParens": "always"
+  "overrides": [
+    {
+      "files": ["**/*.css", "**/*.scss", "**/*.html"],
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ],
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "proseWrap": "never",
+  "htmlWhitespaceSensitivity": "strict",
+  "endOfLine": "lf",
+  "singleAttributePerLine": true
 }

.stylelintrc.json

@@ -17,6 +17,9 @@
         "empty-line-between-groups": false
       }
     ],
+    "string-quotes": "single",
+    "declaration-block-no-redundant-longhand-properties": null,
+    "selector-class-pattern": null,
     "selector-type-case": ["lower", { "ignoreTypes": ["/^\\$\\w+/"] }],
     "selector-type-no-unknown": [
       true,

.vscode/settings.json

@@ -4,6 +4,11 @@
     ".prettierrc": "jsonc",
     ".eslintignore": "ignore"
   },
+  "eslint.validate": ["typescript"],
+  "eslint.workingDirectories": [
+    { "directory": "./", "changeProcessCWD": true },
+    { "directory": "./server", "changeProcessCWD": true }
+  ],
   "typescript.tsserver.experimental.enableProjectDiagnostics": true,
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
@@ -26,5 +31,13 @@
     "test/**/__snapshots__": true,
     "package-lock.json": true,
     "*.{css,sass,scss}.d.ts": true
-  }
+  },
+  "i18n-ally.localesPaths": ["src/i18n", "src/i18n/locales"],
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "stylelint.validate": ["css", "less", "postcss", "typescript", "typescriptreact", "scss"],
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true
 }

CHANGELOG.md

@@ -2,585 +2,4 @@
 
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-[0.15.0] - 2022-04-13
-
-### Added
-
-- Added setting to save and resume the current queue between sessions (#130) (Thanks @kgarner7)
-- Added a simple "play random" button to the player bar (#276)
-- Added new seek/volume sliders (#272)
-  - Seeking/dragging is now more responsive
-- Added improved discord rich presence (#286)
-- Added download button on the playlist view (#266)
-- (Jellyfin) Added "genre" column to the artist list
-
-### Changed
-
-- Swapped the order of "Seek Forward/Backward" and "Next/Prev Track" buttons on the player bar
-- Global volume is now calculated logarithmically (#275) (Thanks @gelaechter)
-- "Auto playlist" is now named "Play Random" (#276)
-- "Now playing" option is now available on the "Start page" setting
-
-### Fixed
-
-- Playing songs by double clicking on a list should now play in the proper order (#279)
-- (Linux) Fixed MPRIS metadata not updating when player automatically increments (#263)
-- Application fonts now loaded locally instead of from Google CDN (#284)
-- Enabling "Default to Album List on Artist Page" no longer performs a double redirect when entering the artist page (#271)
-- Stop button is no longer disabled when playback is stopped (#273)
-- Various package updates (#288) (Thanks @kgarner7)
-- Top control bar show no longer be accessible when not logged in (#267)
-
-[0.14.0] - 2022-03-12
-
-### Added
-
-- Added zoom options via hotkeys (#252)
-  - Zoom in: CTRL + SHIFT + =
-  - Zoom out: CTRL + SHIFT + -
-- Added PLAY context menu options to the Genre view (#239)
-- Added STOP button to the main player controls (#252)
-- Added "System Notifications" option to display native notifications when the song automatically changes (#245)
-- Added arm64 build (#238)
-- New languages
-  - Spanish (Thanks @ami-sc) (#250)
-  - Sinhala (Thanks @hirusha-adi) (#254)
-
-### Fixed
-
-- (Jellyfin) Fixed the order of returned songs when playing from the Folder view using the context menu (#240)
-- (Linux) Reset MPRIS position to 0 when using "previous track" resets the song 0 (#249)
-- Fixed JavaScript error when removing all songs from the queue using the context menu (#248)
-- Fixed Ampache server support by adding .view to all Subsonic API endpoints (#253)
-
-### Removed
-
-- (Windows) Removed the cover art display when hovering Sonixd on the taskbar (due to new sidebar position) (#242)
-
-[0.13.1] - 2022-02-16
-
-### Fixed
-
-- Fixed startup crash on all OS if the default settings file is not present (#237)
-
-[0.13.0] - 2022-02-16
-
-### Added
-
-- Added new searchbar and search UI (#227, #228)
-- Added playback controls to the Sonixd tray menu (#225)
-- Added playlist selections to the `Start Page` config option
-
-### Changed
-
-- Sidebar changes (#206)
-
-  - Allow resizing of the sidebar when expanded
-  - Allow a toggle of the playerbar's cover art to the sidebar when expanded
-  - Display playlist list on the sidebar under the navigation
-  - Allow configuration of the display of sidebar elements
-
-- Changed the `Artist` row on the playerbar to use a comma delimited list of the song's artists rather than the album artist (#218)
-
-### Fixed
-
-- Fixed the player volume not resetting to its default value when resetting a song while crossfading (#228)
-- (Jellyfin) Fixed artist list not displaying user favorites
-- (Jellyfin) Fixed `bitrate` column not properly by its numeric value (#220)
-- Fixed javascript exception when incrementing/decrementing the queue (#230)
-- Fixed popups/tooltips not using the configured font
-
-[0.12.1] - 2022-02-02
-
-### Fixed
-
-- Fixed translation syntax error causing application to crash when deleting playlists from the context menu (#216)
-- Fixed Player behavior (#217)
-  - No longer scrobbles an additional time after the last song ends when repeat is off
-  - (Jellyfin) Properly handles scrobbling the player's pause/resume and time position
-
-[0.12.0] - 2022-01-31
-
-### Added
-
-- Added support for language/translations (#146) (Thanks @gelaechter)
-  - German translation added (Thanks @gelaechter)
-  - Simplified Chinese translation added (Thanks @fangxx3863)
-- (Windows) Added media keys with desktop overlay (#79) (Thanks @GermanDarknes)
-- (Subsonic) Added support for `/getLyrics` to display the current song's lyrics in a popup (#151)
-- (Jellyfin) Added song list page
-- Added config to choose the default Album/Song list sort on startup (#169)
-- Added config to choose the application start page (#176) (Thanks @GermanDarknes)
-- Added config for pagination for Album/Song list pages
-- (Windows) Added option to set custom directory on installation (#184)
-- Added config to set the default artist page to the album list (#199)
-- Added info mode for the Now Playing page (#160)
-- Added release notes popup
-
-### Changed
-
-- Player behavior
-  - `Media Stop` now stops the track and resets it instead of clearing the queue (#200)
-  - `Media Prev` now resets to the start of the song if pressed after 5 seconds (#207)
-  - `Media Prev` now resets to the start of the song if repeat is off and is the first song of the queue (#207)
-  - `Media Next` now does nothing if repeat is off and is the last song of the queue (#207)
-  - Playing a single track in the queue without repeat no longer plays the track twice (#205)
-  - Scrobbling
-    - (Jellyfin) Scrobbling has been reverted to use the `/sessions/playing` endpoint to support the Playback Reporting plugin (#187)
-    - Scrobbling occurs after 5 seconds has elapsed for the current track as to not instantly mark the song as played
-- Pressing `CTRL + F` or the search button now focuses the text in the searchbar (#203) (Thanks @WeekendWarrior1)
-- Changed loading indicators for all pages
-- OBS scrobble now outputs an image.txt file instead of the downloading the cover image (#136)
-- Player Bar
-  - Album name now appears under the artist
-  - (Subsonic) 5-star rating is available
-  - Clicking on the cover art now displays a full-size image
-  - Clicking on the song name now redirects to the Now Playing queue
-- (Jellyfin) Removed track limit for "Auto Playlist"
-
-### Fixed
-
-- (macOS) Fixed macOS exit behavior (#198) (Thanks @zackslash)
-- (Linux) Fixed MPRIS `position` result (#162)
-- (Subsonic) Fixed artist page crashing the application if server does not support `/getArtistInfo2` (#170)
-- (Jellyfin) Fixed `View all songs` returning songs out of their album track order
-- (Jellyfin) Fixed the "Latest Albums" on the album artist page displaying no albums
-- Fixed card overlay button color on click
-- Fixed buttons on the Album page to work better with light mode
-- Fixed unfavorite button on Album page
-
-[0.11.0] - 2022-01-01
-
-### Added
-
-- Added external integrations
-  - Added Discord rich presence to display the currently playing song (#155)
-  - Added OBS (Open Broadcaster Software) scrobbling to send current track metadata to desktop or the Tuna plugin (#136)
-- Added a `Native` option for Titlebar Style (#148) (Thanks @gelaechter)
-- (Jellyfin) Added toggle to allow transcoding for non-directplay compatible filetypes (#158)
-- Additional MPRIS support
-  - Added metadata:
-    - `albumArtist`, `discNumber`, `trackNumber`, `useCount`, `genre`
-  - Added events:
-    - `seek`, `position`, `volume`, `repeat`, `shuffle`
-
-### Changed
-
-- Overhauled the Artist page
-  - (Jellyfin) Split albums by album artist OR compilation
-  - (Jellyfin) Added artist genres
-  - (Subsonic) Added Top Songs section
-  - Moved related artists to the main page scrolling menu
-  - Added `View All Songs` button to view all songs by the artist
-  - Added artist radio (mix) button
-- Horizontal scrolling menu no longer displays scrollbar
-- Changed button styling on Playlist/Album/Artist pages
-- Changed page image styling to use the card on Playlist/Album/Artist pages
-
-### Fixed
-
-- Fixed various MPRIS features
-  - Synchronized the play/pause state between the player and MPRIS client when pausing from Sonixd (#152)
-  - Fixed the identity of Sonixd to use the app name instead of description (#163)
-- Fixed various submenus opening in the right-click context menu when the option is disabled (#164)
-- Fixed compatibility with older Subsonic API servers (now targets Subsonic v1.13.0) (#144)
-- Fixed playback causing heavily increased CPU/Power usage #145)
-
-[0.10.0] - 2021-12-15
-
-### Added
-
-- Added 2 new default themes
-  - City Lights
-  - One Dark
-- Added additional album filters (#66)
-  - Genres (AND/OR)
-  - Artists (AND/OR)
-  - Years (FROM/TO)
-- Added external column sort filters for multiple pages (#66)
-- Added item counter to page titles
-- `Play Count` column has been added to albums (only works for Navidrome)
-
-### Changed
-
-- Config page has been fully refreshed to a new look
-  - Config popover on the action bar now includes all config tabs
-- Tooltips
-  - Increased default tooltip delay from 250ms -> 500ms
-  - Increased tooltip delay on card overlay buttons to 1000ms
-- Grid view
-  - Placeholder images for playlists, albums, and artists have been updated (inspired from Jellyfin Web UI)
-  - Card title/subtitle width decreased from 100% to default length
-  - Separate card info section from image/overlay buttons on hover
-- Popovers (config, auto playlist, etc)
-  - Now have decreased opacity
-- Enabling/disabling global media keys no longer requires app restart
-
-### Fixed
-
-- (Jellyfin) Fixed `Recently Played` and `Most Played` filters on the Dashboard page (#114)
-- (Jellyfin) Fixed server scrobble (#126)
-  - No longer sends the `/playing` request on song start (prevents song being marked as played when it starts)
-  - Fixed song play count increasing multiple times per play
-- (Jellyfin) Fixed tracks without embedded art displaying placeholder (#128)
-- (Jellyfin) Fixed song `Path` property not displaying data
-- (Subsonic) Fixed login check for Funkwhale servers (#135)
-- Fixed persistent grid-view scroll position
-- Fixed list-view columns
-  - `Visibility` column now properly displays data
-- Selected media folder is now cleared from settings on disconnect (prevents errors when signing into a new server)
-- Fixed adding/removing artist as favorite on the Artist page not updating
-- Fixed search bar not properly handling Asian keyboard inputs
-
-## [0.9.1] - 2021-12-07
-
-### Changed
-
-- List-view scroll position is now persistent for the following:
-  - Now Playing
-  - Playlist list
-  - Favorites (all)
-  - Album list
-  - Artist list
-  - Genre list
-- Grid-view scroll position is now persistent for the following:
-  - Playlist list
-  - Favorites (album/artist)
-  - Album list
-  - Artist list
-- (Jellyfin) Changed audio stream URL to force transcoding off (#108)
-
-### Fixed
-
-- (Jellyfin) Fixed the player not sending the "finish" condition when the song meets the scrobble condition (unresolved from 0.9.0) (#111)
-
-## [0.9.0] - 2021-12-06
-
-### Added
-
-- Added 2 new default themes
-  - Plex-like
-  - Spotify-like
-- Added volume control improvements
-  - Volume value tooltip while hovering the slider
-  - Mouse scroll wheel controls volume while hovering the slider
-  - Clicking the volume icon will mute/unmute
-
-### Changed
-
-- Overhauled all default themes
-  - Rounded buttons, inputs, etc.
-  - Changed grid card hover effects
-    - Removed hover scale
-    - Removed default background on overlay buttons
-    - Moved border to only the image instead of full card
-- Album page
-  - Genre(s) are now listed on a line separate from the artists
-  - Album artist is now distinct from track artists
-  - Increased length of the genre/artist line from 70% -> 80%
-  - The genre/artist line is now scrollable using the mouse wheel
-- (Jellyfin) List view
-  - `Artist` column now uses the album artist property
-  - `Title (Combined)` column now displays all track artists, comma-delimited instead of the album artist
-  - `Genre` column now displays all genres, comma-delimited, left-aligned
-
-### Fixed
-
-- (Jellyfin) Fixed the player not sending the "finish" condition when the song meets the scrobble condition
-- (Jellyfin) Fixed album lists not sorting by the `genre` column
-- (Jellyfin)(API) Fixed the A-Z(Artist) not sorting by Album Artist on the album list
-- (Jellyfin)(API) Fixed auto playlist not respecting the selected music folder
-- (Jellyfin)(API) Fixed the artist page not respecting the selected music folder
-
-## [0.8.5] - 2021-11-25
-
-### Fixed
-
-- Fixed default (OOBE) title column not display data (#104)
-
-## [0.8.4] - 2021-11-25
-
-### Fixed
-
-- (Jellyfin)(Linux) Fixed JS MPRIS error when switching tracks due to unrounded song duration
-- (Linux) Fixed MPRIS artist, genre, and coverart not updating on track change
-
-## [0.8.3] - 2021-11-25
-
-### Fixed
-
-- (Subsonic) Fixed playing a folder from the folder view
-- Fixed rating context menu option available from the Genre page
-
-## [0.8.2] - 2021-11-25
-
-### Added
-
-- Added option to disable auto updates
-
-### Fixed
-
-- Fixed gapless playback on certain \*sonic servers (#100)
-- Fixed playerbar coverart not redirecting to `Now Playing` page
-
-## [0.8.1] - 2021-11-24
-
-### Fixed
-
-- (Subsonic) Fixed errors blocking playlists from being deleted
-
-## [0.8.0] - 2021-11-24
-
-### Added
-
-- Added Jellyfin server support (#87)
-  - Supports full Sonixd feature-set (except ratings)
-- Added a mini config popover to change list/grid view options on the top action bar
-- Added system audio device selector (#96)
-- Added context menu option `Set rating` to bulk set ratings for songs (and albums/artists on Navidrome) (#95)
-
-### Changed
-
-- Reduced cached image from 500px -> 350px (to match max grid size)
-- Grid/header images now respect image aspect ratio returned by the server
-- Playback filter input now uses a regex validation before allowing you to add
-- Renamed all `Name` columns to `Title`
-- Search bar now clears after pressing enter to globally search
-- Added borders to popovers
-
-### Fixed
-
-- Fixed application performance issues when player is crossfading to the next track
-- Fixed null entries showing at the beginning of descending sort on playlist/now playing lists
-- Tooltips no longer pop up on the artist/playlist description when null
-
-## [0.7.0] - 2021-11-15
-
-### Added
-
-- Added download buttons on the Album and Artist pages (#29)
-  - Allows you to download (via browser) or copy download links to your clipboard (to use with a download manager)
-
-### Changed
-
-- Changed default tooltip delay from `500ms` -> `250ms`
-- Moved search bar from page header to the main layout action bar
-- Added notice for macOS media keys to require trusted accessibility in the client
-
-### Fixed
-
-- Fixed auto playlist and album fetch in Gonic servers
-- Fixed the macOS titlebar styling to better match the original (#83)
-- Fixed thumbnailclip error when resizing the application in macOS (#84)
-- Fixed playlist page not using cached image
-
-## [0.6.0] - 2021-11-09
-
-### Added
-
-- Added additional grid-view customization options (#74)
-  - Gap size (spaces between cards)
-  - Alignment (left-align, center-align)
-
-### Changed
-
-- Changed default album/artist uncached image sizes from `150px` -> `350px`
-
-### Fixed
-
-- (Windows) Fixed default taskbar thumbnail on Windows10 when minimized to use window instead of album cover (#73)
-- Fixed playback settings unable to change via the UI
-  - Crossfade duration
-  - Polling interval
-  - Volume fade
-- Fixed header styling on the Config page breaking at smaller window widths (#72)
-- Fixed the position of the description tooltip on the Artist page
-- Fixed the `Add to playlist` popover showing underneath the modal in modal-view
-
-### Removed
-
-- Removed unused `fonts.size.pageTitle` theme property
-
-## [0.5.0] - 2021-11-05
-
-### Added
-
-- Added extensible theming (#60)
-- Added playback presets (gapless, fade, normal) to the config
-- Added persistence for column sort for all list-views (except playlist and search) (#47)
-- Added playback filters to the config to filter out songs based on regex (#53)
-- Added music folder selector in auto playlist (this may or may not work depending on your server)
-- Added improved playlist, artist, and album pages
-  - Added dynamic images on the Playlist page for servers that don't support playlist images (e.g. Navidrome)
-- Added link to open the local `settings.json` file
-- Added setting to use legacy authentication (#63)
-
-### Changed
-
-- Improved overall application keyboard accessibility
-- Playback no longer automatically starts if adding songs to the queue using `Add to queue`
-- Prevent accidental page navigation when using [Ctrl/Shift + Click] when multi-selecting rows in list-view
-- Standardized buttons between the Now Playing page and the mini player
-- "Add random" renamed to "Auto playlist"
-- Increased 'info' notification timeout from 1500ms -> 2000ms
-- Changed default mini player columns to better fit
-- Updated default themes to more modern standards (Default Dark, Default Light)
-
-### Fixed
-
-- Fixed title sort on the `Title (Combined)` column on the album list
-- Fixed 2nd song in queue being skipped when using the "Play" button multiple pages (album, artist, auto playlist)
-- Fixed `Title` column not showing the title on the Folder page (#69)
-- Fixed context menu windows showing underneath the mini player
-- Fixed `Add to queue (next)` adding songs to the wrong unshuffled index when shuffle is enabled
-- Fixed local search on the root Folder page
-- Fixed input picker dropdowns following the page on scroll
-- Fixed the current playing song not highlighted when using `Add to queue` on an empty play queue
-- Fixed artist list not using the `artistImageUrl` returned by Navidrome
-
-## [0.4.1] - 2021-10-27
-
-### Added
-
-- Added links to the genre column on the list-view
-- Added page forward/back buttons to main layout
-
-### Changed
-
-- Increase delay when completing mouse drag select in list view from `100ms` -> `200ms`
-- Change casing for main application name `sonixd` -> `Sonixd`
-
-### Fixed
-
-- Fixed Linux media hotkey support (MPRIS)
-  - Added commands for additional events `play` and `pause` (used by KDE's media player overlay)
-  - Set status to `Playing` when initially starting a song
-  - Set current song metadata when track automatically changes instead of only when it manually changes
-- Fixed filtered link to Album List on the Album page
-- Fixed filtered link to Album List on the Dashboard page
-- Fixed font color for lists/tables in panels
-  - Affects the search view song list and column selector list
-
-## [0.4.0] - 2021-10-26
-
-### Added
-
-- Added music folder selector (#52)
-- Added media hotkeys / MPRIS support for Linux (#50)
-  - This is due to dbus overriding the global shortcuts that electron sends
-- Added advanced column selector component
-  - Drag-n-drop list
-  - Individual resizable columns
-- (Windows) Added tray (Thanks @ncarmic4) (#45)
-  - Settings to minimize/exit to tray
-
-### Changed
-
-- Page selections are now persistent
-  - Active tab on config page
-  - Active tab on favorites page
-  - Filter selector on album list page
-- Playlists can now be saved after being sorted using column filters
-- Folder view
-  - Now shows all root folders in the list instead of in the input picker
-  - Now shows music folders in the input picker
-  - Now uses loader when switching pages
-- Changed styling for various views/components
-  - Look & Feel setting page now split up into multiple panels
-  - Renamed context menu button `Remove from current` -> `Remove selected`
-  - Page header titles width increased from `45%` -> `80%`
-  - Renamed `Scan library` -> `Scan`
-- All pages no longer refetch data when clicking back into the application
-
-### Fixed
-
-- Fixed shift-click multi select on a column-sorted list-view
-- Fixed right-click context menu showing up behind all modals (#55)
-- Fixed mini player showing up behind tag picker elements
-- Fixed duration showing up as `NaN:NaN` when duration is null or invalid
-- Fixed albums showing as a folder in Navidrome instances
-
-## [0.3.0] - 2021-10-16
-
-### Added
-
-- Added folder browser (#1)
-  - Added context menu button `View in folder`
-  - Requires that your server has support for the original `/getIndexes` and `/getMusicDirectory` endpoints
-- Added configurable row-hover highlight for list-view
-- (Windows) Added playback controls in thumbnail toolbar (#32)
-- (Windows/macOS) Added window size/position remembering on application close (#31)
-
-### Changed
-
-- Changed styling for various views/components
-  - Tooltips added on grid-view card hover buttons
-  - Mini-player removed rounded borders and increased opacity
-  - Mini-player removed animation on open/close
-  - Search bar now activated from button -> input on click / CTRL+F
-  - Page header toolbar buttons styling consistency
-  - Album list filter moved from right -> left
-  - Reordered context menu button `Move selected to [...]`
-  - Decreased horizontal width of expanded sidebar from 193px -> 165px
-
-### Fixed
-
-- Fixed duplicate scrobble requests when pause/resuming a song after the scrobble threshold (#30)
-- Fixed genre column not applying in the song list-view
-- Fixed default titlebar set on first run
-
-## [0.2.1] - 2021-10-11
-
-### Fixed
-
-- Fixed using play buttons on the artist view not starting playback
-- Fixed favoriting on horizontal scroll menu on dashboard/search views
-- Fixed typo on default artist list viewtype
-- Fixed artist image selection on artist view
-
-## [0.2.0] - 2021-10-11
-
-### Added
-
-- Added setting to enable scrobbling playing/played tracks to your server (#17)
-- Added setting to change between macOS and Windows styled titlebar (#23)
-- Added app/build versions and update checker on the config page (#18)
-- Added 'view in modal' button on the list-view context menu (#8)
-- Added a persistent indicator on grid-view cards for favorited albums/artists (#7)
-- Added buttons for 'Add to queue (next)' and 'Add to queue (later)' (#6)
-- Added left/right scroll buttons to the horizontal scrolling menu (dashboard/search)
-- Added last.fm link to artist page
-- Added link to cache location to open in local file explorer
-- Added reset to default for cache location
-- Added additional tooltips
-  - Grid-view card title and subtitle buttons
-  - Cover art on the player bar
-  - Header titles on album/artist pages
-
-### Changed
-
-- Changed starring logic on grid-view card to update local cache instead of refetch
-- Changed styling for various views/components
-  - Use dynamically sized hover buttons on grid-view cards depending on the card size
-  - Decreased size of buttons on album/playlist/artist pages
-  - Input picker text color changed from primary theme color to primary text color
-  - Crossfade type config changed from radio buttons to input picker
-  - Disconnect button color from red to default
-  - Tooltip styling updated to better match default theme
-  - Changed tag links to text links on album page
-- Changed page header images to use cache (album/artist)
-  - Artist image now falls back to last.fm if no local image
-
-### Fixed
-
-- Fixed song & image caching (#16)
-- Fixed set default artist list view type on first startup
-
-## [0.1.0] - 2021-10-06
-
-### Added
-
-- Initial release
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

Dockerfile

@@ -1,42 +0,0 @@
-# Stage 1 - Build frontend
-FROM node:16.5-alpine as ui-builder
-WORKDIR /app
-COPY . .
-RUN npm install && npm run build:renderer
-
-# Stage 2 - Build server
-FROM node:16.5-alpine as server-builder
-WORKDIR /app
-COPY src/server .
-RUN ls -lh
-RUN npm install
-RUN npm run build
-
-# Stage 3 - Deploy
-FROM node:16.5-alpine
-WORKDIR /root
-RUN mkdir appdata
-RUN mkdir sonixd-server
-RUN mkdir sonixd-client
-
-# Install server modules
-COPY src/server/package.json ./sonixd-server
-RUN cd ./sonixd-server && npm install --production
-
-# Add server build files
-COPY --from=server-builder /app/dist ./sonixd-server
-COPY --from=server-builder /app/prisma ./sonixd-server/prisma
-
-# Add client build files
-COPY --from=ui-builder /app/release/app/dist/renderer ./sonixd-client
-
-COPY docker-entrypoint.sh ./sonixd-server/docker-entrypoint.sh
-RUN chmod +x ./sonixd-server/docker-entrypoint.sh
-
-RUN cd ./sonixd-server && npx prisma generate
-RUN npm install pm2 -g
-
-WORKDIR /root/sonixd-server
-
-EXPOSE 9321
-CMD ["sh", "docker-entrypoint.sh"]

README.md

@@ -1,129 +1,67 @@
-<img src="assets/icon.png" alt="sonixd logo" title="sonixd" align="right" height="60px" />
+# Feishin
 
-# Sonixd
+  <p align="center">
+    <a href="https://github.com/jeffvli/feishin/blob/main/LICENSE">
+      <img src="https://img.shields.io/github/license/jeffvli/feishin?style=flat-square&color=brightgreen"
+      alt="License">
+    </a>
+      <a href="https://github.com/jeffvli/feishin/releases">
+      <img src="https://img.shields.io/github/v/release/jeffvli/feishin?style=flat-square&color=blue"
+      alt="Release">
+    </a>
+    <a href="https://github.com/jeffvli/feishin/releases">
+      <img src="https://img.shields.io/github/downloads/jeffvli/feishin/total?style=flat-square&color=orange"
+      alt="Downloads">
+    </a>
+  </p>
+  <p align="center">
+    <a href="https://discord.gg/FVKpcMDy5f">
+      <img src="https://img.shields.io/discord/922656312888811530?color=black&label=discord&logo=discord&logoColor=white"
+      alt="Discord">
+    </a>
+    <a href="https://matrix.to/#/#sonixd:matrix.org">
+      <img src="https://img.shields.io/matrix/sonixd:matrix.org?color=black&label=matrix&logo=matrix&logoColor=white"
+      alt="Matrix">
+    </a>
+  </p>
 
-  <a href="https://github.com/jeffvli/sonixd/releases">
-    <img src="https://img.shields.io/github/v/release/jeffvli/sonixd?style=flat-square&color=blue"
-    alt="Release">
-  </a>
-  <a href="https://github.com/jeffvli/sonixd/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/jeffvli/sonixd?style=flat-square&color=brightgreen"
-    alt="License">
-  </a>
-  <a href="https://github.com/jeffvli/sonixd/releases">
-    <img src="https://img.shields.io/github/downloads/jeffvli/sonixd/total?style=flat-square&color=orange"
-    alt="Downloads">
-  </a>
-  <a href="https://discord.gg/FVKpcMDy5f">
-    <img src="https://img.shields.io/discord/922656312888811530?color=red&label=discord&logo=discord&logoColor=white"
-    alt="Discord">
-  </a>
-  <a href="https://matrix.to/#/#sonixd:matrix.org">
-    <img src="https://img.shields.io/matrix/sonixd:matrix.org?color=red&label=matrix&logo=matrix&logoColor=white"
-    alt="Matrix">
-  </a>
-
-Sonixd is a cross-platform desktop client built for Subsonic-API (and Jellyfin in 0.8.0+) compatible music servers. This project was inspired by the many existing clients, but aimed to address a few key issues including <strong>scalability</strong>, <strong>library management</strong>, and <strong>user experience</strong>.
-
-- [**Usage documentation & FAQ**](https://github.com/jeffvli/sonixd/discussions/15)
-- [**Theming documentation**](https://github.com/jeffvli/sonixd/discussions/61)
-
-Sonixd has been tested on the following: [Navidrome](https://github.com/navidrome/navidrome), [Airsonic](https://github.com/airsonic/airsonic), [Airsonic-Advanced](https://github.com/airsonic-advanced/airsonic-advanced), [Gonic](https://github.com/sentriz/gonic), [Astiga](https://asti.ga/), [Jellyfin](https://github.com/jellyfin/jellyfin)
-
-### [Demo Sonixd using Navidrome](https://github.com/jeffvli/sonixd/discussions/244)
+Rewrite of [Sonixd](https://github.com/jeffvli/sonixd).
 
 ## Features
 
-- HTML5 audio with crossfading and gapless\* playback
-- Drag and drop rows with multi-select
-- Modify and save playlists intuitively
-- Handles large playlists and queues
-- Global mediakeys (and partial MPRIS) support
-- Multi-theme support
-- Supports all Subsonic/Jellyfin API compatible servers
-- Built with Electron, React with the [rsuite v4](https://github.com/rsuite/rsuite) component library
-
-<h5>* Gapless playback is artifically created using the crossfading players so it may not be perfect, YMMV.</h5>
+- [x] MPV player backend
+- [x] Web player backend
+- [x] Modern UI
+- [x] Scrobble playback to your server
+- [x] Smart playlist editor (Navidrome)
+- [ ] [Request a feature](https://github.com/jeffvli/feishin/issues) or [view taskboard](https://github.com/users/jeffvli/projects/5/views/1)
 
 ## Screenshots
 
-<a href="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/album.png"><img src="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/album.png" width="49.5%"/></a>
-<a href="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/artist.png"><img src="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/artist.png" width="49.5%"/></a>
-<a href="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/search.png"><img src="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/search.png" width="49.5%"/></a>
-<a href="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/now_playing.png"><img src="https://raw.githubusercontent.com/jeffvli/sonixd/main/assets/screenshots/0.13.1/now_playing.png" width="49.5%"/></a>
+<a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_home.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_home.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png" width="49.5%"/></a>
 
-## Install
+## Getting Started
 
-You can install sonixd by downloading the [latest release](https://github.com/jeffvli/sonixd/releases) for your specified operating system.
+Download the [latest desktop client](https://github.com/jeffvli/feishin/releases).
 
----
+## FAQ
 
-### Windows
+### What music servers does Feishin support?
 
-If you prefer not to download the release binary, you can install using `winget`.
+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).
 
-Using your favorite terminal (cmd/pwsh):
+- [Navidrome](https://github.com/navidrome/navidrome)
+- [Jellyfin](https://github.com/jellyfin/jellyfin)
+- ~~[Gonic](https://github.com/sentriz/gonic)~~
+- ~~[Astiga](https://asti.ga/)~~
+- ~~[Supysonic](https://github.com/spl0k/supysonic)~~
 
-```
-winget install sonixd
-```
+## Development
 
----
+Built and tested using Node `v16.15.0`.
 
-### Arch Linux
-
-There is an AUR package of the latest AppImage release available [here](https://aur.archlinux.org/packages/sonixd-appimage).
-
-To install it you can use your favourite AUR package manager and install the package: `sonixd-appimage`
-
-For example using `yay`:
-
-```
-yay -S sonixd-appimage
-```
-
-If you encounter any problems please comment on the [AUR](https://aur.archlinux.org/packages/sonixd-appimage) or contact the [maintainer](mailto:robin@blckct.io) directly before you open an issue here.
-
----
-
-Once installed, run the application and sign in to your music server with the following details. If you are using [airsonic-advanced](https://github.com/airsonic-advanced/airsonic-advanced), you will need to make sure that you create a `decodable` credential for your login user within the admin control panel.
-
-- Server - `e.g. http://localhost:4040/`
-- User name - `e.g. admin`
-- Password - `e.g. supersecret!`
-
-If you have any questions, feel free to check out the [Usage Documentation & FAQ](https://github.com/jeffvli/sonixd/discussions/15).
-
-## Development / Contributing
-
-This project is built off of [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate) v2.3.0.
-If you want to contribute to this project, please first create an [issue](https://github.com/jeffvli/sonixd/issues/new) or [discussion](https://github.com/jeffvli/sonixd/discussions/new) so that we can both discuss the idea and its feasability for integration.
-
-First, clone the repo via git and install dependencies (Windows development now requires additional setup, see [#232](https://github.com/jeffvli/sonixd/issues/232)):
-
-```bash
-git clone https://github.com/jeffvli/sonixd.git
-yarn install
-```
-
-Start the app in the `dev` environment:
-
-```bash
-yarn start
-```
-
-To package apps for the local platform:
-
-```bash
-yarn package
-```
-
-If you receive errors while packaging the application, try upgrading/downgrading your Node version (tested on v14.18.0).
-
-If you are unable to run via debug in VS Code, check troubleshooting steps [here](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2757#issuecomment-784200527).
-
-If your devtools extensions are failing to run/install, check troubleshooting steps [here](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2788).
+This project is built off of [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate) v4.6.0.
 
 ## License
 
-[GNU General Public License v3.0 ©](https://github.com/jeffvli/sonixd/blob/main/LICENSE)
+[GNU General Public License v3.0 ©](https://github.com/jeffvli/feishin/blob/dev/LICENSE)

docker-compose.dev.yml

@@ -1,47 +0,0 @@
-version: '3'
-services:
-  db:
-    container_name: sonixd_db
-    image: postgres:13
-    volumes:
-      - ${DATABASE_PERSIST_PATH}:/var/lib/postgresql/data
-    environment:
-      - POSTGRES_USER=${DATABASE_USERNAME}
-      - POSTGRES_PASSWORD=${DATABASE_PASSWORD}
-      - POSTGRES_DB=${DATABASE_NAME}
-    ports:
-      - '${DATABASE_PORT}:5432'
-    restart: unless-stopped
-  server:
-    container_name: sonixd_server
-    volumes:
-      - ./src/server:/app # Synchronise docker container with local change
-      - /app/node_modules # Avoid re-copying local node_modules. Cache in container.
-    build:
-      context: ./src/server
-      dockerfile: Dockerfile
-    depends_on:
-      - db
-    environment:
-      - APP_BASE_URL=${APP_BASE_URL}
-      - DATABASE_URL=postgresql://${DATABASE_USERNAME}:${DATABASE_PASSWORD}@db/${DATABASE_NAME}?schema=public&connection_limit=14&pool_timeout=20
-      - DATABASE_PORT=${DATABASE_PORT}
-      - TOKEN_SECRET=${TOKEN_SECRET}
-    ports:
-      - '9321:9321'
-    restart: unless-stopped
-  prisma:
-    container_name: sonixd_prisma_studio
-    volumes:
-      - ./src/server/prisma:/app/prisma
-    build:
-      context: ./src/server/prisma
-      dockerfile: Dockerfile
-    depends_on:
-      - db
-      - server
-    environment:
-      - DATABASE_URL=postgresql://${DATABASE_USERNAME}:${DATABASE_PASSWORD}@db/${DATABASE_NAME}?schema=public
-    ports:
-      - '5555:5555'
-    restart: unless-stopped

docker-compose.yml

@@ -1,25 +0,0 @@
-version: '3'
-services:
-  db:
-    container_name: sonixd_db
-    image: postgres:13
-    ports:
-      - '5432:5432'
-    volumes:
-      - ${DB_PERSIST_PATH}:/var/lib/postgresql/data
-    environment:
-      - POSTGRES_USER=${DB_USERNAME}
-      - POSTGRES_PASSWORD=${DB_PASSWORD}
-      - POSTGRES_DB=${DB_NAME}
-  server:
-    container_name: sonixd
-    image: sonixd:latest
-    depends_on:
-      - db
-    environment:
-      - APP_BASE_URL=${APP_BASE_URL}
-      - DATABASE_URL=postgresql://${DB_USERNAME}:${DB_PASSWORD}@db/${DB_NAME}?schema=public&connection_limit=14&pool_timeout=20
-      - DATABASE_SECRET=${DB_SECRET}
-    ports:
-      - '9321:9321'
-    restart: always

docker-entrypoint.sh

@@ -1,3 +0,0 @@
-npx prisma migrate deploy
-npx ts-node prisma/seed.ts
-pm2-runtime server.js

package.json

@@ -1,7 +1,8 @@
 {
-  "name": "sonixd",
-  "productName": "Sonixd",
-  "description": "A full-featured Subsonic/Jellyfin compatible music player",
+  "name": "feishin",
+  "productName": "Feishin",
+  "description": "Feishin music server",
+  "version": "0.1.1",
   "scripts": {
     "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
     "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
@@ -10,6 +11,8 @@
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:styles": "npx stylelint **/*.tsx",
     "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",
@@ -19,10 +22,8 @@
     "test": "jest",
     "prepare": "husky install",
     "i18next": "i18next -c src/renderer/i18n/i18next-parser.config.js",
-    "docker:up": "docker compose --file docker-compose.dev.yml --env-file .env.dev up --detach && docker compose --file docker-compose.dev.yml --env-file .env.dev logs -f",
-    "docker:down": "docker compose --file docker-compose.dev.yml --env-file .env.dev down && docker image rm sonixd_prisma",
-    "docker:migrate": "cd src/server && npx prisma generate && docker exec -ti sonixd_server sh -c \"npx prisma generate && npx prisma db push\"",
-    "docker:reset": "docker exec -ti sonixd_server sh -c \"npx prisma migrate reset && npx prisma db push && npx ts-node prisma/seed.ts\""
+    "prod:buildserver": "pwsh -c \"./scripts/server-build.ps1\"",
+    "prod:publishserver": "pwsh -c \"./scripts/server-publish.ps1\""
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -39,8 +40,8 @@
     ]
   },
   "build": {
-    "productName": "Sonixd",
-    "appId": "org.erb.sonixd",
+    "productName": "Feishin",
+    "appId": "org.jeffvli.feishin",
     "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
     "asar": true,
     "asarUnpack": "**\\*.{node,dll}",
@@ -50,6 +51,7 @@
       "package.json"
     ],
     "afterSign": ".erb/scripts/notarize.js",
+    "electronVersion": "22.3.1",
     "mac": {
       "target": {
         "target": "default",
@@ -103,12 +105,12 @@
     "publish": {
       "provider": "github",
       "owner": "jeffvli",
-      "repo": "sonixd"
+      "repo": "feishin"
     }
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jeffvli/sonixd.git"
+    "url": "git+https://github.com/jeffvli/feishin.git"
   },
   "author": {
     "name": "jeffvli",
@@ -117,7 +119,7 @@
   "contributors": [],
   "license": "GPL-3.0",
   "bugs": {
-    "url": "https://github.com/jeffvli/sonixd/issues"
+    "url": "https://github.com/jeffvli/feishin/issues"
   },
   "keywords": [
     "subsonic",
@@ -127,7 +129,7 @@
     "react",
     "electron"
   ],
-  "homepage": "https://github.com/jeffvli/sonixd",
+  "homepage": "https://github.com/jeffvli/feishin",
   "jest": {
     "testURL": "http://localhost/",
     "testEnvironment": "jsdom",
@@ -157,29 +159,29 @@
     ]
   },
   "devDependencies": {
+    "@electron/rebuild": "^3.2.10",
     "@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",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
+    "@types/electron-localshortcut": "^3.1.0",
     "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.182",
+    "@types/lodash": "^4.14.188",
     "@types/md5": "^2.3.2",
     "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@types/react-lazy-load-image-component": "^1.5.2",
-    "@types/react-slider": "^1.3.1",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
-    "@types/styled-components": "^5.1.25",
+    "@types/styled-components": "^5.1.26",
     "@types/terser-webpack-plugin": "^5.0.4",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "browserslist-config-erb": "^0.0.3",
     "chalk": "^4.1.2",
     "concurrently": "^7.1.0",
@@ -188,13 +190,12 @@
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "detect-port": "^1.3.0",
-    "electron": "^18.0.1",
-    "electron-builder": "^23.0.3",
+    "electron": "^22.3.1",
+    "electron-builder": "^24.0.0-alpha.13",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.1",
-    "electron-rebuild": "^3.2.7",
     "electronmon": "^2.0.2",
-    "eslint": "^8.12.0",
+    "eslint": "^8.30.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-erb": "^4.0.3",
     "eslint-import-resolver-typescript": "^2.7.1",
@@ -236,7 +237,8 @@
     "ts-jest": "^27.1.4",
     "ts-loader": "^9.2.8",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.4",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.8.4",
     "typescript-plugin-styled-components": "^2.0.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.71.0",
@@ -246,43 +248,59 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@jellyfin/client-axios": "^10.7.8",
-    "@mantine/core": "^5.0.0",
-    "@mantine/form": "^5.0.0",
-    "@mantine/hooks": "^5.0.0",
-    "axios": "^0.26.1",
+    "@ag-grid-community/client-side-row-model": "^28.2.1",
+    "@ag-grid-community/core": "^28.2.1",
+    "@ag-grid-community/infinite-row-model": "^28.2.1",
+    "@ag-grid-community/react": "^28.2.1",
+    "@ag-grid-community/styles": "^28.2.1",
+    "@emotion/react": "^11.10.4",
+    "@mantine/core": "^6.0.10",
+    "@mantine/dates": "^6.0.10",
+    "@mantine/form": "^6.0.10",
+    "@mantine/hooks": "^6.0.10",
+    "@mantine/modals": "^6.0.10",
+    "@mantine/notifications": "^6.0.10",
+    "@mantine/utils": "^6.0.10",
+    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query-devtools": "^4.29.6",
+    "@ts-rest/core": "^3.19.4",
+    "axios": "^1.4.0",
+    "cmdk": "^0.2.0",
+    "dayjs": "^1.11.6",
     "electron-debug": "^3.2.0",
+    "electron-localshortcut": "^3.2.1",
     "electron-log": "^4.4.6",
+    "electron-store": "^8.1.0",
     "electron-updater": "^4.6.5",
+    "fast-average-color": "^9.2.0",
     "format-duration": "^2.0.0",
-    "framer-motion": "^6.4.2",
+    "framer-motion": "^8.1.3",
     "history": "^5.3.0",
     "i18next": "^21.6.16",
-    "immer": "^9.0.15",
-    "is-electron": "^2.2.1",
+    "immer": "^9.0.21",
+    "is-electron": "^2.2.2",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
+    "memoize-one": "^6.0.0",
     "nanoid": "^3.3.3",
     "net": "^1.0.2",
     "node-mpv": "^2.0.0-beta.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-helmet-async": "^1.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^3.1.4",
     "react-i18next": "^11.16.7",
-    "react-lazy-load-image-component": "^1.5.4",
-    "react-player": "^2.10.0",
-    "react-query": "^4.0.0-beta.23",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "react-slider": "^2.0.0",
-    "react-spaces": "^0.3.4",
-    "react-use": "^17.3.2",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.7",
-    "react-window-infinite-loader": "^1.0.8",
-    "styled-components": "^5.3.5",
-    "tabler-icons-react": "^1.46.0",
-    "zustand": "^4.0.0-rc.1"
+    "react-icons": "^4.8.0",
+    "react-player": "^2.11.0",
+    "react-router": "^6.5.0",
+    "react-router-dom": "^6.5.0",
+    "react-simple-img": "^3.0.0",
+    "react-virtualized-auto-sizer": "^1.0.15",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "styled-components": "^5.3.10",
+    "swiper": "^9.3.1",
+    "zod": "^3.21.4",
+    "zustand": "^4.3.8"
   },
   "resolutions": {
     "styled-components": "^5"
@@ -292,18 +310,10 @@
     "npm": ">=7.x"
   },
   "browserslist": [],
-  "prettier": {
-    "overrides": [
-      {
-        "files": [
-          ".prettierrc",
-          ".eslintrc"
-        ],
-        "options": {
-          "parser": "json"
-        }
-      }
-    ],
-    "singleQuote": true
+  "electronmon": {
+    "patterns": [
+      "!server",
+      "!src/renderer"
+    ]
   }
 }

release/app/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "sonixd",
-  "version": "1.0.0-alpha1",
-  "description": "A full-featured Subsonic/Jellyfin compatible desktop client",
+  "name": "feishin",
+  "version": "0.1.1",
+  "description": "",
   "main": "./dist/main/main.js",
   "author": {
     "name": "jeffvli",
@@ -12,6 +12,11 @@
     "link-modules": "node -r ts-node/register ../../.erb/scripts/link-modules.ts",
     "postinstall": "npm run electron-rebuild && npm run link-modules"
   },
-  "dependencies": {},
-  "license": "MIT"
+  "dependencies": {
+    "mpris-service": "^2.1.2"
+  },
+  "devDependencies": {
+    "electron": "22.3.1"
+  },
+  "license": "GPL-3.0"
 }

src/__tests__/App.test.tsx

@@ -1,10 +1,9 @@
 import '@testing-library/jest-dom';
-// import { render } from '@testing-library/react';
-// import { App } from 'renderer/app';
+import { render } from '@testing-library/react';
+import { App } from '../renderer/app';
 
 describe('App', () => {
-  // eslint-disable-next-line jest/no-commented-out-tests
-  // it('should render', () => {
-  //   expect(render(<App />)).toBeTruthy();
-  // });
+  it('should render', () => {
+    expect(render(<App />)).toBeTruthy();
+  });
 });

src/main/features/core/index.ts

@@ -1 +1,2 @@
 import './player';
+import './settings';

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

@@ -1,117 +1,130 @@
 import { ipcMain } from 'electron';
-import MpvAPI from 'node-mpv';
-import { PlayerData } from '../../../../renderer/store';
-import { getMainWindow } from '../../../main';
+import { getMainWindow, getMpvInstance } from '../../../main';
+import { PlayerData } from '/@/renderer/store';
 
-const mpv = new MpvAPI(
-  {
-    audio_only: true,
-    auto_restart: true,
-    binary: 'C:/ProgramData/chocolatey/lib/mpv.install/tools/mpv.exe',
-    time_update: 1,
-  },
-  ['--gapless-audio=yes', '--prefetch-playlist']
-);
+declare module 'node-mpv';
 
-mpv.start().catch((error: any) => {
-  console.log('error', error);
-});
+function wait(timeout: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('resolved');
+    }, timeout);
+  });
+}
 
-mpv.on('status', (status: any) => {
-  if (status.property === 'playlist-pos') {
-    if (status.value !== 0) {
-      getMainWindow()?.webContents.send('renderer-player-set-queue-next');
-    }
-  }
-});
-
-// Automatically updates the play button when the player is playing
-mpv.on('started', () => {
-  getMainWindow()?.webContents.send('renderer-player-play');
-});
-
-// Automatically updates the play button when the player is stopped
-mpv.on('stopped', () => {
-  getMainWindow()?.webContents.send('renderer-player-stop');
-});
-
-// Automatically updates the play button when the player is paused
-mpv.on('paused', () => {
-  getMainWindow()?.webContents.send('renderer-player-pause');
-});
-
-mpv.on('quit', () => {
-  console.log('mpv quit');
-});
-
-// Event output every interval set by time_update, used to update the current time
-mpv.on('timeposition', (time: number) => {
-  getMainWindow()?.webContents.send('renderer-player-current-time', time);
-});
-
-mpv.on('seek', () => {
-  console.log('mpv seek');
+ipcMain.on('player-start', async () => {
+  await getMpvInstance()?.play();
 });
 
 // Starts the player
 ipcMain.on('player-play', async () => {
-  await mpv.play();
+  await getMpvInstance()?.play();
 });
 
 // Pauses the player
 ipcMain.on('player-pause', async () => {
-  await mpv.pause();
+  await getMpvInstance()?.pause();
 });
 
 // Stops the player
 ipcMain.on('player-stop', async () => {
-  await mpv.stop();
+  await getMpvInstance()?.stop();
 });
 
-// Stops the player
+// Goes to the next track in the playlist
 ipcMain.on('player-next', async () => {
-  await mpv.next();
+  await getMpvInstance()?.next();
 });
 
-// Stops the player
+// Goes to the previous track in the playlist
 ipcMain.on('player-previous', async () => {
-  await mpv.previous();
+  await getMpvInstance()?.prev();
 });
 
 // Seeks forward or backward by the given amount of seconds
 ipcMain.on('player-seek', async (_event, time: number) => {
-  await mpv.seek(time);
+  await getMpvInstance()?.seek(time);
 });
 
 // Seeks to the given time in seconds
 ipcMain.on('player-seek-to', async (_event, time: number) => {
-  await mpv.goToPosition(time);
+  await getMpvInstance()?.goToPosition(time);
 });
 
-// Sets the queue 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) => {
-  if (data.queue.current) {
-    await mpv.load(data.queue.current.streamUrl, 'replace');
+// 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) {
+    await getMpvInstance()?.clearPlaylist();
+    await getMpvInstance()?.pause();
+    return;
+  }
+
+  let complete = false;
+  let tryAttempts = 0;
+
+  while (!complete) {
+    if (tryAttempts > 3) {
+      getMainWindow()?.webContents.send('renderer-player-error', 'Failed to load song');
+      complete = true;
+    } else {
+      try {
+        if (data.queue.current) {
+          await getMpvInstance()?.load(data.queue.current.streamUrl, 'replace');
+        }
+
+        if (data.queue.next) {
+          await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
+        }
+
+        complete = true;
+      } catch (err) {
+        console.error(err);
+        tryAttempts += 1;
+        await wait(500);
+      }
+    }
+  }
+
+  if (pause) {
+    await getMpvInstance()?.pause();
+  }
+});
+
+// Replaces the queue in position 1 to the given data
+ipcMain.on('player-set-queue-next', async (_event, data: PlayerData) => {
+  const size = await getMpvInstance()?.getPlaylistSize();
+
+  if (!size) {
+    return;
+  }
+
+  if (size > 1) {
+    await getMpvInstance()?.playlistRemove(1);
   }
 
   if (data.queue.next) {
-    await mpv.load(data.queue.next.streamUrl, 'append');
+    await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
   }
 });
 
 // Sets the next song in the queue when reaching the end of the queue
-ipcMain.on('player-set-queue-next', async (_event, data: PlayerData) => {
+ipcMain.on('player-auto-next', async (_event, data: PlayerData) => {
+  // Always keep the current song as position 0 in the mpv queue
+  // This allows us to easily set update the next song in the queue without
+  // disturbing the currently playing song
+  await getMpvInstance()?.playlistRemove(0);
+
   if (data.queue.next) {
-    await mpv.load(data.queue.next.streamUrl, 'append');
+    await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
   }
 });
 
 // Sets the volume to the given value (0-100)
 ipcMain.on('player-volume', async (_event, value: number) => {
-  mpv.volume(value);
+  await getMpvInstance()?.volume(value);
 });
 
 // Toggles the mute status
 ipcMain.on('player-mute', async () => {
-  mpv.mute();
+  await getMpvInstance()?.mute();
 });

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

@@ -0,0 +1,27 @@
+/* eslint-disable promise/always-return */
+import { BrowserWindow, globalShortcut } from 'electron';
+
+export const enableMediaKeys = (window: BrowserWindow | null) => {
+  globalShortcut.register('MediaStop', () => {
+    window?.webContents.send('renderer-player-stop');
+  });
+
+  globalShortcut.register('MediaPlayPause', () => {
+    window?.webContents.send('renderer-player-play-pause');
+  });
+
+  globalShortcut.register('MediaNextTrack', () => {
+    window?.webContents.send('renderer-player-next');
+  });
+
+  globalShortcut.register('MediaPreviousTrack', () => {
+    window?.webContents.send('renderer-player-previous');
+  });
+};
+
+export const disableMediaKeys = () => {
+  globalShortcut.unregister('MediaStop');
+  globalShortcut.unregister('MediaPlayPause');
+  globalShortcut.unregister('MediaNextTrack');
+  globalShortcut.unregister('MediaPreviousTrack');
+};

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

@@ -1 +0,0 @@
-declare module 'node-mpv';

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

@@ -0,0 +1,12 @@
+import { ipcMain } from 'electron';
+import Store from 'electron-store';
+
+export const store = new Store();
+
+ipcMain.handle('settings-get', (_event, data: { property: string }) => {
+  return store.get(`${data.property}`);
+});
+
+ipcMain.on('settings-set', (__event, data: { property: string; value: any }) => {
+  store.set(`${data.property}`, data.value);
+});

src/main/features/linux/index.ts

@@ -0,0 +1 @@
+import './mpris';

src/main/features/linux/mpris.ts

@@ -0,0 +1,168 @@
+import { ipcMain } from 'electron';
+import Player from 'mpris-service';
+import { QueueSong, RelatedArtist } from '../../../renderer/api/types';
+import { getMainWindow } from '../../main';
+import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
+
+const mprisPlayer = Player({
+  identity: 'Feishin',
+  maximumRate: 1.0,
+  minimumRate: 1.0,
+  name: 'Feishin',
+  rate: 1.0,
+  supportedInterfaces: ['player'],
+  supportedMimeTypes: ['audio/mpeg', 'application/ogg'],
+  supportedUriSchemes: ['file'],
+});
+
+mprisPlayer.on('quit', () => {
+  process.exit();
+});
+
+mprisPlayer.on('stop', () => {
+  getMainWindow()?.webContents.send('renderer-player-stop');
+  mprisPlayer.playbackStatus = 'Paused';
+});
+
+mprisPlayer.on('pause', () => {
+  getMainWindow()?.webContents.send('renderer-player-pause');
+  mprisPlayer.playbackStatus = 'Paused';
+});
+
+mprisPlayer.on('play', () => {
+  getMainWindow()?.webContents.send('renderer-player-play');
+  mprisPlayer.playbackStatus = 'Playing';
+});
+
+mprisPlayer.on('playpause', () => {
+  getMainWindow()?.webContents.send('renderer-player-play-pause');
+  if (mprisPlayer.playbackStatus !== 'Playing') {
+    mprisPlayer.playbackStatus = 'Playing';
+  } else {
+    mprisPlayer.playbackStatus = 'Paused';
+  }
+});
+
+mprisPlayer.on('next', () => {
+  getMainWindow()?.webContents.send('renderer-player-next');
+
+  if (mprisPlayer.playbackStatus !== 'Playing') {
+    mprisPlayer.playbackStatus = 'Playing';
+  }
+});
+
+mprisPlayer.on('previous', () => {
+  getMainWindow()?.webContents.send('renderer-player-previous');
+
+  if (mprisPlayer.playbackStatus !== 'Playing') {
+    mprisPlayer.playbackStatus = Player.PLAYBACK_STATUS_PLAYING;
+  }
+});
+
+mprisPlayer.on('volume', (event: any) => {
+  getMainWindow()?.webContents.send('mpris-request-volume', {
+    volume: event,
+  });
+});
+
+mprisPlayer.on('shuffle', (event: boolean) => {
+  getMainWindow()?.webContents.send('mpris-request-toggle-shuffle', { shuffle: event });
+  mprisPlayer.shuffle = event;
+});
+
+mprisPlayer.on('loopStatus', (event: string) => {
+  getMainWindow()?.webContents.send('mpris-request-toggle-repeat', { repeat: event });
+  mprisPlayer.loopStatus = event;
+});
+
+mprisPlayer.on('position', (event: any) => {
+  getMainWindow()?.webContents.send('mpris-request-position', {
+    position: event.position / 1e6,
+  });
+});
+
+mprisPlayer.on('seek', (event: number) => {
+  getMainWindow()?.webContents.send('mpris-request-seek', {
+    offset: event / 1e6,
+  });
+});
+
+ipcMain.on('mpris-update-position', (_event, arg) => {
+  mprisPlayer.getPosition = () => arg * 1e6;
+});
+
+ipcMain.on('mpris-update-seek', (_event, arg) => {
+  mprisPlayer.seeked(arg * 1e6);
+});
+
+ipcMain.on('mpris-update-volume', (_event, arg) => {
+  mprisPlayer.volume = Number(arg);
+});
+
+ipcMain.on('mpris-update-repeat', (_event, arg) => {
+  mprisPlayer.loopStatus = arg;
+});
+
+ipcMain.on('mpris-update-shuffle', (_event, arg) => {
+  mprisPlayer.shuffle = arg;
+});
+
+ipcMain.on(
+  'mpris-update-song',
+  (
+    _event,
+    args: {
+      currentTime: number;
+      repeat: PlayerRepeat;
+      shuffle: PlayerShuffle;
+      song: QueueSong;
+      status: PlayerStatus;
+    },
+  ) => {
+    const { song, status, repeat, shuffle } = args || {};
+
+    try {
+      mprisPlayer.playbackStatus = status;
+
+      if (repeat) {
+        mprisPlayer.loopStatus =
+          repeat === 'all' ? 'Playlist' : repeat === 'one' ? 'Track' : 'None';
+      }
+
+      if (shuffle) {
+        mprisPlayer.shuffle = shuffle;
+      }
+
+      if (!song) return;
+
+      const upsizedImageUrl = song.imageUrl
+        ? song.imageUrl
+            ?.replace(/&size=\d+/, '&size=300')
+            .replace(/\?width=\d+/, '?width=300')
+            .replace(/&height=\d+/, '&height=300')
+        : null;
+
+      mprisPlayer.metadata = {
+        'mpris:artUrl': upsizedImageUrl,
+        'mpris:length': song.duration ? Math.round((song.duration || 0) * 1e6) : null,
+        'mpris:trackid': song?.id
+          ? mprisPlayer.objectPath(`track/${song.id?.replace('-', '')}`)
+          : '',
+        'xesam:album': song.album || null,
+        'xesam:albumArtist': song.albumArtists?.length ? song.albumArtists[0].name : null,
+        'xesam:artist':
+          song.artists?.length !== 0
+            ? song.artists?.map((artist: RelatedArtist) => artist.name)
+            : null,
+        'xesam:discNumber': song.discNumber ? song.discNumber : null,
+        'xesam:genre': song.genres?.length ? song.genres.map((genre: any) => genre.name) : null,
+        'xesam:title': song.name || null,
+        'xesam:trackNumber': song.trackNumber ? song.trackNumber : null,
+        'xesam:useCount':
+          song.playCount !== null && song.playCount !== undefined ? song.playCount : null,
+      };
+    } catch (err) {
+      console.log(err);
+    }
+  },
+);

src/main/main.ts

@@ -8,14 +8,32 @@
  * When running `npm run build` or `npm run build:main`, this file is compiled to
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
-import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import { access, constants, readFile, writeFile } from 'fs';
+import path, { join } from 'path';
+import { deflate, inflate } from 'zlib';
+import {
+  app,
+  BrowserWindow,
+  shell,
+  ipcMain,
+  globalShortcut,
+  Tray,
+  Menu,
+  nativeImage,
+} from 'electron';
+import electronLocalShortcut from 'electron-localshortcut';
 import log from 'electron-log';
 import { autoUpdater } from 'electron-updater';
+import uniq from 'lodash/uniq';
+import MpvAPI from 'node-mpv';
+import { disableMediaKeys, enableMediaKeys } from './features/core/player/media-keys';
+import { store } from './features/core/settings/index';
 import MenuBuilder from './menu';
-import { resolveHtmlPath } from './utils';
+import { hotkeyToElectronAccelerator, isLinux, isMacOS, isWindows, resolveHtmlPath } from './utils';
 import './features';
 
+declare module 'node-mpv';
+
 export default class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
@@ -24,15 +42,25 @@ export default class AppUpdater {
   }
 }
 
+process.on('uncaughtException', (error: any) => {
+  console.log('Error in main process', error);
+});
+
+if (store.get('ignore_ssl')) {
+  app.commandLine.appendSwitch('ignore-certificate-errors');
+}
+
 let mainWindow: BrowserWindow | null = null;
+let tray: Tray | null = null;
+let exitFromTray = false;
+let forceQuit = false;
 
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
   sourceMapSupport.install();
 }
 
-const isDevelopment =
-  process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
+const isDevelopment = process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
 
 if (isDevelopment) {
   require('electron-debug')();
@@ -46,42 +74,142 @@ const installExtensions = async () => {
   return installer
     .default(
       extensions.map((name) => installer[name]),
-      forceDownload
+      forceDownload,
     )
     .catch(console.log);
 };
 
+const singleInstance = app.requestSingleInstanceLock();
+
+if (!singleInstance) {
+  app.quit();
+}
+
+const RESOURCES_PATH = app.isPackaged
+  ? path.join(process.resourcesPath, 'assets')
+  : path.join(__dirname, '../../assets');
+
+const getAssetPath = (...paths: string[]): string => {
+  return path.join(RESOURCES_PATH, ...paths);
+};
+
+export const getMainWindow = () => {
+  return mainWindow;
+};
+
+const createWinThumbarButtons = () => {
+  if (isWindows()) {
+    getMainWindow()?.setThumbarButtons([
+      {
+        click: () => getMainWindow()?.webContents.send('renderer-player-previous'),
+        icon: nativeImage.createFromPath(getAssetPath('skip-previous.png')),
+        tooltip: 'Previous Track',
+      },
+      {
+        click: () => getMainWindow()?.webContents.send('renderer-player-play-pause'),
+        icon: nativeImage.createFromPath(getAssetPath('play-circle.png')),
+        tooltip: 'Play/Pause',
+      },
+      {
+        click: () => getMainWindow()?.webContents.send('renderer-player-next'),
+        icon: nativeImage.createFromPath(getAssetPath('skip-next.png')),
+        tooltip: 'Next Track',
+      },
+    ]);
+  }
+};
+
+const createTray = () => {
+  if (isMacOS()) {
+    return;
+  }
+
+  tray = isLinux() ? new Tray(getAssetPath('icon.png')) : new Tray(getAssetPath('icon.ico'));
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      click: () => {
+        getMainWindow()?.webContents.send('renderer-player-play-pause');
+      },
+      label: 'Play/Pause',
+    },
+    {
+      click: () => {
+        getMainWindow()?.webContents.send('renderer-player-next');
+      },
+      label: 'Next Track',
+    },
+    {
+      click: () => {
+        getMainWindow()?.webContents.send('renderer-player-previous');
+      },
+      label: 'Previous Track',
+    },
+    {
+      click: () => {
+        getMainWindow()?.webContents.send('renderer-player-stop');
+      },
+      label: 'Stop',
+    },
+    {
+      type: 'separator',
+    },
+    {
+      click: () => {
+        mainWindow?.show();
+        createWinThumbarButtons();
+      },
+      label: 'Open main window',
+    },
+    {
+      click: () => {
+        exitFromTray = true;
+        app.quit();
+      },
+      label: 'Quit',
+    },
+  ]);
+
+  tray.on('double-click', () => {
+    mainWindow?.show();
+    createWinThumbarButtons();
+  });
+
+  tray.setToolTip('Feishin');
+  tray.setContextMenu(contextMenu);
+};
+
 const createWindow = async () => {
   if (isDevelopment) {
     await installExtensions();
   }
 
-  const RESOURCES_PATH = app.isPackaged
-    ? path.join(process.resourcesPath, 'assets')
-    : path.join(__dirname, '../../assets');
-
-  const getAssetPath = (...paths: string[]): string => {
-    return path.join(RESOURCES_PATH, ...paths);
-  };
-
   mainWindow = new BrowserWindow({
     frame: false,
-    height: 728,
+    height: 900,
     icon: getAssetPath('icon.png'),
     minHeight: 600,
     minWidth: 640,
     show: false,
     webPreferences: {
+      allowRunningInsecureContent: !!store.get('ignore_ssl'),
       backgroundThrottling: false,
-
       contextIsolation: true,
       devTools: true,
       nodeIntegration: true,
       preload: app.isPackaged
         ? path.join(__dirname, 'preload.js')
         : path.join(__dirname, '../../.erb/dll/preload.js'),
+      webSecurity: !store.get('ignore_cors'),
     },
-    width: 1024,
+    width: 1440,
+  });
+
+  electronLocalShortcut.register(mainWindow, 'Ctrl+Shift+I', () => {
+    mainWindow?.webContents.openDevTools();
+  });
+
+  ipcMain.on('window-dev-tools', () => {
+    mainWindow?.webContents.openDevTools();
   });
 
   ipcMain.on('window-maximize', () => {
@@ -100,6 +228,55 @@ const createWindow = async () => {
     mainWindow?.close();
   });
 
+  ipcMain.on('app-restart', () => {
+    app.relaunch();
+    app.exit(0);
+  });
+
+  ipcMain.on('global-media-keys-enable', () => {
+    enableMediaKeys(mainWindow);
+  });
+
+  ipcMain.on('global-media-keys-disable', () => {
+    disableMediaKeys();
+  });
+
+  ipcMain.on('player-restore-queue', () => {
+    if (store.get('resume')) {
+      const queueLocation = join(app.getPath('userData'), 'queue');
+
+      access(queueLocation, constants.F_OK, (accessError) => {
+        if (accessError) {
+          console.error('unable to access saved queue: ', accessError);
+          return;
+        }
+
+        readFile(queueLocation, (readError, buffer) => {
+          if (readError) {
+            console.error('failed to read saved queue: ', readError);
+            return;
+          }
+
+          inflate(buffer, (decompressError, data) => {
+            if (decompressError) {
+              console.error('failed to decompress queue: ', decompressError);
+              return;
+            }
+
+            const queue = JSON.parse(data.toString());
+            getMainWindow()?.webContents.send('renderer-player-restore-queue', queue);
+          });
+        });
+      });
+    }
+  });
+
+  const globalMediaKeysEnabled = store.get('global_media_hotkeys') as boolean;
+
+  if (globalMediaKeysEnabled !== false) {
+    enableMediaKeys(mainWindow);
+  }
+
   mainWindow.loadURL(resolveHtmlPath('index.html'));
 
   mainWindow.on('ready-to-show', () => {
@@ -110,6 +287,7 @@ const createWindow = async () => {
       mainWindow.minimize();
     } else {
       mainWindow.show();
+      createWinThumbarButtons();
     }
   });
 
@@ -117,6 +295,72 @@ const createWindow = async () => {
     mainWindow = null;
   });
 
+  let saved = false;
+
+  mainWindow.on('close', (event) => {
+    if (!exitFromTray && store.get('window_exit_to_tray')) {
+      if (isMacOS() && !forceQuit) {
+        exitFromTray = true;
+      }
+      event.preventDefault();
+      mainWindow?.hide();
+    }
+
+    if (!saved && store.get('resume')) {
+      event.preventDefault();
+      saved = true;
+
+      getMainWindow()?.webContents.send('renderer-player-save-queue');
+
+      ipcMain.once('player-save-queue', async (_event, data: Record<string, any>) => {
+        const queueLocation = join(app.getPath('userData'), 'queue');
+        const serialized = JSON.stringify(data);
+
+        try {
+          await new Promise<void>((resolve, reject) => {
+            deflate(serialized, { level: 1 }, (error, deflated) => {
+              if (error) {
+                reject(error);
+              } else {
+                writeFile(queueLocation, deflated, (writeError) => {
+                  if (writeError) {
+                    reject(writeError);
+                  } else {
+                    resolve();
+                  }
+                });
+              }
+            });
+          });
+        } catch (error) {
+          console.error('error saving queue state: ', error);
+        } finally {
+          mainWindow?.close();
+          if (forceQuit) {
+            app.exit();
+          }
+        }
+      });
+    }
+  });
+
+  mainWindow.on('minimize', (event: any) => {
+    if (store.get('window_minimize_to_tray') === true) {
+      event.preventDefault();
+      mainWindow?.hide();
+    }
+  });
+
+  if (isWindows()) {
+    app.setAppUserModelId(process.execPath);
+  }
+
+  if (isMacOS()) {
+    app.on('before-quit', () => {
+      forceQuit = true;
+    });
+  }
+
   const menuBuilder = new MenuBuilder(mainWindow);
   menuBuilder.buildMenu();
 
@@ -126,28 +370,225 @@ const createWindow = async () => {
     return { action: 'deny' };
   });
 
-  // Remove this if your app does not use auto updates
-  // eslint-disable-next-line
-  new AppUpdater();
+  if (store.get('disable_auto_updates') !== true) {
+    // eslint-disable-next-line
+    new AppUpdater();
+  }
 };
 
-/**
- * Add event listeners...
- */
+app.commandLine.appendSwitch('disable-features', 'HardwareMediaKeyHandling,MediaSessionService');
 
-app.commandLine.appendSwitch(
-  'disable-features',
-  'HardwareMediaKeyHandling,MediaSessionService'
+const MPV_BINARY_PATH = store.get('mpv_path') as string | undefined;
+
+const prefetchPlaylistParams = [
+  '--prefetch-playlist=no',
+  '--prefetch-playlist=yes',
+  '--prefetch-playlist',
+];
+
+const DEFAULT_MPV_PARAMETERS = (extraParameters?: string[]) => {
+  const parameters = ['--idle=yes'];
+
+  if (!extraParameters?.some((param) => prefetchPlaylistParams.includes(param))) {
+    parameters.push('--prefetch-playlist=yes');
+  }
+
+  return parameters;
+};
+
+let mpvInstance: MpvAPI | null = null;
+
+const createMpv = (data: { extraParameters?: string[]; properties?: Record<string, any> }) => {
+  const { extraParameters, properties } = data;
+
+  const params = uniq([...DEFAULT_MPV_PARAMETERS(extraParameters), ...(extraParameters || [])]);
+  console.log('Setting mpv params: ', params);
+
+  mpvInstance = new MpvAPI(
+    {
+      audio_only: true,
+      auto_restart: true,
+      binary: MPV_BINARY_PATH || '',
+      time_update: 1,
+    },
+    params,
+  );
+
+  console.log('Setting MPV properties: ', properties);
+  mpvInstance.setMultipleProperties(properties || {});
+
+  mpvInstance.start().catch((error) => {
+    console.log('MPV Event: start error', error);
+  });
+
+  mpvInstance.on('status', (status, ...rest) => {
+    console.log('MPV Event: status', status.property, status.value, rest);
+    if (status.property === 'playlist-pos') {
+      if (status.value === -1) {
+        mpvInstance?.stop();
+      }
+
+      if (status.value !== 0) {
+        getMainWindow()?.webContents.send('renderer-player-auto-next');
+      }
+    }
+  });
+
+  // Automatically updates the play button when the player is playing
+  mpvInstance.on('resumed', () => {
+    console.log('MPV Event: resumed');
+    getMainWindow()?.webContents.send('renderer-player-play');
+  });
+
+  // Automatically updates the play button when the player is stopped
+  mpvInstance.on('stopped', () => {
+    console.log('MPV Event: stopped');
+    getMainWindow()?.webContents.send('renderer-player-stop');
+  });
+
+  // Automatically updates the play button when the player is paused
+  mpvInstance.on('paused', () => {
+    console.log('MPV Event: paused');
+    getMainWindow()?.webContents.send('renderer-player-pause');
+  });
+
+  // Event output every interval set by time_update, used to update the current time
+  mpvInstance.on('timeposition', (time: number) => {
+    getMainWindow()?.webContents.send('renderer-player-current-time', time);
+  });
+
+  mpvInstance.on('quit', () => {
+    console.log('MPV Event: quit');
+  });
+};
+
+export const getMpvInstance = () => {
+  return mpvInstance;
+};
+
+ipcMain.on('player-set-properties', async (_event, data: Record<string, any>) => {
+  if (data.length === 0) {
+    return;
+  }
+
+  if (data.length === 1) {
+    getMpvInstance()?.setProperty(Object.keys(data)[0], Object.values(data)[0]);
+  } else {
+    getMpvInstance()?.setMultipleProperties(data);
+  }
+});
+
+ipcMain.on(
+  'player-restart',
+  async (_event, data: { extraParameters?: string[]; properties?: Record<string, any> }) => {
+    mpvInstance?.quit();
+    createMpv(data);
+  },
 );
 
-export const getMainWindow = () => {
-  return mainWindow;
+ipcMain.on(
+  'player-initialize',
+  async (_event, data: { extraParameters?: string[]; properties?: Record<string, any> }) => {
+    createMpv(data);
+  },
+);
+
+ipcMain.on('player-quit', async () => {
+  mpvInstance?.stop();
+  mpvInstance?.quit();
+  mpvInstance = null;
+});
+
+// Must duplicate with the one in renderer process settings.store.ts
+enum BindingActions {
+  GLOBAL_SEARCH = 'globalSearch',
+  LOCAL_SEARCH = 'localSearch',
+  MUTE = 'volumeMute',
+  NEXT = 'next',
+  PAUSE = 'pause',
+  PLAY = 'play',
+  PLAY_PAUSE = 'playPause',
+  PREVIOUS = 'previous',
+  SHUFFLE = 'toggleShuffle',
+  SKIP_BACKWARD = 'skipBackward',
+  SKIP_FORWARD = 'skipForward',
+  STOP = 'stop',
+  TOGGLE_FULLSCREEN_PLAYER = 'toggleFullscreenPlayer',
+  TOGGLE_QUEUE = 'toggleQueue',
+  TOGGLE_REPEAT = 'toggleRepeat',
+  VOLUME_DOWN = 'volumeDown',
+  VOLUME_UP = 'volumeUp',
+}
+
+const HOTKEY_ACTIONS: Record<BindingActions, () => void> = {
+  [BindingActions.MUTE]: () => getMainWindow()?.webContents.send('renderer-player-volume-mute'),
+  [BindingActions.NEXT]: () => getMainWindow()?.webContents.send('renderer-player-next'),
+  [BindingActions.PAUSE]: () => getMainWindow()?.webContents.send('renderer-player-pause'),
+  [BindingActions.PLAY]: () => getMainWindow()?.webContents.send('renderer-player-play'),
+  [BindingActions.PLAY_PAUSE]: () =>
+    getMainWindow()?.webContents.send('renderer-player-play-pause'),
+  [BindingActions.PREVIOUS]: () => getMainWindow()?.webContents.send('renderer-player-previous'),
+  [BindingActions.SHUFFLE]: () =>
+    getMainWindow()?.webContents.send('renderer-player-toggle-shuffle'),
+  [BindingActions.SKIP_BACKWARD]: () =>
+    getMainWindow()?.webContents.send('renderer-player-skip-backward'),
+  [BindingActions.SKIP_FORWARD]: () =>
+    getMainWindow()?.webContents.send('renderer-player-skip-forward'),
+  [BindingActions.STOP]: () => getMainWindow()?.webContents.send('renderer-player-stop'),
+  [BindingActions.TOGGLE_REPEAT]: () =>
+    getMainWindow()?.webContents.send('renderer-player-toggle-repeat'),
+  [BindingActions.VOLUME_UP]: () => getMainWindow()?.webContents.send('renderer-player-volume-up'),
+  [BindingActions.VOLUME_DOWN]: () =>
+    getMainWindow()?.webContents.send('renderer-player-volume-down'),
+  [BindingActions.GLOBAL_SEARCH]: () => {},
+  [BindingActions.LOCAL_SEARCH]: () => {},
+  [BindingActions.TOGGLE_QUEUE]: () => {},
+  [BindingActions.TOGGLE_FULLSCREEN_PLAYER]: () => {},
 };
 
+ipcMain.on(
+  'set-global-shortcuts',
+  (
+    _event,
+    data: Record<BindingActions, { allowGlobal: boolean; hotkey: string; isGlobal: boolean }>,
+  ) => {
+    // Since we're not tracking the previous shortcuts, we need to unregister all of them
+    globalShortcut.unregisterAll();
+
+    for (const shortcut of Object.keys(data)) {
+      const isGlobalHotkey = data[shortcut as BindingActions].isGlobal;
+      const isValidHotkey =
+        data[shortcut as BindingActions].hotkey && data[shortcut as BindingActions].hotkey !== '';
+
+      if (isGlobalHotkey && isValidHotkey) {
+        const accelerator = hotkeyToElectronAccelerator(data[shortcut as BindingActions].hotkey);
+
+        globalShortcut.register(accelerator, () => {
+          HOTKEY_ACTIONS[shortcut as BindingActions]();
+        });
+      }
+    }
+
+    const globalMediaKeysEnabled = store.get('global_media_hotkeys') as boolean;
+
+    if (globalMediaKeysEnabled) {
+      enableMediaKeys(mainWindow);
+    }
+  },
+);
+
+app.on('before-quit', () => {
+  getMpvInstance()?.stop();
+});
+
 app.on('window-all-closed', () => {
+  globalShortcut.unregisterAll();
+  getMpvInstance()?.quit();
   // Respect the OSX convention of having the application in memory even
   // after all windows have been closed
-  if (process.platform !== 'darwin') {
+  if (isMacOS()) {
+    mainWindow = null;
+  } else {
     app.quit();
   }
 });
@@ -156,6 +597,7 @@ app
   .whenReady()
   .then(() => {
     createWindow();
+    createTray();
     app.on('activate', () => {
       // On macOS it's common to re-create a window in the app when the
       // dock icon is clicked and there are no other windows open.

src/main/menu.ts

@@ -1,10 +1,4 @@
-import {
-  app,
-  Menu,
-  shell,
-  BrowserWindow,
-  MenuItemConstructorOptions,
-} from 'electron';
+import { app, Menu, shell, BrowserWindow, MenuItemConstructorOptions } from 'electron';
 
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
   selector?: string;
@@ -19,17 +13,12 @@ export default class MenuBuilder {
   }
 
   buildMenu(): Menu {
-    if (
-      process.env.NODE_ENV === 'development' ||
-      process.env.DEBUG_PROD === 'true'
-    ) {
+    if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
       this.setupDevelopmentEnvironment();
     }
 
     const template =
-      process.platform === 'darwin'
-        ? this.buildDarwinTemplate()
-        : this.buildDefaultTemplate();
+      process.platform === 'darwin' ? this.buildDarwinTemplate() : this.buildDefaultTemplate();
 
     const menu = Menu.buildFromTemplate(template);
     Menu.setApplicationMenu(menu);
@@ -43,10 +32,10 @@ export default class MenuBuilder {
 
       Menu.buildFromTemplate([
         {
-          label: 'Inspect element',
           click: () => {
             this.mainWindow.webContents.inspectElement(x, y);
           },
+          label: 'Inspect element',
         },
       ]).popup({ window: this.mainWindow });
     });
@@ -64,38 +53,38 @@ export default class MenuBuilder {
         { label: 'Services', submenu: [] },
         { type: 'separator' },
         {
-          label: 'Hide ElectronReact',
           accelerator: 'Command+H',
+          label: 'Hide ElectronReact',
           selector: 'hide:',
         },
         {
-          label: 'Hide Others',
           accelerator: 'Command+Shift+H',
+          label: 'Hide Others',
           selector: 'hideOtherApplications:',
         },
         { label: 'Show All', selector: 'unhideAllApplications:' },
         { type: 'separator' },
         {
-          label: 'Quit',
           accelerator: 'Command+Q',
           click: () => {
             app.quit();
           },
+          label: 'Quit',
         },
       ],
     };
     const subMenuEdit: DarwinMenuItemConstructorOptions = {
       label: 'Edit',
       submenu: [
-        { label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
-        { label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
+        { accelerator: 'Command+Z', label: 'Undo', selector: 'undo:' },
+        { accelerator: 'Shift+Command+Z', label: 'Redo', selector: 'redo:' },
         { type: 'separator' },
-        { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
-        { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
-        { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
+        { accelerator: 'Command+X', label: 'Cut', selector: 'cut:' },
+        { accelerator: 'Command+C', label: 'Copy', selector: 'copy:' },
+        { accelerator: 'Command+V', label: 'Paste', selector: 'paste:' },
         {
-          label: 'Select All',
           accelerator: 'Command+A',
+          label: 'Select All',
           selector: 'selectAll:',
         },
       ],
@@ -104,25 +93,25 @@ export default class MenuBuilder {
       label: 'View',
       submenu: [
         {
-          label: 'Reload',
           accelerator: 'Command+R',
           click: () => {
             this.mainWindow.webContents.reload();
           },
+          label: 'Reload',
         },
         {
-          label: 'Toggle Full Screen',
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
           },
+          label: 'Toggle Full Screen',
         },
         {
-          label: 'Toggle Developer Tools',
           accelerator: 'Alt+Command+I',
           click: () => {
             this.mainWindow.webContents.toggleDevTools();
           },
+          label: 'Toggle Developer Tools',
         },
       ],
     };
@@ -130,11 +119,11 @@ export default class MenuBuilder {
       label: 'View',
       submenu: [
         {
-          label: 'Toggle Full Screen',
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
           },
+          label: 'Toggle Full Screen',
         },
       ],
     };
@@ -142,11 +131,11 @@ export default class MenuBuilder {
       label: 'Window',
       submenu: [
         {
-          label: 'Minimize',
           accelerator: 'Command+M',
+          label: 'Minimize',
           selector: 'performMiniaturize:',
         },
-        { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
+        { accelerator: 'Command+W', label: 'Close', selector: 'performClose:' },
         { type: 'separator' },
         { label: 'Bring All to Front', selector: 'arrangeInFront:' },
       ],
@@ -155,37 +144,34 @@ export default class MenuBuilder {
       label: 'Help',
       submenu: [
         {
-          label: 'Learn More',
           click() {
             shell.openExternal('https://electronjs.org');
           },
+          label: 'Learn More',
         },
         {
-          label: 'Documentation',
           click() {
-            shell.openExternal(
-              'https://github.com/electron/electron/tree/main/docs#readme'
-            );
+            shell.openExternal('https://github.com/electron/electron/tree/main/docs#readme');
           },
+          label: 'Documentation',
         },
         {
-          label: 'Community Discussions',
           click() {
             shell.openExternal('https://www.electronjs.org/community');
           },
+          label: 'Community Discussions',
         },
         {
-          label: 'Search Issues',
           click() {
             shell.openExternal('https://github.com/electron/electron/issues');
           },
+          label: 'Search Issues',
         },
       ],
     };
 
     const subMenuView =
-      process.env.NODE_ENV === 'development' ||
-      process.env.DEBUG_PROD === 'true'
+      process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true'
         ? subMenuViewDev
         : subMenuViewProd;
 
@@ -198,57 +184,52 @@ export default class MenuBuilder {
         label: '&File',
         submenu: [
           {
-            label: '&Open',
             accelerator: 'Ctrl+O',
+            label: '&Open',
           },
           {
-            label: '&Close',
             accelerator: 'Ctrl+W',
             click: () => {
               this.mainWindow.close();
             },
+            label: '&Close',
           },
         ],
       },
       {
         label: '&View',
         submenu:
-          process.env.NODE_ENV === 'development' ||
-          process.env.DEBUG_PROD === 'true'
+          process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true'
             ? [
                 {
-                  label: '&Reload',
                   accelerator: 'Ctrl+R',
                   click: () => {
                     this.mainWindow.webContents.reload();
                   },
+                  label: '&Reload',
                 },
                 {
-                  label: 'Toggle &Full Screen',
                   accelerator: 'F11',
                   click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen()
-                    );
+                    this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
                   },
+                  label: 'Toggle &Full Screen',
                 },
                 {
-                  label: 'Toggle &Developer Tools',
                   accelerator: 'Alt+Ctrl+I',
                   click: () => {
                     this.mainWindow.webContents.toggleDevTools();
                   },
+                  label: 'Toggle &Developer Tools',
                 },
               ]
             : [
                 {
-                  label: 'Toggle &Full Screen',
                   accelerator: 'F11',
                   click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen()
-                    );
+                    this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
                   },
+                  label: 'Toggle &Full Screen',
                 },
               ],
       },
@@ -256,30 +237,28 @@ export default class MenuBuilder {
         label: 'Help',
         submenu: [
           {
-            label: 'Learn More',
             click() {
               shell.openExternal('https://electronjs.org');
             },
+            label: 'Learn More',
           },
           {
-            label: 'Documentation',
             click() {
-              shell.openExternal(
-                'https://github.com/electron/electron/tree/main/docs#readme'
-              );
+              shell.openExternal('https://github.com/electron/electron/tree/main/docs#readme');
             },
+            label: 'Documentation',
           },
           {
-            label: 'Community Discussions',
             click() {
               shell.openExternal('https://www.electronjs.org/community');
             },
+            label: 'Community Discussions',
           },
           {
-            label: 'Search Issues',
             click() {
               shell.openExternal('https://github.com/electron/electron/issues');
             },
+            label: 'Search Issues',
           },
         ],
       },

src/main/preload.ts

@@ -1,74 +1,17 @@
-import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
-import { PlayerData } from 'renderer/store';
+import { contextBridge } from 'electron';
+import { browser } from './preload/browser';
+import { ipc } from './preload/ipc';
+import { localSettings } from './preload/local-settings';
+import { mpris } from './preload/mpris';
+import { mpvPlayer, mpvPlayerListener } from './preload/mpv-player';
+import { utils } from './preload/utils';
 
 contextBridge.exposeInMainWorld('electron', {
-  ipcRenderer: {
-    PLAYER_CURRENT_TIME() {
-      ipcRenderer.send('player-current-time');
-    },
-    PLAYER_MUTE() {
-      ipcRenderer.send('player-mute');
-    },
-    PLAYER_NEXT() {
-      ipcRenderer.send('player-next');
-    },
-    PLAYER_PAUSE() {
-      ipcRenderer.send('player-pause');
-    },
-    PLAYER_PLAY() {
-      ipcRenderer.send('player-play');
-    },
-    PLAYER_PREVIOUS() {
-      ipcRenderer.send('player-previous');
-    },
-    PLAYER_SEEK(seconds: number) {
-      ipcRenderer.send('player-seek', seconds);
-    },
-    PLAYER_SEEK_TO(seconds: number) {
-      ipcRenderer.send('player-seek-to', seconds);
-    },
-    PLAYER_SET_QUEUE(data: PlayerData) {
-      ipcRenderer.send('player-set-queue', data);
-    },
-    PLAYER_SET_QUEUE_NEXT(data: PlayerData) {
-      ipcRenderer.send('player-set-queue-next', data);
-    },
-    PLAYER_STOP() {
-      ipcRenderer.send('player-stop');
-    },
-    PLAYER_VOLUME(value: number) {
-      ipcRenderer.send('player-volume', value);
-    },
-    RENDERER_PLAYER_CURRENT_TIME(
-      cb: (event: IpcRendererEvent, data: any) => void
-    ) {
-      ipcRenderer.on('renderer-player-current-time', cb);
-    },
-    RENDERER_PLAYER_PAUSE(cb: (event: IpcRendererEvent, data: any) => void) {
-      ipcRenderer.on('renderer-player-pause', cb);
-    },
-    RENDERER_PLAYER_PLAY(cb: (event: IpcRendererEvent, data: any) => void) {
-      ipcRenderer.on('renderer-player-play', cb);
-    },
-    RENDERER_PLAYER_SET_QUEUE_NEXT(
-      cb: (event: IpcRendererEvent, data: any) => void
-    ) {
-      ipcRenderer.on('renderer-player-set-queue-next', cb);
-    },
-    RENDERER_PLAYER_STOP(cb: (event: IpcRendererEvent, data: any) => void) {
-      ipcRenderer.on('renderer-player-stop', cb);
-    },
-    windowClose() {
-      ipcRenderer.send('window-close');
-    },
-    windowMaximize() {
-      ipcRenderer.send('window-maximize');
-    },
-    windowMinimize() {
-      ipcRenderer.send('window-minimize');
-    },
-    windowUnmaximize() {
-      ipcRenderer.send('window-unmaximize');
-    },
-  },
+  browser,
+  ipc,
+  localSettings,
+  mpris,
+  mpvPlayer,
+  mpvPlayerListener,
+  utils,
 });

src/main/preload/browser.ts

@@ -0,0 +1,26 @@
+import { ipcRenderer } from 'electron';
+
+const exit = () => {
+  ipcRenderer.send('window-close');
+};
+const maximize = () => {
+  ipcRenderer.send('window-maximize');
+};
+const minimize = () => {
+  ipcRenderer.send('window-minimize');
+};
+const unmaximize = () => {
+  ipcRenderer.send('window-unmaximize');
+};
+
+const devtools = () => {
+  ipcRenderer.send('window-dev-tools');
+};
+
+export const browser = {
+  devtools,
+  exit,
+  maximize,
+  minimize,
+  unmaximize,
+};

src/main/preload/ipc.ts

@@ -0,0 +1,14 @@
+import { ipcRenderer } from 'electron';
+
+const removeAllListeners = (channel: string) => {
+  ipcRenderer.removeAllListeners(channel);
+};
+
+const send = (channel: string, ...args: any[]) => {
+  ipcRenderer.send(channel, ...args);
+};
+
+export const ipc = {
+  removeAllListeners,
+  send,
+};

src/main/preload/local-settings.ts

@@ -0,0 +1,32 @@
+import { ipcRenderer } from 'electron';
+import Store from 'electron-store';
+
+const store = new Store();
+
+const set = (property: string, value: string | Record<string, unknown> | boolean | string[]) => {
+  store.set(`${property}`, value);
+};
+
+const get = (property: string) => {
+  return store.get(`${property}`);
+};
+
+const restart = () => {
+  ipcRenderer.send('app-restart');
+};
+
+const enableMediaKeys = () => {
+  ipcRenderer.send('global-media-keys-enable');
+};
+
+const disableMediaKeys = () => {
+  ipcRenderer.send('global-media-keys-disable');
+};
+
+export const localSettings = {
+  disableMediaKeys,
+  enableMediaKeys,
+  get,
+  restart,
+  set,
+};

src/main/preload/mpris.ts

@@ -0,0 +1,70 @@
+import { IpcRendererEvent, ipcRenderer } from 'electron';
+import { QueueSong } from '/@/renderer/api/types';
+
+const updateSong = (args: { currentTime: number; song: QueueSong }) => {
+  ipcRenderer.send('mpris-update-song', args);
+};
+
+const updatePosition = (timeSec: number) => {
+  ipcRenderer.send('mpris-update-position', timeSec);
+};
+
+const updateSeek = (timeSec: number) => {
+  ipcRenderer.send('mpris-update-seek', timeSec);
+};
+
+const updateVolume = (volume: number) => {
+  ipcRenderer.send('mpris-update-volume', volume);
+};
+
+const updateRepeat = (repeat: string) => {
+  ipcRenderer.send('mpris-update-repeat', repeat);
+};
+
+const updateShuffle = (shuffle: boolean) => {
+  ipcRenderer.send('mpris-update-shuffle', shuffle);
+};
+
+const toggleRepeat = () => {
+  ipcRenderer.send('mpris-toggle-repeat');
+};
+
+const toggleShuffle = () => {
+  ipcRenderer.send('mpris-toggle-shuffle');
+};
+
+const requestPosition = (cb: (event: IpcRendererEvent, data: { position: number }) => void) => {
+  ipcRenderer.on('mpris-request-position', cb);
+};
+
+const requestSeek = (cb: (event: IpcRendererEvent, data: { offset: number }) => void) => {
+  ipcRenderer.on('mpris-request-seek', cb);
+};
+
+const requestVolume = (cb: (event: IpcRendererEvent, data: { volume: number }) => void) => {
+  ipcRenderer.on('mpris-request-volume', cb);
+};
+
+const requestToggleRepeat = (cb: (event: IpcRendererEvent) => void) => {
+  ipcRenderer.on('mpris-request-toggle-repeat', cb);
+};
+
+const requestToggleShuffle = (cb: (event: IpcRendererEvent) => void) => {
+  ipcRenderer.on('mpris-request-toggle-shuffle', cb);
+};
+
+export const mpris = {
+  requestPosition,
+  requestSeek,
+  requestToggleRepeat,
+  requestToggleShuffle,
+  requestVolume,
+  toggleRepeat,
+  toggleShuffle,
+  updatePosition,
+  updateRepeat,
+  updateSeek,
+  updateShuffle,
+  updateSong,
+  updateVolume,
+};

src/main/preload/mpv-player.ts

@@ -0,0 +1,199 @@
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+import { PlayerData } from '/@/renderer/store';
+
+const initialize = (data: { extraParameters?: string[]; properties?: Record<string, any> }) => {
+  ipcRenderer.send('player-initialize', data);
+};
+
+const restart = (data: { extraParameters?: string[]; properties?: Record<string, any> }) => {
+  ipcRenderer.send('player-restart', data);
+};
+
+const setProperties = (data: Record<string, any>) => {
+  console.log('Setting property :>>', data);
+  ipcRenderer.send('player-set-properties', data);
+};
+
+const autoNext = (data: PlayerData) => {
+  ipcRenderer.send('player-auto-next', data);
+};
+
+const currentTime = () => {
+  ipcRenderer.send('player-current-time');
+};
+
+const mute = () => {
+  ipcRenderer.send('player-mute');
+};
+
+const next = () => {
+  ipcRenderer.send('player-next');
+};
+
+const pause = () => {
+  ipcRenderer.send('player-pause');
+};
+
+const play = () => {
+  ipcRenderer.send('player-play');
+};
+
+const previous = () => {
+  ipcRenderer.send('player-previous');
+};
+
+const restoreQueue = () => {
+  ipcRenderer.send('player-restore-queue');
+};
+
+const saveQueue = (data: Record<string, any>) => {
+  ipcRenderer.send('player-save-queue', data);
+};
+
+const seek = (seconds: number) => {
+  ipcRenderer.send('player-seek', seconds);
+};
+
+const seekTo = (seconds: number) => {
+  ipcRenderer.send('player-seek-to', seconds);
+};
+
+const setQueue = (data: PlayerData, pause?: boolean) => {
+  ipcRenderer.send('player-set-queue', data, pause);
+};
+
+const setQueueNext = (data: PlayerData) => {
+  ipcRenderer.send('player-set-queue-next', data);
+};
+
+const stop = () => {
+  ipcRenderer.send('player-stop');
+};
+
+const volume = (value: number) => {
+  ipcRenderer.send('player-volume', value);
+};
+
+const quit = () => {
+  ipcRenderer.send('player-quit');
+};
+
+const rendererAutoNext = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-auto-next', cb);
+};
+
+const rendererCurrentTime = (cb: (event: IpcRendererEvent, data: number) => void) => {
+  ipcRenderer.on('renderer-player-current-time', cb);
+};
+
+const rendererNext = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-next', cb);
+};
+
+const rendererPause = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-pause', cb);
+};
+
+const rendererPlay = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-play', cb);
+};
+
+const rendererPlayPause = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-play-pause', cb);
+};
+
+const rendererPrevious = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-previous', cb);
+};
+
+const rendererStop = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-stop', cb);
+};
+
+const rendererSkipForward = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-skip-forward', cb);
+};
+
+const rendererSkipBackward = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-skip-backward', cb);
+};
+
+const rendererVolumeUp = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-volume-up', cb);
+};
+
+const rendererVolumeDown = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-volume-down', cb);
+};
+
+const rendererVolumeMute = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-volume-mute', cb);
+};
+
+const rendererToggleRepeat = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-toggle-repeat', cb);
+};
+
+const rendererToggleShuffle = (cb: (event: IpcRendererEvent, data: PlayerData) => void) => {
+  ipcRenderer.on('renderer-player-toggle-shuffle', cb);
+};
+
+const rendererQuit = (cb: (event: IpcRendererEvent) => void) => {
+  ipcRenderer.on('renderer-player-quit', cb);
+};
+
+const rendererSaveQueue = (cb: (event: IpcRendererEvent) => void) => {
+  ipcRenderer.on('renderer-player-save-queue', cb);
+};
+
+const rendererRestoreQueue = (cb: (event: IpcRendererEvent) => void) => {
+  ipcRenderer.on('renderer-player-restore-queue', cb);
+};
+
+const rendererError = (cb: (event: IpcRendererEvent, data: string) => void) => {
+  ipcRenderer.on('renderer-player-error', cb);
+};
+
+export const mpvPlayer = {
+  autoNext,
+  currentTime,
+  initialize,
+  mute,
+  next,
+  pause,
+  play,
+  previous,
+  quit,
+  restart,
+  restoreQueue,
+  saveQueue,
+  seek,
+  seekTo,
+  setProperties,
+  setQueue,
+  setQueueNext,
+  stop,
+  volume,
+};
+
+export const mpvPlayerListener = {
+  rendererAutoNext,
+  rendererCurrentTime,
+  rendererError,
+  rendererNext,
+  rendererPause,
+  rendererPlay,
+  rendererPlayPause,
+  rendererPrevious,
+  rendererQuit,
+  rendererRestoreQueue,
+  rendererSaveQueue,
+  rendererSkipBackward,
+  rendererSkipForward,
+  rendererStop,
+  rendererToggleRepeat,
+  rendererToggleShuffle,
+  rendererVolumeDown,
+  rendererVolumeMute,
+  rendererVolumeUp,
+};

src/main/preload/utils.ts

@@ -0,0 +1,7 @@
+import { isMacOS, isWindows, isLinux } from '../utils';
+
+export const utils = {
+  isLinux,
+  isMacOS,
+  isWindows,
+};

src/main/utils.ts

@@ -29,3 +29,24 @@ export const isWindows = () => {
 export const isLinux = () => {
   return process.platform === 'linux';
 };
+
+export const hotkeyToElectronAccelerator = (hotkey: string) => {
+  let accelerator = hotkey;
+
+  const replacements = {
+    mod: 'CmdOrCtrl',
+    numpad: 'num',
+    numpadadd: 'numadd',
+    numpaddecimal: 'numdec',
+    numpaddivide: 'numdiv',
+    numpadenter: 'numenter',
+    numpadmultiply: 'nummult',
+    numpadsubtract: 'numsub',
+  };
+
+  Object.keys(replacements).forEach((key) => {
+    accelerator = accelerator.replace(key, replacements[key as keyof typeof replacements]);
+  });
+
+  return accelerator;
+};

src/renderer/api/albumsApi.ts

@@ -1,28 +0,0 @@
-import { api } from 'renderer/lib';
-import { AlbumsResponse, BasePaginationRequest } from './types';
-
-export interface AlbumsRequest extends BasePaginationRequest {
-  orderBy: string;
-  serverFolderIds?: string;
-  sortBy: string;
-}
-
-const getAlbum = async (params: { id: number }, signal?: AbortSignal) => {
-  const { data } = await api.get<AlbumsResponse>(`/albums/${params.id}`, {
-    signal,
-  });
-  return data;
-};
-
-const getAlbums = async (params: AlbumsRequest, signal?: AbortSignal) => {
-  const { data } = await api.get<AlbumsResponse>(`/albums`, {
-    params,
-    signal,
-  });
-  return data;
-};
-
-export const albumsApi = {
-  getAlbum,
-  getAlbums,
-};

src/renderer/api/authApi.ts

@@ -1,38 +0,0 @@
-// import axios from 'axios';
-import axios from 'axios';
-import { LoginResponse, PingResponse } from './types';
-
-const login = async (
-  serverUrl: string,
-  body: {
-    password: string;
-    username: string;
-  }
-) => {
-  const { data } = await axios.post<LoginResponse>(
-    `${serverUrl}/api/auth/login`,
-    body
-  );
-
-  return data;
-};
-
-const ping = async (serverUrl: string) => {
-  const { data } = await axios.get<PingResponse>(`${serverUrl}/api/auth/ping`, {
-    timeout: 2000,
-  });
-
-  return data;
-};
-
-const refresh = async (serverUrl: string, body: { refreshToken: string }) => {
-  const { data } = await axios.post(`${serverUrl}/api/auth/refresh`, body);
-
-  return data;
-};
-
-export const authApi = {
-  login,
-  ping,
-  refresh,
-};

src/renderer/api/controller.ts

@@ -0,0 +1,478 @@
+import { useAuthStore } from '/@/renderer/store';
+import { toast } from '/@/renderer/components/toast/index';
+import type {
+  AlbumDetailArgs,
+  AlbumListArgs,
+  SongListArgs,
+  SongDetailArgs,
+  AlbumArtistDetailArgs,
+  AlbumArtistListArgs,
+  SetRatingArgs,
+  GenreListArgs,
+  CreatePlaylistArgs,
+  DeletePlaylistArgs,
+  PlaylistDetailArgs,
+  PlaylistListArgs,
+  MusicFolderListArgs,
+  PlaylistSongListArgs,
+  ArtistListArgs,
+  UpdatePlaylistArgs,
+  UserListArgs,
+  FavoriteArgs,
+  TopSongListArgs,
+  AddToPlaylistArgs,
+  AddToPlaylistResponse,
+  RemoveFromPlaylistArgs,
+  RemoveFromPlaylistResponse,
+  ScrobbleArgs,
+  ScrobbleResponse,
+  AlbumArtistDetailResponse,
+  FavoriteResponse,
+  CreatePlaylistResponse,
+  AlbumArtistListResponse,
+  AlbumDetailResponse,
+  AlbumListResponse,
+  ArtistListResponse,
+  GenreListResponse,
+  MusicFolderListResponse,
+  PlaylistDetailResponse,
+  PlaylistListResponse,
+  RatingResponse,
+  SongDetailResponse,
+  SongListResponse,
+  TopSongListResponse,
+  UpdatePlaylistResponse,
+  UserListResponse,
+  AuthenticationResponse,
+  SearchArgs,
+  SearchResponse,
+} from '/@/renderer/api/types';
+import { ServerType } from '/@/renderer/types';
+import { DeletePlaylistResponse, RandomSongListArgs } from './types';
+import { ndController } from '/@/renderer/api/navidrome/navidrome-controller';
+import { ssController } from '/@/renderer/api/subsonic/subsonic-controller';
+import { jfController } from '/@/renderer/api/jellyfin/jellyfin-controller';
+
+export type ControllerEndpoint = Partial<{
+  addToPlaylist: (args: AddToPlaylistArgs) => Promise<AddToPlaylistResponse>;
+  authenticate: (
+    url: string,
+    body: { password: string; username: string },
+  ) => Promise<AuthenticationResponse>;
+  clearPlaylist: () => void;
+  createFavorite: (args: FavoriteArgs) => Promise<FavoriteResponse>;
+  createPlaylist: (args: CreatePlaylistArgs) => Promise<CreatePlaylistResponse>;
+  deleteFavorite: (args: FavoriteArgs) => Promise<FavoriteResponse>;
+  deletePlaylist: (args: DeletePlaylistArgs) => Promise<DeletePlaylistResponse>;
+  getAlbumArtistDetail: (args: AlbumArtistDetailArgs) => Promise<AlbumArtistDetailResponse>;
+  getAlbumArtistList: (args: AlbumArtistListArgs) => Promise<AlbumArtistListResponse>;
+  getAlbumDetail: (args: AlbumDetailArgs) => Promise<AlbumDetailResponse>;
+  getAlbumList: (args: AlbumListArgs) => Promise<AlbumListResponse>;
+  getArtistDetail: () => void;
+  getArtistInfo: (args: any) => void;
+  getArtistList: (args: ArtistListArgs) => Promise<ArtistListResponse>;
+  getFavoritesList: () => void;
+  getFolderItemList: () => void;
+  getFolderList: () => void;
+  getFolderSongs: () => void;
+  getGenreList: (args: GenreListArgs) => Promise<GenreListResponse>;
+  getMusicFolderList: (args: MusicFolderListArgs) => Promise<MusicFolderListResponse>;
+  getPlaylistDetail: (args: PlaylistDetailArgs) => Promise<PlaylistDetailResponse>;
+  getPlaylistList: (args: PlaylistListArgs) => Promise<PlaylistListResponse>;
+  getPlaylistSongList: (args: PlaylistSongListArgs) => Promise<SongListResponse>;
+  getRandomSongList: (args: RandomSongListArgs) => Promise<SongListResponse>;
+  getSongDetail: (args: SongDetailArgs) => Promise<SongDetailResponse>;
+  getSongList: (args: SongListArgs) => Promise<SongListResponse>;
+  getTopSongs: (args: TopSongListArgs) => Promise<TopSongListResponse>;
+  getUserList: (args: UserListArgs) => Promise<UserListResponse>;
+  removeFromPlaylist: (args: RemoveFromPlaylistArgs) => Promise<RemoveFromPlaylistResponse>;
+  scrobble: (args: ScrobbleArgs) => Promise<ScrobbleResponse>;
+  search: (args: SearchArgs) => Promise<SearchResponse>;
+  setRating: (args: SetRatingArgs) => Promise<RatingResponse>;
+  updatePlaylist: (args: UpdatePlaylistArgs) => Promise<UpdatePlaylistResponse>;
+}>;
+
+type ApiController = {
+  jellyfin: ControllerEndpoint;
+  navidrome: ControllerEndpoint;
+  subsonic: ControllerEndpoint;
+};
+
+const endpoints: ApiController = {
+  jellyfin: {
+    addToPlaylist: jfController.addToPlaylist,
+    authenticate: jfController.authenticate,
+    clearPlaylist: undefined,
+    createFavorite: jfController.createFavorite,
+    createPlaylist: jfController.createPlaylist,
+    deleteFavorite: jfController.deleteFavorite,
+    deletePlaylist: jfController.deletePlaylist,
+    getAlbumArtistDetail: jfController.getAlbumArtistDetail,
+    getAlbumArtistList: jfController.getAlbumArtistList,
+    getAlbumDetail: jfController.getAlbumDetail,
+    getAlbumList: jfController.getAlbumList,
+    getArtistDetail: undefined,
+    getArtistInfo: undefined,
+    getArtistList: undefined,
+    getFavoritesList: undefined,
+    getFolderItemList: undefined,
+    getFolderList: undefined,
+    getFolderSongs: undefined,
+    getGenreList: jfController.getGenreList,
+    getMusicFolderList: jfController.getMusicFolderList,
+    getPlaylistDetail: jfController.getPlaylistDetail,
+    getPlaylistList: jfController.getPlaylistList,
+    getPlaylistSongList: jfController.getPlaylistSongList,
+    getRandomSongList: jfController.getRandomSongList,
+    getSongDetail: undefined,
+    getSongList: jfController.getSongList,
+    getTopSongs: jfController.getTopSongList,
+    getUserList: undefined,
+    removeFromPlaylist: jfController.removeFromPlaylist,
+    scrobble: jfController.scrobble,
+    search: jfController.search,
+    setRating: undefined,
+    updatePlaylist: jfController.updatePlaylist,
+  },
+  navidrome: {
+    addToPlaylist: ndController.addToPlaylist,
+    authenticate: ndController.authenticate,
+    clearPlaylist: undefined,
+    createFavorite: ssController.createFavorite,
+    createPlaylist: ndController.createPlaylist,
+    deleteFavorite: ssController.removeFavorite,
+    deletePlaylist: ndController.deletePlaylist,
+    getAlbumArtistDetail: ndController.getAlbumArtistDetail,
+    getAlbumArtistList: ndController.getAlbumArtistList,
+    getAlbumDetail: ndController.getAlbumDetail,
+    getAlbumList: ndController.getAlbumList,
+    getArtistDetail: undefined,
+    getArtistInfo: undefined,
+    getArtistList: undefined,
+    getFavoritesList: undefined,
+    getFolderItemList: undefined,
+    getFolderList: undefined,
+    getFolderSongs: undefined,
+    getGenreList: ndController.getGenreList,
+    getMusicFolderList: ssController.getMusicFolderList,
+    getPlaylistDetail: ndController.getPlaylistDetail,
+    getPlaylistList: ndController.getPlaylistList,
+    getPlaylistSongList: ndController.getPlaylistSongList,
+    getRandomSongList: ssController.getRandomSongList,
+    getSongDetail: ndController.getSongDetail,
+    getSongList: ndController.getSongList,
+    getTopSongs: ssController.getTopSongList,
+    getUserList: ndController.getUserList,
+    removeFromPlaylist: ndController.removeFromPlaylist,
+    scrobble: ssController.scrobble,
+    search: ssController.search3,
+    setRating: ssController.setRating,
+    updatePlaylist: ndController.updatePlaylist,
+  },
+  subsonic: {
+    authenticate: ssController.authenticate,
+    clearPlaylist: undefined,
+    createFavorite: ssController.createFavorite,
+    createPlaylist: undefined,
+    deleteFavorite: ssController.removeFavorite,
+    deletePlaylist: undefined,
+    getAlbumArtistDetail: undefined,
+    getAlbumArtistList: undefined,
+    getAlbumDetail: undefined,
+    getAlbumList: undefined,
+    getArtistDetail: undefined,
+    getArtistInfo: undefined,
+    getArtistList: undefined,
+    getFavoritesList: undefined,
+    getFolderItemList: undefined,
+    getFolderList: undefined,
+    getFolderSongs: undefined,
+    getGenreList: undefined,
+    getMusicFolderList: ssController.getMusicFolderList,
+    getPlaylistDetail: undefined,
+    getPlaylistList: undefined,
+    getSongDetail: undefined,
+    getSongList: undefined,
+    getTopSongs: ssController.getTopSongList,
+    getUserList: undefined,
+    scrobble: ssController.scrobble,
+    search: ssController.search3,
+    setRating: undefined,
+    updatePlaylist: undefined,
+  },
+};
+
+const apiController = (endpoint: keyof ControllerEndpoint, type?: ServerType) => {
+  const serverType = type || useAuthStore.getState().currentServer?.type;
+
+  if (!serverType) {
+    toast.error({ message: 'No server selected', title: 'Unable to route request' });
+    throw new Error(`No server selected`);
+  }
+
+  const controllerFn = endpoints?.[serverType]?.[endpoint];
+
+  if (typeof controllerFn !== 'function') {
+    toast.error({
+      message: `Endpoint ${endpoint} is not implemented for ${serverType}`,
+      title: 'Unable to route request',
+    });
+
+    throw new Error(`Endpoint ${endpoint} is not implemented for ${serverType}`);
+  }
+
+  return endpoints[serverType][endpoint];
+};
+
+const authenticate = async (
+  url: string,
+  body: { legacy?: boolean; password: string; username: string },
+  type: ServerType,
+) => {
+  return (apiController('authenticate', type) as ControllerEndpoint['authenticate'])?.(url, body);
+};
+
+const getAlbumList = async (args: AlbumListArgs) => {
+  return (
+    apiController(
+      'getAlbumList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getAlbumList']
+  )?.(args);
+};
+
+const getAlbumDetail = async (args: AlbumDetailArgs) => {
+  return (
+    apiController(
+      'getAlbumDetail',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getAlbumDetail']
+  )?.(args);
+};
+
+const getSongList = async (args: SongListArgs) => {
+  return (
+    apiController(
+      'getSongList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getSongList']
+  )?.(args);
+};
+
+const getSongDetail = async (args: SongDetailArgs) => {
+  return (
+    apiController(
+      'getSongDetail',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getSongDetail']
+  )?.(args);
+};
+
+const getMusicFolderList = async (args: MusicFolderListArgs) => {
+  return (
+    apiController(
+      'getMusicFolderList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getMusicFolderList']
+  )?.(args);
+};
+
+const getGenreList = async (args: GenreListArgs) => {
+  return (
+    apiController(
+      'getGenreList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getGenreList']
+  )?.(args);
+};
+
+const getAlbumArtistDetail = async (args: AlbumArtistDetailArgs) => {
+  return (
+    apiController(
+      'getAlbumArtistDetail',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getAlbumArtistDetail']
+  )?.(args);
+};
+
+const getAlbumArtistList = async (args: AlbumArtistListArgs) => {
+  return (
+    apiController(
+      'getAlbumArtistList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getAlbumArtistList']
+  )?.(args);
+};
+
+const getArtistList = async (args: ArtistListArgs) => {
+  return (
+    apiController(
+      'getArtistList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getArtistList']
+  )?.(args);
+};
+
+const getPlaylistList = async (args: PlaylistListArgs) => {
+  return (
+    apiController(
+      'getPlaylistList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getPlaylistList']
+  )?.(args);
+};
+
+const createPlaylist = async (args: CreatePlaylistArgs) => {
+  return (
+    apiController(
+      'createPlaylist',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['createPlaylist']
+  )?.(args);
+};
+
+const updatePlaylist = async (args: UpdatePlaylistArgs) => {
+  return (
+    apiController(
+      'updatePlaylist',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['updatePlaylist']
+  )?.(args);
+};
+
+const deletePlaylist = async (args: DeletePlaylistArgs) => {
+  return (
+    apiController(
+      'deletePlaylist',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['deletePlaylist']
+  )?.(args);
+};
+
+const addToPlaylist = async (args: AddToPlaylistArgs) => {
+  return (
+    apiController(
+      'addToPlaylist',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['addToPlaylist']
+  )?.(args);
+};
+
+const removeFromPlaylist = async (args: RemoveFromPlaylistArgs) => {
+  return (
+    apiController(
+      'removeFromPlaylist',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['removeFromPlaylist']
+  )?.(args);
+};
+
+const getPlaylistDetail = async (args: PlaylistDetailArgs) => {
+  return (
+    apiController(
+      'getPlaylistDetail',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getPlaylistDetail']
+  )?.(args);
+};
+
+const getPlaylistSongList = async (args: PlaylistSongListArgs) => {
+  return (
+    apiController(
+      'getPlaylistSongList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getPlaylistSongList']
+  )?.(args);
+};
+
+const getUserList = async (args: UserListArgs) => {
+  return (
+    apiController(
+      'getUserList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getUserList']
+  )?.(args);
+};
+
+const createFavorite = async (args: FavoriteArgs) => {
+  return (
+    apiController(
+      'createFavorite',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['createFavorite']
+  )?.(args);
+};
+
+const deleteFavorite = async (args: FavoriteArgs) => {
+  return (
+    apiController(
+      'deleteFavorite',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['deleteFavorite']
+  )?.(args);
+};
+
+const updateRating = async (args: SetRatingArgs) => {
+  return (
+    apiController('setRating', args.apiClientProps.server?.type) as ControllerEndpoint['setRating']
+  )?.(args);
+};
+
+const getTopSongList = async (args: TopSongListArgs) => {
+  return (
+    apiController(
+      'getTopSongs',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getTopSongs']
+  )?.(args);
+};
+
+const scrobble = async (args: ScrobbleArgs) => {
+  return (
+    apiController('scrobble', args.apiClientProps.server?.type) as ControllerEndpoint['scrobble']
+  )?.(args);
+};
+
+const search = async (args: SearchArgs) => {
+  return (
+    apiController('search', args.apiClientProps.server?.type) as ControllerEndpoint['search']
+  )?.(args);
+};
+
+const getRandomSongList = async (args: RandomSongListArgs) => {
+  return (
+    apiController(
+      'getRandomSongList',
+      args.apiClientProps.server?.type,
+    ) as ControllerEndpoint['getRandomSongList']
+  )?.(args);
+};
+
+export const controller = {
+  addToPlaylist,
+  authenticate,
+  createFavorite,
+  createPlaylist,
+  deleteFavorite,
+  deletePlaylist,
+  getAlbumArtistDetail,
+  getAlbumArtistList,
+  getAlbumDetail,
+  getAlbumList,
+  getArtistList,
+  getGenreList,
+  getMusicFolderList,
+  getPlaylistDetail,
+  getPlaylistList,
+  getPlaylistSongList,
+  getRandomSongList,
+  getSongDetail,
+  getSongList,
+  getTopSongList,
+  getUserList,
+  removeFromPlaylist,
+  scrobble,
+  search,
+  updatePlaylist,
+  updateRating,
+};

src/renderer/api/index.ts

@@ -0,0 +1,5 @@
+import { controller } from '/@/renderer/api/controller';
+
+export const api = {
+  controller,
+};

src/renderer/api/jellyfin.types.ts

@@ -0,0 +1,634 @@
+export type JFBasePaginatedResponse = {
+  StartIndex: number;
+  TotalRecordCount: number;
+};
+
+export interface JFMusicFolderListResponse extends JFBasePaginatedResponse {
+  Items: JFMusicFolder[];
+}
+
+export type JFMusicFolderList = JFMusicFolder[];
+
+export interface JFGenreListResponse extends JFBasePaginatedResponse {
+  Items: JFGenre[];
+}
+
+export type JFGenreList = JFGenreListResponse;
+
+export type JFAlbumArtistDetailResponse = JFAlbumArtist;
+
+export type JFAlbumArtistDetail = JFAlbumArtistDetailResponse;
+
+export interface JFAlbumArtistListResponse extends JFBasePaginatedResponse {
+  Items: JFAlbumArtist[];
+}
+
+export type JFAlbumArtistList = {
+  items: JFAlbumArtist[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export interface JFArtistListResponse extends JFBasePaginatedResponse {
+  Items: JFAlbumArtist[];
+}
+
+export type JFArtistList = JFArtistListResponse;
+
+export interface JFAlbumListResponse extends JFBasePaginatedResponse {
+  Items: JFAlbum[];
+}
+
+export type JFAlbumList = {
+  items: JFAlbum[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export type JFAlbumDetailResponse = JFAlbum;
+
+export type JFAlbumDetail = JFAlbum & { songs?: JFSong[] };
+
+export interface JFSongListResponse extends JFBasePaginatedResponse {
+  Items: JFSong[];
+}
+
+export type JFSongList = {
+  items: JFSong[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export type JFAddToPlaylistResponse = {
+  added: number;
+};
+
+export type JFAddToPlaylistParams = {
+  ids: string[];
+  userId: string;
+};
+
+export type JFAddToPlaylist = null;
+
+export type JFRemoveFromPlaylistResponse = null;
+
+export type JFRemoveFromPlaylistParams = {
+  entryIds: string[];
+};
+
+export type JFRemoveFromPlaylist = null;
+
+export interface JFPlaylistListResponse extends JFBasePaginatedResponse {
+  Items: JFPlaylist[];
+}
+
+export type JFPlaylistList = {
+  items: JFPlaylist[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export enum JFPlaylistListSort {
+  ALBUM_ARTIST = 'AlbumArtist,SortName',
+  DURATION = 'Runtime',
+  NAME = 'SortName',
+  RECENTLY_ADDED = 'DateCreated,SortName',
+  SONG_COUNT = 'ChildCount',
+}
+
+export type JFPlaylistDetailResponse = JFPlaylist;
+
+export type JFPlaylistDetail = JFPlaylist & { songs?: JFSong[] };
+
+export type JFPlaylist = {
+  BackdropImageTags: string[];
+  ChannelId: null;
+  ChildCount?: number;
+  DateCreated: string;
+  GenreItems: GenreItem[];
+  Genres: string[];
+  Id: string;
+  ImageBlurHashes: ImageBlurHashes;
+  ImageTags: ImageTags;
+  IsFolder: boolean;
+  LocationType: string;
+  MediaType: string;
+  Name: string;
+  Overview?: string;
+  RunTimeTicks: number;
+  ServerId: string;
+  Type: string;
+  UserData: UserData;
+};
+
+export type JFRequestParams = {
+  albumArtistIds?: string;
+  artistIds?: string;
+  enableImageTypes?: string;
+  enableTotalRecordCount?: boolean;
+  enableUserData?: boolean;
+  excludeItemTypes?: string;
+  fields?: string;
+  imageTypeLimit?: number;
+  includeItemTypes?: string;
+  isFavorite?: boolean;
+  limit?: number;
+  parentId?: string;
+  recursive?: boolean;
+  searchTerm?: string;
+  sortBy?: string;
+  sortOrder?: 'Ascending' | 'Descending';
+  startIndex?: number;
+  userId?: string;
+};
+
+export type JFMusicFolder = {
+  BackdropImageTags: string[];
+  ChannelId: null;
+  CollectionType: string;
+  Id: string;
+  ImageBlurHashes: ImageBlurHashes;
+  ImageTags: ImageTags;
+  IsFolder: boolean;
+  LocationType: string;
+  Name: string;
+  ServerId: string;
+  Type: string;
+  UserData: UserData;
+};
+
+export type JFGenre = {
+  BackdropImageTags: any[];
+  ChannelId: null;
+  Id: string;
+  ImageBlurHashes: any;
+  ImageTags: ImageTags;
+  LocationType: string;
+  Name: string;
+  ServerId: string;
+  Type: string;
+};
+
+export type JFAlbumArtist = {
+  BackdropImageTags: string[];
+  ChannelId: null;
+  DateCreated: string;
+  ExternalUrls: ExternalURL[];
+  GenreItems: GenreItem[];
+  Genres: string[];
+  Id: string;
+  ImageBlurHashes: any;
+  ImageTags: ImageTags;
+  LocationType: string;
+  Name: string;
+  Overview?: string;
+  RunTimeTicks: number;
+  ServerId: string;
+  Type: string;
+  UserData: {
+    IsFavorite: boolean;
+    Key: string;
+    PlayCount: number;
+    PlaybackPositionTicks: number;
+    Played: boolean;
+  };
+} & {
+  similarArtists: {
+    items: JFAlbumArtist[];
+  };
+};
+
+export type JFArtist = {
+  BackdropImageTags: string[];
+  ChannelId: null;
+  DateCreated: string;
+  ExternalUrls: ExternalURL[];
+  GenreItems: GenreItem[];
+  Genres: string[];
+  Id: string;
+  ImageBlurHashes: any;
+  ImageTags: string[];
+  LocationType: string;
+  Name: string;
+  Overview?: string;
+  RunTimeTicks: number;
+  ServerId: string;
+  Type: string;
+};
+
+export type JFAlbum = {
+  AlbumArtist: string;
+  AlbumArtists: JFGenericItem[];
+  AlbumPrimaryImageTag: string;
+  ArtistItems: JFGenericItem[];
+  Artists: string[];
+  ChannelId: null;
+  ChildCount?: number;
+  DateCreated: string;
+  DateLastMediaAdded?: string;
+  ExternalUrls: ExternalURL[];
+  GenreItems: JFGenericItem[];
+  Genres: string[];
+  Id: string;
+  ImageBlurHashes: ImageBlurHashes;
+  ImageTags: ImageTags;
+  IsFolder: boolean;
+  LocationType: string;
+  Name: string;
+  ParentLogoImageTag: string;
+  ParentLogoItemId: string;
+  PremiereDate?: string;
+  ProductionYear: number;
+  RunTimeTicks: number;
+  ServerId: string;
+  Type: string;
+  UserData?: UserData;
+} & {
+  songs?: JFSong[];
+};
+
+export type JFSong = {
+  Album: string;
+  AlbumArtist: string;
+  AlbumArtists: JFGenericItem[];
+  AlbumId: string;
+  AlbumPrimaryImageTag: string;
+  ArtistItems: JFGenericItem[];
+  Artists: string[];
+  BackdropImageTags: string[];
+  ChannelId: null;
+  DateCreated: string;
+  ExternalUrls: ExternalURL[];
+  GenreItems: JFGenericItem[];
+  Genres: string[];
+  Id: string;
+  ImageBlurHashes: ImageBlurHashes;
+  ImageTags: ImageTags;
+  IndexNumber: number;
+  IsFolder: boolean;
+  LocationType: string;
+  MediaSources: MediaSources[];
+  MediaType: string;
+  Name: string;
+  ParentIndexNumber: number;
+  PlaylistItemId?: string;
+  PremiereDate?: string;
+  ProductionYear: number;
+  RunTimeTicks: number;
+  ServerId: string;
+  SortName: string;
+  Type: string;
+  UserData?: UserData;
+};
+
+type ImageBlurHashes = {
+  Backdrop?: any;
+  Logo?: any;
+  Primary?: any;
+};
+
+type ImageTags = {
+  Logo?: string;
+  Primary?: string;
+};
+
+type UserData = {
+  IsFavorite: boolean;
+  Key: string;
+  PlayCount: number;
+  PlaybackPositionTicks: number;
+  Played: boolean;
+};
+
+type ExternalURL = {
+  Name: string;
+  Url: string;
+};
+
+type GenreItem = {
+  Id: string;
+  Name: string;
+};
+
+export type JFGenericItem = {
+  Id: string;
+  Name: string;
+};
+
+type MediaSources = {
+  Bitrate: number;
+  Container: string;
+  DefaultAudioStreamIndex: number;
+  ETag: string;
+  Formats: any[];
+  GenPtsInput: boolean;
+  Id: string;
+  IgnoreDts: boolean;
+  IgnoreIndex: boolean;
+  IsInfiniteStream: boolean;
+  IsRemote: boolean;
+  MediaAttachments: any[];
+  MediaStreams: MediaStream[];
+  Name: string;
+  Path: string;
+  Protocol: string;
+  ReadAtNativeFramerate: boolean;
+  RequiredHttpHeaders: any;
+  RequiresClosing: boolean;
+  RequiresLooping: boolean;
+  RequiresOpening: boolean;
+  RunTimeTicks: number;
+  Size: number;
+  SupportsDirectPlay: boolean;
+  SupportsDirectStream: boolean;
+  SupportsProbing: boolean;
+  SupportsTranscoding: boolean;
+  Type: string;
+};
+
+type MediaStream = {
+  AspectRatio?: string;
+  BitDepth?: number;
+  BitRate?: number;
+  ChannelLayout?: string;
+  Channels?: number;
+  Codec: string;
+  CodecTimeBase: string;
+  ColorSpace?: string;
+  Comment?: string;
+  DisplayTitle?: string;
+  Height?: number;
+  Index: number;
+  IsDefault: boolean;
+  IsExternal: boolean;
+  IsForced: boolean;
+  IsInterlaced: boolean;
+  IsTextSubtitleStream: boolean;
+  Level: number;
+  PixelFormat?: string;
+  Profile?: string;
+  RealFrameRate?: number;
+  RefFrames?: number;
+  SampleRate?: number;
+  SupportsExternalStream: boolean;
+  TimeBase: string;
+  Type: string;
+  Width?: number;
+};
+
+export enum JFExternalType {
+  MUSICBRAINZ = 'MusicBrainz',
+  THEAUDIODB = 'TheAudioDb',
+}
+
+export enum JFImageType {
+  LOGO = 'Logo',
+  PRIMARY = 'Primary',
+}
+
+export enum JFItemType {
+  AUDIO = 'Audio',
+  MUSICALBUM = 'MusicAlbum',
+}
+
+export enum JFCollectionType {
+  MUSIC = 'music',
+  PLAYLISTS = 'playlists',
+}
+
+export interface JFAuthenticate {
+  AccessToken: string;
+  ServerId: string;
+  SessionInfo: SessionInfo;
+  User: User;
+}
+
+type SessionInfo = {
+  AdditionalUsers: any[];
+  ApplicationVersion: string;
+  Capabilities: Capabilities;
+  Client: string;
+  DeviceId: string;
+  DeviceName: string;
+  HasCustomDeviceName: boolean;
+  Id: string;
+  IsActive: boolean;
+  LastActivityDate: string;
+  LastPlaybackCheckIn: string;
+  NowPlayingQueue: any[];
+  NowPlayingQueueFullItems: any[];
+  PlayState: PlayState;
+  PlayableMediaTypes: any[];
+  RemoteEndPoint: string;
+  ServerId: string;
+  SupportedCommands: any[];
+  SupportsMediaControl: boolean;
+  SupportsRemoteControl: boolean;
+  UserId: string;
+  UserName: string;
+};
+
+type Capabilities = {
+  PlayableMediaTypes: any[];
+  SupportedCommands: any[];
+  SupportsContentUploading: boolean;
+  SupportsMediaControl: boolean;
+  SupportsPersistentIdentifier: boolean;
+  SupportsSync: boolean;
+};
+
+type PlayState = {
+  CanSeek: boolean;
+  IsMuted: boolean;
+  IsPaused: boolean;
+  RepeatMode: string;
+};
+
+type User = {
+  Configuration: Configuration;
+  EnableAutoLogin: boolean;
+  HasConfiguredEasyPassword: boolean;
+  HasConfiguredPassword: boolean;
+  HasPassword: boolean;
+  Id: string;
+  LastActivityDate: string;
+  LastLoginDate: string;
+  Name: string;
+  Policy: Policy;
+  ServerId: string;
+};
+
+type Configuration = {
+  DisplayCollectionsView: boolean;
+  DisplayMissingEpisodes: boolean;
+  EnableLocalPassword: boolean;
+  EnableNextEpisodeAutoPlay: boolean;
+  GroupedFolders: any[];
+  HidePlayedInLatest: boolean;
+  LatestItemsExcludes: any[];
+  MyMediaExcludes: any[];
+  OrderedViews: any[];
+  PlayDefaultAudioTrack: boolean;
+  RememberAudioSelections: boolean;
+  RememberSubtitleSelections: boolean;
+  SubtitleLanguagePreference: string;
+  SubtitleMode: string;
+};
+
+type Policy = {
+  AccessSchedules: any[];
+  AuthenticationProviderId: string;
+  BlockUnratedItems: any[];
+  BlockedChannels: any[];
+  BlockedMediaFolders: any[];
+  BlockedTags: any[];
+  EnableAllChannels: boolean;
+  EnableAllDevices: boolean;
+  EnableAllFolders: boolean;
+  EnableAudioPlaybackTranscoding: boolean;
+  EnableContentDeletion: boolean;
+  EnableContentDeletionFromFolders: any[];
+  EnableContentDownloading: boolean;
+  EnableLiveTvAccess: boolean;
+  EnableLiveTvManagement: boolean;
+  EnableMediaConversion: boolean;
+  EnableMediaPlayback: boolean;
+  EnablePlaybackRemuxing: boolean;
+  EnablePublicSharing: boolean;
+  EnableRemoteAccess: boolean;
+  EnableRemoteControlOfOtherUsers: boolean;
+  EnableSharedDeviceControl: boolean;
+  EnableSyncTranscoding: boolean;
+  EnableUserPreferenceAccess: boolean;
+  EnableVideoPlaybackTranscoding: boolean;
+  EnabledChannels: any[];
+  EnabledDevices: any[];
+  EnabledFolders: any[];
+  ForceRemoteSourceTranscoding: boolean;
+  InvalidLoginAttemptCount: number;
+  IsAdministrator: boolean;
+  IsDisabled: boolean;
+  IsHidden: boolean;
+  LoginAttemptsBeforeLockout: number;
+  MaxActiveSessions: number;
+  PasswordResetProviderId: string;
+  RemoteClientBitrateLimit: number;
+  SyncPlayAccess: string;
+};
+
+type JFBaseParams = {
+  enableImageTypes?: JFImageType[];
+  fields?: string;
+  imageTypeLimit?: number;
+  parentId?: string;
+  recursive?: boolean;
+  searchTerm?: string;
+  userId?: string;
+};
+
+type JFPaginationParams = {
+  limit?: number;
+  nameStartsWith?: string;
+  sortOrder?: JFSortOrder;
+  startIndex?: number;
+};
+
+export enum JFSortOrder {
+  ASC = 'Ascending',
+  DESC = 'Descending',
+}
+
+export enum JFAlbumListSort {
+  ALBUM_ARTIST = 'AlbumArtist,SortName',
+  COMMUNITY_RATING = 'CommunityRating,SortName',
+  CRITIC_RATING = 'CriticRating,SortName',
+  NAME = 'SortName',
+  RANDOM = 'Random,SortName',
+  RECENTLY_ADDED = 'DateCreated,SortName',
+  RELEASE_DATE = 'ProductionYear,PremiereDate,SortName',
+}
+
+export type JFAlbumListParams = {
+  albumArtistIds?: string;
+  artistIds?: string;
+  filters?: string;
+  genreIds?: string;
+  genres?: string;
+  includeItemTypes: 'MusicAlbum';
+  isFavorite?: boolean;
+  searchTerm?: string;
+  sortBy?: JFAlbumListSort;
+  tags?: string;
+  years?: string;
+} & JFBaseParams &
+  JFPaginationParams;
+
+export enum JFSongListSort {
+  ALBUM = 'Album,SortName',
+  ALBUM_ARTIST = 'AlbumArtist,Album,SortName',
+  ARTIST = 'Artist,Album,SortName',
+  COMMUNITY_RATING = 'CommunityRating,SortName',
+  DURATION = 'Runtime,AlbumArtist,Album,SortName',
+  NAME = 'Name,SortName',
+  PLAY_COUNT = 'PlayCount,SortName',
+  RANDOM = 'Random,SortName',
+  RECENTLY_ADDED = 'DateCreated,SortName',
+  RECENTLY_PLAYED = 'DatePlayed,SortName',
+  RELEASE_DATE = 'PremiereDate,AlbumArtist,Album,SortName',
+}
+
+export type JFSongListParams = {
+  albumArtistIds?: string;
+  albumIds?: string;
+  artistIds?: string;
+  contributingArtistIds?: string;
+  filters?: string;
+  genreIds?: string;
+  genres?: string;
+  ids?: string;
+  includeItemTypes: 'Audio';
+  searchTerm?: string;
+  sortBy?: JFSongListSort;
+  years?: string;
+} & JFBaseParams &
+  JFPaginationParams;
+
+export enum JFAlbumArtistListSort {
+  ALBUM = 'Album,SortName',
+  DURATION = 'Runtime,AlbumArtist,Album,SortName',
+  NAME = 'Name,SortName',
+  RANDOM = 'Random,SortName',
+  RECENTLY_ADDED = 'DateCreated,SortName',
+  RELEASE_DATE = 'PremiereDate,AlbumArtist,Album,SortName',
+}
+
+export type JFAlbumArtistListParams = {
+  filters?: string;
+  genres?: string;
+  sortBy?: JFAlbumArtistListSort;
+  years?: string;
+} & JFBaseParams &
+  JFPaginationParams;
+
+export enum JFArtistListSort {
+  ALBUM = 'Album,SortName',
+  DURATION = 'Runtime,AlbumArtist,Album,SortName',
+  NAME = 'Name,SortName',
+  RANDOM = 'Random,SortName',
+  RECENTLY_ADDED = 'DateCreated,SortName',
+  RELEASE_DATE = 'PremiereDate,AlbumArtist,Album,SortName',
+}
+
+export type JFArtistListParams = {
+  filters?: string;
+  genres?: string;
+  sortBy?: JFArtistListSort;
+  years?: string;
+} & JFBaseParams &
+  JFPaginationParams;
+
+export type JFCreatePlaylistResponse = {
+  Id: string;
+};
+
+export type JFCreatePlaylist = JFCreatePlaylistResponse;

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

@@ -0,0 +1,347 @@
+import { useAuthStore } from '/@/renderer/store';
+import { jfType } from '/@/renderer/api/jellyfin/jellyfin-types';
+import { initClient, initContract } from '@ts-rest/core';
+import axios, { AxiosError, AxiosResponse, isAxiosError, Method } from 'axios';
+import qs from 'qs';
+import { toast } from '/@/renderer/components';
+import { ServerListItem } from '/@/renderer/types';
+import omitBy from 'lodash/omitBy';
+import { z } from 'zod';
+
+const c = initContract();
+
+export const contract = c.router({
+  addToPlaylist: {
+    body: z.null(),
+    method: 'POST',
+    path: 'playlists/:id/items',
+    query: jfType._parameters.addToPlaylist,
+    responses: {
+      204: jfType._response.addToPlaylist,
+      400: jfType._response.error,
+    },
+  },
+  authenticate: {
+    body: jfType._parameters.authenticate,
+    method: 'POST',
+    path: 'users/authenticatebyname',
+    responses: {
+      200: jfType._response.authenticate,
+      400: jfType._response.error,
+    },
+  },
+  createFavorite: {
+    body: jfType._parameters.favorite,
+    method: 'POST',
+    path: 'users/:userId/favoriteitems/:id',
+    responses: {
+      200: jfType._response.favorite,
+      400: jfType._response.error,
+    },
+  },
+  createPlaylist: {
+    body: jfType._parameters.createPlaylist,
+    method: 'POST',
+    path: 'playlists',
+    responses: {
+      200: jfType._response.createPlaylist,
+      400: jfType._response.error,
+    },
+  },
+  deletePlaylist: {
+    body: null,
+    method: 'DELETE',
+    path: 'items/:id',
+    responses: {
+      204: jfType._response.deletePlaylist,
+      400: jfType._response.error,
+    },
+  },
+  getAlbumArtistDetail: {
+    method: 'GET',
+    path: 'users/:userId/items/:id',
+    query: jfType._parameters.albumArtistDetail,
+    responses: {
+      200: jfType._response.albumArtist,
+      400: jfType._response.error,
+    },
+  },
+  getAlbumArtistList: {
+    method: 'GET',
+    path: 'artists/albumArtists',
+    query: jfType._parameters.albumArtistList,
+    responses: {
+      200: jfType._response.albumArtistList,
+      400: jfType._response.error,
+    },
+  },
+  getAlbumDetail: {
+    method: 'GET',
+    path: 'users/:userId/items/:id',
+    query: jfType._parameters.albumDetail,
+    responses: {
+      200: jfType._response.album,
+      400: jfType._response.error,
+    },
+  },
+  getAlbumList: {
+    method: 'GET',
+    path: 'users/:userId/items',
+    query: jfType._parameters.albumList,
+    responses: {
+      200: jfType._response.albumList,
+      400: jfType._response.error,
+    },
+  },
+  getArtistList: {
+    method: 'GET',
+    path: 'artists',
+    query: jfType._parameters.albumArtistList,
+    responses: {
+      200: jfType._response.albumArtistList,
+      400: jfType._response.error,
+    },
+  },
+  getGenreList: {
+    method: 'GET',
+    path: 'genres',
+    responses: {
+      200: jfType._response.genreList,
+      400: jfType._response.error,
+    },
+  },
+  getMusicFolderList: {
+    method: 'GET',
+    path: 'users/:userId/items',
+    responses: {
+      200: jfType._response.musicFolderList,
+      400: jfType._response.error,
+    },
+  },
+  getPlaylistDetail: {
+    method: 'GET',
+    path: 'users/:userId/items/:id',
+    query: jfType._parameters.playlistDetail,
+    responses: {
+      200: jfType._response.playlist,
+      400: jfType._response.error,
+    },
+  },
+  getPlaylistList: {
+    method: 'GET',
+    path: 'users/:userId/items',
+    query: jfType._parameters.playlistList,
+    responses: {
+      200: jfType._response.playlistList,
+      400: jfType._response.error,
+    },
+  },
+  getPlaylistSongList: {
+    method: 'GET',
+    path: 'playlists/:id/items',
+    query: jfType._parameters.songList,
+    responses: {
+      200: jfType._response.playlistSongList,
+      400: jfType._response.error,
+    },
+  },
+  getSimilarArtistList: {
+    method: 'GET',
+    path: 'artists/:id/similar',
+    query: jfType._parameters.similarArtistList,
+    responses: {
+      200: jfType._response.albumArtistList,
+      400: jfType._response.error,
+    },
+  },
+  getSongDetail: {
+    method: 'GET',
+    path: 'song/:id',
+    responses: {
+      200: jfType._response.song,
+      400: jfType._response.error,
+    },
+  },
+  getSongList: {
+    method: 'GET',
+    path: 'users/:userId/items',
+    query: jfType._parameters.songList,
+    responses: {
+      200: jfType._response.songList,
+      400: jfType._response.error,
+    },
+  },
+  getTopSongsList: {
+    method: 'GET',
+    path: 'users/:userId/items',
+    query: jfType._parameters.songList,
+    responses: {
+      200: jfType._response.topSongsList,
+      400: jfType._response.error,
+    },
+  },
+  removeFavorite: {
+    body: jfType._parameters.favorite,
+    method: 'DELETE',
+    path: 'users/:userId/favoriteitems/:id',
+    responses: {
+      200: jfType._response.favorite,
+      400: jfType._response.error,
+    },
+  },
+  removeFromPlaylist: {
+    body: null,
+    method: 'DELETE',
+    path: 'playlists/:id/items',
+    query: jfType._parameters.removeFromPlaylist,
+    responses: {
+      200: jfType._response.removeFromPlaylist,
+      400: jfType._response.error,
+    },
+  },
+  scrobblePlaying: {
+    body: jfType._parameters.scrobble,
+    method: 'POST',
+    path: 'sessions/playing',
+    responses: {
+      200: jfType._response.scrobble,
+      400: jfType._response.error,
+    },
+  },
+  scrobbleProgress: {
+    body: jfType._parameters.scrobble,
+    method: 'POST',
+    path: 'sessions/playing/progress',
+    responses: {
+      200: jfType._response.scrobble,
+      400: jfType._response.error,
+    },
+  },
+  scrobbleStopped: {
+    body: jfType._parameters.scrobble,
+    method: 'POST',
+    path: 'sessions/playing/stopped',
+    responses: {
+      200: jfType._response.scrobble,
+      400: jfType._response.error,
+    },
+  },
+  search: {
+    method: 'GET',
+    path: 'users/:userId/items',
+    query: jfType._parameters.search,
+    responses: {
+      200: jfType._response.search,
+      400: jfType._response.error,
+    },
+  },
+  updatePlaylist: {
+    body: jfType._parameters.updatePlaylist,
+    method: 'PUT',
+    path: 'items/:id',
+    responses: {
+      200: jfType._response.updatePlaylist,
+      400: jfType._response.error,
+    },
+  },
+});
+
+const axiosClient = axios.create({});
+
+axiosClient.defaults.paramsSerializer = (params) => {
+  return qs.stringify(params, { arrayFormat: 'repeat' });
+};
+
+axiosClient.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      toast.error({
+        message: 'Your session has expired.',
+      });
+
+      const currentServer = useAuthStore.getState().currentServer;
+
+      if (currentServer) {
+        const serverId = currentServer.id;
+        const token = currentServer.credential;
+        console.log(`token is expired: ${token}`);
+        useAuthStore.getState().actions.setCurrentServer(null);
+        useAuthStore.getState().actions.updateServer(serverId, { credential: undefined });
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+const parsePath = (fullPath: string) => {
+  const [path, params] = fullPath.split('?');
+
+  const parsedParams = qs.parse(params);
+  const notNilParams = omitBy(parsedParams, (value) => value === 'undefined' || value === 'null');
+
+  return {
+    params: notNilParams,
+    path,
+  };
+};
+
+export const jfApiClient = (args: {
+  server: ServerListItem | null;
+  signal?: AbortSignal;
+  url?: string;
+}) => {
+  const { server, url, signal } = args;
+
+  return initClient(contract, {
+    api: async ({ path, method, headers, body }) => {
+      let baseUrl: string | undefined;
+      let token: string | undefined;
+
+      const { params, path: api } = parsePath(path);
+
+      if (server) {
+        baseUrl = `${server?.url}`;
+        token = server?.credential;
+      } else {
+        baseUrl = url;
+      }
+
+      try {
+        const result = await axiosClient.request({
+          data: body,
+          headers: {
+            ...headers,
+            ...(token && { 'X-MediaBrowser-Token': token }),
+          },
+          method: method as Method,
+          params,
+          signal,
+          url: `${baseUrl}/${api}`,
+        });
+        return {
+          body: result.data,
+          status: result.status,
+        };
+      } catch (e: Error | AxiosError | any) {
+        if (isAxiosError(e)) {
+          const error = e as AxiosError;
+          const response = error.response as AxiosResponse;
+          return {
+            body: response.data,
+            status: response.status,
+          };
+        }
+        throw e;
+      }
+    },
+    baseHeaders: {
+      'Content-Type': 'application/json',
+    },
+    baseUrl: '',
+    jsonQuery: false,
+  });
+};

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

@@ -0,0 +1,873 @@
+import {
+  AuthenticationResponse,
+  MusicFolderListArgs,
+  MusicFolderListResponse,
+  GenreListArgs,
+  AlbumArtistDetailArgs,
+  AlbumArtistListArgs,
+  albumArtistListSortMap,
+  sortOrderMap,
+  ArtistListArgs,
+  artistListSortMap,
+  AlbumDetailArgs,
+  AlbumListArgs,
+  albumListSortMap,
+  TopSongListArgs,
+  SongListArgs,
+  songListSortMap,
+  AddToPlaylistArgs,
+  RemoveFromPlaylistArgs,
+  PlaylistDetailArgs,
+  PlaylistSongListArgs,
+  PlaylistListArgs,
+  playlistListSortMap,
+  CreatePlaylistArgs,
+  CreatePlaylistResponse,
+  UpdatePlaylistArgs,
+  UpdatePlaylistResponse,
+  DeletePlaylistArgs,
+  FavoriteArgs,
+  FavoriteResponse,
+  ScrobbleArgs,
+  ScrobbleResponse,
+  GenreListResponse,
+  AlbumArtistDetailResponse,
+  AlbumArtistListResponse,
+  AlbumDetailResponse,
+  AlbumListResponse,
+  SongListResponse,
+  AddToPlaylistResponse,
+  RemoveFromPlaylistResponse,
+  PlaylistDetailResponse,
+  PlaylistListResponse,
+  SearchArgs,
+  SearchResponse,
+  RandomSongListResponse,
+  RandomSongListArgs,
+} from '/@/renderer/api/types';
+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';
+
+const formatCommaDelimitedString = (value: string[]) => {
+  return value.join(',');
+};
+
+const authenticate = async (
+  url: string,
+  body: {
+    password: string;
+    username: string;
+  },
+): Promise<AuthenticationResponse> => {
+  const cleanServerUrl = url.replace(/\/$/, '');
+
+  const res = await jfApiClient({ server: null, url: cleanServerUrl }).authenticate({
+    body: {
+      Pw: body.password,
+      Username: body.username,
+    },
+    headers: {
+      'X-Emby-Authorization': `MediaBrowser Client="Feishin", Device="PC", DeviceId="Feishin", Version="${packageJson.version}"`,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to authenticate');
+  }
+
+  return {
+    credential: res.body.AccessToken,
+    userId: res.body.User.Id,
+    username: res.body.User.Name,
+  };
+};
+
+const getMusicFolderList = async (args: MusicFolderListArgs): Promise<MusicFolderListResponse> => {
+  const { apiClientProps } = args;
+  const userId = apiClientProps.server?.userId;
+
+  if (!userId) throw new Error('No userId found');
+
+  const res = await jfApiClient(apiClientProps).getMusicFolderList({
+    params: {
+      userId,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get genre list');
+  }
+
+  const musicFolders = res.body.Items.filter(
+    (folder) => folder.CollectionType === jfType._enum.collection.MUSIC,
+  );
+
+  return {
+    items: musicFolders.map(jfNormalize.musicFolder),
+    startIndex: 0,
+    totalRecordCount: musicFolders?.length || 0,
+  };
+};
+
+const getGenreList = async (args: GenreListArgs): Promise<GenreListResponse> => {
+  const { apiClientProps } = args;
+
+  const res = await jfApiClient(apiClientProps).getGenreList();
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get genre list');
+  }
+
+  return {
+    items: res.body.Items.map(jfNormalize.genre),
+    startIndex: 0,
+    totalRecordCount: res.body?.Items?.length || 0,
+  };
+};
+
+const getAlbumArtistDetail = async (
+  args: AlbumArtistDetailArgs,
+): Promise<AlbumArtistDetailResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).getAlbumArtistDetail({
+    params: {
+      id: query.id,
+      userId: apiClientProps.server?.userId,
+    },
+    query: {
+      Fields: 'Genres, Overview',
+    },
+  });
+
+  const similarArtistsRes = await jfApiClient(apiClientProps).getSimilarArtistList({
+    params: {
+      id: query.id,
+    },
+    query: {
+      Limit: 10,
+    },
+  });
+
+  if (res.status !== 200 || similarArtistsRes.status !== 200) {
+    throw new Error('Failed to get album artist detail');
+  }
+
+  return jfNormalize.albumArtist(
+    { ...res.body, similarArtists: similarArtistsRes.body },
+    apiClientProps.server,
+  );
+};
+
+const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<AlbumArtistListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await jfApiClient(apiClientProps).getAlbumArtistList({
+    query: {
+      Fields: 'Genres, DateCreated, ExternalUrls, Overview',
+      ImageTypeLimit: 1,
+      Limit: query.limit,
+      ParentId: query.musicFolderId,
+      Recursive: true,
+      SearchTerm: query.searchTerm,
+      SortBy: albumArtistListSortMap.jellyfin[query.sortBy] || 'Name,SortName',
+      SortOrder: sortOrderMap.jellyfin[query.sortOrder],
+      StartIndex: query.startIndex,
+      UserId: apiClientProps.server?.userId || undefined,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get album artist list');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.albumArtist(item, apiClientProps.server)),
+    startIndex: query.startIndex,
+    totalRecordCount: res.body.TotalRecordCount,
+  };
+};
+
+const getArtistList = async (args: ArtistListArgs): Promise<AlbumArtistListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await jfApiClient(apiClientProps).getAlbumArtistList({
+    query: {
+      Limit: query.limit,
+      ParentId: query.musicFolderId,
+      Recursive: true,
+      SortBy: artistListSortMap.jellyfin[query.sortBy] || 'Name,SortName',
+      SortOrder: sortOrderMap.jellyfin[query.sortOrder],
+      StartIndex: query.startIndex,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get artist list');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.albumArtist(item, apiClientProps.server)),
+    startIndex: query.startIndex,
+    totalRecordCount: res.body.TotalRecordCount,
+  };
+};
+
+const getAlbumDetail = async (args: AlbumDetailArgs): Promise<AlbumDetailResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).getAlbumDetail({
+    params: {
+      id: query.id,
+      userId: apiClientProps.server.userId,
+    },
+    query: {
+      Fields: 'Genres, DateCreated, ChildCount',
+    },
+  });
+
+  const songsRes = await jfApiClient(apiClientProps).getSongList({
+    params: {
+      userId: apiClientProps.server.userId,
+    },
+    query: {
+      Fields: 'Genres, DateCreated, MediaSources, ParentId',
+      IncludeItemTypes: 'Audio',
+      ParentId: query.id,
+      SortBy: 'Album,SortName',
+    },
+  });
+
+  if (res.status !== 200 || songsRes.status !== 200) {
+    throw new Error('Failed to get album detail');
+  }
+
+  return jfNormalize.album({ ...res.body, Songs: songsRes.body.Items }, apiClientProps.server);
+};
+
+const getAlbumList = async (args: AlbumListArgs): Promise<AlbumListResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const yearsGroup = [];
+  if (query._custom?.jellyfin?.minYear && query._custom?.jellyfin?.maxYear) {
+    for (
+      let i = Number(query._custom?.jellyfin?.minYear);
+      i <= Number(query._custom?.jellyfin?.maxYear);
+      i += 1
+    ) {
+      yearsGroup.push(String(i));
+    }
+  }
+
+  const yearsFilter = yearsGroup.length ? yearsGroup.join(',') : undefined;
+
+  const res = await jfApiClient(apiClientProps).getAlbumList({
+    params: {
+      userId: apiClientProps.server?.userId,
+    },
+    query: {
+      AlbumArtistIds: query.artistIds ? formatCommaDelimitedString(query.artistIds) : undefined,
+      IncludeItemTypes: 'MusicAlbum',
+      Limit: query.limit,
+      ParentId: query.musicFolderId,
+      Recursive: true,
+      SearchTerm: query.searchTerm,
+      SortBy: albumListSortMap.jellyfin[query.sortBy] || 'SortName',
+      SortOrder: sortOrderMap.jellyfin[query.sortOrder],
+      StartIndex: query.startIndex,
+      ...query._custom?.jellyfin,
+      Years: yearsFilter,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get album list');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.album(item, apiClientProps.server)),
+    startIndex: query.startIndex,
+    totalRecordCount: res.body.TotalRecordCount,
+  };
+};
+
+const getTopSongList = async (args: TopSongListArgs): Promise<SongListResponse> => {
+  const { apiClientProps, query } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).getTopSongsList({
+    params: {
+      userId: apiClientProps.server?.userId,
+    },
+    query: {
+      ArtistIds: query.artistId,
+      Fields: 'Genres, DateCreated, MediaSources, ParentId',
+      IncludeItemTypes: 'Audio',
+      Limit: query.limit,
+      Recursive: true,
+      SortBy: 'CommunityRating,SortName',
+      SortOrder: 'Descending',
+      UserId: apiClientProps.server?.userId,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get top song list');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.song(item, apiClientProps.server, '')),
+    startIndex: 0,
+    totalRecordCount: res.body.TotalRecordCount,
+  };
+};
+
+const getSongList = async (args: SongListArgs): Promise<SongListResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const yearsGroup = [];
+  if (query._custom?.jellyfin?.minYear && query._custom?.jellyfin?.maxYear) {
+    for (
+      let i = Number(query._custom?.jellyfin?.minYear);
+      i <= Number(query._custom?.jellyfin?.maxYear);
+      i += 1
+    ) {
+      yearsGroup.push(String(i));
+    }
+  }
+
+  const yearsFilter = yearsGroup.length ? formatCommaDelimitedString(yearsGroup) : undefined;
+  const albumIdsFilter = query.albumIds ? formatCommaDelimitedString(query.albumIds) : undefined;
+  const artistIdsFilter = query.artistIds ? formatCommaDelimitedString(query.artistIds) : undefined;
+
+  const res = await jfApiClient(apiClientProps).getSongList({
+    params: {
+      userId: apiClientProps.server?.userId,
+    },
+    query: {
+      AlbumIds: albumIdsFilter,
+      ArtistIds: artistIdsFilter,
+      Fields: 'Genres, DateCreated, MediaSources, ParentId',
+      IncludeItemTypes: 'Audio',
+      Limit: query.limit,
+      ParentId: query.musicFolderId,
+      Recursive: true,
+      SearchTerm: query.searchTerm,
+      SortBy: songListSortMap.jellyfin[query.sortBy] || 'Album,SortName',
+      SortOrder: sortOrderMap.jellyfin[query.sortOrder],
+      StartIndex: query.startIndex,
+      ...query._custom?.jellyfin,
+      Years: yearsFilter,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get song list');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.song(item, apiClientProps.server, '')),
+    startIndex: query.startIndex,
+    totalRecordCount: res.body.TotalRecordCount,
+  };
+};
+
+const addToPlaylist = async (args: AddToPlaylistArgs): Promise<AddToPlaylistResponse> => {
+  const { query, body, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    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,
+    },
+  });
+
+  if (res.status !== 204) {
+    throw new Error('Failed to add to playlist');
+  }
+
+  return null;
+};
+
+const removeFromPlaylist = async (
+  args: RemoveFromPlaylistArgs,
+): Promise<RemoveFromPlaylistResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await jfApiClient(apiClientProps).removeFromPlaylist({
+    body: null,
+    params: {
+      id: query.id,
+    },
+    query: {
+      EntryIds: query.songId,
+    },
+  });
+
+  if (res.status !== 204) {
+    throw new Error('Failed to remove from playlist');
+  }
+
+  return null;
+};
+
+const getPlaylistDetail = async (args: PlaylistDetailArgs): Promise<PlaylistDetailResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).getPlaylistDetail({
+    params: {
+      id: query.id,
+      userId: apiClientProps.server?.userId,
+    },
+    query: {
+      Fields: 'Genres, DateCreated, MediaSources, ChildCount, ParentId',
+      Ids: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get playlist detail');
+  }
+
+  return jfNormalize.playlist(res.body, apiClientProps.server);
+};
+
+const getPlaylistSongList = async (args: PlaylistSongListArgs): Promise<SongListResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).getPlaylistSongList({
+    params: {
+      id: query.id,
+    },
+    query: {
+      Fields: 'Genres, DateCreated, MediaSources, UserData, ParentId',
+      IncludeItemTypes: 'Audio',
+      Limit: query.limit,
+      SortBy: query.sortBy ? songListSortMap.jellyfin[query.sortBy] : undefined,
+      SortOrder: query.sortOrder ? sortOrderMap.jellyfin[query.sortOrder] : undefined,
+      StartIndex: 0,
+      UserId: apiClientProps.server?.userId,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get playlist song list');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.song(item, apiClientProps.server, '')),
+    startIndex: query.startIndex,
+    totalRecordCount: res.body.TotalRecordCount,
+  };
+};
+
+const getPlaylistList = async (args: PlaylistListArgs): Promise<PlaylistListResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).getPlaylistList({
+    params: {
+      userId: apiClientProps.server?.userId,
+    },
+    query: {
+      Fields: 'ChildCount, Genres, DateCreated, ParentId, Overview',
+      IncludeItemTypes: 'Playlist',
+      Limit: query.limit,
+      MediaTypes: 'Audio',
+      Recursive: true,
+      SortBy: playlistListSortMap.jellyfin[query.sortBy],
+      SortOrder: sortOrderMap.jellyfin[query.sortOrder],
+      StartIndex: query.startIndex,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get playlist list');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.playlist(item, apiClientProps.server)),
+    startIndex: 0,
+    totalRecordCount: res.body.TotalRecordCount,
+  };
+};
+
+const createPlaylist = async (args: CreatePlaylistArgs): Promise<CreatePlaylistResponse> => {
+  const { body, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).createPlaylist({
+    body: {
+      MediaType: 'Audio',
+      Name: body.name,
+      Overview: body.comment || '',
+      UserId: apiClientProps.server.userId,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to create playlist');
+  }
+
+  return {
+    id: res.body.Id,
+  };
+};
+
+const updatePlaylist = async (args: UpdatePlaylistArgs): Promise<UpdatePlaylistResponse> => {
+  const { query, body, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const res = await jfApiClient(apiClientProps).updatePlaylist({
+    body: {
+      Genres: body.genres?.map((item) => ({ Id: item.id, Name: item.name })) || [],
+      MediaType: 'Audio',
+      Name: body.name,
+      Overview: body.comment || '',
+      PremiereDate: null,
+      ProviderIds: {},
+      Tags: [],
+      UserId: apiClientProps.server?.userId, // Required
+    },
+    params: {
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to update playlist');
+  }
+
+  return null;
+};
+
+const deletePlaylist = async (args: DeletePlaylistArgs): Promise<null> => {
+  const { query, apiClientProps } = args;
+
+  const res = await jfApiClient(apiClientProps).deletePlaylist({
+    body: null,
+    params: {
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 204) {
+    throw new Error('Failed to delete playlist');
+  }
+
+  return null;
+};
+
+const createFavorite = async (args: FavoriteArgs): Promise<FavoriteResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  for (const id of query.id) {
+    await jfApiClient(apiClientProps).createFavorite({
+      body: {},
+      params: {
+        id,
+        userId: apiClientProps.server?.userId,
+      },
+    });
+  }
+
+  return null;
+};
+
+const deleteFavorite = async (args: FavoriteArgs): Promise<FavoriteResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  for (const id of query.id) {
+    await jfApiClient(apiClientProps).removeFavorite({
+      body: {},
+      params: {
+        id,
+        userId: apiClientProps.server?.userId,
+      },
+    });
+  }
+
+  return null;
+};
+
+const scrobble = async (args: ScrobbleArgs): Promise<ScrobbleResponse> => {
+  const { query, apiClientProps } = args;
+
+  const position = query.position && Math.round(query.position);
+
+  if (query.submission) {
+    // Checked by jellyfin-plugin-lastfm for whether or not to send the "finished" scrobble (uses PositionTicks)
+    jfApiClient(apiClientProps).scrobbleStopped({
+      body: {
+        IsPaused: true,
+        ItemId: query.id,
+        PositionTicks: position,
+      },
+    });
+
+    return null;
+  }
+
+  if (query.event === 'start') {
+    jfApiClient(apiClientProps).scrobblePlaying({
+      body: {
+        ItemId: query.id,
+        PositionTicks: position,
+      },
+    });
+
+    return null;
+  }
+
+  if (query.event === 'pause') {
+    jfApiClient(apiClientProps).scrobbleProgress({
+      body: {
+        EventName: query.event,
+        IsPaused: true,
+        ItemId: query.id,
+        PositionTicks: position,
+      },
+    });
+
+    return null;
+  }
+
+  if (query.event === 'unpause') {
+    jfApiClient(apiClientProps).scrobbleProgress({
+      body: {
+        EventName: query.event,
+        IsPaused: false,
+        ItemId: query.id,
+        PositionTicks: position,
+      },
+    });
+
+    return null;
+  }
+
+  jfApiClient(apiClientProps).scrobbleProgress({
+    body: {
+      ItemId: query.id,
+      PositionTicks: position,
+    },
+  });
+
+  return null;
+};
+
+const search = async (args: SearchArgs): Promise<SearchResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  let albums: z.infer<typeof jfType._response.albumList>['Items'] = [];
+  let albumArtists: z.infer<typeof jfType._response.albumArtistList>['Items'] = [];
+  let songs: z.infer<typeof jfType._response.songList>['Items'] = [];
+
+  if (query.albumLimit) {
+    const res = await jfApiClient(apiClientProps).getAlbumList({
+      params: {
+        userId: apiClientProps.server?.userId,
+      },
+      query: {
+        EnableTotalRecordCount: true,
+        ImageTypeLimit: 1,
+        IncludeItemTypes: 'MusicAlbum',
+        Limit: query.albumLimit,
+        Recursive: true,
+        SearchTerm: query.query,
+        SortBy: 'SortName',
+        SortOrder: 'Ascending',
+        StartIndex: query.albumStartIndex || 0,
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error('Failed to get album list');
+    }
+
+    albums = res.body.Items;
+  }
+
+  if (query.albumArtistLimit) {
+    const res = await jfApiClient(apiClientProps).getAlbumArtistList({
+      query: {
+        EnableTotalRecordCount: true,
+        Fields: 'Genres, DateCreated, ExternalUrls, Overview',
+        ImageTypeLimit: 1,
+        IncludeArtists: true,
+        Limit: query.albumArtistLimit,
+        Recursive: true,
+        SearchTerm: query.query,
+        StartIndex: query.albumArtistStartIndex || 0,
+        UserId: apiClientProps.server?.userId,
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error('Failed to get album artist list');
+    }
+
+    albumArtists = res.body.Items;
+  }
+
+  if (query.songLimit) {
+    const res = await jfApiClient(apiClientProps).getSongList({
+      params: {
+        userId: apiClientProps.server?.userId,
+      },
+      query: {
+        EnableTotalRecordCount: true,
+        Fields: 'Genres, DateCreated, MediaSources, ParentId',
+        IncludeItemTypes: 'Audio',
+        Limit: query.songLimit,
+        Recursive: true,
+        SearchTerm: query.query,
+        SortBy: 'Album,SortName',
+        SortOrder: 'Ascending',
+        StartIndex: query.songStartIndex || 0,
+        UserId: apiClientProps.server?.userId,
+      },
+    });
+
+    if (res.status !== 200) {
+      throw new Error('Failed to get song list');
+    }
+
+    songs = res.body.Items;
+  }
+
+  return {
+    albumArtists: albumArtists.map((item) => jfNormalize.albumArtist(item, apiClientProps.server)),
+    albums: albums.map((item) => jfNormalize.album(item, apiClientProps.server)),
+    songs: songs.map((item) => jfNormalize.song(item, apiClientProps.server, '')),
+  };
+};
+
+const getRandomSongList = async (args: RandomSongListArgs): Promise<RandomSongListResponse> => {
+  const { query, apiClientProps } = args;
+
+  if (!apiClientProps.server?.userId) {
+    throw new Error('No userId found');
+  }
+
+  const yearsGroup = [];
+  if (query.minYear && query.maxYear) {
+    for (let i = Number(query.minYear); i <= Number(query.maxYear); i += 1) {
+      yearsGroup.push(String(i));
+    }
+  }
+
+  const yearsFilter = yearsGroup.length ? formatCommaDelimitedString(yearsGroup) : undefined;
+
+  const res = await jfApiClient(apiClientProps).getSongList({
+    params: {
+      userId: apiClientProps.server?.userId,
+    },
+    query: {
+      Fields: 'Genres, DateCreated, MediaSources, ParentId',
+      GenreIds: query.genre ? query.genre : undefined,
+      IncludeItemTypes: 'Audio',
+      Limit: query.limit,
+      ParentId: query.musicFolderId,
+      Recursive: true,
+      SortBy: JFSongListSort.RANDOM,
+      SortOrder: JFSortOrder.ASC,
+      StartIndex: 0,
+      Years: yearsFilter,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get random songs');
+  }
+
+  return {
+    items: res.body.Items.map((item) => jfNormalize.song(item, apiClientProps.server, '')),
+    startIndex: 0,
+    totalRecordCount: res.body.Items.length || 0,
+  };
+};
+export const jfController = {
+  addToPlaylist,
+  authenticate,
+  createFavorite,
+  createPlaylist,
+  deleteFavorite,
+  deletePlaylist,
+  getAlbumArtistDetail,
+  getAlbumArtistList,
+  getAlbumDetail,
+  getAlbumList,
+  getArtistList,
+  getGenreList,
+  getMusicFolderList,
+  getPlaylistDetail,
+  getPlaylistList,
+  getPlaylistSongList,
+  getRandomSongList,
+  getSongList,
+  getTopSongList,
+  removeFromPlaylist,
+  scrobble,
+  search,
+  updatePlaylist,
+};

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

@@ -0,0 +1,368 @@
+import { nanoid } from 'nanoid';
+import { z } from 'zod';
+import { JFAlbum, JFPlaylist, JFMusicFolder, JFGenre } from '/@/renderer/api/jellyfin.types';
+import { jfType } from '/@/renderer/api/jellyfin/jellyfin-types';
+import {
+  Song,
+  LibraryItem,
+  Album,
+  AlbumArtist,
+  Playlist,
+  MusicFolder,
+  Genre,
+} from '/@/renderer/api/types';
+import { ServerListItem, ServerType } from '/@/renderer/types';
+
+const getStreamUrl = (args: {
+  container?: string;
+  deviceId: string;
+  eTag?: string;
+  id: string;
+  mediaSourceId?: string;
+  server: ServerListItem | null;
+}) => {
+  const { id, server, deviceId } = args;
+
+  return (
+    `${server?.url}/audio` +
+    `/${id}/universal` +
+    `?userId=${server?.userId}` +
+    `&deviceId=${deviceId}` +
+    '&audioCodec=aac' +
+    `&api_key=${server?.credential}` +
+    `&playSessionId=${deviceId}` +
+    '&container=opus,mp3,aac,m4a,m4b,flac,wav,ogg' +
+    '&transcodingContainer=ts' +
+    '&transcodingProtocol=hls'
+  );
+};
+
+const getAlbumArtistCoverArtUrl = (args: {
+  baseUrl: string;
+  item: z.infer<typeof jfType._response.albumArtist>;
+  size: number;
+}) => {
+  const size = args.size ? args.size : 300;
+
+  if (!args.item.ImageTags?.Primary) {
+    return null;
+  }
+
+  return (
+    `${args.baseUrl}/Items` +
+    `/${args.item.Id}` +
+    '/Images/Primary' +
+    `?width=${size}&height=${size}` +
+    '&quality=96'
+  );
+};
+
+const getAlbumCoverArtUrl = (args: { baseUrl: string; item: JFAlbum; size: number }) => {
+  const size = args.size ? args.size : 300;
+
+  if (!args.item.ImageTags?.Primary && !args.item?.AlbumPrimaryImageTag) {
+    return null;
+  }
+
+  return (
+    `${args.baseUrl}/Items` +
+    `/${args.item.Id}` +
+    '/Images/Primary' +
+    `?width=${size}&height=${size}` +
+    '&quality=96'
+  );
+};
+
+const getSongCoverArtUrl = (args: {
+  baseUrl: string;
+  item: z.infer<typeof jfType._response.song>;
+  size: number;
+}) => {
+  const size = args.size ? args.size : 100;
+
+  if (args.item.ImageTags.Primary) {
+    return (
+      `${args.baseUrl}/Items` +
+      `/${args.item.Id}` +
+      '/Images/Primary' +
+      `?width=${size}&height=${size}` +
+      '&quality=96'
+    );
+  }
+
+  if (args.item?.AlbumPrimaryImageTag) {
+    // Fall back to album art if no image embedded
+    return (
+      `${args.baseUrl}/Items` +
+      `/${args.item?.AlbumId}` +
+      '/Images/Primary' +
+      `?width=${size}&height=${size}` +
+      '&quality=96'
+    );
+  }
+
+  return null;
+};
+
+const getPlaylistCoverArtUrl = (args: { baseUrl: string; item: JFPlaylist; size: number }) => {
+  const size = args.size ? args.size : 300;
+
+  if (!args.item.ImageTags?.Primary) {
+    return null;
+  }
+
+  return (
+    `${args.baseUrl}/Items` +
+    `/${args.item.Id}` +
+    '/Images/Primary' +
+    `?width=${size}&height=${size}` +
+    '&quality=96'
+  );
+};
+
+const normalizeSong = (
+  item: z.infer<typeof jfType._response.song>,
+  server: ServerListItem | null,
+  deviceId: string,
+  imageSize?: number,
+): Song => {
+  return {
+    album: item.Album,
+    albumArtists: item.AlbumArtists?.map((entry) => ({
+      id: entry.Id,
+      imageUrl: null,
+      name: entry.Name,
+    })),
+    albumId: item.AlbumId,
+    artistName: item?.ArtistItems?.[0]?.Name,
+    artists: item?.ArtistItems?.map((entry) => ({
+      id: entry.Id,
+      imageUrl: null,
+      name: entry.Name,
+    })),
+    bitRate: item.MediaSources && Number(Math.trunc(item.MediaSources[0]?.Bitrate / 1000)),
+    bpm: null,
+    channels: null,
+    comment: null,
+    compilation: null,
+    container: (item.MediaSources && item.MediaSources[0]?.Container) || null,
+    createdAt: item.DateCreated,
+    discNumber: (item.ParentIndexNumber && item.ParentIndexNumber) || 1,
+    duration: item.RunTimeTicks / 10000000,
+    genres: item.GenreItems.map((entry: any) => ({ id: entry.Id, name: entry.Name })),
+    id: item.Id,
+    imagePlaceholderUrl: null,
+    imageUrl: getSongCoverArtUrl({ baseUrl: server?.url || '', item, size: imageSize || 100 }),
+    itemType: LibraryItem.SONG,
+    lastPlayedAt: null,
+    name: item.Name,
+    path: (item.MediaSources && item.MediaSources[0]?.Path) || null,
+    playCount: (item.UserData && item.UserData.PlayCount) || 0,
+    playlistItemId: item.PlaylistItemId,
+    // releaseDate: (item.ProductionYear && new Date(item.ProductionYear, 0, 1).toISOString()) || null,
+    releaseDate: null,
+    releaseYear: item.ProductionYear ? String(item.ProductionYear) : null,
+    serverId: server?.id || '',
+    serverType: ServerType.JELLYFIN,
+    size: item.MediaSources && item.MediaSources[0]?.Size,
+    streamUrl: getStreamUrl({
+      container: item.MediaSources?.[0]?.Container,
+      deviceId,
+      eTag: item.MediaSources?.[0]?.ETag,
+      id: item.Id,
+      mediaSourceId: item.MediaSources?.[0]?.Id,
+      server,
+    }),
+    trackNumber: item.IndexNumber,
+    uniqueId: nanoid(),
+    updatedAt: item.DateCreated,
+    userFavorite: (item.UserData && item.UserData.IsFavorite) || false,
+    userRating: null,
+  };
+};
+
+const normalizeAlbum = (
+  item: z.infer<typeof jfType._response.album>,
+  server: ServerListItem | null,
+  imageSize?: number,
+): Album => {
+  return {
+    albumArtists:
+      item.AlbumArtists.map((entry) => ({
+        id: entry.Id,
+        imageUrl: null,
+        name: entry.Name,
+      })) || [],
+    artists: item.ArtistItems?.map((entry) => ({ id: entry.Id, imageUrl: null, name: entry.Name })),
+    backdropImageUrl: null,
+    createdAt: item.DateCreated,
+    duration: item.RunTimeTicks / 10000,
+    genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })),
+    id: item.Id,
+    imagePlaceholderUrl: null,
+    imageUrl: getAlbumCoverArtUrl({
+      baseUrl: server?.url || '',
+      item,
+      size: imageSize || 300,
+    }),
+    isCompilation: null,
+    itemType: LibraryItem.ALBUM,
+    lastPlayedAt: null,
+    name: item.Name,
+    playCount: item.UserData?.PlayCount || 0,
+    releaseDate: item.PremiereDate?.split('T')[0] || null,
+    releaseYear: item.ProductionYear || null,
+    serverId: server?.id || '',
+    serverType: ServerType.JELLYFIN,
+    size: null,
+    songCount: item?.ChildCount || null,
+    songs: item.Songs?.map((song) => normalizeSong(song, server, '', imageSize)),
+    uniqueId: nanoid(),
+    updatedAt: item?.DateLastMediaAdded || item.DateCreated,
+    userFavorite: item.UserData?.IsFavorite || false,
+    userRating: null,
+  };
+};
+
+const normalizeAlbumArtist = (
+  item: z.infer<typeof jfType._response.albumArtist> & {
+    similarArtists?: z.infer<typeof jfType._response.albumArtistList>;
+  },
+  server: ServerListItem | null,
+  imageSize?: number,
+): AlbumArtist => {
+  const similarArtists =
+    item.similarArtists?.Items?.filter((entry) => entry.Name !== 'Various Artists').map(
+      (entry) => ({
+        id: entry.Id,
+        imageUrl: getAlbumArtistCoverArtUrl({
+          baseUrl: server?.url || '',
+          item: entry,
+          size: imageSize || 300,
+        }),
+        name: entry.Name,
+      }),
+    ) || [];
+
+  return {
+    albumCount: null,
+    backgroundImageUrl: null,
+    biography: item.Overview || null,
+    duration: item.RunTimeTicks / 10000,
+    genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })),
+    id: item.Id,
+    imageUrl: getAlbumArtistCoverArtUrl({
+      baseUrl: server?.url || '',
+      item,
+      size: imageSize || 300,
+    }),
+    itemType: LibraryItem.ALBUM_ARTIST,
+    lastPlayedAt: null,
+    name: item.Name,
+    playCount: item.UserData?.PlayCount || 0,
+    serverId: server?.id || '',
+    serverType: ServerType.JELLYFIN,
+    similarArtists,
+    songCount: null,
+    userFavorite: item.UserData?.IsFavorite || false,
+    userRating: null,
+  };
+};
+
+const normalizePlaylist = (
+  item: z.infer<typeof jfType._response.playlist>,
+  server: ServerListItem | null,
+  imageSize?: number,
+): Playlist => {
+  const imageUrl = getPlaylistCoverArtUrl({
+    baseUrl: server?.url || '',
+    item,
+    size: imageSize || 300,
+  });
+
+  const imagePlaceholderUrl = null;
+
+  return {
+    description: item.Overview || null,
+    duration: item.RunTimeTicks / 10000,
+    genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })),
+    id: item.Id,
+    imagePlaceholderUrl,
+    imageUrl: imageUrl || null,
+    itemType: LibraryItem.PLAYLIST,
+    name: item.Name,
+    owner: null,
+    ownerId: null,
+    public: null,
+    rules: null,
+    serverId: server?.id || '',
+    serverType: ServerType.JELLYFIN,
+    size: null,
+    songCount: item?.ChildCount || null,
+    sync: null,
+  };
+};
+
+const normalizeMusicFolder = (item: JFMusicFolder): MusicFolder => {
+  return {
+    id: item.Id,
+    name: item.Name,
+  };
+};
+
+// const normalizeArtist = (item: any) => {
+//   return {
+//     album: (item.album || []).map((entry: any) => normalizeAlbum(entry)),
+//     albumCount: item.AlbumCount,
+//     duration: item.RunTimeTicks / 10000000,
+//     genre: item.GenreItems && item.GenreItems.map((entry: any) => normalizeItem(entry)),
+//     id: item.Id,
+//     image: getCoverArtUrl(item),
+//     info: {
+//       biography: item.Overview,
+//       externalUrl: (item.ExternalUrls || []).map((entry: any) => normalizeItem(entry)),
+//       imageUrl: undefined,
+//       similarArtist: (item.similarArtist || []).map((entry: any) => normalizeArtist(entry)),
+//     },
+//     starred: item.UserData && item.UserData?.IsFavorite ? 'true' : undefined,
+//     title: item.Name,
+//     uniqueId: nanoid(),
+//   };
+// };
+
+const normalizeGenre = (item: JFGenre): Genre => {
+  return {
+    albumCount: undefined,
+    id: item.Id,
+    name: item.Name,
+    songCount: undefined,
+  };
+};
+
+// const normalizeFolder = (item: any) => {
+//   return {
+//     created: item.DateCreated,
+//     id: item.Id,
+//     image: getCoverArtUrl(item, 150),
+//     isDir: true,
+//     title: item.Name,
+//     type: Item.Folder,
+//     uniqueId: nanoid(),
+//   };
+// };
+
+// const normalizeScanStatus = () => {
+//   return {
+//     count: 'N/a',
+//     scanning: false,
+//   };
+// };
+
+export const jfNormalize = {
+  album: normalizeAlbum,
+  albumArtist: normalizeAlbumArtist,
+  genre: normalizeGenre,
+  musicFolder: normalizeMusicFolder,
+  playlist: normalizePlaylist,
+  song: normalizeSong,
+};

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

@@ -0,0 +1,686 @@
+import { z } from 'zod';
+
+const sortOrderValues = ['Ascending', 'Descending'] as const;
+
+const jfExternal = {
+  IMDB: 'Imdb',
+  MUSIC_BRAINZ: 'MusicBrainz',
+  THE_AUDIO_DB: 'TheAudioDb',
+  THE_MOVIE_DB: 'TheMovieDb',
+  TVDB: 'Tvdb',
+};
+
+const jfImage = {
+  BACKDROP: 'Backdrop',
+  BANNER: 'Banner',
+  BOX: 'Box',
+  CHAPTER: 'Chapter',
+  DISC: 'Disc',
+  LOGO: 'Logo',
+  PRIMARY: 'Primary',
+  THUMB: 'Thumb',
+} as const;
+
+const jfCollection = {
+  MUSIC: 'music',
+  PLAYLISTS: 'playlists',
+} as const;
+
+const error = z.object({
+  errors: z.object({
+    recursive: z.array(z.string()),
+  }),
+  status: z.number(),
+  title: z.string(),
+  traceId: z.string(),
+  type: z.string(),
+});
+
+const baseParameters = z.object({
+  AlbumArtistIds: z.string().optional(),
+  ArtistIds: z.string().optional(),
+  ContributingArtistIds: z.string().optional(),
+  EnableImageTypes: z.string().optional(),
+  EnableTotalRecordCount: z.boolean().optional(),
+  EnableUserData: z.boolean().optional(),
+  EnableUserDataTypes: z.boolean().optional(),
+  ExcludeArtistIds: z.string().optional(),
+  ExcludeItemIds: z.string().optional(),
+  ExcludeItemTypes: z.string().optional(),
+  Fields: z.string().optional(),
+  ImageTypeLimit: z.number().optional(),
+  IncludeArtists: z.boolean().optional(),
+  IncludeGenres: z.boolean().optional(),
+  IncludeItemTypes: z.string().optional(),
+  IncludeMedia: z.boolean().optional(),
+  IncludePeople: z.boolean().optional(),
+  IncludeStudios: z.boolean().optional(),
+  IsFavorite: z.boolean().optional(),
+  Limit: z.number().optional(),
+  MediaTypes: z.string().optional(),
+  NameStartsWith: z.string().optional(),
+  ParentId: z.string().optional(),
+  Recursive: z.boolean().optional(),
+  SearchTerm: z.string().optional(),
+  SortBy: z.string().optional(),
+  SortOrder: z.enum(sortOrderValues).optional(),
+  StartIndex: z.number().optional(),
+  Tags: z.string().optional(),
+  UserId: z.string().optional(),
+  Years: z.string().optional(),
+});
+
+const paginationParameters = z.object({
+  Limit: z.number().optional(),
+  SortOrder: z.enum(sortOrderValues).optional(),
+  StartIndex: z.number().optional(),
+});
+
+const pagination = z.object({
+  StartIndex: z.number(),
+  TotalRecordCount: z.number(),
+});
+
+const imageTags = z.object({
+  Logo: z.string().optional(),
+  Primary: z.string().optional(),
+});
+
+const imageBlurHashes = z.object({
+  Backdrop: z.record(z.string(), z.string()).optional(),
+  Logo: z.record(z.string(), z.string()).optional(),
+  Primary: z.record(z.string(), z.string()).optional(),
+});
+
+const userData = z.object({
+  IsFavorite: z.boolean(),
+  Key: z.string(),
+  PlayCount: z.number(),
+  PlaybackPositionTicks: z.number(),
+  Played: z.boolean(),
+});
+
+const externalUrl = z.object({
+  Name: z.string(),
+  Url: z.string(),
+});
+
+const mediaStream = z.object({
+  AspectRatio: z.string().optional(),
+  BitDepth: z.number().optional(),
+  BitRate: z.number().optional(),
+  ChannelLayout: z.string().optional(),
+  Channels: z.number().optional(),
+  Codec: z.string(),
+  CodecTimeBase: z.string(),
+  ColorSpace: z.string().optional(),
+  Comment: z.string().optional(),
+  DisplayTitle: z.string().optional(),
+  Height: z.number().optional(),
+  Index: z.number(),
+  IsDefault: z.boolean(),
+  IsExternal: z.boolean(),
+  IsForced: z.boolean(),
+  IsInterlaced: z.boolean(),
+  IsTextSubtitleStream: z.boolean(),
+  Level: z.number(),
+  PixelFormat: z.string().optional(),
+  Profile: z.string().optional(),
+  RealFrameRate: z.number().optional(),
+  RefFrames: z.number().optional(),
+  SampleRate: z.number().optional(),
+  SupportsExternalStream: z.boolean(),
+  TimeBase: z.string(),
+  Type: z.string(),
+  Width: z.number().optional(),
+});
+
+const mediaSources = z.object({
+  Bitrate: z.number(),
+  Container: z.string(),
+  DefaultAudioStreamIndex: z.number(),
+  ETag: z.string(),
+  Formats: z.array(z.any()),
+  GenPtsInput: z.boolean(),
+  Id: z.string(),
+  IgnoreDts: z.boolean(),
+  IgnoreIndex: z.boolean(),
+  IsInfiniteStream: z.boolean(),
+  IsRemote: z.boolean(),
+  MediaAttachments: z.array(z.any()),
+  MediaStreams: z.array(mediaStream),
+  Name: z.string(),
+  Path: z.string(),
+  Protocol: z.string(),
+  ReadAtNativeFramerate: z.boolean(),
+  RequiredHttpHeaders: z.any(),
+  RequiresClosing: z.boolean(),
+  RequiresLooping: z.boolean(),
+  RequiresOpening: z.boolean(),
+  RunTimeTicks: z.number(),
+  Size: z.number(),
+  SupportsDirectPlay: z.boolean(),
+  SupportsDirectStream: z.boolean(),
+  SupportsProbing: z.boolean(),
+  SupportsTranscoding: z.boolean(),
+  Type: z.string(),
+});
+
+const sessionInfo = z.object({
+  AdditionalUsers: z.array(z.any()),
+  ApplicationVersion: z.string(),
+  Capabilities: z.object({
+    PlayableMediaTypes: z.array(z.any()),
+    SupportedCommands: z.array(z.any()),
+    SupportsContentUploading: z.boolean(),
+    SupportsMediaControl: z.boolean(),
+    SupportsPersistentIdentifier: z.boolean(),
+    SupportsSync: z.boolean(),
+  }),
+  Client: z.string(),
+  DeviceId: z.string(),
+  DeviceName: z.string(),
+  HasCustomDeviceName: z.boolean(),
+  Id: z.string(),
+  IsActive: z.boolean(),
+  LastActivityDate: z.string(),
+  LastPlaybackCheckIn: z.string(),
+  NowPlayingQueue: z.array(z.any()),
+  NowPlayingQueueFullItems: z.array(z.any()),
+  PlayState: z.object({
+    CanSeek: z.boolean(),
+    IsMuted: z.boolean(),
+    IsPaused: z.boolean(),
+    RepeatMode: z.string(),
+  }),
+  PlayableMediaTypes: z.array(z.any()),
+  RemoteEndPoint: z.string(),
+  ServerId: z.string(),
+  SupportedCommands: z.array(z.any()),
+  SupportsMediaControl: z.boolean(),
+  SupportsRemoteControl: z.boolean(),
+  UserId: z.string(),
+  UserName: z.string(),
+});
+
+const configuration = z.object({
+  DisplayCollectionsView: z.boolean(),
+  DisplayMissingEpisodes: z.boolean(),
+  EnableLocalPassword: z.boolean(),
+  EnableNextEpisodeAutoPlay: z.boolean(),
+  GroupedFolders: z.array(z.any()),
+  HidePlayedInLatest: z.boolean(),
+  LatestItemsExcludes: z.array(z.any()),
+  MyMediaExcludes: z.array(z.any()),
+  OrderedViews: z.array(z.any()),
+  PlayDefaultAudioTrack: z.boolean(),
+  RememberAudioSelections: z.boolean(),
+  RememberSubtitleSelections: z.boolean(),
+  SubtitleLanguagePreference: z.string(),
+  SubtitleMode: z.string(),
+});
+
+const policy = z.object({
+  AccessSchedules: z.array(z.any()),
+  AuthenticationProviderId: z.string(),
+  BlockUnratedItems: z.array(z.any()),
+  BlockedChannels: z.array(z.any()),
+  BlockedMediaFolders: z.array(z.any()),
+  BlockedTags: z.array(z.any()),
+  EnableAllChannels: z.boolean(),
+  EnableAllDevices: z.boolean(),
+  EnableAllFolders: z.boolean(),
+  EnableAudioPlaybackTranscoding: z.boolean(),
+  EnableContentDeletion: z.boolean(),
+  EnableContentDeletionFromFolders: z.array(z.any()),
+  EnableContentDownloading: z.boolean(),
+  EnableLiveTvAccess: z.boolean(),
+  EnableLiveTvManagement: z.boolean(),
+  EnableMediaConversion: z.boolean(),
+  EnableMediaPlayback: z.boolean(),
+  EnablePlaybackRemuxing: z.boolean(),
+  EnablePublicSharing: z.boolean(),
+  EnableRemoteAccess: z.boolean(),
+  EnableRemoteControlOfOtherUsers: z.boolean(),
+  EnableSharedDeviceControl: z.boolean(),
+  EnableSyncTranscoding: z.boolean(),
+  EnableUserPreferenceAccess: z.boolean(),
+  EnableVideoPlaybackTranscoding: z.boolean(),
+  EnabledChannels: z.array(z.any()),
+  EnabledDevices: z.array(z.any()),
+  EnabledFolders: z.array(z.any()),
+  ForceRemoteSourceTranscoding: z.boolean(),
+  InvalidLoginAttemptCount: z.number(),
+  IsAdministrator: z.boolean(),
+  IsDisabled: z.boolean(),
+  IsHidden: z.boolean(),
+  LoginAttemptsBeforeLockout: z.number(),
+  MaxActiveSessions: z.number(),
+  PasswordResetProviderId: z.string(),
+  RemoteClientBitrateLimit: z.number(),
+  SyncPlayAccess: z.string(),
+});
+
+const user = z.object({
+  Configuration: configuration,
+  EnableAutoLogin: z.boolean(),
+  HasConfiguredEasyPassword: z.boolean(),
+  HasConfiguredPassword: z.boolean(),
+  HasPassword: z.boolean(),
+  Id: z.string(),
+  LastActivityDate: z.string(),
+  LastLoginDate: z.string(),
+  Name: z.string(),
+  Policy: policy,
+  ServerId: z.string(),
+});
+
+const authenticateParameters = z.object({
+  Pw: z.string(),
+  Username: z.string(),
+});
+
+const authenticate = z.object({
+  AccessToken: z.string(),
+  ServerId: z.string(),
+  SessionInfo: sessionInfo,
+  User: user,
+});
+
+const genreItem = z.object({
+  Id: z.string(),
+  Name: z.string(),
+});
+
+const genre = z.object({
+  BackdropImageTags: z.array(z.any()),
+  ChannelId: z.null(),
+  Id: z.string(),
+  ImageBlurHashes: imageBlurHashes,
+  ImageTags: imageTags,
+  LocationType: z.string(),
+  Name: z.string(),
+  ServerId: z.string(),
+  Type: z.string(),
+});
+
+const genreList = z.object({
+  Items: z.array(genre),
+});
+
+const musicFolder = z.object({
+  BackdropImageTags: z.array(z.string()),
+  ChannelId: z.null(),
+  CollectionType: z.string(),
+  Id: z.string(),
+  ImageBlurHashes: imageBlurHashes,
+  ImageTags: imageTags,
+  IsFolder: z.boolean(),
+  LocationType: z.string(),
+  Name: z.string(),
+  ServerId: z.string(),
+  Type: z.string(),
+  UserData: userData,
+});
+
+const musicFolderListParameters = z.object({
+  UserId: z.string(),
+});
+
+const musicFolderList = z.object({
+  Items: z.array(musicFolder),
+});
+
+const playlist = z.object({
+  BackdropImageTags: z.array(z.string()),
+  ChannelId: z.null(),
+  ChildCount: z.number().optional(),
+  DateCreated: z.string(),
+  GenreItems: z.array(genreItem),
+  Genres: z.array(z.string()),
+  Id: z.string(),
+  ImageBlurHashes: imageBlurHashes,
+  ImageTags: imageTags,
+  IsFolder: z.boolean(),
+  LocationType: z.string(),
+  MediaType: z.string(),
+  Name: z.string(),
+  Overview: z.string().optional(),
+  RunTimeTicks: z.number(),
+  ServerId: z.string(),
+  Type: z.string(),
+  UserData: userData,
+});
+
+const jfPlaylistListSort = {
+  ALBUM_ARTIST: 'AlbumArtist,SortName',
+  DURATION: 'Runtime',
+  NAME: 'SortName',
+  RECENTLY_ADDED: 'DateCreated,SortName',
+  SONG_COUNT: 'ChildCount',
+} as const;
+
+const playlistListParameters = paginationParameters.merge(
+  baseParameters.extend({
+    IncludeItemTypes: z.literal('Playlist'),
+    SortBy: z.nativeEnum(jfPlaylistListSort).optional(),
+  }),
+);
+
+const playlistList = pagination.extend({
+  Items: z.array(playlist),
+});
+
+const genericItem = z.object({
+  Id: z.string(),
+  Name: z.string(),
+});
+
+const song = z.object({
+  Album: z.string(),
+  AlbumArtist: z.string(),
+  AlbumArtists: z.array(genericItem),
+  AlbumId: z.string(),
+  AlbumPrimaryImageTag: z.string(),
+  ArtistItems: z.array(genericItem),
+  Artists: z.array(z.string()),
+  BackdropImageTags: z.array(z.string()),
+  ChannelId: z.null(),
+  DateCreated: z.string(),
+  ExternalUrls: z.array(externalUrl),
+  GenreItems: z.array(genericItem),
+  Genres: z.array(z.string()),
+  Id: z.string(),
+  ImageBlurHashes: imageBlurHashes,
+  ImageTags: imageTags,
+  IndexNumber: z.number(),
+  IsFolder: z.boolean(),
+  LocationType: z.string(),
+  MediaSources: z.array(mediaSources),
+  MediaType: z.string(),
+  Name: z.string(),
+  ParentIndexNumber: z.number(),
+  PlaylistItemId: z.string().optional(),
+  PremiereDate: z.string().optional(),
+  ProductionYear: z.number(),
+  RunTimeTicks: z.number(),
+  ServerId: z.string(),
+  SortName: z.string(),
+  Type: z.string(),
+  UserData: userData.optional(),
+});
+
+const albumArtist = z.object({
+  BackdropImageTags: z.array(z.string()),
+  ChannelId: z.null(),
+  DateCreated: z.string(),
+  ExternalUrls: z.array(externalUrl),
+  GenreItems: z.array(genreItem),
+  Genres: z.array(z.string()),
+  Id: z.string(),
+  ImageBlurHashes: imageBlurHashes,
+  ImageTags: imageTags,
+  LocationType: z.string(),
+  Name: z.string(),
+  Overview: z.string(),
+  RunTimeTicks: z.number(),
+  ServerId: z.string(),
+  Type: z.string(),
+  UserData: userData.optional(),
+});
+
+const albumDetailParameters = baseParameters;
+
+const album = z.object({
+  AlbumArtist: z.string(),
+  AlbumArtists: z.array(genericItem),
+  AlbumPrimaryImageTag: z.string(),
+  ArtistItems: z.array(genericItem),
+  Artists: z.array(z.string()),
+  ChannelId: z.null(),
+  ChildCount: z.number().optional(),
+  DateCreated: z.string(),
+  DateLastMediaAdded: z.string().optional(),
+  ExternalUrls: z.array(externalUrl),
+  GenreItems: z.array(genericItem),
+  Genres: z.array(z.string()),
+  Id: z.string(),
+  ImageBlurHashes: imageBlurHashes,
+  ImageTags: imageTags,
+  IsFolder: z.boolean(),
+  LocationType: z.string(),
+  Name: z.string(),
+  ParentLogoImageTag: z.string(),
+  ParentLogoItemId: z.string(),
+  PremiereDate: z.string().optional(),
+  ProductionYear: z.number(),
+  RunTimeTicks: z.number(),
+  ServerId: z.string(),
+  Songs: z.array(song).optional(), // This is not a native Jellyfin property -- this is used for combined album detail
+  Type: z.string(),
+  UserData: userData.optional(),
+});
+
+const jfAlbumListSort = {
+  ALBUM_ARTIST: 'AlbumArtist,SortName',
+  COMMUNITY_RATING: 'CommunityRating,SortName',
+  CRITIC_RATING: 'CriticRating,SortName',
+  NAME: 'SortName',
+  RANDOM: 'Random,SortName',
+  RECENTLY_ADDED: 'DateCreated,SortName',
+  RELEASE_DATE: 'ProductionYear,PremiereDate,SortName',
+} as const;
+
+const albumListParameters = paginationParameters.merge(
+  baseParameters.extend({
+    Filters: z.string().optional(),
+    GenreIds: z.string().optional(),
+    Genres: z.string().optional(),
+    IncludeItemTypes: z.literal('MusicAlbum'),
+    IsFavorite: z.boolean().optional(),
+    SearchTerm: z.string().optional(),
+    SortBy: z.nativeEnum(jfAlbumListSort).optional(),
+    Tags: z.string().optional(),
+    Years: z.string().optional(),
+  }),
+);
+
+const albumList = pagination.extend({
+  Items: z.array(album),
+});
+
+const jfAlbumArtistListSort = {
+  ALBUM: 'Album,SortName',
+  DURATION: 'Runtime,AlbumArtist,Album,SortName',
+  NAME: 'Name,SortName',
+  RANDOM: 'Random,SortName',
+  RECENTLY_ADDED: 'DateCreated,SortName',
+  RELEASE_DATE: 'PremiereDate,AlbumArtist,Album,SortName',
+} as const;
+
+const albumArtistListParameters = paginationParameters.merge(
+  baseParameters.extend({
+    Filters: z.string().optional(),
+    Genres: z.string().optional(),
+    SortBy: z.nativeEnum(jfAlbumArtistListSort).optional(),
+    Years: z.string().optional(),
+  }),
+);
+
+const albumArtistList = pagination.extend({
+  Items: z.array(albumArtist),
+});
+
+const similarArtistListParameters = baseParameters.extend({
+  Limit: z.number().optional(),
+});
+
+const jfSongListSort = {
+  ALBUM: 'Album,SortName',
+  ALBUM_ARTIST: 'AlbumArtist,Album,SortName',
+  ARTIST: 'Artist,Album,SortName',
+  COMMUNITY_RATING: 'CommunityRating,SortName',
+  DURATION: 'Runtime,AlbumArtist,Album,SortName',
+  NAME: 'Name,SortName',
+  PLAY_COUNT: 'PlayCount,SortName',
+  RANDOM: 'Random,SortName',
+  RECENTLY_ADDED: 'DateCreated,SortName',
+  RECENTLY_PLAYED: 'DatePlayed,SortName',
+  RELEASE_DATE: 'PremiereDate,AlbumArtist,Album,SortName',
+} as const;
+
+const songListParameters = paginationParameters.merge(
+  baseParameters.extend({
+    AlbumArtistIds: z.string().optional(),
+    AlbumIds: z.string().optional(),
+    ArtistIds: z.string().optional(),
+    Filters: z.string().optional(),
+    GenreIds: z.string().optional(),
+    Genres: z.string().optional(),
+    IsFavorite: z.boolean().optional(),
+    SearchTerm: z.string().optional(),
+    SortBy: z.nativeEnum(jfSongListSort).optional(),
+    Tags: z.string().optional(),
+    Years: z.string().optional(),
+  }),
+);
+
+const songList = pagination.extend({
+  Items: z.array(song),
+});
+
+const playlistSongList = songList;
+
+const topSongsList = songList;
+
+const playlistDetailParameters = baseParameters.extend({
+  Ids: z.string(),
+});
+
+const createPlaylistParameters = z.object({
+  MediaType: z.literal('Audio'),
+  Name: z.string(),
+  Overview: z.string(),
+  UserId: z.string(),
+});
+
+const createPlaylist = z.object({
+  Id: z.string(),
+});
+
+const updatePlaylist = z.null();
+
+const updatePlaylistParameters = z.object({
+  Genres: z.array(genreItem),
+  MediaType: z.literal('Audio'),
+  Name: z.string(),
+  Overview: z.string(),
+  PremiereDate: z.null(),
+  ProviderIds: z.object({}),
+  Tags: z.array(genericItem),
+  UserId: z.string(),
+});
+
+const addToPlaylist = z.object({
+  Added: z.number(),
+});
+
+const addToPlaylistParameters = z.object({
+  Ids: z.array(z.string()),
+  UserId: z.string(),
+});
+
+const removeFromPlaylist = z.null();
+
+const removeFromPlaylistParameters = z.object({
+  EntryIds: z.array(z.string()),
+});
+
+const deletePlaylist = z.null();
+
+const deletePlaylistParameters = z.object({
+  Id: z.string(),
+});
+
+const scrobbleParameters = z.object({
+  EventName: z.string().optional(),
+  IsPaused: z.boolean().optional(),
+  ItemId: z.string(),
+  PositionTicks: z.number().optional(),
+});
+
+const scrobble = z.any();
+
+const favorite = z.object({
+  IsFavorite: z.boolean(),
+  ItemId: z.string(),
+  Key: z.string(),
+  LastPlayedDate: z.string(),
+  Likes: z.boolean(),
+  PlayCount: z.number(),
+  PlaybackPositionTicks: z.number(),
+  Played: z.boolean(),
+  PlayedPercentage: z.number(),
+  Rating: z.number(),
+  UnplayedItemCount: z.number(),
+});
+
+const favoriteParameters = z.object({});
+
+const searchParameters = paginationParameters.merge(baseParameters);
+
+const search = z.any();
+
+export const jfType = {
+  _enum: {
+    collection: jfCollection,
+    external: jfExternal,
+    image: jfImage,
+  },
+  _parameters: {
+    addToPlaylist: addToPlaylistParameters,
+    albumArtistDetail: baseParameters,
+    albumArtistList: albumArtistListParameters,
+    albumDetail: albumDetailParameters,
+    albumList: albumListParameters,
+    authenticate: authenticateParameters,
+    createPlaylist: createPlaylistParameters,
+    deletePlaylist: deletePlaylistParameters,
+    favorite: favoriteParameters,
+    musicFolderList: musicFolderListParameters,
+    playlistDetail: playlistDetailParameters,
+    playlistList: playlistListParameters,
+    removeFromPlaylist: removeFromPlaylistParameters,
+    scrobble: scrobbleParameters,
+    search: searchParameters,
+    similarArtistList: similarArtistListParameters,
+    songList: songListParameters,
+    updatePlaylist: updatePlaylistParameters,
+  },
+  _response: {
+    addToPlaylist,
+    album,
+    albumArtist,
+    albumArtistList,
+    albumList,
+    authenticate,
+    createPlaylist,
+    deletePlaylist,
+    error,
+    favorite,
+    genre,
+    genreList,
+    musicFolderList,
+    playlist,
+    playlistList,
+    playlistSongList,
+    removeFromPlaylist,
+    scrobble,
+    search,
+    song,
+    songList,
+    topSongsList,
+    updatePlaylist,
+    user,
+  },
+};

src/renderer/api/navidrome.types.ts

@@ -0,0 +1,466 @@
+import { SSArtistInfo } from '/@/renderer/api/subsonic.types';
+
+export type NDAuthenticate = {
+  id: string;
+  isAdmin: boolean;
+  name: string;
+  subsonicSalt: string;
+  subsonicToken: string;
+  token: string;
+  username: string;
+};
+
+export type NDUser = {
+  createdAt: string;
+  email: string;
+  id: string;
+  isAdmin: boolean;
+  lastAccessAt: string;
+  lastLoginAt: string;
+  name: string;
+  updatedAt: string;
+  userName: string;
+};
+
+export type NDGenre = {
+  id: string;
+  name: string;
+};
+
+export type NDAlbum = {
+  albumArtist: string;
+  albumArtistId: string;
+  allArtistIds: string;
+  artist: string;
+  artistId: string;
+  compilation: boolean;
+  coverArtId?: string; // Removed after v0.48.0
+  coverArtPath?: string; // Removed after v0.48.0
+  createdAt: string;
+  duration: number;
+  fullText: string;
+  genre: string;
+  genres: NDGenre[];
+  id: string;
+  maxYear: number;
+  mbzAlbumArtistId: string;
+  mbzAlbumId: string;
+  minYear: number;
+  name: string;
+  orderAlbumArtistName: string;
+  orderAlbumName: string;
+  playCount: number;
+  playDate: string;
+  rating: number;
+  size: number;
+  songCount: number;
+  sortAlbumArtistName: string;
+  sortArtistName: string;
+  starred: boolean;
+  starredAt: string;
+  updatedAt: string;
+} & { songs?: NDSong[] };
+
+export type NDSong = {
+  album: string;
+  albumArtist: string;
+  albumArtistId: string;
+  albumId: string;
+  artist: string;
+  artistId: string;
+  bitRate: number;
+  bookmarkPosition: number;
+  bpm?: number;
+  channels?: number;
+  comment?: string;
+  compilation: boolean;
+  createdAt: string;
+  discNumber: number;
+  duration: number;
+  fullText: string;
+  genre: string;
+  genres: NDGenre[];
+  hasCoverArt: boolean;
+  id: string;
+  lyrics?: string;
+  mbzAlbumArtistId: string;
+  mbzAlbumId: string;
+  mbzArtistId: string;
+  mbzTrackId: string;
+  orderAlbumArtistName: string;
+  orderAlbumName: string;
+  orderArtistName: string;
+  orderTitle: string;
+  path: string;
+  playCount: number;
+  playDate: string;
+  rating: number;
+  size: number;
+  sortAlbumArtistName: string;
+  sortArtistName: string;
+  starred: boolean;
+  starredAt: string;
+  suffix: string;
+  title: string;
+  trackNumber: number;
+  updatedAt: string;
+  year: number;
+};
+
+export type NDAlbumArtist = {
+  albumCount: number;
+  biography: string;
+  externalInfoUpdatedAt: string;
+  externalUrl: string;
+  fullText: string;
+  genres: NDGenre[];
+  id: string;
+  largeImageUrl?: string;
+  mbzArtistId: string;
+  mediumImageUrl?: string;
+  name: string;
+  orderArtistName: string;
+  playCount: number;
+  playDate: string;
+  rating: number;
+  size: number;
+  smallImageUrl?: string;
+  songCount: number;
+  starred: boolean;
+  starredAt: string;
+} & {
+  similarArtists?: SSArtistInfo['similarArtist'];
+};
+
+export type NDAuthenticationResponse = NDAuthenticate;
+
+export type NDAlbumArtistList = {
+  items: NDAlbumArtist[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export type NDAlbumArtistDetail = NDAlbumArtist;
+
+export type NDAlbumArtistDetailResponse = NDAlbumArtist;
+
+export type NDGenreList = NDGenre[];
+
+export type NDGenreListResponse = NDGenre[];
+
+export type NDAlbumDetailResponse = NDAlbum;
+
+export type NDAlbumDetail = NDAlbum & { songs?: NDSongListResponse };
+
+export type NDAlbumListResponse = NDAlbum[];
+
+export type NDAlbumList = {
+  items: NDAlbum[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export type NDSongDetail = NDSong;
+
+export type NDSongDetailResponse = NDSong;
+
+export type NDSongListResponse = NDSong[];
+
+export type NDSongList = {
+  items: NDSong[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export type NDArtistListResponse = NDAlbumArtist[];
+
+export type NDPagination = {
+  _end?: number;
+  _start?: number;
+};
+
+export enum NDSortOrder {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
+
+export type NDOrder = {
+  _order?: NDSortOrder;
+};
+
+export enum NDGenreListSort {
+  NAME = 'name',
+}
+
+export type NDGenreListParams = {
+  _sort?: NDGenreListSort;
+  id?: string;
+} & NDPagination &
+  NDOrder;
+
+export enum NDAlbumListSort {
+  ALBUM_ARTIST = 'albumArtist',
+  ARTIST = 'artist',
+  DURATION = 'duration',
+  NAME = 'name',
+  PLAY_COUNT = 'playCount',
+  PLAY_DATE = 'play_date',
+  RANDOM = 'random',
+  RATING = 'rating',
+  RECENTLY_ADDED = 'recently_added',
+  SONG_COUNT = 'songCount',
+  STARRED = 'starred',
+  YEAR = 'max_year',
+}
+
+export type NDAlbumListParams = {
+  _sort?: NDAlbumListSort;
+  album_id?: string;
+  artist_id?: string;
+  compilation?: boolean;
+  genre_id?: string;
+  has_rating?: boolean;
+  id?: string;
+  name?: string;
+  recently_played?: boolean;
+  starred?: boolean;
+  year?: number;
+} & NDPagination &
+  NDOrder;
+
+export enum NDSongListSort {
+  ALBUM = 'album, order_album_artist_name, disc_number, track_number, title',
+  ALBUM_ARTIST = 'order_album_artist_name, album, disc_number, track_number, title',
+  ALBUM_SONGS = 'album, discNumber, trackNumber',
+  ARTIST = 'artist',
+  BPM = 'bpm',
+  CHANNELS = 'channels',
+  COMMENT = 'comment',
+  DURATION = 'duration',
+  FAVORITED = 'starred ASC, starredAt ASC',
+  GENRE = 'genre',
+  ID = 'id',
+  PLAY_COUNT = 'playCount',
+  PLAY_DATE = 'playDate',
+  RATING = 'rating',
+  RECENTLY_ADDED = 'createdAt',
+  TITLE = 'title',
+  TRACK = 'track',
+  YEAR = 'year, album, discNumber, trackNumber',
+}
+
+export type NDSongListParams = {
+  _sort?: NDSongListSort;
+  album_id?: string[];
+  artist_id?: string[];
+  genre_id?: string;
+  starred?: boolean;
+} & NDPagination &
+  NDOrder;
+
+export enum NDAlbumArtistListSort {
+  ALBUM_COUNT = 'albumCount',
+  FAVORITED = 'starred ASC, starredAt ASC',
+  NAME = 'name',
+  PLAY_COUNT = 'playCount',
+  RATING = 'rating',
+  SONG_COUNT = 'songCount',
+}
+
+export type NDAlbumArtistListParams = {
+  _sort?: NDAlbumArtistListSort;
+  genre_id?: string;
+  starred?: boolean;
+} & NDPagination &
+  NDOrder;
+
+export type NDAddToPlaylistResponse = {
+  added: number;
+};
+
+export type NDAddToPlaylistBody = {
+  ids: string[];
+};
+
+export type NDAddToPlaylist = null;
+
+export type NDRemoveFromPlaylistResponse = {
+  ids: string[];
+};
+
+export type NDRemoveFromPlaylistParams = {
+  id: string[];
+};
+
+export type NDRemoveFromPlaylist = null;
+
+export type NDCreatePlaylistParams = {
+  comment?: string;
+  name: string;
+  public?: boolean;
+  rules?: Record<string, any> | null;
+};
+
+export type NDCreatePlaylistResponse = {
+  id: string;
+};
+
+export type NDCreatePlaylist = NDCreatePlaylistResponse;
+
+export type NDUpdatePlaylistParams = Partial<NDPlaylist>;
+
+export type NDUpdatePlaylistResponse = NDPlaylist;
+
+export type NDDeletePlaylistParams = {
+  id: string;
+};
+
+export type NDDeletePlaylistResponse = null;
+
+export type NDDeletePlaylist = NDDeletePlaylistResponse;
+
+export type NDPlaylist = {
+  comment: string;
+  createdAt: string;
+  duration: number;
+  evaluatedAt: string;
+  id: string;
+  name: string;
+  ownerId: string;
+  ownerName: string;
+  path: string;
+  public: boolean;
+  rules: Record<string, any> | null;
+  size: number;
+  songCount: number;
+  sync: boolean;
+  updatedAt: string;
+};
+
+export type NDPlaylistDetail = NDPlaylist;
+
+export type NDPlaylistDetailResponse = NDPlaylist;
+
+export type NDPlaylistList = {
+  items: NDPlaylist[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export type NDPlaylistListResponse = NDPlaylist[];
+
+export enum NDPlaylistListSort {
+  DURATION = 'duration',
+  NAME = 'name',
+  OWNER = 'ownerName',
+  PUBLIC = 'public',
+  SONG_COUNT = 'songCount',
+  UPDATED_AT = 'updatedAt',
+}
+
+export type NDPlaylistListParams = {
+  _sort?: NDPlaylistListSort;
+  owner_id?: string;
+} & NDPagination &
+  NDOrder;
+
+export type NDPlaylistSong = NDSong & {
+  mediaFileId: string;
+  playlistId: string;
+};
+
+export type NDPlaylistSongListResponse = NDPlaylistSong[];
+
+export type NDPlaylistSongList = {
+  items: NDPlaylistSong[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export const NDSongQueryFields = [
+  { label: 'Album', type: 'string', value: 'album' },
+  { label: 'Album Artist', type: 'string', value: 'albumartist' },
+  { label: 'Album Comment', type: 'string', value: 'albumcomment' },
+  { label: 'Album Type', type: 'string', value: 'albumtype' },
+  { label: 'Artist', type: 'string', value: 'artist' },
+  { label: 'Bitrate', type: 'number', value: 'bitrate' },
+  { label: 'BPM', type: 'number', value: 'bpm' },
+  { label: 'Catalog Number', type: 'string', value: 'catalognumber' },
+  { label: 'Channels', type: 'number', value: 'channels' },
+  { label: 'Comment', type: 'string', value: 'comment' },
+  { label: 'Date Added', type: 'date', value: 'dateadded' },
+  { label: 'Date Favorited', type: 'date', value: 'dateloved' },
+  { label: 'Date Last Played', type: 'date', value: 'lastplayed' },
+  { label: 'Date Modified', type: 'date', value: 'datemodified' },
+  { label: 'Disc Subtitle', type: 'string', value: 'discsubtitle' },
+  { label: 'Disc Number', type: 'number', value: 'discnumber' },
+  { label: 'Duration', type: 'number', value: 'duration' },
+  { label: 'File Path', type: 'string', value: 'filepath' },
+  { label: 'File Type', type: 'string', value: 'filetype' },
+  { label: 'Genre', type: 'string', value: 'genre' },
+  { label: 'Has CoverArt', type: 'boolean', value: 'hascoverart' },
+  { label: 'Is Compilation', type: 'boolean', value: 'compilation' },
+  { label: 'Is Favorite', type: 'boolean', value: 'loved' },
+  { label: 'Lyrics', type: 'string', value: 'lyrics' },
+  { label: 'Name', type: 'string', value: 'title' },
+  { label: 'Play Count', type: 'number', value: 'playcount' },
+  { label: 'Rating', type: 'number', value: 'rating' },
+  { label: 'Size', type: 'number', value: 'size' },
+  { label: 'Sort Album', type: 'string', value: 'sortalbum' },
+  { label: 'Sort Album Artist', type: 'string', value: 'sortalbumartist' },
+  { label: 'Sort Artist', type: 'string', value: 'sortartist' },
+  { label: 'Sort Name', type: 'string', value: 'sorttitle' },
+  { label: 'Track Number', type: 'number', value: 'tracknumber' },
+  { label: 'Year', type: 'number', value: 'year' },
+];
+
+export const NDSongQueryDateOperators = [
+  { label: 'is', value: 'is' },
+  { label: 'is not', value: 'isNot' },
+  { label: 'is before', value: 'before' },
+  { label: 'is after', value: 'after' },
+  { label: 'is in the last', value: 'inTheLast' },
+  { label: 'is not in the last', value: 'notInTheLast' },
+  { label: 'is in the range', value: 'inTheRange' },
+];
+
+export const NDSongQueryStringOperators = [
+  { label: 'is', value: 'is' },
+  { label: 'is not', value: 'isNot' },
+  { label: 'contains', value: 'contains' },
+  { label: 'does not contain', value: 'notContains' },
+  { label: 'starts with', value: 'startsWith' },
+  { label: 'ends with', value: 'endsWith' },
+];
+
+export const NDSongQueryBooleanOperators = [
+  { label: 'is', value: 'is' },
+  { label: 'is not', value: 'isNot' },
+];
+
+export const NDSongQueryNumberOperators = [
+  { label: 'is', value: 'is' },
+  { label: 'is not', value: 'isNot' },
+  { label: 'contains', value: 'contains' },
+  { label: 'does not contain', value: 'notContains' },
+  { label: 'is greater than', value: 'gt' },
+  { label: 'is less than', value: 'lt' },
+  { label: 'is in the range', value: 'inTheRange' },
+];
+
+export type NDUserListParams = {
+  _sort?: NDUserListSort;
+} & NDPagination &
+  NDOrder;
+
+export type NDUserListResponse = NDUser[];
+
+export type NDUserList = {
+  items: NDUser[];
+  startIndex: number;
+  totalRecordCount: number;
+};
+
+export enum NDUserListSort {
+  NAME = 'name',
+}

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

@@ -0,0 +1,285 @@
+import { initClient, initContract } from '@ts-rest/core';
+import axios, { Method, AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import omitBy from 'lodash/omitBy';
+import qs from 'qs';
+import { ndType } from './navidrome-types';
+import { resultWithHeaders } from '/@/renderer/api/utils';
+import { toast } from '/@/renderer/components/toast/index';
+import { useAuthStore } from '/@/renderer/store';
+import { ServerListItem } from '/@/renderer/types';
+
+const c = initContract();
+
+export const contract = c.router({
+  addToPlaylist: {
+    body: ndType._parameters.addToPlaylist,
+    method: 'POST',
+    path: 'playlist/:id/tracks',
+    responses: {
+      200: resultWithHeaders(ndType._response.addToPlaylist),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  authenticate: {
+    body: ndType._parameters.authenticate,
+    method: 'POST',
+    path: 'auth/login',
+    responses: {
+      200: resultWithHeaders(ndType._response.authenticate),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  createPlaylist: {
+    body: ndType._parameters.createPlaylist,
+    method: 'POST',
+    path: 'playlist',
+    responses: {
+      200: resultWithHeaders(ndType._response.createPlaylist),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  deletePlaylist: {
+    body: null,
+    method: 'DELETE',
+    path: 'playlist/:id',
+    responses: {
+      200: resultWithHeaders(ndType._response.deletePlaylist),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getAlbumArtistDetail: {
+    method: 'GET',
+    path: 'artist/:id',
+    responses: {
+      200: resultWithHeaders(ndType._response.albumArtist),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getAlbumArtistList: {
+    method: 'GET',
+    path: 'artist',
+    query: ndType._parameters.albumArtistList,
+    responses: {
+      200: resultWithHeaders(ndType._response.albumArtistList),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getAlbumDetail: {
+    method: 'GET',
+    path: 'album/:id',
+    responses: {
+      200: resultWithHeaders(ndType._response.album),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getAlbumList: {
+    method: 'GET',
+    path: 'album',
+    query: ndType._parameters.albumList,
+    responses: {
+      200: resultWithHeaders(ndType._response.albumList),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getGenreList: {
+    method: 'GET',
+    path: 'genre',
+    responses: {
+      200: resultWithHeaders(ndType._response.genreList),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getPlaylistDetail: {
+    method: 'GET',
+    path: 'playlist/:id',
+    responses: {
+      200: resultWithHeaders(ndType._response.playlist),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getPlaylistList: {
+    method: 'GET',
+    path: 'playlist',
+    query: ndType._parameters.playlistList,
+    responses: {
+      200: resultWithHeaders(ndType._response.playlistList),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getPlaylistSongList: {
+    method: 'GET',
+    path: 'playlist/:id/tracks',
+    query: ndType._parameters.songList,
+    responses: {
+      200: resultWithHeaders(ndType._response.playlistSongList),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getSongDetail: {
+    method: 'GET',
+    path: 'song/:id',
+    responses: {
+      200: resultWithHeaders(ndType._response.song),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getSongList: {
+    method: 'GET',
+    path: 'song',
+    query: ndType._parameters.songList,
+    responses: {
+      200: resultWithHeaders(ndType._response.songList),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  getUserList: {
+    method: 'GET',
+    path: 'user',
+    query: ndType._parameters.userList,
+    responses: {
+      200: resultWithHeaders(ndType._response.userList),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  removeFromPlaylist: {
+    body: null,
+    method: 'DELETE',
+    path: 'playlist/:id/tracks',
+    query: ndType._parameters.removeFromPlaylist,
+    responses: {
+      200: resultWithHeaders(ndType._response.removeFromPlaylist),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+  updatePlaylist: {
+    body: ndType._parameters.updatePlaylist,
+    method: 'PUT',
+    path: 'playlist/:id',
+    responses: {
+      200: resultWithHeaders(ndType._response.updatePlaylist),
+      500: resultWithHeaders(ndType._response.error),
+    },
+  },
+});
+
+const axiosClient = axios.create({});
+
+axiosClient.defaults.paramsSerializer = (params) => {
+  return qs.stringify(params, { arrayFormat: 'repeat' });
+};
+
+axiosClient.interceptors.response.use(
+  (response) => {
+    const serverId = useAuthStore.getState().currentServer?.id;
+
+    if (serverId) {
+      useAuthStore.getState().actions.updateServer(serverId, {
+        ndCredential: response.headers['x-nd-authorization'] as string,
+      });
+    }
+
+    return response;
+  },
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      toast.error({
+        message: 'Your session has expired.',
+      });
+
+      const currentServer = useAuthStore.getState().currentServer;
+
+      if (currentServer) {
+        const serverId = currentServer.id;
+        const token = currentServer.ndCredential;
+        console.log(`token is expired: ${token}`);
+        useAuthStore.getState().actions.updateServer(serverId, { ndCredential: undefined });
+        useAuthStore.getState().actions.setCurrentServer(null);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+const parsePath = (fullPath: string) => {
+  const [path, params] = fullPath.split('?');
+
+  const parsedParams = qs.parse(params);
+
+  // Convert indexed object to array
+  const newParams: Record<string, any> = {};
+  Object.keys(parsedParams).forEach((key) => {
+    const isIndexedArrayObject =
+      typeof parsedParams[key] === 'object' && Object.keys(parsedParams[key] || {}).includes('0');
+
+    if (!isIndexedArrayObject) {
+      newParams[key] = parsedParams[key];
+    } else {
+      newParams[key] = Object.values(parsedParams[key] || {});
+    }
+  });
+
+  const notNilParams = omitBy(newParams, (value) => value === 'undefined' || value === 'null');
+
+  return {
+    params: notNilParams,
+    path,
+  };
+};
+
+export const ndApiClient = (args: {
+  server: ServerListItem | null;
+  signal?: AbortSignal;
+  url?: string;
+}) => {
+  const { server, url, signal } = args;
+
+  return initClient(contract, {
+    api: async ({ path, method, headers, body }) => {
+      let baseUrl: string | undefined;
+      let token: string | undefined;
+
+      const { params, path: api } = parsePath(path);
+
+      if (server) {
+        baseUrl = `${server?.url}/api`;
+        token = server?.ndCredential;
+      } else {
+        baseUrl = url;
+      }
+
+      try {
+        const result = await axiosClient.request({
+          data: body,
+          headers: {
+            ...headers,
+            ...(token && { 'x-nd-authorization': `Bearer ${token}` }),
+          },
+          method: method as Method,
+          params,
+          signal,
+          url: `${baseUrl}/${api}`,
+        });
+        return {
+          body: { data: result.data, headers: result.headers },
+          status: result.status,
+        };
+      } catch (e: Error | AxiosError | any) {
+        if (isAxiosError(e)) {
+          const error = e as AxiosError;
+          const response = error.response as AxiosResponse;
+          return {
+            body: { data: response.data, headers: response.headers },
+            status: response.status,
+          };
+        }
+        throw e;
+      }
+    },
+    baseHeaders: {
+      'Content-Type': 'application/json',
+    },
+    baseUrl: '',
+    jsonQuery: false,
+  });
+};

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

@@ -0,0 +1,463 @@
+import {
+  AlbumArtistDetailArgs,
+  AlbumArtistDetailResponse,
+  AddToPlaylistArgs,
+  AddToPlaylistResponse,
+  CreatePlaylistResponse,
+  CreatePlaylistArgs,
+  DeletePlaylistArgs,
+  DeletePlaylistResponse,
+  AlbumArtistListResponse,
+  AlbumArtistListArgs,
+  albumArtistListSortMap,
+  sortOrderMap,
+  AuthenticationResponse,
+  UserListResponse,
+  UserListArgs,
+  userListSortMap,
+  GenreListArgs,
+  GenreListResponse,
+  AlbumDetailResponse,
+  AlbumDetailArgs,
+  AlbumListArgs,
+  albumListSortMap,
+  AlbumListResponse,
+  SongListResponse,
+  SongListArgs,
+  songListSortMap,
+  SongDetailResponse,
+  SongDetailArgs,
+  UpdatePlaylistArgs,
+  UpdatePlaylistResponse,
+  PlaylistListResponse,
+  PlaylistDetailArgs,
+  PlaylistListArgs,
+  playlistListSortMap,
+  PlaylistDetailResponse,
+  PlaylistSongListArgs,
+  PlaylistSongListResponse,
+  RemoveFromPlaylistResponse,
+  RemoveFromPlaylistArgs,
+} from '../types';
+import { ndApiClient } from '/@/renderer/api/navidrome/navidrome-api';
+import { ndNormalize } from '/@/renderer/api/navidrome/navidrome-normalize';
+import { ndType } from '/@/renderer/api/navidrome/navidrome-types';
+import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
+
+const authenticate = async (
+  url: string,
+  body: { password: string; username: string },
+): Promise<AuthenticationResponse> => {
+  const cleanServerUrl = url.replace(/\/$/, '');
+
+  const res = await ndApiClient({ server: null, url: cleanServerUrl }).authenticate({
+    body: {
+      password: body.password,
+      username: body.username,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to authenticate');
+  }
+
+  return {
+    credential: `u=${body.username}&s=${res.body.data.subsonicSalt}&t=${res.body.data.subsonicToken}`,
+    ndCredential: res.body.data.token,
+    userId: res.body.data.id,
+    username: res.body.data.username,
+  };
+};
+
+const getUserList = async (args: UserListArgs): Promise<UserListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getUserList({
+    query: {
+      _end: query.startIndex + (query.limit || 0),
+      _order: sortOrderMap.navidrome[query.sortOrder],
+      _sort: userListSortMap.navidrome[query.sortBy],
+      _start: query.startIndex,
+      ...query._custom?.navidrome,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get user list');
+  }
+
+  return {
+    items: res.body.data.map((user) => ndNormalize.user(user)),
+    startIndex: query?.startIndex || 0,
+    totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
+  };
+};
+
+const getGenreList = async (args: GenreListArgs): Promise<GenreListResponse> => {
+  const { apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getGenreList({});
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get genre list');
+  }
+
+  return {
+    items: res.body.data,
+    startIndex: 0,
+    totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
+  };
+};
+
+const getAlbumArtistDetail = async (
+  args: AlbumArtistDetailArgs,
+): Promise<AlbumArtistDetailResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getAlbumArtistDetail({
+    params: {
+      id: query.id,
+    },
+  });
+
+  const artistInfoRes = await ssApiClient(apiClientProps).getArtistInfo({
+    query: {
+      count: 10,
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get album artist detail');
+  }
+
+  if (!apiClientProps.server) {
+    throw new Error('Server is required');
+  }
+
+  return ndNormalize.albumArtist(
+    {
+      ...res.body.data,
+      ...(artistInfoRes.status === 200 && {
+        similarArtists: artistInfoRes.body.artistInfo.similarArtist,
+      }),
+    },
+    apiClientProps.server,
+  );
+};
+
+const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<AlbumArtistListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getAlbumArtistList({
+    query: {
+      _end: query.startIndex + (query.limit || 0),
+      _order: sortOrderMap.navidrome[query.sortOrder],
+      _sort: albumArtistListSortMap.navidrome[query.sortBy],
+      _start: query.startIndex,
+      name: query.searchTerm,
+      ...query._custom?.navidrome,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get album artist list');
+  }
+
+  return {
+    items: res.body.data.map((albumArtist) =>
+      ndNormalize.albumArtist(albumArtist, apiClientProps.server),
+    ),
+    startIndex: query.startIndex,
+    totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
+  };
+};
+
+const getAlbumDetail = async (args: AlbumDetailArgs): Promise<AlbumDetailResponse> => {
+  const { query, apiClientProps } = args;
+
+  const albumRes = await ndApiClient(apiClientProps).getAlbumDetail({
+    params: {
+      id: query.id,
+    },
+  });
+
+  const songsData = await ndApiClient(apiClientProps).getSongList({
+    query: {
+      _end: 0,
+      _order: 'ASC',
+      _sort: 'album',
+      _start: 0,
+      album_id: [query.id],
+    },
+  });
+
+  if (albumRes.status !== 200 || songsData.status !== 200) {
+    throw new Error('Failed to get album detail');
+  }
+
+  return ndNormalize.album(
+    { ...albumRes.body.data, songs: songsData.body.data },
+    apiClientProps.server,
+  );
+};
+
+const getAlbumList = async (args: AlbumListArgs): Promise<AlbumListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getAlbumList({
+    query: {
+      _end: query.startIndex + (query.limit || 0),
+      _order: sortOrderMap.navidrome[query.sortOrder],
+      _sort: albumListSortMap.navidrome[query.sortBy],
+      _start: query.startIndex,
+      artist_id: query.artistIds?.[0],
+      name: query.searchTerm,
+      ...query._custom?.navidrome,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get album list');
+  }
+
+  return {
+    items: res.body.data.map((album) => ndNormalize.album(album, apiClientProps.server)),
+    startIndex: query?.startIndex || 0,
+    totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
+  };
+};
+
+const getSongList = async (args: SongListArgs): Promise<SongListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getSongList({
+    query: {
+      _end: query.startIndex + (query.limit || -1),
+      _order: sortOrderMap.navidrome[query.sortOrder],
+      _sort: songListSortMap.navidrome[query.sortBy],
+      _start: query.startIndex,
+      album_artist_id: query.artistIds,
+      album_id: query.albumIds,
+      title: query.searchTerm,
+      ...query._custom?.navidrome,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get song list');
+  }
+
+  return {
+    items: res.body.data.map((song) => ndNormalize.song(song, apiClientProps.server, '')),
+    startIndex: query?.startIndex || 0,
+    totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
+  };
+};
+
+const getSongDetail = async (args: SongDetailArgs): Promise<SongDetailResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getSongDetail({
+    params: {
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get song detail');
+  }
+
+  return ndNormalize.song(res.body.data, apiClientProps.server, '');
+};
+
+const createPlaylist = async (args: CreatePlaylistArgs): Promise<CreatePlaylistResponse> => {
+  const { body, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).createPlaylist({
+    body: {
+      comment: body.comment,
+      name: body.name,
+      public: body._custom?.navidrome?.public,
+      rules: body._custom?.navidrome?.rules,
+      sync: body._custom?.navidrome?.sync,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to create playlist');
+  }
+
+  return {
+    id: res.body.data.id,
+  };
+};
+
+const updatePlaylist = async (args: UpdatePlaylistArgs): Promise<UpdatePlaylistResponse> => {
+  const { query, body, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).updatePlaylist({
+    body: {
+      comment: body.comment || '',
+      name: body.name,
+      public: body._custom?.navidrome?.public || false,
+      rules: body._custom?.navidrome?.rules ? body._custom.navidrome.rules : undefined,
+      sync: body._custom?.navidrome?.sync || undefined,
+    },
+    params: {
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to update playlist');
+  }
+
+  return null;
+};
+
+const deletePlaylist = async (args: DeletePlaylistArgs): Promise<DeletePlaylistResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).deletePlaylist({
+    body: null,
+    params: {
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to delete playlist');
+  }
+
+  return null;
+};
+
+const getPlaylistList = async (args: PlaylistListArgs): Promise<PlaylistListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getPlaylistList({
+    query: {
+      _end: query.startIndex + (query.limit || 0),
+      _order: sortOrderMap.navidrome[query.sortOrder],
+      _sort: query.sortBy ? playlistListSortMap.navidrome[query.sortBy] : undefined,
+      _start: query.startIndex,
+      ...query._custom?.navidrome,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get playlist list');
+  }
+
+  return {
+    items: res.body.data.map((item) => ndNormalize.playlist(item, apiClientProps.server)),
+    startIndex: query?.startIndex || 0,
+    totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
+  };
+};
+
+const getPlaylistDetail = async (args: PlaylistDetailArgs): Promise<PlaylistDetailResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getPlaylistDetail({
+    params: {
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get playlist detail');
+  }
+
+  return ndNormalize.playlist(res.body.data, apiClientProps.server);
+};
+
+const getPlaylistSongList = async (
+  args: PlaylistSongListArgs,
+): Promise<PlaylistSongListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).getPlaylistSongList({
+    params: {
+      id: query.id,
+    },
+    query: {
+      _end: query.startIndex + (query.limit || 0),
+      _order: query.sortOrder ? sortOrderMap.navidrome[query.sortOrder] : 'ASC',
+      _sort: query.sortBy ? songListSortMap.navidrome[query.sortBy] : ndType._enum.songList.ID,
+      _start: query.startIndex,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get playlist song list');
+  }
+
+  return {
+    items: res.body.data.map((item) => ndNormalize.song(item, apiClientProps.server, '')),
+    startIndex: query?.startIndex || 0,
+    totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
+  };
+};
+
+const addToPlaylist = async (args: AddToPlaylistArgs): Promise<AddToPlaylistResponse> => {
+  const { body, query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).addToPlaylist({
+    body: {
+      ids: body.songId,
+    },
+    params: {
+      id: query.id,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to add to playlist');
+  }
+
+  return null;
+};
+
+const removeFromPlaylist = async (
+  args: RemoveFromPlaylistArgs,
+): Promise<RemoveFromPlaylistResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ndApiClient(apiClientProps).removeFromPlaylist({
+    body: null,
+    params: {
+      id: query.id,
+    },
+    query: {
+      id: query.songId,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to remove from playlist');
+  }
+
+  return null;
+};
+
+export const ndController = {
+  addToPlaylist,
+  authenticate,
+  createPlaylist,
+  deletePlaylist,
+  getAlbumArtistDetail,
+  getAlbumArtistList,
+  getAlbumDetail,
+  getAlbumList,
+  getGenreList,
+  getPlaylistDetail,
+  getPlaylistList,
+  getPlaylistSongList,
+  getSongDetail,
+  getSongList,
+  getUserList,
+  removeFromPlaylist,
+  updatePlaylist,
+};

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

@@ -0,0 +1,230 @@
+import { nanoid } from 'nanoid';
+import { Song, LibraryItem, Album, Playlist, User, AlbumArtist } from '/@/renderer/api/types';
+import { ServerListItem, ServerType } from '/@/renderer/types';
+import z from 'zod';
+import { ndType } from './navidrome-types';
+import { ssType } from '/@/renderer/api/subsonic/subsonic-types';
+
+const getCoverArtUrl = (args: {
+  baseUrl: string | undefined;
+  coverArtId: string;
+  credential: string | undefined;
+  size: number;
+}) => {
+  const size = args.size ? args.size : 250;
+
+  if (!args.coverArtId || args.coverArtId.match('2a96cbd8b46e442fc41c2b86b821562f')) {
+    return null;
+  }
+
+  return (
+    `${args.baseUrl}/rest/getCoverArt.view` +
+    `?id=${args.coverArtId}` +
+    `&${args.credential}` +
+    '&v=1.13.0' +
+    '&c=feishin' +
+    `&size=${size}`
+  );
+};
+
+const normalizeSong = (
+  item: z.infer<typeof ndType._response.song> | z.infer<typeof ndType._response.playlistSong>,
+  server: ServerListItem | null,
+  deviceId: string,
+  imageSize?: number,
+): Song => {
+  let id;
+  let playlistItemId;
+
+  // Dynamically determine the id field based on whether or not the item is a playlist song
+  if ('mediaFileId' in item) {
+    id = item.mediaFileId;
+    playlistItemId = item.id;
+  } else {
+    id = item.id;
+  }
+
+  const imageUrl = getCoverArtUrl({
+    baseUrl: server?.url,
+    coverArtId: id,
+    credential: server?.credential,
+    size: imageSize || 100,
+  });
+
+  const imagePlaceholderUrl = null;
+
+  return {
+    album: item.album,
+    albumArtists: [{ id: item.artistId, imageUrl: null, name: item.artist }],
+    albumId: item.albumId,
+    artistName: item.artist,
+    artists: [{ id: item.artistId, imageUrl: null, name: item.artist }],
+    bitRate: item.bitRate,
+    bpm: item.bpm ? item.bpm : null,
+    channels: item.channels ? item.channels : null,
+    comment: item.comment ? item.comment : null,
+    compilation: item.compilation,
+    container: item.suffix,
+    createdAt: item.createdAt.split('T')[0],
+    discNumber: item.discNumber,
+    duration: item.duration,
+    genres: item.genres,
+    id,
+    imagePlaceholderUrl,
+    imageUrl,
+    itemType: LibraryItem.SONG,
+    lastPlayedAt: item.playDate.includes('0001-') ? null : item.playDate,
+    name: item.title,
+    path: item.path,
+    playCount: item.playCount,
+    playlistItemId,
+    releaseDate: new Date(item.year, 0, 1).toISOString(),
+    releaseYear: String(item.year),
+    serverId: server?.id || 'unknown',
+    serverType: ServerType.NAVIDROME,
+    size: item.size,
+    streamUrl: `${server?.url}/rest/stream.view?id=${id}&v=1.13.0&c=feishin_${deviceId}&${server?.credential}`,
+    trackNumber: item.trackNumber,
+    uniqueId: nanoid(),
+    updatedAt: item.updatedAt,
+    userFavorite: item.starred || false,
+    userRating: item.rating || null,
+  };
+};
+
+const normalizeAlbum = (
+  item: z.infer<typeof ndType._response.album> & {
+    songs?: z.infer<typeof ndType._response.songList>;
+  },
+  server: ServerListItem | null,
+  imageSize?: number,
+): Album => {
+  const imageUrl = getCoverArtUrl({
+    baseUrl: server?.url,
+    coverArtId: item.coverArtId || item.id,
+    credential: server?.credential,
+    size: imageSize || 300,
+  });
+
+  const imagePlaceholderUrl = null;
+
+  const imageBackdropUrl = imageUrl?.replace(/size=\d+/, 'size=1000') || null;
+
+  return {
+    albumArtists: [{ id: item.albumArtistId, imageUrl: null, name: item.albumArtist }],
+    artists: [{ id: item.artistId, imageUrl: null, name: item.artist }],
+    backdropImageUrl: imageBackdropUrl,
+    createdAt: item.createdAt.split('T')[0],
+    duration: item.duration * 1000 || null,
+    genres: item.genres,
+    id: item.id,
+    imagePlaceholderUrl,
+    imageUrl,
+    isCompilation: item.compilation,
+    itemType: LibraryItem.ALBUM,
+    lastPlayedAt: item.playDate.includes('0001-') ? null : item.playDate,
+    name: item.name,
+    playCount: item.playCount,
+    releaseDate: new Date(item.minYear, 0, 1).toISOString(),
+    releaseYear: item.minYear,
+    serverId: server?.id || 'unknown',
+    serverType: ServerType.NAVIDROME,
+    size: item.size,
+    songCount: item.songCount,
+    songs: item.songs ? item.songs.map((song) => normalizeSong(song, server, '')) : undefined,
+    uniqueId: nanoid(),
+    updatedAt: item.updatedAt,
+    userFavorite: item.starred,
+    userRating: item.rating || null,
+  };
+};
+
+const normalizeAlbumArtist = (
+  item: z.infer<typeof ndType._response.albumArtist> & {
+    similarArtists?: z.infer<typeof ssType._response.artistInfo>['artistInfo']['similarArtist'];
+  },
+  server: ServerListItem | null,
+): AlbumArtist => {
+  const imageUrl =
+    item.largeImageUrl === '/app/artist-placeholder.webp' ? null : item.largeImageUrl;
+
+  return {
+    albumCount: item.albumCount,
+    backgroundImageUrl: null,
+    biography: item.biography || null,
+    duration: null,
+    genres: item.genres,
+    id: item.id,
+    imageUrl: imageUrl || null,
+    itemType: LibraryItem.ALBUM_ARTIST,
+    lastPlayedAt: item.playDate.includes('0001-') ? null : item.playDate,
+    name: item.name,
+    playCount: item.playCount,
+    serverId: server?.id || 'unknown',
+    serverType: ServerType.NAVIDROME,
+    similarArtists:
+      item.similarArtists?.map((artist) => ({
+        id: artist.id,
+        imageUrl: artist?.artistImageUrl || null,
+        name: artist.name,
+      })) || null,
+    songCount: item.songCount,
+    userFavorite: item.starred,
+    userRating: item.rating,
+  };
+};
+
+const normalizePlaylist = (
+  item: z.infer<typeof ndType._response.playlist>,
+  server: ServerListItem | null,
+  imageSize?: number,
+): Playlist => {
+  const imageUrl = getCoverArtUrl({
+    baseUrl: server?.url,
+    coverArtId: item.id,
+    credential: server?.credential,
+    size: imageSize || 300,
+  });
+
+  const imagePlaceholderUrl = null;
+
+  return {
+    description: item.comment,
+    duration: item.duration * 1000,
+    genres: [],
+    id: item.id,
+    imagePlaceholderUrl,
+    imageUrl,
+    itemType: LibraryItem.PLAYLIST,
+    name: item.name,
+    owner: item.ownerName,
+    ownerId: item.ownerId,
+    public: item.public,
+    rules: item?.rules || null,
+    serverId: server?.id || 'unknown',
+    serverType: ServerType.NAVIDROME,
+    size: item.size,
+    songCount: item.songCount,
+    sync: item.sync,
+  };
+};
+
+const normalizeUser = (item: z.infer<typeof ndType._response.user>): User => {
+  return {
+    createdAt: item.createdAt,
+    email: item.email || null,
+    id: item.id,
+    isAdmin: item.isAdmin,
+    lastLoginAt: item.lastLoginAt,
+    name: item.userName,
+    updatedAt: item.updatedAt,
+  };
+};
+
+export const ndNormalize = {
+  album: normalizeAlbum,
+  albumArtist: normalizeAlbumArtist,
+  playlist: normalizePlaylist,
+  song: normalizeSong,
+  user: normalizeUser,
+};

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

@@ -0,0 +1,363 @@
+import { z } from 'zod';
+
+const sortOrderValues = ['ASC', 'DESC'] as const;
+
+const error = z.string();
+
+const paginationParameters = z.object({
+  _end: z.number().optional(),
+  _order: z.enum(sortOrderValues),
+  _start: z.number().optional(),
+});
+
+const authenticate = z.object({
+  id: z.string(),
+  isAdmin: z.boolean(),
+  name: z.string(),
+  subsonicSalt: z.string(),
+  subsonicToken: z.string(),
+  token: z.string(),
+  username: z.string(),
+});
+
+const authenticateParameters = z.object({
+  password: z.string(),
+  username: z.string(),
+});
+
+const user = z.object({
+  createdAt: z.string(),
+  email: z.string().optional(),
+  id: z.string(),
+  isAdmin: z.boolean(),
+  lastAccessAt: z.string(),
+  lastLoginAt: z.string(),
+  name: z.string(),
+  updatedAt: z.string(),
+  userName: z.string(),
+});
+
+const userList = z.array(user);
+
+const ndUserListSort = {
+  NAME: 'name',
+} as const;
+
+const userListParameters = paginationParameters.extend({
+  _sort: z.nativeEnum(ndUserListSort).optional(),
+});
+
+const genre = z.object({
+  id: z.string(),
+  name: z.string(),
+});
+
+const genreList = z.array(genre);
+
+const albumArtist = z.object({
+  albumCount: z.number(),
+  biography: z.string(),
+  externalInfoUpdatedAt: z.string(),
+  externalUrl: z.string(),
+  fullText: z.string(),
+  genres: z.array(genre),
+  id: z.string(),
+  largeImageUrl: z.string().optional(),
+  mbzArtistId: z.string().optional(),
+  mediumImageUrl: z.string().optional(),
+  name: z.string(),
+  orderArtistName: z.string(),
+  playCount: z.number(),
+  playDate: z.string(),
+  rating: z.number(),
+  size: z.number(),
+  smallImageUrl: z.string().optional(),
+  songCount: z.number(),
+  starred: z.boolean(),
+  starredAt: z.string(),
+});
+
+const albumArtistList = z.array(albumArtist);
+
+const ndAlbumArtistListSort = {
+  ALBUM_COUNT: 'albumCount',
+  FAVORITED: 'starred ASC, starredAt ASC',
+  NAME: 'name',
+  PLAY_COUNT: 'playCount',
+  RATING: 'rating',
+  SONG_COUNT: 'songCount',
+} as const;
+
+const albumArtistListParameters = paginationParameters.extend({
+  _sort: z.nativeEnum(ndAlbumArtistListSort).optional(),
+  genre_id: z.string().optional(),
+  name: z.string().optional(),
+  starred: z.boolean().optional(),
+});
+
+const album = z.object({
+  albumArtist: z.string(),
+  albumArtistId: z.string(),
+  allArtistIds: z.string(),
+  artist: z.string(),
+  artistId: z.string(),
+  compilation: z.boolean(),
+  coverArtId: z.string().optional(), // Removed after v0.48.0
+  coverArtPath: z.string().optional(), // Removed after v0.48.0
+  createdAt: z.string(),
+  duration: z.number(),
+  fullText: z.string(),
+  genre: z.string(),
+  genres: z.array(genre),
+  id: z.string(),
+  maxYear: z.number(),
+  mbzAlbumArtistId: z.string().optional(),
+  mbzAlbumId: z.string().optional(),
+  minYear: z.number(),
+  name: z.string(),
+  orderAlbumArtistName: z.string(),
+  orderAlbumName: z.string(),
+  playCount: z.number(),
+  playDate: z.string(),
+  rating: z.number().optional(),
+  size: z.number(),
+  songCount: z.number(),
+  sortAlbumArtistName: z.string(),
+  sortArtistName: z.string(),
+  starred: z.boolean(),
+  starredAt: z.string().optional(),
+  updatedAt: z.string(),
+});
+
+const albumList = z.array(album);
+
+const ndAlbumListSort = {
+  ALBUM_ARTIST: 'albumArtist',
+  ARTIST: 'artist',
+  DURATION: 'duration',
+  NAME: 'name',
+  PLAY_COUNT: 'playCount',
+  PLAY_DATE: 'play_date',
+  RANDOM: 'random',
+  RATING: 'rating',
+  RECENTLY_ADDED: 'recently_added',
+  SONG_COUNT: 'songCount',
+  STARRED: 'starred',
+  YEAR: 'max_year',
+} as const;
+
+const albumListParameters = paginationParameters.extend({
+  _sort: z.nativeEnum(ndAlbumListSort).optional(),
+  album_id: z.string().optional(),
+  artist_id: z.string().optional(),
+  compilation: z.boolean().optional(),
+  genre_id: z.string().optional(),
+  has_rating: z.boolean().optional(),
+  id: z.string().optional(),
+  name: z.string().optional(),
+  recently_added: z.boolean().optional(),
+  recently_played: z.boolean().optional(),
+  starred: z.boolean().optional(),
+  year: z.number().optional(),
+});
+
+const song = z.object({
+  album: z.string(),
+  albumArtist: z.string(),
+  albumArtistId: z.string(),
+  albumId: z.string(),
+  artist: z.string(),
+  artistId: z.string(),
+  bitRate: z.number(),
+  bookmarkPosition: z.number(),
+  bpm: z.number().optional(),
+  channels: z.number().optional(),
+  comment: z.string().optional(),
+  compilation: z.boolean(),
+  createdAt: z.string(),
+  discNumber: z.number(),
+  duration: z.number(),
+  fullText: z.string(),
+  genre: z.string(),
+  genres: z.array(genre),
+  hasCoverArt: z.boolean(),
+  id: z.string(),
+  lyrics: z.string().optional(),
+  mbzAlbumArtistId: z.string().optional(),
+  mbzAlbumId: z.string().optional(),
+  mbzArtistId: z.string().optional(),
+  mbzTrackId: z.string().optional(),
+  orderAlbumArtistName: z.string(),
+  orderAlbumName: z.string(),
+  orderArtistName: z.string(),
+  orderTitle: z.string(),
+  path: z.string(),
+  playCount: z.number(),
+  playDate: z.string(),
+  rating: z.number().optional(),
+  size: z.number(),
+  sortAlbumArtistName: z.string(),
+  sortArtistName: z.string(),
+  starred: z.boolean(),
+  starredAt: z.string().optional(),
+  suffix: z.string(),
+  title: z.string(),
+  trackNumber: z.number(),
+  updatedAt: z.string(),
+  year: z.number(),
+});
+
+const songList = z.array(song);
+
+const ndSongListSort = {
+  ALBUM: 'album, order_album_artist_name, disc_number, track_number, title',
+  ALBUM_ARTIST: 'order_album_artist_name, album, disc_number, track_number, title',
+  ALBUM_SONGS: 'album, discNumber, trackNumber',
+  ARTIST: 'artist',
+  BPM: 'bpm',
+  CHANNELS: 'channels',
+  COMMENT: 'comment',
+  DURATION: 'duration',
+  FAVORITED: 'starred ASC, starredAt ASC',
+  GENRE: 'genre',
+  ID: 'id',
+  PLAY_COUNT: 'playCount',
+  PLAY_DATE: 'playDate',
+  RATING: 'rating',
+  RECENTLY_ADDED: 'createdAt',
+  TITLE: 'title',
+  TRACK: 'track',
+  YEAR: 'year, album, discNumber, trackNumber',
+};
+
+const songListParameters = paginationParameters.extend({
+  _sort: z.nativeEnum(ndSongListSort).optional(),
+  album_artist_id: z.array(z.string()).optional(),
+  album_id: z.array(z.string()).optional(),
+  artist_id: z.array(z.string()).optional(),
+  genre_id: z.string().optional(),
+  starred: z.boolean().optional(),
+  title: z.string().optional(),
+  year: z.number().optional(),
+});
+
+const playlist = z.object({
+  comment: z.string(),
+  createdAt: z.string(),
+  duration: z.number(),
+  evaluatedAt: z.string(),
+  id: z.string(),
+  name: z.string(),
+  ownerId: z.string(),
+  ownerName: z.string(),
+  path: z.string(),
+  public: z.boolean(),
+  rules: z.record(z.string(), z.any()),
+  size: z.number(),
+  songCount: z.number(),
+  sync: z.boolean(),
+  updatedAt: z.string(),
+});
+
+const playlistList = z.array(playlist);
+
+const ndPlaylistListSort = {
+  DURATION: 'duration',
+  NAME: 'name',
+  OWNER: 'ownerName',
+  PUBLIC: 'public',
+  SONG_COUNT: 'songCount',
+  UPDATED_AT: 'updatedAt',
+} as const;
+
+const playlistListParameters = paginationParameters.extend({
+  _sort: z.nativeEnum(ndPlaylistListSort).optional(),
+  owner_id: z.string().optional(),
+  smart: z.boolean().optional(),
+});
+
+const playlistSong = song.extend({
+  mediaFileId: z.string(),
+  playlistId: z.string(),
+});
+
+const playlistSongList = z.array(playlistSong);
+
+const createPlaylist = playlist.pick({
+  id: true,
+});
+
+const createPlaylistParameters = z.object({
+  comment: z.string().optional(),
+  name: z.string(),
+  public: z.boolean().optional(),
+  rules: z.record(z.any()).optional(),
+  sync: z.boolean().optional(),
+});
+
+const updatePlaylist = playlist;
+
+const updatePlaylistParameters = createPlaylistParameters.partial();
+
+const deletePlaylist = z.null();
+
+const addToPlaylist = z.object({
+  added: z.number(),
+});
+
+const addToPlaylistParameters = z.object({
+  ids: z.array(z.string()),
+});
+
+const removeFromPlaylist = z.object({
+  ids: z.array(z.string()),
+});
+
+const removeFromPlaylistParameters = z.object({
+  id: z.array(z.string()),
+});
+
+export const ndType = {
+  _enum: {
+    albumArtistList: ndAlbumArtistListSort,
+    albumList: ndAlbumListSort,
+    playlistList: ndPlaylistListSort,
+    songList: ndSongListSort,
+    userList: ndUserListSort,
+  },
+  _parameters: {
+    addToPlaylist: addToPlaylistParameters,
+    albumArtistList: albumArtistListParameters,
+    albumList: albumListParameters,
+    authenticate: authenticateParameters,
+    createPlaylist: createPlaylistParameters,
+    playlistList: playlistListParameters,
+    removeFromPlaylist: removeFromPlaylistParameters,
+    songList: songListParameters,
+    updatePlaylist: updatePlaylistParameters,
+    userList: userListParameters,
+  },
+  _response: {
+    addToPlaylist,
+    album,
+    albumArtist,
+    albumArtistList,
+    albumList,
+    authenticate,
+    createPlaylist,
+    deletePlaylist,
+    error,
+    genre,
+    genreList,
+    playlist,
+    playlistList,
+    playlistSong,
+    playlistSongList,
+    removeFromPlaylist,
+    song,
+    songList,
+    updatePlaylist,
+    user,
+    userList,
+  },
+};

src/renderer/api/queries/useAlbum.ts

@@ -1,10 +0,0 @@
-import { useQuery } from 'react-query';
-import { albumsApi } from '../albumsApi';
-import { queryKeys } from '../queryKeys';
-
-export const useAlbum = (albumId: number) => {
-  return useQuery({
-    queryFn: () => albumsApi.getAlbum(albumId),
-    queryKey: queryKeys.album(albumId),
-  });
-};

src/renderer/api/query-keys.ts

@@ -0,0 +1,118 @@
+import { QueryFunctionContext } from '@tanstack/react-query';
+import type {
+  AlbumListQuery,
+  SongListQuery,
+  AlbumDetailQuery,
+  AlbumArtistListQuery,
+  ArtistListQuery,
+  PlaylistListQuery,
+  PlaylistDetailQuery,
+  PlaylistSongListQuery,
+  UserListQuery,
+  AlbumArtistDetailQuery,
+  TopSongListQuery,
+  SearchQuery,
+  SongDetailQuery,
+  RandomSongListQuery,
+} from './types';
+
+export const queryKeys: Record<
+  string,
+  Record<string, (...props: any) => QueryFunctionContext['queryKey']>
+> = {
+  albumArtists: {
+    detail: (serverId: string, query?: AlbumArtistDetailQuery) => {
+      if (query) return [serverId, 'albumArtists', 'detail', query] as const;
+      return [serverId, 'albumArtists', 'detail'] as const;
+    },
+    list: (serverId: string, query?: AlbumArtistListQuery) => {
+      if (query) return [serverId, 'albumArtists', 'list', query] as const;
+      return [serverId, 'albumArtists', 'list'] as const;
+    },
+    root: (serverId: string) => [serverId, 'albumArtists'] as const,
+    topSongs: (serverId: string, query?: TopSongListQuery) => {
+      if (query) return [serverId, 'albumArtists', 'topSongs', query] as const;
+      return [serverId, 'albumArtists', 'topSongs'] as const;
+    },
+  },
+  albums: {
+    detail: (serverId: string, query?: AlbumDetailQuery) =>
+      [serverId, 'albums', 'detail', query] as const,
+    list: (serverId: string, query?: AlbumListQuery) => {
+      if (query) return [serverId, 'albums', 'list', query] as const;
+      return [serverId, 'albums', 'list'] as const;
+    },
+    root: (serverId: string) => [serverId, 'albums'],
+    serverRoot: (serverId: string) => [serverId, 'albums'],
+    songs: (serverId: string, query: SongListQuery) =>
+      [serverId, 'albums', 'songs', query] as const,
+  },
+  artists: {
+    list: (serverId: string, query?: ArtistListQuery) => {
+      if (query) return [serverId, 'artists', 'list', query] as const;
+      return [serverId, 'artists', 'list'] as const;
+    },
+    root: (serverId: string) => [serverId, 'artists'] as const,
+  },
+  genres: {
+    list: (serverId: string) => [serverId, 'genres', 'list'] as const,
+    root: (serverId: string) => [serverId, 'genres'] as const,
+  },
+  musicFolders: {
+    list: (serverId: string) => [serverId, 'musicFolders', 'list'] as const,
+  },
+  playlists: {
+    detail: (serverId: string, id?: string, query?: PlaylistDetailQuery) => {
+      if (query) return [serverId, 'playlists', id, 'detail', query] as const;
+      if (id) return [serverId, 'playlists', id, 'detail'] as const;
+      return [serverId, 'playlists', 'detail'] as const;
+    },
+    detailSongList: (serverId: string, id: string, query?: PlaylistSongListQuery) => {
+      if (query) return [serverId, 'playlists', id, 'detailSongList', query] as const;
+      if (id) return [serverId, 'playlists', id, 'detailSongList'] as const;
+      return [serverId, 'playlists', 'detailSongList'] as const;
+    },
+    list: (serverId: string, query?: PlaylistListQuery) => {
+      if (query) return [serverId, 'playlists', 'list', query] as const;
+      return [serverId, 'playlists', 'list'] as const;
+    },
+    root: (serverId: string) => [serverId, 'playlists'] as const,
+    songList: (serverId: string, id?: string, query?: PlaylistSongListQuery) => {
+      if (query && id) return [serverId, 'playlists', id, 'songList', query] as const;
+      if (id) return [serverId, 'playlists', id, 'songList'] as const;
+      return [serverId, 'playlists', 'songList'] as const;
+    },
+  },
+  search: {
+    list: (serverId: string, query?: SearchQuery) => {
+      if (query) return [serverId, 'search', 'list', query] as const;
+      return [serverId, 'search', 'list'] as const;
+    },
+    root: (serverId: string) => [serverId, 'search'] as const,
+  },
+  server: {
+    root: (serverId: string) => [serverId] as const,
+  },
+  songs: {
+    detail: (serverId: string, query?: SongDetailQuery) => {
+      if (query) return [serverId, 'songs', 'detail', query] as const;
+      return [serverId, 'songs', 'detail'] as const;
+    },
+    list: (serverId: string, query?: SongListQuery) => {
+      if (query) return [serverId, 'songs', 'list', query] as const;
+      return [serverId, 'songs', 'list'] as const;
+    },
+    randomSongList: (serverId: string, query?: RandomSongListQuery) => {
+      if (query) return [serverId, 'songs', 'randomSongList', query] as const;
+      return [serverId, 'songs', 'randomSongList'] as const;
+    },
+    root: (serverId: string) => [serverId, 'songs'] as const,
+  },
+  users: {
+    list: (serverId: string, query?: UserListQuery) => {
+      if (query) return [serverId, 'users', 'list', query] as const;
+      return [serverId, 'users', 'list'] as const;
+    },
+    root: (serverId: string) => [serverId, 'users'] as const,
+  },
+};

src/renderer/api/queryKeys.ts

@@ -1,8 +0,0 @@
-import { AlbumsRequest } from './albumsApi';
-
-export const queryKeys = {
-  album: (albumId: number) => ['album', albumId] as const,
-  albums: (params: AlbumsRequest) => ['albums', params] as const,
-  ping: (url: string) => ['ping', url] as const,
-  servers: ['servers'] as const,
-};

src/renderer/api/serversApi.ts

@@ -1,22 +0,0 @@
-import { api } from 'renderer/lib';
-
-const getServers = async () => {
-  const { data } = await api.get<any[]>('/servers');
-  return data;
-};
-
-const createServer = async (body: {
-  name: string;
-  remoteUserId: string;
-  token: string;
-  url: string;
-  username: string;
-}) => {
-  const { data } = await api.post<any>('/servers', body);
-  return data;
-};
-
-export const serversApi = {
-  createServer,
-  getServers,
-};

src/renderer/api/subsonic.types.ts

@@ -0,0 +1,224 @@
+export type SSBaseResponse = {
+  serverVersion?: 'string';
+  status: 'string';
+  type?: 'string';
+  version: 'string';
+};
+
+export type SSMusicFolderList = SSMusicFolder[];
+
+export type SSMusicFolderListResponse = {
+  musicFolders: {
+    musicFolder: SSMusicFolder[];
+  };
+};
+
+export type SSGenreList = SSGenre[];
+
+export type SSGenreListResponse = {
+  genres: {
+    genre: SSGenre[];
+  };
+};
+
+export type SSAlbumArtistDetailParams = {
+  id: string;
+};
+
+export type SSAlbumArtistDetail = SSAlbumArtistListEntry & { album: SSAlbumListEntry[] };
+
+export type SSAlbumArtistDetailResponse = {
+  artist: SSAlbumArtistListEntry & {
+    album: SSAlbumListEntry[];
+  };
+};
+
+export type SSAlbumArtistList = {
+  items: SSAlbumArtistListEntry[];
+  startIndex: number;
+  totalRecordCount: number | null;
+};
+
+export type SSAlbumArtistListResponse = {
+  artists: {
+    ignoredArticles: string;
+    index: SSArtistIndex[];
+    lastModified: number;
+  };
+};
+
+export type SSAlbumList = {
+  items: SSAlbumListEntry[];
+  startIndex: number;
+  totalRecordCount: number | null;
+};
+
+export type SSAlbumListResponse = {
+  albumList2: {
+    album: SSAlbumListEntry[];
+  };
+};
+
+export type SSAlbumDetail = Omit<SSAlbum, 'song'> & { songs: SSSong[] };
+
+export type SSAlbumDetailResponse = {
+  album: SSAlbum;
+};
+
+export type SSArtistInfoParams = {
+  count?: number;
+  id: string;
+  includeNotPresent?: boolean;
+};
+
+export type SSArtistInfoResponse = {
+  artistInfo2: SSArtistInfo;
+};
+
+export type SSArtistInfo = {
+  biography: string;
+  largeImageUrl?: string;
+  lastFmUrl?: string;
+  mediumImageUrl?: string;
+  musicBrainzId?: string;
+  similarArtist?: {
+    albumCount: string;
+    artistImageUrl?: string;
+    coverArt?: string;
+    id: string;
+    name: string;
+  }[];
+  smallImageUrl?: string;
+};
+
+export type SSMusicFolder = {
+  id: number;
+  name: string;
+};
+
+export type SSGenre = {
+  albumCount?: number;
+  songCount?: number;
+  value: string;
+};
+
+export type SSArtistIndex = {
+  artist: SSAlbumArtistListEntry[];
+  name: string;
+};
+
+export type SSAlbumArtistListEntry = {
+  albumCount: string;
+  artistImageUrl?: string;
+  coverArt?: string;
+  id: string;
+  name: string;
+};
+
+export type SSAlbumListEntry = {
+  album: string;
+  artist: string;
+  artistId: string;
+  coverArt: string;
+  created: string;
+  duration: number;
+  genre?: string;
+  id: string;
+  isDir: boolean;
+  isVideo: boolean;
+  name: string;
+  parent: string;
+  songCount: number;
+  starred?: boolean;
+  title: string;
+  userRating?: number;
+  year: number;
+};
+
+export type SSAlbum = {
+  song: SSSong[];
+} & SSAlbumListEntry;
+
+export type SSSong = {
+  album: string;
+  albumId: string;
+  artist: string;
+  artistId?: string;
+  bitRate: number;
+  contentType: string;
+  coverArt: string;
+  created: string;
+  discNumber?: number;
+  duration: number;
+  genre: string;
+  id: string;
+  isDir: boolean;
+  isVideo: boolean;
+  parent: string;
+  path: string;
+  playCount: number;
+  size: number;
+  starred?: boolean;
+  suffix: string;
+  title: string;
+  track: number;
+  type: string;
+  userRating?: number;
+  year: number;
+};
+
+export type SSAlbumListParams = {
+  fromYear?: number;
+  genre?: string;
+  musicFolderId?: string;
+  offset?: number;
+  size?: number;
+  toYear?: number;
+  type: string;
+};
+
+export type SSAlbumArtistListParams = {
+  musicFolderId?: string;
+};
+
+export type SSFavoriteParams = {
+  albumId?: string;
+  artistId?: string;
+  id?: string;
+};
+
+export type SSFavorite = null;
+
+export type SSFavoriteResponse = null;
+
+export type SSRatingParams = {
+  id: string;
+  rating: number;
+};
+
+export type SSRating = null;
+
+export type SSRatingResponse = null;
+
+export type SSTopSongListParams = {
+  artist: string;
+  count?: number;
+};
+
+export type SSTopSongListResponse = {
+  topSongs: {
+    song: SSSong[];
+  };
+};
+
+export type SSTopSongList = {
+  items: SSSong[];
+  startIndex: number;
+  totalRecordCount: number | null;
+};
+
+export type SSScrobbleParams = {
+  id: string;
+  submission?: boolean;
+  time?: number;
+};

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

@@ -0,0 +1,205 @@
+import { initClient, initContract } from '@ts-rest/core';
+import axios, { Method, AxiosError, isAxiosError, AxiosResponse } from 'axios';
+import omitBy from 'lodash/omitBy';
+import qs from 'qs';
+import { z } from 'zod';
+import { ssType } from '/@/renderer/api/subsonic/subsonic-types';
+import { ServerListItem } from '/@/renderer/api/types';
+import { toast } from '/@/renderer/components/toast/index';
+
+const c = initContract();
+
+export const contract = c.router({
+  authenticate: {
+    method: 'GET',
+    path: 'ping.view',
+    query: ssType._parameters.authenticate,
+    responses: {
+      200: ssType._response.authenticate,
+    },
+  },
+  createFavorite: {
+    method: 'GET',
+    path: 'star.view',
+    query: ssType._parameters.createFavorite,
+    responses: {
+      200: ssType._response.createFavorite,
+    },
+  },
+  getArtistInfo: {
+    method: 'GET',
+    path: 'getArtistInfo.view',
+    query: ssType._parameters.artistInfo,
+    responses: {
+      200: ssType._response.artistInfo,
+    },
+  },
+  getMusicFolderList: {
+    method: 'GET',
+    path: 'getMusicFolders.view',
+    responses: {
+      200: ssType._response.musicFolderList,
+    },
+  },
+  getRandomSongList: {
+    method: 'GET',
+    path: 'getRandomSongs.view',
+    query: ssType._parameters.randomSongList,
+    responses: {
+      200: ssType._response.randomSongList,
+    },
+  },
+  getTopSongsList: {
+    method: 'GET',
+    path: 'getTopSongs.view',
+    query: ssType._parameters.topSongsList,
+    responses: {
+      200: ssType._response.topSongsList,
+    },
+  },
+  removeFavorite: {
+    method: 'GET',
+    path: 'unstar.view',
+    query: ssType._parameters.removeFavorite,
+    responses: {
+      200: ssType._response.removeFavorite,
+    },
+  },
+  scrobble: {
+    method: 'GET',
+    path: 'scrobble.view',
+    query: ssType._parameters.scrobble,
+    responses: {
+      200: ssType._response.scrobble,
+    },
+  },
+  search3: {
+    method: 'GET',
+    path: 'search3.view',
+    query: ssType._parameters.search3,
+    responses: {
+      200: ssType._response.search3,
+    },
+  },
+  setRating: {
+    method: 'GET',
+    path: 'setRating.view',
+    query: ssType._parameters.setRating,
+    responses: {
+      200: ssType._response.setRating,
+    },
+  },
+});
+
+const axiosClient = axios.create({});
+
+axiosClient.defaults.paramsSerializer = (params) => {
+  return qs.stringify(params, { arrayFormat: 'repeat' });
+};
+
+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) {
+        toast.error({
+          message: data['subsonic-response'].error.message,
+          title: 'Issue from Subsonic API',
+        });
+      }
+    }
+
+    return response;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+const parsePath = (fullPath: string) => {
+  const [path, params] = fullPath.split('?');
+
+  const parsedParams = qs.parse(params);
+  const notNilParams = omitBy(parsedParams, (value) => value === 'undefined' || value === 'null');
+
+  return {
+    params: notNilParams,
+    path,
+  };
+};
+
+export const ssApiClient = (args: {
+  server: ServerListItem | null;
+  signal?: AbortSignal;
+  url?: string;
+}) => {
+  const { server, url, signal } = args;
+
+  return initClient(contract, {
+    api: async ({ path, method, headers, body }) => {
+      let baseUrl: string | undefined;
+      const authParams: Record<string, any> = {};
+
+      const { params, path: api } = parsePath(path);
+
+      if (server) {
+        baseUrl = `${server.url}/rest`;
+        const token = server.credential;
+        const params = token.split(/&?\w=/gm);
+
+        authParams.u = server.username;
+        if (params?.length === 4) {
+          authParams.s = params[2];
+          authParams.t = params[3];
+        } else if (params?.length === 3) {
+          authParams.p = params[2];
+        }
+      } else {
+        baseUrl = url;
+      }
+
+      try {
+        const result = await axiosClient.request<z.infer<typeof ssType._response.baseResponse>>({
+          data: body,
+          headers,
+          method: method as Method,
+          params: {
+            c: 'Feishin',
+            f: 'json',
+            v: '1.13.0',
+            ...authParams,
+            ...params,
+          },
+          signal,
+          url: `${baseUrl}/${api}`,
+        });
+
+        return {
+          body: result.data['subsonic-response'],
+          status: result.status,
+        };
+      } catch (e: Error | AxiosError | any) {
+        console.log('CATCH ERR');
+
+        if (isAxiosError(e)) {
+          const error = e as AxiosError;
+          const response = error.response as AxiosResponse;
+
+          console.log(response, 'response');
+
+          return {
+            body: response?.data,
+            status: response?.status,
+          };
+        }
+        throw e;
+      }
+    },
+    baseHeaders: {
+      'Content-Type': 'application/json',
+    },
+    baseUrl: '',
+  });
+};

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

@@ -0,0 +1,383 @@
+import md5 from 'md5';
+import { z } from 'zod';
+import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
+import { ssNormalize } from '/@/renderer/api/subsonic/subsonic-normalize';
+import { ssType } from '/@/renderer/api/subsonic/subsonic-types';
+import {
+  ArtistInfoArgs,
+  AuthenticationResponse,
+  FavoriteArgs,
+  FavoriteResponse,
+  LibraryItem,
+  MusicFolderListArgs,
+  MusicFolderListResponse,
+  SetRatingArgs,
+  RatingResponse,
+  ScrobbleArgs,
+  ScrobbleResponse,
+  SongListResponse,
+  TopSongListArgs,
+  SearchArgs,
+  SearchResponse,
+  RandomSongListResponse,
+  RandomSongListArgs,
+} from '/@/renderer/api/types';
+import { randomString } from '/@/renderer/utils';
+
+const authenticate = async (
+  url: string,
+  body: {
+    legacy?: boolean;
+    password: string;
+    username: string;
+  },
+): Promise<AuthenticationResponse> => {
+  let credential: string;
+  let credentialParams: {
+    p?: string;
+    s?: string;
+    t?: string;
+    u: string;
+  };
+
+  const cleanServerUrl = url.replace(/\/$/, '');
+
+  if (body.legacy) {
+    credential = `u=${body.username}&p=${body.password}`;
+    credentialParams = {
+      p: body.password,
+      u: body.username,
+    };
+  } else {
+    const salt = randomString(12);
+    const hash = md5(body.password + salt);
+    credential = `u=${body.username}&s=${salt}&t=${hash}`;
+    credentialParams = {
+      s: salt,
+      t: hash,
+      u: body.username,
+    };
+  }
+
+  await ssApiClient({ server: null, url: cleanServerUrl }).authenticate({
+    query: {
+      c: 'Feishin',
+      f: 'json',
+      v: '1.13.0',
+      ...credentialParams,
+    },
+  });
+
+  return {
+    credential,
+    userId: null,
+    username: body.username,
+  };
+};
+
+const getMusicFolderList = async (args: MusicFolderListArgs): Promise<MusicFolderListResponse> => {
+  const { apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).getMusicFolderList({});
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get music folder list');
+  }
+
+  return {
+    items: res.body.musicFolders.musicFolder,
+    startIndex: 0,
+    totalRecordCount: res.body.musicFolders.musicFolder.length,
+  };
+};
+
+// export const getAlbumArtistDetail = async (
+//   args: AlbumArtistDetailArgs,
+// ): Promise<SSAlbumArtistDetail> => {
+//   const { server, signal, query } = args;
+//   const defaultParams = getDefaultParams(server);
+
+//   const searchParams: SSAlbumArtistDetailParams = {
+//     id: query.id,
+//     ...defaultParams,
+//   };
+
+//   const data = await api
+//     .get('/getArtist.view', {
+//       prefixUrl: server?.url,
+//       searchParams,
+//       signal,
+//     })
+//     .json<SSAlbumArtistDetailResponse>();
+
+//   return data.artist;
+// };
+
+// const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<SSAlbumArtistList> => {
+//   const { signal, server, query } = args;
+//   const defaultParams = getDefaultParams(server);
+
+//   const searchParams: SSAlbumArtistListParams = {
+//     musicFolderId: query.musicFolderId,
+//     ...defaultParams,
+//   };
+
+//   const data = await api
+//     .get('rest/getArtists.view', {
+//       prefixUrl: server?.url,
+//       searchParams,
+//       signal,
+//     })
+//     .json<SSAlbumArtistListResponse>();
+
+//   const artists = (data.artists?.index || []).flatMap((index: SSArtistIndex) => index.artist);
+
+//   return {
+//     items: artists,
+//     startIndex: query.startIndex,
+//     totalRecordCount: null,
+//   };
+// };
+
+// const getGenreList = async (args: GenreListArgs): Promise<SSGenreList> => {
+//   const { server, signal } = args;
+//   const defaultParams = getDefaultParams(server);
+
+//   const data = await api
+//     .get('rest/getGenres.view', {
+//       prefixUrl: server?.url,
+//       searchParams: defaultParams,
+//       signal,
+//     })
+//     .json<SSGenreListResponse>();
+
+//   return data.genres.genre;
+// };
+
+// const getAlbumDetail = async (args: AlbumDetailArgs): Promise<SSAlbumDetail> => {
+//   const { server, query, signal } = args;
+//   const defaultParams = getDefaultParams(server);
+
+//   const searchParams = {
+//     id: query.id,
+//     ...defaultParams,
+//   };
+
+//   const data = await api
+//     .get('rest/getAlbum.view', {
+//       prefixUrl: server?.url,
+//       searchParams: parseSearchParams(searchParams),
+//       signal,
+//     })
+//     .json<SSAlbumDetailResponse>();
+
+//   const { song: songs, ...dataWithoutSong } = data.album;
+//   return { ...dataWithoutSong, songs };
+// };
+
+// const getAlbumList = async (args: AlbumListArgs): Promise<SSAlbumList> => {
+//   const { server, query, signal } = args;
+//   const defaultParams = getDefaultParams(server);
+
+//   const searchParams = {
+//     ...defaultParams,
+//   };
+//   const data = await api
+//     .get('rest/getAlbumList2.view', {
+//       prefixUrl: server?.url,
+//       searchParams: parseSearchParams(searchParams),
+//       signal,
+//     })
+//     .json<SSAlbumListResponse>();
+
+//   return {
+//     items: data.albumList2.album,
+//     startIndex: query.startIndex,
+//     totalRecordCount: null,
+//   };
+// };
+
+const createFavorite = async (args: FavoriteArgs): Promise<FavoriteResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).createFavorite({
+    query: {
+      albumId: query.type === LibraryItem.ALBUM ? query.id : undefined,
+      artistId: query.type === LibraryItem.ALBUM_ARTIST ? query.id : undefined,
+      id: query.type === LibraryItem.SONG ? query.id : undefined,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to create favorite');
+  }
+
+  return null;
+};
+
+const removeFavorite = async (args: FavoriteArgs): Promise<FavoriteResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).removeFavorite({
+    query: {
+      albumId: query.type === LibraryItem.ALBUM ? query.id : undefined,
+      artistId: query.type === LibraryItem.ALBUM_ARTIST ? query.id : undefined,
+      id: query.type === LibraryItem.SONG ? query.id : undefined,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to delete favorite');
+  }
+
+  return null;
+};
+
+const setRating = async (args: SetRatingArgs): Promise<RatingResponse> => {
+  const { query, apiClientProps } = args;
+
+  const itemIds = query.item.map((item) => item.id);
+
+  for (const id of itemIds) {
+    await ssApiClient(apiClientProps).setRating({
+      query: {
+        id,
+        rating: query.rating,
+      },
+    });
+  }
+
+  return null;
+};
+
+const getTopSongList = async (args: TopSongListArgs): Promise<SongListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).getTopSongsList({
+    query: {
+      artist: query.artist,
+      count: query.limit,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get top songs');
+  }
+
+  return {
+    items:
+      res.body.topSongs?.song?.map((song) => ssNormalize.song(song, apiClientProps.server, '')) ||
+      [],
+    startIndex: 0,
+    totalRecordCount: res.body.topSongs?.song?.length || 0,
+  };
+};
+
+const getArtistInfo = async (
+  args: ArtistInfoArgs,
+): Promise<z.infer<typeof ssType._response.artistInfo>> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).getArtistInfo({
+    query: {
+      count: query.limit,
+      id: query.artistId,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get artist info');
+  }
+
+  return res.body;
+};
+
+const scrobble = async (args: ScrobbleArgs): Promise<ScrobbleResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).scrobble({
+    query: {
+      id: query.id,
+      submission: query.submission,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to scrobble');
+  }
+
+  return null;
+};
+
+const search3 = async (args: SearchArgs): Promise<SearchResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).search3({
+    query: {
+      albumCount: query.albumLimit,
+      albumOffset: query.albumStartIndex,
+      artistCount: query.albumArtistLimit,
+      artistOffset: query.albumArtistStartIndex,
+      query: query.query,
+      songCount: query.songLimit,
+      songOffset: query.songStartIndex,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to search');
+  }
+
+  return {
+    albumArtists: res.body.searchResult3?.artist?.map((artist) =>
+      ssNormalize.albumArtist(artist, apiClientProps.server),
+    ),
+    albums: res.body.searchResult3?.album?.map((album) =>
+      ssNormalize.album(album, apiClientProps.server),
+    ),
+    songs: res.body.searchResult3?.song?.map((song) =>
+      ssNormalize.song(song, apiClientProps.server, ''),
+    ),
+  };
+};
+
+const getRandomSongList = async (args: RandomSongListArgs): Promise<RandomSongListResponse> => {
+  const { query, apiClientProps } = args;
+
+  const res = await ssApiClient(apiClientProps).getRandomSongList({
+    query: {
+      fromYear: query.minYear,
+      genre: query.genre,
+      musicFolderId: query.musicFolderId,
+      size: query.limit,
+      toYear: query.maxYear,
+    },
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get random songs');
+  }
+
+  console.log('res', res);
+
+  return {
+    items: res.body.randomSongs?.song?.map((song) =>
+      ssNormalize.song(song, apiClientProps.server, ''),
+    ),
+    startIndex: 0,
+    totalRecordCount: res.body.randomSongs?.song?.length || 0,
+  };
+};
+
+export const ssController = {
+  authenticate,
+  createFavorite,
+  getArtistInfo,
+  getMusicFolderList,
+  getRandomSongList,
+  getTopSongList,
+  removeFavorite,
+  scrobble,
+  search3,
+  setRating,
+};

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

@@ -0,0 +1,179 @@
+import { nanoid } from 'nanoid';
+import { z } from 'zod';
+import { ssType } from '/@/renderer/api/subsonic/subsonic-types';
+import { QueueSong, LibraryItem, AlbumArtist, Album } from '/@/renderer/api/types';
+import { ServerListItem, ServerType } from '/@/renderer/types';
+
+const getCoverArtUrl = (args: {
+  baseUrl: string | undefined;
+  coverArtId?: string;
+  credential: string | undefined;
+  size: number;
+}) => {
+  const size = args.size ? args.size : 250;
+
+  if (!args.coverArtId || args.coverArtId.match('2a96cbd8b46e442fc41c2b86b821562f')) {
+    return null;
+  }
+
+  return (
+    `${args.baseUrl}/rest/getCoverArt.view` +
+    `?id=${args.coverArtId}` +
+    `&${args.credential}` +
+    '&v=1.13.0' +
+    '&c=feishin' +
+    `&size=${size}`
+  );
+};
+
+const normalizeSong = (
+  item: z.infer<typeof ssType._response.song>,
+  server: ServerListItem | null,
+  deviceId: string,
+): QueueSong => {
+  const imageUrl =
+    getCoverArtUrl({
+      baseUrl: server?.url,
+      coverArtId: item.coverArt,
+      credential: server?.credential,
+      size: 100,
+    }) || null;
+
+  const streamUrl = `${server?.url}/rest/stream.view?id=${item.id}&v=1.13.0&c=feishin_${deviceId}&${server?.credential}`;
+
+  return {
+    album: item.album || '',
+    albumArtists: [
+      {
+        id: item.artistId || '',
+        imageUrl: null,
+        name: item.artist || '',
+      },
+    ],
+    albumId: item.albumId || '',
+    artistName: item.artist || '',
+    artists: [
+      {
+        id: item.artistId || '',
+        imageUrl: null,
+        name: item.artist || '',
+      },
+    ],
+    bitRate: item.bitRate || 0,
+    bpm: null,
+    channels: null,
+    comment: null,
+    compilation: null,
+    container: item.contentType,
+    createdAt: item.created,
+    discNumber: item.discNumber || 1,
+    duration: item.duration || 0,
+    genres: item.genre
+      ? [
+          {
+            id: item.genre,
+            name: item.genre,
+          },
+        ]
+      : [],
+    id: item.id,
+    imagePlaceholderUrl: null,
+    imageUrl,
+    itemType: LibraryItem.SONG,
+    lastPlayedAt: null,
+    name: item.title,
+    path: item.path,
+    playCount: item?.playCount || 0,
+    releaseDate: null,
+    releaseYear: item.year ? String(item.year) : null,
+    serverId: server?.id || 'unknown',
+    serverType: ServerType.SUBSONIC,
+    size: item.size,
+    streamUrl,
+    trackNumber: item.track || 1,
+    uniqueId: nanoid(),
+    updatedAt: '',
+    userFavorite: item.starred || false,
+    userRating: item.userRating || null,
+  };
+};
+
+const normalizeAlbumArtist = (
+  item: z.infer<typeof ssType._response.albumArtist>,
+  server: ServerListItem | null,
+): AlbumArtist => {
+  const imageUrl =
+    getCoverArtUrl({
+      baseUrl: server?.url,
+      coverArtId: item.coverArt,
+      credential: server?.credential,
+      size: 100,
+    }) || null;
+
+  return {
+    albumCount: item.albumCount ? Number(item.albumCount) : 0,
+    backgroundImageUrl: null,
+    biography: null,
+    duration: null,
+    genres: [],
+    id: item.id,
+    imageUrl,
+    itemType: LibraryItem.ALBUM_ARTIST,
+    lastPlayedAt: null,
+    name: item.name,
+    playCount: null,
+    serverId: server?.id || 'unknown',
+    serverType: ServerType.SUBSONIC,
+    similarArtists: [],
+    songCount: null,
+    userFavorite: false,
+    userRating: null,
+  };
+};
+
+const normalizeAlbum = (
+  item: z.infer<typeof ssType._response.album>,
+  server: ServerListItem | null,
+): Album => {
+  const imageUrl =
+    getCoverArtUrl({
+      baseUrl: server?.url,
+      coverArtId: item.coverArt,
+      credential: server?.credential,
+      size: 300,
+    }) || null;
+
+  return {
+    albumArtists: item.artistId ? [{ id: item.artistId, imageUrl: null, name: item.artist }] : [],
+    artists: item.artistId ? [{ id: item.artistId, imageUrl: null, name: item.artist }] : [],
+    backdropImageUrl: null,
+    createdAt: item.created,
+    duration: item.duration,
+    genres: item.genre ? [{ id: item.genre, name: item.genre }] : [],
+    id: item.id,
+    imagePlaceholderUrl: null,
+    imageUrl,
+    isCompilation: null,
+    itemType: LibraryItem.ALBUM,
+    lastPlayedAt: null,
+    name: item.name,
+    playCount: null,
+    releaseDate: item.year ? new Date(item.year, 0, 1).toISOString() : null,
+    releaseYear: item.year ? Number(item.year) : null,
+    serverId: server?.id || 'unknown',
+    serverType: ServerType.SUBSONIC,
+    size: null,
+    songCount: item.songCount,
+    songs: [],
+    uniqueId: nanoid(),
+    updatedAt: item.created,
+    userFavorite: item.starred || false,
+    userRating: item.userRating || null,
+  };
+};
+
+export const ssNormalize = {
+  album: normalizeAlbum,
+  albumArtist: normalizeAlbumArtist,
+  song: normalizeSong,
+};

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

@@ -0,0 +1,240 @@
+import { z } from 'zod';
+
+const baseResponse = z.object({
+  'subsonic-response': z.object({
+    status: z.string(),
+    version: z.string(),
+  }),
+});
+
+const authenticate = z.null();
+
+const authenticateParameters = z.object({
+  c: z.string(),
+  f: z.string(),
+  p: z.string().optional(),
+  s: z.string().optional(),
+  t: z.string().optional(),
+  u: z.string(),
+  v: z.string(),
+});
+
+const createFavoriteParameters = z.object({
+  albumId: z.array(z.string()).optional(),
+  artistId: z.array(z.string()).optional(),
+  id: z.array(z.string()).optional(),
+});
+
+const createFavorite = z.null();
+
+const removeFavoriteParameters = z.object({
+  albumId: z.array(z.string()).optional(),
+  artistId: z.array(z.string()).optional(),
+  id: z.array(z.string()).optional(),
+});
+
+const removeFavorite = z.null();
+
+const setRatingParameters = z.object({
+  id: z.string(),
+  rating: z.number(),
+});
+
+const setRating = z.null();
+
+const musicFolder = z.object({
+  id: z.string(),
+  name: z.string(),
+});
+
+const musicFolderList = z.object({
+  musicFolders: z.object({
+    musicFolder: z.array(musicFolder),
+  }),
+});
+
+const song = z.object({
+  album: z.string().optional(),
+  albumId: z.string().optional(),
+  artist: z.string().optional(),
+  artistId: z.string().optional(),
+  averageRating: z.number().optional(),
+  bitRate: z.number().optional(),
+  contentType: z.string(),
+  coverArt: z.string().optional(),
+  created: z.string(),
+  discNumber: z.number(),
+  duration: z.number().optional(),
+  genre: z.string().optional(),
+  id: z.string(),
+  isDir: z.boolean(),
+  isVideo: z.boolean(),
+  parent: z.string(),
+  path: z.string(),
+  playCount: z.number().optional(),
+  size: z.number(),
+  starred: z.boolean().optional(),
+  suffix: z.string(),
+  title: z.string(),
+  track: z.number().optional(),
+  type: z.string(),
+  userRating: z.number().optional(),
+  year: z.number().optional(),
+});
+
+const album = z.object({
+  album: z.string(),
+  artist: z.string(),
+  artistId: z.string(),
+  coverArt: z.string(),
+  created: z.string(),
+  duration: z.number(),
+  genre: z.string().optional(),
+  id: z.string(),
+  isDir: z.boolean(),
+  isVideo: z.boolean(),
+  name: z.string(),
+  parent: z.string(),
+  song: z.array(song),
+  songCount: z.number(),
+  starred: z.boolean().optional(),
+  title: z.string(),
+  userRating: z.number().optional(),
+  year: z.number().optional(),
+});
+
+const albumListParameters = z.object({
+  fromYear: z.number().optional(),
+  genre: z.string().optional(),
+  musicFolderId: z.string().optional(),
+  offset: z.number().optional(),
+  size: z.number().optional(),
+  toYear: z.number().optional(),
+  type: z.string().optional(),
+});
+
+const albumList = z.array(album.omit({ song: true }));
+
+const albumArtist = z.object({
+  albumCount: z.string(),
+  artistImageUrl: z.string().optional(),
+  coverArt: z.string().optional(),
+  id: z.string(),
+  name: z.string(),
+});
+
+const albumArtistList = z.object({
+  artist: z.array(albumArtist),
+  name: z.string(),
+});
+
+const artistInfoParameters = z.object({
+  count: z.number().optional(),
+  id: z.string(),
+  includeNotPresent: z.boolean().optional(),
+});
+
+const artistInfo = z.object({
+  artistInfo: z.object({
+    biography: z.string().optional(),
+    largeImageUrl: z.string().optional(),
+    lastFmUrl: z.string().optional(),
+    mediumImageUrl: z.string().optional(),
+    musicBrainzId: z.string().optional(),
+    similarArtist: z.array(
+      z.object({
+        albumCount: z.string(),
+        artistImageUrl: z.string().optional(),
+        coverArt: z.string().optional(),
+        id: z.string(),
+        name: z.string(),
+      }),
+    ),
+    smallImageUrl: z.string().optional(),
+  }),
+});
+
+const topSongsListParameters = z.object({
+  artist: z.string(), // The name of the artist, not the artist ID
+  count: z.number().optional(),
+});
+
+const topSongsList = z.object({
+  topSongs: z.object({
+    song: z.array(song),
+  }),
+});
+
+const scrobbleParameters = z.object({
+  id: z.string(),
+  submission: z.boolean().optional(),
+  time: z.number().optional(), // The time (in milliseconds since 1 Jan 1970) at which the song was listened to.
+});
+
+const scrobble = z.null();
+
+const search3 = z.object({
+  searchResult3: z.object({
+    album: z.array(album),
+    artist: z.array(albumArtist),
+    song: z.array(song),
+  }),
+});
+
+const search3Parameters = z.object({
+  albumCount: z.number().optional(),
+  albumOffset: z.number().optional(),
+  artistCount: z.number().optional(),
+  artistOffset: z.number().optional(),
+  musicFolderId: z.string().optional(),
+  query: z.string().optional(),
+  songCount: z.number().optional(),
+  songOffset: z.number().optional(),
+});
+
+const randomSongListParameters = z.object({
+  fromYear: z.number().optional(),
+  genre: z.string().optional(),
+  musicFolderId: z.string().optional(),
+  size: z.number().optional(),
+  toYear: z.number().optional(),
+});
+
+const randomSongList = z.object({
+  randomSongs: z.object({
+    song: z.array(song),
+  }),
+});
+
+export const ssType = {
+  _parameters: {
+    albumList: albumListParameters,
+    artistInfo: artistInfoParameters,
+    authenticate: authenticateParameters,
+    createFavorite: createFavoriteParameters,
+    randomSongList: randomSongListParameters,
+    removeFavorite: removeFavoriteParameters,
+    scrobble: scrobbleParameters,
+    search3: search3Parameters,
+    setRating: setRatingParameters,
+    topSongsList: topSongsListParameters,
+  },
+  _response: {
+    album,
+    albumArtist,
+    albumArtistList,
+    albumList,
+    artistInfo,
+    authenticate,
+    baseResponse,
+    createFavorite,
+    musicFolderList,
+    randomSongList,
+    removeFavorite,
+    scrobble,
+    search3,
+    setRating,
+    song,
+    topSongsList,
+  },
+};

src/renderer/api/usersApi.ts

@@ -1,11 +0,0 @@
-import { api } from 'renderer/lib';
-import { UserResponse } from './types';
-
-const getUsers = async () => {
-  const { data } = await api.get<UserResponse>('/users');
-  return data;
-};
-
-export const usersApi = {
-  getUsers,
-};

src/renderer/api/utils.ts

@@ -0,0 +1,23 @@
+import { AxiosHeaders } from 'axios';
+import { z } from 'zod';
+
+// Since ts-rest client returns a strict response type, we need to add the headers to the body object
+export const resultWithHeaders = <ItemType extends z.ZodTypeAny>(itemSchema: ItemType) => {
+  return z.object({
+    data: itemSchema,
+    headers: z.instanceof(AxiosHeaders),
+  });
+};
+
+export const resultSubsonicBaseResponse = <ItemType extends z.ZodRawShape>(
+  itemSchema: ItemType,
+) => {
+  return z.object({
+    'subsonic-response': z
+      .object({
+        status: z.string(),
+        version: z.string(),
+      })
+      .extend(itemSchema),
+  });
+};

src/renderer/app.tsx

@@ -1,54 +1,184 @@
-import { ReactNode, useEffect } from 'react';
+import { useEffect } from 'react';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { ModuleRegistry } from '@ag-grid-community/core';
+import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
 import { MantineProvider } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
-import isElectron from 'is-electron';
-import { BrowserRouter, HashRouter } from 'react-router-dom';
-import { useDefaultSettings } from './features/settings';
-import { AppRouter } from './router/AppRouter';
+import { ModalsProvider } from '@mantine/modals';
+import { initSimpleImg } from 'react-simple-img';
+import { BaseContextModal } from './components';
+import { useTheme } from './hooks';
+import { AppRouter } from './router/app-router';
+import { useHotkeySettings, usePlaybackSettings, useSettingsStore } from './store/settings.store';
 import './styles/global.scss';
+import '@ag-grid-community/styles/ag-grid.css';
+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 isElectron from 'is-electron';
+import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
+import { PlayerState, usePlayerStore, useQueueControls } from '/@/renderer/store';
+import { PlaybackType, PlayerStatus } from '/@/renderer/types';
 
-const SelectRouter = ({ children }: { children: ReactNode }) => {
-  if (isElectron()) {
-    return <HashRouter>{children}</HashRouter>;
-  }
+ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
 
-  return <BrowserRouter>{children}</BrowserRouter>;
-};
+initSimpleImg({ threshold: 0.05 }, true);
+
+const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
+const ipc = isElectron() ? window.electron.ipc : null;
 
 export const App = () => {
-  const [theme] = useLocalStorage({
-    defaultValue: 'dark',
-    key: 'theme',
-  });
-
-  useDefaultSettings();
+  const theme = useTheme();
+  const contentFont = useSettingsStore((state) => state.general.fontContent);
+  const { type: playbackType } = usePlaybackSettings();
+  const { bindings } = useHotkeySettings();
+  const handlePlayQueueAdd = useHandlePlayQueueAdd();
+  const { restoreQueue } = useQueueControls();
 
   useEffect(() => {
-    document.body.setAttribute('data-theme', theme);
-  }, [theme]);
+    const root = document.documentElement;
+    root.style.setProperty('--content-font-family', contentFont);
+  }, [contentFont]);
+
+  // Start the mpv instance on startup
+  useEffect(() => {
+    if (isElectron() && playbackType === PlaybackType.LOCAL) {
+      const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
+      const properties = {
+        ...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
+      };
+
+      mpvPlayer?.initialize({
+        extraParameters,
+        properties,
+      });
+
+      mpvPlayer?.volume(properties.volume);
+    }
+
+    return () => {
+      mpvPlayer?.quit();
+    };
+  }, [playbackType]);
+
+  useEffect(() => {
+    if (isElectron()) {
+      ipc?.send('set-global-shortcuts', bindings);
+    }
+  }, [bindings]);
+
+  useEffect(() => {
+    if (isElectron()) {
+      mpvPlayer.restoreQueue();
+
+      mpvPlayerListener.rendererSaveQueue(() => {
+        const { current, queue } = usePlayerStore.getState();
+        const stateToSave: Partial<Pick<PlayerState, 'current' | 'queue'>> = {
+          current: {
+            ...current,
+            status: PlayerStatus.PAUSED,
+          },
+          queue,
+        };
+        mpvPlayer.saveQueue(stateToSave);
+      });
+
+      mpvPlayerListener.rendererRestoreQueue((_event: any, data: Partial<PlayerState>) => {
+        const playerData = restoreQueue(data);
+        if (playbackType === PlaybackType.LOCAL) {
+          mpvPlayer.setQueue(playerData, true);
+        }
+      });
+    }
+
+    return () => {
+      ipc?.removeAllListeners('renderer-player-restore-queue');
+      ipc?.removeAllListeners('renderer-player-save-queue');
+    };
+  }, [playbackType, restoreQueue]);
 
   return (
     <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
       theme={{
-        colorScheme: 'dark',
+        colorScheme: theme as 'light' | 'dark',
+        components: {
+          Modal: {
+            styles: {
+              body: { background: 'var(--modal-bg)', padding: '1rem !important' },
+              close: { marginRight: '0.5rem' },
+              content: { borderRadius: '10px' },
+              header: {
+                background: 'var(--modal-bg)',
+                borderBottom: '1px solid var(--generic-border-color)',
+                paddingBottom: '1rem',
+              },
+              title: { fontSize: 'medium', fontWeight: 'bold' },
+            },
+          },
+        },
         defaultRadius: 'xs',
+        dir: 'ltr',
         focusRing: 'auto',
+        focusRingStyles: {
+          inputStyles: () => ({
+            border: '1px solid var(--primary-color)',
+          }),
+          resetStyles: () => ({ outline: 'none' }),
+          styles: () => ({
+            outline: '1px solid var(--primary-color)',
+            outlineOffset: '-1px',
+          }),
+        },
+        fontFamily: 'var(--content-font-family)',
         fontSizes: {
-          lg: 16,
-          md: 14,
-          sm: 12,
-          xl: 18,
-          xs: 10,
+          lg: '1.1rem',
+          md: '1rem',
+          sm: '0.9rem',
+          xl: '1.5rem',
+          xs: '0.8rem',
+        },
+        headings: {
+          fontFamily: 'var(--content-font-family)',
+          fontWeight: 700,
+          sizes: {
+            h1: '6rem',
+            h2: '4rem',
+            h3: '3rem',
+            h4: '1.5rem',
+            h5: '1.2rem',
+            h6: '1rem',
+          },
         },
         other: {},
         spacing: {
-          xs: 2,
+          lg: '2rem',
+          md: '1rem',
+          sm: '0.5rem',
+          xl: '4rem',
+          xs: '0rem',
         },
       }}
     >
-      <SelectRouter>
-        <AppRouter />
-      </SelectRouter>
+      <ModalsProvider
+        modalProps={{
+          centered: true,
+          transitionProps: {
+            duration: 300,
+            exitDuration: 300,
+            transition: 'slide-down',
+          },
+        }}
+        modals={{ addToPlaylist: AddToPlaylistContextModal, base: BaseContextModal }}
+      >
+        <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
+          <ContextMenuProvider>
+            <AppRouter />
+          </ContextMenuProvider>
+        </PlayQueueHandlerContext.Provider>
+      </ModalsProvider>
     </MantineProvider>
   );
 };

src/renderer/components/accordion/index.tsx

@@ -0,0 +1,23 @@
+import type { AccordionProps as MantineAccordionProps } from '@mantine/core';
+import { Accordion as MantineAccordion } from '@mantine/core';
+import styled from 'styled-components';
+
+type AccordionProps = MantineAccordionProps;
+
+const StyledAccordion = styled(MantineAccordion)`
+  & .mantine-Accordion-panel {
+    background: var(--paper-bg);
+  }
+
+  .mantine-Accordion-control {
+    background: var(--paper-bg);
+  }
+`;
+
+export const Accordion = ({ children, ...props }: AccordionProps) => {
+  return <StyledAccordion {...props}>{children}</StyledAccordion>;
+};
+
+Accordion.Control = StyledAccordion.Control;
+Accordion.Item = StyledAccordion.Item;
+Accordion.Panel = StyledAccordion.Panel;

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

@@ -1,27 +1,24 @@
+import { useImperativeHandle, forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import isElectron from 'is-electron';
+import type { ReactPlayerProps } from 'react-player';
+import ReactPlayer from 'react-player';
+import type { Song } from '/@/renderer/api/types';
 import {
-  useImperativeHandle,
-  forwardRef,
-  useRef,
-  useState,
-  useCallback,
-} from 'react';
-import ReactPlayer, { ReactPlayerProps } from 'react-player';
-import {
-  CrossfadeStyle,
-  PlaybackStyle,
-  PlayerStatus,
-  Song,
-} from '../../../types';
-import { crossfadeHandler, gaplessHandler } from './utils/listenHandlers';
+  crossfadeHandler,
+  gaplessHandler,
+} from '/@/renderer/components/audio-player/utils/list-handlers';
+import { useSettingsStore } from '/@/renderer/store/settings.store';
+import type { CrossfadeStyle } from '/@/renderer/types';
+import { PlaybackStyle, PlayerStatus } from '/@/renderer/types';
 
 interface AudioPlayerProps extends ReactPlayerProps {
   crossfadeDuration: number;
   crossfadeStyle: CrossfadeStyle;
   currentPlayer: 1 | 2;
+  playbackStyle: PlaybackStyle;
   player1: Song;
   player2: Song;
   status: PlayerStatus;
-  style: PlaybackStyle;
   volume: number;
 }
 
@@ -40,7 +37,7 @@ export const AudioPlayer = forwardRef(
   (
     {
       status,
-      style,
+      playbackStyle,
       crossfadeStyle,
       crossfadeDuration,
       currentPlayer,
@@ -50,11 +47,12 @@ export const AudioPlayer = forwardRef(
       muted,
       volume,
     }: AudioPlayerProps,
-    ref: any
+    ref: any,
   ) => {
     const player1Ref = useRef<any>(null);
     const player2Ref = useRef<any>(null);
     const [isTransitioning, setIsTransitioning] = useState(false);
+    const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
 
     useImperativeHandle(ref, () => ({
       get player1() {
@@ -70,6 +68,19 @@ export const AudioPlayer = forwardRef(
       setIsTransitioning(false);
     };
 
+    useEffect(() => {
+      if (status === PlayerStatus.PLAYING) {
+        if (currentPlayer === 1) {
+          player1Ref.current?.getInternalPlayer()?.play();
+        } else {
+          player2Ref.current?.getInternalPlayer()?.play();
+        }
+      } else {
+        player1Ref.current?.getInternalPlayer()?.pause();
+        player2Ref.current?.getInternalPlayer()?.pause();
+      }
+    }, [currentPlayer, status]);
+
     const handleCrossfade1 = useCallback(
       (e: AudioPlayerProgress) => {
         return crossfadeHandler({
@@ -86,13 +97,7 @@ export const AudioPlayer = forwardRef(
           volume,
         });
       },
-      [
-        crossfadeDuration,
-        crossfadeStyle,
-        currentPlayer,
-        isTransitioning,
-        volume,
-      ]
+      [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
     );
 
     const handleCrossfade2 = useCallback(
@@ -111,13 +116,7 @@ export const AudioPlayer = forwardRef(
           volume,
         });
       },
-      [
-        crossfadeDuration,
-        crossfadeStyle,
-        currentPlayer,
-        isTransitioning,
-        volume,
-      ]
+      [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
     );
 
     const handleGapless1 = useCallback(
@@ -125,13 +124,13 @@ export const AudioPlayer = forwardRef(
         return gaplessHandler({
           currentTime: e.playedSeconds,
           duration: getDuration(player1Ref),
-          isFlac: player1?.suffix === 'flac',
+          isFlac: player1?.container === 'flac',
           isTransitioning,
           nextPlayerRef: player2Ref,
           setIsTransitioning,
         });
       },
-      [isTransitioning, player1?.suffix]
+      [isTransitioning, player1?.container],
     );
 
     const handleGapless2 = useCallback(
@@ -139,46 +138,54 @@ export const AudioPlayer = forwardRef(
         return gaplessHandler({
           currentTime: e.playedSeconds,
           duration: getDuration(player2Ref),
-          isFlac: player2?.suffix === 'flac',
+          isFlac: player2?.container === 'flac',
           isTransitioning,
           nextPlayerRef: player1Ref,
           setIsTransitioning,
         });
       },
-      [isTransitioning, player2?.suffix]
+      [isTransitioning, player2?.container],
     );
 
+    useEffect(() => {
+      if (isElectron()) {
+        if (audioDeviceId) {
+          player1Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
+          player2Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
+        } else {
+          player1Ref.current?.getInternalPlayer()?.setSinkId('');
+          player2Ref.current?.getInternalPlayer()?.setSinkId('');
+        }
+      }
+    }, [audioDeviceId]);
+
     return (
       <>
         <ReactPlayer
           ref={player1Ref}
           height={0}
           muted={muted}
-          playing={currentPlayer === 1 && status === PlayerStatus.Playing}
+          playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
           progressInterval={isTransitioning ? 10 : 250}
           url={player1?.streamUrl}
           volume={volume}
           width={0}
           onEnded={handleOnEnded}
-          onProgress={
-            style === PlaybackStyle.Gapless ? handleGapless1 : handleCrossfade1
-          }
+          onProgress={playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1}
         />
         <ReactPlayer
           ref={player2Ref}
           height={0}
           muted={muted}
-          playing={currentPlayer === 2 && status === PlayerStatus.Playing}
+          playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
           progressInterval={isTransitioning ? 10 : 250}
           url={player2?.streamUrl}
           volume={volume}
           width={0}
           onEnded={handleOnEnded}
-          onProgress={
-            style === PlaybackStyle.Gapless ? handleGapless2 : handleCrossfade2
-          }
+          onProgress={playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2}
         />
       </>
     );
-  }
+  },
 );

src/renderer/components/audio-player/utils/list-handlers.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
-import { Dispatch } from 'react';
-import { CrossfadeStyle } from '../../../../types';
+import type { Dispatch } from 'react';
+import { CrossfadeStyle } from '/@/renderer/types';
 
 export const gaplessHandler = (args: {
   currentTime: number;
@@ -10,14 +10,8 @@ export const gaplessHandler = (args: {
   nextPlayerRef: any;
   setIsTransitioning: Dispatch<boolean>;
 }) => {
-  const {
-    nextPlayerRef,
-    currentTime,
-    duration,
-    isTransitioning,
-    setIsTransitioning,
-    isFlac,
-  } = args;
+  const { nextPlayerRef, currentTime, duration, isTransitioning, setIsTransitioning, isFlac } =
+    args;
 
   if (!isTransitioning) {
     if (currentTime > duration - 2) {
@@ -81,15 +75,12 @@ export const crossfadeHandler = (args: {
     case 'equalPower':
       // https://dsp.stackexchange.com/a/14755
       percentageOfFadeLeft = (timeLeft / fadeDuration) * 2;
-      currentPlayerVolumeCalculation =
-        Math.sqrt(0.5 * percentageOfFadeLeft) * volume;
-      nextPlayerVolumeCalculation =
-        Math.sqrt(0.5 * (2 - percentageOfFadeLeft)) * volume;
+      currentPlayerVolumeCalculation = Math.sqrt(0.5 * percentageOfFadeLeft) * volume;
+      nextPlayerVolumeCalculation = Math.sqrt(0.5 * (2 - percentageOfFadeLeft)) * volume;
       break;
     case 'linear':
       currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
-      nextPlayerVolumeCalculation =
-        ((fadeDuration - timeLeft) / fadeDuration) * volume;
+      nextPlayerVolumeCalculation = ((fadeDuration - timeLeft) / fadeDuration) * volume;
       break;
     case 'dipped':
       // https://math.stackexchange.com/a/4622
@@ -110,19 +101,14 @@ export const crossfadeHandler = (args: {
 
       percentageOfFadeLeft = timeLeft / fadeDuration;
       currentPlayerVolumeCalculation =
-        Math.cos(
-          (Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) - 1)
-        ) * volume;
+        Math.cos((Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) - 1)) * volume;
       nextPlayerVolumeCalculation =
-        Math.cos(
-          (Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) + 1)
-        ) * volume;
+        Math.cos((Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) + 1)) * volume;
       break;
 
     default:
       currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
-      nextPlayerVolumeCalculation =
-        ((fadeDuration - timeLeft) / fadeDuration) * volume;
+      nextPlayerVolumeCalculation = ((fadeDuration - timeLeft) / fadeDuration) * volume;
       break;
   }
 
@@ -130,9 +116,7 @@ export const crossfadeHandler = (args: {
     currentPlayerVolumeCalculation >= 0 ? currentPlayerVolumeCalculation : 0;
 
   const nextPlayerVolume =
-    nextPlayerVolumeCalculation <= volume
-      ? nextPlayerVolumeCalculation
-      : volume;
+    nextPlayerVolumeCalculation <= volume ? nextPlayerVolumeCalculation : volume;
 
   if (currentPlayer === 1) {
     currentPlayerRef.current.getInternalPlayer().volume = currentPlayerVolume;

src/renderer/components/badge/index.tsx

@@ -0,0 +1,34 @@
+import type { BadgeProps as MantineBadgeProps } from '@mantine/core';
+import { createPolymorphicComponent, Badge as MantineBadge } from '@mantine/core';
+import styled from 'styled-components';
+
+export type BadgeProps = MantineBadgeProps;
+
+const StyledBadge = styled(MantineBadge)<BadgeProps>`
+  border-radius: var(--badge-radius);
+
+  .mantine-Badge-root {
+    color: var(--badge-fg);
+  }
+
+  .mantine-Badge-inner {
+    color: var(--badge-fg);
+  }
+`;
+
+const _Badge = ({ children, ...props }: BadgeProps) => {
+  return (
+    <StyledBadge
+      radius="md"
+      size="sm"
+      styles={{
+        root: { background: 'var(--badge-bg)' },
+      }}
+      {...props}
+    >
+      {children}
+    </StyledBadge>
+  );
+};
+
+export const Badge = createPolymorphicComponent<'button', BadgeProps>(_Badge);

src/renderer/components/button/Button.tsx

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import { Button as MantineButton } from '@mantine/core';
-
-interface ButtonProps {
-  icon?: ReactNode;
-}
-
-export const Button = ({ icon }: ButtonProps) => {
-  return <MantineButton>Button</MantineButton>;
-};

src/renderer/components/button/index.tsx

@@ -0,0 +1,183 @@
+import type { Ref } from 'react';
+import React, { useRef, useCallback, useState, forwardRef } from 'react';
+import type { ButtonProps as MantineButtonProps, TooltipProps } from '@mantine/core';
+import { Button as MantineButton, createPolymorphicComponent } from '@mantine/core';
+import { useTimeout } from '@mantine/hooks';
+import styled from 'styled-components';
+import { Spinner } from '/@/renderer/components/spinner';
+import { Tooltip } from '/@/renderer/components/tooltip';
+
+export interface ButtonProps extends MantineButtonProps {
+  children: React.ReactNode;
+  loading?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  tooltip?: Omit<TooltipProps, 'children'>;
+}
+
+interface StyledButtonProps extends ButtonProps {
+  ref: Ref<HTMLButtonElement>;
+}
+
+const StyledButton = styled(MantineButton)<StyledButtonProps>`
+  color: ${(props) => `var(--btn-${props.variant}-fg)`};
+  background: ${(props) => `var(--btn-${props.variant}-bg)`};
+  border: ${(props) => `var(--btn-${props.variant}-border)`};
+  border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  svg {
+    transition: fill 0.2s ease-in-out;
+    fill: ${(props) => `var(--btn-${props.variant}-fg)`};
+  }
+
+  &:disabled {
+    color: ${(props) => `var(--btn-${props.variant}-fg)`};
+    background: ${(props) => `var(--btn-${props.variant}-bg)`};
+
+    opacity: 0.6;
+  }
+
+  &:not([data-disabled])&:hover {
+    color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
+    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+
+    svg {
+      fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+    }
+  }
+
+  &:not([data-disabled])&:focus-visible {
+    color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+  }
+
+  &:active {
+    transform: none;
+  }
+
+  & .mantine-Button-centerLoader {
+    display: none;
+  }
+
+  & .mantine-Button-leftIcon {
+    display: flex;
+    height: 100%;
+    margin-right: 0.5rem;
+    transform: translateY(-0.1rem);
+  }
+
+  .mantine-Button-rightIcon {
+    display: flex;
+    margin-left: 0.5rem;
+  }
+`;
+
+const ButtonChildWrapper = styled.span<{ $loading?: boolean }>`
+  color: ${(props) => props.$loading && 'transparent !important'};
+`;
+
+const SpinnerWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+`;
+
+export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, tooltip, ...props }: ButtonProps, ref) => {
+    if (tooltip) {
+      return (
+        <Tooltip
+          withinPortal
+          {...tooltip}
+        >
+          <StyledButton
+            ref={ref}
+            loaderPosition="center"
+            {...props}
+          >
+            <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
+            {props.loading && (
+              <SpinnerWrapper>
+                <Spinner />
+              </SpinnerWrapper>
+            )}
+          </StyledButton>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <StyledButton
+        ref={ref}
+        loaderPosition="center"
+        {...props}
+      >
+        <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
+        {props.loading && (
+          <SpinnerWrapper>
+            <Spinner />
+          </SpinnerWrapper>
+        )}
+      </StyledButton>
+    );
+  },
+);
+
+export const Button = createPolymorphicComponent<'button', ButtonProps>(_Button);
+
+_Button.defaultProps = {
+  loading: undefined,
+  onClick: undefined,
+  tooltip: undefined,
+};
+
+interface HoldButtonProps extends ButtonProps {
+  timeoutProps: {
+    callback: () => void;
+    duration: number;
+  };
+}
+
+export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
+  const [, setTimeoutRemaining] = useState(timeoutProps.duration);
+  const [isRunning, setIsRunning] = useState(false);
+  const intervalRef = useRef(0);
+
+  const callback = () => {
+    timeoutProps.callback();
+    setTimeoutRemaining(timeoutProps.duration);
+    clearInterval(intervalRef.current);
+    setIsRunning(false);
+  };
+
+  const { start, clear } = useTimeout(callback, timeoutProps.duration);
+
+  const startTimeout = useCallback(() => {
+    if (isRunning) {
+      clearInterval(intervalRef.current);
+      setIsRunning(false);
+      clear();
+    } else {
+      setIsRunning(true);
+      start();
+
+      const intervalId = window.setInterval(() => {
+        setTimeoutRemaining((prev) => prev - 100);
+      }, 100);
+
+      intervalRef.current = intervalId;
+    }
+  }, [clear, isRunning, start]);
+
+  return (
+    <Button
+      sx={{ color: 'var(--danger-color)' }}
+      onClick={startTimeout}
+      {...props}
+    >
+      {isRunning ? 'Cancel' : props.children}
+    </Button>
+  );
+};

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

@@ -0,0 +1,218 @@
+import { useCallback } from 'react';
+import { Center } from '@mantine/core';
+import { RiAlbumFill } from 'react-icons/ri';
+import { generatePath, useNavigate } from 'react-router';
+import { SimpleImg } from 'react-simple-img';
+import styled from 'styled-components';
+import type { CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { CardControls } from '/@/renderer/components/card/card-controls';
+import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
+import { CardRows } from '/@/renderer/components/card/card-rows';
+
+const CardWrapper = styled.div<{
+  link?: boolean;
+}>`
+  padding: 1rem;
+  background: var(--card-default-bg);
+  border-radius: var(--card-default-radius);
+  cursor: ${({ link }) => link && 'pointer'};
+  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
+
+  &:hover {
+    background: var(--card-default-bg-hover);
+  }
+
+  &:hover div {
+    opacity: 1;
+  }
+
+  &:hover * {
+    &::before {
+      opacity: 0.5;
+    }
+  }
+
+  &:focus-visible {
+    outline: 1px solid #fff;
+  }
+`;
+
+const StyledCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border-radius: var(--card-default-radius);
+`;
+
+const ImageSection = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  border-radius: var(--card-default-radius);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
+    content: '';
+    user-select: none;
+  }
+`;
+
+const Image = styled(SimpleImg)`
+  border-radius: var(--card-default-radius);
+  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 20%);
+`;
+
+const ControlsContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  z-index: 50;
+  width: 100%;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+`;
+
+const DetailSection = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Row = styled.div<{ $secondary?: boolean }>`
+  width: 100%;
+  max-width: 100%;
+  height: 22px;
+  padding: 0 0.2rem;
+  overflow: hidden;
+  color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
+`;
+
+interface BaseGridCardProps {
+  controls: {
+    cardRows: CardRow<Album | Artist | AlbumArtist>[];
+    itemType: LibraryItem;
+    playButtonBehavior: Play;
+    route: CardRoute;
+  };
+  data: any;
+  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
+  loading?: boolean;
+  size: number;
+}
+
+export const AlbumCard = ({
+  loading,
+  size,
+  handlePlayQueueAdd,
+  data,
+  controls,
+}: BaseGridCardProps) => {
+  const navigate = useNavigate();
+  const { itemType, cardRows, route } = controls;
+
+  const handleNavigate = useCallback(() => {
+    navigate(
+      generatePath(
+        route.route,
+        route.slugs?.reduce((acc, slug) => {
+          return {
+            ...acc,
+            [slug.slugProperty]: data[slug.idProperty],
+          };
+        }, {}),
+      ),
+    );
+  }, [data, navigate, route.route, route.slugs]);
+
+  if (!loading) {
+    return (
+      <CardWrapper
+        link
+        onClick={handleNavigate}
+      >
+        <StyledCard>
+          <ImageSection>
+            {data?.imageUrl ? (
+              <Image
+                animationDuration={0.3}
+                height={size}
+                imgStyle={{ objectFit: 'cover' }}
+                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
+                src={data?.imageUrl}
+                width={size}
+              />
+            ) : (
+              <Center
+                sx={{
+                  background: 'var(--placeholder-bg)',
+                  borderRadius: 'var(--card-default-radius)',
+                  height: `${size}px`,
+                  width: `${size}px`,
+                }}
+              >
+                <RiAlbumFill
+                  color="var(--placeholder-fg)"
+                  size={35}
+                />
+              </Center>
+            )}
+            <ControlsContainer>
+              <CardControls
+                handlePlayQueueAdd={handlePlayQueueAdd}
+                itemData={data}
+                itemType={itemType}
+              />
+            </ControlsContainer>
+          </ImageSection>
+          <DetailSection>
+            <CardRows
+              data={data}
+              rows={cardRows}
+            />
+          </DetailSection>
+        </StyledCard>
+      </CardWrapper>
+    );
+  }
+
+  return (
+    <CardWrapper>
+      <StyledCard style={{ alignItems: 'center', display: 'flex' }}>
+        <Skeleton
+          visible
+          height={size}
+          radius="sm"
+          width={size}
+        >
+          <ImageSection />
+        </Skeleton>
+        <DetailSection style={{ width: '100%' }}>
+          {cardRows.map((_row: CardRow<Album>, index: number) => (
+            <Skeleton
+              visible
+              height={15}
+              my={3}
+              radius="md"
+              width={!data ? (index > 0 ? '50%' : '90%') : '100%'}
+            >
+              <Row />
+            </Skeleton>
+          ))}
+        </DetailSection>
+      </StyledCard>
+    </CardWrapper>
+  );
+};

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

@@ -0,0 +1,177 @@
+import type { MouseEvent } from 'react';
+import React from 'react';
+import type { UnstyledButtonProps } from '@mantine/core';
+import { Group } from '@mantine/core';
+import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/ri';
+import styled from 'styled-components';
+import { _Button } from '/@/renderer/components/button';
+import type { PlayQueueAddOptions } from '/@/renderer/types';
+import { Play } from '/@/renderer/types';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { LibraryItem } from '/@/renderer/api/types';
+import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
+import {
+  ALBUM_CONTEXT_MENU_ITEMS,
+  ARTIST_CONTEXT_MENU_ITEMS,
+} from '/@/renderer/features/context-menu/context-menu-items';
+
+type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;
+
+const PlayButton = styled.button<PlayButtonType>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  background-color: rgb(255, 255, 255);
+  border: none;
+  border-radius: 50%;
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+  transition: scale 0.2s linear;
+
+  &:hover {
+    opacity: 1;
+    scale: 1.1;
+  }
+
+  &:active {
+    opacity: 1;
+    scale: 1;
+  }
+
+  svg {
+    fill: rgb(0, 0, 0);
+    stroke: rgb(0, 0, 0);
+  }
+`;
+
+const SecondaryButton = styled(_Button)`
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+  transition: scale 0.2s linear;
+
+  &:hover {
+    opacity: 1;
+    scale: 1.1;
+  }
+
+  &:active {
+    opacity: 1;
+    scale: 1;
+  }
+`;
+
+const GridCardControlsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+
+const ControlsRow = styled.div`
+  width: 100%;
+  height: calc(100% / 3);
+`;
+
+// const TopControls = styled(ControlsRow)`
+//   display: flex;
+//   align-items: flex-start;
+//   justify-content: space-between;
+//   padding: 0.5rem;
+// `;
+
+// const CenterControls = styled(ControlsRow)`
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   padding: 0.5rem;
+// `;
+
+const BottomControls = styled(ControlsRow)`
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 1rem 0.5rem;
+`;
+
+const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
+  svg {
+    fill: ${(props) => props.isFavorite && 'var(--primary-color)'};
+  }
+`;
+
+export const CardControls = ({
+  itemData,
+  itemType,
+  handlePlayQueueAdd,
+}: {
+  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
+  itemData: any;
+  itemType: LibraryItem;
+}) => {
+  const playButtonBehavior = usePlayButtonBehavior();
+
+  const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
+    e.preventDefault();
+    e.stopPropagation();
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: [itemData.id],
+        type: itemType,
+      },
+      playType: playType || playButtonBehavior,
+    });
+  };
+
+  const handleContextMenu = useHandleGeneralContextMenu(
+    itemType,
+    itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
+  );
+
+  return (
+    <GridCardControlsContainer>
+      <BottomControls>
+        <PlayButton onClick={handlePlay}>
+          <RiPlayFill size={25} />
+        </PlayButton>
+        <Group spacing="xs">
+          <SecondaryButton
+            disabled
+            p={5}
+            sx={{ svg: { fill: 'white !important' } }}
+            variant="subtle"
+          >
+            <FavoriteWrapper isFavorite={itemData?.isFavorite}>
+              {itemData?.isFavorite ? (
+                <RiHeartFill size={20} />
+              ) : (
+                <RiHeartLine
+                  color="white"
+                  size={20}
+                />
+              )}
+            </FavoriteWrapper>
+          </SecondaryButton>
+          <SecondaryButton
+            p={5}
+            sx={{ svg: { fill: 'white !important' } }}
+            variant="subtle"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleContextMenu(e, [itemData]);
+            }}
+          >
+            <RiMore2Fill
+              color="white"
+              size={20}
+            />
+          </SecondaryButton>
+        </Group>
+      </BottomControls>
+    </GridCardControlsContainer>
+  );
+};

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

@@ -0,0 +1,212 @@
+import React from 'react';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Album, AlbumArtist, Artist } from '/@/renderer/api/types';
+import { Text } from '/@/renderer/components/text';
+import { AppRoute } from '/@/renderer/router/routes';
+import { CardRow } from '/@/renderer/types';
+
+const Row = styled.div<{ $secondary?: boolean }>`
+  width: 100%;
+  max-width: 100%;
+  height: 22px;
+  padding: 0 0.2rem;
+  overflow: hidden;
+  color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
+`;
+
+interface CardRowsProps {
+  data: any;
+  rows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+}
+
+export const CardRows = ({ data, rows }: CardRowsProps) => {
+  return (
+    <>
+      {rows.map((row, index: number) => {
+        if (row.arrayProperty && row.route) {
+          return (
+            <Row
+              key={`row-${row.property}-${index}`}
+              $secondary={index > 0}
+            >
+              {data[row.property].map((item: any, itemIndex: number) => (
+                <React.Fragment key={`${data.id}-${item.id}`}>
+                  {itemIndex > 0 && (
+                    <Text
+                      $noSelect
+                      $secondary
+                      sx={{
+                        display: 'inline-block',
+                        padding: '0 2px 0 1px',
+                      }}
+                    >
+                      ,
+                    </Text>
+                  )}{' '}
+                  <Text
+                    $link
+                    $noSelect
+                    $secondary={index > 0}
+                    component={Link}
+                    overflow="hidden"
+                    size={index > 0 ? 'sm' : 'md'}
+                    to={generatePath(
+                      row.route!.route,
+                      row.route!.slugs?.reduce((acc, slug) => {
+                        return {
+                          ...acc,
+                          [slug.slugProperty]: data[row.property][itemIndex][slug.idProperty],
+                        };
+                      }, {}),
+                    )}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {row.arrayProperty && item[row.arrayProperty]}
+                  </Text>
+                </React.Fragment>
+              ))}
+            </Row>
+          );
+        }
+
+        if (row.arrayProperty) {
+          return (
+            <Row key={`row-${row.property}`}>
+              {data[row.property].map((item: any) => (
+                <Text
+                  key={`${data.id}-${item.id}`}
+                  $noSelect
+                  $secondary={index > 0}
+                  overflow="hidden"
+                  size={index > 0 ? 'sm' : 'md'}
+                >
+                  {row.arrayProperty && item[row.arrayProperty]}
+                </Text>
+              ))}
+            </Row>
+          );
+        }
+
+        return (
+          <Row key={`row-${row.property}`}>
+            {row.route ? (
+              <Text
+                $link
+                $noSelect
+                component={Link}
+                overflow="hidden"
+                to={generatePath(
+                  row.route.route,
+                  row.route.slugs?.reduce((acc, slug) => {
+                    return {
+                      ...acc,
+                      [slug.slugProperty]: data[slug.idProperty],
+                    };
+                  }, {}),
+                )}
+                onClick={(e) => e.stopPropagation()}
+              >
+                {data && data[row.property]}
+              </Text>
+            ) : (
+              <Text
+                $noSelect
+                $secondary={index > 0}
+                overflow="hidden"
+                size={index > 0 ? 'sm' : 'md'}
+              >
+                {data && data[row.property]}
+              </Text>
+            )}
+          </Row>
+        );
+      })}
+    </>
+  );
+};
+
+export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
+  albumArtists: {
+    arrayProperty: 'name',
+    property: 'albumArtists',
+    route: {
+      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+      slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+    },
+  },
+  artists: {
+    arrayProperty: 'name',
+    property: 'artists',
+    route: {
+      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+      slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+    },
+  },
+  createdAt: {
+    property: 'createdAt',
+  },
+  duration: {
+    property: 'duration',
+  },
+  lastPlayedAt: {
+    property: 'lastPlayedAt',
+  },
+  name: {
+    property: 'name',
+    route: {
+      route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+      slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
+    },
+  },
+  playCount: {
+    property: 'playCount',
+  },
+  rating: {
+    property: 'userRating',
+  },
+  releaseDate: {
+    property: 'releaseDate',
+  },
+  releaseYear: {
+    property: 'releaseYear',
+  },
+  songCount: {
+    property: 'songCount',
+  },
+};
+
+export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
+  albumCount: {
+    property: 'albumCount',
+  },
+  duration: {
+    property: 'duration',
+  },
+  genres: {
+    property: 'genres',
+  },
+  lastPlayedAt: {
+    property: 'lastPlayedAt',
+  },
+  name: {
+    property: 'name',
+    route: {
+      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+      slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+    },
+  },
+  playCount: {
+    property: 'playCount',
+  },
+  rating: {
+    property: 'userRating',
+  },
+  songCount: {
+    property: 'songCount',
+  },
+};

src/renderer/components/card/index.tsx

@@ -0,0 +1,2 @@
+export * from './album-card';
+export * from './card-rows';

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

@@ -0,0 +1,206 @@
+import { Center, Stack } from '@mantine/core';
+import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
+import { generatePath, Link } from 'react-router-dom';
+import { SimpleImg } from 'react-simple-img';
+import styled, { css } from 'styled-components';
+import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
+import { CardRows } from '/@/renderer/components/card';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
+import { CardRow, PlayQueueAddOptions, Play, CardRoute } from '/@/renderer/types';
+
+interface BaseGridCardProps {
+  controls: {
+    cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+    handleFavorite: (options: {
+      id: string[];
+      isFavorite: boolean;
+      itemType: LibraryItem;
+      serverId: string;
+    }) => void;
+    handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
+    itemType: LibraryItem;
+    playButtonBehavior: Play;
+    route: CardRoute;
+  };
+  data: any;
+  isLoading?: boolean;
+}
+
+const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
+  pointer-events: auto;
+
+  .card-controls {
+    opacity: 0;
+  }
+`;
+
+const ImageContainerStyles = css`
+  position: relative;
+  display: flex;
+  align-items: center;
+  aspect-ratio: 1/1;
+  overflow: hidden;
+  background: var(--card-default-bg);
+  border-radius: var(--card-poster-radius);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
+    content: '';
+    user-select: none;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.5;
+    }
+  }
+
+  &:hover .card-controls {
+    opacity: 1;
+  }
+`;
+
+const ImageContainer = styled(Link)<{ $isFavorite?: boolean }>`
+  ${ImageContainerStyles}
+`;
+
+const ImageContainerSkeleton = styled.div`
+  ${ImageContainerStyles}
+`;
+
+const Image = styled(SimpleImg)`
+  width: 100%;
+  max-width: 100%;
+  height: 100% !important;
+  max-height: 100%;
+  border: 0;
+
+  img {
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const DetailContainer = styled.div`
+  margin-top: 0.5rem;
+`;
+
+export const PosterCard = ({
+  data,
+  controls,
+  isLoading,
+  uniqueId,
+}: BaseGridCardProps & { uniqueId: string }) => {
+  if (!isLoading) {
+    const path = generatePath(
+      controls.route.route,
+      controls.route.slugs?.reduce((acc, slug) => {
+        return {
+          ...acc,
+          [slug.slugProperty]: data[slug.idProperty],
+        };
+      }, {}),
+    );
+
+    let Placeholder = RiAlbumFill;
+
+    switch (controls.itemType) {
+      case LibraryItem.ALBUM:
+        Placeholder = RiAlbumFill;
+        break;
+      case LibraryItem.ARTIST:
+        Placeholder = RiUserVoiceFill;
+        break;
+      case LibraryItem.ALBUM_ARTIST:
+        Placeholder = RiUserVoiceFill;
+        break;
+      case LibraryItem.PLAYLIST:
+        Placeholder = RiPlayListFill;
+        break;
+      default:
+        Placeholder = RiAlbumFill;
+        break;
+    }
+
+    return (
+      <PosterCardContainer key={`${uniqueId}-${data.id}`}>
+        <ImageContainer
+          $isFavorite={data?.userFavorite}
+          to={path}
+        >
+          {data?.imageUrl ? (
+            <Image
+              importance="auto"
+              placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
+              src={data?.imageUrl}
+            />
+          ) : (
+            <Center
+              sx={{
+                background: 'var(--placeholder-bg)',
+                borderRadius: 'var(--card-default-radius)',
+                height: '100%',
+                width: '100%',
+              }}
+            >
+              <Placeholder
+                color="var(--placeholder-fg)"
+                size={35}
+              />
+            </Center>
+          )}
+          <GridCardControls
+            handleFavorite={controls.handleFavorite}
+            handlePlayQueueAdd={controls.handlePlayQueueAdd}
+            itemData={data}
+            itemType={controls.itemType}
+          />
+        </ImageContainer>
+        <DetailContainer>
+          <CardRows
+            data={data}
+            rows={controls.cardRows}
+          />
+        </DetailContainer>
+      </PosterCardContainer>
+    );
+  }
+
+  return (
+    <PosterCardContainer key={`placeholder-${uniqueId}-${data.id}`}>
+      <Skeleton
+        visible
+        radius="sm"
+      >
+        <ImageContainerSkeleton />
+      </Skeleton>
+      <DetailContainer>
+        <Stack spacing="sm">
+          {controls.cardRows.map((row, index) => (
+            <Skeleton
+              key={`${index}-${row.arrayProperty}`}
+              visible
+              height={14}
+              radius="sm"
+            />
+          ))}
+        </Stack>
+      </DetailContainer>
+    </PosterCardContainer>
+  );
+};

src/renderer/components/checkbox/index.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { Checkbox as MantineCheckbox, CheckboxProps } from '@mantine/core';
+import styled from 'styled-components';
+
+const StyledCheckbox = styled(MantineCheckbox)`
+  & .mantine-Checkbox-input {
+    background-color: var(--input-bg);
+
+    &:checked {
+      background-color: var(--primary-color);
+      border-color: var(--primary-color);
+    }
+
+    &:hover:not(:checked) {
+      background-color: var(--primary-color);
+      opacity: 0.5;
+    }
+
+    transition: none;
+  }
+`;
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ ...props }: CheckboxProps, ref) => {
+    return (
+      <StyledCheckbox
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,127 @@
+import { forwardRef, ReactNode, Ref } from 'react';
+import { Box, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
+import { motion, Variants } from 'framer-motion';
+import styled from 'styled-components';
+
+interface ContextMenuProps {
+  children: ReactNode;
+  maxWidth?: number;
+  minWidth?: number;
+  xPos: number;
+  yPos: number;
+}
+
+const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children'>>`
+  position: absolute;
+  top: ${({ yPos }) => yPos}px !important;
+  left: ${({ xPos }) => xPos}px !important;
+  z-index: 1000;
+  min-width: ${({ minWidth }) => minWidth}px;
+  max-width: ${({ maxWidth }) => maxWidth}px;
+  background: var(--dropdown-menu-bg);
+  border-radius: var(--dropdown-menu-border-radius);
+  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
+
+  button:first-child {
+    border-top-left-radius: var(--dropdown-menu-border-radius);
+    border-top-right-radius: var(--dropdown-menu-border-radius);
+  }
+
+  button:last-child {
+    border-bottom-right-radius: var(--dropdown-menu-border-radius);
+    border-bottom-left-radius: var(--dropdown-menu-border-radius);
+  }
+`;
+
+export const StyledContextMenuButton = styled(UnstyledButton)`
+  padding: var(--dropdown-menu-item-padding);
+  color: var(--dropdown-menu-fg);
+  font-weight: 500;
+  font-family: var(--content-font-family);
+  text-align: left;
+  background: var(--dropdown-menu-bg);
+  border: none;
+  cursor: default;
+
+  & .mantine-Button-inner {
+    justify-content: flex-start;
+  }
+
+  &:hover {
+    background: var(--dropdown-menu-bg-hover);
+  }
+
+  &:disabled {
+    background: transparent;
+    opacity: 0.6;
+  }
+`;
+
+export const ContextMenuButton = forwardRef(
+  (
+    {
+      children,
+      rightIcon,
+      leftIcon,
+      ...props
+    }: UnstyledButtonProps &
+      React.ComponentPropsWithoutRef<'button'> & {
+        leftIcon?: ReactNode;
+        rightIcon?: ReactNode;
+      },
+    ref: any,
+  ) => {
+    return (
+      <StyledContextMenuButton
+        {...props}
+        key={props.key}
+        ref={ref}
+        as="button"
+        disabled={props.disabled}
+        onClick={props.onClick}
+      >
+        <Group position="apart">
+          <Group spacing="md">
+            <Box>{leftIcon}</Box>
+            <Box mr="2rem">{children}</Box>
+          </Group>
+          <Box>{rightIcon}</Box>
+        </Group>
+      </StyledContextMenuButton>
+    );
+  },
+);
+
+const variants: Variants = {
+  closed: {
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+    },
+  },
+  open: {
+    opacity: 1,
+    transition: {
+      duration: 0.1,
+    },
+  },
+};
+
+export const ContextMenu = forwardRef(
+  ({ yPos, xPos, minWidth, maxWidth, children }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
+    return (
+      <ContextMenuContainer
+        ref={ref}
+        animate="open"
+        initial="closed"
+        maxWidth={maxWidth}
+        minWidth={minWidth}
+        variants={variants}
+        xPos={xPos}
+        yPos={yPos}
+      >
+        {children}
+      </ContextMenuContainer>
+    );
+  },
+);