Fix dependencies and simpler animation

- Make react/react-dom/test-renderer use the same major version
- Upgrade @types/node to 14.18.0. This was necessary mainly for typing. Update the test versions as well
- Strip out react-animate-css, just use basic css animation fadeIn/fadeOut
- Made linter happy now

.github/workflows/publish-dev.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Install Node, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/publish-linux.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/publish-macos.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/publish-windows.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Install Node, NPM
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: Setup yarn
         run: npm install -g yarn

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: '14.16.1'
+          node-version: '14.18.0'
 
       - name: yarn install
         run: |

README.md

@@ -118,7 +118,7 @@ To package apps for the local platform:
 yarn package
 ```
 
-If you receive errors while packaging the application, try upgrading/downgrading your Node version (tested on v14.16.1).
+If you receive errors while packaging the application, try upgrading/downgrading your Node version (tested on v14.18.0).
 
 If you are unable to run via debug in VS Code, check troubleshooting steps [here](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2757#issuecomment-784200527).
 

package.json

@@ -174,16 +174,16 @@
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.172",
     "@types/md5": "^2.3.1",
-    "@types/node": "14.14.10",
+    "@types/node": "14.18.0",
     "@types/randomstring": "^1.1.7",
-    "@types/react": "^16.9.44",
+    "@types/react": "^17.0.2",
     "@types/react-chartjs-2": "^2.5.7",
     "@types/react-dnd": "^3.0.2",
-    "@types/react-dom": "^16.9.9",
+    "@types/react-dom": "^17.0.2",
     "@types/react-lazy-load-image-component": "^1.5.2",
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.6",
-    "@types/react-test-renderer": "^16.9.3",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/react-transition-group": "^4.4.4",
     "@types/react-virtualized": "^9.21.13",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
@@ -292,7 +292,6 @@
     "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",
@@ -325,4 +324,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

src/api/jellyfinApi.ts

@@ -629,12 +629,12 @@ export const getStarred = async (options: { musicFolderId?: string }) => {
   });
 
   return {
-    album: (
-      songAndAlbumData.Items.filter((data: any) => data.Type === 'MusicAlbum') || []
-    ).map((entry: any) => normalizeAlbum(entry)),
-    song: (
-      songAndAlbumData.Items.filter((data: any) => data.Type === 'Audio') || []
-    ).map((entry: any) => normalizeSong(entry)),
+    album: (songAndAlbumData.Items.filter((data: any) => data.Type === 'MusicAlbum') || []).map(
+      (entry: any) => normalizeAlbum(entry)
+    ),
+    song: (songAndAlbumData.Items.filter((data: any) => data.Type === 'Audio') || []).map(
+      (entry: any) => normalizeSong(entry)
+    ),
     artist: (artistData.Items || []).map((entry: any) => normalizeArtist(entry)),
   };
 };

src/components/debug/DebugWindow.tsx

@@ -35,29 +35,6 @@ const DebugWindow = ({ ...rest }) => {
     ],
   };
 
-  const fadeChartOptions = {
-    scales: {
-      yAxes: [
-        {
-          ticks: {
-            beginAtZero: true,
-          },
-        },
-      ],
-    },
-    plugins: {
-      title: {
-        display: true,
-        text: `${playQueue.player1.fadeData.volumeData.length} fades`,
-        position: 'bottom',
-      },
-      legend: {
-        display: false,
-      },
-    },
-    animation: false,
-  };
-
   return (
     <Panel
       style={{
@@ -187,7 +164,27 @@ const DebugWindow = ({ ...rest }) => {
           </FlexboxGrid.Item>
         </FlexboxGrid>
 
-        <Line data={fadeChartData} options={fadeChartOptions} />
+        <Line
+          data={fadeChartData}
+          options={{
+            scales: {
+              yAxes: {
+                min: 0,
+              },
+            },
+            plugins: {
+              title: {
+                display: true,
+                text: `${playQueue.player1.fadeData.volumeData.length} fades`,
+                position: 'bottom',
+              },
+              legend: {
+                display: false,
+              },
+            },
+            animation: false,
+          }}
+        />
 
         <Divider />
 

src/components/layout/GenericPage.tsx

@@ -13,10 +13,8 @@ const GenericPage = ({ header, children, hideDivider, ...rest }: any) => {
     if (misc.dynamicBackground) {
       const cachedImagePath = `${misc.imageCachePath}album_${playQueue.current?.albumId}.jpg`;
       const serverImagePath = playQueue.current?.image.replace(/size=\d+/, 'size=500');
-      const cssBackgroundImagePath = `${misc.imageCachePath}album_${playQueue.current?.albumId}.jpg`.replaceAll(
-        '\\',
-        '/'
-      );
+      const cssBackgroundImagePath =
+        `${misc.imageCachePath}album_${playQueue.current?.albumId}.jpg`.replaceAll('\\', '/');
 
       if (!isCached(cachedImagePath)) {
         const preloadImage = new Image();

src/components/library/AlbumList.tsx

@@ -81,7 +81,12 @@ const AlbumList = () => {
     }
   }, [config.serverType, musicFolder.id, view.album.filter, view.album.pagination]);
 
-  const { isLoading, isError, data: albums, error }: any = useQuery(
+  const {
+    isLoading,
+    isError,
+    data: albums,
+    error,
+  }: any = useQuery(
     currentQueryKey,
     () =>
       view.album.filter === 'random' ||
@@ -166,14 +171,8 @@ const AlbumList = () => {
     'year',
   ]);
 
-  const {
-    filteredData,
-    byArtistData,
-    byArtistBaseData,
-    byGenreData,
-    byStarredData,
-    byYearData,
-  } = useAdvancedFilter(albums?.data, view.album.advancedFilters);
+  const { filteredData, byArtistData, byArtistBaseData, byGenreData, byStarredData, byYearData } =
+    useAdvancedFilter(albums?.data, view.album.advancedFilters);
 
   const { sortColumns, sortedData } = useColumnSort(filteredData, Item.Album, view.album.sort);
 

src/components/library/ArtistList.tsx

@@ -40,7 +40,12 @@ const ArtistList = () => {
     }
   }, [folder]);
 
-  const { isLoading, isError, data: artists, error }: any = useQuery(
+  const {
+    isLoading,
+    isError,
+    data: artists,
+    error,
+  }: any = useQuery(
     ['artistList', musicFolder],
     () =>
       apiController({

src/components/library/FolderList.tsx

@@ -34,14 +34,17 @@ const FolderList = () => {
   const [musicFolder, setMusicFolder] = useState(folder.musicFolder);
   const folderPickerContainerRef = useRef(null);
 
-  const { isLoading, isError, data: indexData, error }: any = useQuery(
-    ['indexes', musicFolder],
-    () =>
-      apiController({
-        serverType: config.serverType,
-        endpoint: 'getIndexes',
-        args: config.serverType === Server.Subsonic ? { musicFolderId: musicFolder } : null,
-      })
+  const {
+    isLoading,
+    isError,
+    data: indexData,
+    error,
+  }: any = useQuery(['indexes', musicFolder], () =>
+    apiController({
+      serverType: config.serverType,
+      endpoint: 'getIndexes',
+      args: config.serverType === Server.Subsonic ? { musicFolderId: musicFolder } : null,
+    })
   );
 
   const { isLoading: isLoadingFolderData, data: folderData }: any = useQuery(

src/components/library/GenreList.tsx

@@ -22,7 +22,12 @@ const GenreList = () => {
   const config = useAppSelector((state) => state.config);
   const misc = useAppSelector((state) => state.misc);
   const folder = useAppSelector((state) => state.folder);
-  const { isLoading, isError, data: genres, error }: any = useQuery(['genrePageList'], async () => {
+  const {
+    isLoading,
+    isError,
+    data: genres,
+    error,
+  }: any = useQuery(['genrePageList'], async () => {
     const res = await apiController({
       serverType: config.serverType,
       endpoint: 'getGenres',

src/components/library/MusicList.tsx

@@ -70,7 +70,12 @@ const MusicList = () => {
     }
   }, [musicFolder.id, view.music.filter, view.music.pagination]);
 
-  const { isLoading, isError, data: songs, error }: any = useQuery(
+  const {
+    isLoading,
+    isError,
+    data: songs,
+    error,
+  }: any = useQuery(
     currentQueryKey,
     () =>
       view.music.filter === 'random' ||

src/components/player/NowPlayingInfoView.tsx

@@ -5,7 +5,6 @@ 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';
@@ -129,13 +128,7 @@ const NowPlayingInfoView = () => {
   }
 
   return (
-    <CSSTransition
-      timeout={{
-        enter: 500,
-        exit: 0,
-      }}
-      classNames="grid-animated"
-    >
+    <div style={{ animation: `${!isLoading ? 'fadeIn 500ms' : 'fadeOut 0s'}` }}>
       {currentArtist && playQueue.entry?.length > 0 && (
         <>
           <InfoGridContainer>
@@ -353,7 +346,7 @@ const NowPlayingInfoView = () => {
           )}
         </>
       )}
-    </CSSTransition>
+    </div>
   );
 };
 

src/components/playlist/PlaylistList.tsx

@@ -33,7 +33,12 @@ const PlaylistList = () => {
   const playlistTriggerRef = useRef<any>();
   const [newPlaylistName, setNewPlaylistName] = useState('');
   const [viewType, setViewType] = useState(settings.getSync('playlistViewType') || 'list');
-  const { isLoading, isError, data: playlists, error }: any = useQuery(['playlists'], () =>
+  const {
+    isLoading,
+    isError,
+    data: playlists,
+    error,
+  }: any = useQuery(['playlists'], () =>
     apiController({ serverType: config.serverType, endpoint: 'getPlaylists' })
   );
   const filteredData = useSearchQuery(misc.searchQuery, playlists, ['title', 'comment', 'owner']);

src/components/search/SearchView.tsx

@@ -198,19 +198,15 @@ const SearchView = () => {
     },
   });
 
-  const {
-    handleRowClick: handleAlbumRowClick,
-    handleRowDoubleClick: handleAlbumRowDoubleClick,
-  } = useListClickHandler({
-    doubleClick: (rowData: any) => history.push(`/library/album/${rowData.id}`),
-  });
+  const { handleRowClick: handleAlbumRowClick, handleRowDoubleClick: handleAlbumRowDoubleClick } =
+    useListClickHandler({
+      doubleClick: (rowData: any) => history.push(`/library/album/${rowData.id}`),
+    });
 
-  const {
-    handleRowClick: handleArtistRowClick,
-    handleRowDoubleClick: handleArtistRowDoubleClick,
-  } = useListClickHandler({
-    doubleClick: (rowData: any) => history.push(`/library/artist/${rowData.id}`),
-  });
+  const { handleRowClick: handleArtistRowClick, handleRowDoubleClick: handleArtistRowDoubleClick } =
+    useListClickHandler({
+      doubleClick: (rowData: any) => history.push(`/library/artist/${rowData.id}`),
+    });
 
   return (
     <GenericPage

src/main.dev.js

@@ -357,13 +357,14 @@ if (isWindows() && isWindows10()) {
         : 'Unknown Artist';
     Controls.displayUpdater.musicProperties.albumTitle = arg.album || 'Unknown Album';
 
-    Controls.displayUpdater.thumbnail = windowsStorageStreams.RandomAccessStreamReference.createFromUri(
-      new windowsFoundation.Uri(
-        arg.image.includes('placeholder')
-          ? 'https://raw.githubusercontent.com/jeffvli/sonixd/main/src/img/placeholder.png'
-          : arg.image
-      )
-    );
+    Controls.displayUpdater.thumbnail =
+      windowsStorageStreams.RandomAccessStreamReference.createFromUri(
+        new windowsFoundation.Uri(
+          arg.image.includes('placeholder')
+            ? 'https://raw.githubusercontent.com/jeffvli/sonixd/main/src/img/placeholder.png'
+            : arg.image
+        )
+      );
 
     Controls.displayUpdater.update();
   });

src/redux/folderSlice.ts

@@ -54,9 +54,6 @@ const folderSlice = createSlice({
   },
 });
 
-export const {
-  setMusicFolder,
-  setCurrentViewedFolder,
-  setAppliedFolderViews,
-} = folderSlice.actions;
+export const { setMusicFolder, setCurrentViewedFolder, setAppliedFolderViews } =
+  folderSlice.actions;
 export default folderSlice.reducer;

src/styles/App.global.css

@@ -186,20 +186,3 @@ 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;
-}

yarn.lock

@@ -1953,10 +1953,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.7.tgz#195808b2d4b2e7c33e75e7d9b24aeee88f94660d"
   integrity sha512-Zh5Z4kACfbeE8aAOYh9mqotRxaZMro8MbBQtR8vEXOMiZo2rGEh2LayJijKdlu48YnS6y2EFU/oo2NCe5P6jGw==
 
-"@types/node@14.14.10":
-  version "14.14.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
-  integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
+"@types/node@14.18.0":
+  version "14.18.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.0.tgz#98df2397f6936bfbff4f089e40e06fa5dd88d32a"
+  integrity sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ==
 
 "@types/node@^14.6.2":
   version "14.18.12"
@@ -2025,12 +2025,12 @@
   dependencies:
     react-dnd "*"
 
-"@types/react-dom@^16.9.9":
-  version "16.9.14"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.14.tgz#674b8f116645fe5266b40b525777fc6bb8eb3bcd"
-  integrity sha512-FIX2AVmPTGP30OUJ+0vadeIFJJ07Mh1m+U0rxfgyW34p3rTlXI+nlenvAxNn4BP36YyI9IJ/+UJ7Wu22N1pI7A==
+"@types/react-dom@^17.0.2":
+  version "17.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.15.tgz#f2c8efde11521a4b7991e076cb9c70ba3bb0d156"
+  integrity sha512-Tr9VU9DvNoHDWlmecmcsE5ZZiUkYx+nKBzum4Oxe1K0yJVyBlfbq7H3eXjxXqJczBKqPGq3EgfTru4MgKb9+Yw==
   dependencies:
-    "@types/react" "^16"
+    "@types/react" "^17"
 
 "@types/react-lazy-load-image-component@^1.5.2":
   version "1.5.2"
@@ -2067,12 +2067,12 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react-test-renderer@^16.9.3":
-  version "16.9.5"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.5.tgz#edab67da470f7c3e997f58d55dcfe2643cc30a68"
-  integrity sha512-C4cN7C2uSSGOYelp2XfdtJb5TsCP+QiZ+0Bm4U3ZfUswN8oN9O/l86XO/OvBSFCmWY7w75fzsQvZ50eGkFN34A==
+"@types/react-test-renderer@^17.0.1":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
+  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
   dependencies:
-    "@types/react" "^16"
+    "@types/react" "*"
 
 "@types/react-transition-group@^4.4.4":
   version "4.4.4"
@@ -2103,19 +2103,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
-  version "17.0.43"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
-  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^16", "@types/react@^16.9.44":
-  version "16.14.24"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.24.tgz#f2c5e9fa78f83f769884b83defcf7924b9eb5c82"
-  integrity sha512-e7U2WC8XQP/xfR7bwhOhNFZKPTfW1ph+MiqtudKb8tSV8RyCsovQx2sNVtKoOryjxFKpHPPC/yNiGfdeVM5Gyw==
+"@types/react@*", "@types/react@^17", "@types/react@^17.0.2":
+  version "17.0.44"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
+  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -4627,7 +4618,7 @@ dom-accessibility-api@^0.5.6:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b"
   integrity sha512-R305kwb5CcMDIpSHUnLyIAp7SrSPBx6F0VfQFB3M75xVMHhXJJIdePYgbPPh1o57vCHNu5QztokWUPsLjWzFqw==
 
-dom-helpers@^5.0.1, dom-helpers@^5.1.3:
+dom-helpers@^5.1.3:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -10129,16 +10120,6 @@ react-test-renderer@^17.0.1:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
-react-transition-group@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"