42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
|
import { MouseEvent } from "react";
|
|
import useImgProxy from "@/Hooks/useImgProxy";
|
|
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
|
import { Link } from "react-router-dom";
|
|
import Icon from "@/Icons/Icon";
|
|
|
|
const ImageGridItem = (props: { event: TaggedNostrEvent; onClick: (e: MouseEvent) => void }) => {
|
|
const { event, onClick } = props;
|
|
const { proxy } = useImgProxy();
|
|
|
|
const parsed = transformTextCached(event.id, event.content, event.tags);
|
|
const media = parsed.filter(
|
|
a => a.type === "media" && (a.mimeType?.startsWith("image/") || a.mimeType?.startsWith("video/")),
|
|
);
|
|
|
|
if (media.length === 0) return null;
|
|
|
|
const multiple = media.length > 1;
|
|
const isVideo = media[0].mimeType?.startsWith("video/");
|
|
const noteId = NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix);
|
|
|
|
const myOnClick = (clickEvent: MouseEvent) => {
|
|
if (onClick && window.innerWidth >= 768) {
|
|
onClick(clickEvent);
|
|
clickEvent.preventDefault();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Link to={`/${noteId}`} className="aspect-square cursor-pointer hover:opacity-80 relative" onClick={myOnClick}>
|
|
<img src={proxy(media[0].content, 256)} alt="Note Media" className="w-full h-full object-cover" />
|
|
<div className="absolute right-2 top-2 flex flex-col gap-2">
|
|
{multiple && <Icon name="copy-solid" className="text-white opacity-80 drop-shadow-md" />}
|
|
{isVideo && <Icon name="play-square-outline" className="text-white opacity-80 drop-shadow-md" />}
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default ImageGridItem;
|