From ac75d24b3fabc0846b5e2af9538d9b6078d0540e Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Mon, 3 Apr 2023 16:55:23 +0000
Subject: [PATCH] added `playlistTimelineEntry` component

---
 .../PlaylistTimelineEntry/index.jsx           | 38 +++++++++++++----
 .../PlaylistTimelineEntry/index.less          | 41 +++++++++++++++----
 2 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/components/PlaylistTimelineEntry/index.jsx b/packages/app/src/components/PlaylistTimelineEntry/index.jsx
index 9101b603..d08f1cb8 100644
--- a/packages/app/src/components/PlaylistTimelineEntry/index.jsx
+++ b/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>
-                        {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>
diff --git a/packages/app/src/components/PlaylistTimelineEntry/index.less b/packages/app/src/components/PlaylistTimelineEntry/index.less
index 7e495d2e..d8d7ed98 100644
--- a/packages/app/src/components/PlaylistTimelineEntry/index.less
+++ b/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 {
-                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;
                 }
             }
         }