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 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"
const RadioItem = ({ item }) => {
const start = () => {
const RadioItem = ({ item, style }) => {
const onClickItem = () => {
app.cores.player.start(
{
title: item.name,
@ -21,11 +21,21 @@ const RadioItem = ({ item }) => {
)
}
if (!item) {
return (
<div className="radio-list-item empty" style={style}>
<div className="radio-list-item-content">
<Skeleton />
</div>
</div>
)
}
return (
<div className="radio-list-item" onClick={start}>
<div className="radio-list-item" onClick={onClickItem} style={style}>
<Image className="radio-list-item-cover" src={item.background} />
<div className="radio-list-item-content">
<h1>{item.name}</h1>
<h1 id="title">{item.name}</h1>
<p>{item.description}</p>
<div className="radio-list-item-info">
@ -61,6 +71,10 @@ const RadioTab = () => {
{R_Radios.map((item) => (
<RadioItem key={item.id} item={item} />
))}
<RadioItem style={{ opacity: 0.5 }} />
<RadioItem style={{ opacity: 0.4 }} />
<RadioItem style={{ opacity: 0.3 }} />
</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 {
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(@min-item-width, 1fr));
gap: 10px;
width: 100%;
gap: 20px;
}
.radio-list-item {
@ -14,8 +15,8 @@
display: flex;
flex-direction: column;
height: 160px;
width: 100%;
min-width: @min-item-width;
min-height: @min-item-height;
border-radius: 16px;
background-color: var(--background-color-accent);
@ -24,6 +25,14 @@
&:hover {
cursor: pointer;
.radio-list-item-content {
backdrop-filter: blur(2px);
}
}
&.empty {
cursor: default;
}
.lazy-load-image-background,
@ -37,6 +46,10 @@
width: 100%;
height: 100%;
img {
object-fit: cover;
}
}
.radio-list-item-content {
@ -51,10 +64,10 @@
width: 100%;
height: 100%;
backdrop-filter: blur(2px);
padding: 16px;
transition: all 150ms ease-in-out;
.radio-list-item-info {
display: flex;
align-items: center;