mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2025-10-29 04:42:08 +01:00
using spaces instead of tabs now & added prettier config
This commit is contained in:
Janis
0
.gitignore
vendored
Normal file
0
.gitignore
vendored
Normal file
4
.prettierrc
Normal file
4
.prettierrc
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false
|
||||
}
|
||||
18
config.js
18
config.js
@@ -1,11 +1,11 @@
|
||||
const CONFIG = {
|
||||
apiKey: "9811add4-5ee3-436d-ae9d-d98ff53a1f12",
|
||||
remoteAppPort: 5899,
|
||||
style: {
|
||||
fontBackground: "rgba(19, 20, 33, 0.5)",
|
||||
fontColor: "#ffffff",
|
||||
fontSize: "70pt",
|
||||
fontStrokeSize: "3px",
|
||||
fontStrokeColor: "#000000",
|
||||
},
|
||||
apiKey: "9811add4-5ee3-436d-ae9d-d98ff53a1f12",
|
||||
remoteAppPort: 5899,
|
||||
style: {
|
||||
fontBackground: "rgba(19, 20, 33, 0.5)",
|
||||
fontColor: "#ffffff",
|
||||
fontSize: "70pt",
|
||||
fontStrokeSize: "3px",
|
||||
fontStrokeColor: "#000000",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#content div {
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.content-img {
|
||||
float: left;
|
||||
width: 100px;
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.content-img img {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
margin-left: 130px;
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.content-text p {
|
||||
display: inline;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
display: inline;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
122
js/app.js
122
js/app.js
@@ -1,70 +1,70 @@
|
||||
function main() {
|
||||
const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
|
||||
const paylaod = {
|
||||
type: "auth",
|
||||
payload: {
|
||||
identifier: "de.tealfire.obs",
|
||||
version: "0.0.1",
|
||||
name: "TS5 OBS Overlay",
|
||||
description: "A simple OBS overlay for TS5 by DerTyp876",
|
||||
content: {
|
||||
apiKey: CONFIG.apiKey,
|
||||
},
|
||||
},
|
||||
};
|
||||
const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
|
||||
const paylaod = {
|
||||
type: "auth",
|
||||
payload: {
|
||||
identifier: "de.tealfire.obs",
|
||||
version: "0.0.1",
|
||||
name: "TS5 OBS Overlay",
|
||||
description: "A simple OBS overlay for TS5 by DerTyp876",
|
||||
content: {
|
||||
apiKey: CONFIG.apiKey,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
clientList.clear();
|
||||
channelList.clear();
|
||||
clientList.clear();
|
||||
channelList.clear();
|
||||
|
||||
ws.onopen = (event) => {
|
||||
// Send payload to TS5 client
|
||||
ws.send(JSON.stringify(paylaod));
|
||||
};
|
||||
ws.onopen = (event) => {
|
||||
// Send payload to TS5 client
|
||||
ws.send(JSON.stringify(paylaod));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
let data = JSON.parse(event.data);
|
||||
// console.log(data);
|
||||
switch (data.type) {
|
||||
case "auth":
|
||||
handleAuthMessage(data);
|
||||
console.log(
|
||||
"%c --> API-KEY: %s ",
|
||||
"color:red;font-weight:bold;",
|
||||
` ${data.payload.apiKey}`
|
||||
);
|
||||
break;
|
||||
case "clientMoved":
|
||||
handleClientMoved(data);
|
||||
break;
|
||||
case "clientPropertiesUpdated":
|
||||
handleClientPropertiesUpdate(data);
|
||||
break;
|
||||
case "talkStatusChanged":
|
||||
handleTalkStatusChanged(data);
|
||||
break;
|
||||
case "serverPropertiesUpdated":
|
||||
ws.close();
|
||||
default:
|
||||
console.log(`No handler for event type: ${data.type}`);
|
||||
break;
|
||||
}
|
||||
ws.onmessage = (event) => {
|
||||
let data = JSON.parse(event.data);
|
||||
// console.log(data);
|
||||
switch (data.type) {
|
||||
case "auth":
|
||||
handleAuthMessage(data);
|
||||
console.log(
|
||||
"%c --> API-KEY: %s ",
|
||||
"color:red;font-weight:bold;",
|
||||
` ${data.payload.apiKey}`
|
||||
);
|
||||
break;
|
||||
case "clientMoved":
|
||||
handleClientMoved(data);
|
||||
break;
|
||||
case "clientPropertiesUpdated":
|
||||
handleClientPropertiesUpdate(data);
|
||||
break;
|
||||
case "talkStatusChanged":
|
||||
handleTalkStatusChanged(data);
|
||||
break;
|
||||
case "serverPropertiesUpdated":
|
||||
ws.close();
|
||||
default:
|
||||
console.log(`No handler for event type: ${data.type}`);
|
||||
break;
|
||||
}
|
||||
|
||||
// Draw clientList in HTML object
|
||||
drawClients();
|
||||
};
|
||||
// Draw clientList in HTML object
|
||||
drawClients();
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error(err);
|
||||
ws.close();
|
||||
return;
|
||||
};
|
||||
ws.onerror = (err) => {
|
||||
console.error(err);
|
||||
ws.close();
|
||||
return;
|
||||
};
|
||||
|
||||
ws.onclose = (event) => {
|
||||
console.log("Disconnected: " + event.reason);
|
||||
clientList.clear();
|
||||
channelList.clear();
|
||||
drawClients();
|
||||
main(); // Reconnected
|
||||
};
|
||||
ws.onclose = (event) => {
|
||||
console.log("Disconnected: " + event.reason);
|
||||
clientList.clear();
|
||||
channelList.clear();
|
||||
drawClients();
|
||||
main(); // Reconnected
|
||||
};
|
||||
}
|
||||
main();
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
function drawClients() {
|
||||
let elem = document.getElementById("content");
|
||||
let elem = document.getElementById("content");
|
||||
|
||||
result = "";
|
||||
getClientsInChannel(thisClient.channel).forEach((c) => {
|
||||
result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
|
||||
result += '<div class="content-img">';
|
||||
if (c.outputMuted) {
|
||||
result += ' <img src="img/muted_output.svg" />';
|
||||
} else if (c.inputMuted) {
|
||||
result += ' <img src="img/muted_input.svg" />';
|
||||
} else if (c.talkStatus == 1) {
|
||||
result += ' <img src="img/on.svg" />';
|
||||
} else {
|
||||
result += ' <img src="img/off.svg" />';
|
||||
}
|
||||
result += "</div>";
|
||||
result += `<div class="content-text"
|
||||
result = "";
|
||||
getClientsInChannel(thisClient.channel).forEach((c) => {
|
||||
result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
|
||||
result += '<div class="content-img">';
|
||||
if (c.outputMuted) {
|
||||
result += ' <img src="img/muted_output.svg" />';
|
||||
} else if (c.inputMuted) {
|
||||
result += ' <img src="img/muted_input.svg" />';
|
||||
} else if (c.talkStatus == 1) {
|
||||
result += ' <img src="img/on.svg" />';
|
||||
} else {
|
||||
result += ' <img src="img/off.svg" />';
|
||||
}
|
||||
result += "</div>";
|
||||
result += `<div class="content-text"
|
||||
style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
|
||||
"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
|
||||
});
|
||||
elem.innerHTML = result;
|
||||
});
|
||||
elem.innerHTML = result;
|
||||
}
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
function handleAuthMessage(data) {
|
||||
channelList.setItems(
|
||||
parseChannelInfos(data.payload.connections[0].channelInfos)
|
||||
);
|
||||
clientList.setItems(
|
||||
parseClientInfos(data.payload.connections[0].clientInfos)
|
||||
);
|
||||
thisClient = clientList.getById(data.payload.connections[0].clientId);
|
||||
channelList.setItems(
|
||||
parseChannelInfos(data.payload.connections[0].channelInfos)
|
||||
);
|
||||
clientList.setItems(
|
||||
parseClientInfos(data.payload.connections[0].clientInfos)
|
||||
);
|
||||
thisClient = clientList.getById(data.payload.connections[0].clientId);
|
||||
}
|
||||
|
||||
function handleClientMoved(data) {
|
||||
const client = clientList.getById(data.payload.clientId);
|
||||
const client = clientList.getById(data.payload.clientId);
|
||||
|
||||
if (data.payload.newChannelId == 0) {
|
||||
// User disconnected
|
||||
if (client) {
|
||||
console.log(`${client.name} disconnected`);
|
||||
clientList.remove(client);
|
||||
}
|
||||
if (data.payload.clientId == thisClient.id) {
|
||||
console.log("You disconnected");
|
||||
clientList.clear();
|
||||
}
|
||||
} else {
|
||||
// User moved channel
|
||||
if (client) {
|
||||
// Client already exists in list
|
||||
clientList.getById(data.payload.clientId).channel = channelList.getById(
|
||||
data.payload.newChannelId
|
||||
);
|
||||
} else {
|
||||
// New Client has to be created
|
||||
clientList.add(
|
||||
new Client(
|
||||
data.payload.clientId,
|
||||
channelList.getById(data.payload.newChannelId),
|
||||
data.payload.properties.nickname
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
if (data.payload.newChannelId == 0) {
|
||||
// User disconnected
|
||||
if (client) {
|
||||
console.log(`${client.name} disconnected`);
|
||||
clientList.remove(client);
|
||||
}
|
||||
if (data.payload.clientId == thisClient.id) {
|
||||
console.log("You disconnected");
|
||||
clientList.clear();
|
||||
}
|
||||
} else {
|
||||
// User moved channel
|
||||
if (client) {
|
||||
// Client already exists in list
|
||||
clientList.getById(data.payload.clientId).channel = channelList.getById(
|
||||
data.payload.newChannelId
|
||||
);
|
||||
} else {
|
||||
// New Client has to be created
|
||||
clientList.add(
|
||||
new Client(
|
||||
data.payload.clientId,
|
||||
channelList.getById(data.payload.newChannelId),
|
||||
data.payload.properties.nickname
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleClientPropertiesUpdate(data) {
|
||||
let client = clientList.getById(data.payload.clientId);
|
||||
if (data.payload.properties.channelGroupInheritedChannelId == 0) {
|
||||
if (client) {
|
||||
clientList.remove(client);
|
||||
}
|
||||
} else {
|
||||
if (client) {
|
||||
client.channel = channelList.getById(
|
||||
data.payload.properties.channelGroupInheritedChannelId
|
||||
);
|
||||
let client = clientList.getById(data.payload.clientId);
|
||||
if (data.payload.properties.channelGroupInheritedChannelId == 0) {
|
||||
if (client) {
|
||||
clientList.remove(client);
|
||||
}
|
||||
} else {
|
||||
if (client) {
|
||||
client.channel = channelList.getById(
|
||||
data.payload.properties.channelGroupInheritedChannelId
|
||||
);
|
||||
|
||||
client.name = data.payload.properties.nickname;
|
||||
client.inputMuted = data.payload.properties.inputMuted;
|
||||
client.outputMuted = data.payload.properties.outputMuted;
|
||||
} else {
|
||||
clientList.add(
|
||||
new Client(
|
||||
data.payload.clientId,
|
||||
channelList.getById(
|
||||
data.payload.properties.channelGroupInheritedChannelId
|
||||
),
|
||||
data.payload.properties.nickname,
|
||||
data.payload.properies.inputMuted,
|
||||
data.payload.properies.outputMuted
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
client.name = data.payload.properties.nickname;
|
||||
client.inputMuted = data.payload.properties.inputMuted;
|
||||
client.outputMuted = data.payload.properties.outputMuted;
|
||||
} else {
|
||||
clientList.add(
|
||||
new Client(
|
||||
data.payload.clientId,
|
||||
channelList.getById(
|
||||
data.payload.properties.channelGroupInheritedChannelId
|
||||
),
|
||||
data.payload.properties.nickname,
|
||||
data.payload.properies.inputMuted,
|
||||
data.payload.properies.outputMuted
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleTalkStatusChanged(data) {
|
||||
let client = clientList.getById(data.payload.clientId);
|
||||
if (client) {
|
||||
client.talkStatus = data.payload.status;
|
||||
}
|
||||
let client = clientList.getById(data.payload.clientId);
|
||||
if (client) {
|
||||
client.talkStatus = data.payload.status;
|
||||
}
|
||||
}
|
||||
|
||||
110
js/objects.js
110
js/objects.js
@@ -1,68 +1,68 @@
|
||||
class Channel {
|
||||
constructor(id, name) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
}
|
||||
constructor(id, name) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
class Client {
|
||||
constructor(
|
||||
id,
|
||||
channel,
|
||||
name,
|
||||
inputMuted = false,
|
||||
outputMuted = false,
|
||||
talkStatus = 0
|
||||
) {
|
||||
this.id = id;
|
||||
this.channel = channel;
|
||||
this.name = name;
|
||||
this.inputMuted = inputMuted;
|
||||
this.outputMuted = outputMuted;
|
||||
this.talkStatus = talkStatus;
|
||||
console.log(`Client created: ${this.id} - ${this.name}`);
|
||||
}
|
||||
constructor(
|
||||
id,
|
||||
channel,
|
||||
name,
|
||||
inputMuted = false,
|
||||
outputMuted = false,
|
||||
talkStatus = 0
|
||||
) {
|
||||
this.id = id;
|
||||
this.channel = channel;
|
||||
this.name = name;
|
||||
this.inputMuted = inputMuted;
|
||||
this.outputMuted = outputMuted;
|
||||
this.talkStatus = talkStatus;
|
||||
console.log(`Client created: ${this.id} - ${this.name}`);
|
||||
}
|
||||
}
|
||||
|
||||
class List {
|
||||
constructor(items = []) {
|
||||
this.items = items;
|
||||
}
|
||||
constructor(items = []) {
|
||||
this.items = items;
|
||||
}
|
||||
|
||||
getById(id) {
|
||||
return this.items.filter((obj) => {
|
||||
return obj.id === id;
|
||||
})[0];
|
||||
}
|
||||
getById(id) {
|
||||
return this.items.filter((obj) => {
|
||||
return obj.id === id;
|
||||
})[0];
|
||||
}
|
||||
|
||||
add(item) {
|
||||
if (!this.getById(item.id)) {
|
||||
this.items.push(item);
|
||||
} else {
|
||||
console.error(`An item with id ${item.id} already exists in list`);
|
||||
}
|
||||
}
|
||||
add(item) {
|
||||
if (!this.getById(item.id)) {
|
||||
this.items.push(item);
|
||||
} else {
|
||||
console.error(`An item with id ${item.id} already exists in list`);
|
||||
}
|
||||
}
|
||||
|
||||
remove(item) {
|
||||
this.items.splice(this.items.indexOf(item), 1);
|
||||
}
|
||||
remove(item) {
|
||||
this.items.splice(this.items.indexOf(item), 1);
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.items = [];
|
||||
}
|
||||
clear() {
|
||||
this.items = [];
|
||||
}
|
||||
|
||||
setItems(items) {
|
||||
// Never tested
|
||||
let duplicateFound = false;
|
||||
items.forEach((e1, i) => {
|
||||
items.forEach((e2, j) => {
|
||||
if (e1.id === e2.id && i != j) {
|
||||
duplicateFound = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!duplicateFound) {
|
||||
this.items = items;
|
||||
}
|
||||
}
|
||||
setItems(items) {
|
||||
// Never tested
|
||||
let duplicateFound = false;
|
||||
items.forEach((e1, i) => {
|
||||
items.forEach((e2, j) => {
|
||||
if (e1.id === e2.id && i != j) {
|
||||
duplicateFound = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
if (!duplicateFound) {
|
||||
this.items = items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
50
js/parser.js
50
js/parser.js
@@ -1,32 +1,32 @@
|
||||
function parseChannelInfos(channelInfos) {
|
||||
let result = [];
|
||||
let rootChannels = channelInfos.rootChannels;
|
||||
let subChannels = channelInfos.subChannels;
|
||||
let result = [];
|
||||
let rootChannels = channelInfos.rootChannels;
|
||||
let subChannels = channelInfos.subChannels;
|
||||
|
||||
rootChannels.forEach((rc) => {
|
||||
result.push(new Channel(rc.id, rc.properties.name));
|
||||
rootChannels.forEach((rc) => {
|
||||
result.push(new Channel(rc.id, rc.properties.name));
|
||||
|
||||
if (rc.id in subChannels) {
|
||||
subChannels[rc.id].forEach((sc) => {
|
||||
result.push(new Channel(sc.id, sc.properties.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
if (rc.id in subChannels) {
|
||||
subChannels[rc.id].forEach((sc) => {
|
||||
result.push(new Channel(sc.id, sc.properties.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function parseClientInfos(clientInfos) {
|
||||
let result = [];
|
||||
clientInfos.forEach((e) => {
|
||||
result.push(
|
||||
new Client(
|
||||
e.id,
|
||||
channelList.getById(e.channelId),
|
||||
e.properties.nickname,
|
||||
e.properties.inputMuted,
|
||||
e.properties.outputMuted
|
||||
)
|
||||
);
|
||||
});
|
||||
return result;
|
||||
let result = [];
|
||||
clientInfos.forEach((e) => {
|
||||
result.push(
|
||||
new Client(
|
||||
e.id,
|
||||
channelList.getById(e.channelId),
|
||||
e.properties.nickname,
|
||||
e.properties.inputMuted,
|
||||
e.properties.outputMuted
|
||||
)
|
||||
);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
14
js/utils.js
14
js/utils.js
@@ -1,10 +1,10 @@
|
||||
function getClientsInChannel(channel) {
|
||||
let result = [];
|
||||
let result = [];
|
||||
|
||||
clientList.items.forEach((e) => {
|
||||
if (e.channel.id == channel.id) {
|
||||
result.push(e);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
clientList.items.forEach((e) => {
|
||||
if (e.channel.id == channel.id) {
|
||||
result.push(e);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
46
overlay.html
46
overlay.html
@@ -1,27 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<title>TS5 - OBS Overlay</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="config.js"></script>
|
||||
<script src="js/objects.js"></script>
|
||||
<script>
|
||||
let clientList = new List();
|
||||
let channelList = new List();
|
||||
let thisClient;
|
||||
</script>
|
||||
<div id="content"></div>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<title>TS5 - OBS Overlay</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="config.js"></script>
|
||||
<script src="js/objects.js"></script>
|
||||
<script>
|
||||
let clientList = new List();
|
||||
let channelList = new List();
|
||||
let thisClient;
|
||||
</script>
|
||||
<div id="content"></div>
|
||||
|
||||
<!--Scripts-->
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/display_content.js"></script>
|
||||
<script src="js/parser.js"></script>
|
||||
<script src="js/event_handlers.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
<!--Scripts-->
|
||||
<script src="js/utils.js"></script>
|
||||
<script src="js/display_content.js"></script>
|
||||
<script src="js/parser.js"></script>
|
||||
<script src="js/event_handlers.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user