Merge branch 'main' into feat/custom-emoji-reactions

src/element/live-chat.css

@@ -7,13 +7,17 @@
   height: calc(100vh - 56px - 64px - 36px - 230px);
 }
 
+.live-chat ::-webkit-scrollbar {
+  width: 8px;
+}
+
 @media (min-width: 768px) {
   .profile-info {
     width: calc(100vw - 600px - 16px);
   }
 
   .live-chat {
-    width:  calc(100vw - 600px - 16px);
+    width: calc(100vw - 600px - 16px);
     height: calc(100vh - 56px - 64px - 16px);
   }
 
@@ -22,7 +26,7 @@
   }
 }
 
-@media (min-width: 1020px)  {
+@media (min-width: 1020px) {
   .profile-info {
     width: unset;
     padding: 0;
@@ -36,7 +40,7 @@
   }
 
   .live-chat {
-    width:  320px;
+    width: auto;
   }
 }
 
@@ -74,10 +78,11 @@
   flex-direction: column-reverse;
   overflow-y: auto;
   overflow-x: hidden;
+  padding-right: 8px;
 }
 
-@media (min-width: 1020px){
-  .live-chat > .messages {
+@media (min-width: 1020px) {
+  .live-chat>.messages {
     flex-grow: 1;
   }
 }
@@ -173,13 +178,15 @@
 
 .top-zappers-container {
   display: flex;
-  overflow-y: scroll;
+  overflow-y: hidden;
+  overflow-x: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
+  user-select: none;
 }
 
 .top-zappers-container::-webkit-scrollbar {
-  display: none;
+  height: 8px;
 }
 
 @media (min-width: 1020px) {
@@ -223,7 +230,10 @@
 .zap-container:before {
   content: '';
   position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: -1;
   margin: -1px;
   background: linear-gradient(to bottom right, #FF902B, #F83838);
@@ -248,9 +258,11 @@
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
@@ -382,6 +394,7 @@
   color: #FFFFFF80;
   cursor: pointer;
 }
+
 .write-emoji-button:hover {
   color: white;
 }

src/element/live-chat.tsx

@@ -68,7 +68,7 @@ export function LiveChat({
   height?: number;
 }) {
   const host = getHost(ev);
-  const feed = useLiveChatFeed(link, host);
+  const feed = useLiveChatFeed(link, goal ? [goal.id] : undefined);
   const login = useLogin();
   useEffect(() => {
     const pubkeys = [
@@ -90,7 +90,7 @@ export function LiveChat({
     .filter((z) => z && z.valid);
 
   const goalZaps = feed.zaps
-    .filter((ev) => (goal ? ev.created_at > goal.created_at : false))
+    .filter((ev) => (goal ? ev.created_at > goal.created_at && ev.tags.some(t => t[0] === "e" && t[1] === goal.id) : false))
     .map((ev) => parseZap(ev, System.ProfileLoader.Cache))
     .filter((z) => z && z.valid);
 
@@ -133,11 +133,8 @@ export function LiveChat({
           <div className="top-zappers-container">
             <TopZappers zaps={zaps} />
           </div>
-          {goal ? (
-            <Goal link={link} ev={goal} zaps={goalZaps} />
-          ) : (
-            login?.pubkey === streamer && <NewGoalDialog link={link} />
-          )}
+          {goal && <Goal link={link} ev={goal} zaps={goalZaps} />}
+          {login?.pubkey === streamer && <NewGoalDialog link={link} />}
         </div>
       )}
       <div className="messages">

src/element/live-video-player.tsx

@@ -41,6 +41,9 @@ export function LiveVideoPlayer(
           hls.on(Hls.Events.MANIFEST_PARSED, () => {
             setStatus(VideoStatus.Online);
           });
+          hls.on(Hls.Events.LEVEL_SWITCHING, (e, l) => {
+            console.debug("HLS Level Switch", l);
+          });
           return () => hls.destroy();
         } catch (e) {
           console.error(e);

src/hooks/live-chat.tsx

@@ -5,24 +5,26 @@ import {
   FlatNoteStore,
 } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
+import { unixNow } from "@snort/shared";
 import { System } from "index";
 import { useMemo } from "react";
 import { LIVE_STREAM_CHAT } from "const";
 
-export function useLiveChatFeed(link: NostrLink, host?: string) {
+export function useLiveChatFeed(link: NostrLink, eZaps?: Array<string>) {
   const sub = useMemo(() => {
     const rb = new RequestBuilder(`live:${link.id}:${link.author}`);
     rb.withOptions({
       leaveOpen: true,
     });
+    const zapsSince = unixNow() - (60 * 60 * 24 * 7); // 7-days of zaps
     const aTag = `${link.kind}:${link.author}:${link.id}`;
     rb.withFilter().kinds([LIVE_STREAM_CHAT]).tag("a", [aTag]).limit(100);
-    rb.withFilter().kinds([EventKind.ZapReceipt]).tag("a", [aTag]);
-    if (host) {
-      rb.withFilter().kinds([EventKind.ZapReceipt]).tag("p", [host]);
+    rb.withFilter().kinds([EventKind.ZapReceipt]).tag("a", [aTag]).since(zapsSince);
+    if (eZaps) {
+      rb.withFilter().kinds([EventKind.ZapReceipt]).tag("e", eZaps);
     }
     return rb;
-  }, [link, host]);
+  }, [link, eZaps]);
 
   const feed = useRequestBuilder<FlatNoteStore>(System, FlatNoteStore, sub);
 

src/index.css

@@ -73,11 +73,21 @@ a {
   color: inherit;
   background: linear-gradient(black, black) padding-box,
     linear-gradient(94.73deg, #2BD9FF 0%, #F838D9 100%) border-box;
+  transition: 0.3s;
+}
+
+.btn-border:hover {
+  background: linear-gradient(black, black) padding-box,
+    linear-gradient(94.73deg, #14b4d8 0%, #ba179f 100%) border-box;
 }
 
 .btn-primary {
-  background: linear-gradient(94.73deg, #2BD9FF 0%, #8C8DED 47.4%, #F838D9 100%);
-  color: white;
+  background: #FFF;
+  color: #0a0a0a;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
 }
 
 .btn-warning {
@@ -92,7 +102,11 @@ a {
   gap: 8px;
 }
 
-input[type="text"], textarea, input[type="datetime-local"], input[type="password"], input[type="number"] {
+input[type="text"],
+textarea,
+input[type="datetime-local"],
+input[type="password"],
+input[type="number"] {
   font-family: inherit;
   border: unset;
   background-color: unset;

src/pages/root.css

@@ -2,25 +2,25 @@
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
-    padding: 40px;
+    padding: 40px 0;
 }
 
 @media (max-width: 1020px) {
-  .video-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 12px;
-      padding: 16px;
-  }
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        padding: 16px;
+    }
 }
 
 @media (max-width: 720px) {
-  .video-grid {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 12px;
-      padding: 16px;
-  }
+    .video-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 32px;
+        padding: 16px;
+    }
 }
 
 @media(min-width: 1600px) {
@@ -36,11 +36,41 @@
 }
 
 .homepage {
-  width: 100%;
-  grid-area: main-content;
+    width: 100%;
+    grid-area: main-content;
 }
 
-.homepage h2 {
-    background: #171717;
-    padding: 40px;
+.divider {
+    display: flex;
+}
+
+.divider:after {
+    content: "";
+    flex: 1;
+}
+
+.line {
+    align-items: center;
+    margin: 1em 0;
+}
+
+.line:after {
+    height: 1px;
+    margin: 0 1em;
+}
+
+.one-line:before,
+.one-line:after {
+    background-color: #171717;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    background: #111;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #333;
+    border-radius: 100px;
+    min-height: 24px;
 }

src/pages/root.tsx

@@ -64,7 +64,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
       </div>
       {planned.length > 0 && (
         <>
-          <h2>Planned</h2>
+          <h2 className="divider line one-line">Planned</h2>
           <div className="video-grid">
             {planned.map((e) => (
               <VideoTile ev={e} key={e.id} />
@@ -74,7 +74,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
       )}
       {ended.length > 0 && (
         <>
-          <h2>Ended</h2>
+          <h2 className="divider line one-line">Ended</h2>
           <div className="video-grid">
             {ended.map((e) => (
               <VideoTile ev={e} key={e.id} />

src/pages/stream-page.css

@@ -7,6 +7,7 @@
   max-height: 230px;
   width: 100vw;
   max-width: 100vw;
+  background: #000;
 }
 
 .live-chat {