Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-03-29 07:48:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add id to media card menu

Browse source
This commit is contained in:
Pas 2025-01-17 20:54:08 -07:00
parent 897d63fb57
commit e985f454d6
1 changed files with 34 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -75,11 +75,15 @@ function MediaCardContent({
const dotListContent = [t(`media.types.${media.type}`)];
const altDotListContent = [t(`ID: ${media.id}`)];
const [searchQuery] = useSearchQuery();
const [, copyToClipboard] = useCopyToClipboard();
const [hasCopied, setHasCopied] = useState(false);
const [hasCopiedID, setHasCopiedID] = useState(false);
if (closable) {
setOverlayVisible(false);
}
@ -115,6 +119,15 @@ function MediaCardContent({
setTimeout(() => setHasCopied(false), 2000);
};
const handleCopyIDClick = (
e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
) => {
e.preventDefault();
copyToClipboard(media.id);
setHasCopiedID(true);
setTimeout(() => setHasCopiedID(false), 2000);
};
return (
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Flare.Base
@ -292,7 +305,27 @@ function MediaCardContent({
<span>{media.title}</span>
</h1>
<div className="media-info-container justify-content-center flex flex-wrap">
<DotList className="text-xs" content={dotListContent} />
{!overlayVisible ? (
<DotList className="text-xs" content={dotListContent} />
) : (
<button
type="button"
onClick={handleCopyIDClick}
className="z-50"
>
{!hasCopiedID ? (
<DotList className="text-xs" content={altDotListContent} />
) : (
<div className="flex items-center gap-1">
<DotList className="text-xs" content={altDotListContent} />
<Icon
className="text-xs text-type-secondary"
icon={Icons.CHECKMARK}
/>
</div>
)}
</button>
)}
</div>
{!overlayVisible && !closable ? (