Normalize playlist view

src/components/card/Card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon } from 'rsuite';
 import { useHistory } from 'react-router-dom';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 import cacheImage from '../shared/cacheImage';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import {
@@ -35,6 +36,7 @@ import { addModalPage } from '../../redux/miscSlice';
 import { notifyToast } from '../shared/toast';
 import CustomTooltip from '../shared/CustomTooltip';
 import { apiController } from '../../api/controller';
+import { CoverArtWrapper, CustomImageGrid, CustomImageGridWrapper } from '../layout/styled';
 
 const Card = ({
   onClick,
@@ -203,7 +205,44 @@ const Card = ({
               }
             }}
           >
-            {rest.coverArt.match('placeholder') ? (
+            {Array.isArray(rest.coverArt) ? (
+              <CoverArtWrapper size={size}>
+                <CustomImageGridWrapper>
+                  <CustomImageGrid $gridArea="1 / 1 / 2 / 2">
+                    <LazyLoadImage
+                      src={rest.coverArt[0]}
+                      alt="header-img"
+                      height={size / 2}
+                      width={size / 2}
+                    />
+                  </CustomImageGrid>
+                  <CustomImageGrid $gridArea="1 / 2 / 2 / 3">
+                    <LazyLoadImage
+                      src={rest.coverArt[1]}
+                      alt="header-img"
+                      height={size / 2}
+                      width={size / 2}
+                    />
+                  </CustomImageGrid>
+                  <CustomImageGrid $gridArea="2 / 1 / 3 / 2">
+                    <LazyLoadImage
+                      src={rest.coverArt[2]}
+                      alt="header-img"
+                      height={size / 2}
+                      width={size / 2}
+                    />
+                  </CustomImageGrid>
+                  <CustomImageGrid $gridArea="2 / 2 / 3 / 3">
+                    <LazyLoadImage
+                      src={rest.coverArt[3]}
+                      alt="header-img"
+                      height={size / 2}
+                      width={size / 2}
+                    />
+                  </CustomImageGrid>
+                </CustomImageGridWrapper>
+              </CoverArtWrapper>
+            ) : rest.coverArt.match('placeholder') ? (
               <CardImgWrapper
                 id="placeholder-wrapper"
                 size={size}

src/components/playlist/PlaylistView.tsx

@@ -73,6 +73,7 @@ import { PageHeaderSubtitleDataLine } from '../layout/styled';
 import CustomTooltip from '../shared/CustomTooltip';
 import { apiController } from '../../api/controller';
 import { Server } from '../../types';
+import Card from '../card/Card';
 
 interface PlaylistParams {
   id: string;
@@ -504,18 +505,31 @@ const PlaylistView = ({ ...rest }) => {
       header={
         <GenericPageHeader
           image={
-            data?.image.match('placeholder')
-              ? customPlaylistImage
-              : isCached(`${misc.imageCachePath}playlist_${playlistId}.jpg`)
-              ? `${misc.imageCachePath}playlist_${playlistId}.jpg`
-              : data.image
+            <Card
+              title="None"
+              subtitle=""
+              coverArt={
+                data?.image.match('placeholder')
+                  ? customPlaylistImage
+                  : isCached(`${misc.imageCachePath}playlist_${playlistId}.jpg`)
+                  ? `${misc.imageCachePath}playlist_${playlistId}.jpg`
+                  : data.image
+              }
+              size={185}
+              hasHoverButtons
+              noInfoPanel
+              noModalButton
+              details={data}
+              playClick={{ type: 'playlist', id: data.id }}
+              url={`/playlist/${data.id}`}
+            />
           }
           cacheImages={{
             enabled: settings.getSync('cacheImages'),
             cacheType: 'playlist',
             id: data.id,
           }}
-          imageHeight={184}
+          imageHeight={185}
           title={data.title}
           subtitle={
             <div>
@@ -541,7 +555,7 @@ const PlaylistView = ({ ...rest }) => {
                     whiteSpace: 'pre-wrap',
                   }}
                 >
-                  <span>{data.comment ? data.comment : 'No description'}</span>
+                  <span>{data.comment ? data.comment : ''}</span>
                 </PageHeaderSubtitleDataLine>
               </CustomTooltip>
 
@@ -549,24 +563,26 @@ const PlaylistView = ({ ...rest }) => {
                 <ButtonToolbar>
                   <PlayButton
                     appearance="primary"
-                    size="md"
+                    size="lg"
+                    $circle
                     onClick={handlePlay}
                     disabled={playlist.entry?.length < 1}
                   />
                   <PlayAppendNextButton
-                    appearance="primary"
+                    appearance="subtle"
                     size="md"
                     onClick={() => handlePlayAppend('next')}
                     disabled={playlist.entry?.length < 1}
                   />
                   <PlayAppendButton
-                    appearance="primary"
+                    appearance="subtle"
                     size="md"
                     onClick={() => handlePlayAppend('later')}
                     disabled={playlist.entry?.length < 1}
                   />
                   <SaveButton
                     size="md"
+                    appearance="subtle"
                     text={
                       needsRecovery
                         ? 'Recover playlist'
@@ -582,6 +598,7 @@ const PlaylistView = ({ ...rest }) => {
                   />
                   <UndoButton
                     size="md"
+                    appearance="subtle"
                     color={needsRecovery ? 'red' : undefined}
                     disabled={
                       needsRecovery || !isModified || misc.isProcessingPlaylist.includes(data?.id)
@@ -631,7 +648,11 @@ const PlaylistView = ({ ...rest }) => {
                       </StyledPopover>
                     }
                   >
-                    <EditButton size="md" disabled={misc.isProcessingPlaylist.includes(data?.id)} />
+                    <EditButton
+                      size="md"
+                      appearance="subtle"
+                      disabled={misc.isProcessingPlaylist.includes(data?.id)}
+                    />
                   </Whisper>
 
                   <Whisper
@@ -649,6 +670,7 @@ const PlaylistView = ({ ...rest }) => {
                   >
                     <DeleteButton
                       size="md"
+                      appearance="subtle"
                       disabled={misc.isProcessingPlaylist.includes(data?.id)}
                     />
                   </Whisper>