fishjam-dev · kamil-stasiak · Dec 5, 2023 · Nov 10, 2023 · Nov 13, 2023 · Nov 13, 2023
diff --git a/404.html b/404.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Single Page Apps for GitHub Pages</title>
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
@@ -26,15 +26,20 @@
 
       var l = window.location;
       l.replace(
-        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
-        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
-        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
-        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-        l.hash
+        l.protocol +
+          "//" +
+          l.hostname +
+          (l.port ? ":" + l.port : "") +
+          l.pathname
+            .split("/")
+            .slice(0, 1 + pathSegmentsToKeep)
+            .join("/") +
+          "/?/" +
+          l.pathname.slice(1).split("/").slice(pathSegmentsToKeep).join("/").replace(/&/g, "~and~") +
+          (l.search ? "&" + l.search.slice(1).replace(/&/g, "~and~") : "") +
+          l.hash,
       );
-
     </script>
   </head>
-  <body>
-  </body>
+  <body></body>
 </html>
diff --git a/index.html b/index.html
@@ -1,37 +1,35 @@
 <!DOCTYPE html>
 <html lang="en" class="bg-base-200">
-
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jellyfish Demo Dashboard</title>
-  <!-- Start Single Page Apps for GitHub Pages -->
-  <script type="text/javascript">
-    // Single Page Apps for GitHub Pages
-    // MIT License
-    // https://github.com/rafgraph/spa-github-pages
-    // This script checks to see if a redirect is present in the query string,
-    // converts it back into the correct url and adds it to the
-    // browser's history using window.history.replaceState(...),
-    // which won't cause the browser to attempt to load the new url.
-    // When the single page app is loaded further down in this file,
-    // the correct url will be waiting in the browser's history for
-    // the single page app to route accordingly.
-    (function(l) {
-      if (l.search[1] === '/' ) {
-        var decoded = l.search.slice(1).split('&').map(function(s) { 
-          return s.replace(/~and~/g, '&')
-        }).join('?');
-        window.history.replaceState(null, null,
-            l.pathname.slice(0, -1) + decoded + l.hash
-        );
-      }
-    }(window.location))
-  </script>
-  <!-- End Single Page Apps for GitHub Pages -->
-
-
-
+    <!-- Start Single Page Apps for GitHub Pages -->
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      // This script checks to see if a redirect is present in the query string,
+      // converts it back into the correct url and adds it to the
+      // browser's history using window.history.replaceState(...),
+      // which won't cause the browser to attempt to load the new url.
+      // When the single page app is loaded further down in this file,
+      // the correct url will be waiting in the browser's history for
+      // the single page app to route accordingly.
+      (function (l) {
+        if (l.search[1] === "/") {
+          var decoded = l.search
+            .slice(1)
+            .split("&")
+            .map(function (s) {
+              return s.replace(/~and~/g, "&");
+            })
+            .join("?");
+          window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
+        }
+      })(window.location);
+    </script>
+    <!-- End Single Page Apps for GitHub Pages -->
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "lint": "eslint . --ext .ts,.tsx"
   },
   "dependencies": {
-    "@jellyfish-dev/react-client-sdk": "^0.1.5",
+    "@jellyfish-dev/react-client-sdk": "^0.1.6",
     "@types/chartist": "^1.0.0",
     "@types/ramda": "^0.29.3",
     "axios": "^1.3.4",
@@ -56,6 +56,7 @@
     "prettier": "^2.8.4",
     "protoc-gen-js": "^3.21.2",
     "tailwindcss": "^3.2.7",
+    "ts-proto": "^1.164.0",
     "typed-emitter": "^2.1.0",
     "typescript": "^4.9.3",
     "vite": "^4.1.0",

diff --git a/src/components/SimulcastConfig.tsx b/src/components/SimulcastConfig.tsx
@@ -0,0 +1,36 @@
+export type SimulcastConfigProps = {
+  name: string;
+  layerStatus: boolean;
+  layerOnChange: () => void;
+  bandwidthValue: string;
+  bandwidthOnChange: (value: string) => void;
+  disableBandwidthInput: boolean;
+};
+
+export const SimulcastConfig = ({
+  name,
+  layerStatus,
+  layerOnChange,
+  bandwidthOnChange,
+  bandwidthValue,
+  disableBandwidthInput,
+}: SimulcastConfigProps) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="label cursor-pointer justify-start gap-2">
+        <input className="checkbox" id="l" type="checkbox" checked={layerStatus} onChange={layerOnChange} />
+        <span className="text">{name}</span>
+      </label>
+      <div className="flex flex-col gap-2">
+        <input
+          disabled={!layerStatus || disableBandwidthInput}
+          value={bandwidthValue}
+          type="number"
+          onChange={(e) => (e.target.value.match(/^[0-9]*$/) ? bandwidthOnChange(e.target.value) : null)}
+          placeholder="Max bandwidth (kbps)"
+          className="input input-sm"
+        />
+      </div>
+    </div>
+  );
+};