Upgrade depencencies, node version

.erb/configs/webpack.config.renderer.dev.babel.js

@@ -239,28 +239,30 @@ export default merge(baseConfig, {
     __dirname: false,
     __filename: false,
   },
-
+  infrastructureLogging: {
+    level: 'verbose'
+  },
   devServer: {
     port,
-    publicPath,
-    compress: true,
-    noInfo: false,
-    stats: 'errors-only',
-    inline: true,
-    lazy: false,
     hot: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
-    contentBase: path.join(__dirname, 'dist'),
-    watchOptions: {
-      aggregateTimeout: 300,
-      ignored: /node_modules/,
-      poll: 100,
-    },
     historyApiFallback: {
       verbose: true,
       disableDotRule: false,
     },
-    before() {
+    devMiddleware: {
+      publicPath,
+      stats: 'errors-only',
+    },
+    static: {
+      directory: path.join(__dirname, 'dist'),
+      watch: {
+        aggregateTimeout: 300,
+        ignored: /node_modules/,
+        interval: 100,
+      },
+    },
+    onBeforeSetupMiddleware(devServer) {
       console.log('Starting Main Process...');
       spawn('npm', ['run', 'start:main'], {
         shell: true,

babel.config.js

@@ -47,6 +47,8 @@ module.exports = (api) => {
       // Stage 3
       require('@babel/plugin-syntax-dynamic-import'),
       require('@babel/plugin-syntax-import-meta'),
+      [require('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
+      [require('@babel/plugin-proposal-private-methods'), { loose: true }],
       [require('@babel/plugin-proposal-class-properties'), { loose: true }],
       require('@babel/plugin-proposal-json-strings'),
 

package.json

@@ -164,7 +164,7 @@
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@teamsupercell/typings-for-css-modules-loader": "^2.4.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
@@ -184,6 +184,7 @@
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-test-renderer": "^16.9.3",
+    "@types/react-transition-group": "^4.4.4",
     "@types/react-virtualized": "^9.21.13",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -203,9 +204,9 @@
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.1.5",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "detect-port": "^1.3.0",
-    "electron": "13.6.3",
+    "electron": "13.6.6",
     "electron-builder": "^22.10.5",
     "electron-devtools-installer": "git+https://github.com/MarshallOfSound/electron-devtools-installer.git",
     "electron-notarize": "^1.0.0",
@@ -236,7 +237,6 @@
     "less-loader": "7.3.0",
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "^2.1.0",
-    "node-sass": "^6.0.1",
     "opencollective-postinstall": "^2.0.3",
     "prettier": "^2.0.5",
     "react-refresh": "^0.10.0",
@@ -252,7 +252,7 @@
     "webpack": "^5.5.1",
     "webpack-bundle-analyzer": "^4.1.0",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0",
+    "webpack-dev-server": "^4.0.0",
     "webpack-merge": "^5.4.0",
     "yarn-deduplicate": "^3.1.0"
   },
@@ -273,7 +273,7 @@
     "format-duration": "^1.4.0",
     "history": "^5.0.0",
     "i18next": "^21.6.5",
-    "i18next-parser": "^5.4.0",
+    "i18next-parser": "^6.3.0",
     "image-downloader": "^4.0.3",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
@@ -282,7 +282,6 @@
     "nodejs-fs-utils": "^1.2.5",
     "randomstring": "^1.2.1",
     "react": "^17.0.2",
-    "react-animated-css": "^1.2.1",
     "react-audio-player": "^0.17.0",
     "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
@@ -293,19 +292,22 @@
     "react-query": "^3.19.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
+    "react-transition-group": "^4.4.2",
     "react-use": "^17.3.2",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "regenerator-runtime": "^0.13.5",
     "rsuite": "^4.10.2",
+    "sass": "^1.49.11",
     "source-map-support": "^0.5.19",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5"
   },
   "resolutions": {
+    "glob-parent": "^5.1.2",
     "styled-components": "^5"
   },
   "devEngines": {
-    "node": ">=10.x",
+    "node": ">=12.13.0",
     "npm": ">=6.x",
     "yarn": ">=1.21.3"
   },
@@ -323,4 +325,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

src/components/player/NowPlayingInfoView.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { shell } from 'electron';
 import _ from 'lodash';
-import { Animated } from 'react-animated-css';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { useQuery, useQueryClient } from 'react-query';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
+import { CSSTransition } from 'react-transition-group';
+
 import { apiController } from '../../api/controller';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { CoverArtWrapper, PageHeaderSubtitleDataLine } from '../layout/styled';
@@ -128,12 +129,12 @@ const NowPlayingInfoView = () => {
   }
 
   return (
-    <Animated
-      animationInDuration={500}
-      animationOutDuration={0}
-      animationIn="fadeIn"
-      animationOut="fadeOut"
-      isVisible={!isLoading}
+    <CSSTransition
+      timeout={{
+        enter: 500,
+        exit: 0,
+      }}
+      classNames="grid-animated"
     >
       {currentArtist && playQueue.entry?.length > 0 && (
         <>
@@ -352,7 +353,7 @@ const NowPlayingInfoView = () => {
           )}
         </>
       )}
-    </Animated>
+    </CSSTransition>
   );
 };
 

src/styles/App.global.css

@@ -6,6 +6,7 @@
 @import '~rsuite/lib/styles/themes/dark/index.less';
 @import 'custom-theme.less';
 @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500&family=Cormorant:wght@300;400;500&family=Encode+Sans:wght@300;400;500&family=Epilogue:wght@300;400;500&family=Hahmlet:wght@300;400;500&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@300;400;500&family=Manrope:wght@300;400;500&family=Montserrat:wght@300;400;500&family=Oswald:wght@300;400;500&family=Poppins:wght@300;400;500&family=Raleway:wght@300;400;500&family=Roboto:wght@300;400;500&family=Sora:wght@300;400;500&family=Spectral&family=Work+Sans:wght@300;400;500&display=swap');
+
 html,
 body {
   height: 100%;
@@ -185,3 +186,20 @@ body {
 h6 {
   font-weight: 400;
 }
+
+.grid-animated-enter {
+  opacity: 0;
+}
+
+.grid-animated-enter-active {
+  opacity: 1;
+  transition: opacity 500ms;
+}
+
+.grid-animated-exit {
+  opacity: 1;
+}
+
+.grid-animated-exit-active {
+  opacity: 0;
+}