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;
}

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

@ -1,17 +1,60 @@
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">
<h4>{name}</h4>
<Mention pubkey={ev.pubkey} />
<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) => {

31
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.tag(t);
}
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);