update version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ts5-obs-overlay",
   "private": false,
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "Overlay for OBS to show the current talking clients in your TeamSpeak 5 Channel",
   "author": "DerTyp7",
   "homepage": "https://dertyp7.github.io/ts5-obs-overlay/#",

src/Viewer.tsx

@@ -16,7 +16,7 @@ export default function Viewer({
     remoteAppPort: remoteAppPort,
     auth: {
       identifier: "de.tealfire.obs",
-      version: "2.0.8",
+      version: "2.1.0",
       name: "TS5 OBS Overlay",
       description: "A OBS overlay for TS5 by DerTyp7",
     },
@@ -146,6 +146,24 @@ export default function Viewer({
           return <div key={Math.random()}></div>;
         }
       })}
+      {currentChannel == null ? (
+        <>
+          <h4>Overlay couldn't connect to the client:</h4>
+          <br />
+          <br />
+          <h5>1. Make sure to accept the overlay in your TS5-Client via the notifications</h5>
+          <br />
+          <h5>2. Enable remote apps inside the the TS5-Settings</h5>
+          <br />
+          <h5>3. Make sure to match the configuration port with the port in the TS5 remote app settings</h5>
+          <br />
+          <h5>4. Refresh this page/BrowserSource (Select BrowserSource & click "Refresh" in OBS)</h5>
+          <br />
+          <h6>If non of this worked refer to the GitHub and write an issue with your problem</h6>
+        </>
+      ) : (
+        ""
+      )}
     </div>
   );
 }

src/main.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "@styles/index.scss";
-import { BrowserRouter, HashRouter } from "react-router-dom";
+import { HashRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <HashRouter>

src/styles/Generator.scss

@@ -211,6 +211,18 @@ $breakpoint-3: 600px;
         background-repeat: no-repeat;
         background-size: cover;
         min-height: 500px;
+        h1 {
+          font-size: 2rem;
+        }
+        .client {
+          svg {
+            width: 2rem;
+          }
+
+          p {
+            font-size: 2rem;
+          }
+        }
       }
     }
   }

src/styles/index.scss

@@ -41,6 +41,14 @@ h4 {
   font-size: 1.1rem;
 }
 
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.9rem;
+}
+
 // Common styles for heading elements
 h1,
 h2,