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

rename Playlist component

Browse Source
This commit is contained in:
SrGooglo 2025-02-05 02:35:45 +00:00
parent b5814dd96d
commit a34d165b97
2 changed files with 54 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/app/src/components/Music/PlaylistItem/index.jsx → packages/app/src/components/Music/Playlist/index.jsx
View File

@ -14,7 +14,7 @@ const typeToNavigationType = {
ep: "album" ep: "album"
} }
export default (props) => { const Playlist = (props) => {
const [coverHover, setCoverHover] = React.useState(false) const [coverHover, setCoverHover] = React.useState(false)
let { playlist } = props let { playlist } = props
@ -37,25 +37,26 @@ export default (props) => {
app.cores.player.start(playlist.list) app.cores.player.start(playlist.list)
} }
const subtitle = playlist.type === "playlist" ? `By ${playlist.user_id}` : (playlist.description ?? (playlist.publisher && `Release from ${playlist.publisher?.fullName}`)) const subtitle = playlist.type === "playlist" ? `By ${playlist.user_id}` : (playlist.description ?? (playlist.publisher && `Release from ${playlist.publisher?.fullName}`))
return <div return <div
id={playlist._id} id={playlist._id}
key={props.key} key={props.key}
className={classnames( className={classnames(
"playlistItem", "playlist",
{ {
"cover-hovering": coverHover "cover-hovering": coverHover
} }
)} )}
> >
<div <div
className="playlistItem_cover" className="playlist_cover"
onMouseEnter={() => setCoverHover(true)} onMouseEnter={() => setCoverHover(true)}
onMouseLeave={() => setCoverHover(false)} onMouseLeave={() => setCoverHover(false)}
onClick={onClickPlay} onClick={onClickPlay}
> >
<div className="playlistItem_cover_mask"> <div className="playlist_cover_mask">
<Icons.MdPlayArrow /> <Icons.MdPlayArrow />
</div> </div>
@ -64,27 +65,35 @@ export default (props) => {
/> />
</div> </div>
<div className="playlistItem_info"> <div className="playlist_info">
<div className="playlistItem_info_title" onClick={onClick}> <div className="playlist_info_title" onClick={onClick}>
<h1>{playlist.title}</h1> <h1>{playlist.title}</h1>
</div> </div>
<div className="playlistItem_info_subtitle"> {
subtitle && <div className="playlist_info_subtitle">
<p> <p>
{subtitle} {subtitle}
</p> </p>
</div> </div>
}
</div> </div>
<div className="playlistItem_bottom"> <div className="playlist_bottom">
<p> {
props.length && <p>
<Icons.MdLibraryMusic /> {props.length ?? playlist.total_length ?? playlist.list.length} <Icons.MdLibraryMusic /> {props.length ?? playlist.total_length ?? playlist.list.length}
</p> </p>
}
<p> {
playlist.type && <p>
<Icons.MdAlbum /> <Icons.MdAlbum />
{playlist.type ?? "playlist"} {playlist.type ?? "playlist"}
</p> </p>
}
</div> </div>
</div> </div>
} }
export default Playlist

66
packages/app/src/components/Music/PlaylistItem/index.less → packages/app/src/components/Music/Playlist/index.less
View File

@ -1,52 +1,36 @@
@playlistItem_maxWidth: 175px; @playlist_cover_maxSize: 200px;
@playlistItem_padding: 10px;
@playlistItem_cover_maxSize: calc(@playlistItem_maxWidth - @playlistItem_padding * 2); .playlist {
.playlistItem {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
width: @playlistItem_maxWidth; width: 100%;
max-width: @playlistItem_maxWidth; max-width: 230px;
min-width: @playlistItem_maxWidth;
border-radius: 8px;
padding: 10px;
gap: 8px; gap: 8px;
overflow: hidden; overflow: hidden;
transition: all 0.2s ease-in-out; transition: all 150ms ease-in-out;
background-color: var(--background-color-accent);
&.cover-hovering { &.cover-hovering {
.playlistItem_cover { .playlist_cover {
transform: scale(1.05); .playlist_cover_mask {
.playlistItem_cover_mask {
opacity: 1; opacity: 1;
} }
} }
.playlistItem_info {
transform: translateY(5px);
}
} }
.playlistItem_cover { .playlist_cover {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; width: 100%;
height: @playlistItem_cover_maxSize;
max-width: @playlistItem_cover_maxSize; max-width: @playlist_cover_maxSize;
max-height: @playlist_cover_maxSize;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
z-index: 50; z-index: 50;
@ -60,13 +44,13 @@
} }
img { img {
width: 100%; width: @playlist_cover_maxSize;
height: 100%; height: @playlist_cover_maxSize;
object-fit: cover; object-fit: cover;
} }
.playlistItem_cover_mask { .playlist_cover_mask {
position: absolute; position: absolute;
top: 0; top: 0;
@ -93,39 +77,38 @@
} }
} }
.playlistItem_info { .playlist_info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 82px; transition: all 150ms ease-in-out;
transition: all 0.2s ease-in-out;
&:hover { &:hover {
.playlistItem_info_title { .playlist_info_title {
text-decoration: underline; text-decoration: underline;
} }
} }
.playlistItem_info_title { .playlist_info_title {
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
color: var(--background-color-contrast); color: var(--background-color-contrast);
overflow: hidden;
h1, h1,
h4 { h4 {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis;
margin: 0; margin: 0;
} }
} }
.playlistItem_info_subtitle { .playlist_info_subtitle {
color: var(--text-color); color: var(--text-color);
font-size: 0.7rem; font-size: 0.7rem;
@ -140,7 +123,7 @@
} }
} }
.playlistItem_actions { .playlist_actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -161,7 +144,7 @@
} }
} }
.playlistItem_bottom { .playlist_bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -170,7 +153,8 @@
text-transform: uppercase; text-transform: uppercase;
svg, p{ svg,
p {
margin: 0; margin: 0;
} }
} }