From 14240caba22f4562151f1e9db2790eadea2eaf13 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 17 Jan 2022 02:16:53 -0800
Subject: [PATCH] Adjust playerbar current song info - Increase dynamic width
 for better fit - Clicking song name now links to /nowplaying - Added album
 name which links to album page

---
 src/components/player/PlayerBar.tsx | 126 +++++++++++++++++++---------
 src/components/player/styled.tsx    |   7 +-
 2 files changed, 90 insertions(+), 43 deletions(-)

diff --git a/src/components/player/PlayerBar.tsx b/src/components/player/PlayerBar.tsx
index 98c1e42..fe5a6aa 100644
--- a/src/components/player/PlayerBar.tsx
+++ b/src/components/player/PlayerBar.tsx
@@ -42,7 +42,7 @@ import {
   isCached,
   writeOBSFiles,
 } from '../../shared/utils';
-import { StyledPopover } from '../shared/styled';
+import { LinkWrapper, SecondaryTextWrapper, StyledPopover } from '../shared/styled';
 import { apiController } from '../../api/controller';
 import { Artist, Server } from '../../types';
 import logo from '../../../assets/icon.png';
@@ -542,15 +542,15 @@ const PlayerBar = () => {
         <FlexboxGrid align="middle" style={{ height: '100%' }}>
           <FlexboxGrid.Item colspan={6} style={{ textAlign: 'left', paddingLeft: '10px' }}>
             <PlayerColumn left height="80px">
-              <Grid>
+              <Grid style={{ width: '100%' }}>
                 <Row
                   style={{
                     height: '70px',
                     display: 'flex',
-                    alignItems: 'center',
+                    alignItems: 'flex-start',
                   }}
                 >
-                  <Col xs={2} style={{ height: '100%', width: '80px' }}>
+                  <Col xs={2} style={{ height: '100%', width: '80px', paddingRight: '10px' }}>
                     <Whisper
                       trigger="hover"
                       delay={500}
@@ -614,11 +614,10 @@ const PlayerBar = () => {
                       </CoverArtWrapper>
                     </Whisper>
                   </Col>
-                  <Col xs={2} style={{ minWidth: '140px', width: '40%' }}>
+                  <Col xs={2} style={{ minWidth: '140px', maxWidth: '450px', width: '100%' }}>
                     <Row
                       style={{
-                        height: '35px',
-                        width: '100%',
+                        height: '23px',
                         display: 'flex',
                         alignItems: 'flex-end',
                       }}
@@ -631,18 +630,7 @@ const PlayerBar = () => {
                           t('Unknown Title')
                         }
                       >
-                        <LinkButton
-                          tabIndex={0}
-                          onClick={() => {
-                            if (playQueue[currentEntryList][playQueue.currentIndex]?.albumId) {
-                              history.push(
-                                `/library/album/${
-                                  playQueue[currentEntryList][playQueue.currentIndex]?.albumId
-                                }`
-                              );
-                            }
-                          }}
-                        >
+                        <LinkButton tabIndex={0} onClick={() => history.push(`/nowplaying`)}>
                           {playQueue[currentEntryList][playQueue.currentIndex]?.title ||
                             t('Unknown Title')}
                         </LinkButton>
@@ -651,9 +639,9 @@ const PlayerBar = () => {
 
                     <Row
                       style={{
-                        height: '35px',
-                        minWidth: '130px',
-                        width: '50%',
+                        height: '23px',
+                        display: 'flex',
+                        alignItems: 'flex-start',
                       }}
                     >
                       <CustomTooltip
@@ -672,28 +660,84 @@ const PlayerBar = () => {
                             overflow: 'hidden',
                           }}
                         >
-                          <LinkButton
-                            tabIndex={0}
-                            subtitle="true"
-                            onClick={() => {
-                              if (
-                                playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist
-                              ) {
-                                history.push(
-                                  `/library/artist/${
-                                    playQueue[currentEntryList][playQueue.currentIndex]
-                                      ?.albumArtistId
-                                  }`
-                                );
-                              }
-                            }}
-                          >
-                            {playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist ||
-                              t('Unknown Artist')}
-                          </LinkButton>
+                          {playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId ? (
+                            <LinkButton
+                              tabIndex={0}
+                              subtitle="true"
+                              onClick={() => {
+                                if (
+                                  playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId
+                                ) {
+                                  history.push(
+                                    `/library/artist/${
+                                      playQueue[currentEntryList][playQueue.currentIndex]
+                                        ?.albumArtistId
+                                    }`
+                                  );
+                                }
+                              }}
+                            >
+                              {playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist ||
+                                t('Unknown Artist')}
+                            </LinkButton>
+                          ) : (
+                            <SecondaryTextWrapper
+                              subtitle="true"
+                              onClick={() => {
+                                if (
+                                  playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId
+                                ) {
+                                  history.push(
+                                    `/library/artist/${
+                                      playQueue[currentEntryList][playQueue.currentIndex]
+                                        ?.albumArtistId
+                                    }`
+                                  );
+                                }
+                              }}
+                            >
+                              <LinkWrapper maxWidth="100%">
+                                {playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist ||
+                                  t('Unknown Artist')}
+                              </LinkWrapper>
+                            </SecondaryTextWrapper>
+                          )}
                         </span>
                       </CustomTooltip>
                     </Row>
+                    <Row
+                      style={{
+                        height: '23px',
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                      }}
+                    >
+                      <CustomTooltip
+                        enterable
+                        placement="topStart"
+                        text={
+                          playQueue[currentEntryList][playQueue.currentIndex]?.album ||
+                          t('Unknown Album')
+                        }
+                      >
+                        <LinkButton
+                          tabIndex={0}
+                          subtitle="true"
+                          onClick={() => {
+                            if (playQueue[currentEntryList][playQueue.currentIndex]?.albumId) {
+                              history.push(
+                                `/library/album/${
+                                  playQueue[currentEntryList][playQueue.currentIndex]?.albumId
+                                }`
+                              );
+                            }
+                          }}
+                        >
+                          {playQueue[currentEntryList][playQueue.currentIndex]?.album ||
+                            t('Unknown Album')}
+                        </LinkButton>
+                      </CustomTooltip>
+                    </Row>
                   </Col>
                 </Row>
               </Grid>
diff --git a/src/components/player/styled.tsx b/src/components/player/styled.tsx
index 800728c..24b5595 100644
--- a/src/components/player/styled.tsx
+++ b/src/components/player/styled.tsx
@@ -17,6 +17,7 @@ export const PlayerColumn = styled.div<{
   right?: boolean;
   height: string;
 }>`
+  user-select: none;
   height: ${(props) => props.height};
   display: flex;
   align-items: center;
@@ -47,7 +48,6 @@ export const PlayerControlIcon = styled(Icon)`
 `;
 
 export const LinkButton = styled(Button)<{ subtitle?: string }>`
-  user-select: text;
   border-radius: 0px;
   background: transparent;
   max-width: 100%;
@@ -62,12 +62,15 @@ export const LinkButton = styled(Button)<{ subtitle?: string }>`
       ? props.theme.colors.layout.playerBar.colorSecondary
       : props.theme.colors.layout.playerBar.color} !important;
 
+  &:hover {
+    text-decoration: underline;
+  }
+
   &:hover,
   &:active,
   &:focus {
     background: transparent !important;
     color: ${(props) => props.theme.colors.layout.playerBar.color};
-    text-decoration: underline;
     cursor: pointer;
   }