janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-29 04:42:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

using spaces instead of tabs now & added prettier config

Browse Source
This commit is contained in:
Janis
2022-10-27 21:14:29 +02:00
parent 00c4dbd0a1
commit 9f5c39b5a8
11 changed files with 281 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.gitignore vendored Normal file
View File

4
.prettierrc Normal file
View File

@@ -0,0 +1,4 @@
{
"tabWidth": 2,
"useTabs": false
}

18
config.js
View File

@@ -1,11 +1,11 @@
const CONFIG = { const CONFIG = {
apiKey: "9811add4-5ee3-436d-ae9d-d98ff53a1f12", apiKey: "9811add4-5ee3-436d-ae9d-d98ff53a1f12",
remoteAppPort: 5899, remoteAppPort: 5899,
style: { style: {
fontBackground: "rgba(19, 20, 33, 0.5)", fontBackground: "rgba(19, 20, 33, 0.5)",
fontColor: "#ffffff", fontColor: "#ffffff",
fontSize: "70pt", fontSize: "70pt",
fontStrokeSize: "3px", fontStrokeSize: "3px",
fontStrokeColor: "#000000", fontStrokeColor: "#000000",
}, },
}; };

24
css/style.css
View File

@@ -1,27 +1,27 @@
* { * {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-weight: bold; font-weight: bold;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#content div { #content div {
margin-top: 5px; margin-top: 5px;
} }
.content-img { .content-img {
float: left; float: left;
width: 100px; width: 100px;
} }
.content-img img { .content-img img {
display: block; display: block;
} }
.content-text { .content-text {
margin-left: 130px; margin-left: 130px;
} }
.content-text p { .content-text p {
display: inline; display: inline;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }

122
js/app.js
View File

@@ -1,70 +1,70 @@
function main() { function main() {
const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`); const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
const paylaod = { const paylaod = {
type: "auth", type: "auth",
payload: { payload: {
identifier: "de.tealfire.obs", identifier: "de.tealfire.obs",
version: "0.0.1", version: "0.0.1",
name: "TS5 OBS Overlay", name: "TS5 OBS Overlay",
description: "A simple OBS overlay for TS5 by DerTyp876", description: "A simple OBS overlay for TS5 by DerTyp876",
content: { content: {
apiKey: CONFIG.apiKey, apiKey: CONFIG.apiKey,
}, },
}, },
}; };
clientList.clear(); clientList.clear();
channelList.clear(); channelList.clear();
ws.onopen = (event) => { ws.onopen = (event) => {
// Send payload to TS5 client // Send payload to TS5 client
ws.send(JSON.stringify(paylaod)); ws.send(JSON.stringify(paylaod));
}; };
ws.onmessage = (event) => { ws.onmessage = (event) => {
let data = JSON.parse(event.data); let data = JSON.parse(event.data);
// console.log(data); // console.log(data);
switch (data.type) { switch (data.type) {
case "auth": case "auth":
handleAuthMessage(data); handleAuthMessage(data);
console.log( console.log(
"%c --> API-KEY: %s ", "%c --> API-KEY: %s ",
"color:red;font-weight:bold;", "color:red;font-weight:bold;",
` ${data.payload.apiKey}` ` ${data.payload.apiKey}`
); );
break; break;
case "clientMoved": case "clientMoved":
handleClientMoved(data); handleClientMoved(data);
break; break;
case "clientPropertiesUpdated": case "clientPropertiesUpdated":
handleClientPropertiesUpdate(data); handleClientPropertiesUpdate(data);
break; break;
case "talkStatusChanged": case "talkStatusChanged":
handleTalkStatusChanged(data); handleTalkStatusChanged(data);
break; break;
case "serverPropertiesUpdated": case "serverPropertiesUpdated":
ws.close(); ws.close();
default: default:
console.log(`No handler for event type: ${data.type}`); console.log(`No handler for event type: ${data.type}`);
break; break;
} }
// Draw clientList in HTML object // Draw clientList in HTML object
drawClients(); drawClients();
}; };
ws.onerror = (err) => { ws.onerror = (err) => {
console.error(err); console.error(err);
ws.close(); ws.close();
return; return;
}; };
ws.onclose = (event) => { ws.onclose = (event) => {
console.log("Disconnected: " + event.reason); console.log("Disconnected: " + event.reason);
clientList.clear(); clientList.clear();
channelList.clear(); channelList.clear();
drawClients(); drawClients();
main(); // Reconnected main(); // Reconnected
}; };
} }
main(); main();

36
js/display_content.js
View File

@@ -1,23 +1,23 @@
function drawClients() { function drawClients() {
let elem = document.getElementById("content"); let elem = document.getElementById("content");
result = ""; result = "";
getClientsInChannel(thisClient.channel).forEach((c) => { getClientsInChannel(thisClient.channel).forEach((c) => {
result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`; result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
result += '<div class="content-img">'; result += '<div class="content-img">';
if (c.outputMuted) { if (c.outputMuted) {
result += ' <img src="img/muted_output.svg" />'; result += ' <img src="img/muted_output.svg" />';
} else if (c.inputMuted) { } else if (c.inputMuted) {
result += ' <img src="img/muted_input.svg" />'; result += ' <img src="img/muted_input.svg" />';
} else if (c.talkStatus == 1) { } else if (c.talkStatus == 1) {
result += ' <img src="img/on.svg" />'; result += ' <img src="img/on.svg" />';
} else { } else {
result += ' <img src="img/off.svg" />'; result += ' <img src="img/off.svg" />';
} }
result += "</div>"; result += "</div>";
result += `<div class="content-text" result += `<div class="content-text"
style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor}; style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`; "><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
}); });
elem.innerHTML = result; elem.innerHTML = result;
} }

134
js/event_handlers.js
View File

@@ -1,80 +1,80 @@
function handleAuthMessage(data) { function handleAuthMessage(data) {
channelList.setItems( channelList.setItems(
parseChannelInfos(data.payload.connections[0].channelInfos) parseChannelInfos(data.payload.connections[0].channelInfos)
); );
clientList.setItems( clientList.setItems(
parseClientInfos(data.payload.connections[0].clientInfos) parseClientInfos(data.payload.connections[0].clientInfos)
); );
thisClient = clientList.getById(data.payload.connections[0].clientId); thisClient = clientList.getById(data.payload.connections[0].clientId);
} }
function handleClientMoved(data) { function handleClientMoved(data) {
const client = clientList.getById(data.payload.clientId); const client = clientList.getById(data.payload.clientId);
if (data.payload.newChannelId == 0) { if (data.payload.newChannelId == 0) {
// User disconnected // User disconnected
if (client) { if (client) {
console.log(`${client.name} disconnected`); console.log(`${client.name} disconnected`);
clientList.remove(client); clientList.remove(client);
} }
if (data.payload.clientId == thisClient.id) { if (data.payload.clientId == thisClient.id) {
console.log("You disconnected"); console.log("You disconnected");
clientList.clear(); clientList.clear();
} }
} else { } else {
// User moved channel // User moved channel
if (client) { if (client) {
// Client already exists in list // Client already exists in list
clientList.getById(data.payload.clientId).channel = channelList.getById( clientList.getById(data.payload.clientId).channel = channelList.getById(
data.payload.newChannelId data.payload.newChannelId
); );
} else { } else {
// New Client has to be created // New Client has to be created
clientList.add( clientList.add(
new Client( new Client(
data.payload.clientId, data.payload.clientId,
channelList.getById(data.payload.newChannelId), channelList.getById(data.payload.newChannelId),
data.payload.properties.nickname data.payload.properties.nickname
) )
); );
} }
} }
} }
function handleClientPropertiesUpdate(data) { function handleClientPropertiesUpdate(data) {
let client = clientList.getById(data.payload.clientId); let client = clientList.getById(data.payload.clientId);
if (data.payload.properties.channelGroupInheritedChannelId == 0) { if (data.payload.properties.channelGroupInheritedChannelId == 0) {
if (client) { if (client) {
clientList.remove(client); clientList.remove(client);
} }
} else { } else {
if (client) { if (client) {
client.channel = channelList.getById( client.channel = channelList.getById(
data.payload.properties.channelGroupInheritedChannelId data.payload.properties.channelGroupInheritedChannelId
); );
client.name = data.payload.properties.nickname; client.name = data.payload.properties.nickname;
client.inputMuted = data.payload.properties.inputMuted; client.inputMuted = data.payload.properties.inputMuted;
client.outputMuted = data.payload.properties.outputMuted; client.outputMuted = data.payload.properties.outputMuted;
} else { } else {
clientList.add( clientList.add(
new Client( new Client(
data.payload.clientId, data.payload.clientId,
channelList.getById( channelList.getById(
data.payload.properties.channelGroupInheritedChannelId data.payload.properties.channelGroupInheritedChannelId
), ),
data.payload.properties.nickname, data.payload.properties.nickname,
data.payload.properies.inputMuted, data.payload.properies.inputMuted,
data.payload.properies.outputMuted data.payload.properies.outputMuted
) )
); );
} }
} }
} }
function handleTalkStatusChanged(data) { function handleTalkStatusChanged(data) {
let client = clientList.getById(data.payload.clientId); let client = clientList.getById(data.payload.clientId);
if (client) { if (client) {
client.talkStatus = data.payload.status; client.talkStatus = data.payload.status;
} }
} }

110
js/objects.js
View File

@@ -1,68 +1,68 @@
class Channel { class Channel {
constructor(id, name) { constructor(id, name) {
this.id = id; this.id = id;
this.name = name; this.name = name;
} }
} }
class Client { class Client {
constructor( constructor(
id, id,
channel, channel,
name, name,
inputMuted = false, inputMuted = false,
outputMuted = false, outputMuted = false,
talkStatus = 0 talkStatus = 0
) { ) {
this.id = id; this.id = id;
this.channel = channel; this.channel = channel;
this.name = name; this.name = name;
this.inputMuted = inputMuted; this.inputMuted = inputMuted;
this.outputMuted = outputMuted; this.outputMuted = outputMuted;
this.talkStatus = talkStatus; this.talkStatus = talkStatus;
console.log(`Client created: ${this.id} - ${this.name}`); console.log(`Client created: ${this.id} - ${this.name}`);
} }
} }
class List { class List {
constructor(items = []) { constructor(items = []) {
this.items = items; this.items = items;
} }
getById(id) { getById(id) {
return this.items.filter((obj) => { return this.items.filter((obj) => {
return obj.id === id; return obj.id === id;
})[0]; })[0];
} }
add(item) { add(item) {
if (!this.getById(item.id)) { if (!this.getById(item.id)) {
this.items.push(item); this.items.push(item);
} else { } else {
console.error(`An item with id ${item.id} already exists in list`); console.error(`An item with id ${item.id} already exists in list`);
} }
} }
remove(item) { remove(item) {
this.items.splice(this.items.indexOf(item), 1); this.items.splice(this.items.indexOf(item), 1);
} }
clear() { clear() {
this.items = []; this.items = [];
} }
setItems(items) { setItems(items) {
// Never tested // Never tested
let duplicateFound = false; let duplicateFound = false;
items.forEach((e1, i) => { items.forEach((e1, i) => {
items.forEach((e2, j) => { items.forEach((e2, j) => {
if (e1.id === e2.id && i != j) { if (e1.id === e2.id && i != j) {
duplicateFound = true; duplicateFound = true;
} }
}); });
}); });
if (!duplicateFound) { if (!duplicateFound) {
this.items = items; this.items = items;
} }
} }
} }

50
js/parser.js
View File

@@ -1,32 +1,32 @@
function parseChannelInfos(channelInfos) { function parseChannelInfos(channelInfos) {
let result = []; let result = [];
let rootChannels = channelInfos.rootChannels; let rootChannels = channelInfos.rootChannels;
let subChannels = channelInfos.subChannels; let subChannels = channelInfos.subChannels;
rootChannels.forEach((rc) => { rootChannels.forEach((rc) => {
result.push(new Channel(rc.id, rc.properties.name)); result.push(new Channel(rc.id, rc.properties.name));
if (rc.id in subChannels) { if (rc.id in subChannels) {
subChannels[rc.id].forEach((sc) => { subChannels[rc.id].forEach((sc) => {
result.push(new Channel(sc.id, sc.properties.name)); result.push(new Channel(sc.id, sc.properties.name));
}); });
} }
}); });
return result; return result;
} }
function parseClientInfos(clientInfos) { function parseClientInfos(clientInfos) {
let result = []; let result = [];
clientInfos.forEach((e) => { clientInfos.forEach((e) => {
result.push( result.push(
new Client( new Client(
e.id, e.id,
channelList.getById(e.channelId), channelList.getById(e.channelId),
e.properties.nickname, e.properties.nickname,
e.properties.inputMuted, e.properties.inputMuted,
e.properties.outputMuted e.properties.outputMuted
) )
); );
}); });
return result; return result;
} }

14
js/utils.js
View File

@@ -1,10 +1,10 @@
function getClientsInChannel(channel) { function getClientsInChannel(channel) {
let result = []; let result = [];
clientList.items.forEach((e) => { clientList.items.forEach((e) => {
if (e.channel.id == channel.id) { if (e.channel.id == channel.id) {
result.push(e); result.push(e);
} }
}); });
return result; return result;
} }

46
overlay.html
View File

@@ -1,27 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
<title>TS5 - OBS Overlay</title> <title>TS5 - OBS Overlay</title>
</head> </head>
<body> <body>
<script src="config.js"></script> <script src="config.js"></script>
<script src="js/objects.js"></script> <script src="js/objects.js"></script>
<script> <script>
let clientList = new List(); let clientList = new List();
let channelList = new List(); let channelList = new List();
let thisClient; let thisClient;
</script> </script>
<div id="content"></div> <div id="content"></div>
<!--Scripts--> <!--Scripts-->
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
<script src="js/display_content.js"></script> <script src="js/display_content.js"></script>
<script src="js/parser.js"></script> <script src="js/parser.js"></script>
<script src="js/event_handlers.js"></script> <script src="js/event_handlers.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>
</html> </html>