Kieran/zap.stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: top streamer zaps / mobile slide up modal

Browse Source
This commit is contained in:
kieran 2024-05-22 16:20:57 +01:00
parent fb6cb168d0
commit e237f88d40
No known key found for this signature in database
GPG Key ID: DE71CEB3925BE941
13 changed files with 110 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/element/category/category-tile.tsx
View File

@ -20,13 +20,13 @@ export function CategoryTile({
return (
<div className="flex flex-col gap-2">
<div className="flex gap-8">
{game?.cover && (
<img src={game?.cover} className="max-lg:w-full sm:h-full lg:h-[200px] xl:h-[250px] aspect-[3/4]" />
)}
{!game?.cover && game?.className && (
<div className={classNames("w-full aspect-[3/4] xl:h-[250px]", game.className)} />
)}
<div className="flex gap-8 max-lg:flex-col">
<div className="max-lg:h-[140px] lg:h-[200px] xl:h-[250px]">
{game?.cover && <img src={game?.cover} className="object-fit aspect-[3/4] h-full rounded-xl" />}
{!game?.cover && game?.className && (
<div className={classNames("aspect-[3/4] h-full rounded-xl", game.className)} />
)}
</div>
{showDetail && (
<div className="flex flex-col gap-4">
<h1>{game?.name}</h1>

49
src/element/category/top-streamers.tsx Normal file
View File

@ -0,0 +1,49 @@
import { useCategoryZaps } from "@/hooks/category-zaps";
import { formatSatsCompact } from "@/number";
import { getName } from "../profile";
import { Avatar } from "../avatar";
import { useUserProfile } from "@snort/system-react";
import { Icon } from "../icon";
import { FormattedMessage } from "react-intl";
import { profileLink } from "@/utils";
import { Link } from "react-router-dom";
export function CategoryTopZapsStreamer({ gameId }: { gameId: string }) {
const zaps = useCategoryZaps(gameId);
return (
<div className="flex flex-col gap-6">
<div className="flex gap-2 items-center">
<Icon name="zap-filled" className="text-zap" size={24} />
<div className="text-neutral-500 font-medium">
<FormattedMessage defaultMessage="Most Zapped Streamers" />
</div>
</div>
<div className="w-[calc(100dvw-2rem)] overflow-x-scroll scrollbar-hidden min-w-0">
<div className="flex gap-4">
{Object.entries(zaps.topPubkeys)
.sort(([, a], [, b]) => (a > b ? -1 : 1))
.slice(0, 4)
.map(([pubkey, amount]) => (
<TopStreamer pubkey={pubkey} amount={amount} key={pubkey} />
))}
</div>
</div>
</div>
);
}
function TopStreamer({ pubkey, amount }: { pubkey: string; amount: number }) {
const profile = useUserProfile(pubkey);
return (
<div key={pubkey} className="flex gap-2">
<Link to={profileLink(profile, pubkey)}>
<Avatar pubkey={pubkey} user={profile} size={56} />
</Link>
<div className="flex flex-col">
<div className="text-zap text-xl font-medium">{formatSatsCompact(amount)}</div>
<div className="whitespace-nowrap">{getName(pubkey, profile)}</div>
</div>
</div>
);
}

2
src/element/category/zaps.tsx
View File

@ -6,7 +6,7 @@ import { formatSatsCompact } from "@/number";
export function CategoryZaps({ gameId }: { gameId: string }) {
const zaps = useCategoryZaps(gameId);
const total = zaps.reduce((acc, v) => (acc += v.amount), 0);
const total = zaps.parsed.reduce((acc, v) => (acc += v.amount), 0);
return (
<Pill className="flex gap-2 items-center">

2
src/element/chat/live-chat.tsx
View File

@ -159,7 +159,7 @@ export function LiveChat({
return { ...c };
});
layoutContext.update(c => {
c.showHeader = !c.showHeader;
c.showHeader = !streamContext.showDetails;
return { ...c };
});
}}>

42
src/element/modal.tsx
View File

@ -1,5 +1,5 @@
import classNames from "classnames";
import React, { ReactNode, useEffect } from "react";
import React, { ReactNode, useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { IconButton } from "./buttons";
@ -11,36 +11,9 @@ export interface ModalProps {
onClick?: (e: React.MouseEvent) => void;
children: ReactNode;
showClose?: boolean;
ready?: boolean;
}
let scrollbarWidth: number | null = null;
const getScrollbarWidth = () => {
if (scrollbarWidth !== null) {
return scrollbarWidth;
}
const outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = "scroll";
const inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
outer.parentNode?.removeChild(outer);
scrollbarWidth = widthNoScroll - widthWithScroll;
return scrollbarWidth;
};
export default function Modal(props: ModalProps) {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape" && props.onClose) {
@ -50,13 +23,10 @@ export default function Modal(props: ModalProps) {
useEffect(() => {
document.body.classList.add("scroll-lock");
document.body.style.paddingRight = `${getScrollbarWidth()}px`;
document.addEventListener("keydown", handleKeyDown);
return () => {
document.body.classList.remove("scroll-lock");
document.body.style.paddingRight = "";
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
@ -76,7 +46,13 @@ export default function Modal(props: ModalProps) {
e.stopPropagation();
}}>
<div
className={props.bodyClassName ?? "relative bg-layer-1 p-8 rounded-3xl my-auto lg:w-[500px] max-lg:w-full"}
className={
props.bodyClassName ??
classNames(
"relative bg-layer-1 p-8 transition max-xl:translate-y-[50vh] max-xl:rounded-t-3xl xl:rounded-3xl max-xl:mt-auto xl:my-auto lg:w-[500px] max-lg:w-full",
{ "max-xl:translate-y-0": props.ready ?? true },
)
}
onMouseDown={e => e.stopPropagation()}
onClick={e => {
e.stopPropagation();

19
src/element/send-zap.tsx
View File

@ -35,10 +35,11 @@ export interface SendZapsProps {
eTag?: string;
targetName?: string;
onFinish: () => void;
onTargetReady?: () => void;
button?: ReactNode;
}
export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish }: SendZapsProps) {
export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish, onTargetReady }: SendZapsProps) {
const satsAmounts = [
21, 69, 121, 420, 1_000, 2_100, 4_200, 10_000, 21_000, 42_000, 69_000, 100_000, 210_000, 500_000, 1_000_000,
];
@ -63,9 +64,14 @@ export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish }: Se
useEffect(() => {
if (!svc) {
if (typeof lnurl === "string") {
loadService(lnurl).catch(console.warn);
loadService(lnurl)
.then(() => {
onTargetReady?.();
})
.catch(console.warn);
} else {
setSvc(lnurl);
onTargetReady?.();
}
}
}, [lnurl]);
@ -207,6 +213,7 @@ export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish }: Se
export function SendZapsDialog(props: Omit<SendZapsProps, "onFinish">) {
const [open, setOpen] = useState(false);
const [ready, setReady] = useState(false);
return (
<>
{props.button ? (
@ -218,8 +225,8 @@ export function SendZapsDialog(props: Omit<SendZapsProps, "onFinish">) {
</PrimaryButton>
)}
{open && (
<Modal id="send-zaps" onClose={() => setOpen(false)}>
<SendZaps {...props} onFinish={() => setOpen(false)} />
<Modal id="send-zaps" onClose={() => setOpen(false)} ready={ready}>
<SendZaps {...props} onFinish={() => setOpen(false)} onTargetReady={() => setReady(true)} />
</Modal>
)}
</>
@ -230,19 +237,21 @@ export function ZapEvent({ ev, children }: { children: ReactNode; ev: TaggedNost
const host = getHost(ev);
const profile = useUserProfile(host);
const [open, setOpen] = useState(false);
const [ready, setReady] = useState(false);
const target = profile?.lud16 ?? profile?.lud06;
return (
<>
<div onClick={() => setOpen(true)}>{children}</div>
{open && (
<Modal id="send-zaps" onClose={() => setOpen(false)}>
<Modal id="send-zaps" onClose={() => setOpen(false)} ready={ready}>
<SendZaps
lnurl={target ?? ""}
eTag={ev.id}
pubkey={host}
targetName={getName(host, profile)}
onFinish={() => setOpen(false)}
onTargetReady={() => setReady(true)}
/>
</Modal>
)}

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

@ -61,7 +61,7 @@ export function VideoTile({
{hasImg ? (
<img
loading="lazy"
className="w-full h-inherit object-fit"
className="w-full h-inherit object-cover"
src={proxy(image ?? recording ?? "")}
onError={() => {
setHasImage(false);

16
src/hooks/category-zaps.ts
View File

@ -18,7 +18,21 @@ export function useCategoryZaps(gameId: string) {
const zapEvents = useRequestBuilder(rbZaps);
const zaps = useMemo(() => {
return zapEvents.map(a => parseZap(a));
const parsed = zapEvents.map(a => parseZap(a));
return {
parsed: parsed,
all: zapEvents,
topPubkeys: parsed.reduce(
(acc, v) => {
if (v.receiver) {
acc[v.receiver] ??= 0;
acc[v.receiver] += v.amount;
}
return acc;
},
{} as Record<string, number>,
),
};
}, [zapEvents]);
return zaps;

3
src/lang.json
View File

@ -706,6 +706,9 @@
"kp0NPF": {
"defaultMessage": "Planned"
},
"lXbG97": {
"defaultMessage": "Most Zapped Streamers"
},
"lZpRMR": {
"defaultMessage": "Check here if this stream contains nudity or pornographic content."
},

20
src/pages/category.tsx
View File

@ -1,6 +1,6 @@
import CategoryLink from "@/element/category/category-link";
import { CategoryTile } from "@/element/category/category-tile";
import { CategoryZaps } from "@/element/category/zaps";
import { CategoryTopZapsStreamer } from "@/element/category/top-streamers";
import VideoGridSorted from "@/element/video-grid-sorted";
import { EventKind, RequestBuilder } from "@snort/system";
import { useRequestBuilder } from "@snort/system-react";
@ -82,25 +82,17 @@ export default function Category() {
const results = useRequestBuilder(sub);
return (
<div className="px-2 p-4">
<div className="px-2 min-w-0">
<div className="flex gap-4 overflow-x-scroll scrollbar-hidden">
<div className="px-2 py-4">
<div className="min-w-0 w-[calc(100dvw-2rem)] overflow-x-scroll scrollbar-hidden">
<div className="flex gap-4">
{AllCategories.map(a => (
<CategoryLink key={a.id} id={a.id} name={a.name} icon={a.icon} />
))}
</div>
</div>
{id && (
<div className="flex gap-4 py-8">
<CategoryTile
gameId={id}
showDetail={true}
extraDetail={
<div className="flex">
<CategoryZaps gameId={id} />
</div>
}
/>
<div className="py-8">
<CategoryTile gameId={id} showDetail={true} extraDetail={<CategoryTopZapsStreamer gameId={id} />} />
</div>
)}
<VideoGridSorted evs={results} showAll={true} />

4
src/pages/root.tsx
View File

@ -8,8 +8,8 @@ export function RootPage() {
return (
<div className="flex flex-col gap-6 p-4">
<div className="min-w-0 w-[calc(100dvw-2rem)]">
<div className="flex gap-4 overflow-x-scroll scrollbar-hidden">
<div className="min-w-0 w-[calc(100dvw-2rem)] overflow-x-scroll scrollbar-hidden">
<div className="flex gap-4 ">
{AllCategories.filter(a => a.priority === 0).map(a => (
<CategoryLink key={a.id} name={a.name} id={a.id} icon={a.icon} />
))}

2
src/pages/video.tsx
View File

@ -34,7 +34,7 @@ export function VideoPage({ link, evPreload }: { link: NostrLink; evPreload?: Ta
const ev = useCurrentStreamFeed(link, true, evPreload);
const host = getHost(ev);
const [widePlayer, setWidePlayer] = useState(localStorage.getItem("wide-player") === "true");
const { title, summary, image, contentWarning, recording } = extractStreamInfo(ev);
const { title, summary, image, recording } = extractStreamInfo(ev);
const profile = useUserProfile(host);
const { proxy } = useImgProxy();
const zapTarget = profile?.lud16 ?? profile?.lud06;

1
src/translations/en.json
View File

@ -232,6 +232,7 @@
"kc5EOy": "Username is too long",
"khJ51Q": "Stream Earnings",
"kp0NPF": "Planned",
"lXbG97": "Most Zapped Streamers",
"lZpRMR": "Check here if this stream contains nudity or pornographic content.",
"ljmS5P": "Endpoint",
"miQKuZ": "Stream Time",