Upgrade electron-builder to latest

- Only show spinner on load rather than fetch
- Add refresh button to explore
- Adjust stale times

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

@@ -0,0 +1,119 @@
+import 'webpack-dev-server';
+import path from 'path';
+
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import webpack from 'webpack';
+import { merge } from 'webpack-merge';
+
+import checkNodeEnv from '../scripts/check-node-env';
+import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
+
+// When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
+// at the dev webpack config is not accidentally run in a production environment
+if (process.env.NODE_ENV === 'production') {
+  checkNodeEnv('development');
+}
+
+const port = process.env.PORT || 4343;
+
+const configuration: webpack.Configuration = {
+  devtool: 'inline-source-map',
+
+  mode: 'development',
+
+  target: ['web'],
+
+  entry: [path.join(webpackPaths.srcRemotePath, 'index.tsx')],
+
+  output: {
+    path: webpackPaths.dllPath,
+    publicPath: '/',
+    filename: 'remote.js',
+    library: {
+      type: 'umd',
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.s?css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: true,
+              importLoaders: 1,
+            },
+          },
+          'sass-loader',
+        ],
+        include: /\.module\.s?(c|a)ss$/,
+      },
+      {
+        test: /\.s?css$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+        exclude: /\.module\.s?(c|a)ss$/,
+      },
+      // Fonts
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
+      // Images
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+
+    /**
+     * Create global constants which can be configured at compile time.
+     *
+     * Useful for allowing different behaviour between development builds and
+     * release builds
+     *
+     * NODE_ENV should be production so that modules do not perform certain
+     * development checks
+     *
+     * By default, use 'development' as NODE_ENV. This can be overriden with
+     * 'staging', for example, by changing the ENV variables in the npm scripts
+     */
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development',
+    }),
+
+    new webpack.LoaderOptionsPlugin({
+      debug: true,
+    }),
+
+    new HtmlWebpackPlugin({
+      filename: path.join('index.html'),
+      template: path.join(webpackPaths.srcRemotePath, 'index.ejs'),
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+      },
+      isBrowser: true,
+      env: process.env.NODE_ENV,
+      isDevelopment: process.env.NODE_ENV !== 'production',
+      nodeModules: webpackPaths.appNodeModulesPath,
+    }),
+  ],
+
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+
+  watch: true,
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.config.remote.prod.ts

@@ -0,0 +1,131 @@
+/**
+ * Build config for electron renderer process
+ */
+
+import path from 'path';
+
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import webpack from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { merge } from 'webpack-merge';
+
+import checkNodeEnv from '../scripts/check-node-env';
+import deleteSourceMaps from '../scripts/delete-source-maps';
+import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
+
+checkNodeEnv('production');
+deleteSourceMaps();
+
+const devtoolsConfig =
+  process.env.DEBUG_PROD === 'true'
+    ? {
+        devtool: 'source-map',
+      }
+    : {};
+
+const configuration: webpack.Configuration = {
+  ...devtoolsConfig,
+
+  mode: 'production',
+
+  target: ['web'],
+
+  entry: [path.join(webpackPaths.srcRemotePath, 'index.tsx')],
+
+  output: {
+    path: webpackPaths.distRemotePath,
+    publicPath: './',
+    filename: 'remote.js',
+    library: {
+      type: 'umd',
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.s?(a|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: true,
+              importLoaders: 1,
+            },
+          },
+          'sass-loader',
+        ],
+        include: /\.module\.s?(c|a)ss$/,
+      },
+      {
+        test: /\.s?(a|c)ss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+        exclude: /\.module\.s?(c|a)ss$/,
+      },
+      // Fonts
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
+      // Images
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+      }),
+      new CssMinimizerPlugin(),
+    ],
+  },
+
+  plugins: [
+    /**
+     * Create global constants which can be configured at compile time.
+     *
+     * Useful for allowing different behaviour between development builds and
+     * release builds
+     *
+     * NODE_ENV should be production so that modules do not perform certain
+     * development checks
+     */
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'production',
+      DEBUG_PROD: false,
+    }),
+
+    new MiniCssExtractPlugin({
+      filename: 'remote.css',
+    }),
+
+    new BundleAnalyzerPlugin({
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
+    }),
+
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+      },
+      isBrowser: false,
+      isDevelopment: process.env.NODE_ENV !== 'production',
+    }),
+  ],
+};
+
+export default merge(baseConfig, configuration);

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

@@ -67,7 +67,10 @@ const configuration: webpack.Configuration = {
           {
             loader: 'css-loader',
             options: {
-              modules: true,
+              modules: {
+                localIdentName: '[name]__[local]--[hash:base64:5]',
+                exportLocalsConvention: 'camelCaseOnly',
+              },
               sourceMap: true,
               importLoaders: 1,
             },
@@ -168,6 +171,14 @@ const configuration: webpack.Configuration = {
         .on('close', (code: number) => process.exit(code!))
         .on('error', (spawnError) => console.error(spawnError));
 
+      console.log('Starting remote.js builder...');
+      const remoteProcess = spawn('npm', ['run', 'start:remote'], {
+        shell: true,
+        stdio: 'inherit',
+      })
+        .on('close', (code: number) => process.exit(code!))
+        .on('error', (spawnError) => console.error(spawnError));
+
       console.log('Starting Main Process...');
       spawn('npm', ['run', 'start:main'], {
         shell: true,
@@ -175,6 +186,7 @@ const configuration: webpack.Configuration = {
       })
         .on('close', (code: number) => {
           preloadProcess.kill();
+          remoteProcess.kill();
           process.exit(code!);
         })
         .on('error', (spawnError) => console.error(spawnError));

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

@@ -54,7 +54,10 @@ const configuration: webpack.Configuration = {
           {
             loader: 'css-loader',
             options: {
-              modules: true,
+              modules: {
+                localIdentName: '[name]__[local]--[hash:base64:5]',
+                exportLocalsConvention: 'camelCaseOnly',
+              },
               sourceMap: true,
               importLoaders: 1,
             },

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

@@ -49,7 +49,10 @@ const configuration: webpack.Configuration = {
           {
             loader: 'css-loader',
             options: {
-              modules: true,
+              modules: {
+                localIdentName: '[name]__[local]--[hash:base64:5]',
+                exportLocalsConvention: 'camelCaseOnly',
+              },
               sourceMap: true,
               importLoaders: 1,
             },

.erb/configs/webpack.config.web.prod.ts

@@ -0,0 +1,134 @@
+/**
+ * Build config for electron renderer process
+ */
+
+import path from 'path';
+
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import webpack from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { merge } from 'webpack-merge';
+
+import checkNodeEnv from '../scripts/check-node-env';
+import deleteSourceMaps from '../scripts/delete-source-maps';
+import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
+
+checkNodeEnv('production');
+deleteSourceMaps();
+
+const devtoolsConfig =
+    process.env.DEBUG_PROD === 'true'
+        ? {
+              devtool: 'source-map',
+          }
+        : {};
+
+const configuration: webpack.Configuration = {
+    ...devtoolsConfig,
+
+    mode: 'production',
+
+    target: ['web'],
+
+    entry: [path.join(webpackPaths.srcRendererPath, 'index.tsx')],
+
+    output: {
+        path: webpackPaths.distWebPath,
+        publicPath: '/',
+        filename: 'renderer.js',
+        library: {
+            type: 'umd',
+        },
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.s?(a|c)ss$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                localIdentName: '[name]__[local]--[hash:base64:5]',
+                                exportLocalsConvention: 'camelCaseOnly',
+                            },
+                            sourceMap: true,
+                            importLoaders: 1,
+                        },
+                    },
+                    'sass-loader',
+                ],
+                include: /\.module\.s?(c|a)ss$/,
+            },
+            {
+                test: /\.s?(a|c)ss$/,
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+                exclude: /\.module\.s?(c|a)ss$/,
+            },
+            // Fonts
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/i,
+                type: 'asset/resource',
+            },
+            // Images
+            {
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: 'asset/resource',
+            },
+        ],
+    },
+
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                parallel: true,
+            }),
+            new CssMinimizerPlugin(),
+        ],
+    },
+
+    plugins: [
+        /**
+         * Create global constants which can be configured at compile time.
+         *
+         * Useful for allowing different behaviour between development builds and
+         * release builds
+         *
+         * NODE_ENV should be production so that modules do not perform certain
+         * development checks
+         */
+        new webpack.EnvironmentPlugin({
+            NODE_ENV: 'production',
+            DEBUG_PROD: false,
+        }),
+
+        new MiniCssExtractPlugin({
+            filename: 'style.css',
+        }),
+
+        new BundleAnalyzerPlugin({
+            analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
+        }),
+
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+            minify: {
+                collapseWhitespace: true,
+                removeAttributeQuotes: true,
+                removeComments: true,
+            },
+            isBrowser: false,
+            isDevelopment: process.env.NODE_ENV !== 'production',
+        }),
+    ],
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.paths.ts

@@ -6,6 +6,7 @@ const dllPath = path.join(__dirname, '../dll');
 
 const srcPath = path.join(rootPath, 'src');
 const srcMainPath = path.join(srcPath, 'main');
+const srcRemotePath = path.join(srcPath, 'remote');
 const srcRendererPath = path.join(srcPath, 'renderer');
 
 const releasePath = path.join(rootPath, 'release');
@@ -16,7 +17,9 @@ const srcNodeModulesPath = path.join(srcPath, 'node_modules');
 
 const distPath = path.join(appPath, 'dist');
 const distMainPath = path.join(distPath, 'main');
+const distRemotePath = path.join(distPath, 'remote');
 const distRendererPath = path.join(distPath, 'renderer');
+const distWebPath = path.join(distPath, 'web');
 
 const buildPath = path.join(releasePath, 'build');
 
@@ -25,6 +28,7 @@ export default {
   dllPath,
   srcPath,
   srcMainPath,
+  srcRemotePath,
   srcRendererPath,
   releasePath,
   appPath,
@@ -33,6 +37,8 @@ export default {
   srcNodeModulesPath,
   distPath,
   distMainPath,
+  distRemotePath,
   distRendererPath,
+  distWebPath,
   buildPath,
 };

.erb/scripts/check-build-exists.ts

@@ -5,20 +5,29 @@ import fs from 'fs';
 import webpackPaths from '../configs/webpack.paths';
 
 const mainPath = path.join(webpackPaths.distMainPath, 'main.js');
+const remotePath = path.join(webpackPaths.distMainPath, 'remote.js');
 const rendererPath = path.join(webpackPaths.distRendererPath, 'renderer.js');
 
 if (!fs.existsSync(mainPath)) {
   throw new Error(
     chalk.whiteBright.bgRed.bold(
-      'The main process is not built yet. Build it by running "npm run build:main"'
-    )
+      'The main process is not built yet. Build it by running "npm run build:main"',
+    ),
+  );
+}
+
+if (!fs.existsSync(remotePath)) {
+  throw new Error(
+    chalk.whiteBright.bgRed.bold(
+      'The remote process is not built yet. Build it by running "npm run build:remote"',
+    ),
   );
 }
 
 if (!fs.existsSync(rendererPath)) {
   throw new Error(
     chalk.whiteBright.bgRed.bold(
-      'The renderer process is not built yet. Build it by running "npm run build:renderer"'
-    )
+      'The renderer process is not built yet. Build it by running "npm run build:renderer"',
+    ),
   );
 }

.erb/scripts/delete-source-maps.js

@@ -4,5 +4,6 @@ import webpackPaths from '../configs/webpack.paths';
 
 export default function deleteSourceMaps() {
   rimraf.sync(path.join(webpackPaths.distMainPath, '*.js.map'));
+  rimraf.sync(path.join(webpackPaths.distRemotePath, '*.js.map'));
   rimraf.sync(path.join(webpackPaths.distRendererPath, '*.js.map'));
 }

.eslintrc.js

@@ -1,90 +1,97 @@
 module.exports = {
-  extends: ['erb', 'plugin:typescript-sort-keys/recommended'],
-  ignorePatterns: ['.erb/*', 'server'],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    createDefaultProgram: true,
-    ecmaVersion: 12,
+    extends: ['erb', 'plugin:typescript-sort-keys/recommended'],
+    ignorePatterns: ['.erb/*', 'server'],
     parser: '@typescript-eslint/parser',
-    project: './tsconfig.json',
-    sourceType: 'module',
-    tsconfigRootDir: './',
-  },
-  plugins: ['@typescript-eslint', 'import', 'sort-keys-fix'],
-  rules: {
-    '@typescript-eslint/naming-convention': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-shadow': ['off'],
-    'default-case': 'off',
-    'import/extensions': 'off',
-    'import/no-absolute-path': 'off',
-    // A temporary hack related to IDE not resolving correct package.json
-    'import/no-extraneous-dependencies': 'off',
-
-    'import/no-unresolved': 'error',
-    'import/order': [
-      'error',
-      {
-        alphabetize: {
-          caseInsensitive: true,
-          order: 'asc',
-        },
-        groups: ['builtin', 'external', 'internal', ['parent', 'sibling']],
-        'newlines-between': 'never',
-        pathGroups: [
-          {
-            group: 'external',
-            pattern: 'react',
-            position: 'before',
-          },
-        ],
-        pathGroupsExcludedImportTypes: ['react'],
-      },
-    ],
-    'import/prefer-default-export': 'off',
-    'jsx-a11y/click-events-have-key-events': 'off',
-    'jsx-a11y/interactive-supports-focus': 'off',
-    'jsx-a11y/media-has-caption': 'off',
-    'no-await-in-loop': 'off',
-    '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',
-      {
-        callbacksLast: true,
-        ignoreCase: false,
-        noSortAlphabetically: false,
-        reservedFirst: true,
-        shorthandFirst: true,
-        shorthandLast: false,
-      },
-    ],
-    'react/no-array-index-key': 'off',
-    'react/react-in-jsx-scope': 'off',
-    'react/require-default-props': 'off',
-    'sort-keys-fix/sort-keys-fix': 'warn',
-  },
-  settings: {
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
-    },
-    'import/resolver': {
-      // See https://github.com/benmosher/eslint-plugin-import/issues/1396#issuecomment-575727774 for line below
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-      typescript: {
-        alwaysTryTypes: true,
+    parserOptions: {
+        createDefaultProgram: true,
+        ecmaVersion: 12,
+        parser: '@typescript-eslint/parser',
         project: './tsconfig.json',
-      },
-      webpack: {
-        config: require.resolve('./.erb/configs/webpack.config.eslint.ts'),
-      },
+        sourceType: 'module',
+        tsconfigRootDir: './',
+    },
+    plugins: ['@typescript-eslint', 'import', 'sort-keys-fix'],
+    rules: {
+        '@typescript-eslint/naming-convention': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-shadow': ['off'],
+        '@typescript-eslint/no-unused-vars': ['error'],
+        '@typescript-eslint/no-use-before-define': ['error'],
+        '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',
+            {
+                alphabetize: {
+                    caseInsensitive: true,
+                    order: 'asc',
+                },
+                groups: ['builtin', 'external', 'internal', ['parent', 'sibling']],
+                'newlines-between': 'never',
+                pathGroups: [
+                    {
+                        group: 'external',
+                        pattern: 'react',
+                        position: 'before',
+                    },
+                ],
+                pathGroupsExcludedImportTypes: ['react'],
+            },
+        ],
+        'import/prefer-default-export': 'off',
+        'jsx-a11y/click-events-have-key-events': 'off',
+        'jsx-a11y/interactive-supports-focus': 'off',
+        'jsx-a11y/media-has-caption': 'off',
+        'no-await-in-loop': 'off',
+        'no-console': 'off',
+        'no-nested-ternary': 'off',
+        'no-restricted-syntax': 'off',
+        'no-shadow': 'off',
+        'no-underscore-dangle': 'off',
+        'no-unused-vars': 'off',
+        'no-use-before-define': 'off',
+        'prefer-destructuring': 'off',
+        'react/function-component-definition': 'off',
+        'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+        'react/jsx-no-useless-fragment': 'off',
+        'react/jsx-props-no-spreading': 'off',
+        'react/jsx-sort-props': [
+            'error',
+            {
+                callbacksLast: true,
+                ignoreCase: false,
+                noSortAlphabetically: false,
+                reservedFirst: true,
+                shorthandFirst: true,
+                shorthandLast: false,
+            },
+        ],
+        'react/no-array-index-key': 'off',
+        'react/react-in-jsx-scope': 'off',
+        'react/require-default-props': 'off',
+        'sort-keys-fix/sort-keys-fix': 'warn',
+    },
+    settings: {
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx'],
+        },
+        'import/resolver': {
+            // See https://github.com/benmosher/eslint-plugin-import/issues/1396#issuecomment-575727774 for line below
+            node: {
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            },
+            typescript: {
+                alwaysTryTypes: true,
+                project: './tsconfig.json',
+            },
+            webpack: {
+                config: require.resolve('./.erb/configs/webpack.config.eslint.ts'),
+            },
+        },
     },
-  },
 };

.github/FUNDING.yml

@@ -1 +1,3 @@
 # These are supported funding model platforms
+
+ko_fi: jeffvli

.github/ISSUE_TEMPLATE/1-Bug_report.md

@@ -39,6 +39,7 @@ labels: 'bug'
 
 <!--- Include as many relevant details about the environment you experienced the bug in -->
 
-- Application version :
-- Operating System and version :
-- Node version (if developing locally) :
+-   Application version (e.g. v0.1.0) :
+-   Operating System and version (e.g. Windows 10) :
+-   Server and version (e.g. Navidrome v0.48.0) :
+-   Node version (if developing locally) :

.github/ISSUE_TEMPLATE/3-Feature_request.md

@@ -7,3 +7,5 @@ labels: 'enhancement'
 ## What do you want to be added?
 
 ## Additional context
+
+<!-- Is this a server-specific feature? (e.g. Jellyfin only). -->

.github/config.yml

@@ -1,6 +1,6 @@
 requiredHeaders:
-  - Prerequisites
-  - Expected Behavior
-  - Current Behavior
-  - Possible Solution
-  - Your Environment
+    - Prerequisites
+    - Expected Behavior
+    - Current Behavior
+    - Possible Solution
+    - Your Environment

.github/stale.yml

@@ -4,14 +4,14 @@ daysUntilStale: 60
 daysUntilClose: 7
 # Issues with these labels will never be considered stale
 exemptLabels:
-  - discussion
-  - security
+    - discussion
+    - security
 # Label to use when marking an issue as stale
 staleLabel: wontfix
 # Comment to post when marking an issue as stale. Set to `false` to disable
 markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
+    This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
+
+
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: false

.github/workflows/publish-linux.yml

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

.github/workflows/publish-macos.yml

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

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

@@ -1,54 +1,54 @@
 name: Comment on pull request
 on:
-  workflow_run:
-    workflows: ['Publish (PR)']
-    types: [completed]
+    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);
-            }
+    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 +1,60 @@
 name: Publish (PR)
 
 on:
-  pull_request:
-    branches:
-      - development
+    pull_request:
+        branches:
+            - development
 
 jobs:
-  publish:
-    runs-on: ${{ matrix.os }}
+    publish:
+        runs-on: ${{ matrix.os }}
 
-    strategy:
-      matrix:
-        os: [macos-latest]
+        strategy:
+            matrix:
+                os: [macos-latest]
 
-    steps:
-      - name: Checkout git repo
-        uses: actions/checkout@v3
+        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 Node and NPM
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+                  cache: npm
 
-      - name: Install dependencies
-        run: |
-          npm install --legacy-peer-deps
+            - 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
+            - 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: 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: 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
+            - uses: actions/upload-artifact@v3
+              with:
+                  name: macos-binaries
+                  path: |
+                      release/build/*.dmg

.github/workflows/test.yml

@@ -3,32 +3,32 @@ name: Test
 on: [push, pull_request]
 
 jobs:
-  release:
-    runs-on: ${{ matrix.os }}
+    release:
+        runs-on: ${{ matrix.os }}
 
-    strategy:
-      matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
+        strategy:
+            matrix:
+                os: [macos-latest, windows-latest, ubuntu-latest]
 
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v1
+        steps:
+            - name: Check out Git repository
+              uses: actions/checkout@v1
 
-      - name: Install Node.js and NPM
-        uses: actions/setup-node@v2
-        with:
-          node-version: 16
-          cache: npm
+            - name: Install Node.js and NPM
+              uses: actions/setup-node@v2
+              with:
+                  node-version: 16
+                  cache: npm
 
-      - name: npm install
-        run: |
-          npm install --legacy-peer-deps
+            - name: npm install
+              run: |
+                  npm install --legacy-peer-deps
 
-      - name: npm test
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          npm run package
-          npm run lint
-          npm exec tsc
-          npm test
+            - name: npm test
+              env:
+                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              run: |
+                  npm run lint
+                  npm run package
+                  npm exec tsc
+                  npm test

.prettierrc

@@ -1,20 +1,22 @@
 {
-  "printWidth": 100,
-  "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,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "useTabs": false,
+    "overrides": [
+        {
+            "files": ["**/*.css", "**/*.scss", "**/*.html"],
+            "options": {
+                "singleQuote": true
+            }
+        }
+    ],
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "proseWrap": "never",
+    "htmlWhitespaceSensitivity": "strict",
+    "endOfLine": "lf",
+    "singleAttributePerLine": true
 }

.stylelintrc.json

@@ -1,31 +1,27 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
-  "customSyntax": "postcss-scss",
-  "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-styled-components",
-    "stylelint-config-rational-order"
-  ],
-  "rules": {
-    "color-function-notation": ["legacy"],
-    "declaration-empty-line-before": null,
-    "order/properties-order": [],
-    "plugin/rational-order": [
-      true,
-      {
-        "border-in-box-model": false,
-        "empty-line-between-groups": false
-      }
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-css-modules",
+        "stylelint-config-rational-order"
     ],
-    "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,
-      { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }
-    ],
-    "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }],
-    "declaration-colon-newline-after": null
-  }
+    "rules": {
+        "indentation": 4,
+        "color-function-notation": ["legacy"],
+        "declaration-empty-line-before": null,
+        "order/properties-order": [],
+        "plugin/rational-order": [
+            true,
+            {
+                "border-in-box-model": false,
+                "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, { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }],
+        "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }],
+        "declaration-colon-newline-after": null
+    }
 }

.vscode/extensions.json

@@ -1,8 +1,10 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig",
-    "stylelint.vscode-stylelint",
-    "esbenp.prettier-vscode"
-  ]
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "EditorConfig.EditorConfig",
+        "stylelint.vscode-stylelint",
+        "esbenp.prettier-vscode",
+        "clinyong.vscode-css-modules",
+        "Huuums.vscode-fast-folder-structure"
+    ]
 }

.vscode/launch.json

@@ -1,30 +1,28 @@
 {
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Electron: Main",
-      "type": "node",
-      "request": "launch",
-      "protocol": "inspector",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": [
-        "run start:main --inspect=5858 --remote-debugging-port=9223"
-      ],
-      "preLaunchTask": "Start Webpack Dev"
-    },
-    {
-      "name": "Electron: Renderer",
-      "type": "chrome",
-      "request": "attach",
-      "port": 9223,
-      "webRoot": "${workspaceFolder}",
-      "timeout": 15000
-    }
-  ],
-  "compounds": [
-    {
-      "name": "Electron: All",
-      "configurations": ["Electron: Main", "Electron: Renderer"]
-    }
-  ]
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Electron: Main",
+            "type": "node",
+            "request": "launch",
+            "protocol": "inspector",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": ["run start:main --inspect=5858 --remote-debugging-port=9223"],
+            "preLaunchTask": "Start Webpack Dev"
+        },
+        {
+            "name": "Electron: Renderer",
+            "type": "chrome",
+            "request": "attach",
+            "port": 9223,
+            "webRoot": "${workspaceFolder}",
+            "timeout": 15000
+        }
+    ],
+    "compounds": [
+        {
+            "name": "Electron: All",
+            "configurations": ["Electron: Main", "Electron: Renderer"]
+        }
+    ]
 }

.vscode/settings.json

@@ -1,43 +1,72 @@
 {
-  "files.associations": {
-    ".eslintrc": "jsonc",
-    ".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": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": false
-  },
-  "css.validate": false,
-  "less.validate": false,
-  "scss.validate": false,
-  "javascript.validate.enable": false,
-  "javascript.format.enable": false,
-  "typescript.format.enable": false,
-  "search.exclude": {
-    ".git": true,
-    ".eslintcache": true,
-    ".erb/dll": true,
-    "release/{build,app/dist}": true,
-    "node_modules": true,
-    "npm-debug.log.*": true,
-    "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
+    "files.associations": {
+        ".eslintrc": "jsonc",
+        ".prettierrc": "jsonc",
+        ".eslintignore": "ignore"
+    },
+    "eslint.validate": ["typescript"],
+    "eslint.workingDirectories": [
+        { "directory": "./", "changeProcessCWD": true },
+        { "directory": "./server", "changeProcessCWD": true }
+    ],
+    "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true,
+        "source.fixAll.stylelint": true,
+        "source.organizeImports": false,
+        "source.formatDocument": true
+    },
+    "css.validate": true,
+    "less.validate": false,
+    "scss.validate": true,
+    "scss.lint.unknownAtRules": "warning",
+    "scss.lint.unknownProperties": "warning",
+    "javascript.validate.enable": false,
+    "javascript.format.enable": false,
+    "typescript.format.enable": false,
+    "search.exclude": {
+        ".git": true,
+        ".eslintcache": true,
+        ".erb/dll": true,
+        "release/{build,app/dist}": true,
+        "node_modules": true,
+        "npm-debug.log.*": true,
+        "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", "scss"],
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+    "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
+    "folderTemplates.structures": [
+        {
+            "name": "TypeScript Feature Component With CSS Modules",
+            "omitParentDirectory": true,
+            "structure": [
+                {
+                    "fileName": "<FTName | kebabcase>.tsx",
+                    "template": "Functional Component with CSS Modules"
+                },
+                {
+                    "fileName": "<FTName | kebabcase>.module.scss"
+                }
+            ]
+        }
+    ],
+    "folderTemplates.fileTemplates": {
+        "Functional Component with CSS Modules": [
+            "import styles from './<FTName | kebabcase>.module.scss';",
+            "",
+            "interface <FTName | pascalcase>Props {}",
+            "",
+            "export const <FTName | pascalcase> = ({}: <FTName | pascalcase>Props) => {",
+            "  return <div></div>;",
+            "};"
+        ]
+    }
 }

.vscode/tasks.json

@@ -1,25 +1,25 @@
 {
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "label": "Start Webpack Dev",
-      "script": "start:renderer",
-      "options": {
-        "cwd": "${workspaceFolder}"
-      },
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "custom",
-        "pattern": {
-          "regexp": "____________"
-        },
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "Compiling\\.\\.\\.$",
-          "endsPattern": "(Compiled successfully|Failed to compile)\\.$"
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "label": "Start Webpack Dev",
+            "script": "start:renderer",
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "isBackground": true,
+            "problemMatcher": {
+                "owner": "custom",
+                "pattern": {
+                    "regexp": "____________"
+                },
+                "background": {
+                    "activeOnStart": true,
+                    "beginsPattern": "Compiling\\.\\.\\.$",
+                    "endsPattern": "(Compiled successfully|Failed to compile)\\.$"
+                }
+            }
         }
-      }
-    }
-  ]
+    ]
 }

README.md

@@ -34,16 +34,27 @@ Rewrite of [Sonixd](https://github.com/jeffvli/sonixd).
 - [x] Modern UI
 - [x] Scrobble playback to your server
 - [x] Smart playlist editor (Navidrome)
+- [x] Synchronized and unsynchronized lyrics support
 - [ ] [Request a feature](https://github.com/jeffvli/feishin/issues) or [view taskboard](https://github.com/users/jeffvli/projects/5/views/1)
 
 ## Screenshots
 
-<a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_home.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_home.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png" width="49.5%"/></a>
+<a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_full_screen_player.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_full_screen_player.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png" width="49.5%"/></a>
 
 ## Getting Started
 
 Download the [latest desktop client](https://github.com/jeffvli/feishin/releases).
 
+If you're using an M1 macOS device, [check here](https://github.com/jeffvli/feishin/issues/104#issuecomment-1553914730) for instructions on how to remove the app from quarantine.
+
+### Configuration
+
+1. Upon startup you will be greeted with a prompt to select the path to your MPV binary. If you do not have MPV installed, you can download it [here](https://mpv.io/installation/) or install it using any package manager supported by your OS. After inputting the path, restart the app.
+
+2. After restarting the app, you will be prompted to select a server. Click the `Open menu` button and select `Manage servers`. Click the `Add server` button in the popup and fill out all applicable details. You will need to enter the full URL to your server, including the protocol and port if applicable (e.g. `https://navidrome.my-server.com` or `http://192.168.0.1:4533`).
+
+- **Navidrome** - For the best experience, select "Save password" when creating the server and configure the `SessionTimeout` setting in your Navidrome config to a larger value (e.g. 72h).
+
 ## FAQ
 
 ### What music servers does Feishin support?
@@ -52,9 +63,8 @@ Feishin supports any music server that implements a [Navidrome](https://www.navi
 
 - [Navidrome](https://github.com/navidrome/navidrome)
 - [Jellyfin](https://github.com/jellyfin/jellyfin)
-- ~~[Gonic](https://github.com/sentriz/gonic)~~
-- ~~[Astiga](https://asti.ga/)~~
-- ~~[Supysonic](https://github.com/spl0k/supysonic)~~
+- [Funkwhale](https://funkwhale.audio/) - TBD
+- Subsonic-compatible servers - TBD
 
 ## Development
 

assets/assets.d.ts

@@ -1,31 +1,31 @@
 type Styles = Record<string, string>;
 
 declare module '*.svg' {
-  const content: string;
-  export default content;
+    const content: string;
+    export default content;
 }
 
 declare module '*.png' {
-  const content: string;
-  export default content;
+    const content: string;
+    export default content;
 }
 
 declare module '*.jpg' {
-  const content: string;
-  export default content;
+    const content: string;
+    export default content;
 }
 
 declare module '*.scss' {
-  const content: Styles;
-  export default content;
+    const content: Styles;
+    export default content;
 }
 
 declare module '*.sass' {
-  const content: Styles;
-  export default content;
+    const content: Styles;
+    export default content;
 }
 
 declare module '*.css' {
-  const content: Styles;
-  export default content;
+    const content: Styles;
+    export default content;
 }

package.json

@@ -1,317 +1,326 @@
 {
-  "name": "feishin",
-  "productName": "Feishin",
-  "description": "Feishin music server",
-  "version": "0.0.1-alpha6",
-  "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",
-    "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
-    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
-    "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:styles": "npx stylelint **/*.tsx",
-    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
-    "package:pr": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win --mac --linux",
-    "package:dev": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --dir",
-    "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
-    "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
-    "start:main": "cross-env NODE_ENV=development electron -r ts-node/register/transpile-only ./src/main/main.ts",
-    "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\""
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "cross-env NODE_ENV=development eslint --cache"
-    ],
-    "*.json,.{eslintrc,prettierrc}": [
-      "prettier --ignore-path .eslintignore --parser json --write"
-    ],
-    "*.{css,scss}": [
-      "prettier --ignore-path .eslintignore --single-quote --write"
-    ],
-    "*.{html,md,yml}": [
-      "prettier --ignore-path .eslintignore --single-quote --write"
-    ]
-  },
-  "build": {
+    "name": "feishin",
     "productName": "Feishin",
-    "appId": "org.jeffvli.feishin",
-    "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
-    "asar": true,
-    "asarUnpack": "**\\*.{node,dll}",
-    "files": [
-      "dist",
-      "node_modules",
-      "package.json"
-    ],
-    "afterSign": ".erb/scripts/notarize.js",
-    "electronVersion": "22.3.1",
-    "mac": {
-      "target": {
-        "target": "default",
-        "arch": [
-          "arm64",
-          "x64"
+    "description": "Feishin music server",
+    "version": "0.3.0",
+    "scripts": {
+        "build": "concurrently \"npm run build:main\" \"npm run build:renderer\" \"npm run build:remote\"",
+        "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
+        "build:remote": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.remote.prod.ts",
+        "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
+        "build:web": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.web.prod.ts",
+        "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
+        "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
+        "lint:fix": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx --fix",
+        "lint:styles": "npx stylelint **/*.tsx",
+        "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
+        "package:pr": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win --mac --linux",
+        "package:dev": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --dir",
+        "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
+        "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
+        "start:main": "cross-env NODE_ENV=development electron -r ts-node/register/transpile-only ./src/main/main.ts",
+        "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
+        "start:remote": "cross-env NODE_ENV=developemnt TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.remote.dev.ts",
+        "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
+        "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\""
+    },
+    "lint-staged": {
+        "*.{js,jsx,ts,tsx}": [
+            "cross-env NODE_ENV=development eslint --cache"
+        ],
+        "*.json,.{eslintrc,prettierrc}": [
+            "prettier --ignore-path .eslintignore --parser json --write"
+        ],
+        "*.{css,scss}": [
+            "prettier --ignore-path .eslintignore --single-quote --write"
+        ],
+        "*.{html,md,yml}": [
+            "prettier --ignore-path .eslintignore --single-quote --write"
         ]
-      },
-      "type": "distribution",
-      "hardenedRuntime": true,
-      "entitlements": "assets/entitlements.mac.plist",
-      "entitlementsInherit": "assets/entitlements.mac.plist",
-      "gatekeeperAssess": false
     },
-    "dmg": {
-      "contents": [
-        {
-          "x": 130,
-          "y": 220
+    "build": {
+        "productName": "Feishin",
+        "appId": "org.jeffvli.feishin",
+        "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
+        "asar": true,
+        "asarUnpack": "**\\*.{node,dll}",
+        "files": [
+            "dist",
+            "node_modules",
+            "package.json"
+        ],
+        "afterSign": ".erb/scripts/notarize.js",
+        "electronVersion": "25.3.0",
+        "mac": {
+            "target": {
+                "target": "default",
+                "arch": [
+                    "arm64",
+                    "x64"
+                ]
+            },
+            "type": "distribution",
+            "hardenedRuntime": true,
+            "entitlements": "assets/entitlements.mac.plist",
+            "entitlementsInherit": "assets/entitlements.mac.plist",
+            "gatekeeperAssess": false
         },
-        {
-          "x": 410,
-          "y": 220,
-          "type": "link",
-          "path": "/Applications"
+        "dmg": {
+            "contents": [
+                {
+                    "x": 130,
+                    "y": 220
+                },
+                {
+                    "x": 410,
+                    "y": 220,
+                    "type": "link",
+                    "path": "/Applications"
+                }
+            ]
+        },
+        "win": {
+            "target": [
+                "nsis",
+                "zip"
+            ]
+        },
+        "linux": {
+            "target": [
+                "AppImage",
+                "tar.xz"
+            ],
+            "icon": "assets/icons/placeholder.png",
+            "category": "Development"
+        },
+        "directories": {
+            "app": "release/app",
+            "buildResources": "assets",
+            "output": "release/build"
+        },
+        "extraResources": [
+            "./assets/**"
+        ],
+        "publish": {
+            "provider": "github",
+            "owner": "jeffvli",
+            "repo": "feishin"
         }
-      ]
     },
-    "win": {
-      "target": [
-        "nsis",
-        "zip"
-      ]
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/jeffvli/feishin.git"
     },
-    "linux": {
-      "target": [
-        "AppImage",
-        "tar.xz"
-      ],
-      "icon": "assets/icons/placeholder.png",
-      "category": "Development"
+    "author": {
+        "name": "jeffvli",
+        "url": "https://github.com/jeffvli/"
     },
-    "directories": {
-      "app": "release/app",
-      "buildResources": "assets",
-      "output": "release/build"
+    "contributors": [],
+    "license": "GPL-3.0",
+    "bugs": {
+        "url": "https://github.com/jeffvli/feishin/issues"
     },
-    "extraResources": [
-      "./assets/**"
+    "keywords": [
+        "subsonic",
+        "navidrome",
+        "airsonic",
+        "jellyfin",
+        "react",
+        "electron"
     ],
-    "publish": {
-      "provider": "github",
-      "owner": "jeffvli",
-      "repo": "feishin"
+    "homepage": "https://github.com/jeffvli/feishin",
+    "jest": {
+        "testURL": "http://localhost/",
+        "testEnvironment": "jsdom",
+        "transform": {
+            "\\.(ts|tsx|js|jsx)$": "ts-jest"
+        },
+        "moduleNameMapper": {
+            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
+            "\\.(css|less|sass|scss)$": "identity-obj-proxy"
+        },
+        "moduleFileExtensions": [
+            "js",
+            "jsx",
+            "ts",
+            "tsx",
+            "json"
+        ],
+        "moduleDirectories": [
+            "node_modules",
+            "release/app/node_modules"
+        ],
+        "testPathIgnorePatterns": [
+            "release/app/dist"
+        ],
+        "setupFiles": [
+            "./.erb/scripts/check-build-exists.ts"
+        ]
+    },
+    "devDependencies": {
+        "@electron/rebuild": "^3.2.10",
+        "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
+        "@stylelint/postcss-css-in-js": "^0.38.0",
+        "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.0.0",
+        "@types/electron-localshortcut": "^3.1.0",
+        "@types/jest": "^27.4.1",
+        "@types/lodash": "^4.14.188",
+        "@types/md5": "^2.3.2",
+        "@types/node": "^17.0.23",
+        "@types/react": "^18.0.25",
+        "@types/react-dom": "^18.0.8",
+        "@types/react-test-renderer": "^17.0.1",
+        "@types/react-virtualized-auto-sizer": "^1.0.1",
+        "@types/react-window": "^1.8.5",
+        "@types/react-window-infinite-loader": "^1.0.6",
+        "@types/styled-components": "^5.1.26",
+        "@types/terser-webpack-plugin": "^5.0.4",
+        "@types/webpack-bundle-analyzer": "^4.4.1",
+        "@types/webpack-env": "^1.16.3",
+        "@typescript-eslint/eslint-plugin": "^5.47.0",
+        "@typescript-eslint/parser": "^5.47.0",
+        "browserslist-config-erb": "^0.0.3",
+        "chalk": "^4.1.2",
+        "concurrently": "^7.1.0",
+        "core-js": "^3.21.1",
+        "cross-env": "^7.0.3",
+        "css-loader": "^6.7.1",
+        "css-minimizer-webpack-plugin": "^3.4.1",
+        "detect-port": "^1.3.0",
+        "electron": "^25.3.0",
+        "electron-builder": "^24.6.3",
+        "electron-devtools-installer": "^3.2.0",
+        "electron-notarize": "^1.2.1",
+        "electronmon": "^2.0.2",
+        "eslint": "^8.30.0",
+        "eslint-config-airbnb-base": "^15.0.0",
+        "eslint-config-erb": "^4.0.3",
+        "eslint-import-resolver-typescript": "^2.7.1",
+        "eslint-import-resolver-webpack": "^0.13.2",
+        "eslint-plugin-compat": "^4.0.2",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jest": "^26.1.3",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-promise": "^6.0.0",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.4.0",
+        "eslint-plugin-sort-keys-fix": "^1.1.2",
+        "eslint-plugin-typescript-sort-keys": "^2.1.0",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.5.0",
+        "husky": "^7.0.4",
+        "i18next-parser": "^6.3.0",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^27.5.1",
+        "lint-staged": "^12.3.7",
+        "mini-css-extract-plugin": "^2.6.0",
+        "postcss-scss": "^4.0.4",
+        "postcss-syntax": "^0.36.2",
+        "prettier": "^2.6.2",
+        "react-refresh": "^0.12.0",
+        "react-refresh-typescript": "^2.0.4",
+        "react-test-renderer": "^18.0.0",
+        "rimraf": "^3.0.2",
+        "sass": "^1.49.11",
+        "sass-loader": "^12.6.0",
+        "style-loader": "^3.3.1",
+        "stylelint": "^14.9.1",
+        "stylelint-config-css-modules": "^4.3.0",
+        "stylelint-config-rational-order": "^0.1.2",
+        "stylelint-config-standard-scss": "^4.0.0",
+        "terser-webpack-plugin": "^5.3.1",
+        "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",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.71.0",
+        "webpack-bundle-analyzer": "^4.5.0",
+        "webpack-cli": "^4.9.2",
+        "webpack-dev-server": "^4.8.0",
+        "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.17",
+        "@mantine/dates": "^6.0.17",
+        "@mantine/form": "^6.0.17",
+        "@mantine/hooks": "^6.0.17",
+        "@mantine/modals": "^6.0.17",
+        "@mantine/notifications": "^6.0.17",
+        "@mantine/utils": "^6.0.17",
+        "@tanstack/react-query": "^4.32.1",
+        "@tanstack/react-query-devtools": "^4.32.1",
+        "@tanstack/react-query-persist-client": "^4.32.1",
+        "@ts-rest/core": "^3.23.0",
+        "axios": "^1.4.0",
+        "clsx": "^2.0.0",
+        "cmdk": "^0.2.0",
+        "dayjs": "^1.11.6",
+        "electron-debug": "^3.2.0",
+        "electron-localshortcut": "^3.2.1",
+        "electron-log": "^4.4.6",
+        "electron-store": "^8.1.0",
+        "electron-updater": "^4.6.5",
+        "fast-average-color": "^9.3.0",
+        "format-duration": "^2.0.0",
+        "framer-motion": "^10.13.0",
+        "fuse.js": "^6.6.2",
+        "history": "^5.3.0",
+        "i18next": "^21.6.16",
+        "idb-keyval": "^6.2.1",
+        "immer": "^9.0.21",
+        "is-electron": "^2.2.2",
+        "lodash": "^4.17.21",
+        "md5": "^2.3.0",
+        "memoize-one": "^6.0.0",
+        "nanoid": "^3.3.3",
+        "net": "^1.0.2",
+        "node-mpv": "github:jeffvli/Node-MPV",
+        "overlayscrollbars": "^2.2.1",
+        "overlayscrollbars-react": "^0.5.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-error-boundary": "^3.1.4",
+        "react-i18next": "^11.16.7",
+        "react-icons": "^4.10.1",
+        "react-player": "^2.11.0",
+        "react-router": "^6.5.0",
+        "react-router-dom": "^6.5.0",
+        "react-simple-img": "^3.0.0",
+        "react-virtualized-auto-sizer": "^1.0.17",
+        "react-window": "^1.8.9",
+        "react-window-infinite-loader": "^1.0.9",
+        "styled-components": "^5.3.11",
+        "swiper": "^9.3.1",
+        "zod": "^3.21.4",
+        "zustand": "^4.3.9"
+    },
+    "resolutions": {
+        "styled-components": "^5"
+    },
+    "devEngines": {
+        "node": ">=14.x",
+        "npm": ">=7.x"
+    },
+    "browserslist": [],
+    "electronmon": {
+        "patterns": [
+            "!server",
+            "!src/renderer"
+        ]
     }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jeffvli/feishin.git"
-  },
-  "author": {
-    "name": "jeffvli",
-    "url": "https://github.com/jeffvli/"
-  },
-  "contributors": [],
-  "license": "GPL-3.0",
-  "bugs": {
-    "url": "https://github.com/jeffvli/feishin/issues"
-  },
-  "keywords": [
-    "subsonic",
-    "navidrome",
-    "airsonic",
-    "jellyfin",
-    "react",
-    "electron"
-  ],
-  "homepage": "https://github.com/jeffvli/feishin",
-  "jest": {
-    "testURL": "http://localhost/",
-    "testEnvironment": "jsdom",
-    "transform": {
-      "\\.(ts|tsx|js|jsx)$": "ts-jest"
-    },
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
-      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "ts",
-      "tsx",
-      "json"
-    ],
-    "moduleDirectories": [
-      "node_modules",
-      "release/app/node_modules"
-    ],
-    "testPathIgnorePatterns": [
-      "release/app/dist"
-    ],
-    "setupFiles": [
-      "./.erb/scripts/check-build-exists.ts"
-    ]
-  },
-  "devDependencies": {
-    "@electron/rebuild": "^3.2.10",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
-    "@stylelint/postcss-css-in-js": "^0.38.0",
-    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
-    "@types/electron-localshortcut": "^3.1.0",
-    "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.188",
-    "@types/md5": "^2.3.2",
-    "@types/node": "^17.0.23",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@types/react-test-renderer": "^17.0.1",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@types/styled-components": "^5.1.26",
-    "@types/terser-webpack-plugin": "^5.0.4",
-    "@types/webpack-bundle-analyzer": "^4.4.1",
-    "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/parser": "^5.47.0",
-    "browserslist-config-erb": "^0.0.3",
-    "chalk": "^4.1.2",
-    "concurrently": "^7.1.0",
-    "core-js": "^3.21.1",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "detect-port": "^1.3.0",
-    "electron": "^22.3.1",
-    "electron-builder": "^24.0.0-alpha.13",
-    "electron-devtools-installer": "^3.2.0",
-    "electron-notarize": "^1.2.1",
-    "electronmon": "^2.0.2",
-    "eslint": "^8.30.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-erb": "^4.0.3",
-    "eslint-import-resolver-typescript": "^2.7.1",
-    "eslint-import-resolver-webpack": "^0.13.2",
-    "eslint-plugin-compat": "^4.0.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.1.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-typescript-sort-keys": "^2.1.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "husky": "^7.0.4",
-    "i18next-parser": "^6.3.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.3.7",
-    "mini-css-extract-plugin": "^2.6.0",
-    "postcss-scss": "^4.0.4",
-    "postcss-syntax": "^0.36.2",
-    "prettier": "^2.6.2",
-    "react-refresh": "^0.12.0",
-    "react-refresh-typescript": "^2.0.4",
-    "react-test-renderer": "^18.0.0",
-    "rimraf": "^3.0.2",
-    "sass": "^1.49.11",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
-    "stylelint": "^14.9.1",
-    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-order": "^5.0.0",
-    "stylelint-processor-styled-components": "^1.10.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "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-plugin-styled-components": "^2.0.0",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.71.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.0",
-    "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",
-    "@mantine/dates": "^6.0.0",
-    "@mantine/dropzone": "^6.0.0",
-    "@mantine/form": "^6.0.0",
-    "@mantine/hooks": "^6.0.0",
-    "@mantine/modals": "^6.0.0",
-    "@mantine/notifications": "^6.0.0",
-    "@mantine/utils": "^6.0.0",
-    "@tanstack/react-query": "^4.24.4",
-    "@tanstack/react-query-devtools": "^4.24.4",
-    "dayjs": "^1.11.6",
-    "electron-debug": "^3.2.0",
-    "electron-localshortcut": "^3.2.1",
-    "electron-log": "^4.4.6",
-    "electron-store": "^8.1.0",
-    "electron-updater": "^4.6.5",
-    "fast-average-color": "^9.2.0",
-    "format-duration": "^2.0.0",
-    "framer-motion": "^8.1.3",
-    "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",
-    "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-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-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.8",
-    "react-window-infinite-loader": "^1.0.8",
-    "styled-components": "^5.3.6",
-    "zod": "^3.19.1",
-    "zustand": "^4.1.4"
-  },
-  "resolutions": {
-    "styled-components": "^5"
-  },
-  "devEngines": {
-    "node": ">=14.x",
-    "npm": ">=7.x"
-  },
-  "browserslist": [],
-  "electronmon": {
-    "patterns": [
-      "!server",
-      "!src/renderer"
-    ]
-  }
 }

release/app/package.json

@@ -1,22 +1,24 @@
 {
-  "name": "feishin",
-  "version": "0.0.1-alpha6",
-  "description": "",
-  "main": "./dist/main/main.js",
-  "author": {
-    "name": "jeffvli",
-    "url": "https://github.com/jeffvli/"
-  },
-  "scripts": {
-    "electron-rebuild": "node -r ts-node/register ../../.erb/scripts/electron-rebuild.js",
-    "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"
-  },
-  "devDependencies": {
-    "electron": "22.3.1"
-  },
-  "license": "GPL-3.0"
+    "name": "feishin",
+    "version": "0.3.0",
+    "description": "",
+    "main": "./dist/main/main.js",
+    "author": {
+        "name": "jeffvli",
+        "url": "https://github.com/jeffvli/"
+    },
+    "scripts": {
+        "electron-rebuild": "node -r ts-node/register ../../.erb/scripts/electron-rebuild.js",
+        "link-modules": "node -r ts-node/register ../../.erb/scripts/link-modules.ts",
+        "postinstall": "npm run electron-rebuild && npm run link-modules"
+    },
+    "dependencies": {
+        "cheerio": "^1.0.0-rc.12",
+        "mpris-service": "^2.1.2",
+        "ws": "^8.13.0"
+    },
+    "devDependencies": {
+        "electron": "25.3.0"
+    },
+    "license": "GPL-3.0"
 }

src/__tests__/App.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { App } from '../renderer/app';
 
 describe('App', () => {
-  it('should render', () => {
-    expect(render(<App />)).toBeTruthy();
-  });
+    it('should render', () => {
+        expect(render(<App />)).toBeTruthy();
+    });
 });

src/main/features/core/index.ts

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

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

@@ -0,0 +1,209 @@
+import axios, { AxiosResponse } from 'axios';
+import { load } from 'cheerio';
+import {
+    LyricSource,
+    InternetProviderLyricResponse,
+    InternetProviderLyricSearchResponse,
+    LyricSearchQuery,
+} from '../../../../renderer/api/types';
+import { orderSearchResults } from './shared';
+
+const SEARCH_URL = 'https://genius.com/api/search/song';
+
+// Adapted from https://github.com/NyaomiDEV/Sunamu/blob/master/src/main/lyricproviders/genius.ts
+
+export interface GeniusResponse {
+    meta: Meta;
+    response: Response;
+}
+
+export interface Meta {
+    status: number;
+}
+
+export interface Response {
+    next_page: number;
+    sections: Section[];
+}
+
+export interface Section {
+    hits: Hit[];
+    type: string;
+}
+
+export interface Hit {
+    highlights: any[];
+    index: string;
+    result: Result;
+    type: string;
+}
+
+export interface Result {
+    _type: string;
+    annotation_count: number;
+    api_path: string;
+    artist_names: string;
+    featured_artists: any[];
+    full_title: string;
+    header_image_thumbnail_url: string;
+    header_image_url: string;
+    id: number;
+    instrumental: boolean;
+    language: string;
+    lyrics_owner_id: number;
+    lyrics_state: string;
+    lyrics_updated_at: number;
+    path: string;
+    primary_artist: PrimaryArtist;
+    pyongs_count: null;
+    relationships_index_url: string;
+    release_date_components: ReleaseDateComponents;
+    release_date_for_display: string;
+    release_date_with_abbreviated_month_for_display: string;
+    song_art_image_thumbnail_url: string;
+    song_art_image_url: string;
+    stats: Stats;
+    title: string;
+    title_with_featured: string;
+    updated_by_human_at: number;
+    url: string;
+}
+
+export interface PrimaryArtist {
+    _type: string;
+    api_path: string;
+    header_image_url: string;
+    id: number;
+    image_url: string;
+    index_character: string;
+    is_meme_verified: boolean;
+    is_verified: boolean;
+    name: string;
+    slug: string;
+    url: string;
+}
+
+export interface ReleaseDateComponents {
+    day: number;
+    month: number;
+    year: number;
+}
+
+export interface Stats {
+    hot: boolean;
+    unreviewed_annotations: number;
+}
+
+export async function getSearchResults(
+    params: LyricSearchQuery,
+): Promise<InternetProviderLyricSearchResponse[] | null> {
+    let result: AxiosResponse<GeniusResponse>;
+
+    const searchQuery = [params.artist, params.name].join(' ');
+
+    if (!searchQuery) {
+        return null;
+    }
+
+    try {
+        result = await axios.get(SEARCH_URL, {
+            params: {
+                per_page: '5',
+                q: searchQuery,
+            },
+        });
+    } catch (e) {
+        console.error('Genius search request got an error!', e);
+        return null;
+    }
+
+    const rawSongsResult = result.data.response?.sections?.[0]?.hits?.map((hit) => hit.result);
+
+    if (!rawSongsResult) return null;
+
+    const songResults: InternetProviderLyricSearchResponse[] = rawSongsResult.map((song) => {
+        return {
+            artist: song.artist_names,
+            id: song.url,
+            name: song.full_title,
+            source: LyricSource.GENIUS,
+        };
+    });
+
+    return orderSearchResults({ params, results: songResults });
+}
+
+async function getSongId(
+    params: LyricSearchQuery,
+): Promise<Omit<InternetProviderLyricResponse, 'lyrics'> | null> {
+    let result: AxiosResponse<GeniusResponse>;
+    try {
+        result = await axios.get(SEARCH_URL, {
+            params: {
+                per_page: '1',
+                q: `${params.artist} ${params.name}`,
+            },
+        });
+    } catch (e) {
+        console.error('Genius search request got an error!', e);
+        return null;
+    }
+
+    const hit = result.data.response?.sections?.[0]?.hits?.[0]?.result;
+
+    if (!hit) {
+        return null;
+    }
+
+    return {
+        artist: hit.artist_names,
+        id: hit.url,
+        name: hit.full_title,
+        source: LyricSource.GENIUS,
+    };
+}
+
+export async function getLyricsBySongId(url: string): Promise<string | null> {
+    let result: AxiosResponse<string, any>;
+    try {
+        result = await axios.get<string>(url, { responseType: 'text' });
+    } catch (e) {
+        console.error('Genius lyrics request got an error!', e);
+        return null;
+    }
+
+    const $ = load(result.data.split('<br/>').join('\n'));
+    const lyricsDiv = $('div.lyrics');
+
+    if (lyricsDiv.length > 0) return lyricsDiv.text().trim();
+
+    const lyricSections = $('div[class^=Lyrics__Container]')
+        .map((_, e) => $(e).text())
+        .toArray()
+        .join('\n');
+    return lyricSections;
+}
+
+export async function query(
+    params: LyricSearchQuery,
+): Promise<InternetProviderLyricResponse | null> {
+    const response = await getSongId(params);
+    if (!response) {
+        console.error('Could not find the song on Genius!');
+        return null;
+    }
+
+    const lyrics = await getLyricsBySongId(response.id);
+    if (!lyrics) {
+        console.error('Could not get lyrics on Genius!');
+        return null;
+    }
+
+    return {
+        artist: response.artist,
+        id: response.id,
+        lyrics,
+        name: response.name,
+        source: LyricSource.GENIUS,
+    };
+}

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

@@ -0,0 +1,149 @@
+import { ipcMain } from 'electron';
+import {
+    query as queryGenius,
+    getSearchResults as searchGenius,
+    getLyricsBySongId as getGenius,
+} from './genius';
+import {
+    query as queryLrclib,
+    getSearchResults as searchLrcLib,
+    getLyricsBySongId as getLrcLib,
+} from './lrclib';
+import {
+    query as queryNetease,
+    getSearchResults as searchNetease,
+    getLyricsBySongId as getNetease,
+} from './netease';
+import {
+    InternetProviderLyricResponse,
+    InternetProviderLyricSearchResponse,
+    LyricSearchQuery,
+    QueueSong,
+    LyricGetQuery,
+    LyricSource,
+} from '../../../../renderer/api/types';
+import { store } from '../settings/index';
+
+type SongFetcher = (params: LyricSearchQuery) => Promise<InternetProviderLyricResponse | null>;
+type SearchFetcher = (
+    params: LyricSearchQuery,
+) => Promise<InternetProviderLyricSearchResponse[] | null>;
+type GetFetcher = (id: string) => Promise<string | null>;
+
+type CachedLyrics = Record<LyricSource, InternetProviderLyricResponse>;
+
+const FETCHERS: Record<LyricSource, SongFetcher> = {
+    [LyricSource.GENIUS]: queryGenius,
+    [LyricSource.LRCLIB]: queryLrclib,
+    [LyricSource.NETEASE]: queryNetease,
+};
+
+const SEARCH_FETCHERS: Record<LyricSource, SearchFetcher> = {
+    [LyricSource.GENIUS]: searchGenius,
+    [LyricSource.LRCLIB]: searchLrcLib,
+    [LyricSource.NETEASE]: searchNetease,
+};
+
+const GET_FETCHERS: Record<LyricSource, GetFetcher> = {
+    [LyricSource.GENIUS]: getGenius,
+    [LyricSource.LRCLIB]: getLrcLib,
+    [LyricSource.NETEASE]: getNetease,
+};
+
+const MAX_CACHED_ITEMS = 10;
+
+const lyricCache = new Map<string, CachedLyrics>();
+
+const getRemoteLyrics = async (song: QueueSong) => {
+    const sources = store.get('lyrics', []) as LyricSource[];
+
+    const cached = lyricCache.get(song.id);
+
+    if (cached) {
+        for (const source of sources) {
+            const data = cached[source];
+            if (data) return data;
+        }
+    }
+
+    let lyricsFromSource = null;
+
+    for (const source of sources) {
+        const params = {
+            album: song.album || song.name,
+            artist: song.artistName,
+            duration: song.duration,
+            name: song.name,
+        };
+        const response = await FETCHERS[source](params);
+
+        if (response) {
+            const newResult = cached
+                ? {
+                      ...cached,
+                      [source]: response,
+                  }
+                : ({ [source]: response } as CachedLyrics);
+
+            if (lyricCache.size === MAX_CACHED_ITEMS && cached === undefined) {
+                const toRemove = lyricCache.keys().next().value;
+                lyricCache.delete(toRemove);
+            }
+
+            lyricCache.set(song.id, newResult);
+
+            lyricsFromSource = response;
+            break;
+        }
+    }
+
+    return lyricsFromSource;
+};
+
+const searchRemoteLyrics = async (params: LyricSearchQuery) => {
+    const sources = store.get('lyrics', []) as LyricSource[];
+
+    const results: Record<LyricSource, InternetProviderLyricSearchResponse[]> = {
+        [LyricSource.GENIUS]: [],
+        [LyricSource.LRCLIB]: [],
+        [LyricSource.NETEASE]: [],
+    };
+
+    for (const source of sources) {
+        const response = await SEARCH_FETCHERS[source](params);
+
+        if (response) {
+            response.forEach((result) => {
+                results[source].push(result);
+            });
+        }
+    }
+
+    return results;
+};
+
+const getRemoteLyricsById = async (params: LyricGetQuery): Promise<string | null> => {
+    const { remoteSongId, remoteSource } = params;
+    const response = await GET_FETCHERS[remoteSource](remoteSongId);
+
+    if (!response) {
+        return null;
+    }
+
+    return response;
+};
+
+ipcMain.handle('lyric-by-song', async (_event, song: QueueSong) => {
+    const lyric = await getRemoteLyrics(song);
+    return lyric;
+});
+
+ipcMain.handle('lyric-search', async (_event, params: LyricSearchQuery) => {
+    const lyricResults = await searchRemoteLyrics(params);
+    return lyricResults;
+});
+
+ipcMain.handle('lyric-by-remote-id', async (_event, params: LyricGetQuery) => {
+    const lyricResults = await getRemoteLyricsById(params);
+    return lyricResults;
+});

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

@@ -0,0 +1,119 @@
+// Credits to https://github.com/tranxuanthang/lrcget for API implementation
+import axios, { AxiosResponse } from 'axios';
+import {
+    InternetProviderLyricResponse,
+    InternetProviderLyricSearchResponse,
+    LyricSearchQuery,
+    LyricSource,
+} from '../../../../renderer/api/types';
+import { orderSearchResults } from './shared';
+
+const FETCH_URL = 'https://lrclib.net/api/get';
+const SEEARCH_URL = 'https://lrclib.net/api/search';
+
+const TIMEOUT_MS = 5000;
+
+export interface LrcLibSearchResponse {
+    albumName: string;
+    artistName: string;
+    id: number;
+    name: string;
+}
+
+export interface LrcLibTrackResponse {
+    albumName: string;
+    artistName: string;
+    duration: number;
+    id: number;
+    instrumental: boolean;
+    isrc: string;
+    lang: string;
+    name: string;
+    plainLyrics: string | null;
+    releaseDate: string;
+    spotifyId: string;
+    syncedLyrics: string | null;
+}
+
+export async function getSearchResults(
+    params: LyricSearchQuery,
+): Promise<InternetProviderLyricSearchResponse[] | null> {
+    let result: AxiosResponse<LrcLibSearchResponse[]>;
+
+    if (!params.name) {
+        return null;
+    }
+
+    try {
+        result = await axios.get<LrcLibSearchResponse[]>(SEEARCH_URL, {
+            params: {
+                q: params.name,
+            },
+        });
+    } catch (e) {
+        console.error('LrcLib search request got an error!', e);
+        return null;
+    }
+
+    if (!result.data) return null;
+
+    const songResults: InternetProviderLyricSearchResponse[] = result.data.map((song) => {
+        return {
+            artist: song.artistName,
+            id: String(song.id),
+            name: song.name,
+            source: LyricSource.LRCLIB,
+        };
+    });
+
+    return orderSearchResults({ params, results: songResults });
+}
+
+export async function getLyricsBySongId(songId: string): Promise<string | null> {
+    let result: AxiosResponse<LrcLibTrackResponse, any>;
+
+    try {
+        result = await axios.get<LrcLibTrackResponse>(`${FETCH_URL}/${songId}`);
+    } catch (e) {
+        console.error('LrcLib lyrics request got an error!', e);
+        return null;
+    }
+
+    return result.data.syncedLyrics || result.data.plainLyrics || null;
+}
+
+export async function query(
+    params: LyricSearchQuery,
+): Promise<InternetProviderLyricResponse | null> {
+    let result: AxiosResponse<LrcLibTrackResponse, any>;
+
+    try {
+        result = await axios.get<LrcLibTrackResponse>(FETCH_URL, {
+            params: {
+                album_name: params.album,
+                artist_name: params.artist,
+                duration: params.duration,
+                track_name: params.name,
+            },
+            timeout: TIMEOUT_MS,
+        });
+    } catch (e) {
+        console.error('LrcLib search request got an error!', e);
+        return null;
+    }
+
+    const lyrics = result.data.syncedLyrics || result.data.plainLyrics || null;
+
+    if (!lyrics) {
+        console.error(`Could not get lyrics on LrcLib!`);
+        return null;
+    }
+
+    return {
+        artist: result.data.artistName,
+        id: String(result.data.id),
+        lyrics,
+        name: result.data.name,
+        source: LyricSource.LRCLIB,
+    };
+}

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

@@ -0,0 +1,167 @@
+import axios, { AxiosResponse } from 'axios';
+import { LyricSource } from '../../../../renderer/api/types';
+import { orderSearchResults } from './shared';
+import type {
+    InternetProviderLyricResponse,
+    InternetProviderLyricSearchResponse,
+    LyricSearchQuery,
+} from '/@/renderer/api/types';
+
+const SEARCH_URL = 'https://music.163.com/api/search/get';
+const LYRICS_URL = 'https://music.163.com/api/song/lyric';
+
+// Adapted from https://github.com/NyaomiDEV/Sunamu/blob/master/src/main/lyricproviders/netease.ts
+
+export interface NetEaseResponse {
+    code: number;
+    result: Result;
+}
+
+export interface Result {
+    hasMore: boolean;
+    songCount: number;
+    songs: Song[];
+}
+
+export interface Song {
+    album: Album;
+    alias: string[];
+    artists: Artist[];
+    copyrightId: number;
+    duration: number;
+    fee: number;
+    ftype: number;
+    id: number;
+    mark: number;
+    mvid: number;
+    name: string;
+    rUrl: null;
+    rtype: number;
+    status: number;
+    transNames?: string[];
+}
+
+export interface Album {
+    artist: Artist;
+    copyrightId: number;
+    id: number;
+    mark: number;
+    name: string;
+    picId: number;
+    publishTime: number;
+    size: number;
+    status: number;
+    transNames?: string[];
+}
+
+export interface Artist {
+    albumSize: number;
+    alias: any[];
+    fansGroup: null;
+    id: number;
+    img1v1: number;
+    img1v1Url: string;
+    name: string;
+    picId: number;
+    picUrl: null;
+    trans: null;
+}
+
+export async function getSearchResults(
+    params: LyricSearchQuery,
+): Promise<InternetProviderLyricSearchResponse[] | null> {
+    let result: AxiosResponse<NetEaseResponse>;
+
+    const searchQuery = [params.artist, params.name].join(' ');
+
+    if (!searchQuery) {
+        return null;
+    }
+
+    try {
+        result = await axios.get(SEARCH_URL, {
+            params: {
+                limit: 5,
+                offset: 0,
+                s: searchQuery,
+                type: '1',
+            },
+        });
+    } catch (e) {
+        console.error('NetEase search request got an error!', e);
+        return null;
+    }
+
+    const rawSongsResult = result?.data.result?.songs;
+
+    if (!rawSongsResult) return null;
+
+    const songResults: InternetProviderLyricSearchResponse[] = rawSongsResult.map((song) => {
+        const artist = song.artists ? song.artists.map((artist) => artist.name).join(', ') : '';
+
+        return {
+            artist,
+            id: String(song.id),
+            name: song.name,
+            source: LyricSource.NETEASE,
+        };
+    });
+
+    return orderSearchResults({ params, results: songResults });
+}
+
+async function getMatchedLyrics(
+    params: LyricSearchQuery,
+): Promise<Omit<InternetProviderLyricResponse, 'lyrics'> | null> {
+    const results = await getSearchResults(params);
+
+    const firstMatch = results?.[0];
+
+    if (!firstMatch || (firstMatch?.score && firstMatch.score > 0.5)) {
+        return null;
+    }
+
+    return firstMatch;
+}
+
+export async function getLyricsBySongId(songId: string): Promise<string | null> {
+    let result: AxiosResponse<any, any>;
+    try {
+        result = await axios.get(LYRICS_URL, {
+            params: {
+                id: songId,
+                kv: '-1',
+                lv: '-1',
+            },
+        });
+    } catch (e) {
+        console.error('NetEase lyrics request got an error!', e);
+        return null;
+    }
+
+    return result.data.klyric?.lyric || result.data.lrc?.lyric;
+}
+
+export async function query(
+    params: LyricSearchQuery,
+): Promise<InternetProviderLyricResponse | null> {
+    const lyricsMatch = await getMatchedLyrics(params);
+    if (!lyricsMatch) {
+        console.error('Could not find the song on NetEase!');
+        return null;
+    }
+
+    const lyrics = await getLyricsBySongId(lyricsMatch.id);
+    if (!lyrics) {
+        console.error('Could not get lyrics on NetEase!');
+        return null;
+    }
+
+    return {
+        artist: lyricsMatch.artist,
+        id: lyricsMatch.id,
+        lyrics,
+        name: lyricsMatch.name,
+        source: LyricSource.NETEASE,
+    };
+}

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

@@ -0,0 +1,34 @@
+import Fuse from 'fuse.js';
+import {
+    InternetProviderLyricSearchResponse,
+    LyricSearchQuery,
+} from '../../../../renderer/api/types';
+
+export const orderSearchResults = (args: {
+    params: LyricSearchQuery;
+    results: InternetProviderLyricSearchResponse[];
+}) => {
+    const { params, results } = args;
+
+    const options: Fuse.IFuseOptions<InternetProviderLyricSearchResponse> = {
+        fieldNormWeight: 1,
+        includeScore: true,
+        keys: [
+            { getFn: (song) => song.name, name: 'name', weight: 3 },
+            { getFn: (song) => song.artist, name: 'artist' },
+        ],
+        threshold: 1.0,
+    };
+
+    const fuse = new Fuse(results, options);
+
+    const searchResults = fuse.search<InternetProviderLyricSearchResponse>({
+        ...(params.artist && { artist: params.artist }),
+        ...(params.name && { name: params.name }),
+    });
+
+    return searchResults.map((result) => ({
+        ...result.item,
+        score: result.score,
+    }));
+};

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

@@ -1,123 +1,220 @@
+import console from 'console';
 import { ipcMain } from 'electron';
-import { getMpvInstance } from '../../../main';
+import { getMainWindow, getMpvInstance } from '../../../main';
 import { PlayerData } from '/@/renderer/store';
 
 declare module 'node-mpv';
 
 function wait(timeout: number) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve('resolved');
-    }, timeout);
-  });
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve('resolved');
+        }, timeout);
+    });
 }
 
+ipcMain.handle('player-is-running', async () => {
+    return getMpvInstance()?.isRunning();
+});
+
+ipcMain.handle('player-clean-up', async () => {
+    getMpvInstance()?.stop();
+    getMpvInstance()?.clearPlaylist();
+});
+
 ipcMain.on('player-start', async () => {
-  await getMpvInstance()?.play();
+    await getMpvInstance()
+        ?.play()
+        .catch((err) => {
+            console.log('MPV failed to play', err);
+        });
 });
 
 // Starts the player
 ipcMain.on('player-play', async () => {
-  await getMpvInstance()?.play();
+    await getMpvInstance()
+        ?.play()
+        .catch((err) => {
+            console.log('MPV failed to play', err);
+        });
 });
 
 // Pauses the player
 ipcMain.on('player-pause', async () => {
-  await getMpvInstance()?.pause();
+    await getMpvInstance()
+        ?.pause()
+        .catch((err) => {
+            console.log('MPV failed to pause', err);
+        });
 });
 
 // Stops the player
 ipcMain.on('player-stop', async () => {
-  await getMpvInstance()?.stop();
+    await getMpvInstance()
+        ?.stop()
+        .catch((err) => {
+            console.log('MPV failed to stop', err);
+        });
 });
 
 // Goes to the next track in the playlist
 ipcMain.on('player-next', async () => {
-  await getMpvInstance()?.next();
+    await getMpvInstance()
+        ?.next()
+        .catch((err) => {
+            console.log('MPV failed to go to next', err);
+        });
 });
 
 // Goes to the previous track in the playlist
 ipcMain.on('player-previous', async () => {
-  await getMpvInstance()?.prev();
+    await getMpvInstance()
+        ?.prev()
+        .catch((err) => {
+            console.log('MPV failed to go to previous', err);
+        });
 });
 
 // Seeks forward or backward by the given amount of seconds
 ipcMain.on('player-seek', async (_event, time: number) => {
-  await getMpvInstance()?.seek(time);
+    await getMpvInstance()
+        ?.seek(time)
+        .catch((err) => {
+            console.log('MPV failed to seek', err);
+        });
 });
 
 // Seeks to the given time in seconds
 ipcMain.on('player-seek-to', async (_event, time: number) => {
-  await getMpvInstance()?.goToPosition(time);
+    await getMpvInstance()
+        ?.goToPosition(time)
+        .catch((err) => {
+            console.log(`MPV failed to seek to ${time}`, err);
+        });
 });
 
 // Sets the queue in position 0 and 1 to the given data. Used when manually starting a song or using the next/prev buttons
-ipcMain.on('player-set-queue', async (_event, data: PlayerData) => {
-  if (!data.queue.current && !data.queue.next) {
-    await getMpvInstance()?.clearPlaylist();
-    await getMpvInstance()?.pause();
-    return;
-  }
-
-  let complete = false;
-
-  while (!complete) {
-    try {
-      if (data.queue.current) {
-        await getMpvInstance()?.load(data.queue.current.streamUrl, 'replace');
-      }
-
-      if (data.queue.next) {
-        await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
-      }
-
-      complete = true;
-    } catch (err) {
-      console.error(err);
-      await wait(500);
+ipcMain.on('player-set-queue', async (_event, data: PlayerData, pause?: boolean) => {
+    if (!data.queue.current && !data.queue.next) {
+        await getMpvInstance()
+            ?.clearPlaylist()
+            .catch((err) => {
+                console.log('MPV failed to clear playlist', err);
+            });
+        await getMpvInstance()
+            ?.pause()
+            .catch((err) => {
+                console.log('MPV failed to pause', err);
+            });
+        return;
+    }
+
+    let complete = false;
+    let tryAttempts = 0;
+
+    while (!complete) {
+        if (tryAttempts > 3) {
+            getMainWindow()?.webContents.send('renderer-player-error', 'Failed to load song');
+            complete = true;
+        } else {
+            try {
+                if (data.queue.current) {
+                    await getMpvInstance()
+                        ?.load(data.queue.current.streamUrl, 'replace')
+                        .catch((err) => {
+                            console.log('MPV failed to load song', err);
+                        });
+                }
+
+                if (data.queue.next) {
+                    await getMpvInstance()
+                        ?.load(data.queue.next.streamUrl, 'append')
+                        .catch((err) => {
+                            console.log('MPV failed to load next song', err);
+                        });
+                }
+
+                complete = true;
+            } catch (err) {
+                console.error(err);
+                tryAttempts += 1;
+                await wait(500);
+            }
+        }
+    }
+
+    if (pause) {
+        await getMpvInstance()?.pause();
     }
-  }
 });
 
 // Replaces the queue in position 1 to the given data
 ipcMain.on('player-set-queue-next', async (_event, data: PlayerData) => {
-  const size = await getMpvInstance()?.getPlaylistSize();
+    const size = await getMpvInstance()
+        ?.getPlaylistSize()
+        .catch((err) => {
+            console.log('MPV failed to get playlist size', err);
+        });
 
-  if (!size) {
-    return;
-  }
+    if (!size) {
+        return;
+    }
 
-  if (size > 1) {
-    await getMpvInstance()?.playlistRemove(1);
-  }
+    if (size > 1) {
+        await getMpvInstance()
+            ?.playlistRemove(1)
+            .catch((err) => {
+                console.log('MPV failed to remove song from playlist', err);
+            });
+    }
 
-  if (data.queue.next) {
-    await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
-  }
+    if (data.queue.next) {
+        await getMpvInstance()
+            ?.load(data.queue.next.streamUrl, 'append')
+            .catch((err) => {
+                console.log('MPV failed to load next song', err);
+            });
+    }
 });
 
 // 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 getMpvInstance()?.playlistRemove(0);
+    // Always keep the current song as position 0 in the mpv queue
+    // This allows us to easily set update the next song in the queue without
+    // disturbing the currently playing song
+    await getMpvInstance()
+        ?.playlistRemove(0)
+        .catch((err) => {
+            console.log('MPV failed to remove song from playlist', err);
+        });
 
-  if (data.queue.next) {
-    await getMpvInstance()?.load(data.queue.next.streamUrl, 'append');
-  }
+    if (data.queue.next) {
+        await getMpvInstance()
+            ?.load(data.queue.next.streamUrl, 'append')
+            .catch((err) => {
+                console.log('MPV failed to load next song', err);
+            });
+    }
 });
 
 // Sets the volume to the given value (0-100)
 ipcMain.on('player-volume', async (_event, value: number) => {
-  await getMpvInstance()?.volume(value);
+    await getMpvInstance()
+        ?.volume(value)
+        .catch((err) => {
+            console.log('MPV failed to set volume', err);
+        });
 });
 
 // Toggles the mute status
-ipcMain.on('player-mute', async () => {
-  await getMpvInstance()?.mute();
+ipcMain.on('player-mute', async (_event, mute: boolean) => {
+    await getMpvInstance()
+        ?.mute(mute)
+        .catch((err) => {
+            console.log('MPV failed to toggle mute', err);
+        });
 });
 
-ipcMain.on('player-quit', async () => {
-  await getMpvInstance()?.stop();
+ipcMain.handle('player-get-time', async (): Promise<number | undefined> => {
+    return getMpvInstance()?.getTimePosition();
 });

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

@@ -2,26 +2,26 @@
 import { BrowserWindow, globalShortcut } from 'electron';
 
 export const enableMediaKeys = (window: BrowserWindow | null) => {
-  globalShortcut.register('MediaStop', () => {
-    window?.webContents.send('renderer-player-stop');
-  });
+    globalShortcut.register('MediaStop', () => {
+        window?.webContents.send('renderer-player-stop');
+    });
 
-  globalShortcut.register('MediaPlayPause', () => {
-    window?.webContents.send('renderer-player-play-pause');
-  });
+    globalShortcut.register('MediaPlayPause', () => {
+        window?.webContents.send('renderer-player-play-pause');
+    });
 
-  globalShortcut.register('MediaNextTrack', () => {
-    window?.webContents.send('renderer-player-next');
-  });
+    globalShortcut.register('MediaNextTrack', () => {
+        window?.webContents.send('renderer-player-next');
+    });
 
-  globalShortcut.register('MediaPreviousTrack', () => {
-    window?.webContents.send('renderer-player-previous');
-  });
+    globalShortcut.register('MediaPreviousTrack', () => {
+        window?.webContents.send('renderer-player-previous');
+    });
 };
 
 export const disableMediaKeys = () => {
-  globalShortcut.unregister('MediaStop');
-  globalShortcut.unregister('MediaPlayPause');
-  globalShortcut.unregister('MediaNextTrack');
-  globalShortcut.unregister('MediaPreviousTrack');
+    globalShortcut.unregister('MediaStop');
+    globalShortcut.unregister('MediaPlayPause');
+    globalShortcut.unregister('MediaNextTrack');
+    globalShortcut.unregister('MediaPreviousTrack');
 };

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

@@ -0,0 +1,625 @@
+import { Stats, promises } from 'fs';
+import { readFile } from 'fs/promises';
+import { IncomingMessage, Server, ServerResponse, createServer } from 'http';
+import { join } from 'path';
+import { deflate, gzip } from 'zlib';
+import axios from 'axios';
+import { app, ipcMain } from 'electron';
+import { Server as WsServer, WebSocketServer, WebSocket } from 'ws';
+import { ClientEvent, ServerEvent } from '../../../../remote/types';
+import { PlayerRepeat, SongUpdate } from '../../../../renderer/types';
+import { getMainWindow } from '../../../main';
+import { isLinux } from '../../../utils';
+
+let mprisPlayer: any | undefined;
+
+if (isLinux()) {
+    // eslint-disable-next-line global-require
+    mprisPlayer = require('../../linux/mpris').mprisPlayer;
+}
+
+interface RemoteConfig {
+    enabled: boolean;
+    password: string;
+    port: number;
+    username: string;
+}
+
+interface MimeType {
+    css: string;
+    html: string;
+    ico: string;
+    js: string;
+}
+
+interface StatefulWebSocket extends WebSocket {
+    alive: boolean;
+}
+
+let server: Server | undefined;
+let wsServer: WsServer<StatefulWebSocket> | undefined;
+
+const settings: RemoteConfig = {
+    enabled: false,
+    password: '',
+    port: 4333,
+    username: '',
+};
+
+type SendData = ServerEvent & {
+    client: StatefulWebSocket;
+};
+
+function send({ client, event, data }: SendData): void {
+    if (client.readyState === WebSocket.OPEN) {
+        client.send(JSON.stringify({ data, event }));
+    }
+}
+
+function broadcast(message: ServerEvent): void {
+    if (wsServer) {
+        for (const client of wsServer.clients) {
+            send({ client, ...message });
+        }
+    }
+}
+
+const shutdownServer = () => {
+    if (wsServer) {
+        wsServer.clients.forEach((client) => client.close(4000));
+        wsServer.close();
+        wsServer = undefined;
+    }
+
+    if (server) {
+        server.close();
+        server = undefined;
+    }
+};
+
+const MIME_TYPES: MimeType = {
+    css: 'text/css',
+    html: 'text/html; charset=UTF-8',
+    ico: 'image/x-icon',
+    js: 'application/javascript',
+};
+
+const PING_TIMEOUT_MS = 10000;
+const UP_TIMEOUT_MS = 5000;
+
+enum Encoding {
+    GZIP = 'gzip',
+    NONE = 'none',
+    ZLIB = 'deflate',
+}
+
+const GZIP_REGEX = /\bgzip\b/;
+const ZLIB_REGEX = /bdeflate\b/;
+
+let currentSong: SongUpdate = {
+    currentTime: 0,
+};
+
+const getEncoding = (encoding: string | string[]): Encoding => {
+    const encodingArray = Array.isArray(encoding) ? encoding : [encoding];
+
+    for (const code of encodingArray) {
+        if (code.match(GZIP_REGEX)) {
+            return Encoding.GZIP;
+        }
+        if (code.match(ZLIB_REGEX)) {
+            return Encoding.ZLIB;
+        }
+    }
+
+    return Encoding.NONE;
+};
+
+const cache = new Map<string, Map<Encoding, [number, Buffer]>>();
+
+function setOk(
+    res: ServerResponse,
+    mtimeMs: number,
+    extension: keyof MimeType,
+    encoding: Encoding,
+    data?: Buffer,
+) {
+    res.statusCode = data ? 200 : 304;
+
+    res.setHeader('Content-Type', MIME_TYPES[extension]);
+    res.setHeader('ETag', `"${mtimeMs}"`);
+    res.setHeader('Cache-Control', 'public');
+
+    if (encoding !== 'none') res.setHeader('Content-Encoding', encoding);
+    res.end(data);
+}
+
+async function serveFile(
+    req: IncomingMessage,
+    file: string,
+    extension: keyof MimeType,
+    res: ServerResponse,
+): Promise<void> {
+    const fileName = `${file}.${extension}`;
+    let path: string;
+
+    if (extension === 'ico') {
+        path = app.isPackaged
+            ? join(process.resourcesPath, 'assets', fileName)
+            : join(__dirname, '../../../../../assets', fileName);
+    } else {
+        path = app.isPackaged
+            ? join(__dirname, '../remote', fileName)
+            : join(__dirname, '../../../../../.erb/dll', fileName);
+    }
+
+    let stats: Stats;
+
+    try {
+        stats = await promises.stat(path);
+    } catch (error) {
+        res.statusCode = 404;
+        res.setHeader('Content-Type', 'text/plain');
+        res.end((error as Error).message);
+        // This is a resolve, even though it is an error, because we want specific (non 500) status
+        return Promise.resolve();
+    }
+
+    const encodings = req.headers['accept-encoding'] ?? '';
+    const selectedEncoding = getEncoding(encodings);
+
+    const ifMatch = req.headers['if-none-match'];
+
+    const fileInfo = cache.get(fileName);
+    let cached = fileInfo?.get(selectedEncoding);
+
+    if (cached && cached[0] !== stats.mtimeMs) {
+        cache.get(fileName)!.delete(selectedEncoding);
+        cached = undefined;
+    }
+
+    if (ifMatch && cached) {
+        const options = ifMatch.split(',');
+
+        for (const option of options) {
+            const mTime = Number(option.replaceAll('"', '').trim());
+
+            if (cached[0] === mTime) {
+                setOk(res, cached[0], extension, selectedEncoding);
+                return Promise.resolve();
+            }
+        }
+    }
+
+    if (!cached || cached[0] !== stats.mtimeMs) {
+        const content = await readFile(path);
+
+        switch (selectedEncoding) {
+            case Encoding.GZIP:
+                return new Promise((resolve, reject) => {
+                    gzip(content, (error, result) => {
+                        if (error) {
+                            reject(error);
+                            return;
+                        }
+
+                        const newEntry: [number, Buffer] = [stats.mtimeMs, result];
+
+                        if (fileInfo) {
+                            fileInfo.set(selectedEncoding, newEntry);
+                        } else {
+                            cache.set(fileName, new Map([[selectedEncoding, newEntry]]));
+                        }
+
+                        setOk(res, stats.mtimeMs, extension, selectedEncoding, result);
+                        resolve();
+                    });
+                });
+
+            case Encoding.ZLIB:
+                return new Promise((resolve, reject) => {
+                    deflate(content, (error, result) => {
+                        if (error) {
+                            reject(error);
+                            return;
+                        }
+
+                        const newEntry: [number, Buffer] = [stats.mtimeMs, result];
+
+                        if (fileInfo) {
+                            fileInfo.set(selectedEncoding, newEntry);
+                        } else {
+                            cache.set(fileName, new Map([[selectedEncoding, newEntry]]));
+                        }
+
+                        setOk(res, stats.mtimeMs, extension, selectedEncoding, result);
+                        resolve();
+                    });
+                });
+            default: {
+                const newEntry: [number, Buffer] = [stats.mtimeMs, content];
+
+                if (fileInfo) {
+                    fileInfo.set(selectedEncoding, newEntry);
+                } else {
+                    cache.set(fileName, new Map([[selectedEncoding, newEntry]]));
+                }
+
+                setOk(res, stats.mtimeMs, extension, selectedEncoding, content);
+                return Promise.resolve();
+            }
+        }
+    }
+
+    setOk(res, cached[0], extension, selectedEncoding, cached[1]);
+
+    return Promise.resolve();
+}
+
+function authorize(req: IncomingMessage): boolean {
+    if (settings.username || settings.password) {
+        // https://stackoverflow.com/questions/23616371/basic-http-authentication-with-node-and-express-4
+
+        const authorization = req.headers.authorization?.split(' ')[1] || '';
+        const [login, password] = Buffer.from(authorization, 'base64').toString().split(':');
+
+        return login === settings.username && password === settings.password;
+    }
+
+    return true;
+}
+
+const enableServer = (config: RemoteConfig): Promise<void> => {
+    return new Promise<void>((resolve, reject) => {
+        try {
+            if (server) {
+                server.close();
+            }
+
+            server = createServer({}, async (req, res) => {
+                if (!authorize(req)) {
+                    res.statusCode = 401;
+                    res.setHeader('WWW-Authenticate', 'Basic realm="401"');
+                    res.end('Authorization required');
+                    return;
+                }
+
+                try {
+                    switch (req.url) {
+                        case '/': {
+                            await serveFile(req, 'index', 'html', res);
+                            break;
+                        }
+                        case '/favicon.ico': {
+                            await serveFile(req, 'icon', 'ico', res);
+                            break;
+                        }
+                        case '/remote.css': {
+                            await serveFile(req, 'remote', 'css', res);
+                            break;
+                        }
+                        case '/remote.js': {
+                            await serveFile(req, 'remote', 'js', res);
+                            break;
+                        }
+                        default: {
+                            res.statusCode = 404;
+                            res.setHeader('Content-Type', 'text/plain');
+                            res.end('Not FOund');
+                        }
+                    }
+                } catch (error) {
+                    res.statusCode = 500;
+                    res.setHeader('Content-Type', 'text/plain');
+                    res.end((error as Error).message);
+                }
+            });
+
+            server.listen(config.port, resolve);
+            wsServer = new WebSocketServer({ server });
+
+            wsServer.on('connection', (ws, req) => {
+                if (!authorize(req)) {
+                    ws.close(4003);
+                    return;
+                }
+
+                ws.alive = true;
+
+                ws.on('error', console.error);
+
+                ws.on('message', (data) => {
+                    try {
+                        const json = JSON.parse(data.toString()) as ClientEvent;
+                        const event = json.event;
+
+                        switch (event) {
+                            case 'pause': {
+                                getMainWindow()?.webContents.send('renderer-player-pause');
+                                break;
+                            }
+                            case 'play': {
+                                getMainWindow()?.webContents.send('renderer-player-play');
+                                break;
+                            }
+                            case 'next': {
+                                getMainWindow()?.webContents.send('renderer-player-next');
+                                break;
+                            }
+                            case 'previous': {
+                                getMainWindow()?.webContents.send('renderer-player-previous');
+                                break;
+                            }
+                            case 'proxy': {
+                                const toFetch = currentSong.song?.imageUrl?.replaceAll(
+                                    /&(size|width|height=\d+)/g,
+                                    '',
+                                );
+
+                                if (!toFetch) return;
+
+                                axios
+                                    .get(toFetch, { responseType: 'arraybuffer' })
+                                    .then((resp) => {
+                                        if (ws.readyState === WebSocket.OPEN) {
+                                            send({
+                                                client: ws,
+                                                data: Buffer.from(resp.data, 'binary').toString(
+                                                    'base64',
+                                                ),
+                                                event: 'proxy',
+                                            });
+                                        }
+                                        return null;
+                                    })
+                                    .catch((error) => {
+                                        if (ws.readyState === WebSocket.OPEN) {
+                                            send({
+                                                client: ws,
+                                                data: error.message,
+                                                event: 'error',
+                                            });
+                                        }
+                                    });
+
+                                break;
+                            }
+                            case 'repeat': {
+                                getMainWindow()?.webContents.send('renderer-player-toggle-repeat');
+                                break;
+                            }
+                            case 'shuffle': {
+                                getMainWindow()?.webContents.send('renderer-player-toggle-shuffle');
+                                break;
+                            }
+                            case 'volume': {
+                                let volume = Number(json.volume);
+
+                                if (volume > 100) {
+                                    volume = 100;
+                                } else if (volume < 0) {
+                                    volume = 0;
+                                }
+
+                                currentSong.volume = volume;
+
+                                broadcast({ data: { volume }, event: 'song' });
+                                getMainWindow()?.webContents.send('request-volume', {
+                                    volume,
+                                });
+
+                                if (mprisPlayer) {
+                                    mprisPlayer.volume = volume / 100;
+                                }
+                                break;
+                            }
+                            case 'favorite': {
+                                const { favorite, id } = json;
+                                if (id && id === currentSong.song?.id) {
+                                    getMainWindow()?.webContents.send('request-favorite', {
+                                        favorite,
+                                        id,
+                                        serverId: currentSong.song.serverId,
+                                    });
+                                }
+                                break;
+                            }
+                            case 'rating': {
+                                const { rating, id } = json;
+                                if (id && id === currentSong.song?.id) {
+                                    getMainWindow()?.webContents.send('request-rating', {
+                                        id,
+                                        rating,
+                                        serverId: currentSong.song.serverId,
+                                    });
+                                }
+                                break;
+                            }
+                        }
+                    } catch (error) {
+                        console.error(error);
+                    }
+                });
+
+                ws.on('pong', () => {
+                    ws.alive = true;
+                });
+
+                ws.send(JSON.stringify({ data: currentSong, event: 'song' }));
+            });
+
+            const heartBeat = setInterval(() => {
+                wsServer?.clients.forEach((ws) => {
+                    if (!ws.alive) {
+                        ws.terminate();
+                        return;
+                    }
+
+                    ws.alive = false;
+                    ws.ping();
+                });
+            }, PING_TIMEOUT_MS);
+
+            wsServer.on('close', () => {
+                clearInterval(heartBeat);
+            });
+
+            setTimeout(() => {
+                reject(new Error('Server did not come up'));
+            }, UP_TIMEOUT_MS);
+        } catch (error) {
+            reject(error);
+            shutdownServer();
+        }
+    });
+};
+
+ipcMain.handle('remote-enable', async (_event, enabled: boolean) => {
+    settings.enabled = enabled;
+
+    if (enabled) {
+        try {
+            await enableServer(settings);
+        } catch (error) {
+            return (error as Error).message;
+        }
+    } else {
+        shutdownServer();
+    }
+
+    return null;
+});
+
+ipcMain.handle('remote-port', async (_event, port: number) => {
+    settings.port = port;
+});
+
+ipcMain.on('remote-password', (_event, password: string) => {
+    settings.password = password;
+    wsServer?.clients.forEach((client) => client.close(4002));
+});
+
+ipcMain.handle(
+    'remote-settings',
+    async (_event, enabled: boolean, port: number, username: string, password: string) => {
+        settings.enabled = enabled;
+        settings.password = password;
+        settings.port = port;
+        settings.username = username;
+
+        if (enabled) {
+            try {
+                await enableServer(settings);
+            } catch (error) {
+                return (error as Error).message;
+            }
+        } else {
+            shutdownServer();
+        }
+
+        return null;
+    },
+);
+
+ipcMain.on('remote-username', (_event, username: string) => {
+    settings.username = username;
+    wsServer?.clients.forEach((client) => client.close(4002));
+});
+
+ipcMain.on('update-favorite', (_event, favorite: boolean, serverId: string, ids: string[]) => {
+    if (currentSong.song?.serverId !== serverId) return;
+
+    const id = currentSong.song.id;
+
+    for (const songId of ids) {
+        if (songId === id) {
+            currentSong.song.userFavorite = favorite;
+            broadcast({ data: { favorite, id: songId }, event: 'favorite' });
+            return;
+        }
+    }
+});
+
+ipcMain.on('update-rating', (_event, rating: number, serverId: string, ids: string[]) => {
+    if (currentSong.song?.serverId !== serverId) return;
+
+    const id = currentSong.song.id;
+
+    for (const songId of ids) {
+        if (songId === id) {
+            currentSong.song.userRating = rating;
+            broadcast({ data: { id: songId, rating }, event: 'rating' });
+            return;
+        }
+    }
+});
+
+ipcMain.on('update-repeat', (_event, repeat: PlayerRepeat) => {
+    currentSong.repeat = repeat;
+    broadcast({ data: { repeat }, event: 'song' });
+});
+
+ipcMain.on('update-shuffle', (_event, shuffle: boolean) => {
+    currentSong.shuffle = shuffle;
+    broadcast({ data: { shuffle }, event: 'song' });
+});
+
+ipcMain.on('update-song', (_event, data: SongUpdate) => {
+    const { song, ...rest } = data;
+    const songChanged = song?.id !== currentSong.song?.id;
+
+    if (!song?.id) {
+        currentSong = {
+            ...currentSong,
+            ...data,
+            song: undefined,
+        };
+    } else {
+        currentSong = {
+            ...currentSong,
+            ...data,
+        };
+    }
+
+    if (songChanged) {
+        broadcast({ data: { ...rest, song: song || null }, event: 'song' });
+    } else {
+        broadcast({ data: rest, event: 'song' });
+    }
+});
+
+ipcMain.on('update-volume', (_event, volume: number) => {
+    currentSong.volume = volume;
+    broadcast({ data: { volume }, event: 'song' });
+});
+
+if (mprisPlayer) {
+    mprisPlayer.on('loopStatus', (event: string) => {
+        const repeat =
+            event === 'Playlist'
+                ? PlayerRepeat.ALL
+                : event === 'Track'
+                ? PlayerRepeat.ONE
+                : PlayerRepeat.NONE;
+
+        currentSong.repeat = repeat;
+        broadcast({ data: { repeat }, event: 'song' });
+    });
+
+    mprisPlayer.on('shuffle', (shuffle: boolean) => {
+        currentSong.shuffle = shuffle;
+        broadcast({ data: { shuffle }, event: 'song' });
+    });
+
+    mprisPlayer.on('volume', (vol: number) => {
+        let volume = Math.round(vol * 100);
+
+        if (volume > 100) {
+            volume = 100;
+        } else if (volume < 0) {
+            volume = 0;
+        }
+        currentSong.volume = volume;
+        broadcast({ data: { volume }, event: 'song' });
+    });
+}

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

@@ -1,12 +1,50 @@
-import { ipcMain } from 'electron';
 import Store from 'electron-store';
+import { ipcMain, safeStorage } from 'electron';
 
 export const store = new Store();
 
 ipcMain.handle('settings-get', (_event, data: { property: string }) => {
-  return store.get(`${data.property}`);
+    return store.get(`${data.property}`);
 });
 
 ipcMain.on('settings-set', (__event, data: { property: string; value: any }) => {
-  store.set(`${data.property}`, data.value);
+    store.set(`${data.property}`, data.value);
+});
+
+ipcMain.handle('password-get', (_event, server: string): string | null => {
+    if (safeStorage.isEncryptionAvailable()) {
+        const servers = store.get('server') as Record<string, string> | undefined;
+
+        if (!servers) {
+            return null;
+        }
+
+        const encrypted = servers[server];
+        if (!encrypted) return null;
+
+        const decrypted = safeStorage.decryptString(Buffer.from(encrypted, 'hex'));
+        return decrypted;
+    }
+
+    return null;
+});
+
+ipcMain.on('password-remove', (_event, server: string) => {
+    const passwords = store.get('server', {}) as Record<string, string>;
+    if (server in passwords) {
+        delete passwords[server];
+    }
+    store.set({ server: passwords });
+});
+
+ipcMain.handle('password-set', (_event, password: string, server: string) => {
+    if (safeStorage.isEncryptionAvailable()) {
+        const encrypted = safeStorage.encryptString(password);
+        const passwords = store.get('server', {}) as Record<string, string>;
+        passwords[server] = encrypted.toString('hex');
+        store.set({ server: passwords });
+
+        return true;
+    }
+    return false;
 });

src/main/features/linux/mpris.ts

@@ -1,168 +1,169 @@
 import { ipcMain } from 'electron';
 import Player from 'mpris-service';
-import { QueueSong, RelatedArtist } from '../../../renderer/api/types';
+import { PlayerRepeat, PlayerStatus, SongUpdate } from '../../../renderer/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'],
+    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();
+    process.exit();
 });
 
 mprisPlayer.on('stop', () => {
-  getMainWindow()?.webContents.send('renderer-player-stop');
-  mprisPlayer.playbackStatus = 'Paused';
+    getMainWindow()?.webContents.send('renderer-player-stop');
+    mprisPlayer.playbackStatus = 'Paused';
 });
 
 mprisPlayer.on('pause', () => {
-  getMainWindow()?.webContents.send('renderer-player-pause');
-  mprisPlayer.playbackStatus = 'Paused';
+    getMainWindow()?.webContents.send('renderer-player-pause');
+    mprisPlayer.playbackStatus = 'Paused';
 });
 
 mprisPlayer.on('play', () => {
-  getMainWindow()?.webContents.send('renderer-player-play');
-  mprisPlayer.playbackStatus = 'Playing';
+    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';
-  }
+    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');
+    getMainWindow()?.webContents.send('renderer-player-next');
 
-  if (mprisPlayer.playbackStatus !== 'Playing') {
-    mprisPlayer.playbackStatus = 'Playing';
-  }
+    if (mprisPlayer.playbackStatus !== 'Playing') {
+        mprisPlayer.playbackStatus = 'Playing';
+    }
 });
 
 mprisPlayer.on('previous', () => {
-  getMainWindow()?.webContents.send('renderer-player-previous');
+    getMainWindow()?.webContents.send('renderer-player-previous');
 
-  if (mprisPlayer.playbackStatus !== 'Playing') {
-    mprisPlayer.playbackStatus = Player.PLAYBACK_STATUS_PLAYING;
-  }
+    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('volume', (vol: number) => {
+    let volume = Math.round(vol * 100);
+
+    if (volume > 100) {
+        volume = 100;
+    } else if (volume < 0) {
+        volume = 0;
+    }
+
+    getMainWindow()?.webContents.send('request-volume', {
+        volume,
+    });
 });
 
 mprisPlayer.on('shuffle', (event: boolean) => {
-  getMainWindow()?.webContents.send('mpris-request-toggle-shuffle', { shuffle: event });
-  mprisPlayer.shuffle = event;
+    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;
+    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,
-  });
+    getMainWindow()?.webContents.send('request-position', {
+        position: event.position / 1e6,
+    });
 });
 
 mprisPlayer.on('seek', (event: number) => {
-  getMainWindow()?.webContents.send('mpris-request-seek', {
-    offset: event / 1e6,
-  });
+    getMainWindow()?.webContents.send('request-seek', {
+        offset: event / 1e6,
+    });
 });
 
 ipcMain.on('mpris-update-position', (_event, arg) => {
-  mprisPlayer.getPosition = () => arg * 1e6;
+    mprisPlayer.getPosition = () => arg * 1e6;
 });
 
 ipcMain.on('mpris-update-seek', (_event, arg) => {
-  mprisPlayer.seeked(arg * 1e6);
+    mprisPlayer.seeked(arg * 1e6);
 });
 
-ipcMain.on('mpris-update-volume', (_event, arg) => {
-  mprisPlayer.volume = Number(arg);
+ipcMain.on('update-volume', (_event, volume) => {
+    mprisPlayer.volume = Number(volume) / 100;
 });
 
-ipcMain.on('mpris-update-repeat', (_event, arg) => {
-  mprisPlayer.loopStatus = arg;
+const REPEAT_TO_MPRIS: Record<PlayerRepeat, string> = {
+    [PlayerRepeat.ALL]: 'Playlist',
+    [PlayerRepeat.ONE]: 'Track',
+    [PlayerRepeat.NONE]: 'None',
+};
+
+ipcMain.on('update-repeat', (_event, arg: PlayerRepeat) => {
+    mprisPlayer.loopStatus = REPEAT_TO_MPRIS[arg];
 });
 
-ipcMain.on('mpris-update-shuffle', (_event, arg) => {
-  mprisPlayer.shuffle = arg;
+ipcMain.on('update-shuffle', (_event, shuffle: boolean) => {
+    mprisPlayer.shuffle = shuffle;
 });
 
-ipcMain.on(
-  'mpris-update-song',
-  (
-    _event,
-    args: {
-      currentTime: number;
-      repeat: PlayerRepeat;
-      shuffle: PlayerShuffle;
-      song: QueueSong;
-      status: PlayerStatus;
-    },
-  ) => {
+ipcMain.on('update-song', (_event, args: SongUpdate) => {
     const { song, status, repeat, shuffle } = args || {};
 
     try {
-      mprisPlayer.playbackStatus = status;
+        mprisPlayer.playbackStatus = status === PlayerStatus.PLAYING ? 'Playing' : 'Paused';
 
-      if (repeat) {
-        mprisPlayer.loopStatus =
-          repeat === 'all' ? 'Playlist' : repeat === 'one' ? 'Track' : 'None';
-      }
+        if (repeat) {
+            mprisPlayer.loopStatus = REPEAT_TO_MPRIS[repeat];
+        }
 
-      if (shuffle) {
-        mprisPlayer.shuffle = shuffle;
-      }
+        if (shuffle) {
+            mprisPlayer.shuffle = shuffle;
+        }
 
-      if (!song) return;
+        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;
+        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,
-      };
+        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.map((artist) => artist.name)
+                : null,
+            'xesam:artist': song.artists?.length ? song.artists.map((artist) => 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);
+        console.log(err);
     }
-  },
-);
+});
+
+export { mprisPlayer };

src/main/main.ts

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

src/main/menu.ts

@@ -1,269 +1,279 @@
 import { app, Menu, shell, BrowserWindow, MenuItemConstructorOptions } from 'electron';
 
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
-  selector?: string;
-  submenu?: DarwinMenuItemConstructorOptions[] | Menu;
+    selector?: string;
+    submenu?: DarwinMenuItemConstructorOptions[] | Menu;
 }
 
 export default class MenuBuilder {
-  mainWindow: BrowserWindow;
+    mainWindow: BrowserWindow;
 
-  constructor(mainWindow: BrowserWindow) {
-    this.mainWindow = mainWindow;
-  }
-
-  buildMenu(): Menu {
-    if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
-      this.setupDevelopmentEnvironment();
+    constructor(mainWindow: BrowserWindow) {
+        this.mainWindow = mainWindow;
     }
 
-    const template =
-      process.platform === 'darwin' ? this.buildDarwinTemplate() : this.buildDefaultTemplate();
+    buildMenu(): Menu {
+        if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
+            this.setupDevelopmentEnvironment();
+        }
 
-    const menu = Menu.buildFromTemplate(template);
-    Menu.setApplicationMenu(menu);
+        const template =
+            process.platform === 'darwin'
+                ? this.buildDarwinTemplate()
+                : this.buildDefaultTemplate();
 
-    return menu;
-  }
+        const menu = Menu.buildFromTemplate(template);
+        Menu.setApplicationMenu(menu);
 
-  setupDevelopmentEnvironment(): void {
-    this.mainWindow.webContents.on('context-menu', (_, props) => {
-      const { x, y } = props;
+        return menu;
+    }
 
-      Menu.buildFromTemplate([
-        {
-          click: () => {
-            this.mainWindow.webContents.inspectElement(x, y);
-          },
-          label: 'Inspect element',
-        },
-      ]).popup({ window: this.mainWindow });
-    });
-  }
+    setupDevelopmentEnvironment(): void {
+        this.mainWindow.webContents.on('context-menu', (_, props) => {
+            const { x, y } = props;
 
-  buildDarwinTemplate(): MenuItemConstructorOptions[] {
-    const subMenuAbout: DarwinMenuItemConstructorOptions = {
-      label: 'Electron',
-      submenu: [
-        {
-          label: 'About ElectronReact',
-          selector: 'orderFrontStandardAboutPanel:',
-        },
-        { type: 'separator' },
-        { label: 'Services', submenu: [] },
-        { type: 'separator' },
-        {
-          accelerator: 'Command+H',
-          label: 'Hide ElectronReact',
-          selector: 'hide:',
-        },
-        {
-          accelerator: 'Command+Shift+H',
-          label: 'Hide Others',
-          selector: 'hideOtherApplications:',
-        },
-        { label: 'Show All', selector: 'unhideAllApplications:' },
-        { type: 'separator' },
-        {
-          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:' },
-        { type: 'separator' },
-        { accelerator: 'Command+X', label: 'Cut', selector: 'cut:' },
-        { accelerator: 'Command+C', label: 'Copy', selector: 'copy:' },
-        { accelerator: 'Command+V', label: 'Paste', selector: 'paste:' },
-        {
-          accelerator: 'Command+A',
-          label: 'Select All',
-          selector: 'selectAll:',
-        },
-      ],
-    };
-    const subMenuViewDev: MenuItemConstructorOptions = {
-      label: 'View',
-      submenu: [
-        {
-          accelerator: 'Command+R',
-          click: () => {
-            this.mainWindow.webContents.reload();
-          },
-          label: 'Reload',
-        },
-        {
-          accelerator: 'Ctrl+Command+F',
-          click: () => {
-            this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-          },
-          label: 'Toggle Full Screen',
-        },
-        {
-          accelerator: 'Alt+Command+I',
-          click: () => {
-            this.mainWindow.webContents.toggleDevTools();
-          },
-          label: 'Toggle Developer Tools',
-        },
-      ],
-    };
-    const subMenuViewProd: MenuItemConstructorOptions = {
-      label: 'View',
-      submenu: [
-        {
-          accelerator: 'Ctrl+Command+F',
-          click: () => {
-            this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-          },
-          label: 'Toggle Full Screen',
-        },
-      ],
-    };
-    const subMenuWindow: DarwinMenuItemConstructorOptions = {
-      label: 'Window',
-      submenu: [
-        {
-          accelerator: 'Command+M',
-          label: 'Minimize',
-          selector: 'performMiniaturize:',
-        },
-        { accelerator: 'Command+W', label: 'Close', selector: 'performClose:' },
-        { type: 'separator' },
-        { label: 'Bring All to Front', selector: 'arrangeInFront:' },
-      ],
-    };
-    const subMenuHelp: MenuItemConstructorOptions = {
-      label: 'Help',
-      submenu: [
-        {
-          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://www.electronjs.org/community');
-          },
-          label: 'Community Discussions',
-        },
-        {
-          click() {
-            shell.openExternal('https://github.com/electron/electron/issues');
-          },
-          label: 'Search Issues',
-        },
-      ],
-    };
-
-    const subMenuView =
-      process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true'
-        ? subMenuViewDev
-        : subMenuViewProd;
-
-    return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
-  }
-
-  buildDefaultTemplate() {
-    const templateDefault = [
-      {
-        label: '&File',
-        submenu: [
-          {
-            accelerator: 'Ctrl+O',
-            label: '&Open',
-          },
-          {
-            accelerator: 'Ctrl+W',
-            click: () => {
-              this.mainWindow.close();
-            },
-            label: '&Close',
-          },
-        ],
-      },
-      {
-        label: '&View',
-        submenu:
-          process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true'
-            ? [
+            Menu.buildFromTemplate([
                 {
-                  accelerator: 'Ctrl+R',
-                  click: () => {
-                    this.mainWindow.webContents.reload();
-                  },
-                  label: '&Reload',
+                    click: () => {
+                        this.mainWindow.webContents.inspectElement(x, y);
+                    },
+                    label: 'Inspect element',
+                },
+            ]).popup({ window: this.mainWindow });
+        });
+    }
+
+    buildDarwinTemplate(): MenuItemConstructorOptions[] {
+        const subMenuAbout: DarwinMenuItemConstructorOptions = {
+            label: 'Electron',
+            submenu: [
+                {
+                    label: 'About ElectronReact',
+                    selector: 'orderFrontStandardAboutPanel:',
+                },
+                { type: 'separator' },
+                { label: 'Services', submenu: [] },
+                { type: 'separator' },
+                {
+                    accelerator: 'Command+H',
+                    label: 'Hide ElectronReact',
+                    selector: 'hide:',
                 },
                 {
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-                  },
-                  label: 'Toggle &Full Screen',
+                    accelerator: 'Command+Shift+H',
+                    label: 'Hide Others',
+                    selector: 'hideOtherApplications:',
+                },
+                { label: 'Show All', selector: 'unhideAllApplications:' },
+                { type: 'separator' },
+                {
+                    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:' },
+                { type: 'separator' },
+                { accelerator: 'Command+X', label: 'Cut', selector: 'cut:' },
+                { accelerator: 'Command+C', label: 'Copy', selector: 'copy:' },
+                { accelerator: 'Command+V', label: 'Paste', selector: 'paste:' },
+                {
+                    accelerator: 'Command+A',
+                    label: 'Select All',
+                    selector: 'selectAll:',
+                },
+            ],
+        };
+        const subMenuViewDev: MenuItemConstructorOptions = {
+            label: 'View',
+            submenu: [
+                {
+                    accelerator: 'Command+R',
+                    click: () => {
+                        this.mainWindow.webContents.reload();
+                    },
+                    label: 'Reload',
                 },
                 {
-                  accelerator: 'Alt+Ctrl+I',
-                  click: () => {
-                    this.mainWindow.webContents.toggleDevTools();
-                  },
-                  label: 'Toggle &Developer Tools',
+                    accelerator: 'Ctrl+Command+F',
+                    click: () => {
+                        this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
+                    },
+                    label: 'Toggle Full Screen',
                 },
-              ]
-            : [
                 {
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-                  },
-                  label: 'Toggle &Full Screen',
+                    accelerator: 'Alt+Command+I',
+                    click: () => {
+                        this.mainWindow.webContents.toggleDevTools();
+                    },
+                    label: 'Toggle Developer Tools',
                 },
-              ],
-      },
-      {
-        label: 'Help',
-        submenu: [
-          {
-            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://www.electronjs.org/community');
-            },
-            label: 'Community Discussions',
-          },
-          {
-            click() {
-              shell.openExternal('https://github.com/electron/electron/issues');
-            },
-            label: 'Search Issues',
-          },
-        ],
-      },
-    ];
+            ],
+        };
+        const subMenuViewProd: MenuItemConstructorOptions = {
+            label: 'View',
+            submenu: [
+                {
+                    accelerator: 'Ctrl+Command+F',
+                    click: () => {
+                        this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
+                    },
+                    label: 'Toggle Full Screen',
+                },
+            ],
+        };
+        const subMenuWindow: DarwinMenuItemConstructorOptions = {
+            label: 'Window',
+            submenu: [
+                {
+                    accelerator: 'Command+M',
+                    label: 'Minimize',
+                    selector: 'performMiniaturize:',
+                },
+                { accelerator: 'Command+W', label: 'Close', selector: 'performClose:' },
+                { type: 'separator' },
+                { label: 'Bring All to Front', selector: 'arrangeInFront:' },
+            ],
+        };
+        const subMenuHelp: MenuItemConstructorOptions = {
+            label: 'Help',
+            submenu: [
+                {
+                    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://www.electronjs.org/community');
+                    },
+                    label: 'Community Discussions',
+                },
+                {
+                    click() {
+                        shell.openExternal('https://github.com/electron/electron/issues');
+                    },
+                    label: 'Search Issues',
+                },
+            ],
+        };
 
-    return templateDefault;
-  }
+        const subMenuView =
+            process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true'
+                ? subMenuViewDev
+                : subMenuViewProd;
+
+        return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
+    }
+
+    buildDefaultTemplate() {
+        const templateDefault = [
+            {
+                label: '&File',
+                submenu: [
+                    {
+                        accelerator: 'Ctrl+O',
+                        label: '&Open',
+                    },
+                    {
+                        accelerator: 'Ctrl+W',
+                        click: () => {
+                            this.mainWindow.close();
+                        },
+                        label: '&Close',
+                    },
+                ],
+            },
+            {
+                label: '&View',
+                submenu:
+                    process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true'
+                        ? [
+                              {
+                                  accelerator: 'Ctrl+R',
+                                  click: () => {
+                                      this.mainWindow.webContents.reload();
+                                  },
+                                  label: '&Reload',
+                              },
+                              {
+                                  accelerator: 'F11',
+                                  click: () => {
+                                      this.mainWindow.setFullScreen(
+                                          !this.mainWindow.isFullScreen(),
+                                      );
+                                  },
+                                  label: 'Toggle &Full Screen',
+                              },
+                              {
+                                  accelerator: 'Alt+Ctrl+I',
+                                  click: () => {
+                                      this.mainWindow.webContents.toggleDevTools();
+                                  },
+                                  label: 'Toggle &Developer Tools',
+                              },
+                          ]
+                        : [
+                              {
+                                  accelerator: 'F11',
+                                  click: () => {
+                                      this.mainWindow.setFullScreen(
+                                          !this.mainWindow.isFullScreen(),
+                                      );
+                                  },
+                                  label: 'Toggle &Full Screen',
+                              },
+                          ],
+            },
+            {
+                label: 'Help',
+                submenu: [
+                    {
+                        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://www.electronjs.org/community');
+                        },
+                        label: 'Community Discussions',
+                    },
+                    {
+                        click() {
+                            shell.openExternal('https://github.com/electron/electron/issues');
+                        },
+                        label: 'Search Issues',
+                    },
+                ],
+            },
+        ];
+
+        return templateDefault;
+    }
 }

src/main/preload.ts

@@ -2,16 +2,20 @@ import { contextBridge } from 'electron';
 import { browser } from './preload/browser';
 import { ipc } from './preload/ipc';
 import { localSettings } from './preload/local-settings';
+import { lyrics } from './preload/lyrics';
 import { mpris } from './preload/mpris';
 import { mpvPlayer, mpvPlayerListener } from './preload/mpv-player';
+import { remote } from './preload/remote';
 import { utils } from './preload/utils';
 
 contextBridge.exposeInMainWorld('electron', {
-  browser,
-  ipc,
-  localSettings,
-  mpris,
-  mpvPlayer,
-  mpvPlayerListener,
-  utils,
+    browser,
+    ipc,
+    localSettings,
+    lyrics,
+    mpris,
+    mpvPlayer,
+    mpvPlayerListener,
+    remote,
+    utils,
 });

src/main/preload/browser.ts

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

src/main/preload/ipc.ts

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

src/main/preload/local-settings.ts

@@ -1,32 +1,54 @@
-import { ipcRenderer } from 'electron';
 import Store from 'electron-store';
+import { ipcRenderer, webFrame } from 'electron';
 
 const store = new Store();
 
 const set = (property: string, value: string | Record<string, unknown> | boolean | string[]) => {
-  store.set(`${property}`, value);
+    store.set(`${property}`, value);
 };
 
 const get = (property: string) => {
-  return store.get(`${property}`);
+    return store.get(`${property}`);
 };
 
 const restart = () => {
-  ipcRenderer.send('app-restart');
+    ipcRenderer.send('app-restart');
 };
 
 const enableMediaKeys = () => {
-  ipcRenderer.send('global-media-keys-enable');
+    ipcRenderer.send('global-media-keys-enable');
 };
 
 const disableMediaKeys = () => {
-  ipcRenderer.send('global-media-keys-disable');
+    ipcRenderer.send('global-media-keys-disable');
+};
+
+const passwordGet = async (server: string): Promise<string | null> => {
+    return ipcRenderer.invoke('password-get', server);
+};
+
+const passwordRemove = (server: string) => {
+    ipcRenderer.send('password-remove', server);
+};
+
+const passwordSet = async (password: string, server: string): Promise<boolean> => {
+    return ipcRenderer.invoke('password-set', password, server);
+};
+
+const setZoomFactor = (zoomFactor: number) => {
+    webFrame.setZoomFactor(zoomFactor / 100);
 };
 
 export const localSettings = {
-  disableMediaKeys,
-  enableMediaKeys,
-  get,
-  restart,
-  set,
+    disableMediaKeys,
+    enableMediaKeys,
+    get,
+    passwordGet,
+    passwordRemove,
+    passwordSet,
+    restart,
+    set,
+    setZoomFactor,
 };
+
+export type LocalSettings = typeof localSettings;

src/main/preload/lyrics.ts

@@ -0,0 +1,33 @@
+import { ipcRenderer } from 'electron';
+import {
+    InternetProviderLyricSearchResponse,
+    LyricGetQuery,
+    LyricSearchQuery,
+    LyricSource,
+    QueueSong,
+} from '/@/renderer/api/types';
+
+const getRemoteLyricsBySong = (song: QueueSong) => {
+    const result = ipcRenderer.invoke('lyric-by-song', song);
+    return result;
+};
+
+const searchRemoteLyrics = (
+    params: LyricSearchQuery,
+): Promise<Record<LyricSource, InternetProviderLyricSearchResponse[]>> => {
+    const result = ipcRenderer.invoke('lyric-search', params);
+    return result;
+};
+
+const getRemoteLyricsByRemoteId = (id: LyricGetQuery) => {
+    const result = ipcRenderer.invoke('lyric-by-remote-id', id);
+    return result;
+};
+
+export const lyrics = {
+    getRemoteLyricsByRemoteId,
+    getRemoteLyricsBySong,
+    searchRemoteLyrics,
+};
+
+export type Lyrics = typeof lyrics;

src/main/preload/mpris.ts

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

src/main/preload/mpv-player.ts

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

src/main/preload/remote.ts

@@ -0,0 +1,101 @@
+import { IpcRendererEvent, ipcRenderer } from 'electron';
+import { SongUpdate } from '/@/renderer/types';
+
+const requestFavorite = (
+    cb: (
+        event: IpcRendererEvent,
+        data: { favorite: boolean; id: string; serverId: string },
+    ) => void,
+) => {
+    ipcRenderer.on('request-favorite', cb);
+};
+
+const requestPosition = (cb: (event: IpcRendererEvent, data: { position: number }) => void) => {
+    ipcRenderer.on('request-position', cb);
+};
+
+const requestRating = (
+    cb: (event: IpcRendererEvent, data: { id: string; rating: number; serverId: string }) => void,
+) => {
+    ipcRenderer.on('request-rating', cb);
+};
+
+const requestSeek = (cb: (event: IpcRendererEvent, data: { offset: number }) => void) => {
+    ipcRenderer.on('request-seek', cb);
+};
+
+const requestVolume = (cb: (event: IpcRendererEvent, data: { volume: number }) => void) => {
+    ipcRenderer.on('request-volume', cb);
+};
+
+const setRemoteEnabled = (enabled: boolean): Promise<string | null> => {
+    const result = ipcRenderer.invoke('remote-enable', enabled);
+    return result;
+};
+
+const setRemotePort = (port: number): Promise<string | null> => {
+    const result = ipcRenderer.invoke('remote-port', port);
+    return result;
+};
+
+const updateFavorite = (favorite: boolean, serverId: string, ids: string[]) => {
+    ipcRenderer.send('update-favorite', favorite, serverId, ids);
+};
+
+const updatePassword = (password: string) => {
+    ipcRenderer.send('remote-password', password);
+};
+
+const updateSetting = (
+    enabled: boolean,
+    port: number,
+    username: string,
+    password: string,
+): Promise<string | null> => {
+    return ipcRenderer.invoke('remote-settings', enabled, port, username, password);
+};
+
+const updateRating = (rating: number, serverId: string, ids: string[]) => {
+    ipcRenderer.send('update-rating', rating, serverId, ids);
+};
+
+const updateRepeat = (repeat: string) => {
+    ipcRenderer.send('update-repeat', repeat);
+};
+
+const updateShuffle = (shuffle: boolean) => {
+    ipcRenderer.send('update-shuffle', shuffle);
+};
+
+const updateSong = (args: SongUpdate) => {
+    ipcRenderer.send('update-song', args);
+};
+
+const updateUsername = (username: string) => {
+    ipcRenderer.send('remote-username', username);
+};
+
+const updateVolume = (volume: number) => {
+    ipcRenderer.send('update-volume', volume);
+};
+
+export const remote = {
+    requestFavorite,
+    requestPosition,
+    requestRating,
+    requestSeek,
+    requestVolume,
+    setRemoteEnabled,
+    setRemotePort,
+    updateFavorite,
+    updatePassword,
+    updateRating,
+    updateRepeat,
+    updateSetting,
+    updateShuffle,
+    updateSong,
+    updateUsername,
+    updateVolume,
+};
+
+export type Remote = typeof remote;

src/main/preload/utils.ts

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

src/main/utils.ts

@@ -6,26 +6,47 @@ import { URL } from 'url';
 export let resolveHtmlPath: (htmlFileName: string) => string;
 
 if (process.env.NODE_ENV === 'development') {
-  const port = process.env.PORT || 4343;
-  resolveHtmlPath = (htmlFileName: string) => {
-    const url = new URL(`http://localhost:${port}`);
-    url.pathname = htmlFileName;
-    return url.href;
-  };
+    const port = process.env.PORT || 4343;
+    resolveHtmlPath = (htmlFileName: string) => {
+        const url = new URL(`http://localhost:${port}`);
+        url.pathname = htmlFileName;
+        return url.href;
+    };
 } else {
-  resolveHtmlPath = (htmlFileName: string) => {
-    return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
-  };
+    resolveHtmlPath = (htmlFileName: string) => {
+        return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
+    };
 }
 
 export const isMacOS = () => {
-  return process.platform === 'darwin';
+    return process.platform === 'darwin';
 };
 
 export const isWindows = () => {
-  return process.platform === 'win32';
+    return process.platform === 'win32';
 };
 
 export const isLinux = () => {
-  return process.platform === 'linux';
+    return process.platform === 'linux';
+};
+
+export const hotkeyToElectronAccelerator = (hotkey: string) => {
+    let accelerator = hotkey;
+
+    const replacements = {
+        mod: 'CmdOrCtrl',
+        numpad: 'num',
+        numpadadd: 'numadd',
+        numpaddecimal: 'numdec',
+        numpaddivide: 'numdiv',
+        numpadenter: 'numenter',
+        numpadmultiply: 'nummult',
+        numpadsubtract: 'numsub',
+    };
+
+    Object.keys(replacements).forEach((key) => {
+        accelerator = accelerator.replace(key, replacements[key as keyof typeof replacements]);
+    });
+
+    return accelerator;
 };

src/remote/app.tsx

@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+import { MantineProvider } from '@mantine/core';
+import './styles/global.scss';
+import { useIsDark, useReconnect } from '/@/remote/store';
+import { Shell } from '/@/remote/components/shell';
+
+export const App = () => {
+    const isDark = useIsDark();
+    const reconnect = useReconnect();
+
+    useEffect(() => {
+        reconnect();
+    }, [reconnect]);
+
+    return (
+        <MantineProvider
+            withGlobalStyles
+            withNormalizeCSS
+            theme={{
+                colorScheme: isDark ? 'dark' : 'light',
+                components: {
+                    AppShell: {
+                        styles: {
+                            body: {
+                                height: '100vh',
+                                overflow: 'scroll',
+                            },
+                        },
+                    },
+                    Modal: {
+                        styles: {
+                            body: {
+                                background: 'var(--modal-bg)',
+                                height: '100vh',
+                            },
+                            close: { marginRight: '0.5rem' },
+                            content: { borderRadius: '5px' },
+                            header: {
+                                background: 'var(--modal-header-bg)',
+                                paddingBottom: '1rem',
+                            },
+                            title: { fontSize: 'medium', fontWeight: 500 },
+                        },
+                    },
+                },
+                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,
+                },
+                other: {},
+                spacing: {
+                    lg: '2rem',
+                    md: '1rem',
+                    sm: '0.5rem',
+                    xl: '4rem',
+                    xs: '0rem',
+                },
+            }}
+        >
+            <Shell />
+        </MantineProvider>
+    );
+};

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

@@ -0,0 +1,20 @@
+import { CiImageOff, CiImageOn } from 'react-icons/ci';
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import { useShowImage, useToggleShowImage } from '/@/remote/store';
+
+export const ImageButton = () => {
+    const showImage = useShowImage();
+    const toggleImage = useToggleShowImage();
+
+    return (
+        <RemoteButton
+            mr={5}
+            size="xl"
+            tooltip={showImage ? 'Hide Image' : 'Show Image'}
+            variant="default"
+            onClick={() => toggleImage()}
+        >
+            {showImage ? <CiImageOff size={30} /> : <CiImageOn size={30} />}
+        </RemoteButton>
+    );
+};

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

@@ -0,0 +1,21 @@
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import { useConnected, useReconnect } from '/@/remote/store';
+import { RiRestartLine } from 'react-icons/ri';
+
+export const ReconnectButton = () => {
+    const connected = useConnected();
+    const reconnect = useReconnect();
+
+    return (
+        <RemoteButton
+            $active={!connected}
+            mr={5}
+            size="xl"
+            tooltip={connected ? 'Reconnect' : 'Not connected. Reconnect.'}
+            variant="default"
+            onClick={() => reconnect()}
+        >
+            <RiRestartLine size={30} />
+        </RemoteButton>
+    );
+};

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

@@ -0,0 +1,60 @@
+import { Ref, forwardRef } from 'react';
+import { Button, type ButtonProps as MantineButtonProps } from '@mantine/core';
+import { Tooltip } from '/@/renderer/components/tooltip';
+import styled from 'styled-components';
+
+interface StyledButtonProps extends MantineButtonProps {
+    $active?: boolean;
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    ref: Ref<HTMLButtonElement>;
+}
+
+export interface ButtonProps extends StyledButtonProps {
+    tooltip: string;
+}
+
+const StyledButton = styled(Button)<StyledButtonProps>`
+    svg {
+        display: flex;
+        fill: ${({ $active: active }) =>
+            active ? 'var(--primary-color)' : 'var(--playerbar-btn-fg)'};
+        stroke: var(--playerbar-btn-fg);
+    }
+
+    &:hover {
+        background: var(--playerbar-btn-bg-hover);
+
+        svg {
+            fill: ${({ $active: active }) =>
+                active
+                    ? 'var(--primary-color) !important'
+                    : 'var(--playerbar-btn-fg-hover) !important'};
+        }
+    }
+`;
+
+export const RemoteButton = forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ children, tooltip, ...props }: ButtonProps, ref) => {
+        return (
+            <Tooltip
+                withinPortal
+                label={tooltip}
+            >
+                <StyledButton
+                    {...props}
+                    ref={ref}
+                >
+                    {children}
+                </StyledButton>
+            </Tooltip>
+        );
+    },
+);
+
+RemoteButton.defaultProps = {
+    $active: false,
+    onClick: undefined,
+    onMouseDown: undefined,
+};

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

@@ -0,0 +1,27 @@
+import { useIsDark, useToggleDark } from '/@/remote/store';
+import { RiMoonLine, RiSunLine } from 'react-icons/ri';
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import { AppTheme } from '/@/renderer/themes/types';
+import { useEffect } from 'react';
+
+export const ThemeButton = () => {
+    const isDark = useIsDark();
+    const toggleDark = useToggleDark();
+
+    useEffect(() => {
+        const targetTheme: AppTheme = isDark ? AppTheme.DEFAULT_DARK : AppTheme.DEFAULT_LIGHT;
+        document.body.setAttribute('data-theme', targetTheme);
+    }, [isDark]);
+
+    return (
+        <RemoteButton
+            mr={5}
+            size="xl"
+            tooltip="Toggle Theme"
+            variant="default"
+            onClick={() => toggleDark()}
+        >
+            {isDark ? <RiSunLine size={30} /> : <RiMoonLine size={30} />}
+        </RemoteButton>
+    );
+};

src/remote/components/remote-container.tsx

@@ -0,0 +1,175 @@
+import { useCallback } from 'react';
+import { Group, Image, Rating, Text, Title } from '@mantine/core';
+import { useInfo, useSend, useShowImage } from '/@/remote/store';
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import formatDuration from 'format-duration';
+import debounce from 'lodash/debounce';
+import {
+    RiHeartLine,
+    RiPauseFill,
+    RiPlayFill,
+    RiRepeat2Line,
+    RiRepeatOneLine,
+    RiShuffleFill,
+    RiSkipBackFill,
+    RiSkipForwardFill,
+    RiVolumeUpFill,
+} from 'react-icons/ri';
+import { PlayerRepeat, PlayerStatus } from '/@/renderer/types';
+import { WrapperSlider } from '/@/remote/components/wrapped-slider';
+import { Tooltip } from '/@/renderer/components/tooltip';
+
+export const RemoteContainer = () => {
+    const { repeat, shuffle, song, status, volume } = useInfo();
+    const send = useSend();
+    const showImage = useShowImage();
+
+    const id = song?.id;
+
+    const setRating = useCallback(
+        (rating: number) => {
+            send({ event: 'rating', id: id!, rating });
+        },
+        [send, id],
+    );
+
+    const debouncedSetRating = debounce(setRating, 400);
+
+    return (
+        <>
+            {song && (
+                <>
+                    <Title order={1}>{song.name}</Title>
+                    <Group align="flex-end">
+                        <Title order={2}>Album: {song.album}</Title>
+                        <Title order={2}>Artist: {song.artistName}</Title>
+                    </Group>
+                    <Group position="apart">
+                        <Title order={3}>Duration: {formatDuration(song.duration * 1000)}</Title>
+                        {song.releaseDate && (
+                            <Title order={3}>
+                                Released: {new Date(song.releaseDate).toLocaleDateString()}
+                            </Title>
+                        )}
+                        <Title order={3}>Plays: {song.playCount}</Title>
+                    </Group>
+                </>
+            )}
+            <Group
+                grow
+                spacing={0}
+            >
+                <RemoteButton
+                    tooltip="Previous track"
+                    variant="default"
+                    onClick={() => send({ event: 'previous' })}
+                >
+                    <RiSkipBackFill size={25} />
+                </RemoteButton>
+                <RemoteButton
+                    tooltip={status === PlayerStatus.PLAYING ? 'Pause' : 'Play'}
+                    variant="default"
+                    onClick={() => {
+                        if (status === PlayerStatus.PLAYING) {
+                            send({ event: 'pause' });
+                        } else if (status === PlayerStatus.PAUSED) {
+                            send({ event: 'play' });
+                        }
+                    }}
+                >
+                    {status === PlayerStatus.PLAYING ? (
+                        <RiPauseFill size={25} />
+                    ) : (
+                        <RiPlayFill size={25} />
+                    )}
+                </RemoteButton>
+                <RemoteButton
+                    tooltip="Next track"
+                    variant="default"
+                    onClick={() => send({ event: 'next' })}
+                >
+                    <RiSkipForwardFill size={25} />
+                </RemoteButton>
+            </Group>
+            <Group
+                grow
+                spacing={0}
+            >
+                <RemoteButton
+                    $active={shuffle || false}
+                    tooltip={shuffle ? 'Shuffle tracks' : 'Shuffle disabled'}
+                    variant="default"
+                    onClick={() => send({ event: 'shuffle' })}
+                >
+                    <RiShuffleFill size={25} />
+                </RemoteButton>
+                <RemoteButton
+                    $active={repeat !== undefined && repeat !== PlayerRepeat.NONE}
+                    tooltip={`Repeat ${
+                        repeat === PlayerRepeat.ONE
+                            ? 'One'
+                            : repeat === PlayerRepeat.ALL
+                            ? 'all'
+                            : 'none'
+                    }`}
+                    variant="default"
+                    onClick={() => send({ event: 'repeat' })}
+                >
+                    {repeat === undefined || repeat === PlayerRepeat.ONE ? (
+                        <RiRepeatOneLine size={25} />
+                    ) : (
+                        <RiRepeat2Line size={25} />
+                    )}
+                </RemoteButton>
+                <RemoteButton
+                    $active={song?.userFavorite}
+                    disabled={!song}
+                    tooltip={song?.userFavorite ? 'Unfavorite' : 'Favorite'}
+                    variant="default"
+                    onClick={() => {
+                        if (!id) return;
+
+                        send({ event: 'favorite', favorite: !song.userFavorite, id });
+                    }}
+                >
+                    <RiHeartLine size={25} />
+                </RemoteButton>
+                {(song?.serverType === 'navidrome' || song?.serverType === 'subsonic') && (
+                    <div style={{ margin: 'auto' }}>
+                        <Tooltip
+                            label="Double click to clear"
+                            openDelay={1000}
+                        >
+                            <Rating
+                                sx={{ margin: 'auto' }}
+                                value={song.userRating ?? 0}
+                                onChange={debouncedSetRating}
+                                onDoubleClick={() => debouncedSetRating(0)}
+                            />
+                        </Tooltip>
+                    </div>
+                )}
+            </Group>
+            <WrapperSlider
+                leftLabel={<RiVolumeUpFill size={20} />}
+                max={100}
+                rightLabel={
+                    <Text
+                        size="xs"
+                        weight={600}
+                    >
+                        {volume ?? 0}
+                    </Text>
+                }
+                value={volume ?? 0}
+                onChangeEnd={(e) => send({ event: 'volume', volume: e })}
+            />
+            {showImage && (
+                <Image
+                    src={song?.imageUrl?.replaceAll(/&(size|width|height=\d+)/g, '')}
+                    onError={() => send({ event: 'proxy' })}
+                />
+            )}
+        </>
+    );
+};

src/remote/components/shell.tsx

@@ -0,0 +1,76 @@
+import {
+    AppShell,
+    Container,
+    Flex,
+    Grid,
+    Header,
+    Image,
+    MediaQuery,
+    Skeleton,
+    Title,
+} from '@mantine/core';
+import { ThemeButton } from '/@/remote/components/buttons/theme-button';
+import { ImageButton } from '/@/remote/components/buttons/image-button';
+import { RemoteContainer } from '/@/remote/components/remote-container';
+import { ReconnectButton } from '/@/remote/components/buttons/reconnect-button';
+import { useConnected } from '/@/remote/store';
+
+export const Shell = () => {
+    const connected = useConnected();
+
+    return (
+        <AppShell
+            header={
+                <Header height={60}>
+                    <Grid>
+                        <Grid.Col span="auto">
+                            <div>
+                                <Image
+                                    bg="rgb(25, 25, 25)"
+                                    fit="contain"
+                                    height={60}
+                                    src="/favicon.ico"
+                                    width={60}
+                                />
+                            </div>
+                        </Grid.Col>
+                        <MediaQuery
+                            smallerThan="sm"
+                            styles={{ display: 'none' }}
+                        >
+                            <Grid.Col
+                                sm={6}
+                                xs={0}
+                            >
+                                <Title ta="center">Feishin Remote</Title>
+                            </Grid.Col>
+                        </MediaQuery>
+
+                        <Grid.Col span="auto">
+                            <Flex
+                                direction="row"
+                                justify="right"
+                            >
+                                <ReconnectButton />
+                                <ImageButton />
+                                <ThemeButton />
+                            </Flex>
+                        </Grid.Col>
+                    </Grid>
+                </Header>
+            }
+            padding="md"
+        >
+            <Container>
+                {connected ? (
+                    <RemoteContainer />
+                ) : (
+                    <Skeleton
+                        height={300}
+                        width="100%"
+                    />
+                )}
+            </Container>
+        </AppShell>
+    );
+};

src/remote/components/wrapped-slider.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { SliderProps } from '@mantine/core';
+import styled from 'styled-components';
+import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
+
+const SliderContainer = styled.div`
+    display: flex;
+    width: 95%;
+    height: 20px;
+    margin: 10px 0px;
+`;
+
+const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
+    display: flex;
+    flex: 1;
+    align-self: flex-end;
+    justify-content: center;
+    max-width: 50px;
+`;
+
+const SliderWrapper = styled.div`
+    display: flex;
+    flex: 6;
+    align-items: center;
+    height: 100%;
+`;
+
+export interface WrappedProps extends Omit<SliderProps, 'onChangeEnd'> {
+    leftLabel?: JSX.Element;
+    onChangeEnd: (value: number) => void;
+    rightLabel?: JSX.Element;
+    value: number;
+}
+
+export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: WrappedProps) => {
+    const [isSeeking, setIsSeeking] = useState(false);
+    const [seek, setSeek] = useState(0);
+
+    return (
+        <SliderContainer>
+            {leftLabel && <SliderValueWrapper position="left">{leftLabel}</SliderValueWrapper>}
+            <SliderWrapper>
+                <PlayerbarSlider
+                    {...props}
+                    min={0}
+                    size={6}
+                    value={!isSeeking ? value ?? 0 : seek}
+                    w="100%"
+                    onChange={(e) => {
+                        setIsSeeking(true);
+                        setSeek(e);
+                    }}
+                    onChangeEnd={(e) => {
+                        props.onChangeEnd(e);
+                        setIsSeeking(false);
+                    }}
+                />
+            </SliderWrapper>
+            {rightLabel && <SliderValueWrapper position="right">{rightLabel}</SliderValueWrapper>}
+        </SliderContainer>
+    );
+};

src/remote/index.ejs

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Security-Policy" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Feishin Remote</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

src/remote/index.tsx

@@ -0,0 +1,16 @@
+import { Notifications } from '@mantine/notifications';
+import { createRoot } from 'react-dom/client';
+import { App } from '/@/remote/app';
+
+const container = document.getElementById('root')! as HTMLElement;
+const root = createRoot(container);
+
+root.render(
+    <>
+        <Notifications
+            containerWidth="300px"
+            position="bottom-center"
+        />
+        <App />
+    </>,
+);

src/remote/store/index.ts

@@ -0,0 +1,220 @@
+import { hideNotification, showNotification } from '@mantine/notifications';
+import type { NotificationProps as MantineNotificationProps } from '@mantine/notifications';
+import merge from 'lodash/merge';
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { ClientEvent, ServerEvent, SongUpdateSocket } from '/@/remote/types';
+
+interface StatefulWebSocket extends WebSocket {
+    natural: boolean;
+}
+
+interface SettingsState {
+    connected: boolean;
+    info: Omit<SongUpdateSocket, 'currentTime'>;
+    isDark: boolean;
+    showImage: boolean;
+    socket?: StatefulWebSocket;
+}
+
+export interface SettingsSlice extends SettingsState {
+    actions: {
+        reconnect: () => void;
+        send: (data: ClientEvent) => void;
+        toggleIsDark: () => void;
+        toggleShowImage: () => void;
+    };
+}
+
+const initialState: SettingsState = {
+    connected: false,
+    info: {},
+    isDark: window.matchMedia('(prefers-color-scheme: dark)').matches,
+    showImage: true,
+};
+
+interface NotificationProps extends MantineNotificationProps {
+    type?: 'error' | 'warning';
+}
+
+const showToast = ({ type, ...props }: NotificationProps) => {
+    const color = type === 'warning' ? 'var(--warning-color)' : 'var(--danger-color)';
+
+    const defaultTitle = type === 'warning' ? 'Warning' : 'Error';
+
+    const defaultDuration = type === 'error' ? 2000 : 1000;
+
+    return showNotification({
+        autoClose: defaultDuration,
+        styles: () => ({
+            closeButton: {
+                '&:hover': {
+                    background: 'transparent',
+                },
+            },
+            description: {
+                color: 'var(--toast-description-fg)',
+                fontSize: '1rem',
+            },
+            loader: {
+                margin: '1rem',
+            },
+            root: {
+                '&::before': { backgroundColor: color },
+                background: 'var(--toast-bg)',
+                border: '2px solid var(--generic-border-color)',
+                bottom: '90px',
+            },
+            title: {
+                color: 'var(--toast-title-fg)',
+                fontSize: '1.3rem',
+            },
+        }),
+        title: defaultTitle,
+        ...props,
+    });
+};
+
+const toast = {
+    error: (props: NotificationProps) => showToast({ type: 'error', ...props }),
+    hide: hideNotification,
+    warn: (props: NotificationProps) => showToast({ type: 'warning', ...props }),
+};
+
+export const useRemoteStore = create<SettingsSlice>()(
+    persist(
+        devtools(
+            immer((set, get) => ({
+                actions: {
+                    reconnect: () => {
+                        const existing = get().socket;
+
+                        if (existing) {
+                            if (
+                                existing.readyState === WebSocket.OPEN ||
+                                existing.readyState === WebSocket.CONNECTING
+                            ) {
+                                existing.natural = true;
+                                existing.close(4001);
+                            }
+                        }
+                        set((state) => {
+                            const socket = new WebSocket(
+                                // eslint-disable-next-line no-restricted-globals
+                                location.href.replace('http', 'ws'),
+                            ) as StatefulWebSocket;
+
+                            socket.natural = false;
+
+                            socket.addEventListener('message', (message) => {
+                                const { event, data } = JSON.parse(message.data) as ServerEvent;
+
+                                switch (event) {
+                                    case 'error': {
+                                        toast.error({ message: data, title: 'Socket error' });
+                                        break;
+                                    }
+                                    case 'favorite': {
+                                        set((state) => {
+                                            if (state.info.song?.id === data.id) {
+                                                state.info.song.userFavorite = data.favorite;
+                                            }
+                                        });
+                                        break;
+                                    }
+                                    case 'proxy': {
+                                        set((state) => {
+                                            if (state.info.song) {
+                                                state.info.song.imageUrl = `data:image/jpeg;base64,${data}`;
+                                            }
+                                        });
+                                        break;
+                                    }
+                                    case 'rating': {
+                                        set((state) => {
+                                            if (state.info.song?.id === data.id) {
+                                                state.info.song.userRating = data.rating;
+                                            }
+                                        });
+                                        break;
+                                    }
+                                    case 'song': {
+                                        set((nested) => {
+                                            nested.info = { ...nested.info, ...data };
+                                        });
+                                    }
+                                }
+                            });
+
+                            socket.addEventListener('open', () => {
+                                set({ connected: true });
+                            });
+
+                            socket.addEventListener('close', (reason) => {
+                                if (reason.code === 4002 || reason.code === 4003) {
+                                    // eslint-disable-next-line no-restricted-globals
+                                    location.reload();
+                                } else if (reason.code === 4000) {
+                                    toast.warn({
+                                        message: 'Feishin remote server is down',
+                                        title: 'Connection closed',
+                                    });
+                                } else if (reason.code !== 4001 && !socket.natural) {
+                                    toast.error({
+                                        message: 'Socket closed for unexpected reason',
+                                        title: 'Connection closed',
+                                    });
+                                }
+
+                                if (!socket.natural) {
+                                    set({ connected: false, info: {} });
+                                }
+                            });
+
+                            state.socket = socket;
+                        });
+                    },
+                    send: (data: ClientEvent) => {
+                        get().socket?.send(JSON.stringify(data));
+                    },
+                    toggleIsDark: () => {
+                        set((state) => {
+                            state.isDark = !state.isDark;
+                        });
+                    },
+                    toggleShowImage: () => {
+                        set((state) => {
+                            state.showImage = !state.showImage;
+                        });
+                    },
+                },
+                ...initialState,
+            })),
+            { name: 'store_settings' },
+        ),
+        {
+            merge: (persistedState, currentState) => {
+                return merge(currentState, persistedState);
+            },
+            name: 'store_settings',
+            version: 6,
+        },
+    ),
+);
+
+export const useConnected = () => useRemoteStore((state) => state.connected);
+
+export const useInfo = () => useRemoteStore((state) => state.info);
+
+export const useIsDark = () => useRemoteStore((state) => state.isDark);
+
+export const useReconnect = () => useRemoteStore((state) => state.actions.reconnect);
+
+export const useShowImage = () => useRemoteStore((state) => state.showImage);
+
+export const useSend = () => useRemoteStore((state) => state.actions.send);
+
+export const useToggleDark = () => useRemoteStore((state) => state.actions.toggleIsDark);
+
+export const useToggleShowImage = () => useRemoteStore((state) => state.actions.toggleShowImage);

src/remote/styles/global.scss

@@ -0,0 +1,127 @@
+@use '../../renderer/themes/default.scss';
+@use '../../renderer/themes/dark.scss';
+@use '../../renderer/themes/light.scss';
+@use '../../renderer/styles/ag-grid.scss';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  color: var(--content-text-color);
+  background: var(--content-bg);
+  font-family: var(--content-font-family);
+  font-size: var(--root-font-size);
+  user-select: none;
+}
+
+@media only screen and (max-width: 639px) {
+  body,
+  html {
+    overflow-x: auto;
+  }
+}
+
+#app {
+  height: inherit;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: none;
+  outline: none;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--scrollbar-track-bg);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-bg);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-bg-hover);
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  -webkit-app-region: no-drag;
+}
+
+.overlay-scrollbar {
+  overflow-y: overlay !important;
+  overflow-x: overlay !important;
+}
+
+.hide-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+
+  &::-webkit-scrollbar {
+    width: 1px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.mantine-ScrollArea-thumb[data-state='visible'] {
+  animation: fadeIn 0.3s forwards;
+}
+
+.mantine-ScrollArea-scrollbar[data-state='hidden'] {
+  animation: fadeOut 0.2s forwards;
+}

src/remote/types.ts

@@ -0,0 +1,56 @@
+import type { QueueSong } from '/@/renderer/api/types';
+import type { SongUpdate } from '/@/renderer/types';
+
+export interface SongUpdateSocket extends Omit<SongUpdate, 'song'> {
+    song?: QueueSong | null;
+}
+
+export interface ServerError {
+    data: string;
+    event: 'error';
+}
+
+export interface ServerFavorite {
+    data: { favorite: boolean; id: string };
+    event: 'favorite';
+}
+
+export interface ServerProxy {
+    data: string;
+    event: 'proxy';
+}
+
+export interface ServerRating {
+    data: { id: string; rating: number };
+    event: 'rating';
+}
+
+export interface ServerSong {
+    data: SongUpdateSocket;
+    event: 'song';
+}
+
+export type ServerEvent = ServerError | ServerFavorite | ServerRating | ServerSong | ServerProxy;
+
+export interface ClientSimpleEvent {
+    event: 'next' | 'pause' | 'play' | 'previous' | 'proxy' | 'repeat' | 'shuffle';
+}
+
+export interface ClientFavorite {
+    event: 'favorite';
+    favorite: boolean;
+    id: string;
+}
+
+export interface ClientRating {
+    event: 'rating';
+    id: string;
+    rating: number;
+}
+
+export interface ClientVolume {
+    event: 'volume';
+    volume: number;
+}
+
+export type ClientEvent = ClientSimpleEvent | ClientFavorite | ClientRating | ClientVolume;

src/renderer/api/controller.ts

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

src/renderer/api/index.ts

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

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

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

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

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

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

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

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

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

src/renderer/api/navidrome.api.ts

@@ -1,756 +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 IGNORE_CORS = localStorage.getItem('IGNORE_CORS') === 'true';
-
-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;
-      },
-    ],
-  },
-  mode: IGNORE_CORS ? 'cors' : undefined,
-});
-
-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,
-    artist_id: query.artistIds?.[0],
-    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,143 +1,143 @@
 import { SSArtistInfo } from '/@/renderer/api/subsonic.types';
 
 export type NDAuthenticate = {
-  id: string;
-  isAdmin: boolean;
-  name: string;
-  subsonicSalt: string;
-  subsonicToken: string;
-  token: string;
-  username: string;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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'];
+    similarArtists?: SSArtistInfo['similarArtist'];
 };
 
 export type NDAuthenticationResponse = NDAuthenticate;
 
 export type NDAlbumArtistList = {
-  items: NDAlbumArtist[];
-  startIndex: number;
-  totalRecordCount: number;
+    items: NDAlbumArtist[];
+    startIndex: number;
+    totalRecordCount: number;
 };
 
 export type NDAlbumArtistDetail = NDAlbumArtist;
@@ -155,9 +155,9 @@ export type NDAlbumDetail = NDAlbum & { songs?: NDSongListResponse };
 export type NDAlbumListResponse = NDAlbum[];
 
 export type NDAlbumList = {
-  items: NDAlbum[];
-  startIndex: number;
-  totalRecordCount: number;
+    items: NDAlbum[];
+    startIndex: number;
+    totalRecordCount: number;
 };
 
 export type NDSongDetail = NDSong;
@@ -167,142 +167,142 @@ export type NDSongDetailResponse = NDSong;
 export type NDSongListResponse = NDSong[];
 
 export type NDSongList = {
-  items: NDSong[];
-  startIndex: number;
-  totalRecordCount: number;
+    items: NDSong[];
+    startIndex: number;
+    totalRecordCount: number;
 };
 
 export type NDArtistListResponse = NDAlbumArtist[];
 
 export type NDPagination = {
-  _end?: number;
-  _start?: number;
+    _end?: number;
+    _start?: number;
 };
 
 export enum NDSortOrder {
-  ASC = 'ASC',
-  DESC = 'DESC',
+    ASC = 'ASC',
+    DESC = 'DESC',
 }
 
 export type NDOrder = {
-  _order?: NDSortOrder;
+    _order?: NDSortOrder;
 };
 
 export enum NDGenreListSort {
-  NAME = 'name',
+    NAME = 'name',
 }
 
 export type NDGenreListParams = {
-  _sort?: NDGenreListSort;
-  id?: string;
+    _sort?: NDGenreListSort;
+    id?: string;
 } & NDPagination &
-  NDOrder;
+    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',
+    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;
+    _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;
+    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',
+    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;
+    _sort?: NDSongListSort;
+    album_id?: string[];
+    artist_id?: string[];
+    genre_id?: string;
+    starred?: boolean;
 } & NDPagination &
-  NDOrder;
+    NDOrder;
 
 export enum NDAlbumArtistListSort {
-  ALBUM_COUNT = 'albumCount',
-  FAVORITED = 'starred ASC, starredAt ASC',
-  NAME = 'name',
-  PLAY_COUNT = 'playCount',
-  RATING = 'rating',
-  SONG_COUNT = 'songCount',
+    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;
+    _sort?: NDAlbumArtistListSort;
+    genre_id?: string;
+    starred?: boolean;
 } & NDPagination &
-  NDOrder;
+    NDOrder;
 
 export type NDAddToPlaylistResponse = {
-  added: number;
+    added: number;
 };
 
 export type NDAddToPlaylistBody = {
-  ids: string[];
+    ids: string[];
 };
 
 export type NDAddToPlaylist = null;
 
 export type NDRemoveFromPlaylistResponse = {
-  ids: string[];
+    ids: string[];
 };
 
 export type NDRemoveFromPlaylistParams = {
-  id: string[];
+    id: string[];
 };
 
 export type NDRemoveFromPlaylist = null;
 
 export type NDCreatePlaylistParams = {
-  comment?: string;
-  name: string;
-  public?: boolean;
-  rules?: Record<string, any> | null;
+    comment?: string;
+    name: string;
+    public?: boolean;
+    rules?: Record<string, any> | null;
 };
 
 export type NDCreatePlaylistResponse = {
-  id: string;
+    id: string;
 };
 
 export type NDCreatePlaylist = NDCreatePlaylistResponse;
@@ -312,7 +312,7 @@ export type NDUpdatePlaylistParams = Partial<NDPlaylist>;
 export type NDUpdatePlaylistResponse = NDPlaylist;
 
 export type NDDeletePlaylistParams = {
-  id: string;
+    id: string;
 };
 
 export type NDDeletePlaylistResponse = null;
@@ -320,21 +320,21 @@ 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;
+    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;
@@ -342,125 +342,125 @@ export type NDPlaylistDetail = NDPlaylist;
 export type NDPlaylistDetailResponse = NDPlaylist;
 
 export type NDPlaylistList = {
-  items: NDPlaylist[];
-  startIndex: number;
-  totalRecordCount: number;
+    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',
+    DURATION = 'duration',
+    NAME = 'name',
+    OWNER = 'ownerName',
+    PUBLIC = 'public',
+    SONG_COUNT = 'songCount',
+    UPDATED_AT = 'updatedAt',
 }
 
 export type NDPlaylistListParams = {
-  _sort?: NDPlaylistListSort;
-  owner_id?: string;
+    _sort?: NDPlaylistListSort;
+    owner_id?: string;
 } & NDPagination &
-  NDOrder;
+    NDOrder;
 
 export type NDPlaylistSong = NDSong & {
-  mediaFileId: string;
-  playlistId: string;
+    mediaFileId: string;
+    playlistId: string;
 };
 
 export type NDPlaylistSongListResponse = NDPlaylistSong[];
 
 export type NDPlaylistSongList = {
-  items: NDPlaylistSong[];
-  startIndex: number;
-  totalRecordCount: number;
+    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' },
+    { 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' },
+    { 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' },
+    { 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' },
+    { 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' },
+    { 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;
+    _sort?: NDUserListSort;
 } & NDPagination &
-  NDOrder;
+    NDOrder;
 
 export type NDUserListResponse = NDUser[];
 
 export type NDUserList = {
-  items: NDUser[];
-  startIndex: number;
-  totalRecordCount: number;
+    items: NDUser[];
+    startIndex: number;
+    totalRecordCount: number;
 };
 
 export enum NDUserListSort {
-  NAME = 'name',
+    NAME = 'name',
 }

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

@@ -0,0 +1,392 @@
+import { initClient, initContract } from '@ts-rest/core';
+import axios, { Method, AxiosError, AxiosResponse, isAxiosError } from 'axios';
+import isElectron from 'is-electron';
+import debounce from 'lodash/debounce';
+import omitBy from 'lodash/omitBy';
+import qs from 'qs';
+import { ndType } from './navidrome-types';
+import { authenticationFailure, resultWithHeaders } from '/@/renderer/api/utils';
+import { useAuthStore } from '/@/renderer/store';
+import { ServerListItem } from '/@/renderer/types';
+import { toast } from '/@/renderer/components';
+
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
+const c = initContract();
+
+export const contract = c.router({
+    addToPlaylist: {
+        body: ndType._parameters.addToPlaylist,
+        method: 'POST',
+        path: 'playlist/:id/tracks',
+        responses: {
+            200: resultWithHeaders(ndType._response.addToPlaylist),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    authenticate: {
+        body: ndType._parameters.authenticate,
+        method: 'POST',
+        path: 'auth/login',
+        responses: {
+            200: resultWithHeaders(ndType._response.authenticate),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    createPlaylist: {
+        body: ndType._parameters.createPlaylist,
+        method: 'POST',
+        path: 'playlist',
+        responses: {
+            200: resultWithHeaders(ndType._response.createPlaylist),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    deletePlaylist: {
+        body: null,
+        method: 'DELETE',
+        path: 'playlist/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.deletePlaylist),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getAlbumArtistDetail: {
+        method: 'GET',
+        path: 'artist/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.albumArtist),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getAlbumArtistList: {
+        method: 'GET',
+        path: 'artist',
+        query: ndType._parameters.albumArtistList,
+        responses: {
+            200: resultWithHeaders(ndType._response.albumArtistList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getAlbumDetail: {
+        method: 'GET',
+        path: 'album/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.album),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getAlbumList: {
+        method: 'GET',
+        path: 'album',
+        query: ndType._parameters.albumList,
+        responses: {
+            200: resultWithHeaders(ndType._response.albumList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getGenreList: {
+        method: 'GET',
+        path: 'genre',
+        query: ndType._parameters.genreList,
+        responses: {
+            200: resultWithHeaders(ndType._response.genreList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getPlaylistDetail: {
+        method: 'GET',
+        path: 'playlist/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.playlist),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getPlaylistList: {
+        method: 'GET',
+        path: 'playlist',
+        query: ndType._parameters.playlistList,
+        responses: {
+            200: resultWithHeaders(ndType._response.playlistList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getPlaylistSongList: {
+        method: 'GET',
+        path: 'playlist/:id/tracks',
+        query: ndType._parameters.songList,
+        responses: {
+            200: resultWithHeaders(ndType._response.playlistSongList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getSongDetail: {
+        method: 'GET',
+        path: 'song/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.song),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getSongList: {
+        method: 'GET',
+        path: 'song',
+        query: ndType._parameters.songList,
+        responses: {
+            200: resultWithHeaders(ndType._response.songList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    getUserList: {
+        method: 'GET',
+        path: 'user',
+        query: ndType._parameters.userList,
+        responses: {
+            200: resultWithHeaders(ndType._response.userList),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    removeFromPlaylist: {
+        body: null,
+        method: 'DELETE',
+        path: 'playlist/:id/tracks',
+        query: ndType._parameters.removeFromPlaylist,
+        responses: {
+            200: resultWithHeaders(ndType._response.removeFromPlaylist),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+    updatePlaylist: {
+        body: ndType._parameters.updatePlaylist,
+        method: 'PUT',
+        path: 'playlist/:id',
+        responses: {
+            200: resultWithHeaders(ndType._response.updatePlaylist),
+            500: resultWithHeaders(ndType._response.error),
+        },
+    },
+});
+
+const axiosClient = axios.create({});
+
+axiosClient.defaults.paramsSerializer = (params) => {
+    return qs.stringify(params, { arrayFormat: 'repeat' });
+};
+
+const parsePath = (fullPath: string) => {
+    const [path, params] = fullPath.split('?');
+
+    const parsedParams = qs.parse(params);
+
+    // Convert indexed object to array
+    const newParams: Record<string, any> = {};
+    Object.keys(parsedParams).forEach((key) => {
+        const isIndexedArrayObject =
+            typeof parsedParams[key] === 'object' &&
+            Object.keys(parsedParams[key] || {}).includes('0');
+
+        if (!isIndexedArrayObject) {
+            newParams[key] = parsedParams[key];
+        } else {
+            newParams[key] = Object.values(parsedParams[key] || {});
+        }
+    });
+
+    const notNilParams = omitBy(newParams, (value) => value === 'undefined' || value === 'null');
+
+    return {
+        params: notNilParams,
+        path,
+    };
+};
+
+let authSuccess = true;
+let shouldDelay = false;
+
+const RETRY_DELAY_MS = 1000;
+const MAX_RETRIES = 5;
+
+const waitForResult = async (count = 0): Promise<void> => {
+    return new Promise((resolve) => {
+        if (count === MAX_RETRIES || !shouldDelay) resolve();
+
+        setTimeout(() => {
+            waitForResult(count + 1)
+                .then(resolve)
+                .catch(resolve);
+        }, RETRY_DELAY_MS);
+    });
+};
+
+const limitedFail = debounce(authenticationFailure, RETRY_DELAY_MS);
+const TIMEOUT_ERROR = Error();
+
+axiosClient.interceptors.response.use(
+    (response) => {
+        const serverId = useAuthStore.getState().currentServer?.id;
+
+        if (serverId) {
+            const headerCredential = response.headers['x-nd-authorization'] as string | undefined;
+
+            if (headerCredential) {
+                useAuthStore.getState().actions.updateServer(serverId, {
+                    ndCredential: headerCredential,
+                });
+            }
+        }
+
+        authSuccess = true;
+
+        return response;
+    },
+    (error) => {
+        if (error.response && error.response.status === 401) {
+            const currentServer = useAuthStore.getState().currentServer;
+
+            if (localSettings && currentServer?.savePassword) {
+                // eslint-disable-next-line promise/no-promise-in-callback
+                return localSettings
+                    .passwordGet(currentServer.id)
+                    .then(async (password: string | null) => {
+                        authSuccess = false;
+
+                        if (password === null) {
+                            throw error;
+                        }
+
+                        if (shouldDelay) {
+                            await waitForResult();
+
+                            // Hopefully the delay was sufficient for authentication.
+                            // Otherwise, it will require manual intervention
+                            if (authSuccess) {
+                                return axiosClient.request(error.config);
+                            }
+
+                            throw error;
+                        }
+
+                        shouldDelay = true;
+
+                        // Do not use axiosClient. Instead, manually make a post
+                        const res = await axios.post(`${currentServer.url}/auth/login`, {
+                            password,
+                            username: currentServer.username,
+                        });
+
+                        if (res.status === 429) {
+                            toast.error({
+                                message:
+                                    'you have exceeded the number of allowed login requests. Please wait before logging, or consider tweaking AuthRequestLimit',
+                                title: 'Your session has expired.',
+                            });
+
+                            const serverId = currentServer.id;
+                            useAuthStore
+                                .getState()
+                                .actions.updateServer(serverId, { ndCredential: undefined });
+                            useAuthStore.getState().actions.setCurrentServer(null);
+
+                            // special error to prevent sending a second message, and stop other messages that could be enqueued
+                            limitedFail.cancel();
+                            throw TIMEOUT_ERROR;
+                        }
+                        if (res.status !== 200) {
+                            throw new Error('Failed to authenticate');
+                        }
+
+                        const newCredential = res.data.token;
+                        const subsonicCredential = `u=${currentServer.username}&s=${res.data.subsonicSalt}&t=${res.data.subsonicToken}`;
+
+                        useAuthStore.getState().actions.updateServer(currentServer.id, {
+                            credential: subsonicCredential,
+                            ndCredential: newCredential,
+                        });
+
+                        error.config.headers['x-nd-authorization'] = `Bearer ${newCredential}`;
+
+                        authSuccess = true;
+
+                        return axiosClient.request(error.config);
+                    })
+                    .catch((newError: any) => {
+                        if (newError !== TIMEOUT_ERROR) {
+                            console.error('Error when trying to reauthenticate: ', newError);
+                            limitedFail(currentServer);
+                        }
+
+                        // make sure to pass the error so axios will error later on
+                        throw newError;
+                    })
+                    .finally(() => {
+                        shouldDelay = false;
+                    });
+            }
+
+            limitedFail(currentServer);
+        }
+
+        return Promise.reject(error);
+    },
+);
+
+export const ndApiClient = (args: {
+    server: ServerListItem | null;
+    signal?: AbortSignal;
+    url?: string;
+}) => {
+    const { server, url, signal } = args;
+
+    return initClient(contract, {
+        api: async ({ path, method, headers, body }) => {
+            let baseUrl: string | undefined;
+            let token: string | undefined;
+
+            const { params, path: api } = parsePath(path);
+
+            if (server) {
+                baseUrl = `${server?.url}/api`;
+                token = server?.ndCredential;
+            } else {
+                baseUrl = url;
+            }
+
+            try {
+                if (shouldDelay) await waitForResult();
+
+                const result = await axiosClient.request({
+                    data: body,
+                    headers: {
+                        ...headers,
+                        ...(token && { 'x-nd-authorization': `Bearer ${token}` }),
+                    },
+                    method: method as Method,
+                    params,
+                    signal,
+                    url: `${baseUrl}/${api}`,
+                });
+                return {
+                    body: { data: result.data, headers: result.headers },
+                    headers: result.headers as any,
+                    status: result.status,
+                };
+            } catch (e: Error | AxiosError | any) {
+                if (isAxiosError(e)) {
+                    const error = e as AxiosError;
+                    const response = error.response as AxiosResponse;
+                    return {
+                        body: { data: response.data, headers: response.headers },
+                        headers: response.headers as any,
+                        status: response.status,
+                    };
+                }
+                throw e;
+            }
+        },
+        baseHeaders: {
+            'Content-Type': 'application/json',
+        },
+        baseUrl: '',
+        jsonQuery: false,
+    });
+};

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

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

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

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

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

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

src/renderer/api/normalize.ts

@@ -1,292 +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':
-      songs = data?.items.map((item) => jfNormalize.song(item as JFSong, server, ''));
-      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/query-keys.ts

@@ -1,96 +1,250 @@
+import { QueryFunctionContext } from '@tanstack/react-query';
+import { LyricSource } from './types';
 import type {
-  AlbumListQuery,
-  SongListQuery,
-  AlbumDetailQuery,
-  AlbumArtistListQuery,
-  ArtistListQuery,
-  PlaylistListQuery,
-  PlaylistDetailQuery,
-  PlaylistSongListQuery,
-  UserListQuery,
-  AlbumArtistDetailQuery,
-  TopSongListQuery,
+    AlbumListQuery,
+    SongListQuery,
+    AlbumDetailQuery,
+    AlbumArtistListQuery,
+    ArtistListQuery,
+    PlaylistListQuery,
+    PlaylistDetailQuery,
+    PlaylistSongListQuery,
+    UserListQuery,
+    AlbumArtistDetailQuery,
+    TopSongListQuery,
+    SearchQuery,
+    SongDetailQuery,
+    RandomSongListQuery,
+    LyricsQuery,
+    LyricSearchQuery,
+    GenreListQuery,
 } 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,
-  },
+export const splitPaginatedQuery = (key: any) => {
+    const { startIndex, limit, ...filter } = key || {};
+
+    if (startIndex !== undefined || limit !== undefined) {
+        return {
+            filter,
+            pagination: {
+                limit,
+                startIndex,
+            },
+        };
+    }
+
+    return {
+        filter,
+        pagination: undefined,
+    };
+};
+
+export type QueryPagination = {
+    limit?: number;
+    startIndex?: number;
+};
+
+export const queryKeys: Record<
+    string,
+    Record<string, (...props: any) => QueryFunctionContext['queryKey']>
+> = {
+    albumArtists: {
+        detail: (serverId: string, query?: AlbumArtistDetailQuery) => {
+            if (query) return [serverId, 'albumArtists', 'detail', query] as const;
+            return [serverId, 'albumArtists', 'detail'] as const;
+        },
+        list: (serverId: string, query?: AlbumArtistListQuery) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'albumArtists', 'list', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'albumArtists', 'list', filter] 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, artistId?: string) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+
+            if (query && pagination && artistId) {
+                return [serverId, 'albums', 'list', artistId, filter, pagination] as const;
+            }
+
+            if (query && pagination) {
+                return [serverId, 'albums', 'list', filter, pagination] as const;
+            }
+
+            if (query && artistId) {
+                return [serverId, 'albums', 'list', artistId, filter] as const;
+            }
+
+            if (query) {
+                return [serverId, 'albums', 'list', filter] as const;
+            }
+
+            return [serverId, 'albums', 'list'] as const;
+        },
+        related: (serverId: string, id: string, query?: AlbumDetailQuery) => {
+            if (query) {
+                return [serverId, 'albums', id, 'related', query] as const;
+            }
+
+            return [serverId, 'albums', id, 'related'] 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) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'artists', 'list', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'artists', 'list', filter] as const;
+            }
+
+            return [serverId, 'artists', 'list'] as const;
+        },
+        root: (serverId: string) => [serverId, 'artists'] as const,
+    },
+    genres: {
+        list: (serverId: string, query?: GenreListQuery) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'genres', 'list', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'genres', 'list', filter] as const;
+            }
+
+            return [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) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'playlists', id, 'detail', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'playlists', id, 'detail', filter] as const;
+            }
+
+            if (id) return [serverId, 'playlists', id, 'detail'] as const;
+            return [serverId, 'playlists', 'detail'] as const;
+        },
+        detailSongList: (serverId: string, id: string, query?: PlaylistSongListQuery) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+
+            if (query && id && pagination) {
+                return [serverId, 'playlists', id, 'detailSongList', filter, pagination] as const;
+            }
+
+            if (query && id) {
+                return [serverId, 'playlists', id, 'detailSongList', filter] as const;
+            }
+
+            if (id) return [serverId, 'playlists', id, 'detailSongList'] as const;
+
+            return [serverId, 'playlists', 'detailSongList'] as const;
+        },
+        list: (serverId: string, query?: PlaylistListQuery) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'playlists', 'list', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'playlists', 'list', filter] as const;
+            }
+
+            return [serverId, 'playlists', 'list'] as const;
+        },
+        root: (serverId: string) => [serverId, 'playlists'] as const,
+        songList: (serverId: string, id?: string, query?: PlaylistSongListQuery) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+            if (query && id && pagination) {
+                return [serverId, 'playlists', id, 'songList', filter, pagination] as const;
+            }
+
+            if (query && id) {
+                return [serverId, 'playlists', id, 'songList', filter] as const;
+            }
+
+            if (id) return [serverId, 'playlists', id, 'songList'] as const;
+            return [serverId, 'playlists', 'songList'] as const;
+        },
+    },
+    search: {
+        list: (serverId: string, query?: SearchQuery) => {
+            if (query) return [serverId, 'search', 'list', query] as const;
+            return [serverId, 'search', 'list'] as const;
+        },
+        root: (serverId: string) => [serverId, 'search'] as const,
+    },
+    server: {
+        root: (serverId: string) => [serverId] as const,
+    },
+    songs: {
+        detail: (serverId: string, query?: SongDetailQuery) => {
+            if (query) return [serverId, 'songs', 'detail', query] as const;
+            return [serverId, 'songs', 'detail'] as const;
+        },
+        list: (serverId: string, query?: SongListQuery) => {
+            const { pagination, filter } = splitPaginatedQuery(query);
+            if (query && pagination) {
+                return [serverId, 'songs', 'list', filter, pagination] as const;
+            }
+
+            if (query) {
+                return [serverId, 'songs', 'list', filter] as const;
+            }
+
+            return [serverId, 'songs', 'list'] as const;
+        },
+        lyrics: (serverId: string, query?: LyricsQuery) => {
+            if (query) return [serverId, 'song', 'lyrics', 'select', query] as const;
+            return [serverId, 'song', 'lyrics'] as const;
+        },
+        lyricsByRemoteId: (searchQuery: { remoteSongId: string; remoteSource: LyricSource }) => {
+            return ['song', 'lyrics', 'remote', searchQuery] as const;
+        },
+        lyricsSearch: (query?: LyricSearchQuery) => {
+            if (query) return ['lyrics', 'search', query] as const;
+            return ['lyrics', 'search'] as const;
+        },
+        randomSongList: (serverId: string, query?: RandomSongListQuery) => {
+            if (query) return [serverId, 'songs', 'randomSongList', query] as const;
+            return [serverId, 'songs', 'randomSongList'] as const;
+        },
+        root: (serverId: string) => [serverId, 'songs'] as const,
+    },
+    users: {
+        list: (serverId: string, query?: UserListQuery) => {
+            if (query) return [serverId, 'users', 'list', query] as const;
+            return [serverId, 'users', 'list'] as const;
+        },
+        root: (serverId: string) => [serverId, 'users'] as const,
+    },
 };

src/renderer/api/subsonic.api.ts

@@ -1,497 +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 IGNORE_CORS = localStorage.getItem('IGNORE_CORS') === 'true';
-
-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 });
-      },
-    ],
-  },
-  mode: IGNORE_CORS ? 'cors' : undefined,
-});
-
-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,190 +1,190 @@
 export type SSBaseResponse = {
-  serverVersion?: 'string';
-  status: 'string';
-  type?: 'string';
-  version: 'string';
+    serverVersion?: 'string';
+    status: 'string';
+    type?: 'string';
+    version: 'string';
 };
 
 export type SSMusicFolderList = SSMusicFolder[];
 
 export type SSMusicFolderListResponse = {
-  musicFolders: {
-    musicFolder: SSMusicFolder[];
-  };
+    musicFolders: {
+        musicFolder: SSMusicFolder[];
+    };
 };
 
 export type SSGenreList = SSGenre[];
 
 export type SSGenreListResponse = {
-  genres: {
-    genre: SSGenre[];
-  };
+    genres: {
+        genre: SSGenre[];
+    };
 };
 
 export type SSAlbumArtistDetailParams = {
-  id: string;
+    id: string;
 };
 
 export type SSAlbumArtistDetail = SSAlbumArtistListEntry & { album: SSAlbumListEntry[] };
 
 export type SSAlbumArtistDetailResponse = {
-  artist: SSAlbumArtistListEntry & {
-    album: SSAlbumListEntry[];
-  };
+    artist: SSAlbumArtistListEntry & {
+        album: SSAlbumListEntry[];
+    };
 };
 
 export type SSAlbumArtistList = {
-  items: SSAlbumArtistListEntry[];
-  startIndex: number;
-  totalRecordCount: number | null;
+    items: SSAlbumArtistListEntry[];
+    startIndex: number;
+    totalRecordCount: number | null;
 };
 
 export type SSAlbumArtistListResponse = {
-  artists: {
-    ignoredArticles: string;
-    index: SSArtistIndex[];
-    lastModified: number;
-  };
+    artists: {
+        ignoredArticles: string;
+        index: SSArtistIndex[];
+        lastModified: number;
+    };
 };
 
 export type SSAlbumList = {
-  items: SSAlbumListEntry[];
-  startIndex: number;
-  totalRecordCount: number | null;
+    items: SSAlbumListEntry[];
+    startIndex: number;
+    totalRecordCount: number | null;
 };
 
 export type SSAlbumListResponse = {
-  albumList2: {
-    album: SSAlbumListEntry[];
-  };
+    albumList2: {
+        album: SSAlbumListEntry[];
+    };
 };
 
 export type SSAlbumDetail = Omit<SSAlbum, 'song'> & { songs: SSSong[] };
 
 export type SSAlbumDetailResponse = {
-  album: SSAlbum;
+    album: SSAlbum;
 };
 
 export type SSArtistInfoParams = {
-  count?: number;
-  id: string;
-  includeNotPresent?: boolean;
+    count?: number;
+    id: string;
+    includeNotPresent?: boolean;
 };
 
 export type SSArtistInfoResponse = {
-  artistInfo2: SSArtistInfo;
+    artistInfo2: SSArtistInfo;
 };
 
 export type SSArtistInfo = {
-  biography: string;
-  largeImageUrl?: string;
-  lastFmUrl?: string;
-  mediumImageUrl?: string;
-  musicBrainzId?: string;
-  similarArtist?: {
+    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;
-  }[];
-  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;
+    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[];
+    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;
+    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;
+    fromYear?: number;
+    genre?: string;
+    musicFolderId?: string;
+    offset?: number;
+    size?: number;
+    toYear?: number;
+    type: string;
 };
 
 export type SSAlbumArtistListParams = {
-  musicFolderId?: string;
+    musicFolderId?: string;
 };
 
 export type SSFavoriteParams = {
-  albumId?: string;
-  artistId?: string;
-  id?: string;
+    albumId?: string;
+    artistId?: string;
+    id?: string;
 };
 
 export type SSFavorite = null;
@@ -192,8 +192,8 @@ export type SSFavorite = null;
 export type SSFavoriteResponse = null;
 
 export type SSRatingParams = {
-  id: string;
-  rating: number;
+    id: string;
+    rating: number;
 };
 
 export type SSRating = null;
@@ -201,24 +201,24 @@ export type SSRating = null;
 export type SSRatingResponse = null;
 
 export type SSTopSongListParams = {
-  artist: string;
-  count?: number;
+    artist: string;
+    count?: number;
 };
 
 export type SSTopSongListResponse = {
-  topSongs: {
-    song: SSSong[];
-  };
+    topSongs: {
+        song: SSSong[];
+    };
 };
 
 export type SSTopSongList = {
-  items: SSSong[];
-  startIndex: number;
-  totalRecordCount: number | null;
+    items: SSSong[];
+    startIndex: number;
+    totalRecordCount: number | null;
 };
 
 export type SSScrobbleParams = {
-  id: string;
-  submission?: boolean;
-  time?: number;
+    id: string;
+    submission?: boolean;
+    time?: number;
 };

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

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

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

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