Format

overlayeddev · Nov 23, 2023 · 4f7ce70 · 4f7ce70
1 parent 9d40720
commit 4f7ce70
Show file tree

Hide file tree

Showing 20 changed files with 93 additions and 189 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
 # overlayed
 
 A modern, open-source, and free voice chat overlay for Discord.
-
diff --git a/apps/desktop/src/components/headphones-off.tsx b/apps/desktop/src/components/headphones-off.tsx
@@ -1,12 +1,6 @@
 export const HeadphonesOff = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      className="ml-1"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" className="ml-1">
       <path
         fill="currentColor"
         d="M12 1a9 9 0 0 1 9 9v7c0 .62-.19 1.19-.5 1.67L15 13.18V12h4v-2a7 7 0 0 0-7-7c-2 0-3.77.82-5.04 2.14L5.55 3.72A8.96 8.96 0 0 1 12 1M2.78 3.5L20.5 21.22l-1.27 1.28l-2.5-2.5H15v-1.73l-6-6V20H6a3 3 0 0 1-3-3v-7c0-1.11.2-2.18.57-3.16L1.5 4.77L2.78 3.5m2.39 4.94C5.06 8.94 5 9.46 5 10v2h3.73L5.17 8.44Z"

diff --git a/apps/desktop/src/components/mic-off.tsx b/apps/desktop/src/components/mic-off.tsx
@@ -1,12 +1,6 @@
 export const MicOff = () => {
   return (
-    <svg
-      className="ml-1"
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-    >
+    <svg className="ml-1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
       <path
         className="fill-current"
         d="M19 11c0 1.19-.34 2.3-.9 3.28l-1.23-1.23c.27-.62.43-1.31.43-2.05H19m-4 .16L9 5.18V5a3 3 0 0 1 3-3a3 3 0 0 1 3 3v6.16M4.27 3L21 19.73L19.73 21l-4.19-4.19c-.77.46-1.63.77-2.54.91V21h-2v-3.28c-3.28-.49-6-3.31-6-6.72h1.7c0 3 2.54 5.1 5.3 5.1c.81 0 1.6-.19 2.31-.52l-1.66-1.66L12 14a3 3 0 0 1-3-3v-.72L3 4.27L4.27 3Z"

diff --git a/apps/desktop/src/components/nav-bar.tsx b/apps/desktop/src/components/nav-bar.tsx
@@ -10,10 +10,7 @@ export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { currentChannel } = useAppStore();
-  const opacity =
-    clickthrough && location.pathname === "/channel"
-      ? "opacity-0"
-      : "opacity-100";
+  const opacity = clickthrough && location.pathname === "/channel" ? "opacity-0" : "opacity-100";
 
   return (
     <div
@@ -22,12 +19,7 @@ export const NavBar = ({ clickthrough }: { clickthrough: boolean }) => {
     >
       <div data-tauri-drag-region className="flex justify-between">
         <div className="flex items-center">
-          <img
-            src="/img/32x32.png"
-            alt="logo"
-            data-tauri-drag-region
-            className="w-8 h-8 mr-2"
-          />
+          <img src="/img/32x32.png" alt="logo" data-tauri-drag-region className="w-8 h-8 mr-2" />
           {location.pathname === "/channel" ? (
             <div data-tauri-drag-region className="hidden md:inline">
               {currentChannel?.name}

diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
@@ -1,47 +1,27 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
-const button = cva(
-  "rounded-md disabled:opacity-50 disabled:pointer-events-none",
-  {
-    variants: {
-      intent: {
-        primary: [
-          "bg-blue-500",
-          "text-white",
-          "border-transparent",
-          "hover:bg-blue-600",
-        ],
-        danger: [
-          "bg-red-500",
-          "text-white",
-          "border-transparent",
-          "hover:bg-red-600",
-        ],
-        secondary: ["text-white", "hover:text-blue-500"],
-      },
-      size: {
-        small: ["text-sm", "py-1", "px-2"],
-        medium: ["text-base", "py-2", "px-4"],
-        large: ["text-lg", "py-4", "px-4"],
-      },
+const button = cva("rounded-md disabled:opacity-50 disabled:pointer-events-none", {
+  variants: {
+    intent: {
+      primary: ["bg-blue-500", "text-white", "border-transparent", "hover:bg-blue-600"],
+      danger: ["bg-red-500", "text-white", "border-transparent", "hover:bg-red-600"],
+      secondary: ["text-white", "hover:text-blue-500"],
     },
-    compoundVariants: [
-      { intent: "primary", size: "medium", class: "uppercase" },
-    ],
-    defaultVariants: {
-      intent: "primary",
-      size: "medium",
+    size: {
+      small: ["text-sm", "py-1", "px-2"],
+      medium: ["text-base", "py-2", "px-4"],
+      large: ["text-lg", "py-4", "px-4"],
     },
   },
-);
+  compoundVariants: [{ intent: "primary", size: "medium", class: "uppercase" }],
+  defaultVariants: {
+    intent: "primary",
+    size: "medium",
+  },
+});
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof button> { }
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {}
 
-export const Button: React.FC<ButtonProps> = ({
-  className,
-  intent,
-  size,
-  ...props
-}) => <button className={button({ intent, size, className })} {...props} />;
+export const Button: React.FC<ButtonProps> = ({ className, intent, size, ...props }) => (
+  <button className={button({ intent, size, className })} {...props} />
+);
diff --git a/apps/desktop/src/components/user.tsx b/apps/desktop/src/components/user.tsx
@@ -2,16 +2,10 @@ import { OverlayedUser } from "../types";
 import { HeadphonesOff } from "./headphones-off";
 import { MicOff } from "./mic-off";
 
-export const User = ({
-  item,
-}: {
-  item: OverlayedUser;
-}) => {
+export const User = ({ item }: { item: OverlayedUser }) => {
   const { id, selfMuted, selfDeafened, talking, avatarHash } = item;
 
-  const avatarUrl = avatarHash
-    ? `https://cdn.discordapp.com/avatars/${id}/${avatarHash}.jpg`
-    : "/img/default.png";
+  const avatarUrl = avatarHash ? `https://cdn.discordapp.com/avatars/${id}/${avatarHash}.jpg` : "/img/default.png";
 
   const talkingClass = talking ? "border-green-500" : "border-zinc-800";
   const mutedClass = selfMuted ? "text-zinc-400" : "";
@@ -20,11 +14,9 @@ export const User = ({
 
   return (
     <div className="flex flex-wrap py-1 p-2 items-center">
-      <div
-        className={`pointer-events-none relative rounded-full border-2 mr-2 ${avatarClass} ${talkingClass}`}
-      >
+      <div className={`pointer-events-none relative rounded-full border-2 mr-2 ${avatarClass} ${talkingClass}`}>
         <img
-          onError={(e) => {
+          onError={e => {
             // @ts-ignore
             e.target.onerror = null;
             // @ts-ignore
@@ -44,9 +36,7 @@ export const User = ({
       <div
         className={`max-w-[calc(100%_-_50px)] md:flex hidden pointer-events-none items-center rounded-md bg-zinc-800 ${mutedClass} p-1 pl-2 pr-2`}
       >
-        <span className={`truncate text-ellipsis`}>
-          {item.username}
-        </span>
+        <span className={`truncate text-ellipsis`}>{item.username}</span>
         <div className="flex">
           {selfMuted && <MicOff />}
           {selfDeafened && <HeadphonesOff />}

diff --git a/apps/desktop/src/main.tsx b/apps/desktop/src/main.tsx
@@ -8,5 +8,5 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <HashRouter>
       <App />
     </HashRouter>
-  </React.StrictMode>,
+  </React.StrictMode>
 );
diff --git a/apps/desktop/src/rpc/command.ts b/apps/desktop/src/rpc/command.ts
@@ -18,4 +18,3 @@ export enum RPCCommand {
   SET_VOICE_SETTINGS_2 = "SET_VOICE_SETTINGS_2",
   SET_VOICE_SETTINGS = "SET_VOICE_SETTINGS",
 }
-
diff --git a/apps/desktop/src/rpc/manager.ts b/apps/desktop/src/rpc/manager.ts
@@ -129,10 +129,7 @@ class SocketManager {
   private async onMessage(event: Message) {
     // TODO: this has to be a bug in the upstream lib, we should get a proper code
     // and not have to check the raw dawg string to see if something is wrong
-    if (
-      typeof event === "string" &&
-      (event as string).includes("Connection reset without closing handshake")
-    ) {
+    if (typeof event === "string" && (event as string).includes("Connection reset without closing handshake")) {
       this.navigate?.("/error");
     }
 
@@ -179,10 +176,7 @@ class SocketManager {
         this.store.clearUsers();
 
         if (this.store.currentChannel) {
-          this.channelEvents(
-            RPCCommand.UNSUBSCRIBE,
-            this.store.currentChannel.id,
-          );
+          this.channelEvents(RPCCommand.UNSUBSCRIBE, this.store.currentChannel.id);
         }
 
         // after unsub we clear the channel
@@ -206,7 +200,7 @@ class SocketManager {
     // we got a token back from discord let's fetch an access token
     if (payload.cmd === RPCCommand.AUTHORIZE) {
       const { code } = payload.data;
-      const res = await fetch < TokenResponse > (`${STREAMKIT_URL}/overlay/token`, {
+      const res = await fetch<TokenResponse>(`${STREAMKIT_URL}/overlay/token`, {
         method: "POST",
         body: Body.json({ code }),
       });
@@ -233,10 +227,7 @@ class SocketManager {
 
     // console.log(payload);
     // we are ready to do things cause we are fully authed
-    if (
-      payload.cmd === RPCCommand.AUTHENTICATE &&
-      payload.evt === RPCEvent.ERROR
-    ) {
+    if (payload.cmd === RPCCommand.AUTHENTICATE && payload.evt === RPCEvent.ERROR) {
       // if they have an invalid we remove it and make them auth again
       if (payload.data.code === RPCErrors.INVALID_TOKEN) {
         this.store.pushError(payload.data.message);
@@ -262,10 +253,7 @@ class SocketManager {
       this.navigate?.("/channel");
     }
 
-    if (
-      payload.evt === RPCEvent.SPEAKING_START ||
-      payload.evt === RPCEvent.SPEAKING_STOP
-    ) {
+    if (payload.evt === RPCEvent.SPEAKING_START || payload.evt === RPCEvent.SPEAKING_STOP) {
       const isSpeaking = payload.evt !== RPCEvent.SPEAKING_START;
       this.store.setTalking(payload.data.user_id, !isSpeaking);
     }
@@ -296,7 +284,7 @@ class SocketManager {
       JSON.stringify({
         ...payload,
         nonce: uuid.v4(),
-      }),
+      })
     );
   }
 
@@ -306,17 +294,14 @@ class SocketManager {
    * @param cmd {RPCCommand} SUBSCRIBE or SUBSCRIBE
    * @param channelId The channel to subscribe to events in
    */
-  channelEvents(
-    cmd: RPCCommand.SUBSCRIBE | RPCCommand.UNSUBSCRIBE,
-    channelId: string,
-  ) {
-    SUBSCRIBABLE_EVENTS.forEach((eventName) =>
+  channelEvents(cmd: RPCCommand.SUBSCRIBE | RPCCommand.UNSUBSCRIBE, channelId: string) {
+    SUBSCRIBABLE_EVENTS.forEach(eventName =>
       this.send({
         cmd,
         args: { channel_id: channelId },
         evt: eventName,
         nonce: uuid.v4(),
-      }),
+      })
     );
   }
 }
@@ -325,7 +310,7 @@ class SocketManager {
 export const useSocket = () => {
   const navigate = useNavigate();
   //TODO: should this be a ref instead?
-  const [socket, setSocket] = useState < SocketManager | null > (null);
+  const [socket, setSocket] = useState<SocketManager | null>(null);
 
   useEffect(() => {
     console.log("Initializing websocket...");

diff --git a/apps/desktop/src/store.ts b/apps/desktop/src/store.ts
@@ -70,10 +70,7 @@ const sortUserList = (myId: string | undefined, users: VoiceStateUser[]) => {
 };
 
 // sort internal app state users by name and me on top
-const sortOverlayedUsers = (
-  myId: string | undefined,
-  users: Record<string, OverlayedUser>,
-) => {
+const sortOverlayedUsers = (myId: string | undefined, users: Record<string, OverlayedUser>) => {
   const sortedUserArray = Object.entries(users).sort((a, b) => {
     if (a[1].id === myId) return -1;
     if (b[1].id === myId) return 1;
@@ -93,57 +90,57 @@ const sortOverlayedUsers = (
 export const useAppStore = create<AppState & AppActions>()(
   // TODO: fix later
   // @ts-ignore
-  immer((set) => ({
+  immer(set => ({
     me: null,
     discordErrors: [],
     clickThrough: false,
     currentChannel: null,
     users: {},
-    setMe: (data) =>
-      set((state) => {
+    setMe: data =>
+      set(state => {
         state.me = data;
       }),
     setTalking: (id, talking) =>
-      set((state) => {
+      set(state => {
         state.users[id].talking = talking;
       }),
-    removeUser: (id) =>
+    removeUser: id =>
       set((state: AppState) => {
         delete state.users[id];
       }),
-    updateUser: (item) =>
+    updateUser: item =>
       set((state: AppState) => {
         state.users[item.user.id] = createUserStateItem(item);
       }),
-    setUsers: (users) =>
-      set((state) => {
+    setUsers: users =>
+      set(state => {
         state.users = sortUserList(state.me?.id, users);
       }),
     clearUsers: () =>
-      set((state) => {
+      set(state => {
         state.users = {};
       }),
-    addUser: (item) =>
-      set((state) => {
+    addUser: item =>
+      set(state => {
         const tempUsers = { ...state.users };
         tempUsers[item.user.id] = createUserStateItem(item);
         state.users = sortOverlayedUsers(state.me?.id, tempUsers);
       }),
-    setCurrentChannel: (channel) =>
-      set((state) => {
+    setCurrentChannel: channel =>
+      set(state => {
         state.currentChannel = channel;
       }),
     setClickThrough: (enabled: boolean) =>
-      set((state) => {
+      set(state => {
         state.clickThrough = enabled;
       }),
-    pushError: (error) =>
-      set((state) => {
+    pushError: error =>
+      set(state => {
         state.discordErrors.push(error);
       }),
     resetErrors: () =>
-      set((state) => {
+      set(state => {
         state.discordErrors = [];
       }),
-  })),
+  }))
 );