From 95bcde00d82bda3397f139b60a982801e34d781f Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 27 Dec 2021 17:07:59 -0800
Subject: [PATCH] Normalize album view to new artist page changes

---
 src/components/layout/styled.tsx     |  2 +-
 src/components/library/AlbumView.tsx | 41 ++++++++++++++++++++++------
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/styled.tsx b/src/components/layout/styled.tsx
index f3669f0..67e3174 100644
--- a/src/components/layout/styled.tsx
+++ b/src/components/layout/styled.tsx
@@ -279,7 +279,7 @@ export const FlatBackground = styled.div<{ $expanded: boolean; $color: string; $
 export const BlurredBackgroundWrapper = styled.div<{
   expanded: boolean;
   hasImage: boolean;
-  $titleBar: string;
+  $titleBar: boolean;
 }>`
   clip: rect(0, auto, auto, 0);
   -webkit-clip-path: inset(0 0);
diff --git a/src/components/library/AlbumView.tsx b/src/components/library/AlbumView.tsx
index d1e44cf..22560a2 100644
--- a/src/components/library/AlbumView.tsx
+++ b/src/components/library/AlbumView.tsx
@@ -61,6 +61,7 @@ import {
 import { apiController } from '../../api/controller';
 import { Artist, Genre, Server } from '../../types';
 import { setPlaylistRate } from '../../redux/playlistSlice';
+import Card from '../card/Card';
 
 interface AlbumParams {
   id: string;
@@ -314,9 +315,23 @@ const AlbumView = ({ ...rest }: any) => {
           <GenericPageHeader
             isDark={!rest.isModal}
             image={
-              isCached(`${misc.imageCachePath}album_${albumId}.jpg`)
-                ? `${misc.imageCachePath}album_${albumId}.jpg`
-                : data.image
+              <Card
+                title="None"
+                subtitle=""
+                coverArt={
+                  isCached(`${misc.imageCachePath}album_${albumId}.jpg`)
+                    ? `${misc.imageCachePath}album_${albumId}.jpg`
+                    : data.image
+                }
+                size={200}
+                hasHoverButtons
+                noInfoPanel
+                noModalButton
+                details={data}
+                playClick={{ type: 'album', id: data.id }}
+                url={`/library/album/${data.id}`}
+                handleFavorite={handleFavorite}
+              />
             }
             cacheImages={{
               enabled: settings.getSync('cacheImages'),
@@ -463,17 +478,23 @@ const AlbumView = ({ ...rest }: any) => {
                 </PageHeaderSubtitleDataLine>
                 <div style={{ marginTop: '10px' }}>
                   <ButtonToolbar>
-                    <PlayButton appearance="primary" size="lg" onClick={handlePlay} />
+                    <PlayButton appearance="primary" size="lg" $circle onClick={handlePlay} />
                     <PlayAppendNextButton
-                      appearance="primary"
+                      appearance="subtle"
                       size="lg"
                       onClick={() => handlePlayAppend('next')}
                     />
                     <PlayAppendButton
-                      appearance="primary"
+                      appearance="subtle"
                       size="lg"
                       onClick={() => handlePlayAppend('later')}
                     />
+                    <FavoriteButton
+                      size="lg"
+                      appearance="subtle"
+                      isFavorite={data.starred}
+                      onClick={handleFavorite}
+                    />
                     <Whisper
                       trigger="hover"
                       placement="bottom"
@@ -493,9 +514,12 @@ const AlbumView = ({ ...rest }: any) => {
                         </StyledPopover>
                       }
                     >
-                      <DownloadButton size="lg" downloadSize={getAlbumSize(data.song)} />
+                      <DownloadButton
+                        size="lg"
+                        appearance="subtle"
+                        downloadSize={getAlbumSize(data.song)}
+                      />
                     </Whisper>
-                    <FavoriteButton size="lg" isFavorite={data.starred} onClick={handleFavorite} />
                   </ButtonToolbar>
                 </div>
               </div>
@@ -509,7 +533,6 @@ const AlbumView = ({ ...rest }: any) => {
           handleRowClick={handleRowClick}
           handleRowDoubleClick={handleRowDoubleClick}
           handleRating={handleRowRating}
-          tableHeight={700}
           virtualized
           rowHeight={Number(settings.getSync('musicListRowHeight'))}
           fontSize={Number(settings.getSync('musicListFontSize'))}