feat: add notice about OBS websocket update (#343)

src/renderer/containers/Console/OBSWebsocketNotice.tsx

@@ -0,0 +1,50 @@
+import { css } from "@emotion/react";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import React from "react";
+
+import { ExternalLink as A } from "@/components/ExternalLink";
+
+const OBS_WEBSOCKET_NOTICE_KEY = "SEEN_OBS_WEBSOCKET_NOTICE";
+
+export const OBSWebsocketNotice = () => {
+  const [seenNotice, setSeenNotice] = React.useState<boolean>(
+    localStorage.getItem(OBS_WEBSOCKET_NOTICE_KEY) === "true",
+  );
+  const onClose = () => {
+    localStorage.setItem(OBS_WEBSOCKET_NOTICE_KEY, "true");
+    setSeenNotice(true);
+  };
+
+  if (seenNotice) {
+    return null;
+  }
+
+  return (
+    <Dialog open={!seenNotice} closeAfterTransition={true} onClose={onClose}>
+      <DialogTitle>OBS Websocket 5.0 Update</DialogTitle>
+      <DialogContent>
+        <div
+          css={css`
+            a {
+              text-decoration: underline;
+            }
+          `}
+        >
+          Slippi Launcher now supports OBS Websocket 5.0+ which comes standard in OBS 28+, but no longer supports
+          version 4.9.1.
+          <br />
+          <br />
+          If you are still on OBS 27, install{" "}
+          <A href="https://github.com/obsproject/obs-websocket/releases/tag/5.0.1">OBS Websocket 5.0.1</A>. You can
+          install the 5.0 and 4.9-compat versions at the same time if needed.
+          <br />
+          <br />
+          You will also need to update your console connection settings if you use the Autoswitcher because the OBS IP
+          and port are now separate fields in the settings.
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/renderer/containers/Console/index.tsx

@@ -23,6 +23,7 @@ import { useServices } from "@/services";
 
 import { AddConnectionDialog } from "./AddConnectionDialog";
 import { NewConnectionList } from "./NewConnectionList";
+import { OBSWebsocketNotice } from "./OBSWebsocketNotice";
 import { SavedConnectionsList } from "./SavedConnectionsList";
 
 const Outer = styled.div`
@@ -158,6 +159,7 @@ export const Console: React.FC = () => {
         onCancel={onCancel}
         disabled={consoleIsConnected(currentFormValues?.ipAddress)}
       />
+      <OBSWebsocketNotice />
     </Outer>
   );
 };