add initial files

.dockerignore

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

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.erb/configs/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "no-console": "off",
+    "global-require": "off",
+    "import/no-dynamic-require": "off"
+  }
+}

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

@@ -0,0 +1,57 @@
+/**
+ * Base webpack config used across other specific configs
+ */
+
+import webpack from 'webpack';
+import { dependencies as externals } from '../../release/app/package.json';
+import webpackPaths from './webpack.paths';
+
+const configuration: webpack.Configuration = {
+  externals: [...Object.keys(externals || {})],
+
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        test: /\.[jt]sx?$/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            // Remove this line to enable type checking in webpack builds
+            transpileOnly: true,
+          },
+        },
+      },
+    ],
+  },
+
+  output: {
+    // https://github.com/webpack/webpack/issues/1114
+    library: {
+      type: 'commonjs2',
+    },
+
+    path: webpackPaths.srcPath,
+  },
+
+  plugins: [
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'production',
+    }),
+  ],
+
+  /**
+   * Determine the array of extensions that should be used to resolve modules.
+   */
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
+    fallback: {
+      child_process: false,
+    },
+    modules: [webpackPaths.srcPath, 'node_modules'],
+  },
+
+  stats: 'errors-only',
+};
+
+export default configuration;

.erb/configs/webpack.config.eslint.ts

@@ -0,0 +1,3 @@
+/* eslint import/no-unresolved: off, import/no-self-import: off */
+
+module.exports = require('./webpack.config.renderer.dev').default;

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

@@ -0,0 +1,84 @@
+/**
+ * Webpack config for production electron main process
+ */
+
+import path from 'path';
+
+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: 'electron-main',
+
+  entry: {
+    main: path.join(webpackPaths.srcMainPath, 'main.ts'),
+    preload: path.join(webpackPaths.srcMainPath, 'preload.ts'),
+  },
+
+  output: {
+    path: webpackPaths.distMainPath,
+    filename: '[name].js',
+  },
+
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+      }),
+    ],
+  },
+
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
+    }),
+
+    /**
+     * 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,
+      START_MINIMIZED: false,
+    }),
+  ],
+
+  /**
+   * Disables webpack processing of __dirname and __filename.
+   * If you run the bundle in node.js it falls back to these values of node.js.
+   * https://github.com/webpack/webpack/issues/2010
+   */
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+};
+
+export default merge(baseConfig, configuration);

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

@@ -0,0 +1,70 @@
+import path from 'path';
+
+import webpack from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+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 configuration: webpack.Configuration = {
+  devtool: 'inline-source-map',
+
+  mode: 'development',
+
+  target: 'electron-preload',
+
+  entry: path.join(webpackPaths.srcMainPath, 'preload.ts'),
+
+  output: {
+    path: webpackPaths.dllPath,
+    filename: 'preload.js',
+  },
+
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled',
+    }),
+
+    /**
+     * 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,
+    }),
+  ],
+
+  /**
+   * Disables webpack processing of __dirname and __filename.
+   * If you run the bundle in node.js it falls back to these values of node.js.
+   * https://github.com/webpack/webpack/issues/2010
+   */
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+
+  watch: true,
+};
+
+export default merge(baseConfig, configuration);

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

@@ -0,0 +1,79 @@
+/**
+ * Builds the DLL for development electron renderer process
+ */
+
+import path from 'path';
+
+import webpack from 'webpack';
+import { merge } from 'webpack-merge';
+
+import { dependencies } from '../../package.json';
+import checkNodeEnv from '../scripts/check-node-env';
+import baseConfig from './webpack.config.base';
+import webpackPaths from './webpack.paths';
+
+checkNodeEnv('development');
+
+const dist = webpackPaths.dllPath;
+
+const configuration: webpack.Configuration = {
+  context: webpackPaths.rootPath,
+
+  devtool: 'eval',
+
+  mode: 'development',
+
+  target: 'electron-renderer',
+
+  externals: ['fsevents', 'crypto-browserify'],
+
+  /**
+   * Use `module` from `webpack.config.renderer.dev.js`
+   */
+  module: require('./webpack.config.renderer.dev').default.module,
+
+  entry: {
+    renderer: Object.keys(dependencies || {}),
+  },
+
+  output: {
+    path: dist,
+    filename: '[name].dev.dll.js',
+    library: {
+      name: 'renderer',
+      type: 'var',
+    },
+  },
+
+  plugins: [
+    new webpack.DllPlugin({
+      path: path.join(dist, '[name].json'),
+      name: '[name]',
+    }),
+
+    /**
+     * 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: 'development',
+    }),
+
+    new webpack.LoaderOptionsPlugin({
+      debug: true,
+      options: {
+        context: webpackPaths.srcPath,
+        output: {
+          path: webpackPaths.dllPath,
+        },
+      },
+    }),
+  ],
+};
+
+export default merge(baseConfig, configuration);

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

@@ -0,0 +1,191 @@
+import 'webpack-dev-server';
+import { execSync, spawn } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import chalk from 'chalk';
+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 manifest = path.resolve(webpackPaths.dllPath, 'renderer.json');
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const requiredByDLLConfig = module.parent!.filename.includes(
+  'webpack.config.renderer.dev.dll'
+);
+
+/**
+ * Warn if the DLL is not built
+ */
+if (
+  !requiredByDLLConfig &&
+  !(fs.existsSync(webpackPaths.dllPath) && fs.existsSync(manifest))
+) {
+  console.log(
+    chalk.black.bgYellow.bold(
+      'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"'
+    )
+  );
+  execSync('npm run postinstall');
+}
+
+const configuration: webpack.Configuration = {
+  devtool: 'inline-source-map',
+
+  mode: 'development',
+
+  target: ['web', 'electron-renderer'],
+
+  entry: [
+    `webpack-dev-server/client?http://localhost:${port}/dist`,
+    'webpack/hot/only-dev-server',
+    path.join(webpackPaths.srcRendererPath, 'index.tsx'),
+  ],
+
+  output: {
+    path: webpackPaths.distRendererPath,
+    publicPath: '/',
+    filename: 'renderer.dev.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: [
+    ...(requiredByDLLConfig
+      ? []
+      : [
+          new webpack.DllReferencePlugin({
+            context: webpackPaths.dllPath,
+            manifest: require(manifest),
+            sourceType: 'var',
+          }),
+        ]),
+
+    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 ReactRefreshWebpackPlugin(),
+
+    new HtmlWebpackPlugin({
+      filename: path.join('index.html'),
+      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+      },
+      isBrowser: false,
+      env: process.env.NODE_ENV,
+      isDevelopment: process.env.NODE_ENV !== 'production',
+      nodeModules: webpackPaths.appNodeModulesPath,
+    }),
+  ],
+
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+
+  devServer: {
+    port,
+    compress: true,
+    hot: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    static: {
+      publicPath: '/',
+    },
+    historyApiFallback: {
+      verbose: true,
+    },
+    setupMiddlewares(middlewares) {
+      console.log('Starting preload.js builder...');
+      const preloadProcess = spawn('npm', ['run', 'start:preload'], {
+        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,
+        stdio: 'inherit',
+      })
+        .on('close', (code: number) => {
+          preloadProcess.kill();
+          process.exit(code!);
+        })
+        .on('error', (spawnError) => console.error(spawnError));
+      return middlewares;
+    },
+  },
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.config.renderer.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', 'electron-renderer'],
+
+  entry: [path.join(webpackPaths.srcRendererPath, 'index.tsx')],
+
+  output: {
+    path: webpackPaths.distRendererPath,
+    publicPath: './',
+    filename: 'renderer.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: '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.config.renderer.web.ts

@@ -0,0 +1,140 @@
+import 'webpack-dev-server';
+import path from 'path';
+
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+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', 'electron-renderer'],
+
+  entry: [
+    `webpack-dev-server/client?http://localhost:${port}/dist`,
+    'webpack/hot/only-dev-server',
+    path.join(webpackPaths.srcRendererPath, 'index.tsx'),
+  ],
+
+  output: {
+    path: webpackPaths.distRendererPath,
+    publicPath: '/',
+    filename: 'renderer.dev.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 ReactRefreshWebpackPlugin(),
+
+    new HtmlWebpackPlugin({
+      filename: path.join('index.html'),
+      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
+      minify: {
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        removeComments: true,
+      },
+      isBrowser: false,
+      env: process.env.NODE_ENV,
+      isDevelopment: process.env.NODE_ENV !== 'production',
+      nodeModules: webpackPaths.appNodeModulesPath,
+    }),
+  ],
+
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+
+  devServer: {
+    port,
+    compress: true,
+    hot: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    static: {
+      publicPath: '/',
+    },
+    historyApiFallback: {
+      verbose: true,
+    },
+    setupMiddlewares(middlewares) {
+      return middlewares;
+    },
+  },
+};
+
+export default merge(baseConfig, configuration);

.erb/configs/webpack.paths.ts

@@ -0,0 +1,38 @@
+const path = require('path');
+
+const rootPath = path.join(__dirname, '../..');
+
+const dllPath = path.join(__dirname, '../dll');
+
+const srcPath = path.join(rootPath, 'src');
+const srcMainPath = path.join(srcPath, 'main');
+const srcRendererPath = path.join(srcPath, 'renderer');
+
+const releasePath = path.join(rootPath, 'release');
+const appPath = path.join(releasePath, 'app');
+const appPackagePath = path.join(appPath, 'package.json');
+const appNodeModulesPath = path.join(appPath, 'node_modules');
+const srcNodeModulesPath = path.join(srcPath, 'node_modules');
+
+const distPath = path.join(appPath, 'dist');
+const distMainPath = path.join(distPath, 'main');
+const distRendererPath = path.join(distPath, 'renderer');
+
+const buildPath = path.join(releasePath, 'build');
+
+export default {
+  rootPath,
+  dllPath,
+  srcPath,
+  srcMainPath,
+  srcRendererPath,
+  releasePath,
+  appPath,
+  appPackagePath,
+  appNodeModulesPath,
+  srcNodeModulesPath,
+  distPath,
+  distMainPath,
+  distRendererPath,
+  buildPath,
+};

.erb/mocks/fileMock.js

@@ -0,0 +1 @@
+export default 'test-file-stub';

.erb/scripts/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "rules": {
+    "no-console": "off",
+    "global-require": "off",
+    "import/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off"
+  }
+}

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

@@ -0,0 +1,24 @@
+// Check if the renderer and main bundles are built
+import path from 'path';
+import chalk from 'chalk';
+import fs from 'fs';
+import webpackPaths from '../configs/webpack.paths';
+
+const mainPath = path.join(webpackPaths.distMainPath, 'main.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"'
+    )
+  );
+}
+
+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"'
+    )
+  );
+}

.erb/scripts/check-native-dep.js

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import { dependencies } from '../../package.json';
+
+if (dependencies) {
+  const dependenciesKeys = Object.keys(dependencies);
+  const nativeDeps = fs
+    .readdirSync('node_modules')
+    .filter((folder) => fs.existsSync(`node_modules/${folder}/binding.gyp`));
+  if (nativeDeps.length === 0) {
+    process.exit(0);
+  }
+  try {
+    // Find the reason for why the dependency is installed. If it is installed
+    // because of a devDependency then that is okay. Warn when it is installed
+    // because of a dependency
+    const { dependencies: dependenciesObject } = JSON.parse(
+      execSync(`npm ls ${nativeDeps.join(' ')} --json`).toString()
+    );
+    const rootDependencies = Object.keys(dependenciesObject);
+    const filteredRootDependencies = rootDependencies.filter((rootDependency) =>
+      dependenciesKeys.includes(rootDependency)
+    );
+    if (filteredRootDependencies.length > 0) {
+      const plural = filteredRootDependencies.length > 1;
+      console.log(`
+ ${chalk.whiteBright.bgYellow.bold(
+   'Webpack does not work with native dependencies.'
+ )}
+${chalk.bold(filteredRootDependencies.join(', '))} ${
+        plural ? 'are native dependencies' : 'is a native dependency'
+      } and should be installed inside of the "./release/app" folder.
+ First, uninstall the packages from "./package.json":
+${chalk.whiteBright.bgGreen.bold('npm uninstall your-package')}
+ ${chalk.bold(
+   'Then, instead of installing the package to the root "./package.json":'
+ )}
+${chalk.whiteBright.bgRed.bold('npm install your-package')}
+ ${chalk.bold('Install the package to "./release/app/package.json"')}
+${chalk.whiteBright.bgGreen.bold(
+  'cd ./release/app && npm install your-package'
+)}
+ Read more about native dependencies at:
+${chalk.bold(
+  'https://electron-react-boilerplate.js.org/docs/adding-dependencies/#module-structure'
+)}
+ `);
+      process.exit(1);
+    }
+  } catch (e) {
+    console.log('Native dependencies could not be checked');
+  }
+}

.erb/scripts/check-node-env.js

@@ -0,0 +1,16 @@
+import chalk from 'chalk';
+
+export default function checkNodeEnv(expectedEnv) {
+  if (!expectedEnv) {
+    throw new Error('"expectedEnv" not set');
+  }
+
+  if (process.env.NODE_ENV !== expectedEnv) {
+    console.log(
+      chalk.whiteBright.bgRed.bold(
+        `"process.env.NODE_ENV" must be "${expectedEnv}" to use this webpack config`
+      )
+    );
+    process.exit(2);
+  }
+}

.erb/scripts/check-port-in-use.js

@@ -0,0 +1,16 @@
+import chalk from 'chalk';
+import detectPort from 'detect-port';
+
+const port = process.env.PORT || '4343';
+
+detectPort(port, (err, availablePort) => {
+  if (port !== String(availablePort)) {
+    throw new Error(
+      chalk.whiteBright.bgRed.bold(
+        `Port "${port}" on "localhost" is already in use. Please use another port. ex: PORT=4343 npm start`
+      )
+    );
+  } else {
+    process.exit(0);
+  }
+});

.erb/scripts/clean.js

@@ -0,0 +1,17 @@
+import rimraf from 'rimraf';
+import process from 'process';
+import webpackPaths from '../configs/webpack.paths';
+
+const args = process.argv.slice(2);
+const commandMap = {
+  dist: webpackPaths.distPath,
+  release: webpackPaths.releasePath,
+  dll: webpackPaths.dllPath,
+};
+
+args.forEach((x) => {
+  const pathToRemove = commandMap[x];
+  if (pathToRemove !== undefined) {
+    rimraf.sync(pathToRemove);
+  }
+});

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

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

.erb/scripts/electron-rebuild.js

@@ -0,0 +1,20 @@
+import { execSync } from 'child_process';
+import fs from 'fs';
+import { dependencies } from '../../release/app/package.json';
+import webpackPaths from '../configs/webpack.paths';
+
+if (
+  Object.keys(dependencies || {}).length > 0 &&
+  fs.existsSync(webpackPaths.appNodeModulesPath)
+) {
+  const electronRebuildCmd =
+    '../../node_modules/.bin/electron-rebuild --force --types prod,dev,optional --module-dir .';
+  const cmd =
+    process.platform === 'win32'
+      ? electronRebuildCmd.replace(/\//g, '\\')
+      : electronRebuildCmd;
+  execSync(cmd, {
+    cwd: webpackPaths.appPath,
+    stdio: 'inherit',
+  });
+}

.erb/scripts/link-modules.ts

@@ -0,0 +1,9 @@
+import fs from 'fs';
+import webpackPaths from '../configs/webpack.paths';
+
+const { srcNodeModulesPath } = webpackPaths;
+const { appNodeModulesPath } = webpackPaths;
+
+if (!fs.existsSync(srcNodeModulesPath) && fs.existsSync(appNodeModulesPath)) {
+  fs.symlinkSync(appNodeModulesPath, srcNodeModulesPath, 'junction');
+}

.erb/scripts/notarize.js

@@ -0,0 +1,30 @@
+const { notarize } = require('electron-notarize');
+const { build } = require('../../package.json');
+
+exports.default = async function notarizeMacos(context) {
+  const { electronPlatformName, appOutDir } = context;
+  if (electronPlatformName !== 'darwin') {
+    return;
+  }
+
+  if (process.env.CI !== 'true') {
+    console.warn('Skipping notarizing step. Packaging is not running in CI');
+    return;
+  }
+
+  if (!('APPLE_ID' in process.env && 'APPLE_ID_PASS' in process.env)) {
+    console.warn(
+      'Skipping notarizing step. APPLE_ID and APPLE_ID_PASS env variables must be set'
+    );
+    return;
+  }
+
+  const appName = context.packager.appInfo.productFilename;
+
+  await notarize({
+    appBundleId: build.appId,
+    appPath: `${appOutDir}/${appName}.app`,
+    appleId: process.env.APPLE_ID,
+    appleIdPassword: process.env.APPLE_ID_PASS,
+  });
+};

.eslintignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Coverage directory used by tools like istanbul
+coverage
+.eslintcache
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# OSX
+.DS_Store
+
+src/i18n
+release/app/dist
+release/build
+.erb/dll
+
+.idea
+npm-debug.log.*
+*.css.d.ts
+*.sass.d.ts
+*.scss.d.ts
+
+# eslint ignores hidden directories by default:
+# https://github.com/eslint/eslint/issues/8429
+!.erb

.eslintrc.js

@@ -0,0 +1,75 @@
+module.exports = {
+  extends: ['erb', 'plugin:typescript-sort-keys/recommended'],
+  parserOptions: {
+    createDefaultProgram: true,
+    ecmaVersion: 2020,
+    project: './tsconfig.json',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['import', 'sort-keys-fix'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-non-null-assertion': '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',
+    'react/jsx-props-no-spreading': 'off',
+    'react/jsx-sort-props': [
+      'error',
+      {
+        callbacksLast: true,
+        ignoreCase: false,
+        noSortAlphabetically: false,
+        reservedFirst: true,
+        shorthandFirst: true,
+        shorthandLast: false,
+      },
+    ],
+    // Since React 17 and typescript 4.1 you can safely disable the rule
+    'react/react-in-jsx-scope': '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: {},
+      webpack: {
+        config: require.resolve('./.erb/configs/webpack.config.eslint.ts'),
+      },
+    },
+  },
+};

.gitattributes

@@ -0,0 +1,12 @@
+*       text    eol=lf
+*.exe   binary
+*.png   binary
+*.jpg   binary
+*.jpeg  binary
+*.ico   binary
+*.icns  binary
+*.eot   binary
+*.otf   binary
+*.ttf   binary
+*.woff  binary
+*.woff2 binary

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/1-Bug_report.md

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

.github/ISSUE_TEMPLATE/2-Question.md

@@ -0,0 +1,19 @@
+---
+name: Question
+about: Ask a question.❓
+labels: 'question'
+---
+
+## Summary
+
+<!-- What do you need help with? -->
+
+<!---
+❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
+
+Donations will ensure the following:
+
+🔨 Long term maintenance of the project
+🛣 Progress on the roadmap
+🐛 Quick responses to bug reports and help requests
+ -->

.github/ISSUE_TEMPLATE/3-Feature_request.md

@@ -0,0 +1,15 @@
+---
+name: Feature request
+about: You want something added to the boilerplate. 🎉
+labels: 'enhancement'
+---
+
+<!---
+❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
+
+Donations will ensure the following:
+
+🔨 Long term maintenance of the project
+🛣 Progress on the roadmap
+🐛 Quick responses to bug reports and help requests
+ -->

.github/config.yml

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

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - 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.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/publish.yml

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

.github/workflows/test.yml

@@ -0,0 +1,34 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, windows-latest, ubuntu-latest]
+
+    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: 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

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Coverage directory used by tools like istanbul
+coverage
+.eslintcache
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# OSX
+.DS_Store
+
+release/app/dist
+release/build
+.erb/dll
+
+.idea
+npm-debug.log.*
+*.css.d.ts
+*.sass.d.ts
+*.scss.d.ts
+
+.env*

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 100,
+  "arrowParens": "always"
+}

.stylelintrc.json

@@ -0,0 +1,28 @@
+{
+  "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
+      }
+    ],
+    "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

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "stylelint.vscode-stylelint",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,30 @@
+{
+  "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

@@ -0,0 +1,30 @@
+{
+  "files.associations": {
+    ".eslintrc": "jsonc",
+    ".prettierrc": "jsonc",
+    ".eslintignore": "ignore"
+  },
+  "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
+  }
+}

.vscode/tasks.json

@@ -0,0 +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)\\.$"
+        }
+      }
+    }
+  ]
+}

CHANGELOG.md

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

Dockerfile

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

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

README.md

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

assets/assets.d.ts

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

assets/entitlements.mac.plist

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+  </dict>
+</plist>

docker-compose.dev.yml

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

docker-compose.yml

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

docker-entrypoint.sh

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

package.json

@@ -0,0 +1,309 @@
+{
+  "name": "sonixd",
+  "productName": "Sonixd",
+  "description": "A full-featured Subsonic/Jellyfin compatible music player",
+  "scripts": {
+    "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
+    "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
+    "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",
+    "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",
+    "docker:up": "docker compose --file docker-compose.dev.yml --env-file .env.dev up --detach && docker compose --file docker-compose.dev.yml --env-file .env.dev logs -f",
+    "docker:down": "docker compose --file docker-compose.dev.yml --env-file .env.dev down && docker image rm sonixd_prisma",
+    "docker:migrate": "cd src/server && npx prisma generate && docker exec -ti sonixd_server sh -c \"npx prisma generate && npx prisma db push\"",
+    "docker:reset": "docker exec -ti sonixd_server sh -c \"npx prisma migrate reset && npx prisma db push && npx ts-node prisma/seed.ts\""
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "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": {
+    "productName": "Sonixd",
+    "appId": "org.erb.sonixd",
+    "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
+    "asar": true,
+    "asarUnpack": "**\\*.{node,dll}",
+    "files": [
+      "dist",
+      "node_modules",
+      "package.json"
+    ],
+    "afterSign": ".erb/scripts/notarize.js",
+    "mac": {
+      "target": {
+        "target": "default",
+        "arch": [
+          "arm64",
+          "x64"
+        ]
+      },
+      "type": "distribution",
+      "hardenedRuntime": true,
+      "entitlements": "assets/entitlements.mac.plist",
+      "entitlementsInherit": "assets/entitlements.mac.plist",
+      "gatekeeperAssess": false
+    },
+    "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": "sonixd"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeffvli/sonixd.git"
+  },
+  "author": {
+    "name": "jeffvli",
+    "url": "https://github.com/jeffvli/"
+  },
+  "contributors": [],
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/jeffvli/sonixd/issues"
+  },
+  "keywords": [
+    "subsonic",
+    "navidrome",
+    "airsonic",
+    "jellyfin",
+    "react",
+    "electron"
+  ],
+  "homepage": "https://github.com/jeffvli/sonixd",
+  "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": {
+    "@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/jest": "^27.4.1",
+    "@types/lodash": "^4.14.182",
+    "@types/md5": "^2.3.2",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-lazy-load-image-component": "^1.5.2",
+    "@types/react-slider": "^1.3.1",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@types/styled-components": "^5.1.25",
+    "@types/terser-webpack-plugin": "^5.0.4",
+    "@types/webpack-bundle-analyzer": "^4.4.1",
+    "@types/webpack-env": "^1.16.3",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "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": "^18.0.1",
+    "electron-builder": "^23.0.3",
+    "electron-devtools-installer": "^3.2.0",
+    "electron-notarize": "^1.2.1",
+    "electron-rebuild": "^3.2.7",
+    "electronmon": "^2.0.2",
+    "eslint": "^8.12.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",
+    "typescript": "^4.6.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": {
+    "@jellyfin/client-axios": "^10.7.8",
+    "@mantine/core": "^5.0.0",
+    "@mantine/form": "^5.0.0",
+    "@mantine/hooks": "^5.0.0",
+    "axios": "^0.26.1",
+    "electron-debug": "^3.2.0",
+    "electron-log": "^4.4.6",
+    "electron-updater": "^4.6.5",
+    "format-duration": "^2.0.0",
+    "framer-motion": "^6.4.2",
+    "history": "^5.3.0",
+    "i18next": "^21.6.16",
+    "immer": "^9.0.15",
+    "is-electron": "^2.2.1",
+    "lodash": "^4.17.21",
+    "md5": "^2.3.0",
+    "nanoid": "^3.3.3",
+    "net": "^1.0.2",
+    "node-mpv": "^2.0.0-beta.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-helmet-async": "^1.3.0",
+    "react-i18next": "^11.16.7",
+    "react-lazy-load-image-component": "^1.5.4",
+    "react-player": "^2.10.0",
+    "react-query": "^4.0.0-beta.23",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "react-slider": "^2.0.0",
+    "react-spaces": "^0.3.4",
+    "react-use": "^17.3.2",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.7",
+    "react-window-infinite-loader": "^1.0.8",
+    "styled-components": "^5.3.5",
+    "tabler-icons-react": "^1.46.0",
+    "zustand": "^4.0.0-rc.1"
+  },
+  "resolutions": {
+    "styled-components": "^5"
+  },
+  "devEngines": {
+    "node": ">=14.x",
+    "npm": ">=7.x"
+  },
+  "browserslist": [],
+  "prettier": {
+    "overrides": [
+      {
+        "files": [
+          ".prettierrc",
+          ".eslintrc"
+        ],
+        "options": {
+          "parser": "json"
+        }
+      }
+    ],
+    "singleQuote": true
+  }
+}

release/app/package-lock.json

@@ -0,0 +1,14 @@
+{
+  "name": "sonixd",
+  "version": "1.0.0-alpha1",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "sonixd",
+      "version": "1.0.0-alpha1",
+      "hasInstallScript": true,
+      "license": "MIT"
+    }
+  }
+}

release/app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "sonixd",
+  "version": "1.0.0-alpha1",
+  "description": "A full-featured Subsonic/Jellyfin compatible desktop client",
+  "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": {},
+  "license": "MIT"
+}

src/__tests__/App.test.tsx

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

src/i18n/i18n.js

@@ -0,0 +1,32 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+const en = require('./locales/en.json');
+
+const resources = {
+  en: { translation: en },
+};
+
+export const Languages = [
+  {
+    label: 'English',
+    value: 'en',
+  },
+];
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    fallbackLng: 'en',
+    // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+
+    lng: 'en',
+
+    resources,
+  });
+
+export default i18n;

src/i18n/i18next-parser.config.js

@@ -0,0 +1,117 @@
+// i18next-parser.config.js
+
+module.exports = {
+  contextSeparator: '_',
+  // Key separator used in your translation keys
+
+  createOldCatalogs: true,
+
+  // Exit with an exit code of 1 when translations are updated (for CI purpose)
+  customValueTemplate: null,
+
+  // Save the \_old files
+  defaultNamespace: 'translation',
+
+  // Default namespace used in your i18next config
+  defaultValue: '',
+
+  // Exit with an exit code of 1 on warnings
+  failOnUpdate: false,
+
+  // Display info about the parsing including some stats
+  failOnWarnings: false,
+
+  // The locale to compare with default values to determine whether a default value has been changed.
+  // If this is set and a default value differs from a translation in the specified locale, all entries
+  // for that key across locales are reset to the default value, and existing translations are moved to
+  // the `_old` file.
+  i18nextOptions: null,
+
+  // Default value to give to empty keys
+  // You may also specify a function accepting the locale, namespace, and key as arguments
+  indentation: 2,
+
+  // Plural separator used in your translation keys
+  // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
+  input: [
+    '../components/**/*.{js,jsx,ts,tsx}',
+    '../features/**/*.{js,jsx,ts,tsx}',
+    '../layouts/**/*.{js,jsx,ts,tsx}',
+    '!../../src/node_modules/**',
+    '!../../src/**/*.prod.js',
+  ],
+
+  // Indentation of the catalog files
+  keepRemoved: false,
+
+  // Keep keys from the catalog that are no longer in code
+  keySeparator: '.',
+
+  // Key separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  // see below for more details
+  lexers: {
+    default: ['JavascriptLexer'],
+    handlebars: ['HandlebarsLexer'],
+
+    hbs: ['HandlebarsLexer'],
+    htm: ['HTMLLexer'],
+
+    html: ['HTMLLexer'],
+    js: ['JavascriptLexer'],
+    jsx: ['JsxLexer'],
+
+    mjs: ['JavascriptLexer'],
+    // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ['JavascriptLexer'],
+
+    tsx: ['JsxLexer'],
+  },
+
+  lineEnding: 'auto',
+
+  // Control the line ending. See options at https://github.com/ryanve/eol
+  locales: ['en'],
+
+  // An array of the locales in your applications
+  namespaceSeparator: false,
+
+  // Namespace separator used in your translation keys
+  // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
+  output: 'src/renderer/i18n/locales/$LOCALE.json',
+
+  // Supports $LOCALE and $NAMESPACE injection
+  // Supports JSON (.json) and YAML (.yml) file formats
+  // Where to write the locale files relative to process.cwd()
+  pluralSeparator: '_',
+
+  // If you wish to customize the value output the value as an object, you can set your own format.
+  // ${defaultValue} is the default value you set in your translation function.
+  // Any other custom property will be automatically extracted.
+  //
+  // Example:
+  // {
+  //   message: "${defaultValue}",
+  //   description: "${maxLength}", //
+  // }
+  resetDefaultValueLocale: 'en',
+
+  // Whether or not to sort the catalog. Can also be a [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#parameters)
+  skipDefaultValues: false,
+
+  // An array of globs that describe where to look for source files
+  // relative to the location of the configuration file
+  sort: true,
+
+  // Whether to ignore default values
+  // You may also specify a function accepting the locale and namespace as arguments
+  useKeysAsDefaultValue: true,
+
+  // Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
+  // This option takes precedence over the `defaultValue` and `skipDefaultValues` options
+  // You may also specify a function accepting the locale and namespace as arguments
+  verbose: false,
+  // If you wish to customize options in internally used i18next instance, you can define an object with any
+  // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options).
+  // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals.
+};

src/i18n/locales/en.json

@@ -0,0 +1,9 @@
+{
+  "player": {
+    "next": "player.next",
+    "play": "player.play",
+    "prev": "player.prev",
+    "seekBack": "player.seekBack",
+    "seekForward": "player.seekForward"
+  }
+}

src/main/features/core/index.ts

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

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

@@ -0,0 +1,117 @@
+import { ipcMain } from 'electron';
+import MpvAPI from 'node-mpv';
+import { PlayerData } from '../../../../renderer/store';
+import { getMainWindow } from '../../../main';
+
+const mpv = new MpvAPI(
+  {
+    audio_only: true,
+    auto_restart: true,
+    binary: 'C:/ProgramData/chocolatey/lib/mpv.install/tools/mpv.exe',
+    time_update: 1,
+  },
+  ['--gapless-audio=yes', '--prefetch-playlist']
+);
+
+mpv.start().catch((error: any) => {
+  console.log('error', error);
+});
+
+mpv.on('status', (status: any) => {
+  if (status.property === 'playlist-pos') {
+    if (status.value !== 0) {
+      getMainWindow()?.webContents.send('renderer-player-set-queue-next');
+    }
+  }
+});
+
+// Automatically updates the play button when the player is playing
+mpv.on('started', () => {
+  getMainWindow()?.webContents.send('renderer-player-play');
+});
+
+// Automatically updates the play button when the player is stopped
+mpv.on('stopped', () => {
+  getMainWindow()?.webContents.send('renderer-player-stop');
+});
+
+// Automatically updates the play button when the player is paused
+mpv.on('paused', () => {
+  getMainWindow()?.webContents.send('renderer-player-pause');
+});
+
+mpv.on('quit', () => {
+  console.log('mpv quit');
+});
+
+// Event output every interval set by time_update, used to update the current time
+mpv.on('timeposition', (time: number) => {
+  getMainWindow()?.webContents.send('renderer-player-current-time', time);
+});
+
+mpv.on('seek', () => {
+  console.log('mpv seek');
+});
+
+// Starts the player
+ipcMain.on('player-play', async () => {
+  await mpv.play();
+});
+
+// Pauses the player
+ipcMain.on('player-pause', async () => {
+  await mpv.pause();
+});
+
+// Stops the player
+ipcMain.on('player-stop', async () => {
+  await mpv.stop();
+});
+
+// Stops the player
+ipcMain.on('player-next', async () => {
+  await mpv.next();
+});
+
+// Stops the player
+ipcMain.on('player-previous', async () => {
+  await mpv.previous();
+});
+
+// Seeks forward or backward by the given amount of seconds
+ipcMain.on('player-seek', async (_event, time: number) => {
+  await mpv.seek(time);
+});
+
+// Seeks to the given time in seconds
+ipcMain.on('player-seek-to', async (_event, time: number) => {
+  await mpv.goToPosition(time);
+});
+
+// Sets the queue to the given data. Used when manually starting a song or using the next/prev buttons
+ipcMain.on('player-set-queue', async (_event, data: PlayerData) => {
+  if (data.queue.current) {
+    await mpv.load(data.queue.current.streamUrl, 'replace');
+  }
+
+  if (data.queue.next) {
+    await mpv.load(data.queue.next.streamUrl, 'append');
+  }
+});
+
+// Sets the next song in the queue when reaching the end of the queue
+ipcMain.on('player-set-queue-next', async (_event, data: PlayerData) => {
+  if (data.queue.next) {
+    await mpv.load(data.queue.next.streamUrl, 'append');
+  }
+});
+
+// Sets the volume to the given value (0-100)
+ipcMain.on('player-volume', async (_event, value: number) => {
+  mpv.volume(value);
+});
+
+// Toggles the mute status
+ipcMain.on('player-mute', async () => {
+  mpv.mute();
+});

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

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

src/main/features/index.ts

@@ -0,0 +1,4 @@
+import './core';
+
+// eslint-disable-next-line import/no-dynamic-require
+require(`./${process.platform}`);

src/main/main.ts

@@ -0,0 +1,165 @@
+/* eslint global-require: off, no-console: off, promise/always-return: off */
+
+/**
+ * This module executes inside of electron's main process. You can start
+ * electron renderer process from here and communicate with the other processes
+ * through IPC.
+ *
+ * When running `npm run build` or `npm run build:main`, this file is compiled to
+ * `./src/main.js` using webpack. This gives us some performance wins.
+ */
+import path from 'path';
+import { app, BrowserWindow, shell, ipcMain } from 'electron';
+import log from 'electron-log';
+import { autoUpdater } from 'electron-updater';
+import MenuBuilder from './menu';
+import { resolveHtmlPath } from './utils';
+import './features';
+
+export default class AppUpdater {
+  constructor() {
+    log.transports.file.level = 'info';
+    autoUpdater.logger = log;
+    autoUpdater.checkForUpdatesAndNotify();
+  }
+}
+
+let mainWindow: BrowserWindow | null = null;
+
+if (process.env.NODE_ENV === 'production') {
+  const sourceMapSupport = require('source-map-support');
+  sourceMapSupport.install();
+}
+
+const isDevelopment =
+  process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
+
+if (isDevelopment) {
+  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'];
+
+  return installer
+    .default(
+      extensions.map((name) => installer[name]),
+      forceDownload
+    )
+    .catch(console.log);
+};
+
+const createWindow = async () => {
+  if (isDevelopment) {
+    await installExtensions();
+  }
+
+  const RESOURCES_PATH = app.isPackaged
+    ? path.join(process.resourcesPath, 'assets')
+    : path.join(__dirname, '../../assets');
+
+  const getAssetPath = (...paths: string[]): string => {
+    return path.join(RESOURCES_PATH, ...paths);
+  };
+
+  mainWindow = new BrowserWindow({
+    frame: false,
+    height: 728,
+    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'),
+    },
+    width: 1024,
+  });
+
+  ipcMain.on('window-maximize', () => {
+    mainWindow?.maximize();
+  });
+
+  ipcMain.on('window-unmaximize', () => {
+    mainWindow?.unmaximize();
+  });
+
+  ipcMain.on('window-minimize', () => {
+    mainWindow?.minimize();
+  });
+
+  ipcMain.on('window-close', () => {
+    mainWindow?.close();
+  });
+
+  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();
+    }
+  });
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+
+  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' };
+  });
+
+  // Remove this if your app does not use auto updates
+  // eslint-disable-next-line
+  new AppUpdater();
+};
+
+/**
+ * Add event listeners...
+ */
+
+app.commandLine.appendSwitch(
+  'disable-features',
+  'HardwareMediaKeyHandling,MediaSessionService'
+);
+
+export const getMainWindow = () => {
+  return mainWindow;
+};
+
+app.on('window-all-closed', () => {
+  // Respect the OSX convention of having the application in memory even
+  // after all windows have been closed
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app
+  .whenReady()
+  .then(() => {
+    createWindow();
+    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

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

src/main/preload.ts

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

src/main/utils.ts

@@ -0,0 +1,31 @@
+/* eslint import/prefer-default-export: off, import/no-mutable-exports: off */
+import path from 'path';
+import process from 'process';
+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;
+  };
+} else {
+  resolveHtmlPath = (htmlFileName: string) => {
+    return `file://${path.resolve(__dirname, '../renderer/', htmlFileName)}`;
+  };
+}
+
+export const isMacOS = () => {
+  return process.platform === 'darwin';
+};
+
+export const isWindows = () => {
+  return process.platform === 'win32';
+};
+
+export const isLinux = () => {
+  return process.platform === 'linux';
+};

src/renderer/api/albumsApi.ts

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

src/renderer/api/authApi.ts

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

src/renderer/api/queries/useAlbum.ts

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

src/renderer/api/queryKeys.ts

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

src/renderer/api/serversApi.ts

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

src/renderer/api/types.ts

@@ -0,0 +1,162 @@
+export interface BaseResponse<T> {
+  data: T;
+  error?: string | any;
+  response: 'Success' | 'Error';
+  statusCode: number;
+}
+
+export interface BasePaginatedResponse<T> {
+  data: T;
+  error?: string | any;
+  pagination: {
+    nextPage: string | null;
+    prevPage: string | null;
+    startIndex: number;
+    totalEntries: number;
+  };
+  response: 'Success' | 'Error';
+  statusCode: number;
+}
+
+export interface BasePaginationRequest {
+  limit: number;
+  page: number;
+}
+
+export type ServerResponse = {
+  createdAt: string;
+  id: number;
+  name: string;
+  remoteUserId: string;
+  serverFolder?: ServerFolderResponse[];
+  serverType: string;
+  token: string;
+  updatedAt: string;
+  url: string;
+  username: string;
+};
+
+export type ServerFolderResponse = {
+  createdAt: string;
+  enabled: boolean;
+  id: number;
+  isPublic: boolean;
+  name: string;
+  remoteId: string;
+  serverId: number;
+  updatedAt: string;
+};
+
+export type User = {
+  createdAt: string;
+  enabled: boolean;
+  id: number;
+  isAdmin: boolean;
+  password: string;
+  updatedAt: string;
+  username: string;
+};
+
+export type Login = {
+  accessToken: string;
+  refreshToken: string;
+} & User;
+
+export type Ping = {
+  description: string;
+  name: string;
+  version: string;
+};
+
+export type GenreResponse = {
+  createdAt: string;
+  id: number;
+  name: string;
+  updatedAt: string;
+};
+
+export type ArtistResponse = {
+  biography: string | null;
+  createdAt: string;
+  id: number;
+  name: string;
+  remoteCreatedAt: string | null;
+  remoteId: string;
+  serverFolderId: number;
+  updatedAt: string;
+};
+
+export type ExternalResponse = {
+  createdAt: string;
+  id: number;
+  name: string;
+  updatedAt: string;
+  url: string;
+};
+
+export type ImageResponse = {
+  createdAt: string;
+  id: number;
+  name: string;
+  updatedAt: string;
+  url: string;
+};
+
+export type PingResponse = BaseResponse<Ping>;
+
+export type LoginResponse = BaseResponse<Login>;
+
+export type UserResponse = BaseResponse<User>;
+
+export type AlbumResponse = BaseResponse<Album>;
+
+export type AlbumsResponse = BasePaginatedResponse<Album[]>;
+
+export interface Album {
+  _count: Count;
+  albumArtistId: number;
+  createdAt: string;
+  date: string;
+  genres: GenreResponse[];
+  id: number;
+  name: string;
+  remoteCreatedAt: string;
+  remoteId: string;
+  serverFolderId: number;
+  songs: Song[];
+  updatedAt: string;
+  year: number;
+}
+
+export interface Song {
+  album?: Partial<Album>;
+  albumId: number;
+  artistName: null;
+  artists?: ArtistResponse[];
+  bitRate: number;
+  container: string;
+  createdAt: string;
+  date: string;
+  disc: number;
+  duration: number;
+  externals?: ExternalResponse[];
+  id: number;
+  images?: ImageResponse[];
+  name: string;
+  remoteCreatedAt: string;
+  remoteId: string;
+  serverFolderId: number;
+  track: number;
+  updatedAt: string;
+  year: number;
+}
+
+export type Count = {
+  artists?: number;
+  externals?: number;
+  favorites?: number;
+  genres?: number;
+  images?: number;
+  ratings?: number;
+  songs?: number;
+};

src/renderer/api/usersApi.ts

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

src/renderer/app.tsx

@@ -0,0 +1,54 @@
+import { ReactNode, useEffect } from 'react';
+import { MantineProvider } from '@mantine/core';
+import { useLocalStorage } from '@mantine/hooks';
+import isElectron from 'is-electron';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
+import { useDefaultSettings } from './features/settings';
+import { AppRouter } from './router/AppRouter';
+import './styles/global.scss';
+
+const SelectRouter = ({ children }: { children: ReactNode }) => {
+  if (isElectron()) {
+    return <HashRouter>{children}</HashRouter>;
+  }
+
+  return <BrowserRouter>{children}</BrowserRouter>;
+};
+
+export const App = () => {
+  const [theme] = useLocalStorage({
+    defaultValue: 'dark',
+    key: 'theme',
+  });
+
+  useDefaultSettings();
+
+  useEffect(() => {
+    document.body.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return (
+    <MantineProvider
+      theme={{
+        colorScheme: 'dark',
+        defaultRadius: 'xs',
+        focusRing: 'auto',
+        fontSizes: {
+          lg: 16,
+          md: 14,
+          sm: 12,
+          xl: 18,
+          xs: 10,
+        },
+        other: {},
+        spacing: {
+          xs: 2,
+        },
+      }}
+    >
+      <SelectRouter>
+        <AppRouter />
+      </SelectRouter>
+    </MantineProvider>
+  );
+};

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

@@ -0,0 +1,184 @@
+import {
+  useImperativeHandle,
+  forwardRef,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
+import ReactPlayer, { ReactPlayerProps } from 'react-player';
+import {
+  CrossfadeStyle,
+  PlaybackStyle,
+  PlayerStatus,
+  Song,
+} from '../../../types';
+import { crossfadeHandler, gaplessHandler } from './utils/listenHandlers';
+
+interface AudioPlayerProps extends ReactPlayerProps {
+  crossfadeDuration: number;
+  crossfadeStyle: CrossfadeStyle;
+  currentPlayer: 1 | 2;
+  player1: Song;
+  player2: Song;
+  status: PlayerStatus;
+  style: PlaybackStyle;
+  volume: number;
+}
+
+export type AudioPlayerProgress = {
+  loaded: number;
+  loadedSeconds: number;
+  played: number;
+  playedSeconds: number;
+};
+
+const getDuration = (ref: any) => {
+  return ref.current?.player?.player?.player?.duration;
+};
+
+export const AudioPlayer = forwardRef(
+  (
+    {
+      status,
+      style,
+      crossfadeStyle,
+      crossfadeDuration,
+      currentPlayer,
+      autoNext,
+      player1,
+      player2,
+      muted,
+      volume,
+    }: AudioPlayerProps,
+    ref: any
+  ) => {
+    const player1Ref = useRef<any>(null);
+    const player2Ref = useRef<any>(null);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+
+    useImperativeHandle(ref, () => ({
+      get player1() {
+        return player1Ref?.current;
+      },
+      get player2() {
+        return player2Ref?.current;
+      },
+    }));
+
+    const handleOnEnded = () => {
+      autoNext();
+      setIsTransitioning(false);
+    };
+
+    const handleCrossfade1 = useCallback(
+      (e: AudioPlayerProgress) => {
+        return crossfadeHandler({
+          currentPlayer,
+          currentPlayerRef: player1Ref,
+          currentTime: e.playedSeconds,
+          duration: getDuration(player1Ref),
+          fadeDuration: crossfadeDuration,
+          fadeType: crossfadeStyle,
+          isTransitioning,
+          nextPlayerRef: player2Ref,
+          player: 1,
+          setIsTransitioning,
+          volume,
+        });
+      },
+      [
+        crossfadeDuration,
+        crossfadeStyle,
+        currentPlayer,
+        isTransitioning,
+        volume,
+      ]
+    );
+
+    const handleCrossfade2 = useCallback(
+      (e: AudioPlayerProgress) => {
+        return crossfadeHandler({
+          currentPlayer,
+          currentPlayerRef: player2Ref,
+          currentTime: e.playedSeconds,
+          duration: getDuration(player2Ref),
+          fadeDuration: crossfadeDuration,
+          fadeType: crossfadeStyle,
+          isTransitioning,
+          nextPlayerRef: player1Ref,
+          player: 2,
+          setIsTransitioning,
+          volume,
+        });
+      },
+      [
+        crossfadeDuration,
+        crossfadeStyle,
+        currentPlayer,
+        isTransitioning,
+        volume,
+      ]
+    );
+
+    const handleGapless1 = useCallback(
+      (e: AudioPlayerProgress) => {
+        return gaplessHandler({
+          currentTime: e.playedSeconds,
+          duration: getDuration(player1Ref),
+          isFlac: player1?.suffix === 'flac',
+          isTransitioning,
+          nextPlayerRef: player2Ref,
+          setIsTransitioning,
+        });
+      },
+      [isTransitioning, player1?.suffix]
+    );
+
+    const handleGapless2 = useCallback(
+      (e: AudioPlayerProgress) => {
+        return gaplessHandler({
+          currentTime: e.playedSeconds,
+          duration: getDuration(player2Ref),
+          isFlac: player2?.suffix === 'flac',
+          isTransitioning,
+          nextPlayerRef: player1Ref,
+          setIsTransitioning,
+        });
+      },
+      [isTransitioning, player2?.suffix]
+    );
+
+    return (
+      <>
+        <ReactPlayer
+          ref={player1Ref}
+          height={0}
+          muted={muted}
+          playing={currentPlayer === 1 && status === PlayerStatus.Playing}
+          progressInterval={isTransitioning ? 10 : 250}
+          url={player1?.streamUrl}
+          volume={volume}
+          width={0}
+          onEnded={handleOnEnded}
+          onProgress={
+            style === PlaybackStyle.Gapless ? handleGapless1 : handleCrossfade1
+          }
+        />
+        <ReactPlayer
+          ref={player2Ref}
+          height={0}
+          muted={muted}
+          playing={currentPlayer === 2 && status === PlayerStatus.Playing}
+          progressInterval={isTransitioning ? 10 : 250}
+          url={player2?.streamUrl}
+          volume={volume}
+          width={0}
+          onEnded={handleOnEnded}
+          onProgress={
+            style === PlaybackStyle.Gapless ? handleGapless2 : handleCrossfade2
+          }
+        />
+      </>
+    );
+  }
+);

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

@@ -0,0 +1,147 @@
+/* eslint-disable no-nested-ternary */
+import { Dispatch } from 'react';
+import { CrossfadeStyle } from '../../../../types';
+
+export const gaplessHandler = (args: {
+  currentTime: number;
+  duration: number;
+  isFlac: boolean;
+  isTransitioning: boolean;
+  nextPlayerRef: any;
+  setIsTransitioning: Dispatch<boolean>;
+}) => {
+  const {
+    nextPlayerRef,
+    currentTime,
+    duration,
+    isTransitioning,
+    setIsTransitioning,
+    isFlac,
+  } = args;
+
+  if (!isTransitioning) {
+    if (currentTime > duration - 2) {
+      return setIsTransitioning(true);
+    }
+
+    return null;
+  }
+
+  const durationPadding = isFlac ? 0.065 : 0.116;
+  if (currentTime + durationPadding >= duration) {
+    return nextPlayerRef.current.getInternalPlayer().play();
+  }
+
+  return null;
+};
+
+export const crossfadeHandler = (args: {
+  currentPlayer: 1 | 2;
+  currentPlayerRef: any;
+  currentTime: number;
+  duration: number;
+  fadeDuration: number;
+  fadeType: CrossfadeStyle;
+  isTransitioning: boolean;
+  nextPlayerRef: any;
+  player: 1 | 2;
+  setIsTransitioning: Dispatch<boolean>;
+  volume: number;
+}) => {
+  const {
+    currentTime,
+    player,
+    currentPlayer,
+    currentPlayerRef,
+    nextPlayerRef,
+    fadeDuration,
+    fadeType,
+    duration,
+    volume,
+    isTransitioning,
+    setIsTransitioning,
+  } = args;
+
+  if (!isTransitioning || currentPlayer !== player) {
+    const shouldBeginTransition = currentTime >= duration - fadeDuration;
+
+    if (shouldBeginTransition) {
+      setIsTransitioning(true);
+      return nextPlayerRef.current.getInternalPlayer().play();
+    }
+    return null;
+  }
+
+  const timeLeft = duration - currentTime;
+  let currentPlayerVolumeCalculation;
+  let nextPlayerVolumeCalculation;
+  let percentageOfFadeLeft;
+  let n;
+  switch (fadeType) {
+    case 'equalPower':
+      // https://dsp.stackexchange.com/a/14755
+      percentageOfFadeLeft = (timeLeft / fadeDuration) * 2;
+      currentPlayerVolumeCalculation =
+        Math.sqrt(0.5 * percentageOfFadeLeft) * volume;
+      nextPlayerVolumeCalculation =
+        Math.sqrt(0.5 * (2 - percentageOfFadeLeft)) * volume;
+      break;
+    case 'linear':
+      currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
+      nextPlayerVolumeCalculation =
+        ((fadeDuration - timeLeft) / fadeDuration) * volume;
+      break;
+    case 'dipped':
+      // https://math.stackexchange.com/a/4622
+      percentageOfFadeLeft = timeLeft / fadeDuration;
+      currentPlayerVolumeCalculation = percentageOfFadeLeft ** 2 * volume;
+      nextPlayerVolumeCalculation = (percentageOfFadeLeft - 1) ** 2 * volume;
+      break;
+    case fadeType.match(/constantPower.*/)?.input:
+      // https://math.stackexchange.com/a/26159
+      n =
+        fadeType === 'constantPower'
+          ? 0
+          : fadeType === 'constantPowerSlowFade'
+          ? 1
+          : fadeType === 'constantPowerSlowCut'
+          ? 3
+          : 10;
+
+      percentageOfFadeLeft = timeLeft / fadeDuration;
+      currentPlayerVolumeCalculation =
+        Math.cos(
+          (Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) - 1)
+        ) * volume;
+      nextPlayerVolumeCalculation =
+        Math.cos(
+          (Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) + 1)
+        ) * volume;
+      break;
+
+    default:
+      currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
+      nextPlayerVolumeCalculation =
+        ((fadeDuration - timeLeft) / fadeDuration) * volume;
+      break;
+  }
+
+  const currentPlayerVolume =
+    currentPlayerVolumeCalculation >= 0 ? currentPlayerVolumeCalculation : 0;
+
+  const nextPlayerVolume =
+    nextPlayerVolumeCalculation <= volume
+      ? nextPlayerVolumeCalculation
+      : volume;
+
+  if (currentPlayer === 1) {
+    currentPlayerRef.current.getInternalPlayer().volume = currentPlayerVolume;
+    nextPlayerRef.current.getInternalPlayer().volume = nextPlayerVolume;
+  } else {
+    currentPlayerRef.current.getInternalPlayer().volume = currentPlayerVolume;
+    nextPlayerRef.current.getInternalPlayer().volume = nextPlayerVolume;
+  }
+  // }
+
+  return null;
+};

src/renderer/components/button/Button.tsx

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

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

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

src/renderer/components/index.ts

@@ -0,0 +1,4 @@
+export * from './tooltip/Tooltip';
+export * from './audio-player/AudioPlayer';
+export * from './icon-button/IconButton';
+export * from './text/Text';

src/renderer/components/modal/Modal.tsx

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

src/renderer/components/text/Text.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import {
+  Text as MantineText,
+  TextProps as MantineTextProps,
+} from '@mantine/core';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Font } from 'renderer/styles';
+import { textEllipsis } from 'renderer/styles/mixins';
+
+interface TextProps extends MantineTextProps<'div'> {
+  children: ReactNode;
+  font?: Font;
+  link?: boolean;
+  noSelect?: boolean;
+  overflow?: 'hidden' | 'visible';
+  secondary?: boolean;
+  to?: string;
+  weight?: number;
+}
+
+interface LinkTextProps extends MantineTextProps<'Link'> {
+  children: ReactNode;
+  font?: Font;
+  link?: boolean;
+  overflow?: 'hidden' | 'visible';
+  secondary?: boolean;
+  to: string;
+  weight?: number;
+}
+
+const BaseText = styled(MantineText)<any>`
+  color: ${(props) =>
+    props.$secondary
+      ? 'var(--playerbar-text-secondary-color)'
+      : 'var(--playerbar-text-primary-color)'};
+  font-family: ${(props) => props.font || Font.GOTHAM};
+  cursor: ${(props) => (props.link ? 'cursor' : 'default')};
+  user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
+  ${(props) => props.overflow === 'hidden' && textEllipsis}
+`;
+
+const StyledText = styled(BaseText)<TextProps>``;
+
+const StyledLinkText = styled(BaseText)<LinkTextProps>``;
+
+export const Text = ({
+  children,
+  link,
+  secondary,
+  overflow,
+  font,
+  to,
+  noSelect,
+  ...rest
+}: TextProps) => {
+  if (link) {
+    return (
+      <StyledLinkText<typeof Link>
+        $noSelect={noSelect}
+        $secondary={secondary}
+        component={Link}
+        font={font}
+        link="true"
+        overflow={overflow}
+        to={to || ''}
+        {...rest}
+      >
+        {children}
+      </StyledLinkText>
+    );
+  }
+
+  return (
+    <StyledText
+      $noSelect={noSelect}
+      $secondary={secondary}
+      font={font}
+      overflow={overflow}
+      {...rest}
+    >
+      {children}
+    </StyledText>
+  );
+};
+
+Text.defaultProps = {
+  font: Font.GOTHAM,
+  link: false,
+  noSelect: false,
+  overflow: 'visible',
+  secondary: false,
+  to: '',
+  weight: 500,
+};

src/renderer/components/tooltip/Tooltip.module.scss

@@ -0,0 +1,9 @@
+.body {
+  padding: 5px;
+  color: var(--tooltip-text-color);
+  background: var(--tooltip-bg);
+}
+
+.arrow {
+  background: var(--tooltip-bg);
+}

src/renderer/components/tooltip/Tooltip.tsx

@@ -0,0 +1,32 @@
+import { Tooltip as MantineTooltip, TooltipProps } from '@mantine/core';
+import styles from './Tooltip.module.scss';
+
+export const Tooltip = ({ children, ...rest }: TooltipProps) => {
+  return (
+    <MantineTooltip
+      classNames={{ arrow: styles.arrow, body: styles.body }}
+      radius="xs"
+      styles={{
+        arrow: {
+          background: 'var(--tooltip-bg)',
+        },
+        body: {
+          background: 'var(--tooltip-bg)',
+          color: 'var(--tooltip-text-color)',
+          padding: '5px',
+        },
+      }}
+      {...rest}
+    >
+      {children}
+    </MantineTooltip>
+  );
+};
+
+Tooltip.defaultProps = {
+  openDelay: 0,
+  placement: 'center',
+  transition: 'fade',
+  transitionDuration: 250,
+  withArrow: true,
+};

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

@@ -0,0 +1,156 @@
+import { Card } from '@mantine/core';
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+import { CardRow } from 'renderer/types';
+import { Text } from '../text/Text';
+import { GridCardControls } from './GridCardControls';
+
+const CardWrapper = styled(motion.div)<{
+  itemGap: number;
+  itemHeight: number;
+  itemWidth: number;
+}>`
+  display: flex;
+  flex: ${({ itemWidth }) => `0 0 ${itemWidth}px`};
+  width: ${({ itemWidth }) => `${itemWidth}px`};
+  height: ${({ itemHeight }) => `${itemHeight}px`};
+  margin: ${({ itemGap }) => `0 ${itemGap / 2}px`};
+  border-radius: 3px;
+  filter: drop-shadow(0 4px 4px #000);
+  user-select: none;
+  pointer-events: auto; // https://github.com/bvaughn/react-window/issues/128#issuecomment-460166682
+
+  &:focus-visible {
+    outline: 1px solid #fff;
+  }
+`;
+
+const StyledCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background-color: rgb(50, 50, 50, 50%);
+  border-radius: 3px;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: rgb(50, 50, 50, 60%);
+  }
+`;
+
+const ImageSection = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+const Image = styled(motion.div)<{ height: number; src: string }>`
+  height: ${({ height }) => `${height}px`};
+  background: ${({ src }) => `url(${src})`};
+  background-position: center;
+  background-size: cover;
+  border: 0;
+`;
+
+const ControlsContainer = styled.div`
+  display: none;
+  width: 100%;
+  height: 100%;
+
+  ${StyledCard}:hover & {
+    display: block;
+  }
+`;
+
+const DetailSection = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Row = styled.div`
+  height: 25px;
+  padding: 0 0.2rem;
+`;
+
+export const GridCard = ({ data, index, style, isScrolling }: any) => {
+  const {
+    itemHeight,
+    itemWidth,
+    columnCount,
+    itemGap,
+    itemCount,
+    cardControls,
+    cardRows,
+    itemData,
+    handlePlayQueueAdd,
+  } = data;
+
+  const startIndex = index * columnCount;
+  const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
+  const cards = [];
+
+  for (let i = startIndex; i <= stopIndex; i += 1) {
+    cards.push(
+      <CardWrapper
+        key={`card-${i}-${index}`}
+        itemGap={itemGap}
+        itemHeight={itemHeight}
+        itemWidth={itemWidth}
+        tabIndex={0}
+      >
+        <StyledCard>
+          <ImageSection>
+            <Image
+              animate={{
+                opacity: 1,
+              }}
+              height={itemWidth}
+              initial={{
+                opacity: 0,
+              }}
+              src={itemData[i]?.image}
+              transition={{
+                duration: 0.5,
+                ease: 'anticipate',
+              }}
+            >
+              {!isScrolling && (
+                <ControlsContainer>
+                  <GridCardControls
+                    cardControls={cardControls}
+                    handlePlayQueueAdd={handlePlayQueueAdd}
+                    itemData={itemData[i]}
+                  />
+                </ControlsContainer>
+              )}
+            </Image>
+          </ImageSection>
+          <DetailSection>
+            {cardRows.map((row: CardRow) => (
+              <Row key={`row-${row.prop}`}>
+                <Text overflow="hidden" weight={500}>
+                  {itemData[i] && itemData[i][row.prop]}
+                </Text>
+              </Row>
+            ))}
+          </DetailSection>
+        </StyledCard>
+      </CardWrapper>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        ...style,
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'start',
+      }}
+    >
+      {cards}
+    </div>
+  );
+};

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { UnstyledButton, UnstyledButtonProps } from '@mantine/core';
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+import { PlayerPlay } from 'tabler-icons-react';
+
+type PlayButtonType = UnstyledButtonProps &
+  React.ComponentPropsWithoutRef<'button'>;
+
+const PlayButton = styled(UnstyledButton)<PlayButtonType>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  background-color: var(--primary-color);
+  border-radius: 50%;
+  cursor: default;
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    fill: #000;
+    stroke: #000;
+  }
+`;
+
+const GridCardControlsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+
+const ControlsRow = styled(motion.div)`
+  width: 100%;
+  height: calc(100% / 3);
+`;
+
+const TopControls = styled(ControlsRow)`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+const CenterControls = styled(ControlsRow)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BottomControls = styled(ControlsRow)`
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+`;
+
+export const GridCardControls = ({
+  itemData,
+  handlePlayQueueAdd,
+  cardControls,
+}: any) => {
+  return (
+    <GridCardControlsContainer>
+      <TopControls />
+      <CenterControls animate={{ opacity: 1 }} initial={{ opacity: 0 }}>
+        <PlayButton
+          onClick={() => {
+            handlePlayQueueAdd({
+              byItemType: {
+                endpoint: cardControls.endpoint,
+                id: itemData[cardControls.idProperty],
+                type: cardControls.type,
+              },
+            });
+          }}
+        >
+          <PlayerPlay />
+        </PlayButton>
+      </CenterControls>
+      <BottomControls />
+    </GridCardControlsContainer>
+  );
+};

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

@@ -0,0 +1,69 @@
+import { Ref, useMemo } from 'react';
+import { FixedSizeList, FixedSizeListProps } from 'react-window';
+import { usePlayQueueHandler } from 'renderer/features/player/hooks/usePlayQueueHandler';
+import { CardRow } from 'renderer/types';
+import { GridCard } from './GridCard';
+
+export const VirtualGridWrapper = ({
+  refInstance,
+  cardControls,
+  cardRows,
+  itemGap,
+  itemWidth,
+  itemHeight,
+  itemCount,
+  columnCount,
+  rowCount,
+  ...rest
+}: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children'> & {
+  cardControls: any;
+  cardRows: CardRow[];
+  columnCount: number;
+  itemGap: number;
+  itemHeight: number;
+  itemWidth: number;
+  refInstance: Ref<any>;
+  rowCount: number;
+}) => {
+  const { handlePlayQueueAdd } = usePlayQueueHandler();
+
+  const itemData = useMemo(
+    () => ({
+      cardControls,
+      cardRows,
+      columnCount,
+      handlePlayQueueAdd,
+      itemCount,
+      itemData: rest.itemData,
+      itemGap,
+      itemHeight,
+      itemWidth,
+    }),
+    [
+      cardRows,
+      cardControls,
+      columnCount,
+      itemCount,
+      rest.itemData,
+      itemGap,
+      itemHeight,
+      itemWidth,
+      handlePlayQueueAdd,
+    ]
+  );
+
+  return (
+    <FixedSizeList
+      style={{ scrollBehavior: 'smooth' }}
+      {...rest}
+      ref={refInstance}
+      initialScrollOffset={0}
+      itemCount={rowCount}
+      itemData={itemData}
+      itemSize={itemHeight + itemGap}
+      overscanCount={10}
+    >
+      {GridCard}
+    </FixedSizeList>
+  );
+};

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

@@ -0,0 +1,141 @@
+import { forwardRef, Ref, useState } from 'react';
+import debounce from 'lodash/debounce';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeListProps } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { CardRow } from 'renderer/types';
+import { VirtualGridWrapper } from './VirtualGridWrapper';
+
+interface VirtualGridProps
+  extends Omit<
+    FixedSizeListProps,
+    'children' | 'itemSize' | 'height' | 'width'
+  > {
+  cardControls: any;
+  cardRows: CardRow[];
+  itemGap?: number;
+  itemSize: number;
+  minimumBatchSize?: number;
+  query: (props: any) => Promise<any>;
+  queryParams?: Record<string, any>;
+}
+
+export const VirtualInfiniteGrid = forwardRef(
+  (
+    {
+      itemCount,
+      itemGap,
+      itemSize,
+      cardControls,
+      cardRows,
+      minimumBatchSize,
+      query,
+      queryParams,
+    }: VirtualGridProps,
+    ref: Ref<InfiniteLoader>
+  ) => {
+    const [itemData, setItemData] = useState<any[]>([]);
+
+    const isItemLoaded = (index: number, columnCount: number) => {
+      const itemIndex = index * columnCount;
+
+      return (
+        itemIndex < itemData.length * columnCount &&
+        itemData[itemIndex] !== undefined
+      );
+    };
+
+    const loadMoreItems = async (
+      startIndex: number,
+      stopIndex: number,
+      limit: number,
+      columnCount: number
+    ) => {
+      const currentPage = Math.ceil(startIndex / minimumBatchSize!);
+
+      const t = await query({
+        limit,
+        page: currentPage,
+        ...queryParams,
+      });
+
+      // Need to multiply by columnCount due to the grid layout
+      const start = startIndex * columnCount;
+      const end = (stopIndex + 1) * columnCount;
+
+      return new Promise<void>((resolve) => {
+        const newData: any[] = [...itemData];
+
+        let itemIndex = 0;
+        for (let rowIndex = start; rowIndex < end; rowIndex += 1) {
+          newData[rowIndex] = t?.data[itemIndex];
+          itemIndex += 1;
+        }
+
+        setItemData(newData);
+        resolve();
+      });
+    };
+
+    const debouncedLoadMoreItems = debounce(loadMoreItems, 300);
+
+    return (
+      <AutoSizer>
+        {({ height, width }) => {
+          const itemHeight = itemSize! + cardRows.length * 25;
+
+          const columnCount = Math.floor(
+            (Number(width) - itemGap! + 3) / (itemSize! + itemGap! + 2)
+          );
+
+          const rowCount = Math.ceil(itemCount / columnCount);
+
+          const pageItemLimit = columnCount * minimumBatchSize!;
+
+          return (
+            <InfiniteLoader
+              ref={ref}
+              isItemLoaded={(index) => isItemLoaded(index, columnCount)}
+              itemCount={itemCount || 0}
+              loadMoreItems={(startIndex, stopIndex) =>
+                debouncedLoadMoreItems(
+                  startIndex,
+                  stopIndex,
+                  pageItemLimit,
+                  columnCount
+                )
+              }
+              minimumBatchSize={minimumBatchSize}
+              threshold={10}
+            >
+              {({ onItemsRendered, ref: infiniteLoaderRef }) => (
+                <VirtualGridWrapper
+                  useIsScrolling
+                  cardControls={cardControls}
+                  cardRows={cardRows}
+                  columnCount={columnCount}
+                  height={height}
+                  itemCount={itemCount || 0}
+                  itemData={itemData}
+                  itemGap={itemGap!}
+                  itemHeight={itemHeight!}
+                  itemWidth={itemSize}
+                  refInstance={infiniteLoaderRef}
+                  rowCount={rowCount}
+                  width={width}
+                  onItemsRendered={onItemsRendered}
+                />
+              )}
+            </InfiniteLoader>
+          );
+        }}
+      </AutoSizer>
+    );
+  }
+);
+
+VirtualInfiniteGrid.defaultProps = {
+  itemGap: 10,
+  minimumBatchSize: 20,
+  queryParams: {},
+};

src/renderer/features/auth/index.ts

@@ -0,0 +1 @@
+export * from './routes/LoginRoute';

src/renderer/features/auth/queries/useLogin.ts

@@ -0,0 +1,38 @@
+import md5 from 'md5';
+import { nanoid } from 'nanoid';
+import { useMutation } from 'react-query';
+import { authApi } from 'renderer/api/authApi';
+import { useAuthStore } from 'renderer/store';
+
+export const useLogin = (
+  serverUrl: string,
+  body: {
+    password: string;
+    username: string;
+  }
+) => {
+  const login = useAuthStore((state) => state.login);
+
+  return useMutation({
+    mutationFn: () => authApi.login(serverUrl, body),
+    onSuccess: (res) => {
+      const key = md5(serverUrl);
+      login({ key, serverUrl });
+
+      if (!localStorage.getItem('device_id')) {
+        localStorage.setItem('device_id', nanoid());
+      }
+
+      localStorage.setItem(
+        'authentication',
+        JSON.stringify({
+          accessToken: res.data.accessToken,
+          isAuthenticated: true,
+          key,
+          refreshToken: res.data.refreshToken,
+          serverUrl,
+        })
+      );
+    },
+  });
+};

src/renderer/features/auth/queries/usePingServer.ts

@@ -0,0 +1,12 @@
+import { useQuery } from 'react-query';
+import { authApi } from 'renderer/api/authApi';
+import { queryKeys } from 'renderer/api/queryKeys';
+
+export const usePingServer = (server: string) => {
+  return useQuery({
+    enabled: !!server,
+    queryFn: () => authApi.ping(server),
+    queryKey: queryKeys.ping(server),
+    retry: false,
+  });
+};

src/renderer/features/auth/routes/LoginRoute.module.scss

@@ -0,0 +1,19 @@
+.container {
+  min-width: 400px;
+  max-width: 50%;
+  margin: auto;
+  padding: 3rem;
+  background: rgba(50, 50, 50, 0.4);
+  border-radius: 5px;
+}
+
+.button {
+  background: var(--primary-color);
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: var(--primary-color);
+    filter: brightness(1.1);
+  }
+}

src/renderer/features/auth/routes/LoginRoute.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import {
+  TextInput,
+  PasswordInput,
+  Button,
+  Stack,
+  Title,
+  Loader,
+  Alert,
+} from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import { AlertCircle, CircleCheck } from 'tabler-icons-react';
+import { normalizeServerUrl } from 'renderer/utils';
+import { useLogin } from '../queries/useLogin';
+import { usePingServer } from '../queries/usePingServer';
+import styles from './LoginRoute.module.scss';
+
+export const LoginRoute = () => {
+  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+
+  const [username, setUsername] = useState(searchParams.get('username') || '');
+  const [password, setPassword] = useState(searchParams.get('password') || '');
+  const [server, setServer] = useState(
+    searchParams.get('server') || 'http://localhost:9321'
+  );
+  const [debouncedServer] = useDebouncedValue(server, 500);
+
+  const {
+    mutate: handleLogin,
+    isLoading,
+    isError,
+  } = useLogin(normalizeServerUrl(server), {
+    password,
+    username,
+  });
+
+  const {
+    isLoading: isCheckingServer,
+    isSuccess: isValidServer,
+    isFetched,
+  } = usePingServer(normalizeServerUrl(debouncedServer));
+
+  return (
+    <div className={styles.container}>
+      <Title>{t('auth.login')}</Title>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleLogin(undefined, {
+            onError: () => {},
+            onSuccess: () => {},
+          });
+        }}
+      >
+        <Stack spacing="md">
+          <TextInput
+            required
+            disabled={isLoading}
+            error={!isValidServer && isFetched}
+            label={`${t('auth.server.label')}`}
+            placeholder={`${t('auth.server.placeholder')}`}
+            rightSection={
+              isCheckingServer ? (
+                <Loader size="xs" />
+              ) : isValidServer ? (
+                <CircleCheck />
+              ) : null
+            }
+            value={server}
+            variant="default"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setServer(e.currentTarget.value)
+            }
+          />
+          <TextInput
+            required
+            disabled={isLoading}
+            label={`${t('auth.username.label')}`}
+            placeholder={`${t('auth.username.placeholder')}`}
+            value={username}
+            variant="default"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setUsername(e.currentTarget.value)
+            }
+          />
+          <PasswordInput
+            required
+            disabled={isLoading}
+            label={`${t('auth.password.label')}`}
+            placeholder={`${t('auth.password.placeholder')}`}
+            value={password}
+            variant="default"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setPassword(e.currentTarget.value)
+            }
+          />
+          <Button
+            className={styles.button}
+            disabled={!isValidServer}
+            type="submit"
+          >
+            Login
+          </Button>
+          {isError && (
+            <Alert color="red" icon={<AlertCircle />} variant="outline">
+              {t('Invalid username or password.')}
+            </Alert>
+          )}
+        </Stack>
+      </form>
+    </div>
+  );
+};

src/renderer/features/dashboard/index.ts

@@ -0,0 +1 @@
+export * from './routes/DashboardRoute';