support post types

This commit is contained in:
srgooglo 2022-09-20 00:51:37 +02:00
parent f1cd2b2ced
commit aea5601acd
2 changed files with 98 additions and 7 deletions

View File

@ -216,7 +216,17 @@ export class PostAdditions extends React.PureComponent {
}
export const PostContent = React.memo((props) => {
let { message, additions } = props.data
let { message, additions, type, data } = props.data
if (data) {
data = JSON.parse(data)
}
const onClickPlaylist = () => {
if (data.playlist) {
app.AudioPlayer.startPlaylist(data.playlist)
}
}
// parse message
const regexs = [
@ -236,13 +246,46 @@ export const PostContent = React.memo((props) => {
message = processString(regexs)(message)
return <div className="content">
<div className="message">
{message}
</div>
switch (type) {
case "playlist": {
return <div className="content">
<div
className="playlistCover"
onClick={onClickPlaylist}
style={{
backgroundImage: `url(${data?.cover ?? "/assets/no_song.png"})`,
}}
/>
{additions.length > 0 && <PostAdditions additions={additions} />}
</div>
<div className="playlistTitle">
<div>
<h1>
{data.title ?? "Untitled Playlist"}
</h1>
<h3>
{data.artist}
</h3>
</div>
<div className="actions">
<antd.Button onClick={onClickPlaylist}>
<Icons.PlayCircle />
Play
</antd.Button>
</div>
</div>
</div>
}
default: {
return <div className="content">
<div className="message">
{message}
</div>
{additions.length > 0 && <PostAdditions additions={additions} />}
</div>
}
}
})
export const PostActions = (props) => {
@ -395,6 +438,7 @@ export const PostCard = React.memo(({
id={data._id}
className={classnames(
"postCard",
data.type,
{ ["liked"]: hasLiked },
{ ["noHide"]: !expansibleActions },
{ ["fullmode"]: fullmode },

View File

@ -16,6 +16,53 @@
outline-style: solid;
outline-color: transparent;
&.playlist {
.wrapper {
.content{
flex-direction: row;
background-color: var(--background-color-primary);
padding: 20px;
.playlistCover {
width: 200px;
height: 200px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 8px;
margin-right: 25px;
}
.playlistTitle {
h1 {
font-size: 1.5rem;
font-family: "Space Grotesk", sans-serif;
margin: 0;
}
h3 {
font-size: 0.9rem;
// make italic
font-style: italic;
}
.actions {
width: 100%;
margin-top: 20px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
}
}
}
&.liked {
filter: drop-shadow(0px 0px 2px var(--primaryColor));
outline-color: var(--primaryColor);