- {parsed.content} -
} + {parsed.content &&{parsed.content}
}
+
+
+
- {(options?.showAvatar ?? true) && 
}
- {(options?.showName ?? true) && (options?.overrideName ?? getName(pubkey, profile))}
+ return (
+ ![{t[0]}]({t[1]})
;
- } else {
- return i;
- }
- });
-}
+import { type EmojiTag, Emojify } from "./emoji";
export function Text({ ev }: { ev: TaggedRawEvent }) {
const emojis = useMemo(() => {
- return ev.tags
- .filter((t) => t.at(0) === "emoji")
- .map((t) => t.slice(1) as Emoji);
+ return ev.tags.filter((t) => t.at(0) === "emoji").map((t) => t as EmojiTag);
}, [ev]);
- return {replaceEmoji(ev.content, emojis)};
+ return (
+
+ ) => void;
+ onKeyDown: (e: KeyboardEvent) => void;
+}
+
+export function Textarea({ emojis, ...props }: TextareaProps) {
+ 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}:`,
+ },
+ };
+
+ return (
+ Loading...}
+ placeholder="Message"
+ autoFocus={false}
+ // @ts-expect-error
+ trigger={trigger}
+ {...props}
+ />
+ );
+}
diff --git a/src/hooks/emoji.tsx b/src/hooks/emoji.tsx
new file mode 100644
index 0000000..818a416
--- /dev/null
+++ b/src/hooks/emoji.tsx
@@ -0,0 +1,70 @@
+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(System, FlatNoteStore, sub);
+ const userEmoji = 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:${pubkey}`);
+
+ rb.withFilter()
+ .kinds([30030 as EventKind])
+ .authors(authors)
+ // @ts-expect-error
+ .tag(["d", identifiers]);
+
+ return rb;
+ }, [related]);
+
+ const { data: relatedData } = useRequestBuilder(
+ System,
+ FlatNoteStore,
+ subRelated
+ );
+ const emojiPacks = 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;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 0e8f109..9453d28 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,56 +1,56 @@
-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 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:
-);
\ No newline at end of file
+);
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index b5c479c..48de82d 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -11,59 +11,72 @@ import { NewStream } from "element/new-stream";
import { useState } from "react";
export function LayoutPage() {
- const navigate = useNavigate();
- const login = useLogin();
- const [newStream, setNewStream] = useState(false);
+ const navigate = useNavigate();
+ const login = useLogin();
+ const [newStream, setNewStream] = useState(false);
- 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 <>
-
-
- Login
-
-
- }
+ return (
+ <>
+
+ Login
+
+
+ );
+ }
- return <>
-
-
- setNewStream(false)} >
- navigate("/")} />
- }
+ return (
+ <>
+
+
+ setNewStream(false)}>
+ navigate("/")} />
+
+ )}
-}
\ No newline at end of file
+ );
+}
diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx
index 028d4fa..6355377 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -53,33 +53,42 @@ export function StreamPage() {
+ {(options?.showAvatar ?? true) && (
+
+ )}
+ {(options?.showName ?? true) &&
+ (options?.overrideName ?? getName(pubkey, profile))}
-}
\ No newline at end of file
+ );
+}
diff --git a/src/element/qr-code.tsx b/src/element/qr-code.tsx
index 790633b..91dfc8e 100644
--- a/src/element/qr-code.tsx
+++ b/src/element/qr-code.tsx
@@ -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 ;
+ return (
+
+ );
}
diff --git a/src/element/text.tsx b/src/element/text.tsx
index 91984b4..d2f8c00 100644
--- a/src/element/text.tsx
+++ b/src/element/text.tsx
@@ -1,25 +1,14 @@
-import "./text.css";
import { useMemo } from "react";
import { TaggedRawEvent } from "@snort/system";
-
-type Emoji = [string, string];
-
-function replaceEmoji(content: string, emoji: Emoji[]) {
- return content.split(/:(\w+):/g).map((i) => {
- const t = emoji.find((a) => a[0] === i);
- if (t) {
- return
+
+ );
+};
+
+interface TextareaProps {
+ emojis: EmojiTag[];
+ value: string;
+ onChange: (e: ChangeEvent
+
+ {name}
+ navigate("/")}>
- S
-
-
-
-
-
- {loggedIn()}
- {loggedOut()}
-
- navigate("/")}>S
+
+
+
+
+ {loggedIn()}
+ {loggedOut()}
+
+ {findTag(thisEvent.data, "title")}
{findTag(thisEvent.data, "summary")}
-
- {status}
-
+ {status}
{thisEvent.data?.tags
- .filter(a => a[0] === "t")
- .map(a => a[1])
- .map(a => (
+ .filter((a) => a[0] === "t")
+ .map((a) => a[1])
+ .map((a) => (
{a}
))}
- {isMine &&
-
-
- Delete
-
-
}
+ {isMine && (
+
+
+
+ Delete
+
+
+ )}
-