Merge pull request 'feat: use hosts mutelist for chat' (#72) from streamer-mutes into main

Reviewed-on: Kieran/stream#72
Reviewed-by: Kieran <kieran@noreply.localhost>

src/element/live-chat.tsx

@@ -22,6 +22,7 @@ import { NewGoalDialog } from "element/new-goal";
 import { WriteMessage } from "element/write-message";
 import useEmoji, { packId } from "hooks/emoji";
 import { useLiveChatFeed } from "hooks/live-chat";
+import { useMutedPubkeys } from "hooks/lists";
 import { useBadges } from "hooks/badges";
 import { useLogin } from "hooks/login";
 import useTopZappers from "hooks/top-zappers";
@@ -100,10 +101,10 @@ export function LiveChat({
     System.ProfileLoader.TrackMetadata(pubkeys);
     return () => System.ProfileLoader.UntrackMetadata(pubkeys);
   }, [feed.zaps]);
-
   const mutedPubkeys = useMemo(() => {
     return new Set(getTagValues(login?.muted.tags ?? [], "p"));
   }, [login]);
+  const hostMutedPubkeys = useMutedPubkeys(host);
   const userEmojiPacks = login?.emojis ?? [];
   const channelEmojiPacks = useEmoji(host);
   const allEmojiPacks = useMemo(() => {
@@ -131,8 +132,10 @@ export function LiveChat({
     }
   }, [ev]);
   const filteredEvents = useMemo(() => {
-    return events.filter((e) => !mutedPubkeys.has(e.pubkey));
-  }, [events, mutedPubkeys]);
+    return events.filter(
+      (e) => !mutedPubkeys.has(e.pubkey) && !hostMutedPubkeys.has(e.pubkey)
+    );
+  }, [events, mutedPubkeys, hostMutedPubkeys]);
 
   return (
     <div className="live-chat" style={height ? { height: `${height}px` } : {}}>

src/element/mute-button.tsx

@@ -47,7 +47,7 @@ export function LoggedInMuteButton({ pubkey }: { pubkey: string }) {
     <AsyncButton
       type="button"
       className="btn delete-button"
-      onClick={() => isMuted ? unmute() : mute()}
+      onClick={() => (isMuted ? unmute() : mute())}
     >
       {isMuted ? "Unmute" : "Mute"}
     </AsyncButton>

src/hooks/lists.ts

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+
+import { RequestBuilder, ReplaceableNoteStore } from "@snort/system";
+import { useRequestBuilder } from "@snort/system-react";
+
+import { MUTED } from "const";
+import { getTagValues } from "utils";
+import { System } from "index";
+
+export function useMutedPubkeys(host?: string, leaveOpen = false) {
+  const mutedSub = useMemo(() => {
+    if (!host) return null;
+    const rb = new RequestBuilder(`muted:${host}`);
+    rb.withOptions({ leaveOpen });
+    rb.withFilter().kinds([MUTED]).authors([host]);
+    return rb;
+  }, [host]);
+
+  const { data: muted } = useRequestBuilder<ReplaceableNoteStore>(
+    System,
+    ReplaceableNoteStore,
+    mutedSub
+  );
+  const mutedPubkeys = useMemo(() => {
+    return new Set(getTagValues(muted?.tags ?? [], "p"));
+  }, [muted]);
+
+  return mutedPubkeys;
+}