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

use context

Browse Source
This commit is contained in:
SrGooglo 2023-05-30 01:11:25 +00:00
parent ed7c0f9b01
commit 2619d7b355
2 changed files with 28 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/app/src/pages/play/[play_id].jsx
View File

@ -5,37 +5,16 @@ import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm" import remarkGfm from "remark-gfm"
import moment from "moment" import moment from "moment"
import { WithPlayerContext } from "contexts/WithPlayerContext"
import { ImageViewer } from "components" import { ImageViewer } from "components"
import { Icons } from "components/Icons" import { Icons } from "components/Icons"
import PlaylistsModel from "models/playlists" import PlaylistsModel from "models/playlists"
import MusicTrack from "components/MusicTrack"
import "./index.less" import "./index.less"
const TrackItem = (props) => {
return <div className="track_item">
<div className="track_item_actions">
<antd.Button
type="primary"
shape="circle"
icon={<Icons.Play />}
onClick={props.onClick}
/>
</div>
<div className="track_item_cover">
<ImageViewer src={props.track.thumbnail} />
</div>
<div className="track_item_details">
<div className="track_item_title">
{props.track.title}
</div>
<div className="track_item_artist">
{props.track.artist}
</div>
</div>
</div>
}
export default (props) => { export default (props) => {
const play_id = props.params.play_id const play_id = props.params.play_id
@ -99,17 +78,19 @@ export default (props) => {
</div> </div>
<div className="play_info_statistics"> <div className="play_info_statistics">
<div className="play_info_statistics_item"> {
<p playlist.publisher && <div className="play_info_statistics_item">
onClick={() => { <p
app.navigation.goToAccount(playlist.user.username) onClick={() => {
}} app.navigation.goToAccount(playlist.user.username)
> }}
<Icons.MdPerson /> >
<Icons.MdPerson />
Publised by <a>{playlist.user.username}</a> Publised by <a>{playlist.publisher.username}</a>
</p> </p>
</div> </div>
}
<div className="play_info_statistics_item"> <div className="play_info_statistics_item">
<p> <p>
<Icons.MdLibraryMusic /> {playlist.list.length} Tracks <Icons.MdLibraryMusic /> {playlist.list.length} Tracks
@ -130,14 +111,18 @@ export default (props) => {
<h1> <h1>
<Icons.MdPlaylistPlay /> Tracks <Icons.MdPlaylistPlay /> Tracks
</h1> </h1>
{
playlist.list.map((item, index) => { <WithPlayerContext>
return <TrackItem {
track={item} playlist.list.map((item, index) => {
onClick={() => handleOnClickTrack(item)} return <MusicTrack
/> order={index + 1}
}) track={item}
} onClick={() => handleOnClickTrack(item)}
/>
})
}
</WithPlayerContext>
</div> </div>
</div> </div>
} }

79
packages/app/src/pages/play/index.less
View File

@ -150,84 +150,7 @@
color: var(--text-color); color: var(--text-color);
padding: 20px 30px; padding: 20px 30px;
}
}
gap: 10px;
.track_item {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
margin-bottom: 10px;
border-radius: 8px;
background-color: var(--background-color-accent);
cursor: pointer;
.track_item_actions {
margin-right: 10px;
.ant-btn {
svg {
margin: 0 !important;
background-color: transparent;
}
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
}
.track_item_cover {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 12px;
overflow: hidden;
width: 50px;
height: 50px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.track_item_details {
display: flex;
flex-direction: column;
margin-left: 10px;
.track_item_title {
font-size: 1rem;
font-family: "Space Grotesk", sans-serif;
}
.track_item_artist {
font-size: 0.8rem;
}
}
&:last-child {
margin-bottom: 0;
} }
} }