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)
-		} 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()
 		}
-		}
 	})
 
-	const handleOnClickItem = () => {
+	const handleOnClickItem = React.useCallback(() => {
+		if (props.onClick) {
+			props.onClick(props.track)
+		}
+
 		if (app.isMobile) {
 			handleClickPlayBtn()
 		}
-	}
+	})
 
 	const handleMoreMenuOpen = () => {
 		if (app.isMobile) {
@@ -170,21 +171,20 @@ 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"
@@ -198,16 +198,18 @@ const Track = (props) => {
 							onClick={handleClickPlayBtn}
 						/>
 					</div>
-					</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,8 +226,9 @@ const Track = (props) => {
 						</span>
 					</div>
 				</div>
+			</div>
 
-				<div className="music-track_right_actions">
+			<div className="music-track_actions">
 				<antd.Dropdown
 					menu={{
 						items: moreMenuItems,
@@ -243,7 +246,6 @@ const Track = (props) => {
 				</antd.Dropdown>
 			</div>
 		</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 {
+		.music-track_content {
+			.music-track_play {
 				&.withOrder {
-				.music-track_action {
 					.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;
-
-		margin-right: 10px;
+			transition: all 150ms ease-in-out;
+			cursor: pointer;
 
 			&.withOrder {
-			.music-track_action {
 				.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,7 +168,6 @@ html {
 				border: 1px solid var(--text-color);
 			}
 		}
-	}
 
 		.music-track_cover {
 			display: flex;
@@ -203,7 +200,7 @@ html {
 			display: flex;
 			flex-direction: column;
 
-		margin-left: 10px;
+			width: 100%;
 
 			color: var(--text-color);
 
@@ -216,8 +213,12 @@ html {
 				font-size: 0.8rem;
 			}
 		}
+	}
+
+	.music-track_actions {
+		position: relative;
+		z-index: 60;
 
-	.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;
-		}
-	}
 }