feat: custom emoji reactions

2023-07-13 13:42:20 +02:00
parent f5f2df5eba
commit 8211ab99f9
5 changed files with 231 additions and 167 deletions
--- a/src/element/chat-message.tsx
+++ b/src/element/chat-message.tsx
@ -1,16 +1,23 @@
 import { useUserProfile } from "@snort/system-react";
 import { NostrEvent, parseZap, EventPublisher, EventKind } from "@snort/system";
 import { useRef, useState, useMemo } from "react";
-import { useMediaQuery, useHover, useOnClickOutside, useIntersectionObserver } from "usehooks-ts";
+import {
+  useMediaQuery,
+  useHover,
+  useOnClickOutside,
+  useIntersectionObserver,
+} from "usehooks-ts";

 import { System } from "../index";
 import { formatSats } from "../number";
 import { EmojiPicker } from "./emoji-picker";
 import { Icon } from "./icon";
+import { Emoji } from "./emoji";
 import { Profile } from "./profile";
 import { Text } from "./text";
 import { SendZapsDialog } from "./send-zap";
 import { findTag } from "../utils";
+import type { EmojiPack } from "../hooks/emoji";

 interface Emoji {
  id: string;
@ -31,35 +38,42 @@ export function ChatMessage({
  streamer,
  ev,
  reactions,
+  emojiPacks,
 }: {
  ev: NostrEvent;
  streamer: string;
  reactions: readonly NostrEvent[];
+  emojiPacks: EmojiPack[];
 }) {
  const ref = useRef(null);
  const inView = useIntersectionObserver(ref, {
-        freezeOnceVisible: true
-    })
+    freezeOnceVisible: true,
+  });
  const emojiRef = useRef(null);
  const isTablet = useMediaQuery("(max-width: 1020px)");
  const isHovering = useHover(ref);
  const [showZapDialog, setShowZapDialog] = useState(false);
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const profile = useUserProfile(System, inView?.isIntersecting ? ev.pubkey : undefined);
+  const profile = useUserProfile(
+    System,
+    inView?.isIntersecting ? ev.pubkey : undefined
+  );
  const zapTarget = profile?.lud16 ?? profile?.lud06;
  const zaps = useMemo(() => {
-        return reactions.filter(a => a.kind === EventKind.ZapReceipt)
-            .map(a => parseZap(a, System.ProfileLoader.Cache))
-            .filter(a => a && a.valid);
-    }, [reactions])
-    const emojis = useMemo(() => {
+    return reactions
+      .filter((a) => a.kind === EventKind.ZapReceipt)
+      .map((a) => parseZap(a, System.ProfileLoader.Cache))
+      .filter((a) => a && a.valid);
+  }, [reactions]);
+  const emojiReactions = useMemo(() => {
    const emojified = reactions
      .filter((e) => e.kind === EventKind.Reaction && findTag(e, "e") === ev.id)
      .map((ev) => emojifyReaction(ev.content));
    return [...new Set(emojified)];
  }, [ev, reactions]);
+  const emojiNames = emojiPacks.map((p) => p.emojis).flat();

-    const hasReactions = emojis.length > 0;
+  const hasReactions = emojiReactions.length > 0;
  const totalZaps = useMemo(() => {
    const messageZaps = zaps.filter((z) => z.event === ev.id);
    return messageZaps.reduce((acc, z) => acc + z.amount, 0);
@ -74,12 +88,31 @@ export function ChatMessage({
    setShowEmojiPicker(false);
  });

+  function getEmojiById(id: string) {
+    return emojiNames.find((e) => e.at(1) === id);
+  }
+
  async function onEmojiSelect(emoji: Emoji) {
    setShowEmojiPicker(false);
    setShowZapDialog(false);
+    let reply = null;
    try {
      const pub = await EventPublisher.nip7();
-            const reply = await pub?.react(ev, emoji.native || "+1");
+      if (emoji.native) {
+        reply = await pub?.react(ev, emoji.native || "+1");
+      } else {
+        const e = getEmojiById(emoji.id);
+        if (e) {
+          reply = await pub?.generic((eb) => {
+            return eb
+              .kind(EventKind.Reaction)
+              .content(`:${emoji.id}:`)
+              .tag(["e", ev.id])
+              .tag(["p", ev.pubkey])
+              .tag(["emoji", e.at(1)!, e.at(2)!]);
+          });
+        }
+      }
      if (reply) {
        console.debug(reply);
        System.BroadcastEvent(reply);
@ -105,11 +138,7 @@ 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} />}
          pubkey={ev.pubkey}
          profile={profile}
        />
@ -122,11 +151,23 @@ export function ChatMessage({
                <span className="zap-pill-amount">{formatSats(totalZaps)}</span>
              </div>
            )}
-                        {emojis.map((e) => (
+            {emojiReactions.map((e) => {
+              const isCustomEmojiReaction =
+                e.length > 1 && e.startsWith(":") && e.endsWith(":");
+              const emojiName = e.replace(/:/g, "");
+              const emoji = isCustomEmojiReaction && getEmojiById(emojiName);
+              return (
                <div className="message-reaction-container">
+                  {isCustomEmojiReaction && emoji ? (
+                    <span className="message-reaction">
+                      <Emoji name={emoji.at(1)!} url={emoji.at(2)!} />
+                    </span>
+                  ) : (
                    <span className="message-reaction">{e}</span>
+                  )}
                </div>
-                        ))}
+              );
+            })}
          </div>
        )}
        {ref.current && (
@ -170,6 +211,7 @@ export function ChatMessage({
        <EmojiPicker
          topOffset={topOffset}
          leftOffset={leftOffset}
+          emojiPacks={emojiPacks}
          onEmojiSelect={onEmojiSelect}
          onClickOutside={() => setShowEmojiPicker(false)}
          ref={emojiRef}
--- a/src/element/live-chat.css
+++ b/src/element/live-chat.css
@ -347,6 +347,12 @@
  line-height: 22px;
 }

+.message-reaction .emoji {
+  width: 15px;
+  height: 15px;
+  margin-bottom: -2px;
+}
+
 .zap-pill-amount {
  text-transform: lowercase;
  color: #FFF;
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@ -9,8 +9,10 @@ import {
  encodeTLV,
 } from "@snort/system";
 import { useEffect, useMemo } from "react";
+import uniqBy from "lodash.uniqby";

 import { System } from "../index";
+import useEmoji, { packId } from "../hooks/emoji";
 import { useLiveChatFeed } from "../hooks/live-chat";
 import { Profile } from "./profile";
 import { Icon } from "./icon";
@ -76,6 +78,13 @@ export function LiveChat({
    return () => System.ProfileLoader.UntrackMetadata(pubkeys);
  }, [feed.zaps]);

+  const userEmojiPacks = useEmoji(login!.pubkey);
+  const userEmojis = userEmojiPacks.map((pack) => pack.emojis).flat();
+  const channelEmojiPacks = useEmoji(host);
+  const allEmojiPacks = useMemo(() => {
+    return uniqBy(channelEmojiPacks.concat(userEmojiPacks), packId);
+  }, [userEmojiPacks, channelEmojiPacks]);
+
  const zaps = feed.zaps
    .map((ev) => parseZap(ev, System.ProfileLoader.Cache))
    .filter((z) => z && z.valid);
@ -137,6 +146,7 @@ export function LiveChat({
            case LIVE_STREAM_CHAT: {
              return (
                <ChatMessage
+                  emojiPacks={allEmojiPacks}
                  streamer={streamer}
                  ev={a}
                  key={a.id}
@ -160,7 +170,7 @@ export function LiveChat({
      {(options?.canWrite ?? true) && (
        <div className="write-message">
          {login ? (
-            <WriteMessage link={link} />
+            <WriteMessage emojiPacks={allEmojiPacks} link={link} />
          ) : (
            <p>Please login to write messages!</p>
          )}
--- a/src/element/write-message.tsx
+++ b/src/element/write-message.tsx
@ -1,6 +1,5 @@
 import { NostrLink, EventPublisher, EventKind } from "@snort/system";
 import { useRef, useState, useMemo, ChangeEvent } from "react";
-import uniqBy from "lodash.uniqby";

 import { LIVE_STREAM_CHAT } from "../const";
 import useEmoji, { packId } from "../hooks/emoji";
@ -10,27 +9,23 @@ import AsyncButton from "./async-button";
 import { Icon } from "./icon";
 import { Textarea } from "./textarea";
 import { EmojiPicker } from "./emoji-picker";
+import type { EmojiPack, Emoji } from "../hooks/emoji";

-interface Emoji {
-  id: string;
-  native?: string;
-}
-
-export function WriteMessage({ link }: { link: NostrLink }) {
+export function WriteMessage({
+  link,
+  emojiPacks,
+}: {
+  link: NostrLink;
+  emojiPacks: EmojiPack[];
+}) {
  const ref = useRef(null);
  const emojiRef = useRef(null);
  const [chat, setChat] = useState("");
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
  const login = useLogin();
-  const userEmojiPacks = useEmoji(login!.pubkey);
-  const userEmojis = userEmojiPacks.map((pack) => pack.emojis).flat();
-  const channelEmojiPacks = useEmoji(link.author!);
-  const channelEmojis = channelEmojiPacks.map((pack) => pack.emojis).flat();
-  const emojis = userEmojis.concat(channelEmojis);
+  const emojis = emojiPacks.map((pack) => pack.emojis).flat();
  const names = emojis.map((t) => t.at(1));
-  const allEmojiPacks = useMemo(() => {
-    return uniqBy(channelEmojiPacks.concat(userEmojiPacks), packId);
-  }, [userEmojiPacks, channelEmojiPacks]);
+
  // @ts-expect-error
  const topOffset = ref.current?.getBoundingClientRect().top;
  // @ts-expect-error
@ -112,7 +107,7 @@ export function WriteMessage({ link }: { link: NostrLink }) {
          <EmojiPicker
            topOffset={topOffset}
            leftOffset={leftOffset}
-            emojiPacks={allEmojiPacks}
+            emojiPacks={emojiPacks}
            onEmojiSelect={onEmojiSelect}
            onClickOutside={() => setShowEmojiPicker(false)}
            ref={emojiRef}
--- a/src/hooks/emoji.tsx
+++ b/src/hooks/emoji.tsx
@ -12,6 +12,11 @@ import { findTag } from "utils";
 import type { EmojiTag } from "../element/emoji";
 import uniqBy from "lodash.uniqby";

+export interface Emoji {
+  native?: string;
+  id?: string;
+}
+
 export interface EmojiPack {
  address: string;
  name: string;
@ -19,13 +24,19 @@ export interface EmojiPack {
  emojis: EmojiTag[];
 }

+function cleanShortcode(shortcode?: string) {
+  return shortcode?.replace(/\s+/, "_");
+}
+
 function toEmojiPack(ev: NostrEvent): EmojiPack {
  const d = findTag(ev, "d") || "";
  return {
    address: `${ev.kind}:${ev.pubkey}:${d}`,
    name: d,
    author: ev.pubkey,
-    emojis: ev.tags.filter((t) => t.at(0) === "emoji") as EmojiTag[],
+    emojis: ev.tags
+      .filter((t) => t.at(0) === "emoji")
+      .map((t) => ["emoji", cleanShortcode(t.at(1)), t.at(2)]) as EmojiTag[],
  };
 }