roland/stream
1
0
Fork 0
forked from Kieran/zap.stream
Code Pull Requests Activity

Add viewer counts to video tiles

Browse Source
This commit is contained in:
Kieran 2023-07-06 13:33:08 +01:00
parent ac08d83231
commit 04975911cf
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/element/video-tile.css
View File

@ -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;
}

17
src/element/video-tile.tsx
View File

@ -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 && <StatePill state={status as StreamState} />}
<span className="pill-box">
{showStatus && <StatePill state={status as StreamState} />}
{viewers && <span className="pill viewers">{formatSats(Number(viewers))} viewers</span>}
</span>
</div>
<h3>{title}</h3>
{showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}