Kieran/zap.stream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add/remove emoji packs

Browse Source
This commit is contained in:
verbiricha
2023-07-30 10:40:57 +02:00
parent 0a5623e74f
commit 249de1d9be
10 changed files with 166 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/element/chat-message.tsx
View File

@ -140,7 +140,14 @@ export function ChatMessage({
onClick={() => setShowZapDialog(true)}
>
<Profile
icon={ev.pubkey === streamer && <Icon name="signal" size={16} />}
icon={
ev.pubkey === streamer && <Icon name="signal" size={16} />
// <img
// className="badge-icon"
// src="https://nostr.build/i/nostr.build_4b0d4f7293eb0f2bacb5b232a8d2ef3fe7648192d636e152a3c18b9fc06142d7.png"
// alt="TODO"
// />
}
pubkey={ev.pubkey}
profile={profile}
/>

8
src/element/emoji-pack.css
View File

@ -4,6 +4,10 @@
justify-content: space-between;
}
.emoji-pack-title .name {
margin: 0;
}
.emoji-pack-title a {
font-size: 14px;
}
@ -30,3 +34,7 @@
.emoji-pack h4 {
margin: 0;
}
.emoji-pack .btn {
font-size: 12px;
}

43
src/element/emoji-pack.tsx
View File

@ -1,18 +1,61 @@
import "./emoji-pack.css";
import { type NostrEvent } from "@snort/system";
import { unixNow } from "@snort/shared";
import AsyncButton from "element/async-button";
import { useLogin } from "hooks/login";
import { toEmojiPack } from "hooks/emoji";
import { Mention } from "element/mention";
import { findTag } from "utils";
import { USER_EMOJIS } from "const";
import { Login, System } from "index";
export function EmojiPack({ ev }: { ev: NostrEvent }) {
const login = useLogin();
const name = findTag(ev, "d");
const isUsed = login.emojis.find(
(e) => e.author === ev.pubkey && e.name === name,
);
const emoji = ev.tags.filter((e) => e.at(0) === "emoji");
async function toggleEmojiPack() {
let newPacks = [];
if (isUsed) {
newPacks = login.emojis.filter(
(e) => e.pubkey !== ev.pubkey && e.name !== name,
);
} else {
newPacks = [...login.emojis, toEmojiPack(ev)];
}
const pub = login?.publisher();
if (pub) {
const ev = await pub.generic((eb) => {
eb.kind(USER_EMOJIS).content("");
for (const e of newPacks) {
eb.tag(["a", e.address]);
}
return eb;
});
console.debug(ev);
System.BroadcastEvent(ev);
Login.setEmojis(newPacks, unixNow());
}
}
return (
<div className="emoji-pack">
<div className="emoji-pack-title">
<div>
<h4>{name}</h4>
<Mention pubkey={ev.pubkey} />
</div>
<AsyncButton
className={`btn btn-primary ${isUsed ? "delete-button" : ""}`}
onClick={toggleEmojiPack}
>
{isUsed ? "Remove" : "Add"}
</AsyncButton>
</div>
<div className="emoji-pack-emojis">
{emoji.map((e) => {
const [, name, image] = e;

29
src/element/follow-button.tsx
View File

@ -1,50 +1,47 @@
import { EventKind } from "@snort/system";
import { unixNow } from "@snort/shared";
import { useLogin } from "hooks/login";
import AsyncButton from "element/async-button";
import { System } from "index";
import { Login, System } from "index";
export function LoggedInFollowButton({
pubkey,
}: {
pubkey: string;
}) {
export function LoggedInFollowButton({ pubkey }: { pubkey: string }) {
const login = useLogin();
const tags = login?.follows.tags ?? []
const relays = login?.relays
const tags = login.follows.tags;
const follows = tags.filter((t) => t.at(0) === "p");
const isFollowing = follows.find((t) => t.at(1) === pubkey);
async function unfollow() {
const pub = login?.publisher();
if (pub) {
const newFollows = tags.filter((t) => t.at(1) !== pubkey);
const ev = await pub.generic((eb) => {
eb.kind(EventKind.ContactList).content(JSON.stringify(relays));
for (const t of tags) {
const isFollow = t.at(0) === "p" && t.at(1) === pubkey;
if (!isFollow) {
eb.kind(EventKind.ContactList).content(JSON.stringify(login.relays));
for (const t of newFollows) {
eb.tag(t);
}
}
return eb;
});
console.debug(ev);
System.BroadcastEvent(ev);
Login.setFollows(newFollows, unixNow());
}
}
async function follow() {
const pub = login?.publisher();
if (pub) {
const newFollows = [...tags, ["p", pubkey]];
const ev = await pub.generic((eb) => {
eb.kind(EventKind.ContactList).content(JSON.stringify(relays));
for (const tag of tags) {
eb.kind(EventKind.ContactList).content(JSON.stringify(login.relays));
for (const tag of newFollows) {
eb.tag(tag);
}
eb.tag(["p", pubkey]);
return eb;
});
console.debug(ev);
System.BroadcastEvent(ev);
Login.setFollows(newFollows, unixNow());
}
}

59
src/element/live-chat.css
View File

@ -24,10 +24,10 @@
}
.live-chat .header .popout-link {
color: #FFFFFF80;
color: #ffffff80;
}
.live-chat>.messages {
.live-chat > .messages {
display: flex;
gap: 12px;
flex-direction: column-reverse;
@ -37,12 +37,12 @@
}
@media (min-width: 1020px) {
.live-chat>.messages {
.live-chat > .messages {
flex-grow: 1;
}
}
.live-chat>.write-message {
.live-chat > .write-message {
display: flex;
gap: 8px;
margin-top: auto;
@ -51,7 +51,7 @@
border-top: 1px solid var(--border, #171717);
}
.live-chat>.write-message>div:nth-child(1) {
.live-chat > .write-message > div:nth-child(1) {
height: 32px;
flex-grow: 1;
}
@ -77,15 +77,15 @@
}
.live-chat .message .profile {
color: #34D2FE;
color: #34d2fe;
}
.live-chat .message.streamer .profile {
color: #F838D9;
color: #f838d9;
}
.live-chat .message a {
color: #F838D9;
color: #f838d9;
}
.live-chat .profile img {
@ -93,7 +93,7 @@
height: 24px;
}
.live-chat .message>span {
.live-chat .message > span {
font-weight: 400;
font-size: 15px;
line-height: 24px;
@ -172,13 +172,13 @@
position: relative;
border-radius: 12px;
border: 1px solid transparent;
background: #0A0A0A;
background: #0a0a0a;
background-clip: padding-box;
padding: 8px 12px;
}
.zap-container:before {
content: '';
content: "";
position: absolute;
top: 0;
right: 0;
@ -186,20 +186,28 @@
left: 0;
z-index: -1;
margin: -1px;
background: linear-gradient(to bottom right, #FF902B, #F83838);
background: linear-gradient(to bottom right, #ff902b, #f83838);
border-radius: inherit;
}
.zap-container .profile {
color: #FF8D2B;
color: #ff8d2b;
}
.zap-container .zap-amount {
color: #FF8D2B;
color: #ff8d2b;
}
.zap-container.big-zap:before {
background: linear-gradient(60deg, #2BD9FF, #8C8DED, #F838D9, #F83838, #FF902B, #DDF838);
background: linear-gradient(
60deg,
#2bd9ff,
#8c8ded,
#f838d9,
#f83838,
#ff902b,
#ddf838
);
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
}
@ -224,7 +232,7 @@
.zap-pill {
border-radius: 100px;
background: rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.1);
width: fit-content;
display: flex;
height: 24px;
@ -236,7 +244,7 @@
.zap-pill-icon {
width: 12px;
height: 12px;
color: #FF8D2B;
color: #ff8d2b;
}
.message-zap-container {
@ -252,7 +260,7 @@
margin-top: 4px;
width: fit-content;
z-index: 1;
transition: opacity .3s ease-out;
transition: opacity 0.3s ease-out;
}
@media (min-width: 1020px) {
@ -271,7 +279,7 @@
gap: 2px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.05);
color: #FFFFFF66;
color: #ffffff66;
}
.message-zap-button:hover {
@ -299,7 +307,7 @@
align-items: center;
gap: 2px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.1);
}
.message-reaction {
@ -311,7 +319,7 @@
.zap-pill-amount {
text-transform: lowercase;
color: #FFF;
color: #fff;
font-size: 12px;
font-family: Outfit;
font-style: normal;
@ -335,10 +343,17 @@
}
.write-emoji-button {
color: #FFFFFF80;
color: #ffffff80;
cursor: pointer;
}
.write-emoji-button:hover {
color: white;
}
.message .profile .badge-icon {
background: transparent;
width: 18px;
height: 18px;
border-radius: unset;
}

6
src/element/live-chat.tsx
View File

@ -26,7 +26,7 @@ import { ChatMessage } from "./chat-message";
import { Goal } from "./goal";
import { NewGoalDialog } from "./new-goal";
import { WriteMessage } from "./write-message";
import { findTag, getHost } from "utils";
import { findTag, getTagValues, getHost } from "utils";
export interface LiveChatOptions {
canWrite?: boolean;
@ -80,9 +80,7 @@ export function LiveChat({
}, [feed.zaps]);
const mutedPubkeys = useMemo(() => {
return new Set(
login.muted.tags.filter((t) => t.at(0) === "p").map((t) => t.at(1)),
);
return new Set(getTagValues(login.muted.tags, "p"));
}, [login.muted.tags]);
const userEmojiPacks = login?.emojis ?? [];
const channelEmojiPacks = useEmoji(host);

5
src/hooks/emoji.tsx
View File

@ -17,7 +17,7 @@ function cleanShortcode(shortcode?: string) {
return shortcode?.replace(/\s+/g, "_").replace(/_$/, "");
}
function toEmojiPack(ev: NostrEvent): EmojiPack {
export function toEmojiPack(ev: NostrEvent): EmojiPack {
const d = findTag(ev, "d") || "";
return {
address: `${ev.kind}:${ev.pubkey}:${d}`,
@ -78,7 +78,8 @@ export function useUserEmojiPacks(
}, [relatedData]);
const emojis = useMemo(() => {
return uniqBy(emojiPacks.map(toEmojiPack), packId);
const packs = emojiPacks.map(toEmojiPack);
return uniqBy(packs, packId);
}, [emojiPacks]);
return emojis;

36
src/hooks/login.ts
View File

@ -4,15 +4,9 @@ import { EventKind, NoteCollection, RequestBuilder } from "@snort/system";
import { useRequestBuilder } from "@snort/system-react";
import { useUserEmojiPacks } from "hooks/emoji";
import { USER_EMOJIS } from "const";
import { MUTED, USER_EMOJIS } from "const";
import { System, Login } from "index";
import {
getPublisher,
setMuted,
setEmojis,
setFollows,
setRelays,
} from "login";
import { getPublisher } from "login";
export function useLogin() {
const session = useSyncExternalStore(
@ -52,12 +46,7 @@ export function useLoginEvents(pubkey?: string, leaveOpen = false) {
})
.withFilter()
.authors([pubkey])
.kinds([
EventKind.ContactList,
EventKind.Relays,
10_000 as EventKind,
USER_EMOJIS,
]);
.kinds([EventKind.ContactList, EventKind.Relays, MUTED, USER_EMOJIS]);
return b;
}, [pubkey, leaveOpen]);
@ -71,30 +60,25 @@ export function useLoginEvents(pubkey?: string, leaveOpen = false) {
if (!data) {
return;
}
if (!session) {
return;
}
for (const ev of data) {
if (ev?.kind === USER_EMOJIS) {
setUserEmojis(ev.tags);
}
if (ev?.kind === 10_000) {
if (ev?.kind === MUTED) {
// todo: decrypt ev.content tags
setMuted(session, ev.tags, ev.created_at);
Login.setMuted(ev.tags, ev.created_at);
}
if (ev?.kind === EventKind.ContactList) {
setFollows(session, ev.tags, ev.created_at);
Login.setFollows(ev.tags, ev.created_at);
}
if (ev?.kind === EventKind.Relays) {
setRelays(session, ev.tags, ev.created_at);
Login.setRelays(ev.tags, ev.created_at);
}
}
}, [session, data]);
}, [data]);
const emojis = useUserEmojiPacks(pubkey, { tags: userEmojis });
useEffect(() => {
if (session) {
setEmojis(session, emojis);
}
}, [session, emojis]);
Login.setEmojis(emojis);
}, [emojis]);
}

83
src/login.ts
View File

@ -68,13 +68,44 @@ export class LoginStore extends ExternalStore<LoginSession | undefined> {
this.#save();
}
updateSession(s: LoginSession) {
this.#session = s;
takeSnapshot() {
return this.#session ? { ...this.#session } : undefined;
}
setFollows(follows: Array<string>, ts: number) {
if (this.#session.follows.timestamp >= ts) {
return;
}
this.#session.follows.tags = follows;
this.#session.follows.timestamp = ts;
this.#save();
}
takeSnapshot() {
return this.#session ? { ...this.#session } : undefined;
setEmojis(emojis: Array<EmojiPack>) {
this.#session.emojis = emojis;
this.#save();
}
setMuted(muted: Array<string[]>, ts: number) {
if (this.#session.muted.timestamp >= ts) {
return;
}
this.#session.muted.tags = muted;
this.#session.muted.timestamp = ts;
this.#save();
}
setRelays(relays: Array<string>, ts: number) {
if (this.#session.relays.timestamp >= ts) {
return;
}
this.#session.relays = relays.reduce((acc, r) => {
const [, relay] = r;
const write = r.length === 2 || r.includes("write");
const read = r.length === 2 || r.includes("read");
return { ...acc, [relay]: { read, write } };
}, {});
this.#save();
}
#save() {
@ -100,47 +131,3 @@ export function getPublisher(session: LoginSession) {
}
}
}
export function setFollows(
state: LoginSession,
follows: Array<string>,
ts: number,
) {
if (state.follows.timestamp >= ts) {
return;
}
state.follows.tags = follows;
state.follows.timestamp = ts;
}
export function setEmojis(state: LoginSession, emojis: Array<EmojiPack>) {
state.emojis = emojis;
}
export function setMuted(
state: LoginSession,
muted: Array<string[]>,
ts: number,
) {
if (state.muted.timestamp >= ts) {
return;
}
state.muted.tags = muted;
state.muted.timestamp = ts;
}
export function setRelays(
state: LoginSession,
relays: Array<string>,
ts: number,
) {
if (state.relays.timestamp >= ts) {
return;
}
state.relays = relays.reduce((acc, r) => {
const [, relay] = r;
const write = r.length === 2 || r.includes("write");
const read = r.length === 2 || r.includes("read");
return { ...acc, [relay]: { read, write } };
}, {});
}

4
src/utils.ts
View File

@ -90,3 +90,7 @@ export async function openFile(): Promise<File | undefined> {
elm.click();
});
}
export function getTagValues(tags: Array<string[]>, tag: string) {
return tags.filter((t) => t.at(0) === tag).map((t) => t.at(1));
}