Normalize and add tooltips

- Card title and subtitle
- Artist and album on list
- Art on playerbar

src/components/card/Card.tsx

@@ -27,6 +27,7 @@ import {
 import { setStatus } from '../../redux/playerSlice';
 import { addModalPage } from '../../redux/miscSlice';
 import { notifyToast } from '../shared/toast';
+import CustomTooltip from '../shared/CustomTooltip';
 
 const Card = ({
   onClick,
@@ -201,12 +202,15 @@ const Card = ({
         </Overlay>
         <InfoPanel cardsize={size}>
           <InfoSpan>
+            <CustomTooltip text={rest.title}>
               <CardTitleButton appearance="link" size="sm" onClick={handleClick} cardsize={size}>
                 {rest.title}
               </CardTitleButton>
+            </CustomTooltip>
           </InfoSpan>
           <InfoSpan>
             {subUrl ? (
+              <CustomTooltip text={rest.subtitle}>
                 <CardSubtitleButton
                   appearance="link"
                   size="xs"
@@ -215,6 +219,7 @@ const Card = ({
                 >
                   {rest.subtitle}
                 </CardSubtitleButton>
+              </CustomTooltip>
             ) : (
               <CardSubtitle cardsize={size}>
                 {rest.subtitle !== 'undefined' ? rest.subtitle : <span>&#8203;</span>}

src/components/player/PlayerBar.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useQueryClient } from 'react-query';
 import settings from 'electron-settings';
-import { FlexboxGrid, Grid, Row, Col } from 'rsuite';
+import { FlexboxGrid, Grid, Row, Col, Whisper, Popover } from 'rsuite';
 import { useHistory } from 'react-router-dom';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import format from 'format-duration';
@@ -33,7 +33,7 @@ import { star, unstar } from '../../api/api';
 import placeholderImg from '../../img/placeholder.jpg';
 import DebugWindow from '../debug/DebugWindow';
 import { CoverArtWrapper } from '../layout/styled';
-import { getCurrentEntryList } from '../../shared/utils';
+import { getCurrentEntryList, getImageCachePath, isCached } from '../../shared/utils';
 
 const PlayerBar = () => {
   const queryClient = useQueryClient();
@@ -46,6 +46,7 @@ const PlayerBar = () => {
   const [manualSeek, setManualSeek] = useState(0);
   const [currentEntryList, setCurrentEntryList] = useState('entry');
   const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume')));
+  const [cachePath] = useState(getImageCachePath());
   const playersRef = useRef<any>();
   const history = useHistory();
 
@@ -314,10 +315,47 @@ const PlayerBar = () => {
                 >
                   <Col xs={2} style={{ height: '100%', width: '80px' }}>
                     <CoverArtWrapper>
+                      <Whisper
+                        trigger="hover"
+                        delay={500}
+                        placement="topStart"
+                        preventOverflow
+                        speaker={
+                          <Popover>
+                            <div style={{ height: '500px' }}>
+                              <LazyLoadImage
+                                src={
+                                  isCached(
+                                    `${cachePath}/album_${
+                                      playQueue[currentEntryList][playQueue.currentIndex]?.albumId
+                                    }.jpg`
+                                  )
+                                    ? `${cachePath}/album_${
+                                        playQueue[currentEntryList][playQueue.currentIndex]?.albumId
+                                      }.jpg`
+                                    : playQueue[currentEntryList][
+                                        playQueue.currentIndex
+                                      ]?.image.replace(/size=\d+/, 'size=500') || placeholderImg
+                                }
+                                width={500}
+                                height={500}
+                              />
+                            </div>
+                          </Popover>
+                        }
+                      >
                         <LazyLoadImage
                           tabIndex={0}
                           src={
-                          playQueue[currentEntryList][playQueue.currentIndex]?.image ||
+                            isCached(
+                              `${cachePath}/album_${
+                                playQueue[currentEntryList][playQueue.currentIndex]?.albumId
+                              }.jpg`
+                            )
+                              ? `${cachePath}/album_${
+                                  playQueue[currentEntryList][playQueue.currentIndex]?.albumId
+                                }.jpg`
+                              : playQueue[currentEntryList][playQueue.currentIndex]?.image ||
                                 placeholderImg
                           }
                           alt="trackImg"
@@ -332,6 +370,7 @@ const PlayerBar = () => {
                             }
                           }}
                         />
+                      </Whisper>
                     </CoverArtWrapper>
                   </Col>
                   <Col xs={2} style={{ minWidth: '140px', width: '40%' }}>

src/components/viewtypes/ListViewTable.tsx

@@ -590,7 +590,7 @@ const ListViewTable = ({
                                   width: '100%',
                                 }}
                               >
-                                <CustomTooltip text={rowData.artist} delay={1000}>
+                                <CustomTooltip text={rowData.artist}>
                                   <RsuiteLinkButton
                                     subtitle="true"
                                     appearance="link"
@@ -728,7 +728,7 @@ const ListViewTable = ({
                         }}
                       >
                         {column.dataKey.match(/album|artist/) ? (
-                          <CustomTooltip text={rowData[column.dataKey]} delay={1000}>
+                          <CustomTooltip text={rowData[column.dataKey]}>
                             <RsuiteLinkButton
                               appearance="link"
                               onClick={() => {