better generator

.eslintrc.cjs

@@ -1,14 +1,11 @@
 module.exports = {
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh'],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
+    "react-hooks/exhaustive-deps": "ignore",
   },
-}
+};

.prettierrc

@@ -1,7 +1,7 @@
 {
   "tabWidth": 2,
   "useTabs": false,
-  "printWidth": 120,
+  "printWidth": 180,
   "singleQuote": false,
   "semi": true
 }

src/App.tsx

@@ -1,22 +1,11 @@
 import "@styles/App.scss";
 
 import { Navigate, Route, Routes, useSearchParams } from "react-router-dom";
-import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
 import Viewer from "./Viewer";
 import Generator from "./Generator";
 
 export default function App() {
   const [searchParams] = useSearchParams();
-  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
-    remoteAppPort: parseInt(searchParams.get("remoteAppPort") ?? "5899"),
-    auth: {
-      identifier: "de.tealfire.obs",
-      version: "2.0.0",
-      name: "TS5 OBS Overlay",
-      description: "A OBS overlay for TS5 by DerTyp7",
-    },
-    logging: true,
-  });
 
   return (
     <Routes>
@@ -24,17 +13,10 @@ export default function App() {
         path="/"
         element={
           <Viewer
+            remoteAppPort={parseInt(searchParams.get("remoteAppPort") ?? "5899")}
             showChannelName={searchParams.get("showChannelName") === "true"}
             hideNonTalking={searchParams.get("hideNonTalking") === "true"}
             clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
-            clients={
-              clients.map((client) => {
-                if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
-                  return client;
-                }
-              }) as IClient[]
-            }
-            channel={currentChannel}
           />
         }
       />

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>
   );

src/Viewer.tsx

@@ -1,27 +1,42 @@
 import "@styles/Viewer.scss";
-import { IChannel, IClient } from "react-ts5-remote-app-api";
+import useTSRemoteApp, { IClient } from "react-ts5-remote-app-api";
 
 export default function Viewer({
-  clients,
-  channel,
+  remoteAppPort = 5899,
   showChannelName = false,
   hideNonTalking = false,
   clientLimit = 0,
 }: {
-  clients: IClient[] | undefined;
-  channel: IChannel | undefined;
+  remoteAppPort?: number;
   showChannelName?: boolean;
   hideNonTalking?: boolean;
   clientLimit?: number;
 }) {
+  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
+    remoteAppPort: remoteAppPort,
+    auth: {
+      identifier: "de.tealfire.obs",
+      version: "2.0.0",
+      name: "TS5 OBS Overlay",
+      description: "A OBS overlay for TS5 by DerTyp7",
+    },
+    logging: true,
+  });
+
+  const currentClients = clients.map((client) => {
+    if (client.channel?.id === currentChannel?.id && client.channel.connection.id === activeConnectionId) {
+      return client;
+    }
+  }) as IClient[];
+
   return (
     <div className="viewer">
       {showChannelName ? (
         <div className="channelNameContainer">
-          <h3>{channel?.properties.name}</h3>
+          <h3>{currentChannel?.properties.name}</h3>
         </div>
       ) : null}
-      {clients?.map((client, i) => {
+      {currentClients?.map((client, i) => {
         //* Client limit
         if (clientLimit != 0 && i >= clientLimit) {
           return null;
@@ -29,10 +44,7 @@ export default function Viewer({
 
         if (client) {
           //* Non-talking client
-          if (
-            hideNonTalking &&
-            (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)
-          ) {
+          if (hideNonTalking && (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)) {
             return null;
           }
 
@@ -73,16 +85,7 @@ export default function Viewer({
                       d="M88.62,54.15V64A24.69,24.69,0,0,1,64,88.62a25.26,25.26,0,0,1-8.38-1.46l-7.39,7.39A34,34,0,0,0,64,98.46,34.5,34.5,0,0,0,98.46,64V54.15a4.92,4.92,0,1,1,9.85,0V64a44.31,44.31,0,0,1-39.38,44v10.15H88.62a4.92,4.92,0,0,1,0,9.85H39.38a4.92,4.92,0,1,1,0-9.85H59.08V108A43.3,43.3,0,0,1,41,101.77L21.46,121.31a2.46,2.46,0,0,1-3.54,0L11.62,115a2.46,2.46,0,0,1,0-3.54l94.92-94.92a2.46,2.46,0,0,1,3.54,0l6.31,6.31a2.46,2.46,0,0,1,0,3.54ZM22.92,80.46A43.3,43.3,0,0,1,19.69,64V54.15a4.92,4.92,0,1,1,9.85,0V64a35.94,35.94,0,0,0,1.15,8.69ZM39.38,64V24.62a24.62,24.62,0,0,1,47.77-8.38Z"
                       fill="#d8d8d8"
                     />
-                    <rect
-                      x="-5.93"
-                      y="61.89"
-                      width="139.87"
-                      height="14.02"
-                      rx="2.87"
-                      ry="2.87"
-                      transform="translate(-29.97 65.43) rotate(-45)"
-                      fill="#c9070a"
-                    />
+                    <rect x="-5.93" y="61.89" width="139.87" height="14.02" rx="2.87" ry="2.87" transform="translate(-29.97 65.43) rotate(-45)" fill="#c9070a" />
                   </g>
                 </svg>
               ) : client.properties.outputMuted ? (

src/styles/Generator.scss

@@ -2,17 +2,6 @@
 $breakpoint-1: 760px;
 $breakpoint-2: 565px;
 
-body {
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  width: 100vw;
-  background-color: #232528;
-}
-
 @keyframes tooltipAnimation {
   0% {
     opacity: 0;
@@ -25,26 +14,20 @@ body {
 }
 
 .generator {
+  background-color: #232528;
+  color: white;
+  width: 100%;
   display: flex;
+  height: 100%;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: 50px;
-  color: white;
+  box-sizing: border-box;
+  padding: 50px 0;
 
-  button {
-    background-color: #202024;
-    color: #fff;
-    font-weight: bold;
-    border: 2px solid #31f399;
-    border-radius: 5px;
-    padding: 10px 20px;
-    cursor: pointer;
-    transition: all 300ms ease-in-out;
-    &:hover {
-      background-color: #42d486;
-      color: #202024;
-    }
+  .headline {
+    text-align: center;
+    letter-spacing: 1.8px;
   }
 
   .output {
@@ -54,7 +37,7 @@ body {
     justify-content: center;
     column-gap: 20px;
     position: relative;
-    height: 20px;
+    height: 50px;
 
     .url {
       white-space: nowrap;
@@ -98,39 +81,34 @@ body {
       font-weight: bold;
     }
   }
-  .configuration {
+  .generatorContent {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    flex: 1;
+    padding: 0 50px;
     gap: 30px;
+    width: 100%;
+    box-sizing: border-box;
 
-    h1 {
-      font-size: 1.2rem;
-      text-align: center;
-    }
-
-    .options {
+    .configurations {
       display: flex;
       flex-direction: column;
       align-items: left;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
-      border-right: 5px solid rgb(131, 131, 131);
       gap: 10px;
-    }
-
-    .viewer {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
       height: 100%;
-      width: 100%;
-      background-color: #fff;
+      flex: 1;
+    }
+    .preview {
+      flex: 1;
+      border: 2px solid #31f39973;
+      .viewer {
+        background-image: url("/images/viewer_example_background.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        min-height: 500px;
+        padding: 10px;
+      }
     }
 
     .option {
@@ -200,23 +178,3 @@ body {
     }
   }
 }
-
-// custom dark themed scrollbar
-::-webkit-scrollbar {
-  width: 5px;
-  height: 15px;
-}
-
-::-webkit-scrollbar-track {
-  background: #363638;
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #31f39973;
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #48ee95;
-}

src/styles/Viewer.scss

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: 0 0;
-  padding: 1rem;
   font-size: 3rem;
 
   .channelNameContainer {

src/styles/index.scss

@@ -2,4 +2,78 @@
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+body,
+html {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+}
+
+#root {
+  min-height: 100%;
+  width: 100%;
+}
+
+h1 {
+  font-size: 1.8rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+h4 {
+  font-size: 1.1rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+}
+
+button {
+  background-color: #202024;
+  color: #fff;
+  font-weight: bold;
+  border: 2px solid #31f399;
+  border-radius: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: all 300ms ease-in-out;
+  &:hover {
+    background-color: #42d486;
+    color: #202024;
+  }
+}
+
+// custom dark themed scrollbar
+::-webkit-scrollbar {
+  width: 5px;
+  height: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background: #363638;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #31f39973;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #48ee95;
 }