feat: top streamer zaps / mobile slide up modal

src/element/category/category-tile.tsx

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

src/element/category/top-streamers.tsx

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

src/element/category/zaps.tsx

@@ -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">

src/element/chat/live-chat.tsx

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

src/element/modal.tsx

@@ -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();

src/element/send-zap.tsx

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

src/element/video-tile.tsx

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

src/hooks/category-zaps.ts

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

src/lang.json

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

src/pages/category.tsx

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

src/pages/root.tsx

@@ -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} />
           ))}

src/pages/video.tsx

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

src/translations/en.json

@@ -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",