improving demo and missing dep

FormantIO · Jan 18, 2024 · c5fb54a · c5fb54a
1 parent 2ee3318
commit c5fb54a
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 3 deletions.
diff --git a/packages/universe-connector/demo/main.tsx b/packages/universe-connector/demo/main.tsx
@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom/client";
+
+import { Authentication, Fleet } from "@formant/data-sdk";
+import { defined } from "../src/main";
+
+export function App() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [allDevices, setAllDevices] = useState<
+    | {
+        name: string;
+        id: string;
+      }[]
+    | null
+  >([]);
+  const [currentDevice, setCurrentDevice] = useState<{
+    name: string;
+    id: string;
+  } | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      if (currentDevice) {
+        const d = await Fleet.getDevice(currentDevice.id);
+        const conf = await defined(d).getConfiguration();
+        const teleopConf = conf.teleop;
+        const customStreams = defined(teleopConf).customStreams;
+        const bitsets =
+          customStreams?.filter((_) => _.rtcStreamType === "bitset") || [];
+        console.log(bitsets);
+        await d.startRealtimeConnection();
+        d.startListeningToRealtimeDataStream({
+          name: "Status",
+        });
+        d.addRealtimeListener((data) => {
+          console.log(data);
+        });
+      }
+    })();
+  }, [currentDevice]);
+
+  if (!loggedIn) {
+    return (
+      <div>
+        <div>
+          <input type="text" id="username" placeholder="username" />
+        </div>
+        <div>
+          <input type="password" id="password" placeholder="password" />
+        </div>
+        <div>
+          <button
+            onClick={() => {
+              (async () => {
+                const username = document.getElementById(
+                  "username"
+                ) as HTMLInputElement;
+                const password = document.getElementById(
+                  "password"
+                ) as HTMLInputElement;
+                if (username && password) {
+                  await Authentication.login(username.value, password.value);
+                  setLoggedIn(true);
+                  const devices = await Fleet.getOnlineDevices();
+
+                  if (devices.length > 0) {
+                    setAllDevices(
+                      devices.map((device) => {
+                        return {
+                          name: device.name,
+                          id: device.id,
+                        };
+                      })
+                    );
+                  }
+                }
+              })();
+            }}
+          >
+            Login
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (loggedIn && allDevices && !currentDevice) {
+    return (
+      <div>
+        {allDevices.map((device) => {
+          return (
+            <div>
+              <button
+                onClick={() => {
+                  setCurrentDevice(device);
+                }}
+              >
+                {device.name}
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (!currentDevice) {
+    return null;
+  }
+
+  return <div>logged in</div>;
+}
+const root = document.getElementById("root");
+if (!root) {
+  throw new Error("No root element");
+}
+
+ReactDOM.createRoot(root).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/packages/universe-connector/index.html b/packages/universe-connector/index.html
@@ -7,7 +7,7 @@
     <title></title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="root"></div>
     <script type="module" src="/demo/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/universe-connector/package.json b/packages/universe-connector/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formant/universe-connector",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "A library for getting data from Formant to universe",
   "homepage": "https://github.com/formantio/universe-data-connector",
   "repository": {
@@ -36,6 +36,7 @@
     "@formant/ui-sdk-realtime-player-core": "^0.0.2",
     "@formant/ui-sdk-realtime-player-core-worker": "^0.0.4",
     "date-fns": "^2.30.0",
+    "google-protobuf": "^3.21.2",
     "lzfjs": "^1.0.1",
     "validator": "^13.7.0"
   },
@@ -53,6 +54,6 @@
   },
   "peerDependencies": {
     "@formant/data-sdk": "^1.5.2",
-    "@formant/realtime-sdk": "^0.0.20"
+    "@formant/realtime-sdk": "^1.20.0"
   }
 }
diff --git a/packages/universe-connector/yarn.lock b/packages/universe-connector/yarn.lock
@@ -312,6 +312,11 @@ fsevents@~2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
+google-protobuf@^3.21.2:
+  version "3.21.2"
+  resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
+  integrity sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==
+
 h264decoder@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/h264decoder/-/h264decoder-1.0.0.tgz#5c3c5bc1f755df10f3689d58e00910264be8a8ff"