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

@@ -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',
+                        height: '23px',
-                        width: '100%',
                         display: 'flex',
                         alignItems: 'flex-end',
                       }}
@@ -631,18 +630,7 @@ const PlayerBar = () => {
                           t('Unknown Title')
                         }
                       >
-                        <LinkButton
+                        <LinkButton tabIndex={0} onClick={() => history.push(`/nowplaying`)}>
-                          tabIndex={0}
-                          onClick={() => {
-                            if (playQueue[currentEntryList][playQueue.currentIndex]?.albumId) {
-                              history.push(
-                                `/library/album/${
-                                  playQueue[currentEntryList][playQueue.currentIndex]?.albumId
-                                }`
-                              );
-                            }
-                          }}
-                        >
                           {playQueue[currentEntryList][playQueue.currentIndex]?.title ||
                             t('Unknown Title')}
                         </LinkButton>
@@ -651,9 +639,9 @@ const PlayerBar = () => {
 
                     <Row
                       style={{
-                        height: '35px',
+                        height: '23px',
-                        minWidth: '130px',
+                        display: 'flex',
-                        width: '50%',
+                        alignItems: 'flex-start',
                       }}
                     >
                       <CustomTooltip
@@ -672,12 +660,13 @@ const PlayerBar = () => {
                             overflow: 'hidden',
                           }}
                         >
+                          {playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId ? (
                             <LinkButton
                               tabIndex={0}
                               subtitle="true"
                               onClick={() => {
                                 if (
-                                playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist
+                                  playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId
                                 ) {
                                   history.push(
                                     `/library/artist/${
@@ -691,9 +680,64 @@ const PlayerBar = () => {
                               {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>

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;
   }