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
-
+
-
- {data.title ?? "Untitled"}
+
+ {data.title ?? "Untitled"}
-
-
-
+
+
+ {data.likes ?? 0}
+
+
+
+ {data.listenings ?? 0}
+
+
+
+ {data.list?.length}
+
+
@@ -39,6 +58,7 @@ export default (props) => {
type="primary"
size="large"
icon={}
+ onClick={startPlaylist}
/>
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;
}
}
}