Set header images to cache

src/components/layout/GenericPageHeader.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { useHistory } from 'react-router-dom';
 import { Icon, Input, InputGroup } from 'rsuite';
 import ViewTypeButtons from '../viewtypes/ViewTypeButtons';
 import { StyledInputGroup } from '../shared/styled';
 import { CoverArtWrapper, PageHeaderTitle } from './styled';
+import cacheImage from '../shared/cacheImage';
 
 const GenericPageHeader = ({
   image,
@@ -20,6 +22,7 @@ const GenericPageHeader = ({
   handleListClick,
   handleGridClick,
   viewTypeSetting,
+  cacheImages,
 }: any) => {
   const history = useHistory();
 
@@ -27,11 +30,20 @@ const GenericPageHeader = ({
     <>
       {image && (
         <CoverArtWrapper>
-          <img
+          <LazyLoadImage
             src={image}
             alt="header-img"
             height={imageHeight || '145px'}
             width={imageHeight || '145px'}
+            visibleByDefault
+            afterLoad={() => {
+              if (cacheImages.enabled) {
+                cacheImage(
+                  `${cacheImages.cacheType}_${cacheImages.id}.jpg`,
+                  image.replace(/size=\d+/, 'size=500')
+                );
+              }
+            }}
           />
         </CoverArtWrapper>
       )}

src/components/library/AlbumView.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import path from 'path';
 import _ from 'lodash';
 import settings from 'electron-settings';
 import { ButtonToolbar, Tag } from 'rsuite';
@@ -34,6 +35,7 @@ import { TagLink } from './styled';
 import { setStatus } from '../../redux/playerSlice';
 import { addModalPage } from '../../redux/miscSlice';
 import { notifyToast } from '../shared/toast';
+import { getImageCachePath, isCached } from '../../shared/utils';
 
 interface AlbumParams {
   id: string;
@@ -41,6 +43,7 @@ interface AlbumParams {
 
 const AlbumView = ({ ...rest }: any) => {
   const dispatch = useAppDispatch();
+  const [cachePath] = useState(path.join(getImageCachePath(), '/'));
   const multiSelect = useAppSelector((state) => state.multiSelect);
   const playQueue = useAppSelector((state) => state.playQueue);
   const history = useHistory();
@@ -159,7 +162,16 @@ const AlbumView = ({ ...rest }: any) => {
     <GenericPage
       header={
         <GenericPageHeader
-          image={data.image}
+          image={
+            isCached(`${cachePath}album_${data.albumId}.jpg`)
+              ? `${cachePath}album_${data.albumId}.jpg`
+              : data.image
+          }
+          cacheImages={{
+            enabled: settings.getSync('cacheImages'),
+            cacheType: 'album',
+            id: data.albumId,
+          }}
           title={data.name}
           subtitle={
             <div>

src/components/library/ArtistView.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-cycle */
 import React, { useState } from 'react';
 import _ from 'lodash';
+import path from 'path';
 import settings from 'electron-settings';
 import { ButtonToolbar, Tag, Whisper, Button, Popover, TagGroup } from 'rsuite';
 import { useQuery, useQueryClient } from 'react-query';
@@ -30,6 +31,7 @@ import { TagLink } from './styled';
 import { addModalPage } from '../../redux/miscSlice';
 import { appendPlayQueue, setPlayQueue } from '../../redux/playQueueSlice';
 import { notifyToast } from '../shared/toast';
+import { getImageCachePath, isCached } from '../../shared/utils';
 
 interface ArtistParams {
   id: string;
@@ -39,6 +41,7 @@ const ArtistView = ({ ...rest }: any) => {
   const dispatch = useAppDispatch();
   const queryClient = useQueryClient();
   const history = useHistory();
+  const [cachePath] = useState(path.join(getImageCachePath(), '/'));
   const [viewType, setViewType] = useState(settings.getSync('albumViewType') || 'list');
   const { id } = useParams<ArtistParams>();
   const artistId = rest.id ? rest.id : id;
@@ -146,23 +149,36 @@ const ArtistView = ({ ...rest }: any) => {
       hideDivider
       header={
         <GenericPageHeader
-          image={data.image}
+          image={
+            isCached(`${cachePath}artist_${data.id}.jpg`)
+              ? `${cachePath}artist_${data.id}.jpg`
+              : data.image.includes('placeholder')
+              ? artistInfo?.largeImageUrl
+                ? artistInfo.largeImageUrl
+                : data.image
+              : data.image
+          }
+          cacheImages={{
+            enabled: settings.getSync('cacheImages'),
+            cacheType: 'artist',
+            id: data.id,
+          }}
           imageHeight={145}
           title={data.name}
           subtitle={
             <>
               <CustomTooltip
-                text={artistInfo.biography
+                text={artistInfo?.biography
                   ?.replace(/<[^>]*>/, '')
                   .replace('Read more on Last.fm</a>', '')}
                 placement="bottomStart"
               >
                 <span>
-                  {artistInfo.biography
+                  {artistInfo?.biography
                     ?.replace(/<[^>]*>/, '')
                     .replace('Read more on Last.fm</a>', '')
-                    ?.trim() !== ''
-                    ? `${artistInfo.biography
+                    ?.trim()
+                    ? `${artistInfo?.biography
                         ?.replace(/<[^>]*>/, '')
                         .replace('Read more on Last.fm</a>', '')}`
                     : 'No artist biography found'}
@@ -188,28 +204,39 @@ const ArtistView = ({ ...rest }: any) => {
                     enterable
                     speaker={
                       <Popover style={{ width: '400px' }}>
-                        <TagGroup>
-                          {artistInfo.similarArtist?.map((artist: any) => (
-                            <Tag key={artist.id}>
-                              <TagLink
-                                onClick={() => {
-                                  if (!rest.isModal) {
-                                    history.push(`/library/artist/${artist.id}`);
-                                  } else {
-                                    dispatch(
-                                      addModalPage({
-                                        pageType: 'artist',
-                                        id: artist.id,
-                                      })
-                                    );
-                                  }
-                                }}
-                              >
-                                {artist.name}
-                              </TagLink>
-                            </Tag>
-                          ))}
-                        </TagGroup>
+                        <div>
+                          <h6>Related artists</h6>
+                          <TagGroup>
+                            {artistInfo?.similarArtist?.map((artist: any) => (
+                              <Tag key={artist.id}>
+                                <TagLink
+                                  onClick={() => {
+                                    if (!rest.isModal) {
+                                      history.push(`/library/artist/${artist.id}`);
+                                    } else {
+                                      dispatch(
+                                        addModalPage({
+                                          pageType: 'artist',
+                                          id: artist.id,
+                                        })
+                                      );
+                                    }
+                                  }}
+                                >
+                                  {artist.name}
+                                </TagLink>
+                              </Tag>
+                            ))}
+                          </TagGroup>
+                        </div>
+                        <br />
+                        <StyledButton
+                          appearance="primary"
+                          disabled={!artistInfo?.lastFmUrl}
+                          onClick={() => shell.openExternal(artistInfo?.lastFmUrl)}
+                        >
+                          View on Last.FM
+                        </StyledButton>
                       </Popover>
                     }
                   >