support likes & duration resolve

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

@@ -1,6 +1,8 @@
 import React from "react"
 import * as antd from "antd"
 import classnames from "classnames"
+import LikeButton from "components/LikeButton"
+import seekToTimeLabel from "utils/seekToTimeLabel"
 
 import { ImageViewer } from "components"
 import { Icons } from "components/Icons"
@@ -16,6 +18,7 @@ export default (props) => {
         playbackStatus,
     } = React.useContext(Context)
 
+    const isLiked = props.track?.liked
     const isCurrent = currentManifest?._id === props.track._id
     const isPlaying = isCurrent && playbackStatus === "playing"
 
@@ -49,9 +52,11 @@ export default (props) => {
                 />
             </div>
         </div>
+
         <div className="music-track_cover">
             <ImageViewer src={props.track.cover ?? props.track.thumbnail} />
         </div>
+
         <div className="music-track_details">
             <div className="music-track_title">
                 {props.track.title}
@@ -61,10 +66,21 @@ export default (props) => {
             </div>
         </div>
 
-        <div className="music-track_info">
+        <div className="music-track_right_actions">
-            <div className="music-track_info_duration">
+            <div className="music-track_info">
-                {props.track.duration ?? "00:00"}
+                <div className="music-track_info_duration">
+                    {
+                        props.track.metadata?.duration
+                            ? seekToTimeLabel(props.track.metadata?.duration)
+                            : "00:00"
+                    }
+                </div>
             </div>
+
+            <LikeButton
+                liked={isLiked}
+                onClick={props.onLike}
+            />
         </div>
     </div>
 }

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

@@ -152,14 +152,21 @@
         }
     }
 
-    .music-track_info {
+    .music-track_right_actions {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: center;
+
+        gap: 10px;
 
         margin-left: auto;
 
         color: var(--text-color);
+    }
 
+    .music-track_info {
         .music-track_duration {
             font-size: 0.8rem;
         }

packages/app/src/utils/seekToTimeLabel/index.js

@@ -0,0 +1,15 @@
+export default (value) => {
+    // convert seek to minutes and seconds
+    const minutes = Math.floor(value / 60)
+
+    // add leading zero if minutes is less than 10
+    const minutesString = minutes < 10 ? `0${minutes}` : minutes
+
+    // get seconds
+    const seconds = Math.floor(value - minutes * 60)
+
+    // add leading zero if seconds is less than 10
+    const secondsString = seconds < 10 ? `0${seconds}` : seconds
+
+    return `${minutesString}:${secondsString}`
+}