pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Add id to media card menu
+34
-1
+34
-1
src/components/media/MediaCard.tsx
+34
-1
src/components/media/MediaCard.tsx
···
75
75
76
76
const dotListContent = [t(`media.types.${media.type}`)];
77
77
78
+
const altDotListContent = [t(`ID: ${media.id}`)];
79
+
78
80
const [searchQuery] = useSearchQuery();
79
81
80
82
const [, copyToClipboard] = useCopyToClipboard();
81
83
const [hasCopied, setHasCopied] = useState(false);
84
+
85
+
const [hasCopiedID, setHasCopiedID] = useState(false);
82
86
83
87
if (closable) {
84
88
setOverlayVisible(false);
···
113
117
copyToClipboard(link);
114
118
setHasCopied(true);
115
119
setTimeout(() => setHasCopied(false), 2000);
120
+
};
121
+
122
+
const handleCopyIDClick = (
123
+
e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
124
+
) => {
125
+
e.preventDefault();
126
+
copyToClipboard(media.id);
127
+
setHasCopiedID(true);
128
+
setTimeout(() => setHasCopiedID(false), 2000);
116
129
};
117
130
118
131
return (
···
292
305
<span>{media.title}</span>
293
306
</h1>
294
307
<div className="media-info-container justify-content-center flex flex-wrap">
295
-
<DotList className="text-xs" content={dotListContent} />
308
+
{!overlayVisible ? (
309
+
<DotList className="text-xs" content={dotListContent} />
310
+
) : (
311
+
<button
312
+
type="button"
313
+
onClick={handleCopyIDClick}
314
+
className="z-50"
315
+
>
316
+
{!hasCopiedID ? (
317
+
<DotList className="text-xs" content={altDotListContent} />
318
+
) : (
319
+
<div className="flex items-center gap-1">
320
+
<DotList className="text-xs" content={altDotListContent} />
321
+
<Icon
322
+
className="text-xs text-type-secondary"
323
+
icon={Icons.CHECKMARK}
324
+
/>
325
+
</div>
326
+
)}
327
+
</button>
328
+
)}
296
329
</div>
297
330
298
331
{!overlayVisible && !closable ? (