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

added playlistTimelineEntry component

Browse Source
This commit is contained in:
SrGooglo 2023-04-03 16:55:23 +00:00
parent 99d94c2f71
commit ac75d24b3f
2 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/app/src/components/PlaylistTimelineEntry/index.jsx
View File

@ -9,28 +9,47 @@ import "./index.less"
export default (props) => {
const { data } = props
const startPlaylist = () => {
app.cores.player.startPlaylist(data.list, 0)
}
const navigateToPlaylist = () => {
app.setLocation(`/play/${data._id}`)
}
return <div className="playlistTimelineEntry">
<div className="playlistTimelineEntry_content">
<div className="playlistTimelineEntry_thumbnail">
<Image src={data.thumbnail} />
<Image
src={data.thumbnail}
onClick={navigateToPlaylist}
/>
</div>
<div className="playlistTimelineEntry_info">
<div className="playlistTimelineEntry_title">
<h1>
{data.title ?? "Untitled"}
<h1 onClick={navigateToPlaylist}>
<Icons.MdAlbum /> {data.title ?? "Untitled"}
</h1>
</div>
<div className="playlistTimelineEntry_description">
<p>
{data.description ?? "No description"}
by <a onClick={() => app.navigation.goToAccount(data.user.username)}>@{data.user.username}</a>
</p>
</div>
<UserPreview
user_id={data.user_id}
/>
<div className="playlistTimelineEntry_statistics">
<div className="playlistTimelineEntry_statistic">
<Icons.MdFavoriteBorder /> {data.likes ?? 0}
</div>
<div className="playlistTimelineEntry_statistic">
<Icons.MdHeadset /> {data.listenings ?? 0}
</div>
<div className="playlistTimelineEntry_statistic">
<Icons.MdList /> {data.list?.length}
</div>
</div>
</div>
<div className="playlistTimelineEntry_actions">
@ -39,6 +58,7 @@ export default (props) => {
type="primary"
size="large"
icon={<Icons.Play />}
onClick={startPlaylist}
/>
</div>
</div>

41
packages/app/src/components/PlaylistTimelineEntry/index.less
View File

@ -41,10 +41,14 @@
object-fit: cover;
border-radius: 12px;
cursor: pointer;
}
}
.playlistTimelineEntry_info {
position: relative;
display: flex;
flex-direction: column;
@ -65,18 +69,41 @@
margin-bottom: 5px;
color: var(--text-color);
text-decoration: underline 0.12em rgba(0, 0, 0, 0);
transition: all 150ms ease-in-out;
cursor: pointer;
&:hover {
color: var(--colorPrimary);
text-decoration-color: var(--colorPrimary);
}
}
}
.playlistTimelineEntry_description {
p {
font-size: 1rem;
font-weight: 400;
.playlistTimelineEntry_statistics {
display: flex;
flex-direction: row;
margin-top: 0;
margin-bottom: 5px;
width: 100%;
color: var(--text-color);
gap: 20px;
align-items: center;
align-self: flex-end;
font-size: 0.9rem;
.playlistTimelineEntry_statistic {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
}
}