|
@ -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,12 +660,13 @@ const PlayerBar = () => { |
|
|
overflow: 'hidden', |
|
|
overflow: 'hidden', |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
|
|
|
{playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId ? ( |
|
|
<LinkButton |
|
|
<LinkButton |
|
|
tabIndex={0} |
|
|
tabIndex={0} |
|
|
subtitle="true" |
|
|
subtitle="true" |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
if ( |
|
|
if ( |
|
|
playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist |
|
|
playQueue[currentEntryList][playQueue.currentIndex]?.albumArtistId |
|
|
) { |
|
|
) { |
|
|
history.push( |
|
|
history.push( |
|
|
`/library/artist/${ |
|
|
`/library/artist/${ |
|
@ -691,9 +680,64 @@ const PlayerBar = () => { |
|
|
{playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist || |
|
|
{playQueue[currentEntryList][playQueue.currentIndex]?.albumArtist || |
|
|
t('Unknown Artist')} |
|
|
t('Unknown Artist')} |
|
|
</LinkButton> |
|
|
</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> |
|
|