feat: muted channels

Author: Seldszar

locales/en/messages.json

@@ -239,6 +239,9 @@
   "optionValue_logout": {
     "message": "Logout"
   },
+  "optionValue_muteChannel": {
+    "message": "Mute channel"
+  },
   "optionValue_newCollection": {
     "message": "New collection"
   },

locales/fr/messages.json

@@ -239,6 +239,9 @@
   "optionValue_logout": {
     "message": "Déconnexion"
   },
+  "optionValue_muteChannel": {
+    "message": "Chaîne en sourdine"
+  },
   "optionValue_newCollection": {
     "message": "Nouvelle collection"
   },

src/background/index.ts

@@ -9,6 +9,7 @@ import { backup, reset, restore } from "./modules/maintenance";
 import { sendStreamNotifications } from "./modules/notification";
 import {
   authorize,
+  filterMutedStreams,
   filterNewStreams,
   getCurrentUser,
   getFollowedStreams,
@@ -34,12 +35,14 @@ async function refresh(withNotifications: boolean) {
       }
     }
 
-    refreshActionBadge(!!currentUser, followedStreams.length);
+    const filteredStreams = await filterMutedStreams(followedStreams);
 
     if (withNotifications) {
-      sendStreamNotifications(await filterNewStreams(followedStreams));
+      sendStreamNotifications(await filterNewStreams(filteredStreams));
     }
 
+    refreshActionBadge(!!currentUser, filteredStreams.length);
+
     stores.currentUser.set(currentUser);
     stores.followedStreams.set(followedStreams);
   }

src/background/modules/twitch.ts

@@ -175,3 +175,11 @@ export async function filterNewStreams(streams: HelixStream[]) {
     return oldStream == null || (withCategoryChanges && oldStream.gameId !== stream.gameId);
   });
 }
+
+export async function filterMutedStreams(streams: HelixStream[]) {
+  const mutedUsers = await stores.mutedUsers.get();
+
+  return streams.filter((stream) => {
+    return !mutedUsers.includes(stream.userId);
+  });
+}

src/browser/components/cards/StreamCard.tsx

@@ -41,16 +41,27 @@ const StyledDropdownButton = styled(DropdownButton)`
   ${tw`absolute invisible end-6 -top-2 z-20`}
 `;
 
-const Wrapper = styled(Card)`
+interface WrapperProps {
+  isMuted?: boolean;
+}
+
+const Wrapper = styled(Card)<WrapperProps>`
   ${tw`py-2 relative`}
 
-  :hover ${StyledDropdownButton} {
-    ${tw`visible`}
+  :hover {
+    ${tw`opacity-100`}
+
+    ${StyledDropdownButton} {
+      ${tw`visible`}
+    }
   }
+
+  ${(props) => props.isMuted && tw`opacity-50`}
 `;
 
 export interface StreamCardProps {
   stream: HelixStream;
+  isMuted?: boolean;
 
   onNewCollection?(): void;
 }
@@ -82,6 +93,7 @@ function StreamCard(props: StreamCardProps) {
   return (
     <Anchor to={defaultAction}>
       <Wrapper
+        isMuted={props.isMuted}
         title={
           <Title>
             <UserName login={stream.userLogin} name={stream.userName} />

src/browser/components/dropdowns/StreamDropdown.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router";
 import { openUrl, t, template } from "~/common/helpers";
 import { HelixStream } from "~/common/types";
 
-import { useCollections, useSettings } from "~/browser/hooks";
+import { useCollections, useMutedUsers, useSettings } from "~/browser/hooks";
 
 import DropdownMenu, { DropdownMenuItemProps } from "../DropdownMenu";
 
@@ -23,13 +23,20 @@ function StreamDropdown(props: StreamDropdownProps) {
 
   const [settings] = useSettings();
   const [collections, { toggleCollectionItem }] = useCollections("user");
+  const [mutedUsers, { toggle }] = useMutedUsers();
 
   const {
     dropdownMenu: { customActions },
   } = settings;
 
   const items = useMemo(() => {
     const result = new Array<DropdownMenuItemProps>(
+      {
+        type: "checkbox",
+        title: t("optionValue_muteChannel"),
+        checked: mutedUsers.includes(stream.userId),
+        onChange: () => toggle(stream.userId),
+      },
       {
         type: "normal",
         title: t("optionValue_openChannel"),

src/browser/hooks/store.ts

@@ -164,6 +164,19 @@ export function useCollections(
   ];
 }
 
+export function useMutedUsers(options?: UseStoreOptions) {
+  const [mutedUsers, store] = useStore(stores.mutedUsers, options);
+
+  return [
+    mutedUsers,
+    {
+      toggle(userId: string) {
+        store.set((mutedUsers) => xor(mutedUsers, [userId]));
+      },
+    },
+  ] as const;
+}
+
 export function useCurrentUser(options?: UseStoreOptions) {
   return useStore(stores.currentUser, options);
 }

src/browser/views/popup/FollowedStreams.tsx

@@ -7,7 +7,7 @@ import { FollowedStreamState } from "~/common/types";
 
 import { useRefreshHandler } from "~/browser/contexts";
 import { filterList, isEmpty } from "~/browser/helpers";
-import { useFollowedStreams, useFollowedStreamState } from "~/browser/hooks";
+import { useFollowedStreams, useFollowedStreamState, useMutedUsers } from "~/browser/hooks";
 
 import StreamCard from "~/browser/components/cards/StreamCard";
 
@@ -30,6 +30,10 @@ function ChildComponent(props: ChildComponentProps) {
     suspense: true,
   });
 
+  const [mutedUsers] = useMutedUsers({
+    suspense: true,
+  });
+
   const filteredStreams = useMemo(() => {
     let { sortDirection } = followedStreamState;
 
@@ -39,10 +43,10 @@ function ChildComponent(props: ChildComponentProps) {
 
     return orderBy(
       filterList(followedStreams, ["gameName", "title", "userLogin", "userName"], searchQuery),
-      followedStreamState.sortField,
-      sortDirection,
+      [(stream) => mutedUsers.includes(stream.userId), followedStreamState.sortField],
+      ["asc", sortDirection],
     );
-  }, [followedStreamState, followedStreams, searchQuery]);
+  }, [followedStreamState, followedStreams, mutedUsers, searchQuery]);
 
   useRefreshHandler(async () => {
     await sendRuntimeMessage("refresh", true);
@@ -67,6 +71,7 @@ function ChildComponent(props: ChildComponentProps) {
             <StreamCard
               key={item.id}
               stream={item}
+              isMuted={mutedUsers.includes(item.userId)}
               onNewCollection={() => createCollection([item.userId])}
             />
           ))}

src/common/stores.ts

@@ -266,6 +266,10 @@ export const stores = {
       status: null,
     },
   }),
+  mutedUsers: new Store<string[]>("local", "mutedUsers", {
+    schema: array(string()),
+    defaultValue: [],
+  }),
 };
 
 browser.storage.onChanged.addListener((changes, areaName) => {