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

fix viewer font size

Browse Source
This commit is contained in:
Janis
2023-11-12 19:19:33 +01:00
parent 7fd2e2aafa
commit 4eb61d3b96
4 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -43,7 +43,7 @@ Try this instruction if you have problems with the quick instructions above.
5. Enter the in step 1 generated URL into the URL field of the Browser Source 5. Enter the in step 1 generated URL into the URL field of the Browser Source
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/50b755f9-d4b4-469f-9136-e2b18f226547) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/50b755f9-d4b4-469f-9136-e2b18f226547)
6. Set the width and height to your desired size. Recommended is a ratio of 1:1 or 1:2 (e.g. 1500x3000 OR 1000x2000) 6. Set the width and height to your desired size. Recommended is a width of 1000px and the height is determined of how many clients are expected (play around with these values)
7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again) 7. You should now receive a notification in TeamSpeak5 that the app is allowed to connect to your TeamSpeak5 client. Allow it. (If you don't get a notification, restart TeamSpeak5 and OBS -> try again)
![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65) ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)

2
package.json
View File

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

2
src/Viewer.tsx
View File

@@ -16,7 +16,7 @@ export default function Viewer({
remoteAppPort: remoteAppPort, remoteAppPort: remoteAppPort,
auth: { auth: {
identifier: "de.tealfire.obs", identifier: "de.tealfire.obs",
version: "2.0.6", version: "2.0.7",
name: "TS5 OBS Overlay", name: "TS5 OBS Overlay",
description: "A OBS overlay for TS5 by DerTyp7", description: "A OBS overlay for TS5 by DerTyp7",
}, },

9
src/styles/Viewer.scss
View File

@@ -7,6 +7,10 @@
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0.5rem;
h1 {
font-size: 5vw;
}
h1, h1,
p { p {
background-color: #2f313680; background-color: #2f313680;
@@ -34,14 +38,15 @@
// icon styles // icon styles
svg { svg {
width: 2.1rem; width: 5vw;
aspect-ratio: 1/1; aspect-ratio: 1/1;
margin-right: 0.5rem; 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: 1.4rem; font-size: 5vw;
} }
} }
} }