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 &&