fix: short links
This commit is contained in:
@ -4,9 +4,10 @@ import { unixNow } from "@snort/shared";
|
|||||||
import { useMemo } from "react";
|
import { useMemo } from "react";
|
||||||
import { LIVE_STREAM_CHAT, WEEK } from "const";
|
import { LIVE_STREAM_CHAT, WEEK } from "const";
|
||||||
|
|
||||||
export function useLiveChatFeed(link: NostrLink, eZaps?: Array<string>, limit = 100) {
|
export function useLiveChatFeed(link?: NostrLink, eZaps?: Array<string>, limit = 100) {
|
||||||
const since = useMemo(() => unixNow() - WEEK, [link.id]);
|
const since = useMemo(() => unixNow() - WEEK, [link?.id]);
|
||||||
const sub = useMemo(() => {
|
const sub = useMemo(() => {
|
||||||
|
if (!link) return null;
|
||||||
const rb = new RequestBuilder(`live:${link.id}:${link.author}`);
|
const rb = new RequestBuilder(`live:${link.id}:${link.author}`);
|
||||||
rb.withOptions({
|
rb.withOptions({
|
||||||
leaveOpen: true,
|
leaveOpen: true,
|
||||||
@ -14,7 +15,7 @@ export function useLiveChatFeed(link: NostrLink, eZaps?: Array<string>, limit =
|
|||||||
const aTag = `${link.kind}:${link.author}:${link.id}`;
|
const aTag = `${link.kind}:${link.author}:${link.id}`;
|
||||||
rb.withFilter().kinds([LIVE_STREAM_CHAT]).tag("a", [aTag]).limit(limit);
|
rb.withFilter().kinds([LIVE_STREAM_CHAT]).tag("a", [aTag]).limit(limit);
|
||||||
return rb;
|
return rb;
|
||||||
}, [link.id, since, eZaps]);
|
}, [link?.id, since, eZaps]);
|
||||||
|
|
||||||
const feed = useRequestBuilder(NoteCollection, sub);
|
const feed = useRequestBuilder(NoteCollection, sub);
|
||||||
|
|
||||||
@ -23,8 +24,8 @@ export function useLiveChatFeed(link: NostrLink, eZaps?: Array<string>, limit =
|
|||||||
}, [feed.data]);
|
}, [feed.data]);
|
||||||
|
|
||||||
const reactions = useReactions(
|
const reactions = useReactions(
|
||||||
`live:${link.id}:${link.author}:reactions`,
|
`live:${link?.id}:${link?.author}:reactions`,
|
||||||
messages.map(a => NostrLink.fromEvent(a)).concat(link),
|
messages.map(a => NostrLink.fromEvent(a)).concat(link ? [link] : []),
|
||||||
undefined,
|
undefined,
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { fetchNip05Pubkey, hexToBech32 } from "@snort/shared";
|
import { fetchNip05Pubkey } from "@snort/shared";
|
||||||
import { NostrLink, tryParseNostrLink, NostrPrefix } from "@snort/system";
|
import { NostrLink, tryParseNostrLink, NostrPrefix } from "@snort/system";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
@ -16,11 +16,7 @@ export function useStreamLink() {
|
|||||||
const [handle, domain] = (params.id.includes("@") ? params.id : `${params.id}@zap.stream`).split("@");
|
const [handle, domain] = (params.id.includes("@") ? params.id : `${params.id}@zap.stream`).split("@");
|
||||||
fetchNip05Pubkey(handle, domain).then(d => {
|
fetchNip05Pubkey(handle, domain).then(d => {
|
||||||
if (d) {
|
if (d) {
|
||||||
setLink({
|
setLink(new NostrLink(NostrPrefix.PublicKey, d));
|
||||||
id: d,
|
|
||||||
type: NostrPrefix.PublicKey,
|
|
||||||
encode: () => hexToBech32(NostrPrefix.PublicKey, d),
|
|
||||||
} as NostrLink);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,219 +17,220 @@ import { formatSats } from "number";
|
|||||||
import { findTag, getEventFromLocationState } from "utils";
|
import { findTag, getEventFromLocationState } from "utils";
|
||||||
|
|
||||||
export function StreamSummaryPage() {
|
export function StreamSummaryPage() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const evPreload = getEventFromLocationState(location.state);
|
const evPreload = getEventFromLocationState(location.state);
|
||||||
const link = useStreamLink();
|
const link = useStreamLink();
|
||||||
if (link) {
|
if (link) {
|
||||||
return <StreamSummary link={link} preload={evPreload} />;
|
return <StreamSummary link={link} preload={evPreload} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
interface StatSlot {
|
interface StatSlot {
|
||||||
time: number;
|
time: number;
|
||||||
zaps: number;
|
zaps: number;
|
||||||
messages: number;
|
messages: number;
|
||||||
reactions: number;
|
reactions: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function StreamSummary({ link, preload }: { link: NostrLink; preload?: NostrEvent }) {
|
export function StreamSummary({ link, preload }: { link: NostrLink; preload?: NostrEvent }) {
|
||||||
const ev = useCurrentStreamFeed(link, true, preload);
|
const ev = useCurrentStreamFeed(link, true, preload);
|
||||||
const data = useLiveChatFeed(link, undefined, 5_000);
|
const thisLink = ev ? NostrLink.fromEvent(ev) : undefined;
|
||||||
const reactions = useEventReactions(link, data.reactions);
|
const data = useLiveChatFeed(thisLink, undefined, 5_000);
|
||||||
|
const reactions = useEventReactions(thisLink ?? link, data.reactions);
|
||||||
|
|
||||||
const chatSummary = useMemo(() => {
|
const chatSummary = useMemo(() => {
|
||||||
return Object.entries(
|
return Object.entries(
|
||||||
data.messages.reduce((acc, v) => {
|
data.messages.reduce((acc, v) => {
|
||||||
acc[v.pubkey] ??= [];
|
acc[v.pubkey] ??= [];
|
||||||
acc[v.pubkey].push(v);
|
acc[v.pubkey].push(v);
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, Array<NostrEvent>>)
|
}, {} as Record<string, Array<NostrEvent>>)
|
||||||
)
|
)
|
||||||
.map(([k, v]) => ({
|
.map(([k, v]) => ({
|
||||||
pubkey: k,
|
pubkey: k,
|
||||||
messages: v,
|
messages: v,
|
||||||
}))
|
}))
|
||||||
.sort((a, b) => (a.messages.length > b.messages.length ? -1 : 1));
|
.sort((a, b) => (a.messages.length > b.messages.length ? -1 : 1));
|
||||||
}, [data.messages]);
|
}, [data.messages]);
|
||||||
|
|
||||||
const zapsSummary = useMemo(() => {
|
const zapsSummary = useMemo(() => {
|
||||||
return Object.entries(
|
return Object.entries(
|
||||||
reactions.zaps.reduce((acc, v) => {
|
reactions.zaps.reduce((acc, v) => {
|
||||||
if (!v.sender) return acc;
|
if (!v.sender) return acc;
|
||||||
acc[v.sender] ??= [];
|
acc[v.sender] ??= [];
|
||||||
acc[v.sender].push(v);
|
acc[v.sender].push(v);
|
||||||
return acc;
|
return acc;
|
||||||
}, {} as Record<string, Array<ParsedZap>>)
|
}, {} as Record<string, Array<ParsedZap>>)
|
||||||
)
|
)
|
||||||
.map(([k, v]) => ({
|
.map(([k, v]) => ({
|
||||||
pubkey: k,
|
pubkey: k,
|
||||||
zaps: v,
|
zaps: v,
|
||||||
total: v.reduce((acc, vv) => acc + vv.amount, 0),
|
total: v.reduce((acc, vv) => acc + vv.amount, 0),
|
||||||
}))
|
}))
|
||||||
.sort((a, b) => (a.total > b.total ? -1 : 1));
|
.sort((a, b) => (a.total > b.total ? -1 : 1));
|
||||||
}, [reactions.zaps]);
|
}, [reactions.zaps]);
|
||||||
|
|
||||||
const title = findTag(ev, "title");
|
const title = findTag(ev, "title");
|
||||||
const summary = findTag(ev, "summary");
|
const summary = findTag(ev, "summary");
|
||||||
const status = findTag(ev, "status");
|
const status = findTag(ev, "status");
|
||||||
const starts = findTag(ev, "starts");
|
const starts = findTag(ev, "starts");
|
||||||
|
|
||||||
const Day = 60 * 60 * 24;
|
const Day = 60 * 60 * 24;
|
||||||
const startTime = starts ? Number(starts) : ev?.created_at ?? unixNow();
|
const startTime = starts ? Number(starts) : ev?.created_at ?? unixNow();
|
||||||
const endTime = status === StreamState.Live ? unixNow() : ev?.created_at ?? unixNow();
|
const endTime = status === StreamState.Live ? unixNow() : ev?.created_at ?? unixNow();
|
||||||
|
|
||||||
const streamLength = endTime - startTime;
|
const streamLength = endTime - startTime;
|
||||||
const windowSize = streamLength > Day ? Day : 60 * 10;
|
const windowSize = streamLength > Day ? Day : 60 * 10;
|
||||||
|
|
||||||
const stats = useMemo(() => {
|
const stats = useMemo(() => {
|
||||||
let min = unixNow();
|
let min = unixNow();
|
||||||
let max = 0;
|
let max = 0;
|
||||||
const ret = [...data.messages, ...data.reactions]
|
const ret = [...data.messages, ...data.reactions]
|
||||||
.sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
|
.sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
|
||||||
.reduce((acc, v) => {
|
.reduce((acc, v) => {
|
||||||
const time = Math.floor(v.created_at - (v.created_at % windowSize));
|
const time = Math.floor(v.created_at - (v.created_at % windowSize));
|
||||||
if (time < min) {
|
if (time < min) {
|
||||||
min = time;
|
min = time;
|
||||||
|
}
|
||||||
|
if (time > max) {
|
||||||
|
max = time;
|
||||||
|
}
|
||||||
|
const key = time.toString();
|
||||||
|
acc[key] ??= {
|
||||||
|
time,
|
||||||
|
zaps: 0,
|
||||||
|
messages: 0,
|
||||||
|
reactions: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (v.kind === LIVE_STREAM_CHAT) {
|
||||||
|
acc[key].messages++;
|
||||||
|
} else if (v.kind === EventKind.ZapReceipt) {
|
||||||
|
acc[key].zaps++;
|
||||||
|
} else if (v.kind === EventKind.Reaction) {
|
||||||
|
acc[key].reactions++;
|
||||||
|
} else {
|
||||||
|
console.debug("Uncounted stat", v);
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, StatSlot>);
|
||||||
|
|
||||||
|
// fill empty time slots
|
||||||
|
for (let x = min; x < max; x += windowSize) {
|
||||||
|
ret[x.toString()] ??= {
|
||||||
|
time: x,
|
||||||
|
zaps: 0,
|
||||||
|
messages: 0,
|
||||||
|
reactions: 0,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
if (time > max) {
|
return ret;
|
||||||
max = time;
|
}, [data]);
|
||||||
}
|
|
||||||
const key = time.toString();
|
|
||||||
acc[key] ??= {
|
|
||||||
time,
|
|
||||||
zaps: 0,
|
|
||||||
messages: 0,
|
|
||||||
reactions: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (v.kind === LIVE_STREAM_CHAT) {
|
return (
|
||||||
acc[key].messages++;
|
<div className="stream-summary">
|
||||||
} else if (v.kind === EventKind.ZapReceipt) {
|
<h1>{title}</h1>
|
||||||
acc[key].zaps++;
|
<p>{summary}</p>
|
||||||
} else if (v.kind === EventKind.Reaction) {
|
<div className="flex g8">
|
||||||
acc[key].reactions++;
|
<StatePill state={status as StreamState} />
|
||||||
} else {
|
{streamLength > 0 && (
|
||||||
console.debug("Uncounted stat", v);
|
<FormattedMessage
|
||||||
}
|
defaultMessage="Stream Duration {duration} mins"
|
||||||
return acc;
|
values={{
|
||||||
}, {} as Record<string, StatSlot>);
|
duration: <FormattedNumber value={streamLength / 60} maximumFractionDigits={2} />,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h2>
|
||||||
|
<FormattedMessage defaultMessage="Summary" />
|
||||||
|
</h2>
|
||||||
|
<ResponsiveContainer height={200}>
|
||||||
|
<BarChart data={Object.values(stats)} margin={{ left: 0, right: 0 }} style={{ userSelect: "none" }}>
|
||||||
|
<XAxis tick={false} />
|
||||||
|
<YAxis />
|
||||||
|
<Bar dataKey="messages" fill="green" stackId="" />
|
||||||
|
<Bar dataKey="zaps" fill="yellow" stackId="" />
|
||||||
|
<Bar dataKey="reactions" fill="red" stackId="" />
|
||||||
|
<Tooltip
|
||||||
|
cursor={{ fill: "rgba(255,255,255,0.2)" }}
|
||||||
|
content={({ active, payload }) => {
|
||||||
|
if (active && payload && payload.length) {
|
||||||
|
const data = payload[0].payload as StatSlot;
|
||||||
|
return (
|
||||||
|
<div className="plain-paper flex f-col g8">
|
||||||
|
<div>
|
||||||
|
<FormattedDate value={data.time * 1000} timeStyle="short" dateStyle="short" />
|
||||||
|
</div>
|
||||||
|
<div className="flex f-space">
|
||||||
|
<div>
|
||||||
|
<FormattedMessage defaultMessage="Messages" />
|
||||||
|
</div>
|
||||||
|
<div>{data.messages}</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex f-space">
|
||||||
|
<div>
|
||||||
|
<FormattedMessage defaultMessage="Reactions" />
|
||||||
|
</div>
|
||||||
|
<div>{data.reactions}</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex f-space">
|
||||||
|
<div>
|
||||||
|
<FormattedMessage defaultMessage="Zaps" />
|
||||||
|
</div>
|
||||||
|
<div>{data.zaps}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
|
||||||
// fill empty time slots
|
<div className="flex g8">
|
||||||
for (let x = min; x < max; x += windowSize) {
|
<div className="plain-paper f-1">
|
||||||
ret[x.toString()] ??= {
|
<h3>
|
||||||
time: x,
|
<FormattedMessage defaultMessage="Top Chatters" />
|
||||||
zaps: 0,
|
</h3>
|
||||||
messages: 0,
|
<div className="flex f-col g8">
|
||||||
reactions: 0,
|
{chatSummary.slice(0, 5).map(a => (
|
||||||
};
|
<div className="flex f-space f-center" key={a.pubkey}>
|
||||||
}
|
<Profile pubkey={a.pubkey} />
|
||||||
return ret;
|
<div>
|
||||||
}, [data]);
|
<FormattedMessage
|
||||||
|
defaultMessage="{n} messages"
|
||||||
return (
|
values={{
|
||||||
<div className="stream-summary">
|
n: <FormattedNumber value={a.messages.length} />,
|
||||||
<h1>{title}</h1>
|
}}
|
||||||
<p>{summary}</p>
|
/>
|
||||||
<div className="flex g8">
|
</div>
|
||||||
<StatePill state={status as StreamState} />
|
</div>
|
||||||
{streamLength > 0 && (
|
))}
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Stream Duration {duration} mins"
|
|
||||||
values={{
|
|
||||||
duration: <FormattedNumber value={streamLength / 60} maximumFractionDigits={2} />,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<h2>
|
|
||||||
<FormattedMessage defaultMessage="Summary" />
|
|
||||||
</h2>
|
|
||||||
<ResponsiveContainer height={200}>
|
|
||||||
<BarChart data={Object.values(stats)} margin={{ left: 0, right: 0 }} style={{ userSelect: "none" }}>
|
|
||||||
<XAxis tick={false} />
|
|
||||||
<YAxis />
|
|
||||||
<Bar dataKey="messages" fill="green" stackId="" />
|
|
||||||
<Bar dataKey="zaps" fill="yellow" stackId="" />
|
|
||||||
<Bar dataKey="reactions" fill="red" stackId="" />
|
|
||||||
<Tooltip
|
|
||||||
cursor={{ fill: "rgba(255,255,255,0.2)" }}
|
|
||||||
content={({ active, payload }) => {
|
|
||||||
if (active && payload && payload.length) {
|
|
||||||
const data = payload[0].payload as StatSlot;
|
|
||||||
return (
|
|
||||||
<div className="plain-paper flex f-col g8">
|
|
||||||
<div>
|
|
||||||
<FormattedDate value={data.time * 1000} timeStyle="short" dateStyle="short" />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex f-space">
|
|
||||||
<div>
|
|
||||||
<FormattedMessage defaultMessage="Messages" />
|
|
||||||
</div>
|
|
||||||
<div>{data.messages}</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex f-space">
|
|
||||||
<div>
|
|
||||||
<FormattedMessage defaultMessage="Reactions" />
|
|
||||||
</div>
|
|
||||||
<div>{data.reactions}</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex f-space">
|
|
||||||
<div>
|
|
||||||
<FormattedMessage defaultMessage="Zaps" />
|
|
||||||
</div>
|
|
||||||
<div>{data.zaps}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
|
|
||||||
<div className="flex g8">
|
|
||||||
<div className="plain-paper f-1">
|
|
||||||
<h3>
|
|
||||||
<FormattedMessage defaultMessage="Top Chatters" />
|
|
||||||
</h3>
|
|
||||||
<div className="flex f-col g8">
|
|
||||||
{chatSummary.slice(0, 5).map(a => (
|
|
||||||
<div className="flex f-space f-center" key={a.pubkey}>
|
|
||||||
<Profile pubkey={a.pubkey} />
|
|
||||||
<div>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="{n} messages"
|
|
||||||
values={{
|
|
||||||
n: <FormattedNumber value={a.messages.length} />,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="plain-paper f-1">
|
||||||
))}
|
<h3>
|
||||||
</div>
|
<FormattedMessage defaultMessage="Top Zappers" />
|
||||||
</div>
|
</h3>
|
||||||
<div className="plain-paper f-1">
|
<div className="flex f-col g8">
|
||||||
<h3>
|
{zapsSummary.slice(0, 5).map(a => (
|
||||||
<FormattedMessage defaultMessage="Top Zappers" />
|
<div className="flex f-space f-center" key={a.pubkey}>
|
||||||
</h3>
|
<Profile pubkey={a.pubkey} />
|
||||||
<div className="flex f-col g8">
|
<div>
|
||||||
{zapsSummary.slice(0, 5).map(a => (
|
<FormattedMessage
|
||||||
<div className="flex f-space f-center" key={a.pubkey}>
|
defaultMessage="{n} sats"
|
||||||
<Profile pubkey={a.pubkey} />
|
values={{
|
||||||
<div>
|
n: formatSats(a.total),
|
||||||
<FormattedMessage
|
}}
|
||||||
defaultMessage="{n} sats"
|
/>
|
||||||
values={{
|
</div>
|
||||||
n: formatSats(a.total),
|
</div>
|
||||||
}}
|
))}
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user