Kieran/zap.stream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki 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
2 changed files with 22 additions and 8 deletions
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; margin: 16px 0;
} }
.video-tile .pill { .video-tile .pill-box {
float: right; float: right;
margin: 16px 20px 0 0; margin: 16px 20px;
text-transform: uppercase; 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 { useInView } from "react-intersection-observer";
import { StatePill } from "./state-pill"; import { StatePill } from "./state-pill";
import { StreamState } from "index"; import { StreamState } from "index";
import { getHost } from "utils"; import { findTag, getHost } from "utils";
import { formatSats } from "number";
export function VideoTile({ export function VideoTile({
ev, ev,
@ -17,10 +18,11 @@ export function VideoTile({
showStatus?: boolean; showStatus?: boolean;
}) { }) {
const { inView, ref } = useInView({ triggerOnce: true }); const { inView, ref } = useInView({ triggerOnce: true });
const id = ev.tags.find((a) => a[0] === "d")?.[1]!; const id = findTag(ev, "d") ?? "";
const title = ev.tags.find((a) => a[0] === "title")?.[1]; const title = findTag(ev, "title");
const image = ev.tags.find((a) => a[0] === "image")?.[1]; const image = findTag(ev, "image");
const status = ev.tags.find((a) => a[0] === "status")?.[1]; const status = findTag(ev, "status");
const viewers = findTag(ev, "current_participants");
const host = getHost(ev); const host = getHost(ev);
const link = encodeTLV( const link = encodeTLV(
@ -37,7 +39,10 @@ export function VideoTile({
backgroundImage: `url(${inView ? image : ""})`, 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> </div>
<h3>{title}</h3> <h3>{title}</h3>
{showAuthor && <div>{inView && <Profile pubkey={host} />}</div>} {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}