45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Profile } from "./profile";
|
|
import "./video-tile.css";
|
|
import { NostrEvent, encodeTLV, NostrPrefix } from "@snort/system";
|
|
import { useInView } from "react-intersection-observer";
|
|
import { StatePill } from "./state-pill";
|
|
import { StreamState } from "index";
|
|
|
|
export function VideoTile({
|
|
ev,
|
|
showAuthor = true,
|
|
}: {
|
|
ev: NostrEvent;
|
|
showAuthor?: boolean;
|
|
}) {
|
|
const { inView, ref } = useInView({ triggerOnce: true });
|
|
const id = ev.tags.find((a) => a[0] === "d")?.[1]!;
|
|
const title = ev.tags.find((a) => a[0] === "title")?.[1];
|
|
const image = ev.tags.find((a) => a[0] === "image")?.[1];
|
|
const status = ev.tags.find((a) => a[0] === "status")?.[1];
|
|
const host =
|
|
ev.tags.find((a) => a[0] === "p" && a[3] === "host")?.[1] ?? ev.pubkey;
|
|
|
|
const link = encodeTLV(
|
|
NostrPrefix.Address,
|
|
id,
|
|
undefined,
|
|
ev.kind,
|
|
ev.pubkey
|
|
);
|
|
return (
|
|
<Link to={`/${link}`} className="video-tile" ref={ref}>
|
|
<div
|
|
style={{
|
|
backgroundImage: `url(${inView ? image : ""})`,
|
|
}}
|
|
>
|
|
<StatePill state={status as StreamState} />
|
|
</div>
|
|
<h3>{title}</h3>
|
|
{showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
|
|
</Link>
|
|
);
|
|
}
|