Added streamlabs section to the settings menu and streamlabs donation node

app/src/settings/Streamlabs.tsx

@@ -0,0 +1,63 @@
+import { z } from "zod";
+import { createForm, zodForm } from "@modular-forms/solid";
+import { streamlabs } from "@macrograph/packages";
+import { Match, Switch } from "solid-js";
+import { Button, Input } from "./ui";
+import { None, Some } from "@macrograph/core";
+
+const Schema = z.object({
+  socketToken: z.string(),
+});
+
+const Api = () => {
+  return (
+    <div class="flex flex-col space-y-2">
+      <span class="text-neutral-400 font-medium">Socket API</span>
+      <Switch fallback="Loading...">
+        <Match when={streamlabs.state().type === "disconnected"}>
+          {(_) => {
+            const [, { Form, Field }] = createForm({
+              validate: zodForm(Schema),
+            });
+
+            return (
+              <Form
+                onSubmit={(d) => {
+                  streamlabs.setToken(Some(d.socketToken));
+                }}
+                class="flex flex-row space-x-4"
+              >
+                <Field name="socketToken">
+                  {(field, props) => (
+                    <Input
+                      {...props}
+                      type="password"
+                      placeholder="Socket API Key"
+                      value={field.value}
+                    />
+                  )}
+                </Field>
+                <Button type="submit">Submit</Button>
+              </Form>
+            );
+          }}
+        </Match>
+        <Match when={streamlabs.state().type === "connected"}>
+          <div class="flex flex-row items-center space-x-4">
+            <Button onClick={() => streamlabs.setToken(None)}>
+              Disconnect
+            </Button>
+          </div>
+        </Match>
+      </Switch>
+    </div>
+  );
+};
+
+export default () => {
+  return (
+    <>
+      <Api />
+    </>
+  );
+};

app/src/settings/index.tsx

@@ -6,6 +6,7 @@ import Twitch from "./Twitch";
 import { Button } from "./ui";
 import { SerializedProject, core } from "@macrograph/core";
 import { useUIStore } from "~/UIStore";
+import Streamlabs from "./Streamlabs";
 
 export default () => {
   const ui = useUIStore();
@@ -65,6 +66,9 @@ const SettingsDialog = () => {
               <Section title="OBS">
                 <OBS />
               </Section>
+              <Section title="Streamlabs">
+                <Streamlabs />
+              </Section>
             </div>
           </div>
         </Dialog.Content>

packages/package.json

@@ -23,6 +23,7 @@
         "@twurple/auth": "^6.2.0",
         "discord.js": "^14.9.0",
         "obs-websocket-js": "^5.0.2",
+        "socket.io-client": "^4.7.1",
         "tmi.js": "^1.8.5",
         "typescript-result-option": "^0.2.5",
         "zod": "^3.21.4"

packages/src/index.ts

@@ -9,3 +9,4 @@ export * as discord from "./discord";
 export * from "./localStorage";
 export * from "./json";
 export * from "./map";
+export * as streamlabs from "./streamlabs";

packages/src/streamlabs/events.ts

@@ -0,0 +1,35 @@
+import { z } from "zod";
+
+export const STREAMLABS_DONATION = z.object({
+  message: z.array(
+    z.object({
+      name: z.string(),
+      amount: z.coerce.number(),
+      currency: z.string(),
+      formattedAmount: z.string(),
+      message: z.string(),
+      from: z.string(),
+      fromId: z.string(),
+    })
+  ),
+  type: z.literal("donation"),
+});
+
+// export const EVENTS = z.union([STREAMLABS_DONATION]);
+export const EVENT = STREAMLABS_DONATION;
+
+export type Event = EventsToObject<z.infer<typeof STREAMLABS_DONATION>>;
+
+type EventsToObject<T extends object> = T extends {
+  message: any[];
+}
+  ? { [key in EventToKey<T>]: T["message"][number] }
+  : never;
+
+type EventToKey<T extends object> = T extends {
+  type: infer Type extends string;
+}
+  ? T extends { for: infer For extends string }
+    ? `${For}.${Type}`
+    : `${Type}`
+  : never;

packages/src/streamlabs/index.ts

@@ -0,0 +1,148 @@
+import { Maybe, Option, core, t } from "@macrograph/core";
+import { io, Socket } from "socket.io-client";
+import {
+  createEffect,
+  createRoot,
+  createSignal,
+  on,
+  onCleanup,
+} from "solid-js";
+import { EVENT, Event } from "./events";
+
+const pkg = core.createPackage<Event>({
+  name: "Streamlabs",
+});
+
+const STREAMLABS_TOKEN = "streamlabsToken";
+
+const { setToken, token, state } = createRoot(() => {
+  const [state, setState] = createSignal<
+    | {
+        type: "disconnected";
+      }
+    | { type: "connecting" }
+    | {
+        type: "connected";
+        socket: Socket;
+      }
+  >({ type: "disconnected" });
+
+  const [token, setToken] = createSignal<Option<string>>(
+    Maybe(localStorage.getItem(STREAMLABS_TOKEN))
+  );
+
+  createEffect(
+    on(
+      () => token(),
+      (token) =>
+        token
+          .map((token) => (localStorage.setItem(STREAMLABS_TOKEN, token), true))
+          .unwrapOrElse(
+            () => (localStorage.removeItem(STREAMLABS_TOKEN), false)
+          )
+    )
+  );
+
+  createEffect(
+    on(
+      () => token(),
+      (token) => {
+        token
+          .map((token) => {
+            const socket = io(`https://sockets.streamlabs.com?token=${token}`, {
+              transports: ["websocket"],
+              autoConnect: false,
+            });
+
+            socket.on("event", (eventData) => {
+              const parsed = EVENT.safeParse(eventData);
+
+              if (!parsed.success) return;
+
+              if (parsed.data.type === "donation") {
+                pkg.emitEvent({
+                  name: "donation",
+                  data: parsed.data.message[0]!,
+                });
+              }
+            });
+
+            socket.on("connect", () => {
+              setState({ type: "connected", socket });
+            });
+
+            setState({
+              type: "connecting",
+              socket,
+            });
+
+            socket.connect();
+
+            onCleanup(() => {
+              socket.close();
+              setState({ type: "disconnected" });
+            });
+          })
+          .unwrapOrElse(() => setState({ type: "disconnected" }));
+      }
+    )
+  );
+
+  return {
+    token,
+    state,
+    setToken,
+  };
+});
+
+export { setToken, token, state };
+
+pkg.createEventSchema({
+  name: "Streamlabs Donation",
+  event: "donation",
+  generateIO: (io) => {
+    io.execOutput({
+      id: "exec",
+    });
+    io.dataOutput({
+      name: "Name",
+      id: "name",
+      type: t.string(),
+    });
+    io.dataOutput({
+      name: "Amount",
+      id: "amount",
+      type: t.float(),
+    });
+    io.dataOutput({
+      name: "Message",
+      id: "message",
+      type: t.string(),
+    });
+    io.dataOutput({
+      name: "Currency",
+      id: "currency",
+      type: t.string(),
+    });
+    io.dataOutput({
+      name: "From",
+      id: "from",
+      type: t.string(),
+    });
+    io.dataOutput({
+      name: "From User Id",
+      id: "fromId",
+      type: t.string(),
+    });
+  },
+  run({ ctx, data }) {
+    ctx.setOutput("name", data.name);
+    ctx.setOutput("amount", data.amount);
+    ctx.setOutput("message", data.message);
+    ctx.setOutput("currency", data.currency);
+    ctx.setOutput("from", data.from);
+    ctx.setOutput("fromId", data.fromId);
+
+    ctx.exec("exec");
+  },
+});

packages/src/twitch/eventsub.ts

@@ -102,7 +102,10 @@ const { state } = createRoot(() => {
 
             setWs({ type: "connecting" });
 
-            onCleanup(() => ws.close());
+            onCleanup(() => {
+              ws.close();
+              setSTate({ type: "disconnected" });
+            });
           })
           .unwrapOrElse(() => setWs({ type: "disconnected" }));
       }

packages/src/twitch/helix.ts

@@ -22,8 +22,10 @@ export const { client, userId, setUserId } = createRoot(() => {
     path: "https://api.twitch.tv/helix",
     fetchFn: async (url, args) => {
       const user = await auth.getAccessTokenForUser(userId().unwrap());
-      const token = auth.tokens.get(userId().unwrap());
-      await auth.refreshAccessTokenForUser(token?.userId);
+      const token = Maybe(auth.tokens.get(userId().unwrap())).unwrap();
+
+      await auth.refreshAccessTokenForUser(token.userId);
+
       if (args.body instanceof URLSearchParams) {
         url = `${url}?${args.body.toString()}`;
       }

packages/tsconfig.json

@@ -1,17 +1,19 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "rootDir": ".",
-    "strict": true,
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "noUncheckedIndexedAccess": true,
-    "isolatedModules": true,
-    "skipLibCheck": true,
-    "outDir": "dist"
-  },
-  "include": ["src"]
+    "compilerOptions": {
+        "composite": true,
+        "rootDir": ".",
+        "strict": true,
+        "target": "ESNext",
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "noUncheckedIndexedAccess": true,
+        "isolatedModules": true,
+        "skipLibCheck": true,
+        "outDir": "dist",
+    },
+    "include": [
+        "src"
+    ]
 }