diff --git a/src/element/video-tile.css b/src/element/video-tile.css index eb40517..da66753 100644 --- a/src/element/video-tile.css +++ b/src/element/video-tile.css @@ -15,8 +15,17 @@ margin: 16px 0; } -.video-tile .pill { +.video-tile .pill-box { float: right; - margin: 16px 20px 0 0; + margin: 16px 20px; text-transform: uppercase; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + height: calc(100% - 32px); +} + +.video-tile .pill-box .pill { + width: fit-content; } \ No newline at end of file diff --git a/src/element/video-tile.tsx b/src/element/video-tile.tsx index d1b40a3..2ef2706 100644 --- a/src/element/video-tile.tsx +++ b/src/element/video-tile.tsx @@ -5,7 +5,8 @@ import { NostrEvent, encodeTLV, NostrPrefix } from "@snort/system"; import { useInView } from "react-intersection-observer"; import { StatePill } from "./state-pill"; import { StreamState } from "index"; -import { getHost } from "utils"; +import { findTag, getHost } from "utils"; +import { formatSats } from "number"; export function VideoTile({ ev, @@ -17,10 +18,11 @@ export function VideoTile({ showStatus?: 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 id = findTag(ev, "d") ?? ""; + const title = findTag(ev, "title"); + const image = findTag(ev, "image"); + const status = findTag(ev, "status"); + const viewers = findTag(ev, "current_participants"); const host = getHost(ev); const link = encodeTLV( @@ -37,7 +39,10 @@ export function VideoTile({ backgroundImage: `url(${inView ? image : ""})`, }} > - {showStatus && } + + {showStatus && } + {viewers && {formatSats(Number(viewers))} viewers} +

{title}

{showAuthor &&
{inView && }
}