|
|
@@ -14,7 +14,6 @@ export type Props = {
|
|
|
const Container = styled.div`
|
|
|
align-items: center;
|
|
|
background: #e9fff3;
|
|
|
- border: 1px solid #339a33;
|
|
|
border-radius: ${rem(4)};
|
|
|
display: flex;
|
|
|
flex-flow: column;
|
|
|
@@ -32,6 +31,12 @@ const Meta = styled.span``;
|
|
|
const Artist = styled.span``;
|
|
|
const Album = styled.span``;
|
|
|
|
|
|
+const Master = styled.div`
|
|
|
+ font-size: ${rem(13)};
|
|
|
+ font-style: italic;
|
|
|
+ margin: ${rem(4)} 0;
|
|
|
+`;
|
|
|
+
|
|
|
const Dash = styled.span`
|
|
|
margin: 0 ${rem(12)};
|
|
|
`;
|
|
|
@@ -94,12 +99,16 @@ export const SongInfo: React.FC<Props> = ({ song, player, onSeek }) => {
|
|
|
<Container>
|
|
|
{song && (
|
|
|
<>
|
|
|
- <Title>{song.title}</Title>
|
|
|
+ <Title>
|
|
|
+ {song.track ? `${song.track} - ` : ''}
|
|
|
+ {song.title}
|
|
|
+ </Title>
|
|
|
<Meta>
|
|
|
<Artist>{song.artist || 'Unknown Artist'}</Artist>
|
|
|
<Dash>-</Dash>
|
|
|
<Album>{song.album || 'Unknown Album'}</Album>
|
|
|
</Meta>
|
|
|
+ <Master>Playing on {player.master || '<unknown>'}</Master>
|
|
|
<Seeker>
|
|
|
<Time>{formatTime(player.currentTime)}</Time>
|
|
|
<Gutter ref={gutter} onTouchEnd={seekToTouch}>
|
