added MusicTrack component

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

@@ -0,0 +1,70 @@
+import React from "react"
+import * as antd from "antd"
+import classnames from "classnames"
+
+import { ImageViewer } from "components"
+import { Icons } from "components/Icons"
+
+import { Context } from "contexts/WithPlayerContext"
+
+import "./index.less"
+
+export default (props) => {
+    // use react context to get the current track
+    const {
+        currentManifest,
+        playbackStatus,
+    } = React.useContext(Context)
+
+    const isCurrent = currentManifest?._id === props.track._id
+    const isPlaying = isCurrent && playbackStatus === "playing"
+
+    return <div
+        id={props.track._id}
+        className={classnames(
+            "music-track",
+            {
+                ["current"]: isCurrent,
+                ["playing"]: isPlaying,
+            }
+        )}
+    >
+        <div className={classnames(
+            "music-track_actions",
+            {
+                ["withOrder"]: props.order !== undefined,
+            }
+        )}>
+            <div className="music-track_action">
+                <span className="music-track_orderIndex">
+                    {
+                        props.order
+                    }
+                </span>
+                <antd.Button
+                    type="primary"
+                    shape="circle"
+                    icon={isPlaying ? <Icons.MdPause /> : <Icons.MdPlayArrow />}
+                    onClick={props.onClick}
+                />
+            </div>
+        </div>
+        <div className="music-track_cover">
+            <ImageViewer src={props.track.thumbnail} />
+        </div>
+        <div className="music-track_details">
+            <div className="music-track_title">
+                {props.track.title}
+            </div>
+            <div className="music-track_artist">
+                {props.track.artist}
+            </div>
+        </div>
+
+        <div className="music-track_info">
+            <div className="music-track_info_duration">
+                {props.track.duration ?? "00:00"}
+            </div>
+        </div>
+    </div>
+}

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

@@ -0,0 +1,164 @@
+.music-track {
+    display: flex;
+    flex-direction: row;
+
+    align-items: center;
+
+    padding: 10px;
+
+    border-radius: 8px;
+
+    background-color: var(--background-color-accent);
+
+    cursor: pointer;
+
+    &.current {
+        background-color: var(--background-color-accent);
+
+        .music-track_actions {
+            .music-track_action {
+                .ant-btn {
+                    background-color: var(--colorPrimary) !important;
+                    border: unset;
+                    opacity: 1 !important;
+                }
+
+                .music-track_orderIndex {
+                    opacity: 0 !important;
+                }
+            }
+        }
+    }
+
+    .music-track_actions {
+        display: flex;
+
+        align-items: center;
+
+        margin-right: 10px;
+
+        &.withOrder {
+            .music-track_action {
+                &:hover {
+                    .ant-btn {
+                        opacity: 1;
+                    }
+
+                    .music-track_orderIndex {
+                        opacity: 0;
+                    }
+                }
+
+                .ant-btn {
+                    opacity: 0;
+                }
+            }
+        }
+
+        .music-track_action {
+            position: relative;
+
+            transition: all 150ms ease-in-out;
+
+            .music-track_orderIndex {
+                position: absolute;
+
+                top: 0;
+                left: 0;
+
+                height: 100%;
+
+                width: 100%;
+
+                padding: 5px 13px;
+
+                line-height: 22px;
+
+                opacity: 1;
+
+                transition: all 150ms ease-in-out;
+
+                text-align: center;
+
+                font-family: "DM Mono", monospace;
+
+                svg {
+                    margin: 0;
+                }
+            }
+
+            .ant-btn {
+                svg {
+                    margin: 0 !important;
+
+                    background-color: transparent;
+
+                    fill: var(--text-color);
+                    stroke: var(--text-color);
+                }
+
+                color: var(--text-color);
+                background-color: transparent !important;
+
+                border: 1px solid var(--text-color);
+
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .music-track_cover {
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+
+        background-color: black;
+
+        border-radius: 12px;
+
+        overflow: hidden;
+
+        width: 50px;
+        height: 50px;
+
+        img {
+            width: 100%;
+            height: 100%;
+
+            object-fit: cover;
+        }
+    }
+
+    .music-track_details {
+        display: flex;
+        flex-direction: column;
+
+        margin-left: 10px;
+
+        color: var(--text-color);
+
+        .music-track_title {
+            font-size: 1rem;
+            font-family: "Space Grotesk", sans-serif;
+        }
+
+        .music-track_artist {
+            font-size: 0.8rem;
+        }
+    }
+
+    .music-track_info {
+        display: flex;
+        flex-direction: column;
+
+        margin-left: auto;
+
+        color: var(--text-color);
+
+        .music-track_duration {
+            font-size: 0.8rem;
+        }
+    }
+}