Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 20:12:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify and clean up

Browse source
This commit is contained in:
Pas 2025-01-16 15:58:11 -07:00
parent 693e7e03f2
commit 65510248ec
1 changed files with 176 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
src/components/media/MediaCard.tsx
View file

@ -108,7 +108,6 @@ function MediaCardContent({
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
{!overlayVisible ? (
<Flare.Base
className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
@ -134,14 +133,19 @@ function MediaCardContent({
"relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
{
"group-hover:rounded-lg": canLink,
"blur-sm": overlayVisible,
},
)}
style={{
backgroundImage: media.poster
? `url(${media.poster})`
? overlayVisible
? `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)), url(${media.poster})`
: `url(${media.poster})`
: undefined,
}}
>
{overlayVisible ? (
<div>
{series ? (
<div
className={[
@ -186,7 +190,11 @@ function MediaCardContent({
</div>
</>
) : null}
</div>
) : null}
{!overlayVisible ? (
<div>
<div
className="absolute bookmark-button"
onClick={(e) => e.preventDefault()}
@ -213,62 +221,11 @@ function MediaCardContent({
/>
</div>
</div>
<h1 className="mb-1 line-clamp-3 max-h-[4.5rem] text-ellipsis break-words font-bold text-white">
<span>{media.title}</span>
</h1>
<div className="media-info-container justify-content-center flex flex-wrap">
<DotList className="text-xs" content={dotListContent} />
) : null}
</div>
{/* More Info */}
<div className="absolute bottom-0 translate-y-1 right-1">
<button
className="media-more-button p-2"
type="button"
onClick={(e) => {
e.preventDefault();
setOverlayVisible(!overlayVisible);
}}
>
<Icon
className="text-xs font-semibold text-type-secondary"
icon={Icons.ELLIPSIS}
/>
</button>
</div>
{/* End Overlay */}
</Flare.Child>
</Flare.Base>
) : (
<Flare.Base className="group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10">
<Flare.Light
flareSize={300}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-mediaCard-hoverBackground duration-100"
className={classNames({
"rounded-xl bg-background-main group-hover:opacity-100": canLink,
})}
/>
<Flare.Child
className={`pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300 ${
canLink ? "group-hover:scale-95" : "opacity-60"
}`}
>
<div
className={classNames(
"relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
{
"group-hover:rounded-lg": canLink,
},
"blur-sm",
)}
style={{
backgroundImage: media.poster
? `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)), url(${media.poster})`
: undefined,
}}
/>
{overlayVisible ? (
<div>
<div className="absolute inset-0 flex flex-col items-center justify-start gap-y-2 pt-8 md:pt-12">
<button
type="button"
@ -318,15 +275,37 @@ function MediaCardContent({
Close
</button>
</div>
</div>
) : null}
<h1 className="mb-1 line-clamp-3 max-h-[4.5rem] text-ellipsis break-words font-bold text-white">
<span>{media.title}</span>
</h1>
<div className="media-info-container justify-content-center flex flex-wrap">
<DotList className="text-xs" content={dotListContent} />
</div>
{/* More Info */}
{!overlayVisible ? (
<div className="absolute bottom-0 translate-y-1 right-1">
<button
className="media-more-button p-2"
type="button"
onClick={(e) => {
e.preventDefault();
setOverlayVisible(!overlayVisible);
}}
>
<Icon
className="text-xs font-semibold text-type-secondary"
icon={Icons.ELLIPSIS}
/>
</button>
</div>
) : null}
{/* End Overlay */}
</Flare.Child>
</Flare.Base>
)}
</div>
);
}
@ -395,7 +374,15 @@ export function MediaCard(props: MediaCardProps) {
{content}
</Link>
) : (
<div>{content}</div>
<div
tabIndex={-1}
className={classNames(
"tabbable",
props.closable ? "hover:cursor-default" : "",
)}
>
{content}
</div>
)}
</div>
);