diff --git a/src/element/live-chat.css b/src/element/live-chat.css
index ab4d52d..2186cf1 100644
--- a/src/element/live-chat.css
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/src/element/live-chat.tsx b/src/element/live-chat.tsx
index 4edefc0..17a19e0 100644
--- a/src/element/live-chat.tsx
+++ b/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({
- {goal ? (
-
- ) : (
- login?.pubkey === streamer &&
- )}
+ {goal && }
+ {login?.pubkey === streamer && }
)}
diff --git a/src/element/live-video-player.tsx b/src/element/live-video-player.tsx
index f499902..cf765ac 100644
--- a/src/element/live-video-player.tsx
+++ b/src/element/live-video-player.tsx
@@ -8,7 +8,7 @@ export enum VideoStatus {
}
export interface VideoPlayerProps {
- stream?: string, status?: string, poster?: string
+ stream?: string, status?: string, poster?: string
}
export function LiveVideoPlayer(
@@ -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);
diff --git a/src/hooks/live-chat.tsx b/src/hooks/live-chat.tsx
index dca8ab2..96ab990 100644
--- a/src/hooks/live-chat.tsx
+++ b/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) {
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(System, FlatNoteStore, sub);
diff --git a/src/index.css b/src/index.css
index fa80c10..24e6a3e 100644
--- a/src/index.css
+++ b/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;
@@ -150,4 +164,4 @@ div.paper {
.border-warning {
border: 1px solid #FF563F;
-}
+}
\ No newline at end of file
diff --git a/src/pages/root.css b/src/pages/root.css
index c96e21a..e2a590a 100644
--- a/src/pages/root.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index 767afea..8b82202 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -64,7 +64,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
{planned.length > 0 && (
<>
- Planned
+ Planned
{planned.map((e) => (
@@ -74,7 +74,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
)}
{ended.length > 0 && (
<>
-
Ended
+
Ended
{ended.map((e) => (
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index bec3aa3..a89853a 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -7,6 +7,7 @@
max-height: 230px;
width: 100vw;
max-width: 100vw;
+ background: #000;
}
.live-chat {