added playlistTimelineEntry component

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

@@ -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>
+                    <h1 onClick={navigateToPlaylist}>
-                        {data.title ?? "Untitled"}
+                        <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
+                <div className="playlistTimelineEntry_statistics">
-                    user_id={data.user_id}
+                    <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>

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

@@ -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 {
+            .playlistTimelineEntry_statistics {
-                p {
+                display: flex;
-                    font-size: 1rem;
+                flex-direction: row;
-                    font-weight: 400;
 
-                    margin-top: 0;
+                width: 100%;
-                    margin-bottom: 5px;
 
-                    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;
                 }
             }
         }