janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-28 20:32:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add SVG icons and integrate vite-plugin-svgr for improved asset handling

Browse Source
This commit is contained in:
Janis
2025-01-24 16:14:03 +01:00
parent 9c94a351ee
commit 7f5f253c21
17 changed files with 1065 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

920
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -51,6 +51,7 @@
"eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.18", "eslint-plugin-react-refresh": "^0.4.18",
"typescript": "^5.7.3", "typescript": "^5.7.3",
"vite": "^6.0.11" "vite": "^6.0.11",
"vite-plugin-svgr": "^4.3.0"
} }
} }

1
src/App.tsx
View File

@@ -18,6 +18,7 @@ export default function App() {
hideNonTalking={searchParams.get("hideNonTalking") === "true"} hideNonTalking={searchParams.get("hideNonTalking") === "true"}
clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0} clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
alignRight={searchParams.get("alignRight") === "true"} alignRight={searchParams.get("alignRight") === "true"}
showTsAvatar={searchParams.get("showTsAvatar") === "true"}
/> />
} }
/> />

25
src/Generator.tsx
View File

@@ -1,6 +1,7 @@
import { ChangeEvent, useRef, useState, useEffect } from "react"; import { ChangeEvent, useRef, useState, useEffect } from "react";
import "@styles/Generator.scss"; import "@styles/Generator.scss";
import Viewer from "./Viewer"; import Viewer from "./Viewer";
import { url } from "inspector";
export default function Generator() { export default function Generator() {
// State variables // State variables
@@ -12,11 +13,12 @@ export default function Generator() {
const [alignRight, setAlignRight] = useState(false); const [alignRight, setAlignRight] = useState(false);
const [hideNonTalking, setHideNonTalking] = useState(false); const [hideNonTalking, setHideNonTalking] = useState(false);
const [clientLimit, setClientLimit] = useState(0); const [clientLimit, setClientLimit] = useState(0);
const [showTsAvatar, setShowTsAvatar] = useState(false);
// Effect to generate URL when dependencies change // Effect to generate URL when dependencies change
useEffect(() => { useEffect(() => {
generateUrl(); generateUrl();
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight]); }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight, showTsAvatar]);
// Function to generate the output URL // Function to generate the output URL
function generateUrl() { function generateUrl() {
@@ -28,6 +30,7 @@ export default function Generator() {
url.searchParams.set("hideNonTalking", hideNonTalking.toString()); url.searchParams.set("hideNonTalking", hideNonTalking.toString());
url.searchParams.set("clientLimit", clientLimit.toString()); url.searchParams.set("clientLimit", clientLimit.toString());
url.searchParams.set("alignRight", alignRight.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 // 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 // gh-pages needs the hash to be between the base URL and the search params
@@ -93,21 +96,27 @@ export default function Generator() {
<section> <section>
{/* Show Channel Name Option */} {/* Show Channel Name Option */}
<div className="option" onClick={() => setShowChannelName(!showChannelName)}> <div className="option" onClick={() => setShowChannelName(!showChannelName)}>
<input type="checkbox" checked={showChannelName} /> <input type="checkbox" defaultChecked={showChannelName} />
<label>Show channel name</label> <label>Show channel name</label>
</div> </div>
{/* Hide Non-Talking Clients Option */} {/* Hide Non-Talking Clients Option */}
<div className="option" onClick={() => setHideNonTalking(!hideNonTalking)}> <div className="option" onClick={() => setHideNonTalking(!hideNonTalking)}>
<input type="checkbox" checked={hideNonTalking} /> <input type="checkbox" defaultChecked={hideNonTalking} />
<label>Hide non talking clients</label> <label>Hide non talking clients</label>
</div> </div>
{/* Alignment Option */} {/* Alignment Option */}
<div className="option" onClick={() => setAlignRight(!alignRight)}> <div className="option" onClick={() => setAlignRight(!alignRight)}>
<input type="checkbox" checked={alignRight} /> <input type="checkbox" defaultChecked={alignRight} />
<label>Align Right</label> <label>Align Right</label>
</div> </div>
{/* Show TeamSpeak Avatar */}
<div className="option" onClick={() => setShowTsAvatar(!showTsAvatar)}>
<input type="checkbox" defaultChecked={showTsAvatar} />
<label>Show TeamSpeak Avatar</label>
</div>
</section> </section>
<section> <section>
@@ -138,13 +147,7 @@ export default function Generator() {
{/* Preview */} {/* Preview */}
<div className="preview"> <div className="preview">
<Viewer <iframe src={outputUrl}></iframe>
remoteAppPort={remoteAppPort}
showChannelName={showChannelName}
hideNonTalking={hideNonTalking}
clientLimit={clientLimit}
alignRight={alignRight}
/>
</div> </div>
</div> </div>
</div> </div>

101
src/Viewer.tsx
View File

@@ -1,5 +1,6 @@
import "@styles/Viewer.scss"; import "@styles/Viewer.scss";
import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api"; import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";
import TalkStatus from "@/components/TalkStatus";
export default function Viewer({ export default function Viewer({
remoteAppPort = 5899, remoteAppPort = 5899,
@@ -7,12 +8,14 @@ export default function Viewer({
hideNonTalking = false, hideNonTalking = false,
clientLimit = 0, clientLimit = 0,
alignRight = false, alignRight = false,
showTsAvatar = false,
}: { }: {
remoteAppPort?: number; remoteAppPort?: number;
showChannelName?: boolean; showChannelName?: boolean;
hideNonTalking?: boolean; hideNonTalking?: boolean;
clientLimit?: number; clientLimit?: number;
alignRight?: boolean; alignRight?: boolean;
showTsAvatar?: boolean;
}) { }) {
const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({ const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
remoteAppPort: remoteAppPort, remoteAppPort: remoteAppPort,
@@ -59,103 +62,7 @@ export default function Viewer({
className={`client ${alignRight ? "client--align-right" : ""}`} className={`client ${alignRight ? "client--align-right" : ""}`}
key={`${client.id}-${client.channel?.connection.id}`} key={`${client.id}-${client.channel?.connection.id}`}
> >
{client.properties.outputHardware == false ? ( <TalkStatus client={client} showTsAvatar={showTsAvatar} />
<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>
) : 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> <p>{client.properties.nickname}</p>
</div> </div>
); );

19
src/assets/icons/input_hardware.svg Normal file
View File

@@ -0,0 +1,19 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 964 B

9
src/assets/icons/input_muted.svg Normal file
View File

@@ -0,0 +1,9 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 748 B

25
src/assets/icons/muted_hardware_output.svg Normal file
View File

@@ -0,0 +1,25 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
src/assets/icons/not_talk.svg Normal file
View File

@@ -0,0 +1,6 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 215 B

25
src/assets/icons/output_muted.svg Normal file
View File

@@ -0,0 +1,25 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
src/assets/icons/talk.svg Normal file
View File

@@ -0,0 +1,6 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

47
src/components/TalkStatus.tsx Normal file
View File

@@ -0,0 +1,47 @@
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>
);
}

24
src/styles/Generator.scss
View File

@@ -202,27 +202,17 @@ $breakpoint-3: 600px;
// Preview styles // Preview styles
.preview { .preview {
display: flex;
flex: 1; flex: 1;
background-image: url("/images/viewer_example_background.png");
background-repeat: no-repeat;
background-size: cover;
border: 2px solid #31f39973; border: 2px solid #31f39973;
// Viewer styles (see src/styles/Viewer.scss) iframe {
.viewer { width: 100%;
background-image: url("/images/viewer_example_background.png");
background-repeat: no-repeat;
background-size: cover;
min-height: 500px; min-height: 500px;
h1 { border: none;
font-size: 2rem;
}
.client {
svg {
width: 2rem;
}
p {
font-size: 2rem;
}
}
} }
} }
} }

42
src/styles/TalkStatus.scss Normal file
View File

@@ -0,0 +1,42 @@
.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);
}
}

19
src/styles/Viewer.scss
View File

@@ -5,21 +5,22 @@
.viewer { .viewer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0.3rem;
gap: 0.3rem;
&--align-right { &--align-right {
align-items: flex-end; align-items: flex-end;
} }
h1 { h1 {
font-size: 5vw; font-size: 4.5rem;
} }
h1, h1,
p { p {
background-color: #2f313680; background-color: #2f313680;
padding: 0.25rem 0.5rem; padding: 0.25rem 1.2rem;
border-radius: 0.25rem; border-radius: 1rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -43,17 +44,9 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
// icon styles
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 // client name styles
p { p {
font-size: 5vw; font-size: 4rem;
} }
} }
} }

1
src/vite-env.d.ts vendored
View File

@@ -1 +1,2 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

3
vite.config.ts
View File

@@ -1,6 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc' import react from '@vitejs/plugin-react-swc'
import path from 'path'; import path from 'path';
import svgr from "vite-plugin-svgr";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
@@ -20,5 +21,5 @@ export default defineConfig({
outDir: 'dist', outDir: 'dist',
emptyOutDir: true, emptyOutDir: true,
}, },
plugins: [react()], plugins: [react(), svgr()],
}) })