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

🚸 Redisign playlistItem actions & hover effect

Browse Source
This commit is contained in:
SrGooglo 2023-05-10 11:35:28 +00:00
parent 0a7da60e4f
commit 5aa676474f
2 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/app/src/pages/music/components/feed/index.jsx
View File

@ -1,5 +1,6 @@
import React from "react" import React from "react"
import * as antd from "antd" import * as antd from "antd"
import classnames from "classnames"
import { ImageViewer, UserPreview } from "components" import { ImageViewer, UserPreview } from "components"
import { Icons } from "components/Icons" import { Icons } from "components/Icons"
import { Translation } from "react-i18next" import { Translation } from "react-i18next"
@ -101,6 +102,7 @@ const PlaylistsList = (props) => {
} }
const PlaylistItem = (props) => { const PlaylistItem = (props) => {
const [coverHover, setCoverHover] = React.useState(false)
const { playlist } = props const { playlist } = props
const onClick = () => { const onClick = () => {
@ -114,34 +116,36 @@ const PlaylistItem = (props) => {
const onClickPlay = (e) => { const onClickPlay = (e) => {
e.stopPropagation() e.stopPropagation()
console.log(playlist.list)
app.cores.player.startPlaylist(playlist.list) app.cores.player.startPlaylist(playlist.list)
} }
return <div return <div
id={playlist._id} id={playlist._id}
key={props.key} key={props.key}
className="playlistItem" className={classnames(
onClick={onClick} "playlistItem",
{
"cover-hovering": coverHover
}
)}
> >
<div className="playlistItem_cover"> <div
<ImageViewer src={playlist.thumbnail ?? "/assets/no_song.png"} /> className="playlistItem_cover"
onMouseEnter={() => setCoverHover(true)}
onMouseLeave={() => setCoverHover(false)}
onClick={onClickPlay}
>
<ImageViewer
src={playlist.thumbnail ?? "/assets/no_song.png"}
/>
</div> </div>
<div className="playlistItem_info"> <div className="playlistItem_info">
<div className="playlistItem_info_title"> <div className="playlistItem_info_title" onClick={onClick}>
<h1>{playlist.title}</h1> <h1>{playlist.title}</h1>
</div> </div>
<UserPreview user={playlist.user} /> <UserPreview user={playlist.user} />
</div> </div>
<div className="playlistItem_actions">
<antd.Button
icon={<Icons.Play />}
type="primary"
shape="circle"
onClick={onClickPlay}
/>
</div>
</div> </div>
} }

15
packages/app/src/pages/music/components/feed/index.less
View File

@ -77,6 +77,10 @@
min-width: 400px; min-width: 400px;
max-width: 800px; max-width: 800px;
//overflow: hidden;
box-sizing: border-box !important;
border-radius: 12px; border-radius: 12px;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@ -84,7 +88,7 @@
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
border-radius: 8px; border-radius: 8px;
&:hover { &.cover-hovering {
.playlistItem_cover { .playlistItem_cover {
transform: scale(1.1); transform: scale(1.1);
} }
@ -129,15 +133,17 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-width: 265px;
padding: 10px; padding: 10px;
max-width: calc(100% - 10vh);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
.playlistItem_info_title { .playlistItem_info_title {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: var(--background-color-contrast); color: var(--background-color-contrast);
font-family: "Space Grotesk", sans-serif; font-family: "Space Grotesk", sans-serif;
@ -148,8 +154,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; //white-space: nowrap;
margin: 0; margin: 0;
//calculate the max height of the title using 10vh and 30px for the userPreview and padding
height: 5vh;
} }
} }