Add missing sidebar configuration

- Fix add next behavior when shuffle is enabled
- Fix shuffled queue when songs are removed from queue
- Fix queue indices when currently playing song is removed
- Re-shuffle queue after queue is finished when shuffle is enabled

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

.eslintrc.json

@@ -1,82 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "ignorePatterns": [
-    "node_modules/*",
-    "dist/*",
-    "electron/preload/*",
-    "vite.config.ts",
-    "post-install.js"
-  ],
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:typescript-sort-keys/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react",
-    "@typescript-eslint",
-    "import",
-    "sort-keys-fix",
-    "promise"
-  ],
-  "rules": {
-    "react-hooks/exhaustive-deps": [
-      "warn",
-      { "enableDangerousAutofixThisMayCauseInfiniteLoops": true }
-    ],
-    "react/jsx-sort-props": [
-      "error",
-      {
-        "callbacksLast": true,
-        "ignoreCase": false,
-        "noSortAlphabetically": false,
-        "reservedFirst": true,
-        "shorthandFirst": true,
-        "shorthandLast": false
-      }
-    ],
-    "import/order": [
-      "error",
-      {
-        "groups": ["builtin", "external", "internal", ["parent", "sibling"]],
-        "pathGroups": [
-          {
-            "pattern": "react",
-            "group": "external",
-            "position": "before"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": ["react"],
-        "newlines-between": "never",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ],
-    "sort-keys-fix/sort-keys-fix": "warn",
-    "@typescript-eslint/no-explicit-any": "off",
-    "consistent-return": "off",
-    "object-curly-newline": "off",
-    "indent": "off",
-    "no-tabs": "off",
-    "react/jsx-indent": "off",
-    "react/jsx-indent-props": "off",
-    "react/react-in-jsx-scope": "off"
-  }
-}

.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,3 @@
+# These are supported funding model platforms
+
+ko_fi: jeffvli

.github/ISSUE_TEMPLATE/1-Bug_report.md

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

.github/ISSUE_TEMPLATE/2-Question.md

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

.github/ISSUE_TEMPLATE/3-Feature_request.md

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

.github/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-linux.yml

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

.github/workflows/publish-macos.yml

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

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

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

.github/workflows/publish-pr.yml

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

.github/workflows/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

@@ -1,29 +1,31 @@
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.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
-dist
-dist-ssr
-*.local
 
-# Editor directories and files
+# OSX
-.idea
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
 
 release/app/dist
 release/build
-.vscode/.debug.env
+.erb/dll
-./package-lock.json
+
-pnpm-lock.yaml
+.idea
-yarn.lock
+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

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

.stylelintrc.json

@@ -0,0 +1,31 @@
+{
+  "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
+      }
+    ],
+    "string-quotes": "single",
+    "declaration-block-no-redundant-longhand-properties": null,
+    "selector-class-pattern": null,
+    "selector-type-case": ["lower", { "ignoreTypes": ["/^\\$\\w+/"] }],
+    "selector-type-no-unknown": [
+      true,
+      { "ignoreTypes": ["/-styled-mixin/", "/^\\$\\w+/"] }
+    ],
+    "value-keyword-case": ["lower", { "ignoreKeywords": ["dummyValue"] }],
+    "declaration-colon-newline-after": null
+  }
+}

.vscode/.debug.script.mjs

@@ -1,24 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
-import { createRequire } from 'module'
-import { spawn } from 'child_process'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const require = createRequire(import.meta.url)
-const pkg = require('../package.json')
-
-// write .debug.env
-const envContent = Object.entries(pkg.debug.env).map(([key, val]) => `${key}=${val}`)
-fs.writeFileSync(path.join(__dirname, '.debug.env'), envContent.join('\n'))
-
-// bootstrap
-spawn(
-  // TODO: terminate `npm run dev` when Debug exits.
-  process.platform === 'win32' ? 'npm.cmd' : 'npm',
-  ['run', 'dev'],
-  {
-    stdio: 'inherit',
-    env: Object.assign(process.env, { VSCODE_DEBUG: 'true' }),
-  },
-)

.vscode/extensions.json

@@ -1,10 +1,8 @@
 {
-  // See http://go.microsoft.com/fwlink/?LinkId=827846
-  // for the documentation about the extensions.json format
   "recommendations": [
-    "editorconfig.editorconfig",
+    "dbaeumer.vscode-eslint",
-    "mrmlnc.vscode-json5",
+    "EditorConfig.EditorConfig",
-    "rbbit.typescript-hero",
+    "stylelint.vscode-stylelint",
-    "syler.sass-indented",
+    "esbenp.prettier-vscode"
   ]
 }

.vscode/launch.json

@@ -1,47 +1,30 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "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": "Debug App",
+      "name": "Electron: All",
-      "preLaunchTask": "start .debug.script.mjs",
+      "configurations": ["Electron: Main", "Electron: Renderer"]
-      "configurations": [
-        "Debug Main Process",
-        "Debug Renderer Process"
-      ],
-      "presentation": {
-        "hidden": false,
-        "group": "",
-        "order": 1
-      },
-      "stopAll": true
     }
-  ],
-  "configurations": [
-    {
-      "name": "Debug Main Process",
-      "type": "pwa-node",
-      "request": "launch",
-      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
-      "windows": {
-        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
-      },
-      "runtimeArgs": [
-        "--no-sandbox",
-        "--remote-debugging-port=9229",
-        "."
-      ],
-      "envFile": "${workspaceFolder}/.vscode/.debug.env",
-      "console": "integratedTerminal"
-    },
-    {
-      "name": "Debug Renderer Process",
-      "port": 9229,
-      "request": "attach",
-      "type": "pwa-chrome",
-      "timeout": 60000
-    },
   ]
 }

.vscode/settings.json

@@ -0,0 +1,43 @@
+{
+  "files.associations": {
+    ".eslintrc": "jsonc",
+    ".prettierrc": "jsonc",
+    ".eslintignore": "ignore"
+  },
+  "eslint.validate": ["typescript"],
+  "eslint.workingDirectories": [
+    { "directory": "./", "changeProcessCWD": true },
+    { "directory": "./server", "changeProcessCWD": true }
+  ],
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": false
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "javascript.validate.enable": false,
+  "javascript.format.enable": false,
+  "typescript.format.enable": false,
+  "search.exclude": {
+    ".git": true,
+    ".eslintcache": true,
+    ".erb/dll": true,
+    "release/{build,app/dist}": true,
+    "node_modules": true,
+    "npm-debug.log.*": true,
+    "test/**/__snapshots__": true,
+    "package-lock.json": true,
+    "*.{css,sass,scss}.d.ts": true
+  },
+  "i18n-ally.localesPaths": ["src/i18n", "src/i18n/locales"],
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "stylelint.validate": ["css", "less", "postcss", "typescript", "typescriptreact", "scss"],
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true
+}

.vscode/tasks.json

@@ -1,34 +1,25 @@
 {
-  // See https://go.microsoft.com/fwlink/?LinkId=733558 
-  // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "start .debug.script.mjs",
+      "type": "npm",
-      "type": "shell",
+      "label": "Start Webpack Dev",
-      "command": "node .vscode/.debug.script.mjs",
+      "script": "start:renderer",
+      "options": {
+        "cwd": "${workspaceFolder}"
+      },
       "isBackground": true,
       "problemMatcher": {
-        "owner": "typescript",
+        "owner": "custom",
-        "fileLocation": "relative",
         "pattern": {
-          // TODO: correct "regexp"
+          "regexp": "____________"
-          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
-          "file": 1,
-          "line": 3,
-          "column": 4,
-          "code": 5,
-          "message": 6
         },
         "background": {
           "activeOnStart": true,
-          "endsPattern": "^.*[startup] Electron App.*$",
+          "beginsPattern": "Compiling\\.\\.\\.$",
+          "endsPattern": "(Compiled successfully|Failed to compile)\\.$"
         }
       }
     }
   ]
 }
-
-// https://code.visualstudio.com/docs/editor/tasks#_operating-system-specific-properties
-// https://code.visualstudio.com/docs/editor/tasks#_background-watching-tasks
-// https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson

CHANGELOG.md

@@ -0,0 +1,5 @@
+# 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).

README.md

@@ -1,15 +1,77 @@
-# Sonixd (rewrite)
+# Feishin
 
-Repository for the rewrite of [Sonixd](https://github.com/jeffvli/sonixd).
+  <p align="center">
+    <a href="https://github.com/jeffvli/feishin/blob/main/LICENSE">
+      <img src="https://img.shields.io/github/license/jeffvli/feishin?style=flat-square&color=brightgreen"
+      alt="License">
+    </a>
+      <a href="https://github.com/jeffvli/feishin/releases">
+      <img src="https://img.shields.io/github/v/release/jeffvli/feishin?style=flat-square&color=blue"
+      alt="Release">
+    </a>
+    <a href="https://github.com/jeffvli/feishin/releases">
+      <img src="https://img.shields.io/github/downloads/jeffvli/feishin/total?style=flat-square&color=orange"
+      alt="Downloads">
+    </a>
+  </p>
+  <p align="center">
+    <a href="https://discord.gg/FVKpcMDy5f">
+      <img src="https://img.shields.io/discord/922656312888811530?color=black&label=discord&logo=discord&logoColor=white"
+      alt="Discord">
+    </a>
+    <a href="https://matrix.to/#/#sonixd:matrix.org">
+      <img src="https://img.shields.io/matrix/sonixd:matrix.org?color=black&label=matrix&logo=matrix&logoColor=white"
+      alt="Matrix">
+    </a>
+  </p>
+
+Rewrite of [Sonixd](https://github.com/jeffvli/sonixd).
+
+## Features
+
+- [x] MPV player backend
+- [x] Web player backend
+- [x] Modern UI
+- [x] Scrobble playback to your server
+- [x] Smart playlist editor (Navidrome)
+- [x] Synchronized and unsynchronized lyrics support
+- [ ] [Request a feature](https://github.com/jeffvli/feishin/issues) or [view taskboard](https://github.com/users/jeffvli/projects/5/views/1)
+
+## Screenshots
+
+<a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_full_screen_player.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_full_screen_player.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_artist_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_album_detail.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png"><img src="https://raw.githubusercontent.com/jeffvli/feishin/development/media/preview_smart_playlist.png" width="49.5%"/></a>
+
+## Getting Started
+
+Download the [latest desktop client](https://github.com/jeffvli/feishin/releases).
+
+If you're using an M1 macOS device, [check here](https://github.com/jeffvli/feishin/issues/104#issuecomment-1553914730) for instructions on how to remove the app from quarantine.
+
+### Configuration
+
+1. Upon startup you will be greeted with a prompt to select the path to your MPV binary. If you do not have MPV installed, you can download it [here](https://mpv.io/installation/) or install it using any package manager supported by your OS. After inputting the path, restart the app.
+
+2. After restarting the app, you will be prompted to select a server. Click the `Open menu` button and select `Manage servers`. Click the `Add server` button in the popup and fill out all applicable details. You will need to enter the full URL to your server, including the protocol and port if applicable (e.g. `https://navidrome.my-server.com` or `http://192.168.0.1:4533`).
+
+- **Navidrome** - For the best experience, select "Save password" when creating the server and configure the `SessionTimeout` setting in your Navidrome config to a larger value (e.g. 72h).
+
+## FAQ
+
+### What music servers does Feishin support?
+
+Feishin supports any music server that implements a [Navidrome](https://www.navidrome.org/) or [Jellyfin](https://jellyfin.org/) API. **Subsonic API is not currently supported**. This will likely be added in [later when the new Subsonic API is decided on](https://support.symfonium.app/t/subsonic-servers-participation/1233).
+
+- [Navidrome](https://github.com/navidrome/navidrome)
+- [Jellyfin](https://github.com/jellyfin/jellyfin)
+- [Funkwhale](https://funkwhale.audio/) - TBD
+- Subsonic-compatible servers - TBD
 
 ## Development
 
-TBD
+Built and tested using Node `v16.15.0`.
 
-### Developing with Docker Compose
+This project is built off of [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate) v4.6.0.
-
-TBD
 
 ## License
 
-[GNU General Public License v3.0 ©](https://github.com/jeffvli/sonixd-rewrite/blob/dev/LICENSE)
+[GNU General Public License v3.0 ©](https://github.com/jeffvli/feishin/blob/dev/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>

electron-builder.json

@@ -1,59 +0,0 @@
-{
-  "appId": "TEST",
-  "productName": "TEST",
-  "copyright": "Copyright © 2022 ${author}",
-  "directories": {
-    "app": "release/app",
-    "output": "release/build",
-    "buildResources": "electron/resources"
-  },
-  "extends": null,
-  "asar": true,
-  "asarUnpack": ["**\\*.{node,dll}", "prisma"],
-  "files": [
-    "dist",
-    "node_modules",
-    "package.json",
-    "prisma/**/*",
-    "resources/**/*",
-    "!**/node_modules/@prisma/engines/introspection-engine*",
-    "!**/node_modules/@prisma/engines/migration-engine*",
-    "!**/node_modules/@prisma/engines/prisma-fmt*",
-    "!**/node_modules/@prisma/engines/query_engine-*",
-    "!**/node_modules/@prisma/engines/libquery_engine*",
-    "!**/node_modules/prisma/query_engine*",
-    "!**/node_modules/prisma/libquery_engine*",
-    "!**/node_modules/prisma/**/*.mjs"
-  ],
-  "win": {
-    "target": [
-      {
-        "target": "nsis",
-        "arch": ["x64"]
-      }
-    ],
-    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
-  },
-  "nsis": {
-    "oneClick": false,
-    "perMachine": false,
-    "allowToChangeInstallationDirectory": true,
-    "deleteAppDataOnUninstall": false
-  },
-  "mac": {
-    "target": ["dmg"],
-    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
-  },
-  "linux": {
-    "icon": "electron/resources/iconset",
-    "target": ["AppImage", "deb"],
-    "artifactName": "${productName}-Linux-${version}.${ext}"
-  },
-  "extraResources": [
-    "./assets/**",
-    "prisma/**/*",
-    "node_modules/@prisma/engines/migration-engine*",
-    "node_modules/@prisma/engines/query*",
-    "node_modules/@prisma/engines/libquery*"
-  ]
-}

electron/electron-env.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="vite-electron-plugin/electron-env" />
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    DIST: string;
-    DIST_ELECTRON: string;
-    /** /dist/ or /public/ */
-    PUBLIC: string;
-    VSCODE_DEBUG?: 'true';
-  }
-}

electron/main/features/core/api/index.ts

@@ -1,126 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { PrismaClient } from '@prisma/client';
-import { app, ipcMain } from 'electron';
-import isDev from 'electron-is-dev';
-import './server';
-
-const dbPath = isDev
-  ? path.join(__dirname, '../../../../prisma/dev.db')
-  : path.join(app.getPath('userData'), 'database.db');
-
-if (!isDev) {
-  try {
-    // database file does not exist, need to create
-    fs.copyFileSync(path.join(process.resourcesPath, 'prisma/dev.db'), dbPath, fs.constants.COPYFILE_EXCL);
-    console.log(`DB does not exist. Create new DB from ${path.join(process.resourcesPath, 'prisma/dev.db')}`);
-  } catch (err) {
-    if (err && 'code' in (err as { code: string }) && (err as { code: string }).code !== 'EEXIST') {
-      console.error(`DB creation faild. Reason:`, err);
-    } else {
-      throw err;
-    }
-  }
-}
-
-function getPlatformName(): string {
-  const isDarwin = process.platform === 'darwin';
-  if (isDarwin && process.arch === 'arm64') {
-    return `${process.platform}Arm64`;
-  }
-
-  return process.platform;
-}
-
-const platformToExecutables: Record<string, any> = {
-  darwin: {
-    migrationEngine: 'node_modules/@prisma/engines/migration-engine-darwin',
-    queryEngine: 'node_modules/@prisma/engines/libquery_engine-darwin.dylib.node',
-  },
-  darwinArm64: {
-    migrationEngine: 'node_modules/@prisma/engines/migration-engine-darwin-arm64',
-    queryEngine: 'node_modules/@prisma/engines/libquery_engine-darwin-arm64.dylib.node',
-  },
-  linux: {
-    migrationEngine: 'node_modules/@prisma/engines/migration-engine-debian-openssl-1.1.x',
-    queryEngine: 'node_modules/@prisma/engines/libquery_engine-debian-openssl-1.1.x.so.node',
-  },
-  win32: {
-    migrationEngine: 'node_modules/@prisma/engines/migration-engine-windows.exe',
-    queryEngine: 'node_modules/@prisma/engines/query_engine-windows.dll.node',
-  },
-};
-
-const extraResourcesPath = app.getAppPath().replace('app.asar', ''); // impacted by extraResources setting in electron-builder.yml
-const platformName = getPlatformName();
-
-const mePath = path.join(extraResourcesPath, platformToExecutables[platformName].migrationEngine);
-const qePath = path.join(extraResourcesPath, platformToExecutables[platformName].queryEngine);
-
-ipcMain.on('config:get-app-path', (event) => {
-  event.returnValue = app.getAppPath();
-});
-
-ipcMain.on('config:get-platform-name', (event) => {
-  const isDarwin = process.platform === 'darwin';
-  event.returnValue =
-    isDarwin && process.arch === 'arm64' ? `${process.platform}Arm64` : (event.returnValue = process.platform);
-});
-
-ipcMain.on('config:get-prisma-db-path', (event) => {
-  event.returnValue = dbPath;
-});
-
-ipcMain.on('config:get-prisma-me-path', (event) => {
-  event.returnValue = mePath;
-});
-
-ipcMain.on('config:get-prisma-qe-path', (event) => {
-  event.returnValue = qePath;
-});
-
-export const prisma = new PrismaClient({
-  datasources: {
-    db: {
-      url: `file:${dbPath}`,
-    },
-  },
-  errorFormat: 'minimal',
-  // see https://github.com/prisma/prisma/discussions/5200
-  // __internal: {
-  //   engine: {
-  //     binaryPath: qePath,
-  //   },
-  // },
-});
-
-prisma.server.findMany({
-  where: {},
-});
-
-export const exclude = <T, Key extends keyof T>(resultSet: T, ...keys: Key[]): Omit<T, Key> => {
-  // eslint-disable-next-line no-restricted-syntax
-  for (const key of keys) {
-    delete resultSet[key];
-  }
-  return resultSet;
-};
-
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-prisma.$use(async (params, next) => {
-  const maxRetries = 5;
-  let retries = 0;
-
-  do {
-    try {
-      const result = await next(params);
-      return result;
-    } catch (err) {
-      retries += 1;
-      return sleep(500);
-    }
-  } while (retries < maxRetries);
-});

electron/main/features/core/api/server/index.ts

@@ -1,12 +0,0 @@
-import { ipcMain } from 'electron';
-import { prisma } from '..';
-
-export enum ServerApi {
-  GET_SERVER = 'api:server:get-server',
-  GET_SERVERS = 'api:server:get-servers',
-}
-
-ipcMain.handle(ServerApi.GET_SERVERS, async () => {
-  const result = await prisma.server.findMany();
-  return result;
-});

electron/main/features/core/index.ts

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

electron/main/features/core/mpv-player/index.ts

@@ -1,134 +0,0 @@
-import { ipcMain } from 'electron';
-import MpvAPI from 'node-mpv';
-import { getWindow } from '../../..';
-
-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) {
-      getWindow()?.webContents.send('renderer-player-auto-next');
-    }
-  }
-});
-
-// Automatically updates the play button when the player is playing
-mpv.on('started', () => {
-  getWindow()?.webContents.send('renderer-player-play');
-});
-
-// Automatically updates the play button when the player is stopped
-mpv.on('stopped', () => {
-  getWindow()?.webContents.send('renderer-player-stop');
-});
-
-// Automatically updates the play button when the player is paused
-mpv.on('paused', () => {
-  getWindow()?.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) => {
-  getWindow()?.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.prev();
-});
-
-// 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 in position 0 and 1 to the given data. Used when manually starting a song or using the next/prev buttons
-ipcMain.on('player-set-queue', async (_event, data: any) => {
-  if (data.queue.current) {
-    await mpv.load(data.queue.current.streamUrl, 'replace');
-  }
-
-  if (data.queue.next) {
-    await mpv.load(data.queue.next.streamUrl, 'append');
-  }
-});
-
-// Replaces the queue in position 1 to the given data
-ipcMain.on('player-set-queue-next', async (_event, data: any) => {
-  const size = await mpv.getPlaylistSize();
-
-  if (size > 1) {
-    await mpv.playlistRemove(1);
-  }
-
-  if (data.queue.next) {
-    await mpv.load(data.queue.next.streamUrl, 'append');
-  }
-});
-
-// Sets the next song in the queue when reaching the end of the queue
-ipcMain.on('player-auto-next', async (_event, data: any) => {
-  // Always keep the current song as position 0 in the mpv queue
-  // This allows us to easily set update the next song in the queue without
-  // disturbing the currently playing song
-  await mpv.playlistRemove(0);
-
-  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();
-});

electron/main/features/index.ts

@@ -1,3 +0,0 @@
-import './core';
-
-require(`./${process.platform}`);

electron/main/index.ts

@@ -1,109 +0,0 @@
-// The built directory structure
-//
-// ├─┬ dist-electron
-// │ ├─┬ main
-// │ │ └── index.js    > Electron-Main
-// │ └─┬ preload
-// │   └── index.js    > Preload-Scripts
-// ├─┬ dist
-// │ └── index.html    > Electron-Renderer
-//
-process.env.DIST_ELECTRON = join(__dirname, '..');
-process.env.DIST = join(process.env.DIST_ELECTRON, '../dist');
-process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST_ELECTRON, '../public');
-
-import { release } from 'os';
-import { join } from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
-import './features';
-
-// Disable GPU Acceleration for Windows 7
-if (release().startsWith('6.1')) app.disableHardwareAcceleration();
-
-// Set application name for Windows 10+ notifications
-if (process.platform === 'win32') app.setAppUserModelId(app.getName());
-
-if (!app.requestSingleInstanceLock()) {
-  app.quit();
-  process.exit(0);
-}
-
-let win: BrowserWindow | null = null;
-// Here, you can also use other preload
-const preload = join(__dirname, '../preload/index.js');
-const url = process.env.VITE_DEV_SERVER_URL as string;
-const indexHtml = join(process.env.DIST, 'index.html');
-
-async function createWindow() {
-  win = new BrowserWindow({
-    icon: join(process.env.PUBLIC as string, 'favicon.svg'),
-    title: 'Main window',
-    webPreferences: {
-      contextIsolation: true,
-      nodeIntegration: false,
-      preload,
-    },
-  });
-
-  if (app.isPackaged) {
-    win.loadFile(indexHtml);
-  } else {
-    win.loadURL(url);
-    // win.webContents.openDevTools()
-  }
-
-  // Test actively push message to the Electron-Renderer
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', new Date().toLocaleString());
-  });
-
-  // Make all links open with the browser, not with the application
-  win.webContents.setWindowOpenHandler(({ url }) => {
-    if (url.startsWith('https:')) shell.openExternal(url);
-    return { action: 'deny' };
-  });
-}
-
-app.whenReady().then(createWindow);
-
-app.on('window-all-closed', () => {
-  win = null;
-  if (process.platform !== 'darwin') app.quit();
-});
-
-app.on('second-instance', () => {
-  if (win) {
-    // Focus on the main window if the user tried to open another
-    if (win.isMinimized()) win.restore();
-    win.focus();
-  }
-});
-
-app.on('activate', () => {
-  const allWindows = BrowserWindow.getAllWindows();
-  if (allWindows.length) {
-    allWindows[0].focus();
-  } else {
-    createWindow();
-  }
-});
-
-// new window example arg: new windows url
-ipcMain.handle('open-win', (event, arg) => {
-  const childWindow = new BrowserWindow({
-    webPreferences: {
-      preload,
-    },
-  });
-
-  if (app.isPackaged) {
-    childWindow.loadFile(indexHtml, { hash: arg });
-  } else {
-    childWindow.loadURL(`${url}/#${arg}`);
-    // childWindow.webContents.openDevTools({ mode: "undocked", activate: true })
-  }
-});
-
-export const getWindow = () => {
-  return win;
-};

electron/preload/index.ts

@@ -1,107 +0,0 @@
-import { contextBridge, ipcRenderer } from 'electron';
-
-function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
-  return new Promise((resolve) => {
-    if (condition.includes(document.readyState)) {
-      resolve(true);
-    } else {
-      document.addEventListener('readystatechange', () => {
-        if (condition.includes(document.readyState)) {
-          resolve(true);
-        }
-      });
-    }
-  });
-}
-
-const safeDOM = {
-  append(parent: HTMLElement, child: HTMLElement) {
-    if (!Array.from(parent.children).find((e) => e === child)) {
-      return parent.appendChild(child);
-    }
-  },
-  remove(parent: HTMLElement, child: HTMLElement) {
-    if (Array.from(parent.children).find((e) => e === child)) {
-      return parent.removeChild(child);
-    }
-  },
-};
-
-/**
- * https://tobiasahlin.com/spinkit
- * https://connoratherton.com/loaders
- * https://projects.lukehaas.me/css-loaders
- * https://matejkustec.github.io/SpinThatShit
- */
-function useLoading() {
-  const className = `loaders-css__square-spin`;
-  const styleContent = `
-@keyframes square-spin {
-  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
-  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
-  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
-  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
-}
-.${className} > div {
-  animation-fill-mode: both;
-  width: 50px;
-  height: 50px;
-  background: #fff;
-  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
-}
-.app-loading-wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #282c34;
-  z-index: 9;
-}
-    `;
-  const oStyle = document.createElement('style');
-  const oDiv = document.createElement('div');
-
-  oStyle.id = 'app-loading-style';
-  oStyle.innerHTML = styleContent;
-  oDiv.className = 'app-loading-wrap';
-  oDiv.innerHTML = `<div class="${className}"><div></div></div>`;
-
-  return {
-    appendLoading() {
-      safeDOM.append(document.head, oStyle);
-      safeDOM.append(document.body, oDiv);
-    },
-    removeLoading() {
-      safeDOM.remove(document.head, oStyle);
-      safeDOM.remove(document.body, oDiv);
-    },
-  };
-}
-
-// ----------------------------------------------------------------------
-
-const { appendLoading, removeLoading } = useLoading();
-domReady().then(appendLoading);
-
-window.onmessage = (ev) => {
-  ev.data.payload === 'removeLoading' && removeLoading();
-};
-
-setTimeout(removeLoading, 4999);
-
-const serverApi = {
-  getServer: () => ipcRenderer.invoke('api:server:get-server'), // ServerApi.GET_SERVER
-  getServers: () => ipcRenderer.invoke('api:server:get-servers'), // ServerApi.GET_SERVERS
-};
-
-const api = {
-  prisma: {
-    server: serverApi,
-  },
-};
-
-contextBridge.exposeInMainWorld('electron', api);

index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package.json

@@ -1,86 +1,320 @@
 {
-  "name": "sonixd-rewrite",
+  "name": "feishin",
-  "productName": "sonixd-rewrite",
+  "productName": "Feishin",
-  "private": true,
+  "description": "Feishin music server",
-  "version": "0.0.0",
+  "version": "0.2.0",
-  "description": "",
-  "author": "jeffvli",
-  "license": "GPL-3.0",
-  "main": "release/app/dist/main/index.js",
   "scripts": {
-    "dev": "vite",
+    "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
-    "build": "tsc && vite build && electron-builder",
+    "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
-    "postinstall": "node post-install.js && electron-builder install-app-deps",
+    "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
-    "prisma:init": "npx prisma migrate dev",
+    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
-    "prisma:dev": "npx prisma db push",
+    "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
-    "prisma:migrate": ""
+    "lint:styles": "npx stylelint **/*.tsx",
+    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
+    "package:pr": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win --mac --linux",
+    "package:dev": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --dir",
+    "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
+    "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
+    "start:main": "cross-env NODE_ENV=development electron -r ts-node/register/transpile-only ./src/main/main.ts",
+    "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
+    "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
+    "start:web": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.web.ts",
+    "test": "jest",
+    "prepare": "husky install",
+    "i18next": "i18next -c src/renderer/i18n/i18next-parser.config.js",
+    "prod:buildserver": "pwsh -c \"./scripts/server-build.ps1\"",
+    "prod:publishserver": "pwsh -c \"./scripts/server-publish.ps1\""
   },
-  "engines": {
+  "lint-staged": {
-    "node": "^14.18.0 || >=16.0.0"
+    "*.{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"
+    ]
   },
-  "dependencies": {
+  "build": {
-    "@prisma/client": "^4.4.0",
+    "productName": "Feishin",
-    "node-mpv": "^2.0.0-beta.2"
+    "appId": "org.jeffvli.feishin",
+    "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
+    "asar": true,
+    "asarUnpack": "**\\*.{node,dll}",
+    "files": [
+      "dist",
+      "node_modules",
+      "package.json"
+    ],
+    "afterSign": ".erb/scripts/notarize.js",
+    "electronVersion": "22.3.1",
+    "mac": {
+      "target": {
+        "target": "default",
+        "arch": [
+          "arm64",
+          "x64"
+        ]
+      },
+      "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": "feishin"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeffvli/feishin.git"
+  },
+  "author": {
+    "name": "jeffvli",
+    "url": "https://github.com/jeffvli/"
+  },
+  "contributors": [],
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/jeffvli/feishin/issues"
+  },
+  "keywords": [
+    "subsonic",
+    "navidrome",
+    "airsonic",
+    "jellyfin",
+    "react",
+    "electron"
+  ],
+  "homepage": "https://github.com/jeffvli/feishin",
+  "jest": {
+    "testURL": "http://localhost/",
+    "testEnvironment": "jsdom",
+    "transform": {
+      "\\.(ts|tsx|js|jsx)$": "ts-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
+      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "ts",
+      "tsx",
+      "json"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "release/app/node_modules"
+    ],
+    "testPathIgnorePatterns": [
+      "release/app/dist"
+    ],
+    "setupFiles": [
+      "./.erb/scripts/check-build-exists.ts"
+    ]
   },
   "devDependencies": {
-    "@types/react": "^18.0.21",
+    "@electron/rebuild": "^3.2.10",
-    "@types/react-dom": "^18.0.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@stylelint/postcss-css-in-js": "^0.38.0",
-    "electron": "^21.1.0",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
-    "electron-builder": "^23.3.3",
+    "@testing-library/jest-dom": "^5.16.4",
-    "react": "^18.2.0",
+    "@testing-library/react": "^13.0.0",
-    "react-dom": "^18.2.0",
+    "@types/electron-localshortcut": "^3.1.0",
-    "sass": "^1.55.0",
+    "@types/jest": "^27.4.1",
-    "typescript": "^4.8.4",
+    "@types/lodash": "^4.14.188",
-    "vite": "^3.1.4",
+    "@types/md5": "^2.3.2",
-    "vite-electron-plugin": "^0.4.4",
+    "@types/node": "^17.0.23",
-    "@emotion/react": "^11.10.4",
+    "@types/react": "^18.0.25",
-    "@emotion/styled": "^11.10.4",
+    "@types/react-dom": "^18.0.8",
-    "@mantine/carousel": "^5.5.4",
+    "@types/react-test-renderer": "^17.0.1",
-    "@mantine/core": "^5.5.4",
+    "@types/react-virtualized-auto-sizer": "^1.0.1",
-    "@mantine/dates": "^5.5.4",
+    "@types/react-window": "^1.8.5",
-    "@mantine/form": "^5.5.4",
+    "@types/react-window-infinite-loader": "^1.0.6",
-    "@mantine/hooks": "^5.5.4",
+    "@types/styled-components": "^5.1.26",
-    "@mantine/modals": "^5.5.4",
+    "@types/terser-webpack-plugin": "^5.0.4",
-    "@mantine/notifications": "^5.5.4",
+    "@types/webpack-bundle-analyzer": "^4.4.1",
-    "@mantine/spotlight": "^5.5.4",
+    "@types/webpack-env": "^1.16.3",
-    "@tanstack/react-query": "^4.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.47.0",
-    "@typescript-eslint/parser": "^5.39.0",
+    "browserslist-config-erb": "^0.0.3",
-    "ag-grid-community": "^28.2.0",
+    "chalk": "^4.1.2",
-    "ag-grid-react": "^28.2.0",
+    "concurrently": "^7.1.0",
-    "axios": "^1.0.0",
+    "core-js": "^3.21.1",
-    "dayjs": "^1.11.5",
+    "cross-env": "^7.0.3",
-    "electron-is-dev": "^2.0.0",
+    "css-loader": "^6.7.1",
-    "electron-rebuild": "^3.2.9",
+    "css-minimizer-webpack-plugin": "^3.4.1",
-    "embla-carousel-react": "^7.0.3",
+    "detect-port": "^1.3.0",
-    "eslint": "^8.24.0",
+    "electron": "^22.3.1",
-    "eslint-config-prettier": "^8.5.0",
+    "electron-builder": "^24.0.0-alpha.13",
-    "eslint-import-resolver-typescript": "^3.5.1",
+    "electron-devtools-installer": "^3.2.0",
+    "electron-notarize": "^1.2.1",
+    "electronmon": "^2.0.2",
+    "eslint": "^8.30.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-erb": "^4.0.3",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-jest": "^26.1.3",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-typescript-sort-keys": "^2.1.0",
-    "immer": "^9.0.15",
+    "file-loader": "^6.2.0",
-    "nanoid": "^4.0.0",
+    "html-webpack-plugin": "^5.5.0",
-    "prettier": "^2.7.1",
+    "husky": "^7.0.4",
-    "prisma": "^4.4.0",
+    "i18next-parser": "^6.3.0",
-    "react-virtualized-auto-sizer": "^1.0.7",
+    "identity-obj-proxy": "^3.0.0",
-    "react-window": "^1.8.7",
+    "jest": "^27.5.1",
-    "react-window-infinite-loader": "^1.0.8",
+    "lint-staged": "^12.3.7",
-    "replace-in-file": "^6.3.5",
+    "mini-css-extract-plugin": "^2.6.0",
-    "ts-node": "^10.9.1",
+    "postcss-scss": "^4.0.4",
-    "vite-plugin-electron": "^0.9.2",
+    "postcss-syntax": "^0.36.2",
-    "vite-plugin-electron-renderer": "^0.9.3",
+    "prettier": "^2.6.2",
-    "zustand": "^4.1.1"
+    "react-refresh": "^0.12.0",
+    "react-refresh-typescript": "^2.0.4",
+    "react-test-renderer": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.11",
+    "sass-loader": "^12.6.0",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard-scss": "^4.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-order": "^5.0.0",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "ts-jest": "^27.1.4",
+    "ts-loader": "^9.2.8",
+    "ts-node": "^10.7.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.8.4",
+    "typescript-plugin-styled-components": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.71.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.0",
+    "webpack-merge": "^5.8.0"
   },
-  "debug": {
+  "dependencies": {
-    "env": {
+    "@ag-grid-community/client-side-row-model": "^28.2.1",
-      "VITE_DEV_SERVER_URL": "http://127.0.0.1:7777"
+    "@ag-grid-community/core": "^28.2.1",
-    }
+    "@ag-grid-community/infinite-row-model": "^28.2.1",
+    "@ag-grid-community/react": "^28.2.1",
+    "@ag-grid-community/styles": "^28.2.1",
+    "@emotion/react": "^11.10.4",
+    "@mantine/core": "^6.0.13",
+    "@mantine/dates": "^6.0.13",
+    "@mantine/form": "^6.0.13",
+    "@mantine/hooks": "^6.0.13",
+    "@mantine/modals": "^6.0.13",
+    "@mantine/notifications": "^6.0.13",
+    "@mantine/utils": "^6.0.13",
+    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query-devtools": "^4.29.6",
+    "@ts-rest/core": "^3.23.0",
+    "axios": "^1.4.0",
+    "cmdk": "^0.2.0",
+    "dayjs": "^1.11.6",
+    "electron-debug": "^3.2.0",
+    "electron-localshortcut": "^3.2.1",
+    "electron-log": "^4.4.6",
+    "electron-store": "^8.1.0",
+    "electron-updater": "^4.6.5",
+    "fast-average-color": "^9.3.0",
+    "format-duration": "^2.0.0",
+    "framer-motion": "^9.1.7",
+    "fuse.js": "^6.6.2",
+    "history": "^5.3.0",
+    "i18next": "^21.6.16",
+    "immer": "^9.0.21",
+    "is-electron": "^2.2.2",
+    "lodash": "^4.17.21",
+    "md5": "^2.3.0",
+    "memoize-one": "^6.0.0",
+    "nanoid": "^3.3.3",
+    "net": "^1.0.2",
+    "node-mpv": "github:jeffvli/Node-MPV",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^3.1.4",
+    "react-i18next": "^11.16.7",
+    "react-icons": "^4.8.0",
+    "react-player": "^2.11.0",
+    "react-router": "^6.5.0",
+    "react-router-dom": "^6.5.0",
+    "react-simple-img": "^3.0.0",
+    "react-virtualized-auto-sizer": "^1.0.17",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "styled-components": "^5.3.11",
+    "swiper": "^9.3.1",
+    "zod": "^3.21.4",
+    "zustand": "^4.3.8"
+  },
+  "resolutions": {
+    "styled-components": "^5"
+  },
+  "devEngines": {
+    "node": ">=14.x",
+    "npm": ">=7.x"
+  },
+  "browserslist": [],
+  "electronmon": {
+    "patterns": [
+      "!server",
+      "!src/renderer"
+    ]
   }
 }

post-install.js

@@ -1,14 +0,0 @@
-const path = require('path');
-const replace = require('replace-in-file');
-
-// fix long prisma loading times caused by scanning from process.cwd(), which returns "/" when run in electron
-// (thus it scans all files on the computer.) See https://github.com/prisma/prisma/issues/8484
-// solution: we get the app path from main process via sync IPC
-const options = {
-  files: path.join(__dirname, '../release/app/node_modules/', '@prisma', 'client', 'index.js'),
-  from: 'findSync(process.cwd()',
-  to: `findSync(require("electron").ipcRenderer.sendSync('config:get-app-path')`,
-};
-
-const results = replace.sync(options);
-console.log('build script: prisma fix', results);

prisma/schema.prisma

@@ -1,272 +0,0 @@
-generator client {
-  provider      = "prisma-client-js"
-  engineType    = "library"
-  binaryTargets = ["native", "windows"]
-  // output   = "../release/app/node_modules/.prisma/client"
-}
-
-datasource db {
-  provider = "sqlite"
-  url      = "file:../release/app/prisma/dev.db"
-}
-
-model User {
-  id        Int      @id @default(autoincrement())
-  name      String
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  favorites          Favorite[]
-  albumArtistRatings AlbumArtistRating[]
-  artistRatings      ArtistRating[]
-  albumRatings       AlbumRating[]
-  songRatings        SongRating[]
-}
-
-model Server {
-  id             Int      @id @default(autoincrement())
-  nickname       String   @unique
-  url            String   @unique
-  remoteId       String   @map("remote_id")
-  authUsername   String   @map("auth_username")
-  authCredential String   @map("auth_credential")
-  createdAt      DateTime @default(now()) @map("created_at")
-  updatedAt      DateTime @updatedAt @map("updated_at")
-
-  serverType   ServerType @relation(fields: [serverTypeId], references: [id])
-  serverTypeId Int
-
-  serverFolders ServerFolder[]
-  songs         Song[]
-  albums        Album[]
-  artists       Artist[]
-  albumArtists  AlbumArtist[]
-
-  // @@map("server")
-}
-
-model ServerType {
-  id        Int      @id @default(autoincrement())
-  name      String   @unique
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-  Server    Server[]
-
-  // @@map("server_type")
-}
-
-model ServerFolder {
-  id        Int      @id @default(autoincrement())
-  name      String
-  remoteId  String   @map("remote_id")
-  enabled   Boolean  @default(true)
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  server   Server @relation(fields: [serverId], references: [id])
-  serverId Int
-
-  // @@map("server_folder")
-}
-
-model Genre {
-  id        Int      @id @default(autoincrement())
-  name      String   @unique
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  artists      Artist[]
-  albumArtists AlbumArtist[]
-  albums       Album[]
-  songs        Song[]
-
-  // @@map("genre")
-}
-
-model Favorite {
-  id        Int      @id @default(autoincrement())
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  albumArtists AlbumArtist[]
-  artists      Artist[]
-  albums       Album[]
-  songs        Song[]
-
-  User   User? @relation(fields: [userId], references: [id])
-  userId Int?
-
-  // @@map("favorite")
-}
-
-model AlbumArtistRating {
-  id        Int      @id @default(autoincrement())
-  value     Float
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  user   User @relation(fields: [userId], references: [id])
-  userId Int
-
-  albumArtist   AlbumArtist? @relation(fields: [albumArtistId], references: [id])
-  albumArtistId Int
-  // @@map("album_artist_rating")
-
-  @@unique(fields: [albumArtistId, userId], name: "uniqueAlbumArtistRating", map: "unique_album_artist_rating")
-}
-
-model ArtistRating {
-  id        Int      @id @default(autoincrement())
-  value     Float
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  user   User @relation(fields: [userId], references: [id])
-  userId Int
-
-  artist   Artist? @relation(fields: [artistId], references: [id])
-  artistId Int
-  // @@map("artist_rating")
-
-  @@unique(fields: [artistId, userId], name: "uniqueArtistRating", map: "unique_artist_rating")
-}
-
-model AlbumRating {
-  id        Int      @id @default(autoincrement())
-  value     Float
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  user   User @relation(fields: [userId], references: [id])
-  userId Int
-
-  album   Album? @relation(fields: [albumId], references: [id])
-  albumId Int
-  // @@map("album_rating")
-
-  @@unique(fields: [albumId, userId], name: "uniqueAlbumRating", map: "unique_album_rating")
-}
-
-model SongRating {
-  id        Int      @id @default(autoincrement())
-  value     Float
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
-
-  user   User @relation(fields: [userId], references: [id])
-  userId Int
-
-  song   Song? @relation(fields: [songId], references: [id])
-  songId Int
-  // @@map("song_rating")
-
-  @@unique(fields: [songId, userId], name: "uniqueSongRating", map: "unique_song_rating")
-}
-
-model AlbumArtist {
-  id              Int       @id @default(autoincrement())
-  name            String
-  image           String?
-  image_remote    String?   @map("image_remote")
-  sortName        String    @map("sort_name")
-  biography       String?
-  remoteId        String    @map("remote_id")
-  remoteCreatedAt DateTime? @map("remote_created_at")
-  deleted         Boolean   @default(false)
-  createdAt       DateTime  @default(now()) @map("created_at")
-  updatedAt       DateTime  @updatedAt @map("updated_at")
-
-  genres    Genre[]
-  albums    Album[]
-  songs     Song[]
-  favorites Favorite[]
-  ratings   AlbumArtistRating[]
-
-  server   Server @relation(fields: [serverId], references: [id])
-  serverId Int
-  // @@map("album_artist")
-
-  @@unique(fields: [serverId, remoteId], name: "uniqueAlbumArtistId", map: "unique_album_artist_id")
-}
-
-model Artist {
-  id              Int       @id @default(autoincrement())
-  name            String
-  image           String?
-  image_remote    String?   @map("image_remote")
-  biography       String?
-  remoteId        String    @map("remote_id")
-  remoteCreatedAt DateTime? @map("remote_created_at")
-  deleted         Boolean   @default(false)
-  createdAt       DateTime  @default(now()) @map("created_at")
-  updatedAt       DateTime  @updatedAt @map("updated_at")
-
-  genres    Genre[]
-  favorites Favorite[]
-  ratings   ArtistRating[]
-
-  server   Server @relation(fields: [serverId], references: [id])
-  serverId Int
-  // @@map("artist")
-
-  @@unique(fields: [serverId, remoteId], name: "uniqueArtistId", map: "unique_artist_id")
-}
-
-model Album {
-  id              Int       @id @default(autoincrement())
-  name            String
-  image           String?
-  image_remote    String?   @map("image_remote")
-  releaseDate     DateTime? @map("release_date")
-  releaseYear     Int?      @map("release_year")
-  remoteId        String
-  remoteCreatedAt DateTime?
-  deleted         Boolean   @default(false)
-  createdAt       DateTime  @default(now()) @map("created_at")
-  updatedAt       DateTime  @updatedAt @map("updated_at")
-
-  genres       Genre[]
-  albumArtists AlbumArtist[]
-  favorites    Favorite[]
-  ratings      AlbumRating[]
-
-  server   Server @relation(fields: [serverId], references: [id])
-  serverId Int    @map("server_id")
-  // @@map("album")
-
-  @@unique(fields: [serverId, remoteId], name: "uniqueAlbumId", map: "unique_album_id")
-}
-
-model Song {
-  id              Int       @id @default(autoincrement())
-  name            String
-  image           String?
-  remote_image    String?   @map("remote_image")
-  releaseDate     DateTime? @map("release_date")
-  releaseYear     Int?      @map("release_year")
-  duration        Float?
-  lyric           String?
-  bitRate         Int       @map("bit_rate")
-  container       String
-  size            String?
-  channels        Int?
-  discIndex       Int       @default(1) @map("disc_index")
-  trackIndex      Int?      @map("track_index")
-  artistName      String?   @map("artist_name")
-  remoteId        String    @map("remote_id")
-  remoteCreatedAt DateTime? @map("remote_created_at")
-  deleted         Boolean   @default(false)
-  createdAt       DateTime  @default(now()) @map("created_at")
-  updatedAt       DateTime  @updatedAt @map("updated_at")
-
-  genres       Genre[]
-  albumArtists AlbumArtist[]
-  favorites    Favorite[]
-  ratings      SongRating[]
-
-  server   Server @relation(fields: [serverId], references: [id])
-  serverId Int    @map("server_id")
-  // @@map("song")
-
-  @@unique(fields: [serverId, remoteId], name: "uniqueSongId", map: "unique_song_id")
-}

public/favicon.svg

@@ -1,15 +0,0 @@
-<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
-<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-</defs>
-</svg>

public/react.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>

public/vite.svg

@@ -1,15 +0,0 @@
-<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
-<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-</defs>
-</svg>

release/app/package.json

@@ -1,19 +1,23 @@
 {
-  "name": "sonixd-rewrite",
+  "name": "feishin",
-  "version": "0.0.0",
+  "version": "0.2.0",
-  "description": "A foundation for scalable desktop apps",
+  "description": "",
   "main": "./dist/main/main.js",
   "author": {
-    "name": "Electron React Boilerplate Maintainers",
+    "name": "jeffvli",
-    "email": "electronreactboilerplate@gmail.com",
+    "url": "https://github.com/jeffvli/"
-    "url": "https://github.com/electron-react-boilerplate"
+  },
+  "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"
   },
-  "scripts": {},
   "dependencies": {
-    "@prisma/client": "4.4.0"
+    "cheerio": "^1.0.0-rc.12",
+    "mpris-service": "^2.1.2"
   },
   "devDependencies": {
-    "prisma": "4.4.0"
+    "electron": "22.3.1"
   },
-  "license": "MIT"
+  "license": "GPL-3.0"
 }

src/App.tsx

@@ -1,73 +0,0 @@
-import { useState } from "react";
-import electron from "/electron.png";
-import react from "/react.svg";
-import vite from "/vite.svg";
-import styles from "styles/app.module.scss";
-
-const App: React.FC = () => {
-  const [count, setCount] = useState(0);
-
-  window.electron.doThing();
-
-  return (
-    <div className={styles.app}>
-      <header className={styles.appHeader}>
-        <div className={styles.logos}>
-          <div className={styles.imgBox}>
-            <img
-              src={electron}
-              style={{ height: "24vw" }}
-              className={styles.appLogo}
-              alt="electron"
-            />
-          </div>
-          <div className={styles.imgBox}>
-            <img src={vite} style={{ height: "19vw" }} alt="vite" />
-          </div>
-          <div className={styles.imgBox}>
-            <img
-              src={react}
-              style={{ maxWidth: "100%" }}
-              className={styles.appLogo}
-              alt="logo"
-            />
-          </div>
-        </div>
-        <p>Hello Electron + Vite + React!</p>
-        <p>
-          <button onClick={() => setCount((count) => count + 1)}>
-            count is: {count}
-          </button>
-        </p>
-        <p>
-          Edit <code>App.tsx</code> and save to test HMR updates.
-        </p>
-        <div>
-          <a
-            className={styles.appLink}
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {" | "}
-          <a
-            className={styles.appLink}
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-          <div className={styles.staticPublic}>
-            Place static files into the <code>/public</code> folder
-            <img style={{ width: 77 }} src="./node.png" />
-          </div>
-        </div>
-      </header>
-    </div>
-  );
-};
-
-export default App;

src/__tests__/App.test.tsx

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

src/assets/styles/app.module.scss

@@ -1,65 +0,0 @@
-.app {
-  text-align: center;
-
-  .appHeader {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-
-    .logos {
-      display: flex;
-      box-sizing: border-box;
-      align-items: center;
-      padding: 0 5vw;
-      width: 100%;
-
-      .imgBox {
-        width: 33.33%;
-
-        .appLogo {
-          pointer-events: none;
-        }
-
-        @media (prefers-reduced-motion: no-preference) {
-          .appLogo {
-            animation: App-logo-spin infinite 20s linear;
-          }
-          @keyframes App-logo-spin {
-            from {
-              transform: rotate(0deg);
-            }
-            to {
-              transform: rotate(360deg);
-            }
-          }
-        }
-      }
-    }
-
-    button {
-      font-size: calc(10px + 2vmin);
-    }
-
-    .appLink {
-      color: #61dafb;
-    }
-
-    .staticPublic {
-      display: flex;
-      align-items: center;
-
-      code {
-        padding: 4px 7px;
-        margin: 0 4px;
-        border-radius: 4px;
-        background-color: rgb(30, 30, 30, .7);
-        font-size: 13px;
-      }
-    }
-  }
-}

src/assets/styles/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/global.d.ts

@@ -1,15 +0,0 @@
-import { Prisma } from '@prisma/client';
-
-type ApiSurface = {
-  prisma: {
-    server: {
-      getServer: () => Promise<Prisma.ServerSelect>;
-    };
-  };
-};
-
-declare global {
-  interface Window {
-    electron: ApiSurface;
-  }
-}

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;