RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

display artist on compacted background media player

Browse Source
This commit is contained in:
SrGooglo 2023-04-22 23:08:01 +00:00
parent 52a6d04648
commit 73ffc5c617
2 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app/src/components/BackgroundMediaPlayer/index.jsx
View File

@ -124,7 +124,9 @@ export default class BackgroundMediaPlayer extends React.Component {
>
<h4>
{
this.state.plabackState === "stopped" ? "Nothing is playing" : (this.state.currentPlaying?.title ?? "Untitled")
this.state.plabackState === "stopped" ? "Nothing is playing" : <>
{`${this.state.currentPlaying?.title} - ${this.state.currentPlaying?.artist}` ?? "Untitled"}
</>
}
</h4>
</Marquee>
@ -134,10 +136,17 @@ export default class BackgroundMediaPlayer extends React.Component {
<Icons.MdAlbum />
{
this.state.plabackState === "stopped" ? "Nothing is playing" : (this.state.currentPlaying?.title ?? "Untitled")
this.state.plabackState === "stopped" ? "Nothing is playing" : <>
{this.state.currentPlaying?.title ?? "Untitled"}
</>
}
</h4>
}
{/* {
this.state.expanded && <p>
{this.state.currentPlaying?.artist ?? "Unknown artist"}
</p>
} */}
</div>
</div>
<div

37
packages/app/src/components/BackgroundMediaPlayer/index.less
View File

@ -48,6 +48,10 @@
font-size: 1rem;
}
p {
height: 100%;
}
}
.background_media_player__controls {
@ -68,7 +72,8 @@
.background_media_player__title {
color: var(--text-color-black);
h4 {
h4,
p {
color: var(--text-color-black);
}
}
@ -137,24 +142,36 @@
}
.background_media_player__title {
display: flex;
flex-direction: column;
justify-content: center;
max-height: 67px;
height: 100%;
transition: all 150ms ease-in-out;
color: var(--text-color-white);
width: 100%;
height: 100%;
overflow: hidden;
//gap: 16px;
h4 {
line-height: 20px;
line-height: 1rem;
font-size: 0.8rem;
font-weight: 600;
margin: 0 0 0 10px;
height: 100%;
overflow: hidden;
white-space: nowrap;
@ -164,6 +181,22 @@
color: var(--text-color-white);
}
p {
line-height: 0.8rem;
font-size: 0.7rem;
font-weight: 400;
margin: 0 0 0 10px;
height: 0;
justify-content: flex-end;
font-family: "Space Grotesk", sans-serif;
color: var(--text-color-white);
}
.marquee-container {
width: 100%;