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

improve radio list

Browse Source
This commit is contained in:
SrGooglo 2025-02-20 02:03:41 +00:00
parent c4011f0674
commit 2702db8365
2 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/app/src/pages/music/tabs/radio/index.jsx
View File

@ -7,8 +7,8 @@ import { MdPlayCircle, MdHeadphones } from "react-icons/md"
import "./index.less" import "./index.less"
const RadioItem = ({ item }) => { const RadioItem = ({ item, style }) => {
const start = () => { const onClickItem = () => {
app.cores.player.start( app.cores.player.start(
{ {
title: item.name, title: item.name,
@ -21,11 +21,21 @@ const RadioItem = ({ item }) => {
) )
} }
if (!item) {
return ( return (
<div className="radio-list-item" onClick={start}> <div className="radio-list-item empty" style={style}>
<div className="radio-list-item-content">
<Skeleton />
</div>
</div>
)
}
return (
<div className="radio-list-item" onClick={onClickItem} style={style}>
<Image className="radio-list-item-cover" src={item.background} /> <Image className="radio-list-item-cover" src={item.background} />
<div className="radio-list-item-content"> <div className="radio-list-item-content">
<h1>{item.name}</h1> <h1 id="title">{item.name}</h1>
<p>{item.description}</p> <p>{item.description}</p>
<div className="radio-list-item-info"> <div className="radio-list-item-info">
@ -61,6 +71,10 @@ const RadioTab = () => {
{R_Radios.map((item) => ( {R_Radios.map((item) => (
<RadioItem key={item.id} item={item} /> <RadioItem key={item.id} item={item} />
))} ))}
<RadioItem style={{ opacity: 0.5 }} />
<RadioItem style={{ opacity: 0.4 }} />
<RadioItem style={{ opacity: 0.3 }} />
</div> </div>
) )
} }

29
packages/app/src/pages/music/tabs/radio/index.less
View File

@ -1,11 +1,12 @@
@min-item-width: 250px;
@min-item-height: 150px;
.radio-list { .radio-list {
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(auto-fit, minmax(@min-item-width, 1fr));
gap: 10px; gap: 10px;
width: 100%; width: 100%;
gap: 20px;
} }
.radio-list-item { .radio-list-item {
@ -14,8 +15,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 160px; min-width: @min-item-width;
width: 100%; min-height: @min-item-height;
border-radius: 16px; border-radius: 16px;
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
@ -24,6 +25,14 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
.radio-list-item-content {
backdrop-filter: blur(2px);
}
}
&.empty {
cursor: default;
} }
.lazy-load-image-background, .lazy-load-image-background,
@ -37,6 +46,10 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
img {
object-fit: cover;
}
} }
.radio-list-item-content { .radio-list-item-content {
@ -51,10 +64,10 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
backdrop-filter: blur(2px);
padding: 16px; padding: 16px;
transition: all 150ms ease-in-out;
.radio-list-item-info { .radio-list-item-info {
display: flex; display: flex;
align-items: center; align-items: center;