jeffvli · jeffvli · Jan 17, 2022
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
@@ -3,15 +3,14 @@ import { Icon } from 'rsuite';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
-import cacheImage from '../shared/cacheImage';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
   appendPlayQueue,
   clearPlayQueue,
   fixPlayer2Index,
   setPlayQueue,
 } from '../../redux/playQueueSlice';
-import { filterPlayQueue, getPlayedSongsNotification, isCached } from '../../shared/utils';
+import { filterPlayQueue, getPlayedSongsNotification } from '../../shared/utils';
 
 import {
   CardPanel,
@@ -47,8 +46,6 @@ const Card = ({
   lazyLoad,
   playClick,
   size,
-  cacheImages,
-  cachePath,
   handleFavorite,
   notVisibleByDefault,
   noInfoPanel,
@@ -268,23 +265,10 @@ const Card = ({
               <CardImgWrapper size={size} onClick={handleClick}>
                 {lazyLoad ? (
                   <LazyCardImg
-                    src={
-                      isCached(`${cachePath}${rest.details.cacheType}_${rest.details.id}.jpg`)
-                        ? `${cachePath}${rest.details.cacheType}_${rest.details.id}.jpg`
-                        : rest.coverArt
-                    }
+                    src={rest.coverArt}
                     alt="img"
-                    effect="opacity"
                     cardsize={size}
                     visibleByDefault={!notVisibleByDefault}
-                    afterLoad={() => {
-                      if (cacheImages) {
-                        cacheImage(
-                          `${rest.details.cacheType}_${rest.details.id}.jpg`,
-                          rest.coverArt.replaceAll(/=150/gi, '=350')
-                        );
-                      }
-                    }}
                   />
                 ) : (
                   <CardImg src={rest.coverArt} alt="img" onClick={handleClick} cardsize={size} />

diff --git a/src/components/layout/GenericPage.tsx b/src/components/layout/GenericPage.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { Divider } from 'rsuite';
 import { useAppSelector } from '../../redux/hooks';
 import { PageContainer, PageHeader, PageContent } from './styled';
-import { isCached } from '../../shared/utils';
 
 const GenericPage = ({ header, children, hideDivider, ...rest }: any) => {
   const playQueue = useAppSelector((state) => state.playQueue);
@@ -11,23 +10,16 @@ const GenericPage = ({ header, children, hideDivider, ...rest }: any) => {
 
   useEffect(() => {
     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 preloadImage = new Image();
+      preloadImage.src = serverImagePath;
+      const imagePath = serverImagePath;
 
-      if (!isCached(cachedImagePath)) {
-        const preloadImage = new Image();
-        preloadImage.src = serverImagePath;
+      if (imagePath) {
+        setBackgroundImage(imagePath);
       }
-
-      const imagePath = isCached(cachedImagePath) ? cssBackgroundImagePath : serverImagePath;
-
-      setBackgroundImage(imagePath);
     }
-  }, [misc.imageCachePath, misc.dynamicBackground, playQueue]);
+  }, [misc.dynamicBackground, playQueue]);
 
   return (
     <PageContainer

diff --git a/src/components/layout/GenericPageHeader.tsx b/src/components/layout/GenericPageHeader.tsx
@@ -17,7 +17,6 @@ import {
   PageHeaderTitle,
   PageHeaderWrapper,
 } from './styled';
-import cacheImage from '../shared/cacheImage';
 import CustomTooltip from '../shared/CustomTooltip';
 
 const GenericPageHeader = ({
@@ -35,7 +34,6 @@ const GenericPageHeader = ({
   handleListClick,
   handleGridClick,
   viewTypeSetting,
-  cacheImages,
   showTitleTooltip,
   isDark,
 }: any) => {
@@ -54,14 +52,6 @@ const GenericPageHeader = ({
               alt="header-img"
               height={imageHeight || '195px'}
               visibleByDefault
-              afterLoad={() => {
-                if (cacheImages.enabled) {
-                  cacheImage(
-                    `${cacheImages.cacheType}_${cacheImages.id}.jpg`,
-                    image.replaceAll(/=150/gi, '=350')
-                  );
-                }
-              }}
             />
           )}
         </CoverArtWrapper>

diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx
@@ -236,6 +236,7 @@ export const PageHeaderWrapper = styled.div<{
   imageHeight: string;
   isDark?: boolean;
 }>`
+  user-select: none;
   display: ${(props) => (props.hasImage ? 'inline-block' : 'undefined')};
   width: ${(props) => (props.hasImage ? `calc(100% - ${props.imageHeight + 15}px)` : '100%')};
   margin-left: ${(props) => (props.hasImage ? '15px' : '0px')};

diff --git a/src/components/library/AlbumList.tsx b/src/components/library/AlbumList.tsx
@@ -451,11 +451,6 @@ const AlbumList = () => {
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
           handleRating={handleRowRating}
-          cacheImages={{
-            enabled: settings.getSync('cacheImages'),
-            cacheType: 'album',
-            cacheIdProperty: 'albumId',
-          }}
           page="albumListPage"
           listType="album"
           virtualized

diff --git a/src/components/library/AlbumView.tsx b/src/components/library/AlbumView.tsx
@@ -44,7 +44,6 @@ import {
   formatDuration,
   getAlbumSize,
   getPlayedSongsNotification,
-  isCached,
 } from '../../shared/utils';
 import {
   LinkWrapper,
@@ -298,13 +297,7 @@ const AlbumView = ({ ...rest }: any) => {
             // which causes the background-image to flicker
             expanded={misc.expandSidebar}
             style={{
-              backgroundImage: `url(${
-                !data?.image.match('placeholder')
-                  ? isCached(`${misc.imageCachePath}album_${albumId}.jpg`)
-                    ? `${misc.imageCachePath}album_${albumId}.jpg`.replaceAll('\\', '/')
-                    : data.image
-                  : 'null'
-              })`,
+              backgroundImage: `url(${!data?.image.match('placeholder') ? data.image : 'null'})`,
             }}
           />
         </BlurredBackgroundWrapper>
@@ -319,11 +312,7 @@ const AlbumView = ({ ...rest }: any) => {
               <Card
                 title="None"
                 subtitle=""
-                coverArt={
-                  isCached(`${misc.imageCachePath}album_${albumId}.jpg`)
-                    ? `${misc.imageCachePath}album_${albumId}.jpg`
-                    : data.image
-                }
+                coverArt={data.image}
                 size={200}
                 hasHoverButtons
                 noInfoPanel
@@ -334,11 +323,6 @@ const AlbumView = ({ ...rest }: any) => {
                 handleFavorite={handleFavorite}
               />
             }
-            cacheImages={{
-              enabled: settings.getSync('cacheImages'),
-              cacheType: 'album',
-              id: data.albumId,
-            }}
             imageHeight={200}
             title={data.title}
             showTitleTooltip
@@ -560,11 +544,6 @@ const AlbumView = ({ ...rest }: any) => {
           virtualized
           rowHeight={Number(settings.getSync('musicListRowHeight'))}
           fontSize={Number(settings.getSync('musicListFontSize'))}
-          cacheImages={{
-            enabled: settings.getSync('cacheImages'),
-            cacheType: 'album',
-            cacheIdProperty: 'albumId',
-          }}
           page="albumPage"
           listType="music"
           isModal={rest.isModal}

diff --git a/src/components/library/ArtistList.tsx b/src/components/library/ArtistList.tsx
@@ -224,11 +224,6 @@ const ArtistList = () => {
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
           handleRating={handleRowRating}
-          cacheImages={{
-            enabled: settings.getSync('cacheImages'),
-            cacheType: 'artist',
-            cacheIdProperty: 'id',
-          }}
           page="artistListPage"
           listType="artist"
           virtualized

diff --git a/src/components/library/ArtistView.tsx b/src/components/library/ArtistView.tsx
@@ -38,12 +38,7 @@ import {
   setRate,
 } from '../../redux/playQueueSlice';
 import { notifyToast } from '../shared/toast';
-import {
-  filterPlayQueue,
-  formatDuration,
-  getPlayedSongsNotification,
-  isCached,
-} from '../../shared/utils';
+import { filterPlayQueue, formatDuration, getPlayedSongsNotification } from '../../shared/utils';
 import {
   LinkWrapper,
   SectionTitle,
@@ -467,9 +462,7 @@ const ArtistView = ({ ...rest }: any) => {
 
   useEffect(() => {
     if (!isLoading) {
-      const img = isCached(`${misc.imageCachePath}artist_${data?.id}.jpg`)
-        ? `${misc.imageCachePath}artist_${data?.id}.jpg`
-        : data?.image?.includes('placeholder')
+      const img = data?.image?.includes('placeholder')
         ? data?.info?.imageUrl
           ? data?.info?.imageUrl
           : data?.image
@@ -503,7 +496,7 @@ const ArtistView = ({ ...rest }: any) => {
       };
       setAvgColor(img);
     }
-  }, [data?.id, data?.image, data?.info, isLoading, misc.imageCachePath]);
+  }, [data?.id, data?.image, data?.info, isLoading]);
 
   useEffect(() => {
     const allAlbumDurations = _.sum(_.map(data?.album, 'duration'));
@@ -545,9 +538,7 @@ const ArtistView = ({ ...rest }: any) => {
                 title={t('None')}
                 subtitle=""
                 coverArt={
-                  isCached(`${misc.imageCachePath}artist_${data?.id}.jpg`)
-                    ? `${misc.imageCachePath}artist_${data?.id}.jpg`
-                    : data?.image?.includes('placeholder')
+                  data?.image?.includes('placeholder')
                     ? data?.info?.imageUrl
                       ? data?.info?.imageUrl
                       : data?.image
@@ -565,11 +556,6 @@ const ArtistView = ({ ...rest }: any) => {
                 handleFavorite={handleFavorite}
               />
             }
-            cacheImages={{
-              enabled: settings.getSync('cacheImages'),
-              cacheType: 'artist',
-              id: data.id,
-            }}
             imageHeight={
               location.pathname.match('/songs|/albums|/compilationalbums|/topsongs') ? 180 : 225
             }
@@ -751,7 +737,7 @@ const ArtistView = ({ ...rest }: any) => {
                         </StyledPopover>
                       }
                     >
-                      <CustomTooltip text="{t('Info')}">
+                      <CustomTooltip text={t('Info')}>
                         <StyledButton appearance="subtle" size="lg">
                           <Icon icon="info-circle" />
                         </StyledButton>
@@ -778,11 +764,6 @@ const ArtistView = ({ ...rest }: any) => {
               virtualized
               rowHeight={config.lookAndFeel.listView.music.rowHeight}
               fontSize={config.lookAndFeel.listView.music.fontSize}
-              cacheImages={{
-                enabled: settings.getSync('cacheImages'),
-                cacheType: 'album',
-                cacheIdProperty: 'albumId',
-              }}
               listType="music"
               dnd
               disabledContextMenuOptions={['deletePlaylist', 'viewInModal']}
@@ -810,11 +791,6 @@ const ArtistView = ({ ...rest }: any) => {
                   virtualized
                   rowHeight={config.lookAndFeel.listView.album.rowHeight}
                   fontSize={config.lookAndFeel.listView.album.fontSize}
-                  cacheImages={{
-                    enabled: settings.getSync('cacheImages'),
-                    cacheType: 'album',
-                    cacheIdProperty: 'albumId',
-                  }}
                   page="artistPage"
                   listType="album"
                   isModal={rest.isModal}
@@ -863,11 +839,6 @@ const ArtistView = ({ ...rest }: any) => {
               virtualized
               rowHeight={config.lookAndFeel.listView.music.rowHeight}
               fontSize={config.lookAndFeel.listView.music.fontSize}
-              cacheImages={{
-                enabled: settings.getSync('cacheImages'),
-                cacheType: 'album',
-                cacheIdProperty: 'albumId',
-              }}
               listType="music"
               dnd
               disabledContextMenuOptions={['deletePlaylist', 'viewInModal']}
@@ -934,7 +905,6 @@ const ArtistView = ({ ...rest }: any) => {
                     rowHeight={config.lookAndFeel.listView.music.rowHeight}
                     fontSize={config.lookAndFeel.listView.music.fontSize}
                     listType="music"
-                    cacheImages={{ enabled: false }}
                     isModal={false}
                     miniView={false}
                     handleFavorite={(rowData: any) =>

diff --git a/src/components/library/FolderList.tsx b/src/components/library/FolderList.tsx
@@ -245,11 +245,6 @@ const FolderList = () => {
               handleRowDoubleClick={handleRowDoubleClick}
               handleFavorite={handleRowFavorite}
               handleRating={handleRowRating}
-              cacheImages={{
-                enabled: settings.getSync('cacheImages'),
-                cacheType: 'folder',
-                cacheIdProperty: 'albumId',
-              }}
               page="folderListPage"
               listType="folder"
               virtualized

diff --git a/src/components/library/MusicList.tsx b/src/components/library/MusicList.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
 import _ from 'lodash';
-import settings from 'electron-settings';
 import { ButtonToolbar } from 'rsuite';
 import { useQuery, useQueryClient } from 'react-query';
 import { useTranslation } from 'react-i18next';
@@ -313,11 +312,6 @@ const MusicList = () => {
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
           handleRating={handleRowRating}
-          cacheImages={{
-            enabled: settings.getSync('cacheImages'),
-            cacheType: 'album',
-            cacheIdProperty: 'albumId',
-          }}
           page="musicListPage"
           listType="music"
           virtualized

diff --git a/src/components/player/NowPlayingMiniView.tsx b/src/components/player/NowPlayingMiniView.tsx
@@ -506,11 +506,6 @@ const NowPlayingMiniView = () => {
               virtualized
               rowHeight={config.lookAndFeel.listView.mini.rowHeight}
               fontSize={config.lookAndFeel.listView.mini.fontSize}
-              cacheImages={{
-                enabled: settings.getSync('cacheImages'),
-                cacheType: 'album',
-                cacheIdProperty: 'albumId',
-              }}
               listType="music"
               miniView
               nowPlaying

diff --git a/src/components/player/NowPlayingView.tsx b/src/components/player/NowPlayingView.tsx
@@ -535,11 +535,6 @@ const NowPlayingView = () => {
           virtualized
           rowHeight={config.lookAndFeel.listView.music.rowHeight}
           fontSize={config.lookAndFeel.listView.music.fontSize}
-          cacheImages={{
-            enabled: settings.getSync('cacheImages'),
-            cacheType: 'album',
-            cacheIdProperty: 'albumId',
-          }}
           listType="music"
           nowPlaying
           dnd