improve css & click handling

packages/app/src/components/Music/Track/index.jsx

@@ -54,23 +54,24 @@ const Track = (props) => {
 	const handleClickPlayBtn = React.useCallback(() => {
 		if (typeof props.onClickPlayBtn === "function") {
 			props.onClickPlayBtn(props.track)
+		}
+
+		if (!isCurrent) {
+			app.cores.player.start(props.track)
 		} else {
-			console.warn(
-				"Searcher: onClick is not a function, using default action...",
-			)
-			if (!isCurrent) {
-				app.cores.player.start(props.track)
-			} else {
-				app.cores.player.playback.toggle()
-			}
+			app.cores.player.playback.toggle()
 		}
 	})
 
-	const handleOnClickItem = () => {
+	const handleOnClickItem = React.useCallback(() => {
+		if (props.onClick) {
+			props.onClick(props.track)
+		}
+
 		if (app.isMobile) {
 			handleClickPlayBtn()
 		}
-	}
+	})
 
 	const handleMoreMenuOpen = () => {
 		if (app.isMobile) {
@@ -170,44 +171,45 @@ const Track = (props) => {
 					track_manifest?.cover_analysis?.rgb,
 				),
 			}}
-			onClick={handleOnClickItem}
 		>
 			<div className="music-track_background" />
 
 			<div className="music-track_content">
 				{!app.isMobile && (
 					<div
-						className={classnames("music-track_actions", {
+						className={classnames("music-track_play", {
 							["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={handleClickPlayBtn}
-							/>
-						</div>
+						<span className="music-track_orderIndex">
+							{props.order}
+						</span>
+
+						<antd.Button
+							type="primary"
+							shape="circle"
+							icon={
+								isPlaying ? (
+									<Icons.MdPause />
+								) : (
+									<Icons.MdPlayArrow />
+								)
+							}
+							onClick={handleClickPlayBtn}
+						/>
 					</div>
 				)}
 
-				<div className="music-track_cover">
+				<div className="music-track_cover" onClick={handleOnClickItem}>
 					<ImageViewer
 						src={props.track.cover ?? props.track.thumbnail}
 					/>
 				</div>
 
-				<div className="music-track_details">
+				<div
+					className="music-track_details"
+					onClick={handleOnClickItem}
+				>
 					<div className="music-track_title">
 						<span>
 							{props.track.service === "tidal" && (
@@ -224,24 +226,24 @@ const Track = (props) => {
 						</span>
 					</div>
 				</div>
+			</div>
 
-				<div className="music-track_right_actions">
-					<antd.Dropdown
-						menu={{
-							items: moreMenuItems,
-							onClick: handleMoreMenuItemClick,
-						}}
-						onOpenChange={handleMoreMenuOpen}
-						open={moreMenuOpened}
-						trigger={["click"]}
-					>
-						<antd.Button
-							type="ghost"
-							size="large"
-							icon={<Icons.IoMdMore />}
-						/>
-					</antd.Dropdown>
-				</div>
+			<div className="music-track_actions">
+				<antd.Dropdown
+					menu={{
+						items: moreMenuItems,
+						onClick: handleMoreMenuItemClick,
+					}}
+					onOpenChange={handleMoreMenuOpen}
+					open={moreMenuOpened}
+					trigger={["click"]}
+				>
+					<antd.Button
+						type="ghost"
+						size="large"
+						icon={<Icons.IoMdMore />}
+					/>
+				</antd.Dropdown>
 			</div>
 		</div>
 	)

packages/app/src/components/Music/Track/index.less

@@ -25,6 +25,9 @@ html {
 .music-track {
 	position: relative;
 
+	display: flex;
+	flex-direction: row;
+
 	border-radius: 8px;
 
 	background-color: var(--background-color-accent);
@@ -36,9 +39,9 @@ html {
 	transition: all 150ms ease-in-out;
 
 	&:hover {
-		.music-track_actions {
-			&.withOrder {
-				.music-track_action {
+		.music-track_content {
+			.music-track_play {
+				&.withOrder {
 					.ant-btn {
 						opacity: 1;
 					}
@@ -52,8 +55,8 @@ html {
 	}
 
 	&.current {
-		.music-track_actions {
-			.music-track_action {
+		.music-track_content {
+			.music-track_play {
 				.ant-btn {
 					background-color: var(--colorPrimary) !important;
 					border: unset;
@@ -67,7 +70,8 @@ html {
 		}
 
 		.music-track_background {
-			background: linear-gradient(
+			background:
+				linear-gradient(
 					to right,
 					rgba(var(--cover_average-color)),
 					transparent
@@ -94,7 +98,6 @@ html {
 
 	.music-track_content {
 		position: relative;
-
 		z-index: 55;
 
 		display: flex;
@@ -102,51 +105,42 @@ html {
 
 		align-items: center;
 
+		width: 100%;
+
+		gap: 10px;
 		padding: 6px;
-	}
 
-	.music-track_actions {
-		display: flex;
+		.music-track_play {
+			position: relative;
 
-		align-items: center;
+			transition: all 150ms ease-in-out;
+			cursor: pointer;
 
-		margin-right: 10px;
-
-		&.withOrder {
-			.music-track_action {
+			&.withOrder {
 				.ant-btn {
 					opacity: 0;
 				}
 			}
-		}
-
-		.music-track_action {
-			position: relative;
-
-			transition: all 150ms ease-in-out;
-
-			cursor: pointer;
 
 			.music-track_orderIndex {
 				position: absolute;
 
+				z-index: 55;
+
 				top: 0;
 				left: 0;
 
-				height: 100%;
+				height: 32px;
+				width: 32px;
 
-				width: 100%;
+				padding: 12px;
 
-				padding: 5px 13px;
-
-				line-height: 22px;
+				//line-height: 22px;
 
 				opacity: 1;
 
 				transition: all 150ms ease-in-out;
 
-				text-align: center;
-
 				font-family: "DM Mono", monospace;
 
 				svg {
@@ -155,6 +149,10 @@ html {
 			}
 
 			.ant-btn {
+				position: relative;
+
+				z-index: 60;
+
 				svg {
 					margin: 0 !important;
 
@@ -170,54 +168,57 @@ html {
 				border: 1px solid var(--text-color);
 			}
 		}
-	}
 
-	.music-track_cover {
-		display: flex;
-		flex-direction: column;
+		.music-track_cover {
+			display: flex;
+			flex-direction: column;
 
-		align-items: center;
-		justify-content: center;
+			align-items: center;
+			justify-content: center;
 
-		background-color: black;
+			background-color: black;
 
-		border-radius: 12px;
+			border-radius: 12px;
 
-		overflow: hidden;
+			overflow: hidden;
 
-		width: 35px;
-		height: 35px;
+			width: 35px;
+			height: 35px;
 
-		min-width: 35px;
-		min-height: 35px;
+			min-width: 35px;
+			min-height: 35px;
+
+			img {
+				width: 100%;
+				height: 100%;
+
+				object-fit: contain;
+			}
+		}
+
+		.music-track_details {
+			display: flex;
+			flex-direction: column;
 
-		img {
 			width: 100%;
-			height: 100%;
 
-			object-fit: contain;
+			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_details {
-		display: flex;
-		flex-direction: column;
+	.music-track_actions {
+		position: relative;
+		z-index: 60;
 
-		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_right_actions {
 		display: flex;
 		flex-direction: row;
 
@@ -230,13 +231,4 @@ html {
 
 		color: var(--text-color);
 	}
-
-	.music-track_info {
-		display: inline-flex;
-		flex-direction: row;
-
-		.music-track_duration {
-			font-size: 0.8rem;
-		}
-	}
 }