swc

src/Components/FluentMasks.tsx

@@ -77,4 +77,15 @@ export const stream = ({
   </mask>
 );
 
-export default { online, phone, idle, dnd, offline, stream };
+export const typing = ({
+  children,
+  ...props
+}: React.SVGProps<SVGMaskElement> & { children?: React.ReactNode }): React.ReactElement => (
+  <mask maskContentUnits="objectBoundingBox" viewBox="0 0 1 1" style={props.style} {...props}>
+    <rect fill="white" cx="0" cy="0" width="1" height="1" ry="0.5" rx="0.2" />
+    <rect fill="black" width="0.95" height="0.9" ry="0.5" rx="0.2" x="0.025" y="0.06" />
+    {children}
+  </mask>
+);
+
+export default { online, phone, idle, dnd, offline, stream, typing };

src/Components/Settings.tsx

@@ -45,6 +45,11 @@ export const Settings = () => {
         {...util.useSetting(SettingValues, "StreamingIcon", defaultSettings.StreamingIcon)}>
         Streaming Icon
       </SwitchItem>
+      <SwitchItem
+        note="Fluent Typing Icon"
+        {...util.useSetting(SettingValues, "TypingIcon", defaultSettings.TypingIcon)}>
+        Typing Icon
+      </SwitchItem>
     </div>
   );
 };

src/index.ts

@@ -8,7 +8,7 @@ import Injections from "./injections/index";
 
 export const start = (): void => {
   Settings.registerSettings();
-  void Injections.applyInjections();
+  void Injections.applyInjections().catch((err) => PluginLogger.error(err));
 };
 
 export const stop = (): void => {

src/injections/MaskLibrary.tsx

@@ -56,6 +56,14 @@ export default (): void => {
           <FluentMasks.stream id={Modules.MaskManager.MaskIDs.STATUS_STREAMING} />
         );
       }
+      if (SettingValues.get("TypingIcon", defaultSettings.TypingIcon)) {
+        const StreamingStatusMask = masks.findIndex(
+          (mask: React.ReactElement) => mask.props.id === Modules.MaskManager.MaskIDs.STATUS_TYPING,
+        );
+        masks[StreamingStatusMask] = (
+          <FluentMasks.typing id={Modules.MaskManager.MaskIDs.STATUS_TYPING} />
+        );
+      }
       return res;
     },
   );

src/lib/consts.ts

@@ -5,4 +5,5 @@ export const defaultSettings = {
   DNDIcon: true,
   IdleIcon: true,
   OfflineIcon: true,
+  TypingIcon: true,
 };

src/lib/requiredModules.ts

@@ -4,10 +4,38 @@ import Types from "../types";
 export const Modules: Types.Modules = {};
 
 Modules.loadModules = async (): Promise<void> => {
-  Modules.Avatar ??= await webpack.waitForModule<Types.Avatar>(
-    webpack.filters.bySource("getMaskId()"),
-  );
-  Modules.MaskManager ??= await webpack.waitForProps<Types.MaskLibrary>("MaskLibrary");
+  Modules.AvatarModule ??= await webpack
+    .waitForModule<Types.GenericModule>(webpack.filters.bySource("getMaskId()"), {
+      timeout: 10000,
+    })
+    .catch(() => {
+      throw new Error("Failed To Find Avatar Module");
+    });
+
+  Modules.Avatar ??= {
+    Avatar: webpack.getFunctionBySource(Modules.AvatarModule, ".AVATAR_DEFAULT;"),
+    AnimatedAvatar: webpack.getExportsForProps(Modules.AvatarModule, ["compare", "type"]),
+    getStatusCoords: webpack.getFunctionBySource(Modules.AvatarModule, ".offset;"),
+  };
+
+  Modules.MaskManagerModule ??= await webpack
+    .waitForModule<Types.GenericModule>(webpack.filters.bySource(".AVATAR_DEFAULT="), {
+      timeout: 10000,
+    })
+    .catch(() => {
+      throw new Error("Failed To Find MaskManager Module");
+    });
+
+  Modules.MaskManager ??= {
+    default: webpack.getFunctionBySource(Modules.MaskManagerModule, "svg"),
+    MaskLibrary: webpack.getExportsForProps(Modules.MaskManagerModule, ["compare", "type"]),
+    MaskIDs: webpack.getExportsForProps(Modules.MaskManagerModule, [
+      "STATUS_DND",
+      "STATUS_IDLE",
+      "STATUS_OFFLINE",
+      "STATUS_ONLINE",
+    ]),
+  };
 };
 
 export default Modules;

src/types.ts

@@ -10,6 +10,7 @@ export namespace Types {
       compare: null | DefaultTypes.AnyFunction;
       type: DefaultTypes.AnyFunction;
     };
+    getStatusCoords: DefaultTypes.AnyFunction;
   }
 
   export interface MaskLibrary {
@@ -105,7 +106,9 @@ export namespace Types {
   }
   export interface Modules {
     loadModules?: () => Promise<void>;
+    AvatarModule?: GenericModule;
     Avatar?: Avatar;
+    MaskManagerModule?: GenericModule;
     MaskManager?: MaskLibrary;
   }
   export interface Settings {
@@ -115,6 +118,7 @@ export namespace Types {
     DNDIcon: boolean;
     IdleIcon: boolean;
     OfflineIcon: boolean;
+    TypingIcon: boolean;
   }
 }
 export default Types;