better generator

src/Generator.tsx

@@ -1,11 +1,29 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, useRef, useState } from "react";
 import "@styles/Generator.scss";
+import Viewer from "./Viewer";
 
 export default function Generator() {
-  const [outputUrl, setOutputUrl] = React.useState("sdlgkhfldskgjhdkjfghlkdfsjghlkjdshg");
-  const copiedTooltipRef = React.useRef<HTMLDivElement>(null);
+  const [outputUrl, setOutputUrl] = useState(new URL(window.location.href).toString());
+  const copiedTooltipRef = useRef<HTMLDivElement>(null);
 
-  const [showChannelName, setShowChannelName] = React.useState(true);
+  const [remoteAppPort, setRemoteAppPort] = useState(5899);
+  const [showChannelName, setShowChannelName] = useState(true);
+  const [hideNonTalking, setHideNonTalking] = useState(false);
+  const [clientLimit, setClientLimit] = useState(0);
+
+  React.useEffect(() => {
+    generateUrl();
+  }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
+
+  function generateUrl() {
+    const url = new URL(window.location.href.replace("/generate", ""));
+    url.searchParams.set("remoteAppPort", remoteAppPort.toString());
+    url.searchParams.set("showChannelName", showChannelName.toString());
+    url.searchParams.set("hideNonTalking", hideNonTalking.toString());
+    url.searchParams.set("clientLimit", clientLimit.toString());
+
+    setOutputUrl(url.toString());
+  }
 
   function copy() {
     navigator.clipboard.writeText(outputUrl);
@@ -25,6 +43,10 @@ export default function Generator() {
 
   return (
     <div className="generator">
+      <div className="headline">
+        <h1>TS5-OBS-Overlay Generator</h1>
+        <h4>by DerTyp7</h4>
+      </div>
       <div className="output">
         <p className="url">
           <code>{outputUrl}</code>
@@ -36,9 +58,9 @@ export default function Generator() {
           Copied!
         </div>
       </div>
-      <div className="configuration">
-        <div className="options">
-          <h1>Configurations</h1>
+      <div className="generatorContent">
+        <div className="configurations">
+          <h2>Configurations</h2>
 
           <div className="option">
             <input
@@ -54,9 +76,9 @@ export default function Generator() {
           <div className="option">
             <input
               type="checkbox"
-              checked={showChannelName}
+              checked={hideNonTalking}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setShowChannelName(e.target.checked);
+                setHideNonTalking(e.target.checked);
               }}
             />
             <label>Hide non talking clients</label>
@@ -66,15 +88,30 @@ export default function Generator() {
             <input
               type="number"
               value={20}
+              min={0}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setShowChannelName(e.target.checked);
+                setClientLimit(parseInt(e.target.value));
               }}
             />
             <label>Client Limit</label>
           </div>
+
+          <div className="option">
+            <input
+              type="number"
+              value={5899}
+              min={0}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                setRemoteAppPort(parseInt(e.target.value));
+              }}
+            />
+            <label>RemoteApp-Port</label>
+          </div>
         </div>
 
-        <div className="viewer">s</div>
+        <div className="preview">
+          <Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
+        </div>
       </div>
     </div>
   );