Merge branch 'main' into profile

src/element/video-tile.tsx

@@ -3,27 +3,42 @@ 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 }: { ev: NostrEvent }) {
-    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 isLive = status === "live";
+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 : ""})`
-        }}>
-            <span className={`pill${isLive ? " live" : ""}`}>
-                {status}
-            </span>
-        </div>
-        <h3>{title}</h3>
-        <div>
-            {inView && <Profile pubkey={ev.pubkey} />}
-        </div>
+  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>
-}
+  );
+}