add initial files

.dockerignore

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

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

@@ -5,7 +5,6 @@
 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 || {})],
@@ -49,7 +48,6 @@ 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,16 +22,21 @@ 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,27 +1,18 @@
 module.exports = {
   extends: ['erb', 'plugin:typescript-sort-keys/recommended'],
-  ignorePatterns: ['.erb/*', 'server'],
-  parser: '@typescript-eslint/parser',
   parserOptions: {
     createDefaultProgram: true,
-    ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
     project: './tsconfig.json',
     sourceType: 'module',
-    tsconfigRootDir: './',
+    tsconfigRootDir: __dirname,
   },
-  plugins: ['@typescript-eslint', 'import', 'sort-keys-fix'],
+  plugins: ['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',
@@ -50,8 +41,6 @@ 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',
@@ -64,9 +53,8 @@ module.exports = {
         shorthandLast: false,
       },
     ],
-    'react/no-array-index-key': 'off',
+    // Since React 17 and typescript 4.1 you can safely disable the rule
     'react/react-in-jsx-scope': 'off',
-    'react/require-default-props': 'off',
     'sort-keys-fix/sort-keys-fix': 'warn',
   },
   settings: {
@@ -78,10 +66,7 @@ module.exports = {
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
-      typescript: {
-        alwaysTryTypes: true,
-        project: './tsconfig.json',
-      },
+      typescript: {},
       webpack: {
         config: require.resolve('./.erb/configs/webpack.config.eslint.ts'),
       },

.github/FUNDING.yml

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

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

@@ -1,54 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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,9 +1,16 @@
-name: Publish (Manual)
+name: Publish
 
-on: workflow_dispatch
+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:
@@ -26,14 +33,14 @@ jobs:
 
       - 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 }}
-        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 --linux
-          on_retry_command: npm cache clean --force
+        run: |
+          npm run postinstall
+          npm run build
+          npm exec electron-builder -- --publish always --win --mac --linux

.prettierrc

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

.stylelintrc.json

@@ -17,9 +17,6 @@
         "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,11 +4,6 @@
     ".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": {
@@ -31,13 +26,5 @@
     "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,4 +2,585 @@
 
 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).
+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

Dockerfile

@@ -0,0 +1,42 @@
+# 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,60 +1,129 @@
-# Feishin
+<img src="assets/icon.png" alt="sonixd logo" title="sonixd" align="right" height="60px" />
 
-  <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>
+# Sonixd
 
-Repository for the rewrite of [Sonixd](https://github.com/jeffvli/sonixd).
+  <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>
 
-## Getting Started
+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>.
 
-Download the [latest desktop client](https://github.com/jeffvli/feishin/releases).
+- [**Usage documentation & FAQ**](https://github.com/jeffvli/sonixd/discussions/15)
+- [**Theming documentation**](https://github.com/jeffvli/sonixd/discussions/61)
 
-### After installing the server and database
+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)
 
-You can access the desktop client via the [latest release](https://github.com/jeffvli/feishin/releases), or you can visit the web client at your server URL (e.g http://192.168.0.1:8643).
+### [Demo Sonixd using Navidrome](https://github.com/jeffvli/sonixd/discussions/244)
 
-## FAQ
+## Features
 
-### What music servers does Feishin support?
+- 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
 
-Feishin supports any music server that implements a [Navidrome](https://www.navidrome.org/) or [Jellyfin](https://jellyfin.org/) API.
+<h5>* Gapless playback is artifically created using the crossfading players so it may not be perfect, YMMV.</h5>
 
-- [Jellyfin](https://github.com/jellyfin/jellyfin)
-- [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/)~~
-- ~~[Supysonic](https://github.com/spl0k/supysonic)~~
+## Screenshots
 
-## Development
+<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>
 
-Built and tested using Node `v16.15.0`.
+## Install
 
-This project is built off of [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate) v4.6.0.
+You can install sonixd by downloading the [latest release](https://github.com/jeffvli/sonixd/releases) for your specified operating system.
+
+---
+
+### Windows
+
+If you prefer not to download the release binary, you can install using `winget`.
+
+Using your favorite terminal (cmd/pwsh):
+
+```
+winget install sonixd
+```
+
+---
+
+### 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).
 
 ## License
 
-[GNU General Public License v3.0 ©](https://github.com/jeffvli/feishin/blob/dev/LICENSE)
+[GNU General Public License v3.0 ©](https://github.com/jeffvli/sonixd/blob/main/LICENSE)

docker-compose.dev.yml

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,25 @@
+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

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

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "feishin",
-  "productName": "Feishin",
-  "description": "Feishin music server",
-  "version": "0.0.1-alpha5",
+  "name": "sonixd",
+  "productName": "Sonixd",
+  "description": "A full-featured Subsonic/Jellyfin compatible music player",
   "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",
@@ -11,19 +10,19 @@
     "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 electronmon -r ts-node/register/transpile-only ./src/main/main.ts",
+    "start:main": "cross-env NODE_ENV=development electron -r ts-node/register/transpile-only ./src/main/main.ts",
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
     "start:web": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.web.ts",
     "test": "jest",
     "prepare": "husky install",
     "i18next": "i18next -c src/renderer/i18n/i18next-parser.config.js",
-    "prod:buildserver": "pwsh -c \"./scripts/server-build.ps1\"",
-    "prod:publishserver": "pwsh -c \"./scripts/server-publish.ps1\""
+    "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\""
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -40,8 +39,8 @@
     ]
   },
   "build": {
-    "productName": "Feishin",
-    "appId": "org.jeffvli.feishin",
+    "productName": "Sonixd",
+    "appId": "org.erb.sonixd",
     "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
     "asar": true,
     "asarUnpack": "**\\*.{node,dll}",
@@ -104,12 +103,12 @@
     "publish": {
       "provider": "github",
       "owner": "jeffvli",
-      "repo": "feishin"
+      "repo": "sonixd"
     }
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jeffvli/feishin.git"
+    "url": "git+https://github.com/jeffvli/sonixd.git"
   },
   "author": {
     "name": "jeffvli",
@@ -118,7 +117,7 @@
   "contributors": [],
   "license": "GPL-3.0",
   "bugs": {
-    "url": "https://github.com/jeffvli/feishin/issues"
+    "url": "https://github.com/jeffvli/sonixd/issues"
   },
   "keywords": [
     "subsonic",
@@ -128,7 +127,7 @@
     "react",
     "electron"
   ],
-  "homepage": "https://github.com/jeffvli/feishin",
+  "homepage": "https://github.com/jeffvli/sonixd",
   "jest": {
     "testURL": "http://localhost/",
     "testEnvironment": "jsdom",
@@ -163,23 +162,24 @@
     "@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.188",
+    "@types/lodash": "^4.14.182",
     "@types/md5": "^2.3.2",
     "@types/node": "^17.0.23",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@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-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.26",
+    "@types/styled-components": "^5.1.25",
     "@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.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
     "browserslist-config-erb": "^0.0.3",
     "chalk": "^4.1.2",
     "concurrently": "^7.1.0",
@@ -188,13 +188,13 @@
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "detect-port": "^1.3.0",
-    "electron": "^21.2.0",
+    "electron": "^18.0.1",
     "electron-builder": "^23.0.3",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.1",
     "electron-rebuild": "^3.2.7",
     "electronmon": "^2.0.2",
-    "eslint": "^8.30.0",
+    "eslint": "^8.12.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-erb": "^4.0.3",
     "eslint-import-resolver-typescript": "^2.7.1",
@@ -236,8 +236,7 @@
     "ts-jest": "^27.1.4",
     "ts-loader": "^9.2.8",
     "ts-node": "^10.7.0",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.8.4",
+    "typescript": "^4.6.4",
     "typescript-plugin-styled-components": "^2.0.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.71.0",
@@ -247,58 +246,43 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@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.0-alpha.5",
-    "@mantine/dates": "^6.0.0-alpha.5",
-    "@mantine/dropzone": "^6.0.0-alpha.5",
-    "@mantine/form": "^6.0.0-alpha.5",
-    "@mantine/hooks": "^6.0.0-alpha.5",
-    "@mantine/modals": "^6.0.0-alpha.5",
-    "@mantine/notifications": "^6.0.0-alpha.5",
-    "@mantine/utils": "^6.0.0-alpha.5",
-    "@tanstack/react-query": "^4.24.4",
-    "@tanstack/react-query-devtools": "^4.24.4",
-    "dayjs": "^1.11.6",
+    "@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",
     "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": "^8.1.3",
+    "framer-motion": "^6.4.2",
     "history": "^5.3.0",
     "i18next": "^21.6.16",
     "immer": "^9.0.15",
     "is-electron": "^2.2.1",
-    "ky": "^0.33.0",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
-    "memoize-one": "^6.0.0",
-    "mpris-service": "^2.1.2",
     "nanoid": "^3.3.3",
     "net": "^1.0.2",
     "node-mpv": "^2.0.0-beta.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-error-boundary": "^3.1.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.16.7",
-    "react-icons": "^4.7.1",
-    "react-player": "^2.11.0",
-    "react-router": "^6.5.0",
-    "react-router-dom": "^6.5.0",
-    "react-simple-img": "^3.0.0",
+    "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.8",
+    "react-window": "^1.8.7",
     "react-window-infinite-loader": "^1.0.8",
-    "styled-components": "^5.3.6",
-    "zod": "^3.19.1",
-    "zustand": "^4.1.4"
+    "styled-components": "^5.3.5",
+    "tabler-icons-react": "^1.46.0",
+    "zustand": "^4.0.0-rc.1"
   },
   "resolutions": {
     "styled-components": "^5"
@@ -308,10 +292,18 @@
     "npm": ">=7.x"
   },
   "browserslist": [],
-  "electronmon": {
-    "patterns": [
-      "!server",
-      "!src/renderer"
-    ]
+  "prettier": {
+    "overrides": [
+      {
+        "files": [
+          ".prettierrc",
+          ".eslintrc"
+        ],
+        "options": {
+          "parser": "json"
+        }
+      }
+    ],
+    "singleQuote": true
   }
 }

release/app/package-lock.json

@@ -1,743 +1,14 @@
 {
-  "name": "feishin",
-  "version": "0.0.1-alpha5",
+  "name": "sonixd",
+  "version": "1.0.0-alpha1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "feishin",
-      "version": "0.0.1-alpha5",
+      "name": "sonixd",
+      "version": "1.0.0-alpha1",
       "hasInstallScript": true,
-      "license": "GPL-3.0",
-      "dependencies": {
-        "mpris-service": "^2.1.2"
-      }
-    },
-    "node_modules/@nornagon/put": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@nornagon/put/-/put-0.0.8.tgz",
-      "integrity": "sha512-ugvXJjwF5ldtUpa7D95kruNJ41yFQDEKyF5CW4TgKJnh+W/zmlBzXXeKTyqIgwMFrkePN2JqOBqcF0M0oOunow==",
-      "engines": {
-        "node": ">=0.3.0"
-      }
-    },
-    "node_modules/abstract-socket": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/abstract-socket/-/abstract-socket-2.1.1.tgz",
-      "integrity": "sha512-YZJizsvS1aBua5Gd01woe4zuyYBGgSMeqDOB6/ChwdTI904KP6QGtJswXl4hcqWxbz86hQBe++HWV0hF1aGUtA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "dependencies": {
-        "bindings": "^1.2.1",
-        "nan": "^2.12.1"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "optional": true,
-      "dependencies": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/dbus-next": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/dbus-next/-/dbus-next-0.9.2.tgz",
-      "integrity": "sha512-tzQq/+wrTZ2yU+U5PoeXc97KABhX2v55C/T0finH3tSKYuI8H/SqppIFymBBrUHcK13LvEGY3vdj3ikPPenL5g==",
-      "dependencies": {
-        "@nornagon/put": "0.0.8",
-        "event-stream": "3.3.4",
-        "hexy": "^0.2.10",
-        "jsbi": "^2.0.5",
-        "long": "^4.0.0",
-        "safe-buffer": "^5.1.1",
-        "xml2js": "^0.4.17"
-      },
-      "optionalDependencies": {
-        "abstract-socket": "^2.0.0"
-      }
-    },
-    "node_modules/deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dependencies": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-      "dependencies": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
-    },
-    "node_modules/event-stream": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
-      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
-      "dependencies": {
-        "duplexer": "~0.1.1",
-        "from": "~0",
-        "map-stream": "~0.1.0",
-        "pause-stream": "0.0.11",
-        "split": "0.3",
-        "stream-combiner": "~0.0.4",
-        "through": "~2.3.1"
-      }
-    },
-    "node_modules/file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "optional": true
-    },
-    "node_modules/from": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
-      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-    },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
-      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dependencies": {
-        "function-bind": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dependencies": {
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hexy": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/hexy/-/hexy-0.2.11.tgz",
-      "integrity": "sha512-ciq6hFsSG/Bpt2DmrZJtv+56zpPdnq+NQ4ijEFrveKN0ZG1mhl/LdT1NQZ9se6ty1fACcI4d4vYqC9v8EYpH2A==",
-      "bin": {
-        "hexy": "bin/hexy_cmd.js"
-      }
-    },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/jsbi": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-2.0.5.tgz",
-      "integrity": "sha512-TzO/62Hxeb26QMb4IGlI/5X+QLr9Uqp1FPkwp2+KOICW+Q+vSuFj61c8pkT6wAns4WcK56X7CmSHhJeDGWOqxQ=="
-    },
-    "node_modules/long": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
-    },
-    "node_modules/map-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g=="
-    },
-    "node_modules/mpris-service": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/mpris-service/-/mpris-service-2.1.2.tgz",
-      "integrity": "sha512-AC6WepCnFWwOME9OWplHZ8ps/BB+g9QrEpUKCv7wX82fDPzR3nPrypOFmL/Fm0JloEAu6QTWSfDLLc6mM/jinw==",
-      "dependencies": {
-        "dbus-next": "^0.9.2",
-        "deep-equal": "^1.0.1",
-        "source-map-support": "^0.5.11"
-      }
-    },
-    "node_modules/nan": {
-      "version": "2.17.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
-      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
-      "optional": true
-    },
-    "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/pause-stream": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
-      "dependencies": {
-        "through": "~2.3"
-      }
-    },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "functions-have-names": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/split": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
-      "dependencies": {
-        "through": "2"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/stream-combiner": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
-      "dependencies": {
-        "duplexer": "~0.1.1"
-      }
-    },
-    "node_modules/through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
-    },
-    "node_modules/xml2js": {
-      "version": "0.4.23",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
-      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    }
-  },
-  "dependencies": {
-    "@nornagon/put": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@nornagon/put/-/put-0.0.8.tgz",
-      "integrity": "sha512-ugvXJjwF5ldtUpa7D95kruNJ41yFQDEKyF5CW4TgKJnh+W/zmlBzXXeKTyqIgwMFrkePN2JqOBqcF0M0oOunow=="
-    },
-    "abstract-socket": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/abstract-socket/-/abstract-socket-2.1.1.tgz",
-      "integrity": "sha512-YZJizsvS1aBua5Gd01woe4zuyYBGgSMeqDOB6/ChwdTI904KP6QGtJswXl4hcqWxbz86hQBe++HWV0hF1aGUtA==",
-      "optional": true,
-      "requires": {
-        "bindings": "^1.2.1",
-        "nan": "^2.12.1"
-      }
-    },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
-    "call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "requires": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      }
-    },
-    "dbus-next": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/dbus-next/-/dbus-next-0.9.2.tgz",
-      "integrity": "sha512-tzQq/+wrTZ2yU+U5PoeXc97KABhX2v55C/T0finH3tSKYuI8H/SqppIFymBBrUHcK13LvEGY3vdj3ikPPenL5g==",
-      "requires": {
-        "@nornagon/put": "0.0.8",
-        "abstract-socket": "^2.0.0",
-        "event-stream": "3.3.4",
-        "hexy": "^0.2.10",
-        "jsbi": "^2.0.5",
-        "long": "^4.0.0",
-        "safe-buffer": "^5.1.1",
-        "xml2js": "^0.4.17"
-      }
-    },
-    "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      }
-    },
-    "define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-      "requires": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      }
-    },
-    "duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
-    },
-    "event-stream": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
-      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
-      "requires": {
-        "duplexer": "~0.1.1",
-        "from": "~0",
-        "map-stream": "~0.1.0",
-        "pause-stream": "0.0.11",
-        "split": "0.3",
-        "stream-combiner": "~0.0.4",
-        "through": "~2.3.1"
-      }
-    },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "optional": true
-    },
-    "from": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
-      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
-    },
-    "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-    },
-    "functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
-    },
-    "get-intrinsic": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
-      "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-      "requires": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
-      }
-    },
-    "has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "requires": {
-        "function-bind": "^1.1.1"
-      }
-    },
-    "has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "requires": {
-        "get-intrinsic": "^1.1.1"
-      }
-    },
-    "has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
-    },
-    "has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "requires": {
-        "has-symbols": "^1.0.2"
-      }
-    },
-    "hexy": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/hexy/-/hexy-0.2.11.tgz",
-      "integrity": "sha512-ciq6hFsSG/Bpt2DmrZJtv+56zpPdnq+NQ4ijEFrveKN0ZG1mhl/LdT1NQZ9se6ty1fACcI4d4vYqC9v8EYpH2A=="
-    },
-    "is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
-    "jsbi": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-2.0.5.tgz",
-      "integrity": "sha512-TzO/62Hxeb26QMb4IGlI/5X+QLr9Uqp1FPkwp2+KOICW+Q+vSuFj61c8pkT6wAns4WcK56X7CmSHhJeDGWOqxQ=="
-    },
-    "long": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
-    },
-    "map-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g=="
-    },
-    "mpris-service": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/mpris-service/-/mpris-service-2.1.2.tgz",
-      "integrity": "sha512-AC6WepCnFWwOME9OWplHZ8ps/BB+g9QrEpUKCv7wX82fDPzR3nPrypOFmL/Fm0JloEAu6QTWSfDLLc6mM/jinw==",
-      "requires": {
-        "dbus-next": "^0.9.2",
-        "deep-equal": "^1.0.1",
-        "source-map-support": "^0.5.11"
-      }
-    },
-    "nan": {
-      "version": "2.17.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
-      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
-      "optional": true
-    },
-    "object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
-    },
-    "pause-stream": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
-      "requires": {
-        "through": "~2.3"
-      }
-    },
-    "regexp.prototype.flags": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "functions-have-names": "^1.2.2"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
-    },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-    },
-    "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-    },
-    "source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "split": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
-      "requires": {
-        "through": "2"
-      }
-    },
-    "stream-combiner": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
-      "requires": {
-        "duplexer": "~0.1.1"
-      }
-    },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
-    },
-    "xml2js": {
-      "version": "0.4.23",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
-      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-      "requires": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~11.0.0"
-      }
-    },
-    "xmlbuilder": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+      "license": "MIT"
     }
   }
 }

release/app/package.json

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

src/__tests__/App.test.tsx

@@ -1,9 +1,10 @@
 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', () => {
-  it('should render', () => {
-    expect(render(<App />)).toBeTruthy();
-  });
+  // eslint-disable-next-line jest/no-commented-out-tests
+  // it('should render', () => {
+  //   expect(render(<App />)).toBeTruthy();
+  // });
 });

src/main/features/core/index.ts

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

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

@@ -1,8 +1,57 @@
 import { ipcMain } from 'electron';
-import { mpv } from '../../../main';
-import { PlayerData } from '/@/renderer/store';
+import MpvAPI from 'node-mpv';
+import { PlayerData } from '../../../../renderer/store';
+import { getMainWindow } from '../../../main';
 
-declare module 'node-mpv';
+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']
+);
+
+mpv.start().catch((error: any) => {
+  console.log('error', error);
+});
+
+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');
+});
 
 // Starts the player
 ipcMain.on('player-play', async () => {
@@ -19,14 +68,14 @@ ipcMain.on('player-stop', async () => {
   await mpv.stop();
 });
 
-// Goes to the next track in the playlist
+// Stops the player
 ipcMain.on('player-next', async () => {
   await mpv.next();
 });
 
-// Goes to the previous track in the playlist
+// Stops the player
 ipcMain.on('player-previous', async () => {
-  await mpv.prev();
+  await mpv.previous();
 });
 
 // Seeks forward or backward by the given amount of seconds
@@ -39,14 +88,8 @@ ipcMain.on('player-seek-to', async (_event, time: number) => {
   await mpv.goToPosition(time);
 });
 
-// Sets the queue in position 0 and 1 to the given data. Used when manually starting a song or using the next/prev buttons
+// 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 && !data.queue.next) {
-    await mpv.clearPlaylist();
-    await mpv.pause();
-    return;
-  }
-
   if (data.queue.current) {
     await mpv.load(data.queue.current.streamUrl, 'replace');
   }
@@ -54,30 +97,10 @@ ipcMain.on('player-set-queue', async (_event, data: PlayerData) => {
   if (data.queue.next) {
     await mpv.load(data.queue.next.streamUrl, 'append');
   }
-
-  await mpv.play();
-});
-
-// Replaces the queue in position 1 to the given data
-ipcMain.on('player-set-queue-next', async (_event, data: PlayerData) => {
-  const size = await mpv.getPlaylistSize();
-
-  if (size > 1) {
-    await mpv.playlistRemove(1);
-  }
-
-  if (data.queue.next) {
-    await mpv.load(data.queue.next.streamUrl, 'append');
-  }
 });
 
 // Sets the next song in the queue when reaching the end of the queue
-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 mpv.playlistRemove(0);
-
+ipcMain.on('player-set-queue-next', async (_event, data: PlayerData) => {
   if (data.queue.next) {
     await mpv.load(data.queue.next.streamUrl, 'append');
   }
@@ -85,14 +108,10 @@ ipcMain.on('player-auto-next', async (_event, data: PlayerData) => {
 
 // Sets the volume to the given value (0-100)
 ipcMain.on('player-volume', async (_event, value: number) => {
-  await mpv.volume(value);
+  mpv.volume(value);
 });
 
 // Toggles the mute status
 ipcMain.on('player-mute', async () => {
-  await mpv.mute();
-});
-
-ipcMain.on('player-quit', async () => {
-  await mpv.stop();
+  mpv.mute();
 });

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

@@ -1,27 +0,0 @@
-/* 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

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

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

@@ -1,12 +0,0 @@
-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

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

src/main/features/linux/mpris.ts

@@ -1,168 +0,0 @@
-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

@@ -9,20 +9,13 @@
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain, globalShortcut } from 'electron';
-import electronLocalShortcut from 'electron-localshortcut';
+import { app, BrowserWindow, shell, ipcMain } from 'electron';
 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 './features';
 
-declare module 'node-mpv';
-
 export default class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
@@ -38,7 +31,8 @@ if (process.env.NODE_ENV === 'production') {
   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')();
@@ -52,7 +46,7 @@ const installExtensions = async () => {
   return installer
     .default(
       extensions.map((name) => installer[name]),
-      forceDownload,
+      forceDownload
     )
     .catch(console.log);
 };
@@ -72,13 +66,14 @@ const createWindow = async () => {
 
   mainWindow = new BrowserWindow({
     frame: false,
-    height: 900,
+    height: 728,
     icon: getAssetPath('icon.png'),
     minHeight: 600,
     minWidth: 640,
     show: false,
     webPreferences: {
       backgroundThrottling: false,
+
       contextIsolation: true,
       devTools: true,
       nodeIntegration: true,
@@ -86,20 +81,11 @@ const createWindow = async () => {
         ? path.join(__dirname, 'preload.js')
         : path.join(__dirname, '../../.erb/dll/preload.js'),
     },
-    width: 1440,
-  });
-
-  electronLocalShortcut.register(mainWindow, 'Ctrl+Shift+I', () => {
-    mainWindow?.webContents.openDevTools();
-  });
-
-  ipcMain.on('window-dev-tools', () => {
-    mainWindow?.webContents.openDevTools();
+    width: 1024,
   });
 
   ipcMain.on('window-maximize', () => {
     mainWindow?.maximize();
-    mainWindow?.webContents.send('renderer-player-quit');
   });
 
   ipcMain.on('window-unmaximize', () => {
@@ -114,25 +100,6 @@ 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();
-  });
-
-  const globalMediaKeysEnabled = store.get('global_media_hotkeys') as boolean;
-
-  if (globalMediaKeysEnabled) {
-    enableMediaKeys(mainWindow);
-  }
-
   mainWindow.loadURL(resolveHtmlPath('index.html'));
 
   mainWindow.on('ready-to-show', () => {
@@ -147,7 +114,6 @@ const createWindow = async () => {
   });
 
   mainWindow.on('closed', () => {
-    // mainWindow?.webContents.send('renderer-player-quit');
     mainWindow = null;
   });
 
@@ -169,94 +135,20 @@ const createWindow = async () => {
  * Add event listeners...
  */
 
-app.commandLine.appendSwitch('disable-features', 'HardwareMediaKeyHandling,MediaSessionService');
+app.commandLine.appendSwitch(
+  'disable-features',
+  'HardwareMediaKeyHandling,MediaSessionService'
+);
 
 export const getMainWindow = () => {
   return mainWindow;
 };
 
-const BINARY_PATH = store.get('mpv_path') as string | undefined;
-const MPV_PARAMETERS = store.get('mpv_parameters') as Array<string> | undefined;
-const DEFAULT_MPV_PARAMETERS = () => {
-  const parameters = [];
-  if (
-    !MPV_PARAMETERS?.includes('--gapless-audio=weak') ||
-    !MPV_PARAMETERS?.includes('--gapless-audio=no') ||
-    !MPV_PARAMETERS?.includes('--gapless-audio=yes') ||
-    !MPV_PARAMETERS?.includes('--gapless-audio')
-  ) {
-    parameters.push('--gapless-audio=yes');
-  }
-
-  if (
-    !MPV_PARAMETERS?.includes('--prefetch-playlist=no') ||
-    !MPV_PARAMETERS?.includes('--prefetch-playlist=yes') ||
-    !MPV_PARAMETERS?.includes('--prefetch-playlist')
-  ) {
-    parameters.push('--prefetch-playlist=yes');
-  }
-
-  return parameters;
-};
-
-export const mpv = new MpvAPI(
-  {
-    audio_only: true,
-    auto_restart: true,
-    binary: BINARY_PATH || '',
-    time_update: 1,
-  },
-  MPV_PARAMETERS
-    ? uniq([...DEFAULT_MPV_PARAMETERS(), ...MPV_PARAMETERS])
-    : DEFAULT_MPV_PARAMETERS(),
-);
-
-mpv.start().catch((error) => {
-  console.log('error starting mpv', error);
-});
-
-mpv.on('status', (status) => {
-  if (status.property === 'playlist-pos') {
-    if (status.value !== 0) {
-      getMainWindow()?.webContents.send('renderer-player-auto-next');
-    }
-  }
-});
-
-// Automatically updates the play button when the player is playing
-mpv.on('resumed', () => {
-  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');
-});
-
-// 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);
-});
-
-app.on('before-quit', () => {
-  mpv.stop();
-});
-
 app.on('window-all-closed', () => {
-  globalShortcut.unregisterAll();
-
   // Respect the OSX convention of having the application in memory even
   // after all windows have been closed
   if (process.platform !== 'darwin') {
     app.quit();
-  } else {
-    mpv.stop();
-    mainWindow = null;
   }
 });
 

src/main/menu.ts

@@ -1,4 +1,10 @@
-import { app, Menu, shell, BrowserWindow, MenuItemConstructorOptions } from 'electron';
+import {
+  app,
+  Menu,
+  shell,
+  BrowserWindow,
+  MenuItemConstructorOptions,
+} from 'electron';
 
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
   selector?: string;
@@ -13,12 +19,17 @@ 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);
@@ -32,10 +43,10 @@ export default class MenuBuilder {
 
       Menu.buildFromTemplate([
         {
+          label: 'Inspect element',
           click: () => {
             this.mainWindow.webContents.inspectElement(x, y);
           },
-          label: 'Inspect element',
         },
       ]).popup({ window: this.mainWindow });
     });
@@ -53,38 +64,38 @@ export default class MenuBuilder {
         { label: 'Services', submenu: [] },
         { type: 'separator' },
         {
-          accelerator: 'Command+H',
           label: 'Hide ElectronReact',
+          accelerator: 'Command+H',
           selector: 'hide:',
         },
         {
-          accelerator: 'Command+Shift+H',
           label: 'Hide Others',
+          accelerator: 'Command+Shift+H',
           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: [
-        { accelerator: 'Command+Z', label: 'Undo', selector: 'undo:' },
-        { accelerator: 'Shift+Command+Z', label: 'Redo', selector: 'redo:' },
+        { label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
+        { label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
         { type: 'separator' },
-        { accelerator: 'Command+X', label: 'Cut', selector: 'cut:' },
-        { accelerator: 'Command+C', label: 'Copy', selector: 'copy:' },
-        { accelerator: 'Command+V', label: 'Paste', selector: 'paste:' },
+        { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
+        { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
+        { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
         {
-          accelerator: 'Command+A',
           label: 'Select All',
+          accelerator: 'Command+A',
           selector: 'selectAll:',
         },
       ],
@@ -93,25 +104,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',
         },
       ],
     };
@@ -119,11 +130,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',
         },
       ],
     };
@@ -131,11 +142,11 @@ export default class MenuBuilder {
       label: 'Window',
       submenu: [
         {
-          accelerator: 'Command+M',
           label: 'Minimize',
+          accelerator: 'Command+M',
           selector: 'performMiniaturize:',
         },
-        { accelerator: 'Command+W', label: 'Close', selector: 'performClose:' },
+        { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
         { type: 'separator' },
         { label: 'Bring All to Front', selector: 'arrangeInFront:' },
       ],
@@ -144,34 +155,37 @@ export default class MenuBuilder {
       label: 'Help',
       submenu: [
         {
+          label: 'Learn More',
           click() {
             shell.openExternal('https://electronjs.org');
           },
-          label: 'Learn More',
         },
         {
-          click() {
-            shell.openExternal('https://github.com/electron/electron/tree/main/docs#readme');
-          },
           label: 'Documentation',
+          click() {
+            shell.openExternal(
+              'https://github.com/electron/electron/tree/main/docs#readme'
+            );
+          },
         },
         {
+          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;
 
@@ -184,52 +198,57 @@ export default class MenuBuilder {
         label: '&File',
         submenu: [
           {
-            accelerator: 'Ctrl+O',
             label: '&Open',
+            accelerator: 'Ctrl+O',
           },
           {
+            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',
                 },
               ],
       },
@@ -237,28 +256,30 @@ export default class MenuBuilder {
         label: 'Help',
         submenu: [
           {
+            label: 'Learn More',
             click() {
               shell.openExternal('https://electronjs.org');
             },
-            label: 'Learn More',
           },
           {
-            click() {
-              shell.openExternal('https://github.com/electron/electron/tree/main/docs#readme');
-            },
             label: 'Documentation',
+            click() {
+              shell.openExternal(
+                'https://github.com/electron/electron/tree/main/docs#readme'
+              );
+            },
           },
           {
+            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,31 +1,11 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
-import { PlayerData } from '../renderer/store';
-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';
+import { PlayerData } from 'renderer/store';
 
 contextBridge.exposeInMainWorld('electron', {
-  browser,
-  ipc,
   ipcRenderer: {
-    APP_RESTART() {
-      ipcRenderer.send('app-restart');
-    },
-    PLAYER_AUTO_NEXT(data: PlayerData) {
-      ipcRenderer.send('player-auto-next', data);
-    },
     PLAYER_CURRENT_TIME() {
       ipcRenderer.send('player-current-time');
     },
-    PLAYER_MEDIA_KEYS_DISABLE() {
-      ipcRenderer.send('global-media-keys-disable');
-    },
-    PLAYER_MEDIA_KEYS_ENABLE() {
-      ipcRenderer.send('global-media-keys-enable');
-    },
     PLAYER_MUTE() {
       ipcRenderer.send('player-mute');
     },
@@ -59,39 +39,25 @@ contextBridge.exposeInMainWorld('electron', {
     PLAYER_VOLUME(value: number) {
       ipcRenderer.send('player-volume', value);
     },
-    RENDERER_PLAYER_AUTO_NEXT(cb: (event: IpcRendererEvent, data: any) => void) {
-      ipcRenderer.on('renderer-player-auto-next', cb);
-    },
-    RENDERER_PLAYER_CURRENT_TIME(cb: (event: IpcRendererEvent, data: any) => void) {
+    RENDERER_PLAYER_CURRENT_TIME(
+      cb: (event: IpcRendererEvent, data: any) => void
+    ) {
       ipcRenderer.on('renderer-player-current-time', cb);
     },
-    RENDERER_PLAYER_NEXT(cb: (event: IpcRendererEvent, data: any) => void) {
-      ipcRenderer.on('renderer-player-next', 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_PLAY_PAUSE(cb: (event: IpcRendererEvent, data: any) => void) {
-      ipcRenderer.on('renderer-player-play-pause', cb);
-    },
-    RENDERER_PLAYER_PREVIOUS(cb: (event: IpcRendererEvent, data: any) => void) {
-      ipcRenderer.on('renderer-player-previous', 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);
     },
-    SETTINGS_GET(data: { property: string }) {
-      return ipcRenderer.invoke('settings-get', data);
-    },
-    SETTINGS_SET(data: { property: string; value: any }) {
-      ipcRenderer.send('settings-set', data);
-    },
-    removeAllListeners(value: string) {
-      ipcRenderer.removeAllListeners(value);
-    },
     windowClose() {
       ipcRenderer.send('window-close');
     },
@@ -105,9 +71,4 @@ contextBridge.exposeInMainWorld('electron', {
       ipcRenderer.send('window-unmaximize');
     },
   },
-  localSettings,
-  mpris,
-  mpvPlayer,
-  mpvPlayerListener,
-  utils,
 });

src/main/preload/browser.ts

@@ -1,26 +0,0 @@
-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

@@ -1,9 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-const removeAllListeners = (channel: string) => {
-  ipcRenderer.removeAllListeners(channel);
-};
-
-export const ipc = {
-  removeAllListeners,
-};

src/main/preload/local-settings.ts

@@ -1,32 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,112 +0,0 @@
-import { ipcRenderer, IpcRendererEvent } from 'electron';
-import { PlayerData } from '/@/renderer/store';
-
-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 seek = (seconds: number) => {
-  ipcRenderer.send('player-seek', seconds);
-};
-const seekTo = (seconds: number) => {
-  ipcRenderer.send('player-seek-to', seconds);
-};
-const setQueue = (data: PlayerData) => {
-  ipcRenderer.send('player-set-queue', data);
-};
-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 rendererQuit = (cb: (event: IpcRendererEvent) => void) => {
-  ipcRenderer.on('renderer-player-quit', cb);
-};
-
-export const mpvPlayer = {
-  autoNext,
-  currentTime,
-  mute,
-  next,
-  pause,
-  play,
-  previous,
-  quit,
-  seek,
-  seekTo,
-  setQueue,
-  setQueueNext,
-  stop,
-  volume,
-};
-
-export const mpvPlayerListener = {
-  rendererAutoNext,
-  rendererCurrentTime,
-  rendererNext,
-  rendererPause,
-  rendererPlay,
-  rendererPlayPause,
-  rendererPrevious,
-  rendererQuit,
-  rendererStop,
-};

src/main/preload/utils.ts

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

src/renderer/api/albumsApi.ts

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,38 @@
+// 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

@@ -1,324 +0,0 @@
-import { useAuthStore } from '/@/renderer/store';
-import { navidromeApi } from '/@/renderer/api/navidrome.api';
-import { toast } from '/@/renderer/components/toast';
-import type {
-  AlbumDetailArgs,
-  RawAlbumDetailResponse,
-  RawAlbumListResponse,
-  AlbumListArgs,
-  SongListArgs,
-  RawSongListResponse,
-  SongDetailArgs,
-  RawSongDetailResponse,
-  AlbumArtistDetailArgs,
-  RawAlbumArtistDetailResponse,
-  AlbumArtistListArgs,
-  RawAlbumArtistListResponse,
-  RatingArgs,
-  RawRatingResponse,
-  RawFavoriteResponse,
-  GenreListArgs,
-  RawGenreListResponse,
-  CreatePlaylistArgs,
-  RawCreatePlaylistResponse,
-  DeletePlaylistArgs,
-  RawDeletePlaylistResponse,
-  PlaylistDetailArgs,
-  RawPlaylistDetailResponse,
-  PlaylistListArgs,
-  RawPlaylistListResponse,
-  MusicFolderListArgs,
-  RawMusicFolderListResponse,
-  PlaylistSongListArgs,
-  ArtistListArgs,
-  RawArtistListResponse,
-  UpdatePlaylistArgs,
-  RawUpdatePlaylistResponse,
-  UserListArgs,
-  RawUserListResponse,
-  FavoriteArgs,
-  TopSongListArgs,
-  RawTopSongListResponse,
-  AddToPlaylistArgs,
-  RawAddToPlaylistResponse,
-  RemoveFromPlaylistArgs,
-  RawRemoveFromPlaylistResponse,
-  ScrobbleArgs,
-  RawScrobbleResponse,
-} from '/@/renderer/api/types';
-import { subsonicApi } from '/@/renderer/api/subsonic.api';
-import { jellyfinApi } from '/@/renderer/api/jellyfin.api';
-import { ServerListItem } from '/@/renderer/types';
-
-export type ControllerEndpoint = Partial<{
-  addToPlaylist: (args: AddToPlaylistArgs) => Promise<RawAddToPlaylistResponse>;
-  clearPlaylist: () => void;
-  createFavorite: (args: FavoriteArgs) => Promise<RawFavoriteResponse>;
-  createPlaylist: (args: CreatePlaylistArgs) => Promise<RawCreatePlaylistResponse>;
-  deleteFavorite: (args: FavoriteArgs) => Promise<RawFavoriteResponse>;
-  deletePlaylist: (args: DeletePlaylistArgs) => Promise<RawDeletePlaylistResponse>;
-  getAlbumArtistDetail: (args: AlbumArtistDetailArgs) => Promise<RawAlbumArtistDetailResponse>;
-  getAlbumArtistList: (args: AlbumArtistListArgs) => Promise<RawAlbumArtistListResponse>;
-  getAlbumDetail: (args: AlbumDetailArgs) => Promise<RawAlbumDetailResponse>;
-  getAlbumList: (args: AlbumListArgs) => Promise<RawAlbumListResponse>;
-  getArtistDetail: () => void;
-  getArtistInfo: (args: any) => void;
-  getArtistList: (args: ArtistListArgs) => Promise<RawArtistListResponse>;
-  getFavoritesList: () => void;
-  getFolderItemList: () => void;
-  getFolderList: () => void;
-  getFolderSongs: () => void;
-  getGenreList: (args: GenreListArgs) => Promise<RawGenreListResponse>;
-  getMusicFolderList: (args: MusicFolderListArgs) => Promise<RawMusicFolderListResponse>;
-  getPlaylistDetail: (args: PlaylistDetailArgs) => Promise<RawPlaylistDetailResponse>;
-  getPlaylistList: (args: PlaylistListArgs) => Promise<RawPlaylistListResponse>;
-  getPlaylistSongList: (args: PlaylistSongListArgs) => Promise<RawSongListResponse>;
-  getSongDetail: (args: SongDetailArgs) => Promise<RawSongDetailResponse>;
-  getSongList: (args: SongListArgs) => Promise<RawSongListResponse>;
-  getTopSongs: (args: TopSongListArgs) => Promise<RawTopSongListResponse>;
-  getUserList: (args: UserListArgs) => Promise<RawUserListResponse>;
-  removeFromPlaylist: (args: RemoveFromPlaylistArgs) => Promise<RawRemoveFromPlaylistResponse>;
-  scrobble: (args: ScrobbleArgs) => Promise<RawScrobbleResponse>;
-  updatePlaylist: (args: UpdatePlaylistArgs) => Promise<RawUpdatePlaylistResponse>;
-  updateRating: (args: RatingArgs) => Promise<RawRatingResponse>;
-}>;
-
-type ApiController = {
-  jellyfin: ControllerEndpoint;
-  navidrome: ControllerEndpoint;
-  subsonic: ControllerEndpoint;
-};
-
-const endpoints: ApiController = {
-  jellyfin: {
-    addToPlaylist: jellyfinApi.addToPlaylist,
-    clearPlaylist: undefined,
-    createFavorite: jellyfinApi.createFavorite,
-    createPlaylist: jellyfinApi.createPlaylist,
-    deleteFavorite: jellyfinApi.deleteFavorite,
-    deletePlaylist: jellyfinApi.deletePlaylist,
-    getAlbumArtistDetail: jellyfinApi.getAlbumArtistDetail,
-    getAlbumArtistList: jellyfinApi.getAlbumArtistList,
-    getAlbumDetail: jellyfinApi.getAlbumDetail,
-    getAlbumList: jellyfinApi.getAlbumList,
-    getArtistDetail: undefined,
-    getArtistInfo: undefined,
-    getArtistList: jellyfinApi.getArtistList,
-    getFavoritesList: undefined,
-    getFolderItemList: undefined,
-    getFolderList: undefined,
-    getFolderSongs: undefined,
-    getGenreList: jellyfinApi.getGenreList,
-    getMusicFolderList: jellyfinApi.getMusicFolderList,
-    getPlaylistDetail: jellyfinApi.getPlaylistDetail,
-    getPlaylistList: jellyfinApi.getPlaylistList,
-    getPlaylistSongList: jellyfinApi.getPlaylistSongList,
-    getSongDetail: undefined,
-    getSongList: jellyfinApi.getSongList,
-    getTopSongs: undefined,
-    getUserList: undefined,
-    removeFromPlaylist: jellyfinApi.removeFromPlaylist,
-    scrobble: jellyfinApi.scrobble,
-    updatePlaylist: jellyfinApi.updatePlaylist,
-    updateRating: undefined,
-  },
-  navidrome: {
-    addToPlaylist: navidromeApi.addToPlaylist,
-    clearPlaylist: undefined,
-    createFavorite: subsonicApi.createFavorite,
-    createPlaylist: navidromeApi.createPlaylist,
-    deleteFavorite: subsonicApi.deleteFavorite,
-    deletePlaylist: navidromeApi.deletePlaylist,
-    getAlbumArtistDetail: navidromeApi.getAlbumArtistDetail,
-    getAlbumArtistList: navidromeApi.getAlbumArtistList,
-    getAlbumDetail: navidromeApi.getAlbumDetail,
-    getAlbumList: navidromeApi.getAlbumList,
-    getArtistDetail: undefined,
-    getArtistInfo: undefined,
-    getArtistList: undefined,
-    getFavoritesList: undefined,
-    getFolderItemList: undefined,
-    getFolderList: undefined,
-    getFolderSongs: undefined,
-    getGenreList: navidromeApi.getGenreList,
-    getMusicFolderList: subsonicApi.getMusicFolderList,
-    getPlaylistDetail: navidromeApi.getPlaylistDetail,
-    getPlaylistList: navidromeApi.getPlaylistList,
-    getPlaylistSongList: navidromeApi.getPlaylistSongList,
-    getSongDetail: navidromeApi.getSongDetail,
-    getSongList: navidromeApi.getSongList,
-    getTopSongs: subsonicApi.getTopSongList,
-    getUserList: navidromeApi.getUserList,
-    removeFromPlaylist: navidromeApi.removeFromPlaylist,
-    scrobble: subsonicApi.scrobble,
-    updatePlaylist: navidromeApi.updatePlaylist,
-    updateRating: subsonicApi.updateRating,
-  },
-  subsonic: {
-    clearPlaylist: undefined,
-    createFavorite: subsonicApi.createFavorite,
-    createPlaylist: undefined,
-    deleteFavorite: subsonicApi.deleteFavorite,
-    deletePlaylist: undefined,
-    getAlbumArtistDetail: subsonicApi.getAlbumArtistDetail,
-    getAlbumArtistList: subsonicApi.getAlbumArtistList,
-    getAlbumDetail: subsonicApi.getAlbumDetail,
-    getAlbumList: subsonicApi.getAlbumList,
-    getArtistDetail: undefined,
-    getArtistInfo: undefined,
-    getArtistList: undefined,
-    getFavoritesList: undefined,
-    getFolderItemList: undefined,
-    getFolderList: undefined,
-    getFolderSongs: undefined,
-    getGenreList: undefined,
-    getMusicFolderList: subsonicApi.getMusicFolderList,
-    getPlaylistDetail: undefined,
-    getPlaylistList: undefined,
-    getSongDetail: undefined,
-    getSongList: undefined,
-    getTopSongs: subsonicApi.getTopSongList,
-    getUserList: undefined,
-    scrobble: subsonicApi.scrobble,
-    updatePlaylist: undefined,
-    updateRating: undefined,
-  },
-};
-
-const apiController = (endpoint: keyof ControllerEndpoint, server?: ServerListItem | null) => {
-  const serverType = server?.type || useAuthStore.getState().currentServer?.type;
-
-  if (!serverType) {
-    toast.error({ message: 'No server selected', title: 'Unable to route request' });
-    return () => undefined;
-  }
-
-  const controllerFn = endpoints[serverType][endpoint];
-
-  if (typeof controllerFn !== 'function') {
-    toast.error({
-      message: `Endpoint ${endpoint} is not implemented for ${serverType}`,
-      title: 'Unable to route request',
-    });
-    return () => undefined;
-  }
-
-  return endpoints[serverType][endpoint];
-};
-
-const getAlbumList = async (args: AlbumListArgs) => {
-  return (apiController('getAlbumList') as ControllerEndpoint['getAlbumList'])?.(args);
-};
-
-const getAlbumDetail = async (args: AlbumDetailArgs) => {
-  return (apiController('getAlbumDetail') as ControllerEndpoint['getAlbumDetail'])?.(args);
-};
-
-const getSongList = async (args: SongListArgs) => {
-  return (apiController('getSongList') as ControllerEndpoint['getSongList'])?.(args);
-};
-
-const getMusicFolderList = async (args: MusicFolderListArgs) => {
-  return (apiController('getMusicFolderList') as ControllerEndpoint['getMusicFolderList'])?.(args);
-};
-
-const getGenreList = async (args: GenreListArgs) => {
-  return (apiController('getGenreList') as ControllerEndpoint['getGenreList'])?.(args);
-};
-
-const getAlbumArtistDetail = async (args: AlbumArtistDetailArgs) => {
-  return (apiController('getAlbumArtistDetail') as ControllerEndpoint['getAlbumArtistDetail'])?.(
-    args,
-  );
-};
-
-const getAlbumArtistList = async (args: AlbumArtistListArgs) => {
-  return (apiController('getAlbumArtistList') as ControllerEndpoint['getAlbumArtistList'])?.(args);
-};
-
-const getArtistList = async (args: ArtistListArgs) => {
-  return (apiController('getArtistList') as ControllerEndpoint['getArtistList'])?.(args);
-};
-
-const getPlaylistList = async (args: PlaylistListArgs) => {
-  return (apiController('getPlaylistList') as ControllerEndpoint['getPlaylistList'])?.(args);
-};
-
-const createPlaylist = async (args: CreatePlaylistArgs) => {
-  return (apiController('createPlaylist') as ControllerEndpoint['createPlaylist'])?.(args);
-};
-
-const updatePlaylist = async (args: UpdatePlaylistArgs) => {
-  return (apiController('updatePlaylist') as ControllerEndpoint['updatePlaylist'])?.(args);
-};
-
-const deletePlaylist = async (args: DeletePlaylistArgs) => {
-  return (apiController('deletePlaylist') as ControllerEndpoint['deletePlaylist'])?.(args);
-};
-
-const addToPlaylist = async (args: AddToPlaylistArgs) => {
-  return (apiController('addToPlaylist') as ControllerEndpoint['addToPlaylist'])?.(args);
-};
-
-const removeFromPlaylist = async (args: RemoveFromPlaylistArgs) => {
-  return (apiController('removeFromPlaylist') as ControllerEndpoint['removeFromPlaylist'])?.(args);
-};
-
-const getPlaylistDetail = async (args: PlaylistDetailArgs) => {
-  return (apiController('getPlaylistDetail') as ControllerEndpoint['getPlaylistDetail'])?.(args);
-};
-
-const getPlaylistSongList = async (args: PlaylistSongListArgs) => {
-  return (apiController('getPlaylistSongList') as ControllerEndpoint['getPlaylistSongList'])?.(
-    args,
-  );
-};
-
-const getUserList = async (args: UserListArgs) => {
-  return (apiController('getUserList') as ControllerEndpoint['getUserList'])?.(args);
-};
-
-const createFavorite = async (args: FavoriteArgs) => {
-  return (apiController('createFavorite') as ControllerEndpoint['createFavorite'])?.(args);
-};
-
-const deleteFavorite = async (args: FavoriteArgs) => {
-  return (apiController('deleteFavorite') as ControllerEndpoint['deleteFavorite'])?.(args);
-};
-
-const updateRating = async (args: RatingArgs) => {
-  return (apiController('updateRating') as ControllerEndpoint['updateRating'])?.(args);
-};
-
-const getTopSongList = async (args: TopSongListArgs) => {
-  return (apiController('getTopSongs') as ControllerEndpoint['getTopSongs'])?.(args);
-};
-
-const scrobble = async (args: ScrobbleArgs) => {
-  return (apiController('scrobble', args.server) as ControllerEndpoint['scrobble'])?.(args);
-};
-
-export const controller = {
-  addToPlaylist,
-  createFavorite,
-  createPlaylist,
-  deleteFavorite,
-  deletePlaylist,
-  getAlbumArtistDetail,
-  getAlbumArtistList,
-  getAlbumDetail,
-  getAlbumList,
-  getArtistList,
-  getGenreList,
-  getMusicFolderList,
-  getPlaylistDetail,
-  getPlaylistList,
-  getPlaylistSongList,
-  getSongList,
-  getTopSongList,
-  getUserList,
-  removeFromPlaylist,
-  scrobble,
-  updatePlaylist,
-  updateRating,
-};

src/renderer/api/index.ts

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

src/renderer/api/jellyfin.types.ts

@@ -1,633 +0,0 @@
-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',
-  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/navidrome.api.ts

@@ -1,752 +0,0 @@
-import { nanoid } from 'nanoid/non-secure';
-import ky from 'ky';
-import type {
-  NDGenreListResponse,
-  NDArtistListResponse,
-  NDAlbumDetail,
-  NDAlbumListParams,
-  NDAlbumList,
-  NDSongDetailResponse,
-  NDAlbum,
-  NDSong,
-  NDAuthenticationResponse,
-  NDAlbumDetailResponse,
-  NDSongDetail,
-  NDGenreList,
-  NDAlbumArtistListParams,
-  NDAlbumArtistDetail,
-  NDAlbumListResponse,
-  NDAlbumArtistDetailResponse,
-  NDAlbumArtistList,
-  NDSongListParams,
-  NDCreatePlaylistParams,
-  NDCreatePlaylistResponse,
-  NDDeletePlaylist,
-  NDDeletePlaylistResponse,
-  NDPlaylistListParams,
-  NDPlaylistDetail,
-  NDPlaylistList,
-  NDPlaylistListResponse,
-  NDPlaylistDetailResponse,
-  NDSongList,
-  NDSongListResponse,
-  NDAlbumArtist,
-  NDPlaylist,
-  NDUpdatePlaylistParams,
-  NDUpdatePlaylistResponse,
-  NDPlaylistSongListResponse,
-  NDPlaylistSongList,
-  NDPlaylistSong,
-  NDUserList,
-  NDUserListResponse,
-  NDUserListParams,
-  NDUser,
-  NDAddToPlaylist,
-  NDAddToPlaylistBody,
-  NDAddToPlaylistResponse,
-  NDRemoveFromPlaylistParams,
-  NDRemoveFromPlaylistResponse,
-  NDRemoveFromPlaylist,
-} from '/@/renderer/api/navidrome.types';
-import { NDSongListSort, NDSortOrder } from '/@/renderer/api/navidrome.types';
-import {
-  Album,
-  Song,
-  AuthenticationResponse,
-  AlbumDetailArgs,
-  GenreListArgs,
-  AlbumListArgs,
-  AlbumArtistListArgs,
-  AlbumArtistDetailArgs,
-  SongListArgs,
-  SongDetailArgs,
-  CreatePlaylistArgs,
-  DeletePlaylistArgs,
-  PlaylistListArgs,
-  PlaylistDetailArgs,
-  CreatePlaylistResponse,
-  PlaylistSongListArgs,
-  AlbumArtist,
-  Playlist,
-  UpdatePlaylistResponse,
-  UpdatePlaylistArgs,
-  UserListArgs,
-  userListSortMap,
-  playlistListSortMap,
-  albumArtistListSortMap,
-  songListSortMap,
-  albumListSortMap,
-  sortOrderMap,
-  User,
-  LibraryItem,
-  AddToPlaylistArgs,
-  RemoveFromPlaylistArgs,
-} from '/@/renderer/api/types';
-import { toast } from '/@/renderer/components/toast';
-import { useAuthStore } from '/@/renderer/store';
-import { ServerListItem, ServerType } from '/@/renderer/types';
-import { parseSearchParams } from '/@/renderer/utils';
-import { subsonicApi } from '/@/renderer/api/subsonic.api';
-
-const api = ky.create({
-  hooks: {
-    afterResponse: [
-      async (_request, _options, response) => {
-        const serverId = useAuthStore.getState().currentServer?.id;
-
-        if (serverId) {
-          useAuthStore.getState().actions.updateServer(serverId, {
-            ndCredential: response.headers.get('x-nd-authorization') as string,
-          });
-        }
-
-        return response;
-      },
-    ],
-    beforeError: [
-      (error) => {
-        if (error.response && error.response.status === 401) {
-          toast.error({
-            message: 'Your session has expired.',
-          });
-
-          const serverId = useAuthStore.getState().currentServer?.id;
-
-          if (serverId) {
-            useAuthStore.getState().actions.setCurrentServer(null);
-            useAuthStore.getState().actions.updateServer(serverId, { ndCredential: undefined });
-          }
-        }
-
-        return error;
-      },
-    ],
-  },
-});
-
-const authenticate = async (
-  url: string,
-  body: { password: string; username: string },
-): Promise<AuthenticationResponse> => {
-  const cleanServerUrl = url.replace(/\/$/, '');
-
-  const data = await ky
-    .post(`${cleanServerUrl}/auth/login`, {
-      json: {
-        password: body.password,
-        username: body.username,
-      },
-    })
-    .json<NDAuthenticationResponse>();
-
-  return {
-    credential: `u=${body.username}&s=${data.subsonicSalt}&t=${data.subsonicToken}`,
-    ndCredential: data.token,
-    userId: data.id,
-    username: data.username,
-  };
-};
-
-const getUserList = async (args: UserListArgs): Promise<NDUserList> => {
-  const { query, server, signal } = args;
-
-  const searchParams: NDUserListParams = {
-    _end: query.startIndex + (query.limit || 0),
-    _order: sortOrderMap.navidrome[query.sortOrder],
-    _sort: userListSortMap.navidrome[query.sortBy],
-    _start: query.startIndex,
-    ...query.ndParams,
-  };
-
-  const res = await api.get('api/user', {
-    headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-    prefixUrl: server?.url,
-    searchParams: parseSearchParams(searchParams),
-    signal,
-  });
-
-  const data = await res.json<NDUserListResponse>();
-  const itemCount = res.headers.get('x-total-count');
-
-  return {
-    items: data,
-    startIndex: query?.startIndex || 0,
-    totalRecordCount: Number(itemCount),
-  };
-};
-
-const getGenreList = async (args: GenreListArgs): Promise<NDGenreList> => {
-  const { server, signal } = args;
-
-  const data = await api
-    .get('api/genre', {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDGenreListResponse>();
-
-  return data;
-};
-
-const getAlbumArtistDetail = async (args: AlbumArtistDetailArgs): Promise<NDAlbumArtistDetail> => {
-  const { query, server, signal } = args;
-
-  const artistInfo = await subsonicApi.getArtistInfo({
-    query: {
-      artistId: query.id,
-      limit: 15,
-    },
-    server,
-    signal,
-  });
-
-  const data = await api
-    .get(`api/artist/${query.id}`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDAlbumArtistDetailResponse>();
-
-  return { ...data, similarArtists: artistInfo.similarArtist };
-};
-
-const getAlbumArtistList = async (args: AlbumArtistListArgs): Promise<NDAlbumArtistList> => {
-  const { query, server, signal } = args;
-
-  const searchParams: NDAlbumArtistListParams = {
-    _end: query.startIndex + (query.limit || 0),
-    _order: sortOrderMap.navidrome[query.sortOrder],
-    _sort: albumArtistListSortMap.navidrome[query.sortBy],
-    _start: query.startIndex,
-    name: query.searchTerm,
-    ...query.ndParams,
-  };
-
-  const res = await api.get('api/artist', {
-    headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-    prefixUrl: server?.url,
-    searchParams: parseSearchParams(searchParams),
-    signal,
-  });
-
-  const data = await res.json<NDArtistListResponse>();
-  const itemCount = res.headers.get('x-total-count');
-
-  return {
-    items: data,
-    startIndex: query.startIndex,
-    totalRecordCount: Number(itemCount),
-  };
-};
-
-const getAlbumDetail = async (args: AlbumDetailArgs): Promise<NDAlbumDetail> => {
-  const { query, server, signal } = args;
-
-  const data = await api
-    .get(`api/album/${query.id}`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDAlbumDetailResponse>();
-
-  const songsData = await api
-    .get('api/song', {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      searchParams: {
-        _end: 0,
-        _order: NDSortOrder.ASC,
-        _sort: 'album',
-        _start: 0,
-        album_id: query.id,
-      },
-      signal,
-    })
-    .json<NDSongListResponse>();
-
-  return { ...data, songs: songsData };
-};
-
-const getAlbumList = async (args: AlbumListArgs): Promise<NDAlbumList> => {
-  const { query, server, signal } = args;
-
-  const searchParams: NDAlbumListParams = {
-    _end: query.startIndex + (query.limit || 0),
-    _order: sortOrderMap.navidrome[query.sortOrder],
-    _sort: albumListSortMap.navidrome[query.sortBy],
-    _start: query.startIndex,
-    name: query.searchTerm,
-    ...query.ndParams,
-  };
-
-  const res = await api.get('api/album', {
-    headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-    prefixUrl: server?.url,
-    searchParams: parseSearchParams(searchParams),
-    signal,
-  });
-
-  const data = await res.json<NDAlbumListResponse>();
-  const itemCount = res.headers.get('x-total-count');
-
-  return {
-    items: data,
-    startIndex: query?.startIndex || 0,
-    totalRecordCount: Number(itemCount),
-  };
-};
-
-const getSongList = async (args: SongListArgs): Promise<NDSongList> => {
-  const { query, server, signal } = args;
-
-  const searchParams: NDSongListParams = {
-    _end: query.startIndex + (query.limit || -1),
-    _order: sortOrderMap.navidrome[query.sortOrder],
-    _sort: songListSortMap.navidrome[query.sortBy],
-    _start: query.startIndex,
-    album_id: query.albumIds,
-    artist_id: query.artistIds,
-    title: query.searchTerm,
-    ...query.ndParams,
-  };
-
-  const res = await api.get('api/song', {
-    headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-    prefixUrl: server?.url,
-    searchParams: parseSearchParams(searchParams),
-    signal,
-  });
-
-  const data = await res.json<NDSongListResponse>();
-  const itemCount = res.headers.get('x-total-count');
-
-  return {
-    items: data,
-    startIndex: query?.startIndex || 0,
-    totalRecordCount: Number(itemCount),
-  };
-};
-
-const getSongDetail = async (args: SongDetailArgs): Promise<NDSongDetail> => {
-  const { query, server, signal } = args;
-
-  const data = await api
-    .get(`api/song/${query.id}`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDSongDetailResponse>();
-
-  return data;
-};
-
-const createPlaylist = async (args: CreatePlaylistArgs): Promise<CreatePlaylistResponse> => {
-  const { body, server } = args;
-
-  const json: NDCreatePlaylistParams = {
-    comment: body.comment,
-    name: body.name,
-    ...body.ndParams,
-    public: body.ndParams?.public || false,
-    rules: body.ndParams?.rules ? body.ndParams.rules : undefined,
-  };
-
-  const data = await api
-    .post('api/playlist', {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      json,
-      prefixUrl: server?.url,
-    })
-    .json<NDCreatePlaylistResponse>();
-
-  return {
-    id: data.id,
-    name: body.name,
-  };
-};
-
-const updatePlaylist = async (args: UpdatePlaylistArgs): Promise<UpdatePlaylistResponse> => {
-  const { query, body, server, signal } = args;
-
-  const json: NDUpdatePlaylistParams = {
-    comment: body.comment || '',
-    name: body.name,
-    ownerId: body.ndParams?.ownerId || undefined,
-    ownerName: body.ndParams?.owner || undefined,
-    public: body.ndParams?.public || false,
-    rules: body.ndParams?.rules ? body.ndParams?.rules : undefined,
-    sync: body.ndParams?.sync || undefined,
-  };
-
-  const data = await api
-    .put(`api/playlist/${query.id}`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      json,
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDUpdatePlaylistResponse>();
-
-  return {
-    id: data.id,
-  };
-};
-
-const deletePlaylist = async (args: DeletePlaylistArgs): Promise<NDDeletePlaylist> => {
-  const { query, server, signal } = args;
-
-  const data = await api
-    .delete(`api/playlist/${query.id}`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDDeletePlaylistResponse>();
-
-  return data;
-};
-
-const getPlaylistList = async (args: PlaylistListArgs): Promise<NDPlaylistList> => {
-  const { query, server, signal } = args;
-
-  const searchParams: NDPlaylistListParams = {
-    _end: query.startIndex + (query.limit || 0),
-    _order: query.sortOrder ? sortOrderMap.navidrome[query.sortOrder] : undefined,
-    _sort: query.sortBy ? playlistListSortMap.navidrome[query.sortBy] : undefined,
-    _start: query.startIndex,
-    ...query.ndParams,
-  };
-
-  const res = await api.get('api/playlist', {
-    headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-    prefixUrl: server?.url,
-    searchParams: parseSearchParams(searchParams),
-    signal,
-  });
-
-  const data = await res.json<NDPlaylistListResponse>();
-  const itemCount = res.headers.get('x-total-count');
-
-  return {
-    items: data,
-    startIndex: query?.startIndex || 0,
-    totalRecordCount: Number(itemCount),
-  };
-};
-
-const getPlaylistDetail = async (args: PlaylistDetailArgs): Promise<NDPlaylistDetail> => {
-  const { query, server, signal } = args;
-
-  const data = await api
-    .get(`api/playlist/${query.id}`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDPlaylistDetailResponse>();
-
-  return data;
-};
-
-const getPlaylistSongList = async (args: PlaylistSongListArgs): Promise<NDPlaylistSongList> => {
-  const { query, server, signal } = args;
-
-  const searchParams: NDSongListParams & { playlist_id: string } = {
-    _end: query.startIndex + (query.limit || 0),
-    _order: query.sortOrder ? sortOrderMap.navidrome[query.sortOrder] : NDSortOrder.ASC,
-    _sort: query.sortBy ? songListSortMap.navidrome[query.sortBy] : NDSongListSort.ID,
-    _start: query.startIndex,
-    playlist_id: query.id,
-  };
-
-  const res = await api.get(`api/playlist/${query.id}/tracks`, {
-    headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-    prefixUrl: server?.url,
-    searchParams: parseSearchParams(searchParams),
-    signal,
-  });
-
-  const data = await res.json<NDPlaylistSongListResponse>();
-  const itemCount = res.headers.get('x-total-count');
-
-  return {
-    items: data,
-    startIndex: query?.startIndex || 0,
-    totalRecordCount: Number(itemCount),
-  };
-};
-
-const addToPlaylist = async (args: AddToPlaylistArgs): Promise<NDAddToPlaylist> => {
-  const { query, body, server, signal } = args;
-
-  const json: NDAddToPlaylistBody = {
-    ids: body.songId,
-  };
-
-  await api
-    .post(`api/playlist/${query.id}/tracks`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      json,
-      prefixUrl: server?.url,
-      signal,
-    })
-    .json<NDAddToPlaylistResponse>();
-
-  return null;
-};
-
-const removeFromPlaylist = async (args: RemoveFromPlaylistArgs): Promise<NDRemoveFromPlaylist> => {
-  const { query, server, signal } = args;
-
-  const searchParams: NDRemoveFromPlaylistParams = {
-    id: query.songId,
-  };
-
-  await api
-    .delete(`api/playlist/${query.id}/tracks`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      searchParams: parseSearchParams(searchParams),
-      signal,
-    })
-    .json<NDRemoveFromPlaylistResponse>();
-
-  return null;
-};
-
-const getCoverArtUrl = (args: {
-  baseUrl: string;
-  coverArtId: string;
-  credential: string;
-  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: NDSong | NDPlaylistSong,
-  server: ServerListItem,
-  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,
-    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: NDAlbum, server: ServerListItem, 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,
-    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,
-  };
-};
-
-const normalizeAlbumArtist = (item: NDAlbumArtist, server: ServerListItem): 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,
-    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: NDPlaylist,
-  server: ServerListItem,
-  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,
-    serverType: ServerType.NAVIDROME,
-    size: item.size,
-    songCount: item.songCount,
-    sync: item.sync,
-  };
-};
-
-const normalizeUser = (item: NDUser): User => {
-  return {
-    createdAt: item.createdAt,
-    email: item.email,
-    id: item.id,
-    isAdmin: item.isAdmin,
-    lastLoginAt: item.lastLoginAt,
-    name: item.userName,
-    updatedAt: item.updatedAt,
-  };
-};
-
-export const navidromeApi = {
-  addToPlaylist,
-  authenticate,
-  createPlaylist,
-  deletePlaylist,
-  getAlbumArtistDetail,
-  getAlbumArtistList,
-  getAlbumDetail,
-  getAlbumList,
-  getGenreList,
-  getPlaylistDetail,
-  getPlaylistList,
-  getPlaylistSongList,
-  getSongDetail,
-  getSongList,
-  getUserList,
-  removeFromPlaylist,
-  updatePlaylist,
-};
-
-export const ndNormalize = {
-  album: normalizeAlbum,
-  albumArtist: normalizeAlbumArtist,
-  playlist: normalizePlaylist,
-  song: normalizeSong,
-  user: normalizeUser,
-};

src/renderer/api/navidrome.types.ts

@@ -1,466 +0,0 @@
-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/normalize.ts

@@ -1,291 +0,0 @@
-import { jfNormalize } from '/@/renderer/api/jellyfin.api';
-import type {
-  JFAlbum,
-  JFAlbumArtist,
-  JFGenreList,
-  JFMusicFolderList,
-  JFPlaylist,
-  JFSong,
-} from '/@/renderer/api/jellyfin.types';
-import { ndNormalize } from '/@/renderer/api/navidrome.api';
-import type {
-  NDAlbum,
-  NDAlbumArtist,
-  NDGenreList,
-  NDPlaylist,
-  NDSong,
-  NDUser,
-} from '/@/renderer/api/navidrome.types';
-import { ssNormalize } from '/@/renderer/api/subsonic.api';
-import { SSGenreList, SSMusicFolderList, SSSong } from '/@/renderer/api/subsonic.types';
-import type {
-  Album,
-  AlbumArtist,
-  RawAlbumArtistDetailResponse,
-  RawAlbumArtistListResponse,
-  RawAlbumDetailResponse,
-  RawAlbumListResponse,
-  RawGenreListResponse,
-  RawMusicFolderListResponse,
-  RawPlaylistDetailResponse,
-  RawPlaylistListResponse,
-  RawSongListResponse,
-  RawTopSongListResponse,
-  RawUserListResponse,
-} from '/@/renderer/api/types';
-import { ServerListItem } from '/@/renderer/types';
-
-const albumList = (data: RawAlbumListResponse | undefined, server: ServerListItem | null) => {
-  let albums;
-  switch (server?.type) {
-    case 'jellyfin':
-      albums = data?.items.map((item) => jfNormalize.album(item as JFAlbum, server));
-      break;
-    case 'navidrome':
-      albums = data?.items.map((item) => ndNormalize.album(item as NDAlbum, server));
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return {
-    items: albums,
-    startIndex: data?.startIndex,
-    totalRecordCount: data?.totalRecordCount,
-  };
-};
-
-const albumDetail = (
-  data: RawAlbumDetailResponse | undefined,
-  server: ServerListItem | null,
-): Album | undefined => {
-  let album: Album | undefined;
-  switch (server?.type) {
-    case 'jellyfin':
-      album = jfNormalize.album(data as JFAlbum, server);
-      break;
-    case 'navidrome':
-      album = ndNormalize.album(data as NDAlbum, server);
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return album;
-};
-
-const songList = (data: RawSongListResponse | undefined, server: ServerListItem | null) => {
-  let songs;
-  switch (server?.type) {
-    case 'jellyfin':
-      songs = data?.items.map((item) => jfNormalize.song(item as JFSong, server, ''));
-      break;
-    case 'navidrome':
-      songs = data?.items.map((item) => ndNormalize.song(item as NDSong, server, ''));
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return {
-    items: songs,
-    startIndex: data?.startIndex,
-    totalRecordCount: data?.totalRecordCount,
-  };
-};
-
-const topSongList = (data: RawTopSongListResponse | undefined, server: ServerListItem | null) => {
-  let songs;
-
-  switch (server?.type) {
-    case 'jellyfin':
-      break;
-    case 'navidrome':
-      songs = data?.items?.map((item) => ssNormalize.song(item as SSSong, server, ''));
-      break;
-    case 'subsonic':
-      songs = data?.items?.map((item) => ssNormalize.song(item as SSSong, server, ''));
-      break;
-  }
-
-  return {
-    items: songs,
-  };
-};
-
-const musicFolderList = (
-  data: RawMusicFolderListResponse | undefined,
-  server: ServerListItem | null,
-) => {
-  let musicFolders;
-  switch (server?.type) {
-    case 'jellyfin':
-      musicFolders = (data as JFMusicFolderList)?.map((item) => ({
-        id: String(item.Id),
-        name: item.Name,
-      }));
-      break;
-    case 'navidrome':
-      musicFolders = (data as SSMusicFolderList)?.map((item) => ({
-        id: String(item.id),
-        name: item.name,
-      }));
-      break;
-    case 'subsonic':
-      musicFolders = (data as SSMusicFolderList)?.map((item) => ({
-        id: String(item.id),
-        name: item.name,
-      }));
-      break;
-  }
-
-  return musicFolders;
-};
-
-const genreList = (data: RawGenreListResponse | undefined, server: ServerListItem | null) => {
-  let genres;
-  switch (server?.type) {
-    case 'jellyfin':
-      genres = (data as JFGenreList)?.Items.map((item) => ({
-        id: String(item.Id),
-        name: item.Name,
-      })).sort((a, b) => a.name.localeCompare(b.name));
-      break;
-    case 'navidrome':
-      genres = (data as NDGenreList)
-        ?.map((item) => ({
-          id: String(item.id),
-          name: item.name,
-        }))
-        .sort((a, b) => a.name.localeCompare(b.name));
-      break;
-    case 'subsonic':
-      genres = (data as SSGenreList)
-        ?.map((item) => ({
-          id: item.value,
-          name: item.value,
-        }))
-        .sort((a, b) => a.name.localeCompare(b.name));
-      break;
-  }
-
-  return genres;
-};
-
-const albumArtistDetail = (
-  data: RawAlbumArtistDetailResponse | undefined,
-  server: ServerListItem | null,
-): AlbumArtist | undefined => {
-  let albumArtist: AlbumArtist | undefined;
-  switch (server?.type) {
-    case 'jellyfin':
-      albumArtist = jfNormalize.albumArtist(data as JFAlbumArtist, server);
-      break;
-    case 'navidrome':
-      albumArtist = ndNormalize.albumArtist(data as NDAlbumArtist, server);
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return albumArtist;
-};
-
-const albumArtistList = (
-  data: RawAlbumArtistListResponse | undefined,
-  server: ServerListItem | null,
-) => {
-  let albumArtists;
-  switch (server?.type) {
-    case 'jellyfin':
-      albumArtists = data?.items.map((item) =>
-        jfNormalize.albumArtist(item as JFAlbumArtist, server),
-      );
-      break;
-    case 'navidrome':
-      albumArtists = data?.items.map((item) =>
-        ndNormalize.albumArtist(item as NDAlbumArtist, server),
-      );
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return {
-    items: albumArtists,
-    startIndex: data?.startIndex,
-    totalRecordCount: data?.totalRecordCount,
-  };
-};
-
-const playlistList = (data: RawPlaylistListResponse | undefined, server: ServerListItem | null) => {
-  let playlists;
-  switch (server?.type) {
-    case 'jellyfin':
-      playlists = data?.items.map((item) => jfNormalize.playlist(item as JFPlaylist, server));
-      break;
-    case 'navidrome':
-      playlists = data?.items.map((item) => ndNormalize.playlist(item as NDPlaylist, server));
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return {
-    items: playlists,
-    startIndex: data?.startIndex,
-    totalRecordCount: data?.totalRecordCount,
-  };
-};
-
-const playlistDetail = (
-  data: RawPlaylistDetailResponse | undefined,
-  server: ServerListItem | null,
-) => {
-  let playlist;
-  switch (server?.type) {
-    case 'jellyfin':
-      playlist = jfNormalize.playlist(data as JFPlaylist, server);
-      break;
-    case 'navidrome':
-      playlist = ndNormalize.playlist(data as NDPlaylist, server);
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return playlist;
-};
-
-const userList = (data: RawUserListResponse | undefined, server: ServerListItem | null) => {
-  let users;
-  switch (server?.type) {
-    case 'jellyfin':
-      break;
-    case 'navidrome':
-      users = data?.items.map((item) => ndNormalize.user(item as NDUser));
-      break;
-    case 'subsonic':
-      break;
-  }
-
-  return {
-    items: users,
-    startIndex: data?.startIndex,
-    totalRecordCount: data?.totalRecordCount,
-  };
-};
-
-export const normalize = {
-  albumArtistDetail,
-  albumArtistList,
-  albumDetail,
-  albumList,
-  genreList,
-  musicFolderList,
-  playlistDetail,
-  playlistList,
-  songList,
-  topSongList,
-  userList,
-};

src/renderer/api/queries/useAlbum.ts

@@ -0,0 +1,10 @@
+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

@@ -1,96 +0,0 @@
-import type {
-  AlbumListQuery,
-  SongListQuery,
-  AlbumDetailQuery,
-  AlbumArtistListQuery,
-  ArtistListQuery,
-  PlaylistListQuery,
-  PlaylistDetailQuery,
-  PlaylistSongListQuery,
-  UserListQuery,
-  AlbumArtistDetailQuery,
-  TopSongListQuery,
-} from './types';
-
-export const queryKeys = {
-  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) return [serverId, 'playlists', id, 'songList', query] as const;
-      if (id) return [serverId, 'playlists', id, 'songList'] as const;
-      return [serverId, 'playlists', 'songList'] as const;
-    },
-  },
-  server: {
-    root: (serverId: string) => [serverId] as const,
-  },
-  songs: {
-    list: (serverId: string, query?: SongListQuery) => {
-      if (query) return [serverId, 'songs', 'list', query] as const;
-      return [serverId, 'songs', 'list'] 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,22 @@
+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.api.ts

@@ -1,494 +0,0 @@
-import ky from 'ky';
-import md5 from 'md5';
-import { parseSearchParams, randomString } from '/@/renderer/utils';
-import type {
-  SSAlbumListResponse,
-  SSAlbumDetailResponse,
-  SSArtistIndex,
-  SSAlbumArtistList,
-  SSAlbumArtistListResponse,
-  SSGenreListResponse,
-  SSMusicFolderList,
-  SSMusicFolderListResponse,
-  SSGenreList,
-  SSAlbumDetail,
-  SSAlbumList,
-  SSAlbumArtistDetail,
-  SSAlbumArtistDetailResponse,
-  SSFavoriteParams,
-  SSRatingParams,
-  SSAlbumArtistDetailParams,
-  SSAlbumArtistListParams,
-  SSTopSongListParams,
-  SSTopSongListResponse,
-  SSArtistInfoParams,
-  SSArtistInfoResponse,
-  SSArtistInfo,
-  SSSong,
-  SSTopSongList,
-  SSScrobbleParams,
-} from '/@/renderer/api/subsonic.types';
-import {
-  AlbumArtistDetailArgs,
-  AlbumArtistListArgs,
-  AlbumDetailArgs,
-  AlbumListArgs,
-  ArtistInfoArgs,
-  AuthenticationResponse,
-  FavoriteArgs,
-  FavoriteResponse,
-  GenreListArgs,
-  LibraryItem,
-  MusicFolderListArgs,
-  QueueSong,
-  RatingArgs,
-  RatingResponse,
-  RawScrobbleResponse,
-  ScrobbleArgs,
-  ServerListItem,
-  ServerType,
-  TopSongListArgs,
-} from '/@/renderer/api/types';
-import { toast } from '/@/renderer/components/toast';
-import { nanoid } from 'nanoid/non-secure';
-
-const getCoverArtUrl = (args: {
-  baseUrl: string;
-  coverArtId: string;
-  credential: string;
-  size: number;
-}) => {
-  const size = args.size ? args.size : 150;
-
-  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 api = ky.create({
-  hooks: {
-    afterResponse: [
-      async (_request, _options, response) => {
-        const data = await response.json();
-        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 new Response(JSON.stringify(data['subsonic-response']), { status: 200 });
-      },
-    ],
-  },
-});
-
-const getDefaultParams = (server: ServerListItem | null) => {
-  if (!server) return {};
-
-  const authParams = server.credential.split(/&?\w=/gm);
-
-  const params: Record<string, string> = {
-    c: 'Feishin',
-    f: 'json',
-    u: server.username,
-    v: '1.13.0',
-  };
-
-  if (authParams?.length === 4) {
-    params.s = authParams[2];
-    params.t = authParams[3];
-  } else if (authParams?.length === 3) {
-    params.p = authParams[2];
-  }
-
-  return params;
-};
-
-const authenticate = async (
-  url: string,
-  body: {
-    legacy?: boolean;
-    password: string;
-    username: string;
-  },
-): Promise<AuthenticationResponse> => {
-  let credential;
-  const cleanServerUrl = url.replace(/\/$/, '');
-
-  if (body.legacy) {
-    credential = `u=${body.username}&p=${body.password}`;
-  } else {
-    const salt = randomString(12);
-    const hash = md5(body.password + salt);
-    credential = `u=${body.username}&s=${salt}&t=${hash}`;
-  }
-
-  await ky.get(`${cleanServerUrl}/rest/ping.view?v=1.13.0&c=Feishin&f=json&${credential}`);
-
-  return {
-    credential,
-    userId: null,
-    username: body.username,
-  };
-};
-
-const getMusicFolderList = async (args: MusicFolderListArgs): Promise<SSMusicFolderList> => {
-  const { signal, server } = args;
-  const defaultParams = getDefaultParams(server);
-
-  const data = await api
-    .get('rest/getMusicFolders.view', {
-      prefixUrl: server?.url,
-      searchParams: defaultParams,
-      signal,
-    })
-    .json<SSMusicFolderListResponse>();
-
-  return data.musicFolders.musicFolder;
-};
-
-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 { server, query, signal } = args;
-  const defaultParams = getDefaultParams(server);
-
-  for (const id of query.id) {
-    const searchParams: SSFavoriteParams = {
-      albumId: query.type === LibraryItem.ALBUM ? id : undefined,
-      artistId: query.type === LibraryItem.ALBUM_ARTIST ? id : undefined,
-      id: query.type === LibraryItem.SONG ? id : undefined,
-      ...defaultParams,
-    };
-
-    await api.get('rest/star.view', {
-      prefixUrl: server?.url,
-      searchParams: parseSearchParams(searchParams),
-      signal,
-    });
-    // .json<SSFavoriteResponse>();
-  }
-
-  return {
-    id: query.id,
-    type: query.type,
-  };
-};
-
-const deleteFavorite = async (args: FavoriteArgs): Promise<FavoriteResponse> => {
-  const { server, query, signal } = args;
-  const defaultParams = getDefaultParams(server);
-
-  for (const id of query.id) {
-    const searchParams: SSFavoriteParams = {
-      albumId: query.type === LibraryItem.ALBUM ? id : undefined,
-      artistId: query.type === LibraryItem.ALBUM_ARTIST ? id : undefined,
-      id: query.type === LibraryItem.SONG ? id : undefined,
-      ...defaultParams,
-    };
-
-    await api.get('rest/unstar.view', {
-      prefixUrl: server?.url,
-      searchParams: parseSearchParams(searchParams),
-      signal,
-    });
-    // .json<SSFavoriteResponse>();
-  }
-
-  return {
-    id: query.id,
-    type: query.type,
-  };
-};
-
-const updateRating = async (args: RatingArgs): Promise<RatingResponse> => {
-  const { server, query, signal } = args;
-  const defaultParams = getDefaultParams(server);
-
-  const itemIds = query.item.map((item) => item.id);
-
-  for (const id of itemIds) {
-    const searchParams: SSRatingParams = {
-      id,
-      rating: query.rating,
-      ...defaultParams,
-    };
-
-    await api.get('rest/setRating.view', {
-      prefixUrl: server?.url,
-      searchParams: parseSearchParams(searchParams),
-      signal,
-    });
-  }
-
-  return null;
-};
-
-const getTopSongList = async (args: TopSongListArgs): Promise<SSTopSongList> => {
-  const { signal, server, query } = args;
-  const defaultParams = getDefaultParams(server);
-
-  const searchParams: SSTopSongListParams = {
-    artist: query.artist,
-    count: query.limit,
-    ...defaultParams,
-  };
-
-  const data = await api
-    .get('rest/getTopSongs.view', {
-      prefixUrl: server?.url,
-      searchParams: parseSearchParams(searchParams),
-      signal,
-    })
-    .json<SSTopSongListResponse>();
-
-  return {
-    items: data?.topSongs?.song,
-    startIndex: 0,
-    totalRecordCount: data?.topSongs?.song?.length || 0,
-  };
-};
-
-const getArtistInfo = async (args: ArtistInfoArgs): Promise<SSArtistInfo> => {
-  const { signal, server, query } = args;
-  const defaultParams = getDefaultParams(server);
-
-  const searchParams: SSArtistInfoParams = {
-    count: query.limit,
-    id: query.artistId,
-    ...defaultParams,
-  };
-
-  const data = await api
-    .get('rest/getArtistInfo2.view', {
-      prefixUrl: server?.url,
-      searchParams,
-      signal,
-    })
-    .json<SSArtistInfoResponse>();
-
-  return data.artistInfo2;
-};
-
-const scrobble = async (args: ScrobbleArgs): Promise<RawScrobbleResponse> => {
-  const { signal, server, query } = args;
-  const defaultParams = getDefaultParams(server);
-
-  const searchParams: SSScrobbleParams = {
-    id: query.id,
-    submission: query.submission,
-    ...defaultParams,
-  };
-
-  await api.get('rest/scrobble.view', {
-    prefixUrl: server?.url,
-    searchParams,
-    signal,
-  });
-
-  return null;
-};
-
-const normalizeSong = (item: SSSong, server: ServerListItem, deviceId: string): QueueSong => {
-  const imageUrl =
-    getCoverArtUrl({
-      baseUrl: server.url,
-      coverArtId: item.coverArt,
-      credential: server.credential,
-      size: 300,
-    }) || 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,
-    bpm: null,
-    channels: null,
-    comment: null,
-    compilation: null,
-    container: item.contentType,
-    createdAt: item.created,
-    discNumber: item.discNumber || 1,
-    duration: item.duration,
-    genres: [
-      {
-        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,
-    serverType: ServerType.SUBSONIC,
-    size: item.size,
-    streamUrl,
-    trackNumber: item.track,
-    uniqueId: nanoid(),
-    updatedAt: '',
-    userFavorite: item.starred || false,
-    userRating: item.userRating || null,
-  };
-};
-
-export const subsonicApi = {
-  authenticate,
-  createFavorite,
-  deleteFavorite,
-  getAlbumArtistDetail,
-  getAlbumArtistList,
-  getAlbumDetail,
-  getAlbumList,
-  getArtistInfo,
-  getCoverArtUrl,
-  getGenreList,
-  getMusicFolderList,
-  getTopSongList,
-  scrobble,
-  updateRating,
-};
-
-export const ssNormalize = {
-  song: normalizeSong,
-};

src/renderer/api/subsonic.types.ts

@@ -1,224 +0,0 @@
-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/usersApi.ts

@@ -0,0 +1,11 @@
+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/app.tsx

@@ -1,117 +1,54 @@
-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 { ReactNode, useEffect } from 'react';
 import { MantineProvider } from '@mantine/core';
-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 { useSettingsStore } from './store/settings.store';
+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 './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';
 
-ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
+const SelectRouter = ({ children }: { children: ReactNode }) => {
+  if (isElectron()) {
+    return <HashRouter>{children}</HashRouter>;
+  }
 
-initSimpleImg({ threshold: 0.05 }, true);
+  return <BrowserRouter>{children}</BrowserRouter>;
+};
 
 export const App = () => {
-  const theme = useTheme();
-  const contentFont = useSettingsStore((state) => state.general.fontContent);
+  const [theme] = useLocalStorage({
+    defaultValue: 'dark',
+    key: 'theme',
+  });
 
-  const handlePlayQueueAdd = useHandlePlayQueueAdd();
+  useDefaultSettings();
 
   useEffect(() => {
-    const root = document.documentElement;
-    root.style.setProperty('--content-font-family', contentFont);
-  }, [contentFont]);
+    document.body.setAttribute('data-theme', theme);
+  }, [theme]);
 
   return (
     <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
       theme={{
-        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' },
-            },
-          },
-        },
+        colorScheme: 'dark',
         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: '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',
-          },
+          lg: 16,
+          md: 14,
+          sm: 12,
+          xl: 18,
+          xs: 10,
         },
         other: {},
         spacing: {
-          lg: '2rem',
-          md: '1rem',
-          sm: '0.5rem',
-          xl: '4rem',
-          xs: '0rem',
+          xs: 2,
         },
       }}
     >
-      <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>
+      <SelectRouter>
+        <AppRouter />
+      </SelectRouter>
     </MantineProvider>
   );
 };

src/renderer/components/accordion/index.tsx

@@ -1,23 +0,0 @@
-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/AudioPlayer.tsx

@@ -1,24 +1,27 @@
-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 {
-  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';
+  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';
 
 interface AudioPlayerProps extends ReactPlayerProps {
   crossfadeDuration: number;
   crossfadeStyle: CrossfadeStyle;
   currentPlayer: 1 | 2;
-  playbackStyle: PlaybackStyle;
   player1: Song;
   player2: Song;
   status: PlayerStatus;
+  style: PlaybackStyle;
   volume: number;
 }
 
@@ -37,7 +40,7 @@ export const AudioPlayer = forwardRef(
   (
     {
       status,
-      playbackStyle,
+      style,
       crossfadeStyle,
       crossfadeDuration,
       currentPlayer,
@@ -47,12 +50,11 @@ 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.player.audioDeviceId);
 
     useImperativeHandle(ref, () => ({
       get player1() {
@@ -68,19 +70,6 @@ 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({
@@ -97,7 +86,13 @@ export const AudioPlayer = forwardRef(
           volume,
         });
       },
-      [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
+      [
+        crossfadeDuration,
+        crossfadeStyle,
+        currentPlayer,
+        isTransitioning,
+        volume,
+      ]
     );
 
     const handleCrossfade2 = useCallback(
@@ -116,7 +111,13 @@ export const AudioPlayer = forwardRef(
           volume,
         });
       },
-      [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
+      [
+        crossfadeDuration,
+        crossfadeStyle,
+        currentPlayer,
+        isTransitioning,
+        volume,
+      ]
     );
 
     const handleGapless1 = useCallback(
@@ -124,13 +125,13 @@ export const AudioPlayer = forwardRef(
         return gaplessHandler({
           currentTime: e.playedSeconds,
           duration: getDuration(player1Ref),
-          isFlac: player1?.container === 'flac',
+          isFlac: player1?.suffix === 'flac',
           isTransitioning,
           nextPlayerRef: player2Ref,
           setIsTransitioning,
         });
       },
-      [isTransitioning, player1?.container],
+      [isTransitioning, player1?.suffix]
     );
 
     const handleGapless2 = useCallback(
@@ -138,54 +139,46 @@ export const AudioPlayer = forwardRef(
         return gaplessHandler({
           currentTime: e.playedSeconds,
           duration: getDuration(player2Ref),
-          isFlac: player2?.container === 'flac',
+          isFlac: player2?.suffix === 'flac',
           isTransitioning,
           nextPlayerRef: player1Ref,
           setIsTransitioning,
         });
       },
-      [isTransitioning, player2?.container],
+      [isTransitioning, player2?.suffix]
     );
 
-    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={playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1}
+          onProgress={
+            style === 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={playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2}
+          onProgress={
+            style === PlaybackStyle.Gapless ? handleGapless2 : handleCrossfade2
+          }
         />
       </>
     );
-  },
+  }
 );

src/renderer/components/audio-player/utils/listenHandlers.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
-import type { Dispatch } from 'react';
-import { CrossfadeStyle } from '/@/renderer/types';
+import { Dispatch } from 'react';
+import { CrossfadeStyle } from '../../../../types';
 
 export const gaplessHandler = (args: {
   currentTime: number;
@@ -10,8 +10,14 @@ 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) {
@@ -75,12 +81,15 @@ 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
@@ -101,14 +110,19 @@ 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;
   }
 
@@ -116,7 +130,9 @@ 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

@@ -1,32 +0,0 @@
-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>`
-  .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

@@ -0,0 +1,10 @@
+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

@@ -1,290 +0,0 @@
-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) => {
-    switch (props.variant) {
-      case 'default':
-        return 'var(--btn-default-fg)';
-      case 'filled':
-        return 'var(--btn-primary-fg)';
-      case 'subtle':
-        return 'var(--btn-subtle-fg)';
-      default:
-        return '';
-    }
-  }};
-  background: ${(props) => {
-    switch (props.variant) {
-      case 'default':
-        return 'var(--btn-default-bg)';
-      case 'filled':
-        return 'var(--btn-primary-bg)';
-      case 'subtle':
-        return 'var(--btn-subtle-bg)';
-      default:
-        return '';
-    }
-  }};
-  border: none;
-  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-
-  svg {
-    transition: fill 0.2s ease-in-out;
-    fill: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg)';
-        case 'filled':
-          return 'var(--btn-primary-fg)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg)';
-        default:
-          return '';
-      }
-    }};
-  }
-
-  &:disabled {
-    color: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg)';
-        case 'filled':
-          return 'var(--btn-primary-fg)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg)';
-        default:
-          return '';
-      }
-    }};
-    background: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-bg)';
-        case 'filled':
-          return 'var(--btn-primary-bg)';
-        case 'subtle':
-          return 'var(--btn-subtle-bg)';
-        default:
-          return '';
-      }
-    }};
-
-    opacity: 0.6;
-  }
-
-  &:not([data-disabled])&:hover {
-    color: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-fg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg-hover) !important';
-        default:
-          return '';
-      }
-    }};
-    background: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-bg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-bg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-bg-hover)';
-        default:
-          return '';
-      }
-    }};
-
-    svg {
-      fill: ${(props) => {
-        switch (props.variant) {
-          case 'default':
-            return 'var(--btn-default-fg-hover)';
-          case 'filled':
-            return 'var(--btn-primary-fg-hover)';
-          case 'subtle':
-            return 'var(--btn-subtle-fg-hover)';
-          default:
-            return '';
-        }
-      }};
-    }
-  }
-
-  &:not([data-disabled])&:focus-visible {
-    color: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-fg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-fg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-fg-hover)';
-        default:
-          return '';
-      }
-    }};
-    background: ${(props) => {
-      switch (props.variant) {
-        case 'default':
-          return 'var(--btn-default-bg-hover)';
-        case 'filled':
-          return 'var(--btn-primary-bg-hover)';
-        case 'subtle':
-          return 'var(--btn-subtle-bg-hover)';
-        default:
-          return '';
-      }
-    }};
-  }
-
-  &:active {
-    transform: none;
-  }
-
-  & .mantine-Button-centerLoader {
-    display: none;
-  }
-
-  & .mantine-Button-leftIcon {
-    display: flex;
-    margin-right: 0.5rem;
-  }
-
-  .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

@@ -1,218 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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 { useSettingsStore } 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 = useSettingsStore((state) => state.player.playButtonBehavior);
-
-  const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
-    e.preventDefault();
-    e.stopPropagation();
-    handlePlayQueueAdd?.({
-      byItemType: {
-        id: [itemData.id],
-        type: itemType,
-      },
-      play: 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

@@ -1,212 +0,0 @@
-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 | Artist | 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

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

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

@@ -1,122 +0,0 @@
-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: 10px;
-  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
-
-  button:first-child {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-  }
-`;
-
-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>
-    );
-  },
-);

src/renderer/components/date-picker/index.tsx

@@ -1,50 +0,0 @@
-import type { DatePickerProps as MantineDatePickerProps } from '@mantine/dates';
-import { DatePicker as MantineDatePicker } from '@mantine/dates';
-import styled from 'styled-components';
-
-interface DatePickerProps extends MantineDatePickerProps {
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>`
-  & .mantine-DatePicker-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
-    }
-  }
-
-  & .mantine-DatePicker-icon {
-    color: var(--input-placeholder-fg);
-  }
-
-  & .mantine-DatePicker-required {
-    color: var(--secondary-color);
-  }
-
-  & .mantine-DatePicker-label {
-    font-family: var(--label-font-faimly);
-  }
-
-  & .mantine-DateRangePicker-disabled {
-    opacity: 0.6;
-  }
-`;
-
-export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
-  return (
-    <StyledDatePicker
-      withinPortal
-      {...props}
-      sx={{ maxWidth, width }}
-    />
-  );
-};
-
-DatePicker.defaultProps = {
-  maxWidth: undefined,
-  width: undefined,
-};

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

@@ -1,139 +0,0 @@
-import type {
-  MenuProps as MantineMenuProps,
-  MenuItemProps as MantineMenuItemProps,
-  MenuLabelProps as MantineMenuLabelProps,
-  MenuDividerProps as MantineMenuDividerProps,
-  MenuDropdownProps as MantineMenuDropdownProps,
-} from '@mantine/core';
-import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core';
-import styled from 'styled-components';
-
-type MenuProps = MantineMenuProps;
-type MenuLabelProps = MantineMenuLabelProps;
-interface MenuItemProps extends MantineMenuItemProps {
-  $danger?: boolean;
-  $isActive?: boolean;
-  children: React.ReactNode;
-}
-type MenuDividerProps = MantineMenuDividerProps;
-type MenuDropdownProps = MantineMenuDropdownProps;
-
-const StyledMenu = styled(MantineMenu)<MenuProps>``;
-
-const StyledMenuLabel = styled(MantineMenu.Label)<MenuLabelProps>`
-  padding: 0.5rem;
-  font-family: var(--content-font-family);
-`;
-
-const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
-  position: relative;
-  padding: var(--dropdown-menu-item-padding);
-  font-size: var(--dropdown-menu-item-font-size);
-  font-family: var(--content-font-family);
-
-  ${(props) =>
-    props.$isActive &&
-    `
-      &::before {
-        content: ''; // ::before and ::after both require content
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--dropdown-menu-bg-hover);
-        opacity: 0.5;
-        z-index: -1;
-      }
-
-  `}
-
-  &:disabled {
-    opacity: 0.6;
-  }
-
-  &:hover {
-    background-color: var(--dropdown-menu-bg-hover);
-  }
-
-  & .mantine-Menu-itemLabel {
-    margin-right: 2rem;
-    margin-left: 1rem;
-    color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
-  }
-
-  cursor: default;
-`;
-
-const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
-  margin: 0;
-  padding: 0;
-  background: var(--dropdown-menu-bg);
-  border: var(--dropdown-menu-border);
-  border-radius: var(--dropdown-menu-border-radius);
-  filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
-
-  *:first-child {
-    border-top-left-radius: var(--dropdown-menu-border-radius);
-    border-top-right-radius: var(--dropdown-menu-border-radius);
-  }
-
-  *:last-child {
-    border-bottom-right-radius: var(--dropdown-menu-border-radius);
-    border-bottom-left-radius: var(--dropdown-menu-border-radius);
-  }
-`;
-
-const StyledMenuDivider = styled(MantineMenu.Divider)`
-  /* margin: 0.3rem 0; */
-`;
-
-export const DropdownMenu = ({ children, ...props }: MenuProps) => {
-  return (
-    <StyledMenu
-      withinPortal
-      styles={{
-        dropdown: {
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
-        },
-      }}
-      transition="fade"
-      {...props}
-    >
-      {children}
-    </StyledMenu>
-  );
-};
-
-const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
-  return <StyledMenuLabel {...props}>{children}</StyledMenuLabel>;
-};
-
-const pMenuItem = ({ $isActive, $danger, children, ...props }: MenuItemProps) => {
-  return (
-    <StyledMenuItem
-      $danger={$danger}
-      $isActive={$isActive}
-      // rightSection={$isActive && <RiArrowLeftSFill size={20} />}
-      {...props}
-    >
-      {children}
-    </StyledMenuItem>
-  );
-};
-
-const MenuDropdown = ({ children, ...props }: MenuDropdownProps) => {
-  return <StyledMenuDropdown {...props}>{children}</StyledMenuDropdown>;
-};
-
-const MenuItem = createPolymorphicComponent<'button', MenuItemProps>(pMenuItem);
-
-const MenuDivider = ({ ...props }: MenuDividerProps) => {
-  return <StyledMenuDivider {...props} />;
-};
-
-DropdownMenu.Label = MenuLabel;
-DropdownMenu.Item = MenuItem;
-DropdownMenu.Target = MantineMenu.Target;
-DropdownMenu.Dropdown = MenuDropdown;
-DropdownMenu.Divider = MenuDivider;

src/renderer/components/dropzone/index.tsx

@@ -1,33 +0,0 @@
-import type { DropzoneProps as MantineDropzoneProps } from '@mantine/dropzone';
-import { Dropzone as MantineDropzone } from '@mantine/dropzone';
-import styled from 'styled-components';
-
-export type DropzoneProps = MantineDropzoneProps;
-
-const StyledDropzone = styled(MantineDropzone)`
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: var(--input-bg);
-  border-radius: 5px;
-  opacity: 0.8;
-  transition: opacity 0.2s ease;
-
-  &:hover {
-    background: var(--input-bg);
-    opacity: 1;
-  }
-
-  & .mantine-Dropzone-inner {
-    display: flex;
-  }
-`;
-
-export const Dropzone = ({ children, ...props }: DropzoneProps) => {
-  return <StyledDropzone {...props}>{children}</StyledDropzone>;
-};
-
-Dropzone.Accept = StyledDropzone.Accept;
-Dropzone.Idle = StyledDropzone.Idle;
-Dropzone.Reject = StyledDropzone.Reject;

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

@@ -1,228 +0,0 @@
-import type { MouseEvent } from 'react';
-import { useState } from 'react';
-import { Group, Image, Stack } from '@mantine/core';
-import type { Variants } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
-import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
-import { Link, generatePath } from 'react-router-dom';
-import styled from 'styled-components';
-import type { Album } from '/@/renderer/api/types';
-import { Button } from '/@/renderer/components/button';
-import { TextTitle } from '/@/renderer/components/text-title';
-import { Badge } from '/@/renderer/components/badge';
-import { AppRoute } from '/@/renderer/router/routes';
-
-const Carousel = styled(motion.div)`
-  position: relative;
-  height: 30vh;
-  min-height: 250px;
-
-  padding: 2rem;
-  overflow: hidden;
-  background: linear-gradient(180deg, var(--main-bg), rgba(25, 26, 28, 60%));
-`;
-
-const Grid = styled.div`
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-template-areas: 'image info';
-  grid-template-rows: 1fr;
-  grid-template-columns: 200px 1fr;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-`;
-
-const ImageColumn = styled.div`
-  z-index: 15;
-  display: flex;
-  grid-area: image;
-  align-items: flex-end;
-`;
-
-const InfoColumn = styled.div`
-  z-index: 15;
-  display: flex;
-  grid-area: info;
-  align-items: flex-end;
-  width: 100%;
-  padding-left: 1rem;
-`;
-
-const BackgroundImage = styled.img`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 150%;
-  height: 150%;
-  object-fit: cover;
-  object-position: 0 30%;
-  filter: blur(24px);
-  user-select: none;
-`;
-
-const BackgroundImageOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, rgba(25, 26, 28, 30%), var(--main-bg));
-`;
-
-const Wrapper = styled(Link)`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-`;
-
-const TitleWrapper = styled.div`
-  /* stylelint-disable-next-line value-no-vendor-prefix */
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`;
-
-const variants: Variants = {
-  animate: {
-    opacity: 1,
-    transition: { opacity: { duration: 0.5 } },
-  },
-  exit: {
-    opacity: 0,
-    transition: { opacity: { duration: 0.5 } },
-  },
-  initial: {
-    opacity: 0,
-  },
-};
-
-interface FeatureCarouselProps {
-  data: Album[] | undefined;
-}
-
-export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
-  const [itemIndex, setItemIndex] = useState(0);
-  const [direction, setDirection] = useState(0);
-
-  const currentItem = data?.[itemIndex];
-
-  const handleNext = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setDirection(1);
-    setItemIndex((prev) => prev + 1);
-  };
-
-  const handlePrevious = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setDirection(-1);
-    setItemIndex((prev) => prev - 1);
-  };
-
-  return (
-    <Wrapper to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: currentItem?.id || '' })}>
-      <AnimatePresence
-        custom={direction}
-        initial={false}
-        mode="popLayout"
-      >
-        {data && (
-          <Carousel
-            key={`image-${itemIndex}`}
-            animate="animate"
-            custom={direction}
-            exit="exit"
-            initial="initial"
-            variants={variants}
-          >
-            <Grid>
-              <ImageColumn>
-                <Image
-                  height={225}
-                  placeholder="var(--card-default-bg)"
-                  radius="sm"
-                  src={data[itemIndex]?.imageUrl}
-                  sx={{ objectFit: 'cover' }}
-                  width={225}
-                />
-              </ImageColumn>
-              <InfoColumn>
-                <Stack
-                  spacing="md"
-                  sx={{ width: '100%' }}
-                >
-                  <TitleWrapper>
-                    <TextTitle
-                      lh="4rem"
-                      lineClamp={2}
-                      order={1}
-                      sx={{ fontSize: '4rem' }}
-                      weight={900}
-                    >
-                      {currentItem?.name}
-                    </TextTitle>
-                  </TitleWrapper>
-                  <TitleWrapper>
-                    {currentItem?.albumArtists.map((artist) => (
-                      <TextTitle
-                        key={`carousel-artist-${artist.id}`}
-                        order={2}
-                        weight={600}
-                      >
-                        {artist.name}
-                      </TextTitle>
-                    ))}
-                  </TitleWrapper>
-                  <Group>
-                    {currentItem?.genres?.map((genre) => (
-                      <Badge
-                        key={`carousel-genre-${genre.id}`}
-                        size="lg"
-                      >
-                        {genre.name}
-                      </Badge>
-                    ))}
-                    <Badge size="lg">{currentItem?.releaseYear}</Badge>
-                    <Badge size="lg">{currentItem?.songCount} tracks</Badge>
-                  </Group>
-                </Stack>
-              </InfoColumn>
-            </Grid>
-            <BackgroundImage
-              draggable="false"
-              src={currentItem?.imageUrl || undefined}
-            />
-            <BackgroundImageOverlay />
-          </Carousel>
-        )}
-      </AnimatePresence>
-      <Group
-        spacing="xs"
-        sx={{ bottom: '1rem', position: 'absolute', right: 0, zIndex: 20 }}
-      >
-        <Button
-          disabled={itemIndex === 0}
-          radius={100}
-          size="md"
-          variant="default"
-          onClick={handlePrevious}
-        >
-          <RiArrowLeftSLine size="2rem" />
-        </Button>
-        <Button
-          disabled={itemIndex === (data?.length || 1) - 1}
-          radius={100}
-          size="md"
-          variant="default"
-          onClick={handleNext}
-        >
-          <RiArrowRightSLine size="2rem" />
-        </Button>
-      </Group>
-    </Wrapper>
-  );
-};

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

@@ -1,227 +0,0 @@
-import { createContext, useContext, useState, useCallback, useMemo } from 'react';
-import { Group, Stack } from '@mantine/core';
-import type { Variants } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
-import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
-import { Button } from '/@/renderer/components/button';
-import { AppRoute } from '/@/renderer/router/routes';
-import type { CardRow } from '/@/renderer/types';
-import { Play } from '/@/renderer/types';
-import styled from 'styled-components';
-import { AlbumCard } from '/@/renderer/components/card';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
-import { LibraryItem } from '/@/renderer/api/types';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-
-interface GridCarouselProps {
-  cardRows: CardRow<any>[];
-  children: React.ReactElement;
-  containerWidth: number;
-  data: any[] | undefined;
-  itemType: LibraryItem;
-  loading?: boolean;
-  pagination?: {
-    handleNextPage?: () => void;
-    handlePreviousPage?: () => void;
-    hasNextPage?: boolean;
-    hasPreviousPage?: boolean;
-    itemsPerPage?: number;
-  };
-  uniqueId: string;
-}
-
-const GridCarouselContext = createContext<any>({});
-
-const GridContainer = styled(motion.div)<{ height: number; itemsPerPage: number }>`
-  display: grid;
-  grid-auto-rows: 0;
-  grid-gap: 18px;
-  grid-template-rows: 1fr;
-  grid-template-columns: repeat(${(props) => props.itemsPerPage || 4}, minmax(0, 1fr));
-  height: ${(props) => props.height}px;
-  overflow: hidden;
-`;
-
-const Wrapper = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-`;
-
-const variants: Variants = {
-  animate: (custom: { direction: number; loading: boolean }) => {
-    return {
-      opacity: custom.loading ? 0.5 : 1,
-      scale: custom.loading ? 0.95 : 1,
-      transition: {
-        opacity: { duration: 0.2 },
-        x: { damping: 30, stiffness: 300, type: 'spring' },
-      },
-      x: 0,
-    };
-  },
-  exit: (custom: { direction: number; loading: boolean }) => {
-    return {
-      opacity: 0,
-      transition: {
-        opacity: { duration: 0.2 },
-        x: { damping: 30, stiffness: 300, type: 'spring' },
-      },
-      x: custom.direction > 0 ? -1000 : 1000,
-    };
-  },
-  initial: (custom: { direction: number; loading: boolean }) => {
-    return {
-      opacity: 0,
-      x: custom.direction > 0 ? 1000 : -1000,
-    };
-  },
-};
-
-const Carousel = ({ data, cardRows }: any) => {
-  const { loading, pagination, gridHeight, imageSize, direction, uniqueId, itemType } =
-    useContext(GridCarouselContext);
-
-  const playButtonBehavior = usePlayButtonBehavior();
-
-  const handlePlayQueueAdd = usePlayQueueAdd();
-
-  return (
-    <Wrapper>
-      <AnimatePresence
-        custom={{ direction, loading }}
-        initial={false}
-        mode="popLayout"
-      >
-        <GridContainer
-          key={`carousel-${uniqueId}-${data[0]?.id}`}
-          animate="animate"
-          custom={{ direction, loading }}
-          exit="exit"
-          height={gridHeight}
-          initial="initial"
-          itemsPerPage={pagination.itemsPerPage}
-          variants={variants}
-        >
-          {data?.map((item: any, index: number) => (
-            <AlbumCard
-              key={`card-${uniqueId}-${index}`}
-              controls={{
-                cardRows,
-                itemType: itemType || LibraryItem.ALBUM,
-                playButtonBehavior: playButtonBehavior || Play.NOW,
-                route: cardRows[0]?.route || {
-                  route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-                  slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
-                },
-              }}
-              data={item}
-              handlePlayQueueAdd={handlePlayQueueAdd}
-              size={imageSize}
-            />
-          ))}
-        </GridContainer>
-      </AnimatePresence>
-    </Wrapper>
-  );
-};
-
-export const GridCarousel = ({
-  data,
-  loading,
-  cardRows,
-  pagination,
-  children,
-  containerWidth,
-  uniqueId,
-  itemType,
-}: GridCarouselProps) => {
-  const [direction, setDirection] = useState(0);
-
-  const gridHeight = useMemo(
-    () => (containerWidth * 1.2 - 36) / (pagination?.itemsPerPage || 4),
-    [containerWidth, pagination?.itemsPerPage],
-  );
-
-  const imageSize = useMemo(() => gridHeight * 0.66, [gridHeight]);
-
-  const providerValue = useMemo(
-    () => ({
-      cardRows,
-      data,
-      direction,
-      gridHeight,
-      imageSize,
-      itemType,
-      loading,
-      pagination,
-      setDirection,
-      uniqueId,
-    }),
-    [cardRows, data, direction, gridHeight, imageSize, itemType, loading, pagination, uniqueId],
-  );
-
-  return (
-    <GridCarouselContext.Provider value={providerValue}>
-      <Stack>
-        {children}
-        {data && (
-          <Carousel
-            cardRows={cardRows}
-            data={data}
-          />
-        )}
-      </Stack>
-    </GridCarouselContext.Provider>
-  );
-};
-
-interface TitleProps {
-  children?: React.ReactNode;
-}
-
-const Title = ({ children }: TitleProps) => {
-  const { pagination, setDirection } = useContext(GridCarouselContext);
-  const showPaginationButtons = pagination?.handleNextPage && pagination?.handlePreviousPage;
-
-  const handleNextPage = useCallback(() => {
-    setDirection(1);
-    pagination?.handleNextPage?.();
-  }, [pagination, setDirection]);
-
-  const handlePreviousPage = useCallback(() => {
-    setDirection(-1);
-    pagination?.handlePreviousPage?.();
-  }, [pagination, setDirection]);
-
-  return (
-    <Group position="apart">
-      {children}
-      {showPaginationButtons && (
-        <Group spacing="sm">
-          <Button
-            compact
-            disabled={!pagination?.hasPreviousPage}
-            size="md"
-            variant="default"
-            onClick={handlePreviousPage}
-          >
-            <RiArrowLeftSLine size={15} />
-          </Button>
-          <Button
-            compact
-            size="md"
-            variant="default"
-            onClick={handleNextPage}
-          >
-            <RiArrowRightSLine size={15} />
-          </Button>
-        </Group>
-      )}
-    </Group>
-  );
-};
-
-GridCarousel.Title = Title;
-GridCarousel.Carousel = Carousel;

src/renderer/components/hover-card/index.tsx

@@ -1,24 +0,0 @@
-import { HoverCard as MantineHoverCard, HoverCardProps } from '@mantine/core';
-
-export const HoverCard = ({ children, ...props }: HoverCardProps) => {
-  return (
-    <MantineHoverCard
-      styles={{
-        dropdown: {
-          background: 'var(--dropdown-menu-bg)',
-          border: 'none',
-          borderRadius: 'var(--dropdown-menu-border-radius)',
-          boxShadow: '2px 2px 10px 2px rgba(0, 0, 0, 40%)',
-          margin: 0,
-          padding: 0,
-        },
-      }}
-      {...props}
-    >
-      {children}
-    </MantineHoverCard>
-  );
-};
-
-HoverCard.Target = MantineHoverCard.Target;
-HoverCard.Dropdown = MantineHoverCard.Dropdown;

src/renderer/components/icon-button/IconButton.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { ActionIcon, ActionIconProps, TooltipProps } from '@mantine/core';
+import { Tooltip } from '../tooltip/Tooltip';
+
+type MantineIconButtonProps = ActionIconProps &
+  React.ComponentPropsWithoutRef<'button'>;
+
+interface IconButtonProps extends MantineIconButtonProps {
+  active?: boolean;
+  icon: ReactNode;
+  tooltip?: Omit<TooltipProps, 'children'>;
+}
+
+export const IconButton = ({
+  active,
+  tooltip,
+  icon,
+  ...rest
+}: IconButtonProps) => {
+  if (tooltip) {
+    return (
+      <Tooltip {...tooltip}>
+        <ActionIcon {...rest}>{icon}</ActionIcon>
+      </Tooltip>
+    );
+  }
+
+  return <ActionIcon {...rest}>{icon}</ActionIcon>;
+};
+
+IconButton.defaultProps = {
+  active: false,
+  tooltip: undefined,
+};

src/renderer/components/index.ts

@@ -1,36 +1,4 @@
-export * from './accordion';
-export * from './audio-player';
-export * from './badge';
-export * from './button';
-export * from './card';
-export * from './date-picker';
-export * from './dropdown-menu';
-export * from './dropzone';
-export * from './feature-carousel';
-export * from './grid-carousel';
-export * from './input';
-export * from './modal';
-export * from './page-header';
-export * from './pagination';
-export * from './paper';
-export * from './popover';
-export * from './scroll-area';
-export * from './search-input';
-export * from './segmented-control';
-export * from './select';
-export * from './skeleton';
-export * from './slider';
-export * from './spinner';
-export * from './switch';
-export * from './tabs';
-export * from './text';
-export * from './text-title';
-export * from './toast';
-export * from './tooltip';
-export * from './virtual-grid';
-export * from './virtual-table';
-export * from './motion';
-export * from './context-menu';
-export * from './query-builder';
-export * from './rating';
-export * from './hover-card';
+export * from './tooltip/Tooltip';
+export * from './audio-player/AudioPlayer';
+export * from './icon-button/IconButton';
+export * from './text/Text';

src/renderer/components/input/index.tsx

@@ -1,398 +0,0 @@
-import React, { forwardRef } from 'react';
-import type {
-  TextInputProps as MantineTextInputProps,
-  NumberInputProps as MantineNumberInputProps,
-  PasswordInputProps as MantinePasswordInputProps,
-  FileInputProps as MantineFileInputProps,
-  JsonInputProps as MantineJsonInputProps,
-  TextareaProps as MantineTextareaProps,
-} from '@mantine/core';
-import {
-  TextInput as MantineTextInput,
-  NumberInput as MantineNumberInput,
-  PasswordInput as MantinePasswordInput,
-  FileInput as MantineFileInput,
-  JsonInput as MantineJsonInput,
-  Textarea as MantineTextarea,
-} from '@mantine/core';
-import styled from 'styled-components';
-
-interface TextInputProps extends MantineTextInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-interface NumberInputProps extends MantineNumberInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-interface PasswordInputProps extends MantinePasswordInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-interface FileInputProps extends MantineFileInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-interface JsonInputProps extends MantineJsonInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-interface TextareaProps extends MantineTextareaProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
-  & .mantine-TextInput-wrapper {
-    border-color: var(--primary-color);
-  }
-
-  & .mantine-TextInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
-    }
-  }
-
-  & .mantine-Input-icon {
-    color: var(--input-placeholder-fg);
-  }
-
-  & .mantine-TextInput-required {
-    color: var(--secondary-color);
-  }
-
-  & .mantine-TextInput-label {
-    font-family: var(--label-font-faimly);
-  }
-
-  & .mantine-TextInput-disabled {
-    opacity: 0.6;
-  }
-
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
-
-  transition: width 0.3s ease-in-out;
-`;
-
-const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
-  & .mantine-NumberInput-wrapper {
-    border-color: var(--primary-color);
-  }
-
-  & .mantine-NumberInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
-    }
-  }
-
-  & .mantine-NumberInput-controlUp {
-    svg {
-      color: var(--btn-default-fg);
-      fill: var(--btn-default-fg);
-    }
-  }
-
-  & .mantine-NumberInput-controlDown {
-    svg {
-      color: var(--btn-default-fg);
-      fill: var(--btn-default-fg);
-    }
-  }
-
-  & .mantine-Input-icon {
-    color: var(--input-placeholder-fg);
-  }
-
-  & .mantine-NumberInput-required {
-    color: var(--secondary-color);
-  }
-
-  & .mantine-NumberInput-label {
-    font-family: var(--label-font-faimly);
-  }
-
-  & .mantine-NumberInput-disabled {
-    opacity: 0.6;
-  }
-
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
-
-  transition: width 0.3s ease-in-out;
-`;
-
-const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
-  & .mantine-PasswordInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
-    }
-  }
-
-  & .mantine-PasswordInput-icon {
-    color: var(--input-placeholder-fg);
-  }
-
-  & .mantine-PasswordInput-required {
-    color: var(--secondary-color);
-  }
-
-  & .mantine-PasswordInput-label {
-    font-family: var(--label-font-faimly);
-  }
-
-  & .mantine-PasswordInput-disabled {
-    opacity: 0.6;
-  }
-
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
-
-  transition: width 0.3s ease-in-out;
-`;
-
-const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
-  & .mantine-FileInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
-    }
-  }
-
-  & .mantine-FileInput-icon {
-    color: var(--input-placeholder-fg);
-  }
-
-  & .mantine-FileInput-required {
-    color: var(--secondary-color);
-  }
-
-  & .mantine-FileInput-label {
-    font-family: var(--label-font-faimly);
-  }
-
-  & .mantine-FileInput-disabled {
-    opacity: 0.6;
-  }
-
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
-
-  transition: width 0.3s ease-in-out;
-`;
-
-const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
-  & .mantine-JsonInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
-    }
-  }
-
-  & .mantine-JsonInput-icon {
-    color: var(--input-placeholder-fg);
-  }
-
-  & .mantine-JsonInput-required {
-    color: var(--secondary-color);
-  }
-
-  & .mantine-JsonInput-label {
-    font-family: var(--label-font-faimly);
-  }
-
-  & .mantine-JsonInput-disabled {
-    opacity: 0.6;
-  }
-
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
-
-  transition: width 0.3s ease-in-out;
-`;
-
-const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
-  & .mantine-Textarea-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-  }
-
-  & .mantine-Textarea-icon {
-    color: var(--input-placeholder-fg);
-  }
-
-  & .mantine-Textarea-required {
-    color: var(--secondary-color);
-  }
-
-  & .mantine-Textarea-label {
-    font-family: var(--label-font-faimly);
-  }
-
-  & .mantine-Textarea-disabled {
-    opacity: 0.6;
-  }
-
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
-
-  transition: width 0.3s ease-in-out;
-`;
-
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  ({ children, width, maxWidth, ...props }: TextInputProps, ref) => {
-    return (
-      <StyledTextInput
-        ref={ref}
-        spellCheck={false}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledTextInput>
-    );
-  },
-);
-
-export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  ({ children, width, maxWidth, ...props }: NumberInputProps, ref) => {
-    return (
-      <StyledNumberInput
-        ref={ref}
-        hideControls
-        spellCheck={false}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledNumberInput>
-    );
-  },
-);
-
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ children, width, maxWidth, ...props }: PasswordInputProps, ref) => {
-    return (
-      <StyledPasswordInput
-        ref={ref}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledPasswordInput>
-    );
-  },
-);
-
-export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
-  ({ children, width, maxWidth, ...props }: FileInputProps, ref) => {
-    return (
-      <StyledFileInput
-        ref={ref}
-        {...props}
-        styles={{
-          placeholder: {
-            color: 'var(--input-placeholder-fg)',
-          },
-        }}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledFileInput>
-    );
-  },
-);
-
-export const JsonInput = forwardRef<HTMLTextAreaElement, JsonInputProps>(
-  ({ children, width, maxWidth, ...props }: JsonInputProps, ref) => {
-    return (
-      <StyledJsonInput
-        ref={ref}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledJsonInput>
-    );
-  },
-);
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ children, width, maxWidth, ...props }: TextareaProps, ref) => {
-    return (
-      <StyledTextarea
-        ref={ref}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledTextarea>
-    );
-  },
-);
-
-TextInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
-};
-
-NumberInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
-};
-
-PasswordInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
-};
-
-FileInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
-};
-
-JsonInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
-};
-
-Textarea.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
-};

src/renderer/components/modal/Modal.tsx

@@ -0,0 +1,27 @@
+import {
+  Modal as MantineModal,
+  ModalProps as MantineModalProps,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+
+interface ModalProps extends MantineModalProps {
+  condition: boolean;
+}
+
+export const Modal = ({ condition, children, ...rest }: ModalProps) => {
+  const [opened, handlers] = useDisclosure(false);
+
+  return (
+    <>
+      {condition && (
+        <MantineModal
+          {...rest}
+          opened={opened}
+          onClose={() => handlers.close()}
+        >
+          {children}
+        </MantineModal>
+      )}
+    </>
+  );
+};

src/renderer/components/modal/index.tsx

@@ -1,99 +0,0 @@
-import React, { ReactNode } from 'react';
-import {
-  ModalProps as MantineModalProps,
-  Stack,
-  Modal as MantineModal,
-  Flex,
-  Group,
-} from '@mantine/core';
-import { closeAllModals, ContextModalProps } from '@mantine/modals';
-import { Button } from '/@/renderer/components/button';
-
-export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
-  children?: ReactNode;
-  handlers: {
-    close: () => void;
-    open: () => void;
-    toggle: () => void;
-  };
-}
-
-export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
-  return (
-    <MantineModal
-      {...rest}
-      onClose={handlers.close}
-    >
-      {children}
-    </MantineModal>
-  );
-};
-
-export type ContextModalVars = {
-  context: ContextModalProps['context'];
-  id: ContextModalProps['id'];
-};
-
-export const BaseContextModal = ({
-  context,
-  id,
-  innerProps,
-}: ContextModalProps<{
-  modalBody: (vars: ContextModalVars) => React.ReactNode;
-}>) => <>{innerProps.modalBody({ context, id })}</>;
-
-Modal.defaultProps = {
-  children: undefined,
-};
-
-interface ConfirmModalProps {
-  children: ReactNode;
-  disabled?: boolean;
-  labels?: {
-    cancel?: string;
-    confirm?: string;
-  };
-  loading?: boolean;
-  onCancel?: () => void;
-  onConfirm: () => void;
-}
-
-export const ConfirmModal = ({
-  loading,
-  disabled,
-  labels,
-  onCancel,
-  onConfirm,
-  children,
-}: ConfirmModalProps) => {
-  const handleCancel = () => {
-    if (onCancel) {
-      onCancel();
-    } else {
-      closeAllModals();
-    }
-  };
-
-  return (
-    <Stack>
-      <Flex>{children}</Flex>
-      <Group position="right">
-        <Button
-          data-focus
-          variant="default"
-          onClick={handleCancel}
-        >
-          {labels?.cancel ? labels.cancel : 'Cancel'}
-        </Button>
-        <Button
-          disabled={disabled}
-          loading={loading}
-          variant="filled"
-          onClick={onConfirm}
-        >
-          {labels?.confirm ? labels.confirm : 'Confirm'}
-        </Button>
-      </Group>
-    </Stack>
-  );
-};

src/renderer/components/motion/index.tsx

@@ -1,10 +0,0 @@
-import { Flex, Group, Stack } from '@mantine/core';
-import { motion } from 'framer-motion';
-
-export const MotionFlex = motion(Flex);
-
-export const MotionGroup = motion(Group);
-
-export const MotionStack = motion(Stack);
-
-export const MotionDiv = motion.div;

src/renderer/components/page-header/index.tsx

@@ -1,125 +0,0 @@
-import { Flex, FlexProps } from '@mantine/core';
-import { AnimatePresence, motion, Variants } from 'framer-motion';
-import { useRef } from 'react';
-import styled from 'styled-components';
-import { useShouldPadTitlebar, useTheme } from '/@/renderer/hooks';
-
-const Container = styled(motion(Flex))<{
-  height?: string;
-  position?: string;
-}>`
-  position: ${(props) => props.position || 'relative'};
-  z-index: 2000;
-  width: 100%;
-  height: ${(props) => props.height || '65px'};
-  background: var(--titlebar-bg);
-`;
-
-const Header = styled(motion.div)<{ $isHidden?: boolean; $padRight?: boolean }>`
-  position: relative;
-  z-index: 15;
-  width: 100%;
-  height: 100%;
-  margin-right: ${(props) => (props.$padRight ? '140px' : '1rem')};
-  user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
-  pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
-  -webkit-app-region: drag;
-
-  button {
-    -webkit-app-region: no-drag;
-  }
-
-  input {
-    -webkit-app-region: no-drag;
-  }
-`;
-
-const BackgroundImage = styled.div<{ background: string }>`
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  background: ${(props) => props.background || 'var(--titlebar-bg)'};
-`;
-
-const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background: ${(props) =>
-    props.theme === 'light'
-      ? 'linear-gradient(rgba(255, 255, 255, 25%), rgba(255, 255, 255, 25%))'
-      : 'linear-gradient(rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%))'};
-`;
-
-export interface PageHeaderProps
-  extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
-  backgroundColor?: string;
-  children?: React.ReactNode;
-  height?: string;
-  isHidden?: boolean;
-  position?: string;
-}
-
-const TitleWrapper = styled(motion.div)`
-  position: absolute;
-  display: flex;
-  width: 100%;
-  height: 100%;
-`;
-
-const variants: Variants = {
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-  initial: { opacity: 0 },
-};
-
-export const PageHeader = ({
-  position,
-  height,
-  backgroundColor,
-  isHidden,
-  children,
-  ...props
-}: PageHeaderProps) => {
-  const ref = useRef(null);
-  const padRight = useShouldPadTitlebar();
-  const theme = useTheme();
-
-  return (
-    <Container
-      ref={ref}
-      height={height}
-      position={position}
-      {...props}
-    >
-      <Header
-        $isHidden={isHidden}
-        $padRight={padRight}
-      >
-        <AnimatePresence>
-          {!isHidden && (
-            <TitleWrapper
-              animate="animate"
-              exit="exit"
-              initial="initial"
-              variants={variants}
-            >
-              {children}
-            </TitleWrapper>
-          )}
-        </AnimatePresence>
-      </Header>
-      {backgroundColor && (
-        <>
-          <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
-          <BackgroundImageOverlay theme={theme} />
-        </>
-      )}
-    </Container>
-  );
-};

src/renderer/components/pagination/index.tsx

@@ -1,52 +0,0 @@
-import {
-  Pagination as MantinePagination,
-  PaginationProps as MantinePaginationProps,
-} from '@mantine/core';
-import styled from 'styled-components';
-
-const StyledPagination = styled(MantinePagination)<PaginationProps>`
-  & .mantine-Pagination-item {
-    color: var(--btn-default-fg);
-    background-color: var(--btn-default-bg);
-    border: none;
-    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-
-    &[data-active] {
-      color: var(--btn-primary-fg);
-      background-color: var(--btn-primary-bg);
-    }
-
-    &[data-dots] {
-      display: ${({ $hideDividers }) => ($hideDividers ? 'none' : 'block')};
-      background-color: transparent;
-    }
-
-    &:hover {
-      color: var(--btn-default-fg-hover);
-      background-color: var(--btn-default-bg-hover);
-
-      &[data-active] {
-        color: var(--btn-primary-fg-hover);
-        background-color: var(--btn-primary-bg-hover);
-      }
-
-      &[data-dots] {
-        background-color: transparent;
-      }
-    }
-  }
-`;
-
-interface PaginationProps extends MantinePaginationProps {
-  $hideDividers?: boolean;
-}
-
-export const Pagination = ({ $hideDividers, ...props }: PaginationProps) => {
-  return (
-    <StyledPagination
-      $hideDividers={$hideDividers}
-      radius="xl"
-      {...props}
-    />
-  );
-};

src/renderer/components/paper/index.tsx

@@ -1,15 +0,0 @@
-import type { PaperProps as MantinePaperProps } from '@mantine/core';
-import { Paper as MantinePaper } from '@mantine/core';
-import styled from 'styled-components';
-
-export interface PaperProps extends MantinePaperProps {
-  children: React.ReactNode;
-}
-
-const StyledPaper = styled(MantinePaper)<PaperProps>`
-  background: var(--paper-bg);
-`;
-
-export const Paper = ({ children, ...props }: PaperProps) => {
-  return <StyledPaper {...props}>{children}</StyledPaper>;
-};

src/renderer/components/popover/index.tsx

@@ -1,39 +0,0 @@
-import type {
-  PopoverProps as MantinePopoverProps,
-  PopoverDropdownProps as MantinePopoverDropdownProps,
-} from '@mantine/core';
-import { Popover as MantinePopover } from '@mantine/core';
-import styled from 'styled-components';
-
-type PopoverProps = MantinePopoverProps;
-type PopoverDropdownProps = MantinePopoverDropdownProps;
-
-const StyledPopover = styled(MantinePopover)``;
-
-const StyledDropdown = styled(MantinePopover.Dropdown)<PopoverDropdownProps>`
-  padding: 0.5rem;
-  font-size: 0.9em;
-  font-family: var(--content-font-family);
-  background-color: var(--dropdown-menu-bg);
-  border: var(--dropdown-menu-border);
-`;
-
-export const Popover = ({ children, ...props }: PopoverProps) => {
-  return (
-    <StyledPopover
-      withinPortal
-      styles={{
-        dropdown: {
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
-        },
-      }}
-      transition="fade"
-      {...props}
-    >
-      {children}
-    </StyledPopover>
-  );
-};
-
-Popover.Target = MantinePopover.Target;
-Popover.Dropdown = StyledDropdown;

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

@@ -1,218 +0,0 @@
-import { Group, Stack } from '@mantine/core';
-import { Select } from '/@/renderer/components/select';
-import { AnimatePresence, motion } from 'framer-motion';
-import { RiAddFill, RiAddLine, RiDeleteBinFill, RiMore2Line, RiRestartLine } from 'react-icons/ri';
-import { Button } from '/@/renderer/components/button';
-import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
-import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
-import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
-
-const FILTER_GROUP_OPTIONS_DATA = [
-  {
-    label: 'Match all',
-    value: 'all',
-  },
-  {
-    label: 'Match any',
-    value: 'any',
-  },
-];
-
-type AddArgs = {
-  groupIndex: number[];
-  level: number;
-};
-
-type DeleteArgs = {
-  groupIndex: number[];
-  level: number;
-  uniqueId: string;
-};
-interface QueryBuilderProps {
-  data: Record<string, any>;
-  filters: { label: string; type: string; value: string }[];
-  groupIndex: number[];
-  level: number;
-  onAddRule: (args: AddArgs) => void;
-  onAddRuleGroup: (args: AddArgs) => void;
-  onChangeField: (args: any) => void;
-  onChangeOperator: (args: any) => void;
-  onChangeType: (args: any) => void;
-  onChangeValue: (args: any) => void;
-  onClearFilters: () => void;
-  onDeleteRule: (args: DeleteArgs) => void;
-  onDeleteRuleGroup: (args: DeleteArgs) => void;
-  onResetFilters: () => void;
-  operators: {
-    boolean: { label: string; value: string }[];
-    date: { label: string; value: string }[];
-    number: { label: string; value: string }[];
-    string: { label: string; value: string }[];
-  };
-  uniqueId: string;
-}
-
-export const QueryBuilder = ({
-  data,
-  level,
-  onAddRule,
-  onDeleteRuleGroup,
-  onDeleteRule,
-  onAddRuleGroup,
-  onChangeType,
-  onChangeField,
-  operators,
-  onChangeOperator,
-  onChangeValue,
-  onClearFilters,
-  onResetFilters,
-  groupIndex,
-  uniqueId,
-  filters,
-}: QueryBuilderProps) => {
-  const handleAddRule = () => {
-    onAddRule({ groupIndex, level });
-  };
-
-  const handleAddRuleGroup = () => {
-    onAddRuleGroup({ groupIndex, level });
-  };
-
-  const handleDeleteRuleGroup = () => {
-    onDeleteRuleGroup({ groupIndex, level, uniqueId });
-  };
-
-  const handleChangeType = (value: string | null) => {
-    onChangeType({ groupIndex, level, value });
-  };
-
-  return (
-    <Stack
-      ml={`${level * 10}px`}
-      spacing="sm"
-    >
-      <Group spacing="sm">
-        <Select
-          data={FILTER_GROUP_OPTIONS_DATA}
-          maxWidth={175}
-          size="sm"
-          value={data.type}
-          width="20%"
-          onChange={handleChangeType}
-        />
-        <Button
-          px={5}
-          size="sm"
-          tooltip={{ label: 'Add rule' }}
-          variant="default"
-          onClick={handleAddRule}
-        >
-          <RiAddLine size={20} />
-        </Button>
-        <DropdownMenu position="bottom-start">
-          <DropdownMenu.Target>
-            <Button
-              p={0}
-              size="sm"
-              variant="subtle"
-            >
-              <RiMore2Line size={20} />
-            </Button>
-          </DropdownMenu.Target>
-          <DropdownMenu.Dropdown>
-            <DropdownMenu.Item
-              icon={<RiAddFill />}
-              onClick={handleAddRuleGroup}
-            >
-              Add rule group
-            </DropdownMenu.Item>
-
-            {level > 0 && (
-              <DropdownMenu.Item
-                icon={<RiDeleteBinFill />}
-                onClick={handleDeleteRuleGroup}
-              >
-                Remove rule group
-              </DropdownMenu.Item>
-            )}
-            {level === 0 && (
-              <>
-                <DropdownMenu.Divider />
-                <DropdownMenu.Item
-                  $danger
-                  icon={<RiRestartLine color="var(--danger-color)" />}
-                  onClick={onResetFilters}
-                >
-                  Reset to default
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  $danger
-                  icon={<RiDeleteBinFill color="var(--danger-color)" />}
-                  onClick={onClearFilters}
-                >
-                  Clear filters
-                </DropdownMenu.Item>
-              </>
-            )}
-          </DropdownMenu.Dropdown>
-        </DropdownMenu>
-      </Group>
-      <AnimatePresence initial={false}>
-        {data?.rules?.map((rule: QueryBuilderRule) => (
-          <motion.div
-            key={rule.uniqueId}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -25 }}
-            initial={{ opacity: 0, x: -25 }}
-            transition={{ duration: 0.2, ease: 'easeInOut' }}
-          >
-            <QueryBuilderOption
-              data={rule}
-              filters={filters}
-              groupIndex={groupIndex || []}
-              level={level}
-              noRemove={data?.rules?.length === 1}
-              operators={operators}
-              onChangeField={onChangeField}
-              onChangeOperator={onChangeOperator}
-              onChangeValue={onChangeValue}
-              onDeleteRule={onDeleteRule}
-            />
-          </motion.div>
-        ))}
-      </AnimatePresence>
-      {data?.group && (
-        <AnimatePresence initial={false}>
-          {data.group?.map((group: QueryBuilderGroup, index: number) => (
-            <motion.div
-              key={group.uniqueId}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -25 }}
-              initial={{ opacity: 0, x: -25 }}
-              transition={{ duration: 0.2, ease: 'easeInOut' }}
-            >
-              <QueryBuilder
-                data={group}
-                filters={filters}
-                groupIndex={[...(groupIndex || []), index]}
-                level={level + 1}
-                operators={operators}
-                uniqueId={group.uniqueId}
-                onAddRule={onAddRule}
-                onAddRuleGroup={onAddRuleGroup}
-                onChangeField={onChangeField}
-                onChangeOperator={onChangeOperator}
-                onChangeType={onChangeType}
-                onChangeValue={onChangeValue}
-                onClearFilters={onClearFilters}
-                onDeleteRule={onDeleteRule}
-                onDeleteRuleGroup={onDeleteRuleGroup}
-                onResetFilters={onResetFilters}
-              />
-            </motion.div>
-          ))}
-        </AnimatePresence>
-      )}
-    </Stack>
-  );
-};

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

@@ -1,239 +0,0 @@
-import { Group } from '@mantine/core';
-import { useState } from 'react';
-import { RiSubtractLine } from 'react-icons/ri';
-import { Button } from '/@/renderer/components/button';
-import { NumberInput, TextInput } from '/@/renderer/components/input';
-import { Select } from '/@/renderer/components/select';
-import { QueryBuilderRule } from '/@/renderer/types';
-
-type DeleteArgs = {
-  groupIndex: number[];
-  level: number;
-  uniqueId: string;
-};
-
-interface QueryOptionProps {
-  data: QueryBuilderRule;
-  filters: { label: string; type: string; value: string }[];
-  groupIndex: number[];
-  level: number;
-  noRemove: boolean;
-  onChangeField: (args: any) => void;
-  onChangeOperator: (args: any) => void;
-  onChangeValue: (args: any) => void;
-  onDeleteRule: (args: DeleteArgs) => void;
-  operators: {
-    boolean: { label: string; value: string }[];
-    date: { label: string; value: string }[];
-    number: { label: string; value: string }[];
-    string: { label: string; value: string }[];
-  };
-}
-
-const QueryValueInput = ({ onChange, type, ...props }: any) => {
-  const [numberRange, setNumberRange] = useState([0, 0]);
-
-  switch (type) {
-    case 'string':
-      return (
-        <TextInput
-          size="sm"
-          onChange={onChange}
-          {...props}
-        />
-      );
-    case 'number':
-      return (
-        <NumberInput
-          size="sm"
-          onChange={onChange}
-          {...props}
-          defaultValue={props.defaultValue && Number(props.defaultValue)}
-        />
-      );
-    case 'date':
-      return (
-        <TextInput
-          size="sm"
-          onChange={onChange}
-          {...props}
-        />
-      );
-
-    case 'dateRange':
-      return (
-        <>
-          <NumberInput
-            {...props}
-            defaultValue={props.defaultValue && Number(props.defaultValue?.[0])}
-            maxWidth={81}
-            width="10%"
-            onChange={(e) => {
-              const newRange = [e || 0, numberRange[1]];
-              setNumberRange(newRange);
-              onChange(newRange);
-            }}
-          />
-          <NumberInput
-            {...props}
-            defaultValue={props.defaultValue && Number(props.defaultValue?.[1])}
-            maxWidth={81}
-            width="10%"
-            onChange={(e) => {
-              const newRange = [numberRange[0], e || 0];
-              setNumberRange(newRange);
-              onChange(newRange);
-            }}
-          />
-        </>
-      );
-
-    case 'boolean':
-      return (
-        <Select
-          data={[
-            { label: 'true', value: 'true' },
-            { label: 'false', value: 'false' },
-          ]}
-          onChange={onChange}
-          {...props}
-        />
-      );
-
-    default:
-      return <></>;
-  }
-};
-
-export const QueryBuilderOption = ({
-  data,
-  filters,
-  level,
-  onDeleteRule,
-  operators,
-  groupIndex,
-  noRemove,
-  onChangeField,
-  onChangeOperator,
-  onChangeValue,
-}: QueryOptionProps) => {
-  const { field, operator, uniqueId, value } = data;
-
-  const handleDeleteRule = () => {
-    onDeleteRule({ groupIndex, level, uniqueId });
-  };
-
-  const handleChangeField = (e: any) => {
-    onChangeField({ groupIndex, level, uniqueId, value: e });
-  };
-
-  const handleChangeOperator = (e: any) => {
-    onChangeOperator({ groupIndex, level, uniqueId, value: e });
-  };
-
-  const handleChangeValue = (e: any) => {
-    const isDirectValue =
-      typeof e === 'string' ||
-      typeof e === 'number' ||
-      typeof e === 'undefined' ||
-      typeof e === null;
-
-    if (isDirectValue) {
-      return onChangeValue({
-        groupIndex,
-        level,
-        uniqueId,
-        value: e,
-      });
-    }
-
-    // const isDate = e instanceof Date;
-
-    // if (isDate) {
-    //   return onChangeValue({
-    //     groupIndex,
-    //     level,
-    //     uniqueId,
-    //     value: dayjs(e).format('YYYY-MM-DD'),
-    //   });
-    // }
-
-    const isArray = Array.isArray(e);
-
-    if (isArray) {
-      return onChangeValue({
-        groupIndex,
-        level,
-        uniqueId,
-        value: e,
-      });
-    }
-
-    return onChangeValue({
-      groupIndex,
-      level,
-      uniqueId,
-      value: e.currentTarget.value,
-    });
-  };
-
-  const fieldType = filters.find((f) => f.value === field)?.type;
-  const operatorsByFieldType = operators[fieldType as keyof typeof operators];
-  const ml = (level + 1) * 10;
-
-  return (
-    <Group
-      ml={ml}
-      spacing="sm"
-    >
-      <Select
-        searchable
-        data={filters}
-        maxWidth={170}
-        size="sm"
-        value={field}
-        width="25%"
-        onChange={handleChangeField}
-      />
-      <Select
-        searchable
-        data={operatorsByFieldType || []}
-        disabled={!field}
-        maxWidth={170}
-        size="sm"
-        value={operator}
-        width="25%"
-        onChange={handleChangeOperator}
-      />
-      {field ? (
-        <QueryValueInput
-          defaultValue={value}
-          maxWidth={170}
-          size="sm"
-          type={operator === 'inTheRange' ? 'dateRange' : fieldType}
-          width="25%"
-          onChange={handleChangeValue}
-        />
-      ) : (
-        <TextInput
-          disabled
-          defaultValue={value}
-          maxWidth={170}
-          size="sm"
-          width="25%"
-          onChange={handleChangeValue}
-        />
-      )}
-      <Button
-        disabled={noRemove}
-        px={5}
-        size="sm"
-        tooltip={{ label: 'Remove rule' }}
-        variant="default"
-        onClick={handleDeleteRule}
-      >
-        <RiSubtractLine size={20} />
-      </Button>
-    </Group>
-  );
-};

src/renderer/components/rating/index.tsx

@@ -1,33 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import { MouseEvent } from 'react';
-import { Rating as MantineRating, RatingProps as MantineRatingProps } from '@mantine/core';
-import styled from 'styled-components';
-import { Tooltip } from '/@/renderer/components/tooltip';
-
-interface RatingProps extends Omit<MantineRatingProps, 'onClick'> {
-  onClick: (e: MouseEvent<HTMLDivElement>, value: number | undefined) => void;
-}
-
-const StyledRating = styled(MantineRating)`
-  & .mantine-Rating-symbolBody {
-    svg {
-      stroke: var(--main-fg-secondary);
-    }
-  }
-`;
-
-export const Rating = ({ onClick, ...props }: RatingProps) => {
-  // const debouncedOnClick = debounce(onClick, 100);
-
-  return (
-    <Tooltip
-      label="Double click to clear"
-      openDelay={1000}
-    >
-      <StyledRating
-        {...props}
-        onDoubleClick={(e) => onClick(e, props.value)}
-      />
-    </Tooltip>
-  );
-};

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

@@ -1,163 +0,0 @@
-import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
-import type { ScrollAreaProps as MantineScrollAreaProps } from '@mantine/core';
-import { ScrollArea as MantineScrollArea } from '@mantine/core';
-import { useMergedRef, useTimeout } from '@mantine/hooks';
-import { motion, useScroll } from 'framer-motion';
-import styled from 'styled-components';
-import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header';
-
-interface ScrollAreaProps extends MantineScrollAreaProps {
-  children: React.ReactNode;
-}
-
-const StyledScrollArea = styled(MantineScrollArea)`
-  & .mantine-ScrollArea-thumb {
-    background: var(--scrollbar-thumb-bg);
-    border-radius: 0;
-  }
-
-  & .mantine-ScrollArea-scrollbar {
-    padding: 0;
-    background: var(--scrollbar-track-bg);
-  }
-
-  & .mantine-ScrollArea-viewport > div {
-    display: block !important;
-  }
-`;
-
-const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string }>`
-  height: 100%;
-  overflow-y: overlay !important;
-
-  &::-webkit-scrollbar-track {
-    margin-top: ${(props) => props.scrollBarOffset || '65px'};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    margin-top: ${(props) => props.scrollBarOffset || '65px'};
-  }
-`;
-
-export const ScrollArea = forwardRef(({ children, ...props }: ScrollAreaProps, ref: Ref<any>) => {
-  return (
-    <StyledScrollArea
-      ref={ref}
-      scrollbarSize={12}
-      {...props}
-    >
-      {children}
-    </StyledScrollArea>
-  );
-});
-
-interface NativeScrollAreaProps {
-  children: React.ReactNode;
-  debugScrollPosition?: boolean;
-  noHeader?: boolean;
-  pageHeaderProps?: PageHeaderProps & { offset?: any; target?: any };
-  scrollBarOffset?: string;
-  scrollHideDelay?: number;
-  style?: React.CSSProperties;
-}
-
-export const NativeScrollArea = forwardRef(
-  (
-    {
-      children,
-      pageHeaderProps,
-      debugScrollPosition,
-      scrollBarOffset,
-      scrollHideDelay,
-      noHeader,
-      ...props
-    }: NativeScrollAreaProps,
-    ref: Ref<HTMLDivElement>,
-  ) => {
-    const [hideScrollbar, setHideScrollbar] = useState(false);
-    const [hideHeader, setHideHeader] = useState(true);
-    const { start, clear } = useTimeout(
-      () => setHideScrollbar(true),
-      scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 0,
-    );
-
-    const containerRef = useRef(null);
-    const mergedRef = useMergedRef(ref, containerRef);
-
-    const { scrollYProgress } = useScroll({
-      container: containerRef,
-      offset: pageHeaderProps?.offset || ['center start', 'end start'],
-      target: pageHeaderProps?.target,
-    });
-
-    // Automatically hide the scrollbar after the timeout duration
-    useEffect(() => {
-      start();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-      const setHeaderVisibility = (v: number) => {
-        if (v === 1) {
-          return setHideHeader(false);
-        }
-
-        if (hideHeader === false) {
-          return setHideHeader(true);
-        }
-
-        return undefined;
-      };
-
-      const unsubscribe = scrollYProgress.on('change', setHeaderVisibility);
-
-      return () => {
-        unsubscribe();
-      };
-    }, [hideHeader, scrollYProgress]);
-
-    return (
-      <>
-        {!noHeader && (
-          <PageHeader
-            isHidden={hideHeader}
-            position="absolute"
-            style={{ opacity: scrollYProgress as any }}
-            {...pageHeaderProps}
-          />
-        )}
-        <StyledNativeScrollArea
-          ref={mergedRef}
-          className={hideScrollbar ? 'hide-scrollbar' : undefined}
-          scrollBarOffset={scrollBarOffset}
-          onMouseEnter={() => {
-            setHideScrollbar(false);
-            clear();
-          }}
-          onMouseLeave={() => {
-            start();
-          }}
-          {...props}
-        >
-          {children}
-        </StyledNativeScrollArea>
-        {debugScrollPosition && (
-          <motion.div
-            style={{
-              background: 'red',
-              height: '10px',
-              left: 0,
-              position: 'fixed',
-              right: 0,
-              scaleX: scrollYProgress,
-              top: 0,
-              transformOrigin: '0%',
-              width: '100%',
-              zIndex: 5000,
-            }}
-          />
-        )}
-      </>
-    );
-  },
-);

src/renderer/components/search-input/index.tsx

@@ -1,62 +0,0 @@
-import { ChangeEvent, KeyboardEvent } from 'react';
-import { TextInputProps } from '@mantine/core';
-import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks';
-import { RiSearchLine } from 'react-icons/ri';
-import { TextInput } from '/@/renderer/components/input';
-
-interface SearchInputProps extends TextInputProps {
-  initialWidth?: number;
-  openedWidth?: number;
-  value?: string;
-}
-
-export const SearchInput = ({
-  initialWidth,
-  onChange,
-  openedWidth,
-  ...props
-}: SearchInputProps) => {
-  const { ref, focused } = useFocusWithin();
-  const mergedRef = useMergedRef<HTMLInputElement>(ref);
-
-  const isOpened = focused || ref.current?.value;
-  const showIcon = !isOpened || (openedWidth || 100) > 100;
-
-  useHotkeys([
-    [
-      'ctrl+F',
-      () => {
-        ref.current.select();
-      },
-    ],
-  ]);
-
-  const handleEscape = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.code === 'Escape') {
-      onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>);
-      ref.current.value = '';
-      ref.current.blur();
-    }
-  };
-
-  return (
-    <TextInput
-      ref={mergedRef}
-      {...props}
-      icon={showIcon && <RiSearchLine />}
-      size="md"
-      styles={{
-        icon: { svg: { fill: 'var(--titlebar-fg)' } },
-        input: {
-          backgroundColor: isOpened ? 'inherit' : 'transparent !important',
-          border: 'none !important',
-          cursor: isOpened ? 'text' : 'pointer',
-          padding: isOpened ? '10px' : 0,
-        },
-      }}
-      width={isOpened ? openedWidth || 150 : initialWidth || 50}
-      onChange={onChange}
-      onKeyDown={handleEscape}
-    />
-  );
-};

src/renderer/components/segmented-control/index.tsx

@@ -1,42 +0,0 @@
-import { forwardRef } from 'react';
-import type { SegmentedControlProps as MantineSegmentedControlProps } from '@mantine/core';
-import { SegmentedControl as MantineSegmentedControl } from '@mantine/core';
-import styled from 'styled-components';
-
-type SegmentedControlProps = MantineSegmentedControlProps;
-
-const StyledSegmentedControl = styled(MantineSegmentedControl)<MantineSegmentedControlProps>`
-  & .mantine-SegmentedControl-label {
-    color: var(--input-fg);
-    font-family: var(--content-font-family);
-  }
-
-  background-color: var(--input-bg);
-
-  & .mantine-SegmentedControl-disabled {
-    opacity: 0.6;
-  }
-
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
-
-  & .mantine-SegmentedControl-active {
-    color: var(--input-active-fg);
-    background-color: var(--input-active-bg);
-  }
-`;
-
-export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
-  ({ ...props }: SegmentedControlProps, ref) => {
-    return (
-      <StyledSegmentedControl
-        ref={ref}
-        styles={{}}
-        transitionDuration={250}
-        transitionTimingFunction="linear"
-        {...props}
-      />
-    );
-  },
-);

src/renderer/components/select/index.tsx

@@ -1,144 +0,0 @@
-import type {
-  SelectProps as MantineSelectProps,
-  MultiSelectProps as MantineMultiSelectProps,
-} from '@mantine/core';
-import { Select as MantineSelect, MultiSelect as MantineMultiSelect } from '@mantine/core';
-import styled from 'styled-components';
-
-interface SelectProps extends MantineSelectProps {
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-interface MultiSelectProps extends MantineMultiSelectProps {
-  maxWidth?: number | string;
-  width?: number | string;
-}
-
-const StyledSelect = styled(MantineSelect)`
-  & [data-selected='true'] {
-    background: var(--input-bg);
-  }
-
-  & [data-disabled='true'] {
-    background: var(--input-bg);
-    opacity: 0.6;
-  }
-
-  & .mantine-Select-itemsWrapper {
-    & .mantine-Select-item {
-      padding: 40px;
-    }
-  }
-`;
-
-export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
-  return (
-    <StyledSelect
-      withinPortal
-      styles={{
-        dropdown: {
-          background: 'var(--dropdown-menu-bg)',
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
-        },
-        input: {
-          background: 'var(--input-bg)',
-          color: 'var(--input-fg)',
-        },
-        item: {
-          '&:hover': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-hovered]': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-selected="true"]': {
-            '&:hover': {
-              background: 'var(--dropdown-menu-bg-hover)',
-            },
-            background: 'none',
-            color: 'var(--primary-color)',
-          },
-          color: 'var(--dropdown-menu-fg)',
-          padding: '.3rem',
-        },
-      }}
-      sx={{ maxWidth, width }}
-      transition="fade"
-      transitionDuration={100}
-      {...props}
-    />
-  );
-};
-
-const StyledMultiSelect = styled(MantineMultiSelect)`
-  & [data-selected='true'] {
-    background: var(--input-select-bg);
-  }
-
-  & [data-disabled='true'] {
-    background: var(--input-bg);
-    opacity: 0.6;
-  }
-
-  & .mantine-MultiSelect-itemsWrapper {
-    & .mantine-Select-item {
-      padding: 40px;
-    }
-  }
-`;
-
-export const MultiSelect = ({ width, maxWidth, ...props }: MultiSelectProps) => {
-  return (
-    <StyledMultiSelect
-      withinPortal
-      styles={{
-        dropdown: {
-          background: 'var(--dropdown-menu-bg)',
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
-        },
-        input: {
-          background: 'var(--input-bg)',
-          color: 'var(--input-fg)',
-        },
-        item: {
-          '&:hover': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-hovered]': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-selected="true"]': {
-            '&:hover': {
-              background: 'var(--dropdown-menu-bg-hover)',
-            },
-            background: 'none',
-            color: 'var(--primary-color)',
-          },
-          color: 'var(--dropdown-menu-fg)',
-          padding: '.5rem .1rem',
-        },
-        value: {
-          margin: '.2rem',
-          paddingBottom: '1rem',
-          paddingLeft: '1rem',
-          paddingTop: '1rem',
-        },
-      }}
-      sx={{ maxWidth, width }}
-      transition="fade"
-      transitionDuration={100}
-      {...props}
-    />
-  );
-};
-
-Select.defaultProps = {
-  maxWidth: undefined,
-  width: undefined,
-};
-
-MultiSelect.defaultProps = {
-  maxWidth: undefined,
-  width: undefined,
-};

src/renderer/components/skeleton/index.tsx

@@ -1,45 +0,0 @@
-import type { SkeletonProps as MantineSkeletonProps } from '@mantine/core';
-import { Skeleton as MantineSkeleton } from '@mantine/core';
-import styled from 'styled-components';
-
-const StyledSkeleton = styled(MantineSkeleton)`
-  @keyframes run {
-    0% {
-      left: 0;
-      transform: translateX(-100%);
-    }
-
-    80% {
-      transform: translateX(100%);
-    }
-
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
-  &::before {
-    background: var(--skeleton-bg);
-  }
-
-  &::after {
-    position: absolute;
-    background: linear-gradient(90deg, transparent, var(--skeleton-bg), transparent);
-    transform: translateX(-100%);
-    animation-name: run;
-    animation-duration: 1.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    content: '';
-    inset: 0;
-  }
-`;
-
-export const Skeleton = ({ ...props }: MantineSkeletonProps) => {
-  return (
-    <StyledSkeleton
-      animate={false}
-      {...props}
-    />
-  );
-};

src/renderer/components/slider/index.tsx

@@ -1,34 +0,0 @@
-import type { SliderProps as MantineSliderProps } from '@mantine/core';
-import { Slider as MantineSlider } from '@mantine/core';
-import styled from 'styled-components';
-
-type SliderProps = MantineSliderProps;
-
-const StyledSlider = styled(MantineSlider)`
-  & .mantine-Slider-track {
-    height: 0.5rem;
-    background-color: var(--slider-track-bg);
-  }
-
-  & .mantine-Slider-bar {
-    background-color: var(--primary-color);
-  }
-
-  & .mantine-Slider-thumb {
-    width: 1rem;
-    height: 1rem;
-    background: var(--slider-thumb-bg);
-    border: none;
-  }
-
-  & .mantine-Slider-label {
-    padding: 0 1rem;
-    color: var(--tooltip-fg);
-    font-size: 1em;
-    background: var(--tooltip-bg);
-  }
-`;
-
-export const Slider = ({ ...props }: SliderProps) => {
-  return <StyledSlider {...props} />;
-};