{(options?.showHeader ?? true) && (
& { stream?: string }) {
+export function LiveVideoPlayer(
+ props: HTMLProps & { stream?: string }
+) {
const video = useRef(null);
const streamCached = useMemo(() => props.stream, [props.stream]);
const [status, setStatus] = useState();
useEffect(() => {
- if (streamCached && video.current && !video.current.src && Hls.isSupported()) {
+ if (
+ streamCached &&
+ video.current &&
+ !video.current.src &&
+ Hls.isSupported()
+ ) {
try {
const hls = new Hls();
hls.loadSource(streamCached);
@@ -20,15 +27,15 @@ export function LiveVideoPlayer(props: HTMLProps & { stream?:
hls.on(Hls.Events.ERROR, (event, data) => {
console.debug(event, data);
const errorType = data.type;
- if (errorType === Hls.ErrorTypes.NETWORK_ERROR) {
+ if (errorType === Hls.ErrorTypes.NETWORK_ERROR && data.fatal) {
hls.stopLoad();
hls.detachMedia();
setStatus(VideoStatus.Offline);
}
- })
+ });
hls.on(Hls.Events.MANIFEST_PARSED, () => {
setStatus(VideoStatus.Online);
- })
+ });
return () => hls.destroy();
} catch (e) {
console.error(e);
@@ -37,9 +44,11 @@ export function LiveVideoPlayer(props: HTMLProps & { stream?:
}
}, [video, streamCached]);
return (
-
- {status === StreamState.Planned &&
Stream Chat
)}
@@ -157,7 +159,7 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
return (
-
diff --git a/src/element/live-video-player.tsx b/src/element/live-video-player.tsx
index c3964d7..1354f44 100644
--- a/src/element/live-video-player.tsx
+++ b/src/element/live-video-player.tsx
@@ -3,16 +3,23 @@ import { HTMLProps, useEffect, useMemo, useRef, useState } from "react";
export enum VideoStatus {
Online = "online",
- Offline = "offline"
+ Offline = "offline",
}
-export function LiveVideoPlayer(props: HTMLProps
-
+
);
}
diff --git a/src/element/modal.css b/src/element/modal.css
deleted file mode 100644
index b8181bf..0000000
--- a/src/element/modal.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.modal {
- width: 100vw;
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.8);
- display: flex;
- justify-content: center;
- z-index: 42;
- overflow-y: auto;
-}
-
-.modal-body {
- display: flex;
- width: 430px;
- padding: 32px;
- margin-top: auto;
- margin-bottom: auto;
- border-radius: 32px;
- background: #171717;
-}
\ No newline at end of file
diff --git a/src/element/modal.tsx b/src/element/modal.tsx
deleted file mode 100644
index 8f7f7ca..0000000
--- a/src/element/modal.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import "./modal.css";
-import { useEffect, MouseEventHandler, ReactNode } from "react";
-
-export interface ModalProps {
- className?: string;
- onClose?: MouseEventHandler;
- children: ReactNode;
-}
-
-export default function Modal(props: ModalProps) {
- const onClose = props.onClose || (() => undefined);
- const className = props.className || "";
-
- useEffect(() => {
- document.body.classList.add("scroll-lock");
- return () => document.body.classList.remove("scroll-lock");
- }, []);
-
- return (
- {status}
+ <>
+
+
- {status}
+
-
- );
-}
diff --git a/src/element/new-stream.css b/src/element/new-stream.css
index e05814b..0c1ef08 100644
--- a/src/element/new-stream.css
+++ b/src/element/new-stream.css
@@ -2,7 +2,6 @@
display: flex;
flex-direction: column;
gap: 24px;
- width: inherit;
}
.new-stream h3 {
@@ -49,4 +48,4 @@
.new-stream .pill.active {
color: inherit;
background: #353535;
-}
\ No newline at end of file
+}
diff --git a/src/element/new-stream.tsx b/src/element/new-stream.tsx
index 68f6fd8..f9c8363 100644
--- a/src/element/new-stream.tsx
+++ b/src/element/new-stream.tsx
@@ -1,11 +1,13 @@
import "./new-stream.css";
+import * as Dialog from "@radix-ui/react-dialog";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
import { EventPublisher, NostrEvent } from "@snort/system";
import { unixNow } from "@snort/shared";
import AsyncButton from "./async-button";
import { StreamState, System } from "index";
+import { Icon } from "element/icon";
import { findTag } from "utils";
export function NewStream({
@@ -13,17 +15,19 @@ export function NewStream({
onFinish,
}: {
ev?: NostrEvent;
- onFinish: (ev: NostrEvent) => void;
+ onFinish?: (ev: NostrEvent) => void;
}) {
const [title, setTitle] = useState(findTag(ev, "title") ?? "");
const [summary, setSummary] = useState(findTag(ev, "summary") ?? "");
const [image, setImage] = useState(findTag(ev, "image") ?? "");
const [stream, setStream] = useState(findTag(ev, "streaming") ?? "");
- const [status, setStatus] = useState(findTag(ev, "status") ?? StreamState.Live);
+ const [status, setStatus] = useState(
+ findTag(ev, "status") ?? StreamState.Live
+ );
const [start, setStart] = useState(findTag(ev, "starts"));
const [isValid, setIsValid] = useState(false);
- function validate() {
+ const validate = useCallback(() => {
if (title.length < 2) {
return false;
}
@@ -34,11 +38,11 @@ export function NewStream({
return false;
}
return true;
- }
+ }, [title, image, stream]);
useEffect(() => {
setIsValid(validate());
- }, [title, summary, image, stream]);
+ }, [validate, title, summary, image, stream]);
async function publishStream() {
const pub = await EventPublisher.nip7();
@@ -48,8 +52,7 @@ export function NewStream({
const dTag = findTag(ev, "d") ?? now.toString();
const starts = start ?? now.toString();
const ends = findTag(ev, "ends") ?? now.toString();
- eb
- .kind(30_311)
+ eb.kind(30_311)
.tag(["d", dTag])
.tag(["title", title])
.tag(["summary", summary])
@@ -64,16 +67,16 @@ export function NewStream({
});
console.debug(evNew);
System.BroadcastEvent(evNew);
- onFinish(evNew);
+ onFinish && onFinish(evNew);
}
}
function toDateTimeString(n: number) {
- return new Date(n * 1000).toISOString().substring(0, -1)
+ return new Date(n * 1000).toISOString().substring(0, -1);
}
function fromDateTimeString(s: string) {
- return Math.floor(new Date(s).getTime() / 1000)
+ return Math.floor(new Date(s).getTime() / 1000);
}
return (
@@ -127,17 +130,32 @@ export function NewStream({
e.stopPropagation()}>
- {props.children}
-
- Status
- {[StreamState.Live, StreamState.Planned, StreamState.Ended].map(v => setStatus(v)}>
- {v}
- )}
+ {[StreamState.Live, StreamState.Planned, StreamState.Ended].map(
+ (v) => (
+ setStatus(v)}
+ >
+ {v}
+
+ )
+ )}
-
);
}
+
+interface NewStreamDialogProps {
+ text?: string;
+ btnClassName?: string;
+ ev?: NostrEvent;
+ onFinish?: (e: NostrEvent) => void;
+}
+
+export function NewStreamDialog({
+ text,
+ ev,
+ onFinish,
+ btnClassName = "btn",
+}: NewStreamDialogProps) {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/element/profile.tsx b/src/element/profile.tsx
index 2ccaf18..8fc9204 100644
--- a/src/element/profile.tsx
+++ b/src/element/profile.tsx
@@ -24,16 +24,24 @@ export function getName(pk: string, user?: UserMetadata) {
export function Profile({
pubkey,
+ avatarClassname,
options,
}: {
pubkey: string;
+ avatarClassname?: string;
options?: ProfileOptions;
}) {
const profile = useUserProfile(System, pubkey);
return (
();
- const [amount, setAmount] = useState(satsAmounts[0]);
- const [comment, setComment] = useState("");
- const [invoice, setInvoice] = useState("");
+function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
+ const UsdRate = 30_000;
- const name = targetName ?? svc?.name;
- async function loadService() {
- const s = new LNURL(lnurl);
- await s.load();
- setSvc(s);
+ const satsAmounts = [
+ 100, 1_000, 5_000, 10_000, 50_000, 100_000, 500_000, 1_000_000,
+ ];
+ const usdAmounts = [0.05, 0.5, 2, 5, 10, 50, 100, 200];
+ const [isFiat, setIsFiat] = useState(false);
+ const [svc, setSvc] = useState();
+ const [amount, setAmount] = useState(satsAmounts[0]);
+ const [comment, setComment] = useState("");
+ const [invoice, setInvoice] = useState("");
+
+ const name = targetName ?? svc?.name;
+ async function loadService() {
+ const s = new LNURL(lnurl);
+ await s.load();
+ setSvc(s);
+ }
+
+ useEffect(() => {
+ if (!svc) {
+ loadService().catch(console.warn);
}
+ }, [lnurl]);
- useEffect(() => {
- if (!svc) {
- loadService().catch(console.warn);
- }
- }, [lnurl]);
-
- async function send() {
- if (!svc) return;
- const pub = await EventPublisher.nip7();
- if (!pub) return;
-
- const amountInSats = isFiat ? Math.floor((amount / UsdRate) * 1e8) : amount;
- let zap: NostrEvent | undefined;
- if (ev) {
- zap = await pub.zap(amountInSats * 1000, ev.pubkey, Relays, undefined, comment, eb => {
- return eb.tag(["a", `${ev.kind}:${ev.pubkey}:${findTag(ev, "d")}`]);
- });
- }
- const invoice = await svc.getInvoice(amountInSats, comment, zap);
- if (!invoice.pr) return;
-
- if (window.webln) {
- await window.webln.enable();
- await window.webln.sendPayment(invoice.pr);
- onFinish();
- } else {
- setInvoice(invoice.pr);
+ async function send() {
+ if (!svc) return;
+ const pub = await EventPublisher.nip7();
+ if (!pub) return;
+
+ const amountInSats = isFiat ? Math.floor((amount / UsdRate) * 1e8) : amount;
+ let zap: NostrEvent | undefined;
+ if (ev) {
+ zap = await pub.zap(
+ amountInSats * 1000,
+ ev.pubkey,
+ Relays,
+ undefined,
+ comment,
+ (eb) => {
+ return eb.tag(["a", `${ev.kind}:${ev.pubkey}:${findTag(ev, "d")}`]);
}
+ );
}
+ const invoice = await svc.getInvoice(amountInSats, comment, zap);
+ if (!invoice.pr) return;
- function input() {
- if (invoice) return;
- return <>
-
Start Time
-
- setStart(fromDateTimeString(e.target.value).toString())} />
+ {status === StreamState.Planned && (
+
}
+ )}
+
- Start Time
+
+
+ setStart(fromDateTimeString(e.target.value).toString())
+ }
+ />
+
- {(options?.showAvatar ?? true) && 
}
+ {(options?.showAvatar ?? true) && (
+
+ )}
{(options?.showName ?? true) &&
(options?.overrideName ?? getName(pubkey, profile))}
diff --git a/src/element/send-zap.css b/src/element/send-zap.css
index 6a5b46f..96ebb75 100644
--- a/src/element/send-zap.css
+++ b/src/element/send-zap.css
@@ -1,5 +1,4 @@
.send-zap {
- width: inherit;
display: flex;
gap: 24px;
flex-direction: column;
@@ -58,4 +57,4 @@
.send-zap .qr {
align-self: center;
-}
\ No newline at end of file
+}
diff --git a/src/element/send-zap.tsx b/src/element/send-zap.tsx
index 343f890..84257f0 100644
--- a/src/element/send-zap.tsx
+++ b/src/element/send-zap.tsx
@@ -1,4 +1,5 @@
import "./send-zap.css";
+import * as Dialog from "@radix-ui/react-dialog";
import { useEffect, useState } from "react";
import { LNURL } from "@snort/shared";
import { NostrEvent, EventPublisher } from "@snort/system";
@@ -9,107 +10,171 @@ import { findTag } from "utils";
import { Relays } from "index";
import QrCode from "./qr-code";
-export function SendZaps({ lnurl, ev, targetName, onFinish }: { lnurl: string, ev?: NostrEvent, targetName?: string, onFinish: () => void }) {
- const UsdRate = 30_000;
+interface SendZapsProps {
+ lnurl: string;
+ ev?: NostrEvent;
+ targetName?: string;
+ onFinish: () => void;
+}
- const satsAmounts = [
- 100, 1_000, 5_000, 10_000, 50_000, 100_000, 500_000, 1_000_000
- ];
- const usdAmounts = [
- 0.05, 0.50, 2, 5, 10, 50, 100, 200
- ]
- const [isFiat, setIsFiat] = useState(false);
- const [svc, setSvc] = useState
- { setIsFiat(false); setAmount(satsAmounts[0]) }}>
- SATS
-
- { setIsFiat(true); setAmount(usdAmounts[0]) }}>
- USD
-
-
-
- Zap amount in {isFiat ? "USD" : "sats"}
-
-
- {(isFiat ? usdAmounts : satsAmounts).map(a =>
- setAmount(a)}>
- {isFiat ? `$${a.toLocaleString()}` : formatSats(a)}
- )}
-
-
-
- Your comment for {name}
-
-
-