support post types

packages/app/src/components/PostCard/index.jsx

@@ -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">
+    switch (type) {
-        <div className="message">
+        case "playlist": {
-            {message}
+            return <div className="content">
-        </div>
+                <div
+                    className="playlistCover"
+                    onClick={onClickPlaylist}
+                    style={{
+                        backgroundImage: `url(${data?.cover ?? "/assets/no_song.png"})`,
+                    }}
+                />
 
-        {additions.length > 0 && <PostAdditions additions={additions} />}
+                <div className="playlistTitle">
-    </div>
+                    <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 },

packages/app/src/components/PostCard/index.less

@@ -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);