chore: Update translations
This commit is contained in:
parent
a6777d0441
commit
01eaf9996c
@ -17,220 +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 thisLink = ev ? NostrLink.fromEvent(ev) : undefined;
|
const thisLink = ev ? NostrLink.fromEvent(ev) : undefined;
|
||||||
const data = useLiveChatFeed(thisLink, undefined, 5_000);
|
const data = useLiveChatFeed(thisLink, undefined, 5_000);
|
||||||
const reactions = useEventReactions(thisLink ?? link, data.reactions);
|
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,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
return ret;
|
if (time > max) {
|
||||||
}, [data]);
|
max = time;
|
||||||
|
}
|
||||||
|
const key = time.toString();
|
||||||
|
acc[key] ??= {
|
||||||
|
time,
|
||||||
|
zaps: 0,
|
||||||
|
messages: 0,
|
||||||
|
reactions: 0,
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
if (v.kind === LIVE_STREAM_CHAT) {
|
||||||
<div className="stream-summary">
|
acc[key].messages++;
|
||||||
<h1>{title}</h1>
|
} else if (v.kind === EventKind.ZapReceipt) {
|
||||||
<p>{summary}</p>
|
acc[key].zaps++;
|
||||||
<div className="flex g8">
|
} else if (v.kind === EventKind.Reaction) {
|
||||||
<StatePill state={status as StreamState} />
|
acc[key].reactions++;
|
||||||
{streamLength > 0 && (
|
} else {
|
||||||
<FormattedMessage
|
console.debug("Uncounted stat", v);
|
||||||
defaultMessage="Stream Duration {duration} mins"
|
}
|
||||||
values={{
|
return acc;
|
||||||
duration: <FormattedNumber value={streamLength / 60} maximumFractionDigits={2} />,
|
}, {} as Record<string, StatSlot>);
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<div className="flex g8">
|
// fill empty time slots
|
||||||
<div className="plain-paper f-1">
|
for (let x = min; x < max; x += windowSize) {
|
||||||
<h3>
|
ret[x.toString()] ??= {
|
||||||
<FormattedMessage defaultMessage="Top Chatters" />
|
time: x,
|
||||||
</h3>
|
zaps: 0,
|
||||||
<div className="flex f-col g8">
|
messages: 0,
|
||||||
{chatSummary.slice(0, 5).map(a => (
|
reactions: 0,
|
||||||
<div className="flex f-space f-center" key={a.pubkey}>
|
};
|
||||||
<Profile pubkey={a.pubkey} />
|
}
|
||||||
<div>
|
return ret;
|
||||||
<FormattedMessage
|
}, [data]);
|
||||||
defaultMessage="{n} messages"
|
|
||||||
values={{
|
return (
|
||||||
n: <FormattedNumber value={a.messages.length} />,
|
<div className="stream-summary">
|
||||||
}}
|
<h1>{title}</h1>
|
||||||
/>
|
<p>{summary}</p>
|
||||||
</div>
|
<div className="flex g8">
|
||||||
</div>
|
<StatePill state={status as StreamState} />
|
||||||
))}
|
{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>
|
<div className="flex f-space">
|
||||||
<div className="plain-paper f-1">
|
<div>
|
||||||
<h3>
|
<FormattedMessage defaultMessage="Messages" />
|
||||||
<FormattedMessage defaultMessage="Top Zappers" />
|
</div>
|
||||||
</h3>
|
<div>{data.messages}</div>
|
||||||
<div className="flex f-col g8">
|
|
||||||
{zapsSummary.slice(0, 5).map(a => (
|
|
||||||
<div className="flex f-space f-center" key={a.pubkey}>
|
|
||||||
<Profile pubkey={a.pubkey} />
|
|
||||||
<div>
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="{n} sats"
|
|
||||||
values={{
|
|
||||||
n: formatSats(a.total),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
<div className="plain-paper f-1">
|
||||||
|
<h3>
|
||||||
|
<FormattedMessage defaultMessage="Top Zappers" />
|
||||||
|
</h3>
|
||||||
|
<div className="flex f-col g8">
|
||||||
|
{zapsSummary.slice(0, 5).map(a => (
|
||||||
|
<div className="flex f-space f-center" key={a.pubkey}>
|
||||||
|
<Profile pubkey={a.pubkey} />
|
||||||
|
<div>
|
||||||
|
<FormattedMessage
|
||||||
|
defaultMessage="{n} sats"
|
||||||
|
values={{
|
||||||
|
n: formatSats(a.total),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user