RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve css & click handling

Browse Source
This commit is contained in:
SrGooglo 2025-04-09 15:43:58 +00:00
parent 2225083995
commit 61ec4a80f8
2 changed files with 115 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/app/src/components/Music/Track/index.jsx
View File

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

138
packages/app/src/components/Music/Track/index.less
View File

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