forked from Kieran/zap.stream
Compare commits
50 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
a3d5520cf7 | ||
|
19f6fc8bb4 | ||
|
3f75705d28 | ||
|
fb86399b6f | ||
|
9f8c14c568 | ||
|
e9d3a7d05e | ||
|
713f4c3d5e | ||
|
391e549421 | ||
|
699f825270 | ||
|
8ee39b137b | ||
|
59f4fa1b81 | ||
|
f780f5212c | ||
|
f17d97eca9 | ||
|
baa20a6fd0 | ||
4309df393c | |||
|
9d3f5fc235 | ||
|
9f5b17ac3c | ||
|
bda0d36f9a | ||
|
ddbe0e2a92 | ||
|
8bc4c1e2ce | ||
|
aa66e678d1 | ||
|
b0bf485f0a | ||
|
954a875c10 | ||
|
803d0910af | ||
9fd8b65bdf | |||
2afda47b0c | |||
602b4c5d0d | |||
ec2ef2142b | |||
c4aaadd48a | |||
1444749fbb | |||
93d0ead54e | |||
|
efb8df5bcf | ||
|
b241738f67 | ||
|
64cf924131 | ||
|
d3917fc418 | ||
|
afd8313ea2 | ||
d9cf7e4236 | |||
d7a17ae094 | |||
|
80e5b67495 | ||
|
c28f927cb4 | ||
|
018022689e | ||
|
4ecba2f0d7 | ||
31adf40f71 | |||
d29741e3f2 | |||
|
d3b18850ad | ||
|
28e8b5fffa | ||
|
c45f497d44 | ||
|
1116cef30f | ||
|
4eb30813ed | ||
|
becae9cfb4 |
1
.prettierrc.json
Normal file
1
.prettierrc.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
@ -3,11 +3,17 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.0.4",
|
||||
"@react-hook/resize-observer": "^1.2.6",
|
||||
"@snort/system-react": "^1.0.8",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^13.0.0",
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
"@types/webscopeio__react-textarea-autocomplete": "^4.7.2",
|
||||
"@webscopeio/react-textarea-autocomplete": "^4.9.2",
|
||||
"hls.js": "^1.4.6",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.4",
|
||||
"qr-code-styling": "^1.6.0-rc.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
@ -43,7 +49,9 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
||||
"@types/lodash": "^4.14.195",
|
||||
"@webbtc/webln-types": "^1.0.12",
|
||||
"prettier": "^2.8.8",
|
||||
"typescript": "^5.1.3"
|
||||
}
|
||||
}
|
||||
|
17
src/element/avatar.tsx
Normal file
17
src/element/avatar.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { MetadataCache } from "@snort/system";
|
||||
|
||||
export function Avatar({
|
||||
user,
|
||||
avatarClassname,
|
||||
}: {
|
||||
user: MetadataCache;
|
||||
avatarClassname: string;
|
||||
}) {
|
||||
return (
|
||||
<img
|
||||
className={avatarClassname}
|
||||
alt={user?.name || user?.pubkey}
|
||||
src={user?.picture ?? ""}
|
||||
/>
|
||||
);
|
||||
}
|
6
src/element/emoji.css
Normal file
6
src/element/emoji.css
Normal file
@ -0,0 +1,6 @@
|
||||
.emoji {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
display: inline-block;
|
||||
margin-bottom: -5px;
|
||||
}
|
33
src/element/emoji.tsx
Normal file
33
src/element/emoji.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import "./emoji.css";
|
||||
import { useMemo } from "react";
|
||||
|
||||
export type EmojiProps = {
|
||||
name: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export function Emoji({ name, url }: EmojiProps) {
|
||||
return <img alt={name} src={url} className="emoji" />;
|
||||
}
|
||||
|
||||
export type EmojiTag = ["emoji", string, string];
|
||||
|
||||
export function Emojify({
|
||||
content,
|
||||
emoji,
|
||||
}: {
|
||||
content: string;
|
||||
emoji: EmojiTag[];
|
||||
}) {
|
||||
const emojified = useMemo(() => {
|
||||
return content.split(/:(\w+):/g).map((i) => {
|
||||
const t = emoji.find((t) => t[1] === i);
|
||||
if (t) {
|
||||
return <Emoji name={t[1]} url={t[2]} />;
|
||||
} else {
|
||||
return i;
|
||||
}
|
||||
});
|
||||
}, [content, emoji]);
|
||||
return <>{emojified}</>;
|
||||
}
|
25
src/element/hypertext.tsx
Normal file
25
src/element/hypertext.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { NostrLink } from "./nostr-link";
|
||||
|
||||
interface HyperTextProps {
|
||||
link: string;
|
||||
}
|
||||
|
||||
export function HyperText({ link }: HyperTextProps) {
|
||||
try {
|
||||
const url = new URL(link);
|
||||
if (url.protocol === "nostr:" || url.protocol === "web+nostr:") {
|
||||
return <NostrLink link={link} />;
|
||||
} else {
|
||||
<a href={link} target="_blank" rel="noreferrer">
|
||||
{link}
|
||||
</a>;
|
||||
}
|
||||
} catch {
|
||||
// Ignore the error.
|
||||
}
|
||||
return (
|
||||
<a href={link} target="_blank" rel="noreferrer">
|
||||
{link}
|
||||
</a>
|
||||
);
|
||||
}
|
@ -1,22 +1,59 @@
|
||||
.live-chat {
|
||||
height: calc(100vh - 72px - 96px);
|
||||
grid-area: chat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 16px 8px 24px;
|
||||
border: 1px solid #171717;
|
||||
border-radius: 24px;
|
||||
gap: 16px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
height: calc(100vh - 56px - 64px - 56px - 230px);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.profile-info {
|
||||
width: calc(100vw - 600px - 16px);
|
||||
}
|
||||
|
||||
.live-chat {
|
||||
width: calc(100vw - 600px - 16px);
|
||||
height: calc(100vh - 56px - 64px - 16px);
|
||||
}
|
||||
|
||||
.video-content video {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.profile-info {
|
||||
width: unset;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.live-chat {
|
||||
height: calc(100vh - 72px - 96px);
|
||||
padding: 24px 16px 8px 24px;
|
||||
border: 1px solid #171717;
|
||||
border-radius: 24px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.live-chat {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
.live-chat {
|
||||
height: calc(100vh - 72px - 96px - 120px - 56px);
|
||||
}
|
||||
}
|
||||
|
||||
.live-chat>.header {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 0px 0px 16px;
|
||||
}
|
||||
|
||||
.live-chat>.messages {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column-reverse;
|
||||
@ -24,9 +61,19 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px){
|
||||
.live-chat > .messages {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.live-chat>.write-message {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border, #171717);
|
||||
}
|
||||
|
||||
.live-chat>.write-message>div:nth-child(1) {
|
||||
@ -43,6 +90,10 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.live-chat .message {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.live-chat .message .profile {
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
@ -50,10 +101,18 @@
|
||||
float: left;
|
||||
}
|
||||
|
||||
.live-chat .message .profile {
|
||||
color: #34D2FE;
|
||||
}
|
||||
|
||||
.live-chat .message.streamer .profile {
|
||||
color: #F838D9;
|
||||
}
|
||||
|
||||
.live-chat .message a {
|
||||
color: #F838D9;
|
||||
}
|
||||
|
||||
.live-chat .profile img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -66,7 +125,7 @@
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.live-chat .messages .pill {
|
||||
.live-chat .messages {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -74,4 +133,91 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-zappers h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-family: Outfit;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.top-zappers-container {
|
||||
display: flex;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.top-zappers-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.top-zappers-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border, #171717);
|
||||
}
|
||||
}
|
||||
|
||||
.top-zapper {
|
||||
display: flex;
|
||||
padding: 4px 8px 4px 4px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 49px;
|
||||
border: 1px solid var(--border, #171717);
|
||||
}
|
||||
|
||||
.top-zapper .top-zapper-amount {
|
||||
font-size: 15px;
|
||||
font-family: Outfit;
|
||||
font-weight: 700;
|
||||
line-height: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-zapper .top-zapper-name {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.zap-icon {
|
||||
color: #FFCB44;
|
||||
}
|
||||
|
||||
.zap-container {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
background: black;
|
||||
background-clip: padding-box;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.zap-container:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
z-index: -1;
|
||||
margin: -1px;
|
||||
background: linear-gradient(to bottom right, #FF902B, #F83838);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.zap-container .profile {
|
||||
color: #FFCB44;
|
||||
}
|
||||
|
||||
.zap-container .zap-amount {
|
||||
color: #FFCB44;
|
||||
}
|
||||
|
||||
.zap-content {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
@ -1,36 +1,214 @@
|
||||
import "./live-chat.css";
|
||||
import { EventKind, NostrLink, TaggedRawEvent, EventPublisher, parseZap } from "@snort/system";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
EventKind,
|
||||
NostrLink,
|
||||
TaggedRawEvent,
|
||||
EventPublisher,
|
||||
ParsedZap,
|
||||
parseZap,
|
||||
} from "@snort/system";
|
||||
import {
|
||||
useState,
|
||||
useMemo,
|
||||
useEffect,
|
||||
type KeyboardEvent,
|
||||
type ChangeEvent,
|
||||
} from "react";
|
||||
|
||||
import useEmoji from "hooks/emoji";
|
||||
import { System } from "index";
|
||||
import { useLiveChatFeed } from "hooks/live-chat";
|
||||
import AsyncButton from "./async-button";
|
||||
import { Profile } from "./profile";
|
||||
import { Icon } from "./icon";
|
||||
import { Text } from "./text";
|
||||
import { Textarea } from "./textarea";
|
||||
import Spinner from "./spinner";
|
||||
import { useLogin } from "hooks/login";
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
import { formatSats, formatShort } from "number";
|
||||
import { formatSats } from "number";
|
||||
|
||||
export interface LiveChatOptions {
|
||||
canWrite?: boolean,
|
||||
showHeader?: boolean
|
||||
canWrite?: boolean;
|
||||
showHeader?: boolean;
|
||||
}
|
||||
|
||||
export function LiveChat({ link, options }: { link: NostrLink, options?: LiveChatOptions }) {
|
||||
const [chat, setChat] = useState("");
|
||||
function totalZapped(pubkey: string, zaps: ParsedZap[]) {
|
||||
return zaps
|
||||
.filter((z) => (z.anonZap ? pubkey === "anon" : z.sender === pubkey))
|
||||
.reduce((acc, z) => acc + z.amount, 0);
|
||||
}
|
||||
|
||||
function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
|
||||
const zappers = zaps
|
||||
.map((z) => (z.anonZap ? "anon" : z.sender))
|
||||
.map((p) => p as string);
|
||||
|
||||
const sortedZappers = useMemo(() => {
|
||||
const sorted = [...new Set([...zappers])];
|
||||
sorted.sort((a, b) => totalZapped(b, zaps) - totalZapped(a, zaps));
|
||||
return sorted.slice(0, 3);
|
||||
}, [zaps, zappers]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3>Top zappers</h3>
|
||||
<div className="top-zappers-container">
|
||||
{sortedZappers.map((pk, idx) => {
|
||||
const total = totalZapped(pk, zaps);
|
||||
return (
|
||||
<div className="top-zapper" key={pk}>
|
||||
{pk === "anon" ? (
|
||||
<p className="top-zapper-name">Anon</p>
|
||||
) : (
|
||||
<Profile pubkey={pk} options={{ showName: false }} />
|
||||
)}
|
||||
<Icon name="zap" className="zap-icon" />
|
||||
<p className="top-zapper-amount">{formatSats(total)}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function LiveChat({
|
||||
link,
|
||||
options,
|
||||
height,
|
||||
}: {
|
||||
link: NostrLink;
|
||||
options?: LiveChatOptions;
|
||||
height?: number;
|
||||
}) {
|
||||
const messages = useLiveChatFeed(link);
|
||||
const login = useLogin();
|
||||
const events = messages.data ?? [];
|
||||
const zaps = events
|
||||
.filter((ev) => ev.kind === EventKind.ZapReceipt)
|
||||
.map((ev) => parseZap(ev, System.ProfileLoader.Cache))
|
||||
.filter((z) => z && z.valid);
|
||||
return (
|
||||
<div className="live-chat" style={height ? { height: `${height}px` } : {}}>
|
||||
{(options?.showHeader ?? true) && (
|
||||
<div className="header">Stream Chat</div>
|
||||
)}
|
||||
{zaps.length > 0 && (
|
||||
<div className="top-zappers">
|
||||
<TopZappers zaps={zaps} />
|
||||
</div>
|
||||
)}
|
||||
<div className="messages">
|
||||
{[...(messages.data ?? [])]
|
||||
.sort((a, b) => b.created_at - a.created_at)
|
||||
.map((a) => {
|
||||
switch (a.kind) {
|
||||
case 1311: {
|
||||
return <ChatMessage ev={a} link={link} key={a.id} />;
|
||||
}
|
||||
case EventKind.ZapReceipt: {
|
||||
return <ChatZap ev={a} key={a.id} />;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
{messages.data === undefined && <Spinner />}
|
||||
</div>
|
||||
{(options?.canWrite ?? true) && (
|
||||
<div className="write-message">
|
||||
{login ? (
|
||||
<WriteMessage link={link} />
|
||||
) : (
|
||||
<p>Please login to write messages!</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatMessage({ ev, link }: { ev: TaggedRawEvent; link: NostrLink }) {
|
||||
return (
|
||||
<div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
|
||||
<Profile pubkey={ev.pubkey} />
|
||||
<Text ev={ev} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatZap({ ev }: { ev: TaggedRawEvent }) {
|
||||
const parsed = parseZap(ev, System.ProfileLoader.Cache);
|
||||
useUserProfile(System, parsed.anonZap ? undefined : parsed.sender);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!parsed.valid &&
|
||||
parsed.errors.includes("zap service pubkey doesn't match") &&
|
||||
parsed.sender
|
||||
) {
|
||||
System.ProfileLoader.TrackMetadata(parsed.sender);
|
||||
return () =>
|
||||
System.ProfileLoader.UntrackMetadata(parsed.sender as string);
|
||||
}
|
||||
}, [parsed]);
|
||||
|
||||
if (!parsed.valid) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="zap-container">
|
||||
<div className="zap">
|
||||
<Icon name="zap" className="zap-icon" />
|
||||
<Profile
|
||||
pubkey={parsed.anonZap ? "" : parsed.sender ?? ""}
|
||||
options={{
|
||||
showAvatar: !parsed.anonZap,
|
||||
overrideName: parsed.anonZap ? "Anon" : undefined,
|
||||
}}
|
||||
/>
|
||||
zapped you
|
||||
<span className="zap-amount">{formatSats(parsed.amount)}</span>
|
||||
sats
|
||||
</div>
|
||||
{parsed.content && <div className="zap-content">{parsed.content}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WriteMessage({ link }: { link: NostrLink }) {
|
||||
const [chat, setChat] = useState("");
|
||||
const login = useLogin();
|
||||
const userEmojis = useEmoji(login!.pubkey);
|
||||
const channelEmojis = useEmoji(link.author!);
|
||||
const emojis = userEmojis.concat(channelEmojis);
|
||||
const names = emojis.map((t) => t.at(1));
|
||||
|
||||
async function sendChatMessage() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
if (chat.length > 1) {
|
||||
const reply = await pub?.generic(eb => {
|
||||
return eb
|
||||
.kind(1311 as EventKind)
|
||||
let emojiNames = new Set();
|
||||
|
||||
for (const name of names) {
|
||||
if (chat.includes(`:${name}:`)) {
|
||||
emojiNames.add(name);
|
||||
}
|
||||
}
|
||||
|
||||
const reply = await pub?.generic((eb) => {
|
||||
const emoji = [...emojiNames].map((name) =>
|
||||
emojis.find((e) => e.at(1) === name)
|
||||
);
|
||||
eb.kind(1311 as EventKind)
|
||||
.content(chat)
|
||||
.tag(["a", `${link.kind}:${link.author}:${link.id}`, "", "root"])
|
||||
.processContent();
|
||||
for (const e of emoji) {
|
||||
if (e) {
|
||||
eb.tag(e);
|
||||
}
|
||||
}
|
||||
return eb;
|
||||
});
|
||||
if (reply) {
|
||||
console.debug(reply);
|
||||
@ -40,21 +218,26 @@ export function LiveChat({ link, options }: { link: NostrLink, options?: LiveCha
|
||||
}
|
||||
}
|
||||
|
||||
function writeMessage() {
|
||||
return <>
|
||||
async function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.code === "Enter") {
|
||||
e.preventDefault();
|
||||
await sendChatMessage();
|
||||
}
|
||||
}
|
||||
|
||||
async function onChange(e: ChangeEvent) {
|
||||
// @ts-expect-error
|
||||
setChat(e.target.value);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
autoFocus={false}
|
||||
onChange={v => setChat(v.target.value)}
|
||||
<Textarea
|
||||
emojis={emojis}
|
||||
value={chat}
|
||||
placeholder="Message"
|
||||
onKeyDown={async e => {
|
||||
if (e.code === "Enter") {
|
||||
e.preventDefault();
|
||||
await sendChatMessage();
|
||||
}
|
||||
}}
|
||||
onKeyDown={onKeyDown}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<Icon name="message" size={15} />
|
||||
</div>
|
||||
@ -62,71 +245,5 @@ export function LiveChat({ link, options }: { link: NostrLink, options?: LiveCha
|
||||
Send
|
||||
</AsyncButton>
|
||||
</>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="live-chat">
|
||||
{(options?.showHeader ?? true) && <div className="header">
|
||||
Stream Chat
|
||||
</div>}
|
||||
<div className="messages">
|
||||
{[...(messages.data ?? [])]
|
||||
.sort((a, b) => b.created_at - a.created_at)
|
||||
.map(a => {
|
||||
switch (a.kind) {
|
||||
case 1311: {
|
||||
return <ChatMessage ev={a} link={link} key={a.id} />;
|
||||
}
|
||||
case EventKind.ZapReceipt: {
|
||||
return <ChatZap ev={a} key={a.id} />
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
{messages.data === undefined && <Spinner />}
|
||||
</div>
|
||||
{(options?.canWrite ?? true) && <div className="write-message">
|
||||
{login ? writeMessage() : <p>Please login to write messages!</p>}
|
||||
</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatMessage({ ev, link }: { ev: TaggedRawEvent, link: NostrLink }) {
|
||||
return (
|
||||
<div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
|
||||
<Profile pubkey={ev.pubkey} />
|
||||
<span>
|
||||
{ev.content}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChatZap({ ev }: { ev: TaggedRawEvent }) {
|
||||
const parsed = parseZap(ev, System.ProfileLoader.Cache);
|
||||
useUserProfile(System, parsed.anonZap ? undefined : parsed.sender);
|
||||
|
||||
if (!parsed.valid) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="pill">
|
||||
<div className="zap">
|
||||
<Icon name="zap" />
|
||||
<Profile pubkey={parsed.anonZap ? "" : (parsed.sender ?? "")} options={{
|
||||
showAvatar: !parsed.anonZap,
|
||||
overrideName: parsed.anonZap ? "Anonymous" : undefined
|
||||
}} />
|
||||
zapped
|
||||
|
||||
{formatSats(parsed.amount)}
|
||||
|
||||
sats
|
||||
</div>
|
||||
{parsed.content && <p>
|
||||
{parsed.content}
|
||||
</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -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<HTMLVideoElement> & { stream?: string }) {
|
||||
export function LiveVideoPlayer(
|
||||
props: HTMLProps<HTMLVideoElement> & { stream?: string }
|
||||
) {
|
||||
const video = useRef<HTMLVideoElement>(null);
|
||||
const streamCached = useMemo(() => props.stream, [props.stream]);
|
||||
const [status, setStatus] = useState<VideoStatus>();
|
||||
|
||||
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<HTMLVideoElement> & { 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<HTMLVideoElement> & { stream?:
|
||||
}
|
||||
}, [video, streamCached]);
|
||||
return (
|
||||
<div className={status}>
|
||||
<div>{status}</div>
|
||||
<>
|
||||
<div className={status}>
|
||||
<div>{status}</div>
|
||||
</div>
|
||||
<video ref={video} {...props} controls={status === VideoStatus.Online} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
20
src/element/mention.tsx
Normal file
20
src/element/mention.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
import { System } from "index";
|
||||
|
||||
interface MentionProps {
|
||||
pubkey: string;
|
||||
relays?: string[];
|
||||
}
|
||||
|
||||
export function Mention({ pubkey, relays }: MentionProps) {
|
||||
const user = useUserProfile(System, pubkey);
|
||||
return (
|
||||
<a
|
||||
href={`https://snort.social/p/${pubkey}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{user?.name || pubkey}
|
||||
</a>
|
||||
);
|
||||
}
|
@ -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;
|
||||
}
|
@ -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 (
|
||||
<div className={`modal ${className}`} onClick={onClose}>
|
||||
<div className="modal-body" onClick={e => e.stopPropagation()}>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -2,7 +2,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.new-stream h3 {
|
||||
@ -36,4 +35,17 @@
|
||||
|
||||
.new-stream .btn:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.new-stream .pill {
|
||||
border-radius: 16px;
|
||||
background: #262626;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.new-stream .pill.active {
|
||||
color: inherit;
|
||||
background: #353535;
|
||||
}
|
||||
|
@ -1,98 +1,207 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import "./new-stream.css";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { EventPublisher, NostrEvent } from "@snort/system";
|
||||
import { unixNow } from "@snort/shared";
|
||||
import "./new-stream.css";
|
||||
|
||||
import AsyncButton from "./async-button";
|
||||
import { System } from "index";
|
||||
import { StreamState, System } from "index";
|
||||
import { Icon } from "element/icon";
|
||||
import { findTag } from "utils";
|
||||
|
||||
export function NewStream({ ev, onFinish }: { ev?: NostrEvent, onFinish: () => 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 [isValid, setIsValid] = useState(false);
|
||||
export function NewStream({
|
||||
ev,
|
||||
onFinish,
|
||||
}: {
|
||||
ev?: NostrEvent;
|
||||
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 [start, setStart] = useState(findTag(ev, "starts"));
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
|
||||
function validate() {
|
||||
if (title.length < 2) {
|
||||
return false;
|
||||
}
|
||||
if (stream.length < 5 || !stream.match(/^https?:\/\/.*\.m3u8?$/i)) {
|
||||
return false;
|
||||
}
|
||||
if (image.length > 0 && !image.match(/^https?:\/\//i)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
const validate = useCallback(() => {
|
||||
if (title.length < 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setIsValid(validate());
|
||||
}, [title, summary, image, stream]);
|
||||
|
||||
async function publishStream() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
if (pub) {
|
||||
const evNew = await pub.generic(eb => {
|
||||
const now = unixNow();
|
||||
const dTag = findTag(ev, "d") ?? now.toString();
|
||||
return eb.kind(30_311)
|
||||
.tag(["d", dTag])
|
||||
.tag(["title", title])
|
||||
.tag(["summary", summary])
|
||||
.tag(["image", image])
|
||||
.tag(["streaming", stream])
|
||||
.tag(["status", "live"])
|
||||
});
|
||||
console.debug(evNew);
|
||||
System.BroadcastEvent(evNew);
|
||||
onFinish();
|
||||
}
|
||||
if (stream.length < 5 || !stream.match(/^https?:\/\/.*\.m3u8?$/i)) {
|
||||
return false;
|
||||
}
|
||||
if (image.length > 0 && !image.match(/^https?:\/\//i)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}, [title, image, stream]);
|
||||
|
||||
return <div className="new-stream">
|
||||
<h3>
|
||||
{ev ? "Edit Stream" : "New Stream"}
|
||||
</h3>
|
||||
<div>
|
||||
<p>
|
||||
Title
|
||||
</p>
|
||||
<div className="input">
|
||||
<input type="text" placeholder="What are we steaming today?" value={title} onChange={e => setTitle(e.target.value)} />
|
||||
</div>
|
||||
useEffect(() => {
|
||||
setIsValid(validate());
|
||||
}, [validate, title, summary, image, stream]);
|
||||
|
||||
async function publishStream() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
if (pub) {
|
||||
const evNew = await pub.generic((eb) => {
|
||||
const now = unixNow();
|
||||
const dTag = findTag(ev, "d") ?? now.toString();
|
||||
const starts = start ?? now.toString();
|
||||
const ends = findTag(ev, "ends") ?? now.toString();
|
||||
eb.kind(30_311)
|
||||
.tag(["d", dTag])
|
||||
.tag(["title", title])
|
||||
.tag(["summary", summary])
|
||||
.tag(["image", image])
|
||||
.tag(["streaming", stream])
|
||||
.tag(["status", status])
|
||||
.tag(["starts", starts]);
|
||||
if (status === StreamState.Ended) {
|
||||
eb.tag(["ends", ends]);
|
||||
}
|
||||
return eb;
|
||||
});
|
||||
console.debug(evNew);
|
||||
System.BroadcastEvent(evNew);
|
||||
onFinish && onFinish(evNew);
|
||||
}
|
||||
}
|
||||
|
||||
function toDateTimeString(n: number) {
|
||||
return new Date(n * 1000).toISOString().substring(0, -1);
|
||||
}
|
||||
|
||||
function fromDateTimeString(s: string) {
|
||||
return Math.floor(new Date(s).getTime() / 1000);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="new-stream">
|
||||
<h3>{ev ? "Edit Stream" : "New Stream"}</h3>
|
||||
<div>
|
||||
<p>Title</p>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="What are we steaming today?"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
Summary
|
||||
</p>
|
||||
<div className="input">
|
||||
<input type="text" placeholder="A short description of the content" value={summary} onChange={e => setSummary(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Summary</p>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="A short description of the content"
|
||||
value={summary}
|
||||
onChange={(e) => setSummary(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
Cover image
|
||||
</p>
|
||||
<div className="input">
|
||||
<input type="text" placeholder="https://" value={image} onChange={e => setImage(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Cover image</p>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="https://"
|
||||
value={image}
|
||||
onChange={(e) => setImage(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
Stream Url
|
||||
</p>
|
||||
<div className="input">
|
||||
<input type="text" placeholder="https://" value={stream} onChange={e => setStream(e.target.value)} />
|
||||
</div>
|
||||
<small>
|
||||
Stream type should be HLS
|
||||
</small>
|
||||
</div>
|
||||
<div>
|
||||
<p>Stream Url</p>
|
||||
<div className="input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="https://"
|
||||
value={stream}
|
||||
onChange={(e) => setStream(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<AsyncButton type="button" className="btn btn-primary" disabled={!isValid} onClick={publishStream}>
|
||||
{ev ? "Save" : "Start Stream"}
|
||||
</AsyncButton>
|
||||
<small>Stream type should be HLS</small>
|
||||
</div>
|
||||
<div>
|
||||
<p>Status</p>
|
||||
<div className="flex g12">
|
||||
{[StreamState.Live, StreamState.Planned, StreamState.Ended].map(
|
||||
(v) => (
|
||||
<span
|
||||
className={`pill${status === v ? " active" : ""}`}
|
||||
onClick={() => setStatus(v)}
|
||||
>
|
||||
{v}
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{status === StreamState.Planned && (
|
||||
<div>
|
||||
<p>Start Time</p>
|
||||
<div className="input">
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={toDateTimeString(Number(start ?? "0"))}
|
||||
onChange={(e) =>
|
||||
setStart(fromDateTimeString(e.target.value).toString())
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<AsyncButton
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
disabled={!isValid}
|
||||
onClick={publishStream}
|
||||
>
|
||||
{ev ? "Save" : "Start Stream"}
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
interface NewStreamDialogProps {
|
||||
text?: string;
|
||||
btnClassName?: string;
|
||||
ev?: NostrEvent;
|
||||
onFinish?: (e: NostrEvent) => void;
|
||||
}
|
||||
|
||||
export function NewStreamDialog({
|
||||
text,
|
||||
ev,
|
||||
onFinish,
|
||||
btnClassName = "btn",
|
||||
}: NewStreamDialogProps) {
|
||||
return (
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<button type="button" className={btnClassName}>
|
||||
{text && text}
|
||||
{!text && (
|
||||
<>
|
||||
<span className="hide-on-mobile">New Stream</span>
|
||||
<Icon name="signal" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
<Dialog.Content className="dialog-content">
|
||||
<NewStream ev={ev} onFinish={onFinish} />
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
16
src/element/nostr-link.tsx
Normal file
16
src/element/nostr-link.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { NostrPrefix, tryParseNostrLink } from "@snort/system";
|
||||
import { Mention } from "./mention";
|
||||
|
||||
export function NostrLink({ link }: { link: string }) {
|
||||
const nav = tryParseNostrLink(link);
|
||||
if (
|
||||
nav?.type === NostrPrefix.PublicKey ||
|
||||
nav?.type === NostrPrefix.Profile
|
||||
) {
|
||||
return <Mention pubkey={nav.id} relays={nav.relays} />;
|
||||
} else {
|
||||
<a href={link} target="_blank" rel="noreferrer" className="ext">
|
||||
{link}
|
||||
</a>;
|
||||
}
|
||||
}
|
@ -14,4 +14,5 @@
|
||||
background: #A7A7A7;
|
||||
border: unset;
|
||||
outline: unset;
|
||||
}
|
||||
object-fit: cover;
|
||||
}
|
||||
|
@ -5,28 +5,45 @@ import { hexToBech32 } from "@snort/shared";
|
||||
import { System } from "index";
|
||||
|
||||
export interface ProfileOptions {
|
||||
showName?: boolean
|
||||
showAvatar?: boolean
|
||||
suffix?: string
|
||||
overrideName?: string
|
||||
showName?: boolean;
|
||||
showAvatar?: boolean;
|
||||
suffix?: string;
|
||||
overrideName?: string;
|
||||
}
|
||||
|
||||
export function getName(pk: string, user?: UserMetadata) {
|
||||
const shortPubkey = hexToBech32("npub", pk).slice(0, 12);
|
||||
if ((user?.display_name?.length ?? 0) > 0) {
|
||||
return user?.display_name;
|
||||
}
|
||||
if ((user?.name?.length ?? 0) > 0) {
|
||||
return user?.name;
|
||||
}
|
||||
return shortPubkey;
|
||||
const shortPubkey = hexToBech32("npub", pk).slice(0, 12);
|
||||
if ((user?.display_name?.length ?? 0) > 0) {
|
||||
return user?.display_name;
|
||||
}
|
||||
if ((user?.name?.length ?? 0) > 0) {
|
||||
return user?.name;
|
||||
}
|
||||
return shortPubkey;
|
||||
}
|
||||
|
||||
export function Profile({ pubkey, options }: { pubkey: string, options?: ProfileOptions }) {
|
||||
const profile = useUserProfile(System, pubkey);
|
||||
export function Profile({
|
||||
pubkey,
|
||||
avatarClassname,
|
||||
options,
|
||||
}: {
|
||||
pubkey: string;
|
||||
avatarClassname?: string;
|
||||
options?: ProfileOptions;
|
||||
}) {
|
||||
const profile = useUserProfile(System, pubkey);
|
||||
|
||||
return <div className="profile">
|
||||
{(options?.showAvatar ?? true) && <img src={profile?.picture ?? ""} />}
|
||||
{(options?.showName ?? true) && (options?.overrideName ?? getName(pubkey, profile))}
|
||||
return (
|
||||
<div className="profile">
|
||||
{(options?.showAvatar ?? true) && (
|
||||
<img
|
||||
alt={profile?.name || pubkey}
|
||||
className={avatarClassname ? avatarClassname : ""}
|
||||
src={profile?.picture ?? ""}
|
||||
/>
|
||||
)}
|
||||
{(options?.showName ?? true) &&
|
||||
(options?.overrideName ?? getName(pubkey, profile))}
|
||||
</div>
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -44,7 +44,12 @@ export default function QrCode(props: QrCodeProps) {
|
||||
} else if (qrRef.current) {
|
||||
qrRef.current.innerHTML = "";
|
||||
}
|
||||
}, [props.data, props.link]);
|
||||
}, [props.data, props.link, props.width, props.height, props.avatar]);
|
||||
|
||||
return <div className={`qr${props.className ? ` ${props.className}` : ""}`} ref={qrRef}></div>;
|
||||
return (
|
||||
<div
|
||||
className={`qr${props.className ? ` ${props.className}` : ""}`}
|
||||
ref={qrRef}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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<LNURL>();
|
||||
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<LNURL>();
|
||||
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 <>
|
||||
<div className="flex g12">
|
||||
<span className={`pill${isFiat ? "" : " active"}`} onClick={() => { setIsFiat(false); setAmount(satsAmounts[0]) }}>
|
||||
SATS
|
||||
</span>
|
||||
<span className={`pill${isFiat ? " active" : ""}`} onClick={() => { setIsFiat(true); setAmount(usdAmounts[0]) }}>
|
||||
USD
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<small>Zap amount in {isFiat ? "USD" : "sats"}</small>
|
||||
<div className="amounts">
|
||||
{(isFiat ? usdAmounts : satsAmounts).map(a =>
|
||||
<span key={a} className={`pill${a === amount ? " active" : ""}`} onClick={() => setAmount(a)}>
|
||||
{isFiat ? `$${a.toLocaleString()}` : formatSats(a)}
|
||||
</span>)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small>
|
||||
Your comment for {name}
|
||||
</small>
|
||||
<div className="input">
|
||||
<textarea placeholder="Nice!" value={comment} onChange={e => setComment(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AsyncButton onClick={send} className="btn btn-primary">
|
||||
Zap!
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</>
|
||||
if (window.webln) {
|
||||
await window.webln.enable();
|
||||
await window.webln.sendPayment(invoice.pr);
|
||||
onFinish();
|
||||
} else {
|
||||
setInvoice(invoice.pr);
|
||||
}
|
||||
}
|
||||
|
||||
function payInvoice() {
|
||||
if (!invoice) return;
|
||||
function input() {
|
||||
if (invoice) return;
|
||||
return (
|
||||
<>
|
||||
<div className="flex g12">
|
||||
<span
|
||||
className={`pill${isFiat ? "" : " active"}`}
|
||||
onClick={() => {
|
||||
setIsFiat(false);
|
||||
setAmount(satsAmounts[0]);
|
||||
}}
|
||||
>
|
||||
SATS
|
||||
</span>
|
||||
<span
|
||||
className={`pill${isFiat ? " active" : ""}`}
|
||||
onClick={() => {
|
||||
setIsFiat(true);
|
||||
setAmount(usdAmounts[0]);
|
||||
}}
|
||||
>
|
||||
USD
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<small>Zap amount in {isFiat ? "USD" : "sats"}</small>
|
||||
<div className="amounts">
|
||||
{(isFiat ? usdAmounts : satsAmounts).map((a) => (
|
||||
<span
|
||||
key={a}
|
||||
className={`pill${a === amount ? " active" : ""}`}
|
||||
onClick={() => setAmount(a)}
|
||||
>
|
||||
{isFiat ? `$${a.toLocaleString()}` : formatSats(a)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<small>Your comment for {name}</small>
|
||||
<div className="input">
|
||||
<textarea
|
||||
placeholder="Nice!"
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<AsyncButton onClick={send} className="btn btn-primary">
|
||||
Zap!
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const link = `lightning:${invoice}`;
|
||||
return <QrCode data={link} link={link} />
|
||||
}
|
||||
function payInvoice() {
|
||||
if (!invoice) return;
|
||||
|
||||
return <div className="send-zap">
|
||||
<h3>
|
||||
Zap {name}
|
||||
<Icon name="zap" />
|
||||
</h3>
|
||||
{input()}
|
||||
{payInvoice()}
|
||||
const link = `lightning:${invoice}`;
|
||||
return <QrCode data={link} link={link} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="send-zap">
|
||||
<h3>
|
||||
Zap {name}
|
||||
<Icon name="zap" />
|
||||
</h3>
|
||||
{input()}
|
||||
{payInvoice()}
|
||||
</div>
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function SendZapsDialog({
|
||||
lnurl,
|
||||
ev,
|
||||
targetName,
|
||||
}: Omit<SendZapsProps, "onFinish">) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="btn btn-primary zap">
|
||||
<span className="hide-on-mobile">Zap</span>
|
||||
<Icon name="zap" size={16} />
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
<Dialog.Content className="dialog-content">
|
||||
<SendZaps
|
||||
lnurl={lnurl}
|
||||
ev={ev}
|
||||
targetName={targetName}
|
||||
onFinish={() => setIsOpen(false)}
|
||||
/>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
5
src/element/text.css
Normal file
5
src/element/text.css
Normal file
@ -0,0 +1,5 @@
|
||||
.custom-emoji {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
display: inline-block;
|
||||
}
|
84
src/element/text.tsx
Normal file
84
src/element/text.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import { useMemo, type ReactNode } from "react";
|
||||
import { TaggedRawEvent, validateNostrLink } from "@snort/system";
|
||||
import { splitByUrl } from "utils";
|
||||
import { Emoji } from "./emoji";
|
||||
import { HyperText } from "./hypertext";
|
||||
|
||||
type Fragment = string | ReactNode;
|
||||
|
||||
function transformText(fragments: Fragment[], tags: string[][]) {
|
||||
return extractLinks(extractEmoji(fragments, tags));
|
||||
}
|
||||
|
||||
function extractEmoji(fragments: Fragment[], tags: string[][]) {
|
||||
return fragments
|
||||
.map((f) => {
|
||||
if (typeof f === "string") {
|
||||
return f.split(/:([\w-]+):/g).map((i) => {
|
||||
const t = tags.find((a) => a[0] === "emoji" && a[1] === i);
|
||||
if (t) {
|
||||
return <Emoji name={t[1]} url={t[2]} />;
|
||||
} else {
|
||||
return i;
|
||||
}
|
||||
});
|
||||
}
|
||||
return f;
|
||||
})
|
||||
.flat();
|
||||
}
|
||||
|
||||
function extractLinks(fragments: Fragment[]) {
|
||||
return fragments
|
||||
.map((f) => {
|
||||
if (typeof f === "string") {
|
||||
return splitByUrl(f).map((a) => {
|
||||
const validateLink = () => {
|
||||
const normalizedStr = a.toLowerCase();
|
||||
|
||||
if (
|
||||
normalizedStr.startsWith("web+nostr:") ||
|
||||
normalizedStr.startsWith("nostr:")
|
||||
) {
|
||||
return validateNostrLink(normalizedStr);
|
||||
}
|
||||
|
||||
return (
|
||||
normalizedStr.startsWith("http:") ||
|
||||
normalizedStr.startsWith("https:") ||
|
||||
normalizedStr.startsWith("magnet:")
|
||||
);
|
||||
};
|
||||
|
||||
if (validateLink()) {
|
||||
if (!a.startsWith("nostr:")) {
|
||||
return (
|
||||
<a
|
||||
href={a}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="ext"
|
||||
>
|
||||
{a}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return <HyperText link={a} />;
|
||||
}
|
||||
return a;
|
||||
});
|
||||
}
|
||||
return f;
|
||||
})
|
||||
.flat();
|
||||
}
|
||||
|
||||
export function Text({ ev }: { ev: TaggedRawEvent }) {
|
||||
// todo: RTL langugage support
|
||||
const element = useMemo(() => {
|
||||
return <span>{transformText([ev.content], ev.tags)}</span>;
|
||||
}, [ev]);
|
||||
|
||||
return <>{element}</>;
|
||||
}
|
39
src/element/textarea.css
Normal file
39
src/element/textarea.css
Normal file
@ -0,0 +1,39 @@
|
||||
.rta__textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.rta__list {
|
||||
border: none;
|
||||
}
|
||||
.rta__item:not(:last-child) {
|
||||
border: none;
|
||||
}
|
||||
.rta__entity--selected .emoji-item {
|
||||
text-decoration: none;
|
||||
background: #F838D9;
|
||||
}
|
||||
|
||||
.emoji-item, .user-item {
|
||||
color: white;
|
||||
background: #171717;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.emoji-item:hover, .user-item:hover {
|
||||
color: #171717;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.user-image {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
}
|
92
src/element/textarea.tsx
Normal file
92
src/element/textarea.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
import "./textarea.css";
|
||||
import type { KeyboardEvent, ChangeEvent } from "react";
|
||||
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
|
||||
import "@webscopeio/react-textarea-autocomplete/style.css";
|
||||
import uniqWith from "lodash/uniqWith";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { MetadataCache, NostrPrefix } from "@snort/system";
|
||||
import { System } from "index";
|
||||
import { Emoji, type EmojiTag } from "./emoji";
|
||||
import { Avatar } from "element/avatar";
|
||||
import { hexToBech32 } from "utils";
|
||||
|
||||
interface EmojiItemProps {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const EmojiItem = ({ entity: { name, url } }: { entity: EmojiItemProps }) => {
|
||||
return (
|
||||
<div className="emoji-item">
|
||||
<div className="emoji-image">
|
||||
<Emoji name={name} url={url} />
|
||||
</div>
|
||||
<div className="emoji-name">{name}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UserItem = (metadata: MetadataCache) => {
|
||||
const { pubkey, display_name, nip05, ...rest } = metadata;
|
||||
return (
|
||||
<div key={pubkey} className="user-item">
|
||||
<Avatar avatarClassname="user-image" user={metadata} />
|
||||
<div className="user-details">{display_name || rest.name}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface TextareaProps {
|
||||
emojis: EmojiTag[];
|
||||
value: string;
|
||||
onChange: (e: ChangeEvent<Element>) => void;
|
||||
onKeyDown: (e: KeyboardEvent<Element>) => void;
|
||||
}
|
||||
|
||||
export function Textarea({ emojis, ...props }: TextareaProps) {
|
||||
const userDataProvider = async (token: string) => {
|
||||
// @ts-expect-error: Property 'search'
|
||||
return System.ProfileLoader.Cache.search(token);
|
||||
};
|
||||
|
||||
const emojiDataProvider = async (token: string) => {
|
||||
const results = emojis
|
||||
.map((t) => {
|
||||
return {
|
||||
name: t.at(1) || "",
|
||||
url: t.at(2) || "",
|
||||
};
|
||||
})
|
||||
.filter(({ name }) => name.toLowerCase().includes(token.toLowerCase()));
|
||||
return uniqWith(results, isEqual).slice(0, 5);
|
||||
};
|
||||
|
||||
const trigger = {
|
||||
":": {
|
||||
dataProvider: emojiDataProvider,
|
||||
component: EmojiItem,
|
||||
output: (item: EmojiItemProps) => `:${item.name}:`,
|
||||
},
|
||||
"@": {
|
||||
afterWhitespace: true,
|
||||
dataProvider: userDataProvider,
|
||||
component: (props: { entity: MetadataCache }) => (
|
||||
<UserItem {...props.entity} />
|
||||
),
|
||||
output: (item: { pubkey: string }) =>
|
||||
`@${hexToBech32(NostrPrefix.PublicKey, item.pubkey)}`,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactTextareaAutocomplete
|
||||
dir="auto"
|
||||
loadingComponent={() => <span>Loading...</span>}
|
||||
placeholder="Message"
|
||||
autoFocus={false}
|
||||
// @ts-expect-error
|
||||
trigger={trigger}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
@ -18,4 +18,5 @@
|
||||
.video-tile .pill {
|
||||
float: right;
|
||||
margin: 16px 20px 0 0;
|
||||
text-transform: uppercase;
|
||||
}
|
74
src/hooks/emoji.tsx
Normal file
74
src/hooks/emoji.tsx
Normal file
@ -0,0 +1,74 @@
|
||||
import { RequestBuilder, EventKind, FlatNoteStore } from "@snort/system";
|
||||
import { useRequestBuilder } from "@snort/system-react";
|
||||
import { System } from "index";
|
||||
import { useMemo } from "react";
|
||||
import type { EmojiTag } from "../element/emoji";
|
||||
|
||||
export default function useEmoji(pubkey: string) {
|
||||
const sub = useMemo(() => {
|
||||
const rb = new RequestBuilder(`emoji:${pubkey}`);
|
||||
|
||||
rb.withFilter()
|
||||
.authors([pubkey])
|
||||
.kinds([10030 as EventKind, 30030 as EventKind]);
|
||||
|
||||
return rb;
|
||||
}, [pubkey]);
|
||||
|
||||
const { data } = useRequestBuilder<FlatNoteStore>(System, FlatNoteStore, sub);
|
||||
const userEmoji = useMemo(() => {
|
||||
return data ?? [];
|
||||
}, [data]);
|
||||
|
||||
const related = useMemo(() => {
|
||||
if (userEmoji) {
|
||||
const tags = userEmoji.at(0)?.tags ?? [];
|
||||
return tags.filter(
|
||||
(t) => t.at(0) === "a" && t.at(1)?.startsWith(`30030:`)
|
||||
);
|
||||
}
|
||||
return [];
|
||||
}, [userEmoji]);
|
||||
|
||||
const subRelated = useMemo(() => {
|
||||
const splitted = related.map((t) => t.at(1)!.split(":"));
|
||||
const authors = splitted
|
||||
.map((s) => s.at(1))
|
||||
.filter((s) => s)
|
||||
.map((s) => s as string);
|
||||
const identifiers = splitted
|
||||
.map((s) => s.at(2))
|
||||
.filter((s) => s)
|
||||
.map((s) => s as string);
|
||||
|
||||
const rb = new RequestBuilder(`emoji-related:${pubkey}`);
|
||||
|
||||
rb.withFilter()
|
||||
.kinds([30030 as EventKind])
|
||||
.authors(authors)
|
||||
// @ts-expect-error
|
||||
.tag(["d", identifiers]);
|
||||
|
||||
return rb;
|
||||
}, [pubkey, related]);
|
||||
|
||||
const { data: relatedData } = useRequestBuilder<FlatNoteStore>(
|
||||
System,
|
||||
FlatNoteStore,
|
||||
subRelated
|
||||
);
|
||||
const emojiPacks = useMemo(() => {
|
||||
return relatedData ?? [];
|
||||
}, [relatedData]);
|
||||
|
||||
const emojis = useMemo(() => {
|
||||
return userEmoji
|
||||
.concat(emojiPacks)
|
||||
.map((ev) => {
|
||||
return ev.tags.filter((t) => t.at(0) === "emoji");
|
||||
})
|
||||
.flat() as EmojiTag[];
|
||||
}, [userEmoji, emojiPacks]);
|
||||
|
||||
return emojis;
|
||||
}
|
@ -1,12 +1,20 @@
|
||||
import { useMemo } from "react";
|
||||
import { NostrPrefix, RequestBuilder, ReplaceableNoteStore, NostrLink } from "@snort/system";
|
||||
import {
|
||||
NostrPrefix,
|
||||
RequestBuilder,
|
||||
ReplaceableNoteStore,
|
||||
NostrLink,
|
||||
} from "@snort/system";
|
||||
import { useRequestBuilder } from "@snort/system-react";
|
||||
|
||||
import { System } from "index";
|
||||
|
||||
export default function useEventFeed(link: NostrLink) {
|
||||
export default function useEventFeed(link: NostrLink, leaveOpen = false) {
|
||||
const sub = useMemo(() => {
|
||||
const b = new RequestBuilder(`event:${link.id.slice(0, 12)}`);
|
||||
b.withOptions({
|
||||
leaveOpen,
|
||||
});
|
||||
if (link.type === NostrPrefix.Address) {
|
||||
const f = b.withFilter().tag("d", [link.id]);
|
||||
if (link.author) {
|
||||
@ -18,14 +26,18 @@ export default function useEventFeed(link: NostrLink) {
|
||||
} else {
|
||||
const f = b.withFilter().ids([link.id]);
|
||||
if (link.relays) {
|
||||
link.relays.slice(0, 2).forEach(r => f.relay(r));
|
||||
link.relays.slice(0, 2).forEach((r) => f.relay(r));
|
||||
}
|
||||
if (link.author) {
|
||||
f.authors([link.author]);
|
||||
}
|
||||
}
|
||||
return b;
|
||||
}, [link]);
|
||||
}, [link, leaveOpen]);
|
||||
|
||||
return useRequestBuilder<ReplaceableNoteStore>(System, ReplaceableNoteStore, sub);
|
||||
return useRequestBuilder<ReplaceableNoteStore>(
|
||||
System,
|
||||
ReplaceableNoteStore,
|
||||
sub
|
||||
);
|
||||
}
|
||||
|
@ -83,7 +83,7 @@ a {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
input[type="text"], textarea {
|
||||
input[type="text"], textarea, input[type="datetime-local"] {
|
||||
font-family: inherit;
|
||||
border: unset;
|
||||
background-color: unset;
|
||||
|
@ -1,56 +1,62 @@
|
||||
import './index.css';
|
||||
import "./index.css";
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { NostrSystem } from "@snort/system";
|
||||
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
|
||||
import { RouterProvider, createBrowserRouter } from "react-router-dom";
|
||||
|
||||
import { RootPage } from './pages/root';
|
||||
import { LayoutPage } from 'pages/layout';
|
||||
import { StreamPage } from 'pages/stream-page';
|
||||
import { ChatPopout } from 'pages/chat-popout';
|
||||
import { LoginStore } from 'login';
|
||||
import { RootPage } from "./pages/root";
|
||||
import { LayoutPage } from "pages/layout";
|
||||
import { StreamPage } from "pages/stream-page";
|
||||
import { ChatPopout } from "pages/chat-popout";
|
||||
import { LoginStore } from "login";
|
||||
|
||||
export const System = new NostrSystem({
|
||||
export enum StreamState {
|
||||
Live = "live",
|
||||
Ended = "ended",
|
||||
Planned = "planned"
|
||||
}
|
||||
|
||||
});
|
||||
export const System = new NostrSystem({});
|
||||
export const Login = new LoginStore();
|
||||
|
||||
export const Relays = [
|
||||
"wss://relay.snort.social",
|
||||
"wss://nos.lol",
|
||||
"wss://relay.damus.io",
|
||||
"wss://nostr.wine"
|
||||
"wss://nostr.wine",
|
||||
];
|
||||
|
||||
Relays.forEach(r => System.ConnectToRelay(r, { read: true, write: true }));
|
||||
Relays.forEach((r) => System.ConnectToRelay(r, { read: true, write: true }));
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
element: <LayoutPage />,
|
||||
loader: async() => {
|
||||
loader: async () => {
|
||||
await System.Init();
|
||||
return null;
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: <RootPage />
|
||||
element: <RootPage />,
|
||||
},
|
||||
{
|
||||
path: "/live/:id",
|
||||
element: <StreamPage />
|
||||
}
|
||||
]
|
||||
element: <StreamPage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/chat/:id",
|
||||
element: <ChatPopout />
|
||||
}
|
||||
])
|
||||
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLDivElement);
|
||||
element: <ChatPopout />,
|
||||
},
|
||||
]);
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLDivElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>
|
||||
);
|
||||
);
|
||||
|
@ -1,5 +1,13 @@
|
||||
.popout-chat {
|
||||
grid-area: main-content;
|
||||
}
|
||||
|
||||
.popout-chat .live-chat {
|
||||
height: calc(100vh - 20px);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.popout-chat .live-chat {
|
||||
height: calc(100vh);
|
||||
padding: 10px;
|
||||
border: unset;
|
||||
border-radius: unset;
|
||||
@ -7,4 +15,4 @@
|
||||
|
||||
.popout-chat .live-chat .messages {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
@ -4,13 +4,18 @@ import { useParams } from "react-router-dom";
|
||||
import { parseNostrLink } from "@snort/system";
|
||||
|
||||
export function ChatPopout() {
|
||||
const params = useParams();
|
||||
const link = parseNostrLink(params.id!);
|
||||
const params = useParams();
|
||||
const link = parseNostrLink(params.id!);
|
||||
|
||||
return <div className="popout-chat">
|
||||
<LiveChat link={link} options={{
|
||||
canWrite: false,
|
||||
showHeader: false
|
||||
}} />
|
||||
return (
|
||||
<div className="popout-chat">
|
||||
<LiveChat
|
||||
link={link}
|
||||
options={{
|
||||
canWrite: false,
|
||||
showHeader: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -1,12 +1,92 @@
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content auto;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
padding: 24px 40px 0 40px;
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main-content"
|
||||
"profile"
|
||||
"chat";
|
||||
grid-template-rows: 64px 230px 56px 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header>div:nth-child(1) {
|
||||
|
||||
.page.home {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main-content";
|
||||
grid-template-rows: 64px 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.page {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"main-content profile"
|
||||
"main-content chat";
|
||||
grid-template-rows: 64px min-content;
|
||||
grid-template-columns: 600px 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.video-content video {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.page {
|
||||
display: grid;
|
||||
height: calc(100vh - 72px);
|
||||
padding: 0 40px;
|
||||
grid-template-columns: auto 376px;
|
||||
grid-template-rows: unset;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"main-content chat"
|
||||
"profile chat";
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
.page {
|
||||
padding: 0 40px;
|
||||
grid-template-columns: auto 450px;
|
||||
}
|
||||
.video-content {
|
||||
max-height: calc(100vh - 320px);
|
||||
}
|
||||
.video-content video {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content auto;
|
||||
padding: 8px 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
header {
|
||||
gap: 24px;
|
||||
padding: 24px 0 32px 0;
|
||||
}
|
||||
}
|
||||
|
||||
header .logo {
|
||||
background: #171717;
|
||||
border-radius: 16px;
|
||||
width: 48px;
|
||||
@ -19,12 +99,12 @@ header>div:nth-child(1) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header>div:nth-child(2) {
|
||||
header .input {
|
||||
min-width: 300px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
header>div:nth-child(3) {
|
||||
header .header-right {
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
@ -44,4 +124,67 @@ header button {
|
||||
header .profile img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
header .header-right {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
header .input {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
header .input .search-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .new-stream-button-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
button span.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
button span.hide-on-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.popout-chat {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"main-content";
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100vh;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.popout-chat .live-chat {
|
||||
padding: 8px 16px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background-color: #171717;
|
||||
border-radius: 6px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90vw;
|
||||
max-width: 450px;
|
||||
max-height: 85vh;
|
||||
padding: 25px;
|
||||
}
|
||||
|
@ -1,69 +1,96 @@
|
||||
import { Icon } from "element/icon";
|
||||
import "./layout.css";
|
||||
import { EventPublisher } from "@snort/system";
|
||||
import { Outlet, useNavigate } from "react-router-dom";
|
||||
import {
|
||||
EventPublisher,
|
||||
NostrEvent,
|
||||
encodeTLV,
|
||||
NostrPrefix,
|
||||
} from "@snort/system";
|
||||
import { Outlet, useNavigate, useLocation } from "react-router-dom";
|
||||
import AsyncButton from "element/async-button";
|
||||
import { Login } from "index";
|
||||
import { useLogin } from "hooks/login";
|
||||
import { Profile } from "element/profile";
|
||||
import Modal from "element/modal";
|
||||
import { NewStream } from "element/new-stream";
|
||||
import { useState } from "react";
|
||||
import { NewStreamDialog } from "element/new-stream";
|
||||
|
||||
export function LayoutPage() {
|
||||
const navigate = useNavigate();
|
||||
const login = useLogin();
|
||||
const [newStream, setNewStream] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const login = useLogin();
|
||||
const location = useLocation();
|
||||
|
||||
async function doLogin() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
if (pub) {
|
||||
Login.loginWithPubkey(pub.pubKey);
|
||||
}
|
||||
async function doLogin() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
if (pub) {
|
||||
Login.loginWithPubkey(pub.pubKey);
|
||||
}
|
||||
}
|
||||
|
||||
function loggedIn() {
|
||||
if (!login) return;
|
||||
function loggedIn() {
|
||||
if (!login) return;
|
||||
|
||||
return <>
|
||||
<button type="button" className="btn btn-primary" onClick={() => setNewStream(true)}>
|
||||
New Stream
|
||||
<Icon name="signal" />
|
||||
</button>
|
||||
<Profile pubkey={login.pubkey} options={{
|
||||
showName: false
|
||||
}} />
|
||||
</>
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<NewStreamDialog btnClassName="btn btn-primary" onFinish={goToStream} />
|
||||
<Profile
|
||||
avatarClassname="mb-squared"
|
||||
pubkey={login.pubkey}
|
||||
options={{
|
||||
showName: false,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function loggedOut() {
|
||||
if (login) return;
|
||||
function loggedOut() {
|
||||
if (login) return;
|
||||
|
||||
return <>
|
||||
<AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
|
||||
Login
|
||||
<Icon name="login" />
|
||||
</AsyncButton>
|
||||
</>
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
|
||||
Login
|
||||
<Icon name="login" />
|
||||
</AsyncButton>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <>
|
||||
<header>
|
||||
<div onClick={() => navigate("/")}>
|
||||
S
|
||||
</div>
|
||||
<div className="input">
|
||||
<input type="text" placeholder="Search" />
|
||||
<Icon name="search" size={15} />
|
||||
</div>
|
||||
<div>
|
||||
{loggedIn()}
|
||||
{loggedOut()}
|
||||
</div>
|
||||
</header>
|
||||
<Outlet />
|
||||
{newStream && <Modal onClose={() => setNewStream(false)} >
|
||||
<NewStream onFinish={() => navigate("/")} />
|
||||
</Modal>}
|
||||
</>
|
||||
}
|
||||
function goToStream(ev: NostrEvent) {
|
||||
const d = ev.tags.find((t) => t.at(0) === "d")?.at(1) || "";
|
||||
const naddr = encodeTLV(
|
||||
NostrPrefix.Address,
|
||||
d,
|
||||
undefined,
|
||||
ev.kind,
|
||||
ev.pubkey
|
||||
);
|
||||
navigate(`/live/${naddr}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
location.pathname === "/"
|
||||
? "page home"
|
||||
: location.pathname.startsWith("/chat/")
|
||||
? "page chat"
|
||||
: "page"
|
||||
}
|
||||
>
|
||||
<header>
|
||||
<div className="logo" onClick={() => navigate("/")}>
|
||||
S
|
||||
</div>
|
||||
<div className="input">
|
||||
<input className="search-input" type="text" placeholder="Search" />
|
||||
<Icon name="search" size={15} />
|
||||
</div>
|
||||
<div className="header-right">
|
||||
{loggedIn()}
|
||||
{loggedOut()}
|
||||
</div>
|
||||
</header>
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -5,6 +5,24 @@
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1600px) {
|
||||
.video-grid {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
@ -15,4 +33,14 @@
|
||||
.video-grid {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homepage {
|
||||
width: 100%;
|
||||
grid-area: main-content;
|
||||
}
|
||||
|
||||
.homepage h2 {
|
||||
background: #171717;
|
||||
padding: 40px;
|
||||
}
|
||||
|
@ -4,15 +4,20 @@ import { useMemo } from "react";
|
||||
import { unixNow } from "@snort/shared";
|
||||
import { EventKind, ParameterizedReplaceableNoteStore, RequestBuilder } from "@snort/system";
|
||||
import { useRequestBuilder } from "@snort/system-react";
|
||||
import { System } from "..";
|
||||
import { StreamState, System } from "..";
|
||||
import { VideoTile } from "../element/video-tile";
|
||||
import { findTag } from "utils";
|
||||
|
||||
export function RootPage() {
|
||||
const rb = new RequestBuilder("root");
|
||||
rb.withFilter()
|
||||
.kinds([30_311 as EventKind])
|
||||
.since(unixNow() - 86400);
|
||||
const rb = useMemo(() => {
|
||||
const rb = new RequestBuilder("root");
|
||||
rb.withOptions({
|
||||
leaveOpen: true
|
||||
}).withFilter()
|
||||
.kinds([30_311 as EventKind])
|
||||
.since(unixNow() - 86400);
|
||||
return rb;
|
||||
}, []);
|
||||
|
||||
const feed = useRequestBuilder<ParameterizedReplaceableNoteStore>(System, ParameterizedReplaceableNoteStore, rb);
|
||||
const feedSorted = useMemo(() => {
|
||||
@ -29,7 +34,21 @@ export function RootPage() {
|
||||
}
|
||||
return [];
|
||||
}, [feed.data])
|
||||
return <div className="video-grid">
|
||||
{feedSorted.map(e => <VideoTile ev={e} key={e.id} />)}
|
||||
|
||||
const live = feedSorted.filter(a => findTag(a, "status") === StreamState.Live);
|
||||
const planned = feedSorted.filter(a => findTag(a, "status") === StreamState.Planned);
|
||||
const ended = feedSorted.filter(a => findTag(a, "status") === StreamState.Ended);
|
||||
return <div className="homepage">
|
||||
<div className="video-grid">
|
||||
{live.map(e => <VideoTile ev={e} key={e.id} />)}
|
||||
</div>
|
||||
{planned.length > 0 && <><h2>Planned</h2>
|
||||
<div className="video-grid">
|
||||
{planned.map(e => <VideoTile ev={e} key={e.id} />)}
|
||||
</div></>}
|
||||
{ended.length > 0 && <><h2>Ended</h2>
|
||||
<div className="video-grid">
|
||||
{ended.map(e => <VideoTile ev={e} key={e.id} />)}
|
||||
</div></>}
|
||||
</div>
|
||||
}
|
@ -1,89 +1,152 @@
|
||||
.live-page {
|
||||
display: grid;
|
||||
height: calc(100vh - 72px - 32px - 32px);
|
||||
padding: 32px 40px;
|
||||
grid-template-columns: auto 376px;
|
||||
gap: 32px;
|
||||
.video-content {
|
||||
grid-area: main-content;
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
.live-page {
|
||||
grid-template-columns: auto 450px;
|
||||
|
||||
.video-content video {
|
||||
max-height: 230px;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.live-chat {
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.video-content {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.video-content video {
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
max-height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.live-page>div:nth-child(1) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.live-page video {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.live-page .pill {
|
||||
.pill {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #A7A7A7;
|
||||
}
|
||||
|
||||
.live-page .pill.live {
|
||||
.pill.live {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.live-page .info {
|
||||
margin-top: 32px;
|
||||
@media (min-width: 1020px) {
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.video-content video {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.live-page .info h1 {
|
||||
.live-chat .header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stream-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.live-chat .header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stream-info {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.live-chat {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
grid-area: profile;
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
margin: 0 0 8px 0;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.live-page .info p {
|
||||
.info p {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.live-page .tags {
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.live-page .actions {
|
||||
.actions {
|
||||
margin: 8px 0 0 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.live-page .btn.zap {
|
||||
.info .btn.zap {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.live-page .offline {
|
||||
.offline {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.live-page .online>div {
|
||||
.online>div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.live-page .offline>div {
|
||||
.offline>div {
|
||||
position: fixed;
|
||||
top: 5em;
|
||||
text-transform: uppercase;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.live-page .offline>video {
|
||||
@media (min-width: 768px) {
|
||||
.offline>div {
|
||||
top: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
.offline>video {
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,8 @@
|
||||
import "./stream-page.css";
|
||||
import { useState } from "react";
|
||||
import { useRef } from "react";
|
||||
import { parseNostrLink, EventPublisher } from "@snort/system";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import moment from "moment";
|
||||
|
||||
import useEventFeed from "hooks/event-feed";
|
||||
import { LiveVideoPlayer } from "element/live-video-player";
|
||||
@ -9,30 +10,24 @@ import { findTag } from "utils";
|
||||
import { Profile, getName } from "element/profile";
|
||||
import { LiveChat } from "element/live-chat";
|
||||
import AsyncButton from "element/async-button";
|
||||
import { Icon } from "element/icon";
|
||||
import { useLogin } from "hooks/login";
|
||||
import { System } from "index";
|
||||
import Modal from "element/modal";
|
||||
import { SendZaps } from "element/send-zap";
|
||||
import { StreamState, System } from "index";
|
||||
import { SendZapsDialog } from "element/send-zap";
|
||||
import type { NostrLink } from "@snort/system";
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
import { NewStream } from "element/new-stream";
|
||||
import { NewStreamDialog } from "element/new-stream";
|
||||
|
||||
export function StreamPage() {
|
||||
const params = useParams();
|
||||
const link = parseNostrLink(params.id!);
|
||||
const thisEvent = useEventFeed(link);
|
||||
function ProfileInfo({ link }: { link: NostrLink }) {
|
||||
const thisEvent = useEventFeed(link, true);
|
||||
const login = useLogin();
|
||||
const navigate = useNavigate();
|
||||
const [zap, setZap] = useState(false);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const profile = useUserProfile(System, thisEvent.data?.pubkey);
|
||||
const zapTarget = profile?.lud16 ?? profile?.lud06;
|
||||
|
||||
const stream = findTag(thisEvent.data, "streaming");
|
||||
const status = findTag(thisEvent.data, "status");
|
||||
const image = findTag(thisEvent.data, "image");
|
||||
const start = findTag(thisEvent.data, "starts");
|
||||
const isLive = status === "live";
|
||||
const isMine = link.author === login?.pubkey;
|
||||
const zapTarget = profile?.lud16 ?? profile?.lud06;
|
||||
|
||||
async function deleteStream() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
@ -45,59 +40,80 @@ export function StreamPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="live-page">
|
||||
<div>
|
||||
<LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
|
||||
<div className="flex info">
|
||||
<div className="f-grow">
|
||||
<h1>{findTag(thisEvent.data, "title")}</h1>
|
||||
<p>{findTag(thisEvent.data, "summary")}</p>
|
||||
<div className="tags">
|
||||
<span className={`pill${isLive ? " live" : ""}`}>
|
||||
{status}
|
||||
<>
|
||||
<div className="flex info">
|
||||
<div className="f-grow stream-info">
|
||||
<h1>{findTag(thisEvent.data, "title")}</h1>
|
||||
<p>{findTag(thisEvent.data, "summary")}</p>
|
||||
<div className="tags">
|
||||
<span className={`pill${isLive ? " live" : ""}`}>{status}</span>
|
||||
{status === StreamState.Planned && (
|
||||
<span className="pill">
|
||||
Starts {moment(Number(start) * 1000).fromNow()}
|
||||
</span>
|
||||
{thisEvent.data?.tags
|
||||
.filter(a => a[0] === "t")
|
||||
.map(a => a[1])
|
||||
.map(a => (
|
||||
<span className="pill" key={a}>
|
||||
{a}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{isMine && <div className="actions">
|
||||
<button type="button" className="btn" onClick={() => setEdit(true)}>
|
||||
Edit
|
||||
</button>
|
||||
<AsyncButton type="button" className="btn btn-red" onClick={deleteStream}>
|
||||
)}
|
||||
{thisEvent.data?.tags
|
||||
.filter((a) => a[0] === "t")
|
||||
.map((a) => a[1])
|
||||
.map((a) => (
|
||||
<span className="pill" key={a}>
|
||||
{a}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{isMine && (
|
||||
<div className="actions">
|
||||
{thisEvent.data && (
|
||||
<NewStreamDialog text="Edit" ev={thisEvent.data} />
|
||||
)}
|
||||
<AsyncButton
|
||||
type="button"
|
||||
className="btn btn-red"
|
||||
onClick={deleteStream}
|
||||
>
|
||||
Delete
|
||||
</AsyncButton>
|
||||
</div>}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex g24">
|
||||
<Profile
|
||||
pubkey={thisEvent.data?.pubkey ?? ""}
|
||||
/>
|
||||
<button onClick={() => setZap(true)} className="btn btn-primary zap">
|
||||
Zap
|
||||
<Icon name="zap" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-info flex g24">
|
||||
<Profile pubkey={thisEvent.data?.pubkey ?? ""} />
|
||||
{zapTarget && thisEvent.data && (
|
||||
<SendZapsDialog
|
||||
lnurl={zapTarget}
|
||||
ev={thisEvent.data}
|
||||
targetName={getName(thisEvent.data.pubkey, profile)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<LiveChat link={link} />
|
||||
{zap && zapTarget && thisEvent.data && <Modal onClose={() => setZap(false)}>
|
||||
<SendZaps
|
||||
lnurl={zapTarget}
|
||||
ev={thisEvent.data}
|
||||
targetName={getName(thisEvent.data.pubkey, profile)}
|
||||
onFinish={() => setZap(false)} />
|
||||
</Modal>}
|
||||
{edit && thisEvent.data && <Modal onClose={() => setEdit(false)}>
|
||||
<NewStream ev={thisEvent.data} onFinish={() => window.location.reload()} />
|
||||
</Modal>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function VideoPlayer({ link }: { link: NostrLink }) {
|
||||
const thisEvent = useEventFeed(link);
|
||||
const stream = findTag(thisEvent.data, "streaming");
|
||||
const image = findTag(thisEvent.data, "image");
|
||||
|
||||
return (
|
||||
<div className="video-content">
|
||||
<LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function StreamPage() {
|
||||
const ref = useRef(null);
|
||||
const params = useParams();
|
||||
const link = parseNostrLink(params.id!);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={ref}></div>
|
||||
<VideoPlayer link={link} />
|
||||
<ProfileInfo link={link} />
|
||||
<LiveChat link={link} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
46
src/utils.ts
46
src/utils.ts
@ -1,8 +1,42 @@
|
||||
import { NostrEvent } from "@snort/system";
|
||||
import { NostrEvent, NostrPrefix, encodeTLV } from "@snort/system";
|
||||
import * as utils from "@noble/curves/abstract/utils";
|
||||
import { bech32 } from "@scure/base";
|
||||
|
||||
export function findTag(e: NostrEvent | undefined, tag: string) {
|
||||
const maybeTag = e?.tags.find(evTag => {
|
||||
return evTag[0] === tag;
|
||||
});
|
||||
return maybeTag && maybeTag[1];
|
||||
}
|
||||
const maybeTag = e?.tags.find((evTag) => {
|
||||
return evTag[0] === tag;
|
||||
});
|
||||
return maybeTag && maybeTag[1];
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert hex to bech32
|
||||
*/
|
||||
export function hexToBech32(hrp: string, hex?: string) {
|
||||
if (typeof hex !== "string" || hex.length === 0 || hex.length % 2 !== 0) {
|
||||
return "";
|
||||
}
|
||||
|
||||
try {
|
||||
if (
|
||||
hrp === NostrPrefix.Note ||
|
||||
hrp === NostrPrefix.PrivateKey ||
|
||||
hrp === NostrPrefix.PublicKey
|
||||
) {
|
||||
const buf = utils.hexToBytes(hex);
|
||||
return bech32.encode(hrp, bech32.toWords(buf));
|
||||
} else {
|
||||
return encodeTLV(hrp as NostrPrefix, hex);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Invalid hex", hex, e);
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
export function splitByUrl(str: string) {
|
||||
const urlRegex =
|
||||
/((?:http|ftp|https|nostr|web\+nostr|magnet):\/?\/?(?:[\w+?.\w+])+(?:[a-zA-Z0-9~!@#$%^&*()_\-=+\\/?.:;',]*)?(?:[-A-Za-z0-9+&@#/%=~()_|]))/i;
|
||||
|
||||
return str.split(urlRegex);
|
||||
}
|
||||
|
282
yarn.lock
282
yarn.lock
@ -1129,7 +1129,7 @@
|
||||
resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
|
||||
integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
|
||||
|
||||
"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.22.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
|
||||
integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
|
||||
@ -1634,6 +1634,11 @@
|
||||
"@jridgewell/resolve-uri" "3.1.0"
|
||||
"@jridgewell/sourcemap-codec" "1.4.14"
|
||||
|
||||
"@juggle/resize-observer@^3.3.1":
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
|
||||
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
|
||||
|
||||
"@leichtgewicht/ip-codec@^2.0.1":
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
|
||||
@ -1694,6 +1699,167 @@
|
||||
schema-utils "^3.0.0"
|
||||
source-map "^0.7.3"
|
||||
|
||||
"@radix-ui/primitive@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
|
||||
integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-compose-refs@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
|
||||
integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-context@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
|
||||
integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-dialog@^1.0.4":
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.4.tgz#06bce6c16bb93eb36d7a8589e665a20f4c1c52c1"
|
||||
integrity sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "1.0.1"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-context" "1.0.1"
|
||||
"@radix-ui/react-dismissable-layer" "1.0.4"
|
||||
"@radix-ui/react-focus-guards" "1.0.1"
|
||||
"@radix-ui/react-focus-scope" "1.0.3"
|
||||
"@radix-ui/react-id" "1.0.1"
|
||||
"@radix-ui/react-portal" "1.0.3"
|
||||
"@radix-ui/react-presence" "1.0.1"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-slot" "1.0.2"
|
||||
"@radix-ui/react-use-controllable-state" "1.0.1"
|
||||
aria-hidden "^1.1.1"
|
||||
react-remove-scroll "2.5.5"
|
||||
|
||||
"@radix-ui/react-dismissable-layer@1.0.4":
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978"
|
||||
integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "1.0.1"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
"@radix-ui/react-use-escape-keydown" "1.0.3"
|
||||
|
||||
"@radix-ui/react-focus-guards@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
|
||||
integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-focus-scope@1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz#9c2e8d4ed1189a1d419ee61edd5c1828726472f9"
|
||||
integrity sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
|
||||
"@radix-ui/react-id@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
|
||||
integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-layout-effect" "1.0.1"
|
||||
|
||||
"@radix-ui/react-portal@1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
|
||||
integrity sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
|
||||
"@radix-ui/react-presence@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
|
||||
integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-use-layout-effect" "1.0.1"
|
||||
|
||||
"@radix-ui/react-primitive@1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
|
||||
integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-slot" "1.0.2"
|
||||
|
||||
"@radix-ui/react-slot@1.0.2":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
|
||||
integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
|
||||
"@radix-ui/react-use-callback-ref@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
|
||||
integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-controllable-state@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
|
||||
integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
|
||||
"@radix-ui/react-use-escape-keydown@1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
|
||||
integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-callback-ref" "1.0.1"
|
||||
|
||||
"@radix-ui/react-use-layout-effect@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
|
||||
integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@react-hook/latest@^1.0.2":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80"
|
||||
integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==
|
||||
|
||||
"@react-hook/passive-layout-effect@^1.2.0":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
|
||||
integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
|
||||
|
||||
"@react-hook/resize-observer@^1.2.6":
|
||||
version "1.2.6"
|
||||
resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz#9a8cf4c5abb09becd60d1d65f6bf10eec211e291"
|
||||
integrity sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==
|
||||
dependencies:
|
||||
"@juggle/resize-observer" "^3.3.1"
|
||||
"@react-hook/latest" "^1.0.2"
|
||||
"@react-hook/passive-layout-effect" "^1.2.0"
|
||||
|
||||
"@remix-run/router@1.6.3":
|
||||
version "1.6.3"
|
||||
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.3.tgz#8205baf6e17ef93be35bf62c37d2d594e9be0dad"
|
||||
@ -2188,6 +2354,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
|
||||
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
|
||||
|
||||
"@types/lodash@^4.14.195":
|
||||
version "4.14.195"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
|
||||
integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
|
||||
|
||||
"@types/mime@*":
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
|
||||
@ -2318,6 +2489,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
|
||||
integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
|
||||
|
||||
"@types/webscopeio__react-textarea-autocomplete@^4.7.2":
|
||||
version "4.7.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/webscopeio__react-textarea-autocomplete/-/webscopeio__react-textarea-autocomplete-4.7.2.tgz#605e8a6b4194fb4b6e55df8a19bc8fcd56319cfa"
|
||||
integrity sha512-e1DZGD+eH19BnllTWCGXAdrMa2kI53wEMuhn/d+wUmnu8//ZI6BiuK/EPdw07fI4+tlyo5qdPZdXdpkoXHJVOw==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/ws@^8.5.5":
|
||||
version "8.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.5.tgz#af587964aa06682702ee6dcbc7be41a80e4b28eb"
|
||||
@ -2561,6 +2739,14 @@
|
||||
resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-1.0.12.tgz#ddb5f0dbaa0a853ef21a4f36a603199d43cc8682"
|
||||
integrity sha512-uCsJt78RaW/UYDXwAjjs6aj7fiXyozwMknWvPROCaGMx+rXoPddtDjMIMbMFLvUJVQmnyzpqGkx/0jBIvVaVvA==
|
||||
|
||||
"@webscopeio/react-textarea-autocomplete@^4.9.2":
|
||||
version "4.9.2"
|
||||
resolved "https://registry.yarnpkg.com/@webscopeio/react-textarea-autocomplete/-/react-textarea-autocomplete-4.9.2.tgz#b39e57d8048ad2e8790d70073afe63eafa877345"
|
||||
integrity sha512-9l5lbyA709d5HHvI/COflSnblBJeYGxB2/0ghP3m3YViLzXRMzJwaXqnqz6oA96y7QdR3pQWYtVmkUKA0AUVAA==
|
||||
dependencies:
|
||||
custom-event "^1.0.1"
|
||||
textarea-caret "3.0.2"
|
||||
|
||||
"@xtuc/ieee754@^1.2.0":
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
|
||||
@ -2747,6 +2933,13 @@ argparse@^2.0.1:
|
||||
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
|
||||
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
|
||||
|
||||
aria-hidden@^1.1.1:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
|
||||
integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
|
||||
dependencies:
|
||||
tslib "^2.0.0"
|
||||
|
||||
aria-query@5.1.3:
|
||||
version "5.1.3"
|
||||
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
|
||||
@ -3711,6 +3904,11 @@ csstype@^3.0.2:
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
|
||||
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
|
||||
|
||||
custom-event@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
|
||||
integrity sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==
|
||||
|
||||
damerau-levenshtein@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
|
||||
@ -3840,6 +4038,11 @@ detect-newline@^3.0.0:
|
||||
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
|
||||
integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
|
||||
|
||||
detect-node-es@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
|
||||
integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
|
||||
|
||||
detect-node@^2.0.4:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
|
||||
@ -4823,6 +5026,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
|
||||
has-proto "^1.0.1"
|
||||
has-symbols "^1.0.3"
|
||||
|
||||
get-nonce@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
|
||||
integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
|
||||
|
||||
get-own-enumerable-property-symbols@^3.0.0:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
|
||||
@ -5269,6 +5477,13 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
|
||||
has "^1.0.3"
|
||||
side-channel "^1.0.4"
|
||||
|
||||
invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
ipaddr.js@1.9.1:
|
||||
version "1.9.1"
|
||||
resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
|
||||
@ -6380,7 +6595,7 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
@ -6549,6 +6764,11 @@ mkdirp@~0.5.1:
|
||||
dependencies:
|
||||
minimist "^1.2.6"
|
||||
|
||||
moment@^2.29.4:
|
||||
version "2.29.4"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
|
||||
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
|
||||
|
||||
ms@2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
|
||||
@ -7550,6 +7770,11 @@ prelude-ls@~1.1.2:
|
||||
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
|
||||
integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
|
||||
|
||||
prettier@^2.8.8:
|
||||
version "2.8.8"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
|
||||
integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
|
||||
|
||||
pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
|
||||
@ -7781,6 +8006,25 @@ react-refresh@^0.11.0:
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
|
||||
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
|
||||
|
||||
react-remove-scroll-bar@^2.3.3:
|
||||
version "2.3.4"
|
||||
resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
|
||||
integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
|
||||
dependencies:
|
||||
react-style-singleton "^2.2.1"
|
||||
tslib "^2.0.0"
|
||||
|
||||
react-remove-scroll@2.5.5:
|
||||
version "2.5.5"
|
||||
resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
|
||||
integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
|
||||
dependencies:
|
||||
react-remove-scroll-bar "^2.3.3"
|
||||
react-style-singleton "^2.2.1"
|
||||
tslib "^2.1.0"
|
||||
use-callback-ref "^1.3.0"
|
||||
use-sidecar "^1.1.2"
|
||||
|
||||
react-router-dom@^6.13.0:
|
||||
version "6.13.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.13.0.tgz#6651f456bb2af42ef14f6880123b1f575539e81f"
|
||||
@ -7851,6 +8095,15 @@ react-scripts@5.0.1:
|
||||
optionalDependencies:
|
||||
fsevents "^2.3.2"
|
||||
|
||||
react-style-singleton@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
|
||||
integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
|
||||
dependencies:
|
||||
get-nonce "^1.0.0"
|
||||
invariant "^2.2.4"
|
||||
tslib "^2.0.0"
|
||||
|
||||
react@^18.2.0:
|
||||
version "18.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
|
||||
@ -8787,6 +9040,11 @@ text-table@^0.2.0:
|
||||
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
|
||||
integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
|
||||
|
||||
textarea-caret@3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/textarea-caret/-/textarea-caret-3.0.2.tgz#f360c48699aa1abf718680a43a31a850665c2caf"
|
||||
integrity sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg==
|
||||
|
||||
thenify-all@^1.0.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
|
||||
@ -8882,6 +9140,11 @@ tslib@^1.8.1:
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
||||
tslib@^2.0.0, tslib@^2.1.0:
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
|
||||
integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
|
||||
|
||||
tslib@^2.0.3:
|
||||
version "2.5.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
|
||||
@ -9045,6 +9308,21 @@ url-parse@^1.5.3:
|
||||
querystringify "^2.1.1"
|
||||
requires-port "^1.0.0"
|
||||
|
||||
use-callback-ref@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
|
||||
integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
|
||||
dependencies:
|
||||
tslib "^2.0.0"
|
||||
|
||||
use-sidecar@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
|
||||
integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
|
||||
dependencies:
|
||||
detect-node-es "^1.1.0"
|
||||
tslib "^2.0.0"
|
||||
|
||||
util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
|
||||
|
Loading…
Reference in New Issue
Block a user