diff --git a/.prettierrc b/.prettierrc index 944da1a..f86d44a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ { "tabWidth": 2, "useTabs": false, - "printWidth": 180, + "printWidth": 120, "singleQuote": false, "semi": true } diff --git a/index.html b/index.html index c794ea7..a9ae9fe 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,13 @@ - + - TS5-OBS-Overlay + TeamSpeak-OBS-Overlay
diff --git a/src/App.tsx b/src/App.tsx index ca3dacd..79bcead 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,6 +17,7 @@ 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"} /> } /> diff --git a/src/Generator.tsx b/src/Generator.tsx index 1aeea68..f2d73ad 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -9,13 +9,14 @@ 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); // Effect to generate URL when dependencies change useEffect(() => { generateUrl(); - }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]); + }, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight]); // Function to generate the output URL function generateUrl() { @@ -26,6 +27,7 @@ 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.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 @@ -62,7 +64,9 @@ export default function Generator() {

1. Customize your settings

2. Copy the generated URL

3. Paste the URL into the BrowserSource URL field in OBS

- Click here for detailed instructions + + Click here for detailed instructions + {/* Output Section */} @@ -98,18 +102,34 @@ export default function Generator() { + + {/* Alignment Option */} +
setAlignRight(!alignRight)}> + + +
{/* Client Limit Option */}
- ) => setClientLimit(parseInt(e.target.value))} /> + ) => setClientLimit(parseInt(e.target.value))} + />
{/* RemoteApp-Port Option */}
- ) => setRemoteAppPort(parseInt(e.target.value))} /> + ) => setRemoteAppPort(parseInt(e.target.value))} + />
@@ -118,7 +138,13 @@ export default function Generator() { {/* Preview */}
- +
diff --git a/src/Viewer.tsx b/src/Viewer.tsx index 0967b0d..e8f5b94 100644 --- a/src/Viewer.tsx +++ b/src/Viewer.tsx @@ -6,11 +6,13 @@ export default function Viewer({ showChannelName = false, hideNonTalking = false, clientLimit = 0, + alignRight = false, }: { remoteAppPort?: number; showChannelName?: boolean; hideNonTalking?: boolean; clientLimit?: number; + alignRight?: boolean; }) { const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({ remoteAppPort: remoteAppPort, @@ -30,7 +32,7 @@ export default function Viewer({ }) as IClient[]; return ( -
+
{showChannelName && currentChannel ? (

{currentChannel?.properties.name}

@@ -44,13 +46,19 @@ 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; } //* Normal client return ( -
+
{client.properties.outputHardware == false ? ( muted_hardware_output @@ -85,7 +93,16 @@ 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" /> - + ) : client.properties.outputMuted ? ( diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss index a8ed941..d8d4508 100644 --- a/src/styles/Viewer.scss +++ b/src/styles/Viewer.scss @@ -7,6 +7,10 @@ flex-direction: column; padding: 0.5rem; + &--align-right { + align-items: flex-end; + } + h1 { font-size: 5vw; } @@ -32,9 +36,12 @@ .client { display: flex; flex-direction: row; - gap: 0 0; + gap: 0.5rem 0.5rem; align-items: center; - margin: 0.5rem 0; + + &--align-right { + flex-direction: row-reverse; + } // icon styles svg {