RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +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> <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> </h4>
</Marquee> </Marquee>
@ -134,10 +136,17 @@ export default class BackgroundMediaPlayer extends React.Component {
<Icons.MdAlbum /> <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> </h4>
} }
{/* {
this.state.expanded && <p>
{this.state.currentPlaying?.artist ?? "Unknown artist"}
</p>
} */}
</div> </div>
</div> </div>
<div <div

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

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