blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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
master
jeffvli 3 years ago
committed by Jeff
parent
9a13ed2dc2
commit
14240caba2
2 changed files with 90 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 126
      src/components/player/PlayerBar.tsx
  2. 7
      src/components/player/styled.tsx

126
src/components/player/PlayerBar.tsx
View File

@ -42,7 +42,7 @@ import {
isCached, isCached,
writeOBSFiles, writeOBSFiles,
} from '../../shared/utils'; } from '../../shared/utils';
import { StyledPopover } from '../shared/styled'; import { LinkWrapper, SecondaryTextWrapper, StyledPopover } from '../shared/styled';
import { apiController } from '../../api/controller'; import { apiController } from '../../api/controller';
import { Artist, Server } from '../../types'; import { Artist, Server } from '../../types';
import logo from '../../../assets/icon.png'; import logo from '../../../assets/icon.png';
@ -542,15 +542,15 @@ const PlayerBar = () => {
<FlexboxGrid align="middle" style={{ height: '100%' }}> <FlexboxGrid align="middle" style={{ height: '100%' }}>
<FlexboxGrid.Item colspan={6} style={{ textAlign: 'left', paddingLeft: '10px' }}> <FlexboxGrid.Item colspan={6} style={{ textAlign: 'left', paddingLeft: '10px' }}>
<PlayerColumn left height="80px"> <PlayerColumn left height="80px">
<Grid> <Grid style={{ width: '100%' }}>
<Row <Row
style={{ style={{
height: '70px', height: '70px',
display: 'flex', 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 <Whisper
trigger="hover" trigger="hover"
delay={500} delay={500}
@ -614,11 +614,10 @@ const PlayerBar = () => {
</CoverArtWrapper> </CoverArtWrapper>
</Whisper> </Whisper>
</Col> </Col>
<Col xs={2} style={{ minWidth: '140px', width: '40%' }}> <Col xs={2} style={{ minWidth: '140px', maxWidth: '450px', width: '100%' }}>
<Row <Row
style={{ style={{
height: '35px', height: '23px',
width: '100%',
display: 'flex', display: 'flex',
alignItems: 'flex-end', alignItems: 'flex-end',
}} }}
@ -631,18 +630,7 @@ const PlayerBar = () => {
t('Unknown Title') 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 || {playQueue[currentEntryList][playQueue.currentIndex]?.title ||
t('Unknown Title')} t('Unknown Title')}
</LinkButton> </LinkButton>
@ -651,9 +639,9 @@ const PlayerBar = () => {
<Row <Row
style={{ style={{
height: '35px', height: '23px',
minWidth: '130px', display: 'flex',
width: '50%', alignItems: 'flex-start',
}} }}
> >
<CustomTooltip <CustomTooltip
@ -672,28 +660,84 @@ const PlayerBar = () => {
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
<LinkButton {playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId ? (
tabIndex={0} <LinkButton
subtitle="true" tabIndex={0}
onClick={() => { subtitle="true"
if ( onClick={() => {
playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist if (
) { playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId
history.push( ) {
`/library/artist/${ history.push(
playQueue[currentEntryList][playQueue.currentIndex] `/library/artist/${
?.albumArtistId playQueue[currentEntryList][playQueue.currentIndex]
}` ?.albumArtistId
); }`
} );
}} }
> }}
{playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist || >
t('Unknown Artist')} {playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist ||
</LinkButton> 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> </span>
</CustomTooltip> </CustomTooltip>
</Row> </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> </Col>
</Row> </Row>
</Grid> </Grid>

7
src/components/player/styled.tsx
View File

@ -17,6 +17,7 @@ export const PlayerColumn = styled.div<{
right?: boolean; right?: boolean;
height: string; height: string;
}>` }>`
user-select: none;
height: ${(props) => props.height}; height: ${(props) => props.height};
display: flex; display: flex;
align-items: center; align-items: center;
@ -47,7 +48,6 @@ export const PlayerControlIcon = styled(Icon)`
`; `;
export const LinkButton = styled(Button)<{ subtitle?: string }>` export const LinkButton = styled(Button)<{ subtitle?: string }>`
user-select: text;
border-radius: 0px; border-radius: 0px;
background: transparent; background: transparent;
max-width: 100%; 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.colorSecondary
: props.theme.colors.layout.playerBar.color} !important; : props.theme.colors.layout.playerBar.color} !important;
&:hover {
text-decoration: underline;
}
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: transparent !important; background: transparent !important;
color: ${(props) => props.theme.colors.layout.playerBar.color}; color: ${(props) => props.theme.colors.layout.playerBar.color};
text-decoration: underline;
cursor: pointer; cursor: pointer;
} }

Write Preview
Loading…
Cancel
Save