Bump rollup from 3.29.4 to 4.32.0

Bumps [rollup](https://github.com/rollup/rollup) from 3.29.4 to 4.32.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v3.29.4...v4.32.0) --- updated-dependencies: - dependency-name: rollup dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
Merge pull request #122 from DerTyp7/dev
2026-07-31 16:49:04 +02:00 · 2025-01-24 12:44:18 +00:00 · 2025-01-24 13:43:21 +01:00
19 changed files with 295 additions and 1219 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
  "tabWidth": 2,
  "useTabs": false,
-  "printWidth": 120,
+  "printWidth": 180,
  "singleQuote": false,
  "semi": true
 }
--- a/index.html
+++ b/index.html
@@ -3,13 +3,10 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
+    <meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
      name="description"
      content="An OBS overlay for TeamSpeak5/6, so your audience can see who is talking. https://github.com/DerTyp7/teamspeak-obs-overlay"
    />
    <meta name="author" content="DerTyp7" />
    <link rel="icon" href="/logo.svg" type="image/x-icon" />
-    <title>TeamSpeak-OBS-Overlay</title>
+    <title>TS5-OBS-Overlay</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "typescript": "^5.7.3",
-    "vite": "^6.0.11",
+    "vite": "^6.0.11"
    "vite-plugin-svgr": "^4.3.0"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,8 +17,6 @@ export default function App() {
            showChannelName={searchParams.get("showChannelName") === "true"}
            hideNonTalking={searchParams.get("hideNonTalking") === "true"}
            clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
            alignRight={searchParams.get("alignRight") === "true"}
            showTsAvatar={searchParams.get("showTsAvatar") === "true"}
          />
        }
      />
--- a/src/Generator.tsx
+++ b/src/Generator.tsx
@@ -1,7 +1,6 @@
 import { ChangeEvent, useRef, useState, useEffect } from "react";
 import "@styles/Generator.scss";
 import Viewer from "./Viewer";
 import { url } from "inspector";
 export default function Generator() {
  // State variables
@@ -10,15 +9,13 @@ export default function Generator() {
  const [remoteAppPort, setRemoteAppPort] = useState(5899);
  const [showChannelName, setShowChannelName] = useState(true);
  const [alignRight, setAlignRight] = useState(false);
  const [hideNonTalking, setHideNonTalking] = useState(false);
  const [clientLimit, setClientLimit] = useState(0);
  const [showTsAvatar, setShowTsAvatar] = useState(false);
  // Effect to generate URL when dependencies change
  useEffect(() => {
    generateUrl();
-  }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight, showTsAvatar]);
+  }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
  // Function to generate the output URL
  function generateUrl() {
@@ -29,8 +26,6 @@ export default function Generator() {
    url.searchParams.set("showChannelName", showChannelName.toString());
    url.searchParams.set("hideNonTalking", hideNonTalking.toString());
    url.searchParams.set("clientLimit", clientLimit.toString());
    url.searchParams.set("alignRight", alignRight.toString());
    url.searchParams.set("showTsAvatar", showTsAvatar.toString());
    // url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
    // gh-pages needs the hash to be between the base URL and the search params
@@ -67,9 +62,7 @@ export default function Generator() {
        <p>1. Customize your settings</p>
        <p>2. Copy the generated URL</p>
        <p>3. Paste the URL into the BrowserSource URL field in OBS</p>
-        <a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">
+        <a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">Click here for detailed instructions</a>
          Click here for detailed instructions
        </a>
      </div>
      {/* Output Section */}
@@ -96,49 +89,27 @@ export default function Generator() {
            <section>
              {/* Show Channel Name Option */}
              <div className="option" onClick={() => setShowChannelName(!showChannelName)}>
-                <input type="checkbox" defaultChecked={showChannelName} />
+                <input type="checkbox" checked={showChannelName} />
                <label>Show channel name</label>
              </div>
              {/* Hide Non-Talking Clients Option */}
              <div className="option" onClick={() => setHideNonTalking(!hideNonTalking)}>
-                <input type="checkbox" defaultChecked={hideNonTalking} />
+                <input type="checkbox" checked={hideNonTalking} />
                <label>Hide non talking clients</label>
              </div>
              {/* Alignment Option */}
              <div className="option" onClick={() => setAlignRight(!alignRight)}>
                <input type="checkbox" defaultChecked={alignRight} />
                <label>Align Right</label>
              </div>
              {/* Show TeamSpeak Avatar */}
              <div className="option" onClick={() => setShowTsAvatar(!showTsAvatar)}>
                <input type="checkbox" defaultChecked={showTsAvatar} />
                <label>Show TeamSpeak Avatar</label>
              </div>
            </section>
            <section>
              {/* Client Limit Option */}
              <div className="option">
-                <input
+                <input type="number" value={clientLimit} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))} />
                  type="number"
                  value={clientLimit}
                  min={0}
                  onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))}
                />
                <label>Client Limit</label>
              </div>
              {/* RemoteApp-Port Option */}
              <div className="option">
-                <input
+                <input type="number" value={remoteAppPort} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))} />
                  type="number"
                  value={remoteAppPort}
                  min={0}
                  onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))}
                />
                <label>RemoteApp-Port</label>
              </div>
            </section>
@@ -147,7 +118,7 @@ export default function Generator() {
        {/* Preview */}
        <div className="preview">
-          <iframe src={outputUrl}></iframe>
+          <Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
        </div>
      </div>
    </div>
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -1,21 +1,16 @@
 import "@styles/Viewer.scss";
 import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";
 import TalkStatus from "@/components/TalkStatus";
 export default function Viewer({
  remoteAppPort = 5899,
  showChannelName = false,
  hideNonTalking = false,
  clientLimit = 0,
  alignRight = false,
  showTsAvatar = false,
 }: {
  remoteAppPort?: number;
  showChannelName?: boolean;
  hideNonTalking?: boolean;
  clientLimit?: number;
  alignRight?: boolean;
  showTsAvatar?: boolean;
 }) {
  const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
    remoteAppPort: remoteAppPort,
@@ -35,7 +30,7 @@ export default function Viewer({
  }) as IClient[];
  return (
-    <div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
+    <div className="viewer">
      {showChannelName && currentChannel ? (
        <div className="channelNameContainer">
          <h1>{currentChannel?.properties.name}</h1>
@@ -49,20 +44,101 @@ export default function Viewer({
        if (client) {
          //* Non-talking client
-          if (
+          if (hideNonTalking && (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)) {
            hideNonTalking &&
            (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)
          ) {
            return null;
          }
          //* Normal client
          return (
-            <div
+            <div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
-              className={`client ${alignRight ? "client--align-right" : ""}`}
+              {client.properties.outputHardware == false ? (
-              key={`${client.id}-${client.channel?.connection.id}`}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-            >
+                  <title>muted_hardware_output</title>
-              <TalkStatus client={client} showTsAvatar={showTsAvatar} />
+                  <g id="muted_hardware_output.svg">
                    <path
                      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
                      fill="#d8d8d8"
                    />
                    <path
                      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
                      fill="#d8d8d8"
                    />
                    <path
                      d="M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47"
                      fill="#d8d8d8"
                    />
                    <path
                      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
                      fill="#d8d8d8"
                    />
                    <path
                      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
                      fill="#c9070a"
                    />
                  </g>
                </svg>
              ) : client.properties.inputHardware == false ? (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <title>muted_hardware_input</title>
                  <g id="muted_hardware_input.svg">
                    <path
                      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" />
                  </g>
                </svg>
              ) : client.properties.outputMuted ? (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <title>muted_output</title>
                  <g id="muted_output">
                    <path
                      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
                      fill="#c9070a"
                    />
                    <path
                      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
                      fill="#c9070a"
                    />
                    <path
                      d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47"
                      fill="#c9070a"
                    />
                    <path
                      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
                      fill="#c9070a"
                    />
                    <path
                      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
                      fill="#c9070a"
                    />
                  </g>
                </svg>
              ) : client.properties.inputMuted ? (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <title>muted_input</title>
                  <g id="muted_input.svg">
                    <path
                      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="#c9070a"
                    />
                  </g>
                </svg>
              ) : client.talkStatus == 1 ? (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <title>player_on_v2</title>
                  <g id="player_on_v2.svg">
                    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df" />
                  </g>
                </svg>
              ) : (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <title>player_off_v2</title>
                  <g id="player_off_v2.svg">
                    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e" />
                  </g>
                </svg>
              )}
              <p>{client.properties.nickname}</p>
            </div>
          );
--- a/src/assets/icons/input_hardware.svg
+++ b/src/assets/icons/input_hardware.svg
@@ -1,19 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <title>muted_hardware_input</title>
  <g id="muted_hardware_input.svg">
    <path
      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"
    />
  </g>
 </svg>
--- a/src/assets/icons/input_muted.svg
+++ b/src/assets/icons/input_muted.svg
@@ -1,9 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <title>muted_input</title>
  <g id="muted_input.svg">
    <path
      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="#c9070a"
    />
  </g>
 </svg>
--- a/src/assets/icons/muted_hardware_output.svg
+++ b/src/assets/icons/muted_hardware_output.svg
@@ -1,25 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <title>muted_hardware_output</title>
  <g id="muted_hardware_output.svg">
    <path
      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
      fill="#d8d8d8"
    />
    <path
      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.12,45.85H9.54A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.26l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
      fill="#d8d8d8"
    />
    <path
      d="M85.11,56.6l-7.87,4.54A10,10,0,0,1,77.62,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.93,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.93,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.93,47"
      fill="#d8d8d8"
    />
    <path
      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.25,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.25,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
      fill="#d8d8d8"
    />
    <path
      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
      fill="#c9070a"
    />
  </g>
 </svg>
--- a/src/assets/icons/not_talk.svg
+++ b/src/assets/icons/not_talk.svg
@@ -1,6 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <title>player_off_v2</title>
  <g id="player_off_v2.svg">
    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#3e4f5e" />
  </g>
 </svg>
--- a/src/assets/icons/output_muted.svg
+++ b/src/assets/icons/output_muted.svg
@@ -1,25 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <title>muted_output</title>
  <g id="muted_output">
    <path
      d="M116.62,39a4.78,4.78,0,0,1-1.59.3l-6.29,3.63a45.42,45.42,0,0,1-13.33,57.64,49.4,49.4,0,0,1-5.82,3.62c-1.06.57-2.2.92-3.19,1.49-1.7,1-2.77,2.13-2.77,4.18a4.57,4.57,0,0,0,4.54,4.54,5.33,5.33,0,0,0,1.84-.35,54.49,54.49,0,0,0,26.94-75c-.12,0-.22,0-.34,0M88.18,13.58a4.57,4.57,0,0,0-4.54,4.54c0,2.06,1.06,3.19,2.77,4.18,1,.57,2.13.92,3.19,1.49a49.4,49.4,0,0,1,5.82,3.62,45.68,45.68,0,0,1,8.19,7.78l7-4a2.63,2.63,0,0,1,1.11-.34A54.31,54.31,0,0,0,90,13.94a5.33,5.33,0,0,0-1.84-.35"
      fill="#c9070a"
    />
    <path
      d="M59.46,71.4,32.77,86.81l19,19a4.51,4.51,0,0,0,3.19,1.35,4.57,4.57,0,0,0,4.54-4.54V71.4M54.92,20.88a4.51,4.51,0,0,0-3.19,1.35L28.11,45.85H9.53A4.57,4.57,0,0,0,5,50.38V77.62a4.57,4.57,0,0,0,4.54,4.54H22.25l37.2-21.48V25.42a4.57,4.57,0,0,0-4.54-4.54"
      fill="#c9070a"
    />
    <path
      d="M85.1,56.6l-7.87,4.54A10,10,0,0,1,77.61,64c0,8.58-8.23,7.09-8.23,12.48A4.53,4.53,0,0,0,73.92,81a4,4,0,0,0,1.77-.35A18.13,18.13,0,0,0,86.69,64a18.34,18.34,0,0,0-1.59-7.4M73.92,47a4.52,4.52,0,0,0-4.54,4.54,3.92,3.92,0,0,0,1.08,2.8l8.76-5.06a16.14,16.14,0,0,0-3.52-1.93A4,4,0,0,0,73.92,47"
      fill="#c9070a"
    />
    <path
      d="M100.87,47.49,93,52a27.15,27.15,0,0,1-8.36,33.87A36.79,36.79,0,0,1,79.24,89a4.54,4.54,0,0,0,1.84,8.72,5.24,5.24,0,0,0,1.77-.35,36.34,36.34,0,0,0,18-49.91M81,30.25A4.54,4.54,0,0,0,79.24,39a36.82,36.82,0,0,1,5.39,3.12,27,27,0,0,1,2.86,2.4l8.14-4.7A35.37,35.37,0,0,0,82.86,30.6,5.31,5.31,0,0,0,81,30.25"
      fill="#c9070a"
    />
    <path
      d="M126.57,43.71,10.42,110.77a2.88,2.88,0,0,1-3.93-1.05L4.33,106A2.88,2.88,0,0,1,5.38,102L121.53,35A2.88,2.88,0,0,1,125.46,36l2.16,3.75A2.88,2.88,0,0,1,126.57,43.71Z"
      fill="#c9070a"
    />
  </g>
 </svg>
--- a/src/assets/icons/talk.svg
+++ b/src/assets/icons/talk.svg
@@ -1,6 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <title>player_on_v2</title>
  <g id="player_on_v2.svg">
    <path d="M64,128a64,64,0,1,1,64-64A64,64,0,0,1,64,128Z" fill="#00b4df" />
  </g>
 </svg>
--- a/src/components/TalkStatus.tsx
+++ b/src/components/TalkStatus.tsx
@@ -1,47 +0,0 @@
 import "@styles/TalkStatus.scss";
 import { IClient } from "react-teamspeak-remote-app-api";
 import MutedHardwareOutputSvg from "@assets/icons/muted_hardware_output.svg?react";
 import InputHardwareSvg from "@assets/icons/input_hardware.svg?react";
 import OutputMutedSvg from "@assets/icons/output_muted.svg?react";
 import InputMutedSvg from "@assets/icons/input_muted.svg?react";
 import TalkingSvg from "@assets/icons/talk.svg?react";
 import NotTalkingSvg from "@assets/icons/not_talk.svg?react";
 // TODO outsource svg to files
 export default function TalkStatus({ client, showTsAvatar }: { client: IClient; showTsAvatar: boolean }) {
  function getTeamSpeakAvatarUrl(): string {
    // MyTeamSpeak avatar property looks like this:
    // 1,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/258947109;2,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/71073868;4,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/1260429936
    // 2, is the avatar we want to use. The other ones are away and busy avatars.
    return (
      client.properties.myteamspeakAvatar.split("2,")[1] ??
      client.properties.myteamspeakAvatar.split(";")[0].split(",")[1]
    );
  }
  return (
    <div className={`talkStatus ${showTsAvatar ? "talkStatus--avatar" : ""} `}>
      {showTsAvatar ? (
        <div className={`avatar ${client.talkStatus === 1 ? "avatar--talk" : ""}`}>
          <img src={getTeamSpeakAvatarUrl()} alt="" />
        </div>
      ) : null}
      {client.properties.outputHardware === false ? (
        <MutedHardwareOutputSvg />
      ) : client.properties.inputHardware === false ? (
        <InputHardwareSvg />
      ) : client.properties.outputMuted ? (
        <OutputMutedSvg />
      ) : client.properties.inputMuted ? (
        <InputMutedSvg />
      ) : client.talkStatus === 1 && !showTsAvatar ? (
        <TalkingSvg />
      ) : !showTsAvatar ? (
        <NotTalkingSvg />
      ) : (
        <svg></svg>
      )}
    </div>
  );
 }
--- a/src/styles/Generator.scss
+++ b/src/styles/Generator.scss
@@ -202,17 +202,27 @@ $breakpoint-3: 600px;
    // Preview styles
    .preview {
      display: flex;
      flex: 1;
      background-image: url("/images/viewer_example_background.png");
      background-repeat: no-repeat;
      background-size: cover;
      border: 2px solid #31f39973;
-      iframe {
+      // Viewer styles (see src/styles/Viewer.scss)
-        width: 100%;
+      .viewer {
        background-image: url("/images/viewer_example_background.png");
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 500px;
-        border: none;
+        h1 {
          font-size: 2rem;
        }
        .client {
          svg {
            width: 2rem;
          }
          p {
            font-size: 2rem;
          }
        }
      }
    }
  }
--- a/src/styles/TalkStatus.scss
+++ b/src/styles/TalkStatus.scss
@@ -1,42 +0,0 @@
 .talkStatus {
  display: flex;
  align-items: center;
  justify-content: center;
  &--avatar {
    margin-right: 4rem;
    svg {
      width: 6rem !important;
      margin-left: -9.5rem;
    }
  }
  svg {
    width: 5rem;
    aspect-ratio: 1/1;
    margin-right: 0.5rem;
    filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
  }
 }
 .avatar {
  $border-radius: 100rem;
  $border-width: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border: $border-width solid transparent;
  border-radius: $border-radius;
  img {
    width: 10rem;
    border-radius: $border-radius;
  }
  &--talk {
    border: $border-width solid rgb(0, 195, 255);
  }
 }
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -5,22 +5,17 @@
 .viewer {
  display: flex;
  flex-direction: column;
-  padding: 0.3rem;
+  padding: 0.5rem;
  gap: 0.3rem;
  &--align-right {
    align-items: flex-end;
  }
  h1 {
-    font-size: 4.5rem;
+    font-size: 5vw;
  }
  h1,
  p {
    background-color: #2f313680;
-    padding: 0.25rem 1.2rem;
+    padding: 0.25rem 0.5rem;
-    border-radius: 1rem;
+    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
@@ -37,16 +32,21 @@
  .client {
    display: flex;
    flex-direction: row;
-    gap: 0.5rem 0.5rem;
+    gap: 0 0;
    align-items: center;
    margin: 0.5rem 0;
-    &--align-right {
+    // icon styles
-      flex-direction: row-reverse;
+    svg {
      width: 5vw;
      aspect-ratio: 1/1;
      margin-right: 0.5rem;
      filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
    }
    // client name styles
    p {
-      font-size: 4rem;
+      font-size: 5vw;
    }
  }
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,2 +1 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import path from 'path';
 import svgr from "vite-plugin-svgr";
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -21,5 +20,5 @@ export default defineConfig({
    outDir: 'dist',
    emptyOutDir: true,
  },
-  plugins: [react(), svgr()],
+  plugins: [react()],
 })
`@@ -1,2 +1 @@`
	`/// <reference types="vite/client" />`	`/// <reference types="vite/client" />`
	`/// <reference types="vite-plugin-svgr/client" />`