mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2025-10-29 12:52:09 +01:00
[refactor] remove old js files
This commit is contained in:
Janis
0
old_js/.gitignore
vendored
0
old_js/.gitignore
vendored
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"printWidth": 120
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
const CONFIG = {
|
||||
remoteAppPort: 5899, // The port the TS5 client uses for remote apps (TS client -> settings/Remote Apps/Port)
|
||||
|
||||
// Style of the overlay
|
||||
style: {
|
||||
fontBackground: "rgba(19, 20, 33, 0.5)",
|
||||
fontColor: "#ffffff",
|
||||
fontSize: "70pt",
|
||||
fontStrokeSize: "3px",
|
||||
fontStrokeColor: "#000000",
|
||||
},
|
||||
hideSelf: false, // Hide yourself in the overlay
|
||||
hideSilent: false, // Only show talking people
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.client-div {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.client-img-div {
|
||||
float: left;
|
||||
width: 107px;
|
||||
}
|
||||
|
||||
.client-img-div img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.client-text-div {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.client-text-div p {
|
||||
display: inline;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 716 B |
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 198 B |
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 196 B |
@@ -1,89 +0,0 @@
|
||||
// Main entry point
|
||||
function main() {
|
||||
let authenticated = false; // using this bool to determine if an user is already authenticated
|
||||
|
||||
// Reset variables. Important so that the app can easly restart or reconnected.
|
||||
clientList.clear();
|
||||
channelList.clear();
|
||||
selfClient = null;
|
||||
|
||||
// Initiliaze websocket connection to TS5 client
|
||||
const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
|
||||
const initalPayload = {
|
||||
type: "auth",
|
||||
payload: {
|
||||
identifier: "de.tealfire.obs",
|
||||
version: "0.2.1",
|
||||
name: "TS5 OBS Overlay",
|
||||
description: "A simple OBS overlay for TS5 by DerTyp876",
|
||||
content: {
|
||||
apiKey: localStorage.getItem("apiKey") ?? "",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
ws.onopen = () => {
|
||||
// Send authentication payload to TS5 client
|
||||
ws.send(JSON.stringify(initalPayload));
|
||||
};
|
||||
|
||||
// Handle websockets
|
||||
ws.onmessage = (event) => {
|
||||
let data = JSON.parse(event.data);
|
||||
console.log(data);
|
||||
switch (data.type) {
|
||||
case "auth":
|
||||
handleAuthMessage(data);
|
||||
localStorage.setItem("apiKey", data.payload.apiKey);
|
||||
authenticated = true;
|
||||
//console.log(apiKey);
|
||||
break;
|
||||
case "clientMoved":
|
||||
handleClientMoved(data);
|
||||
break;
|
||||
case "clientPropertiesUpdated":
|
||||
handleClientPropertiesUpdate(data);
|
||||
break;
|
||||
case "talkStatusChanged":
|
||||
handleTalkStatusChanged(data);
|
||||
break;
|
||||
case "serverPropertiesUpdated":
|
||||
ws.close();
|
||||
case "clientSelfPropertyUpdated":
|
||||
handleClientSelfPropertyUpdated(data);
|
||||
default:
|
||||
console.log(`No handler for event type: ${data.type}`);
|
||||
break;
|
||||
}
|
||||
|
||||
// Draw clientList in HTML object
|
||||
drawClients();
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.log(err);
|
||||
ws.close();
|
||||
return;
|
||||
};
|
||||
|
||||
ws.onclose = (event) => {
|
||||
// Need to check if the connection got closed while the user was connected.
|
||||
// Because TS does not return a proper authentication error.
|
||||
// closed and not authenticated -> auth error or ts5 restarted/closed
|
||||
// closed and authenticated -> no auth error, app/obs was just closed by user
|
||||
if (authenticated == false) {
|
||||
localStorage.setItem("apiKey", "");
|
||||
}
|
||||
|
||||
console.log(event);
|
||||
console.log("Disconnected");
|
||||
|
||||
// Since the user disconnected, we need to clear all clients and channel
|
||||
clientList.clear();
|
||||
channelList.clear();
|
||||
|
||||
drawClients(); // Redraw overlay to remove all clients
|
||||
main(); // Reconnected
|
||||
};
|
||||
}
|
||||
main();
|
||||
@@ -1,38 +0,0 @@
|
||||
// Draw clients in the overlay
|
||||
// Gets called everytime an event has been received (app.js -> ws.onmessage)
|
||||
function drawClients() {
|
||||
const overlayContent = document.getElementById("content");
|
||||
|
||||
let result = "";
|
||||
if (selfClient) {
|
||||
// Loop through all clients which are currently in your channel
|
||||
getClientsInChannel(selfClient.channel).forEach((c) => {
|
||||
// Open client div
|
||||
result += `<div class="client-div" ${c.isHidden() ? "hidden" : ""} style="color:${
|
||||
CONFIG.style.fontColor
|
||||
}; font-size:${CONFIG.style.fontSize}">`;
|
||||
|
||||
// Add image
|
||||
result += '<div class="client-img-div">';
|
||||
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" />';
|
||||
}
|
||||
|
||||
// Close client div
|
||||
result += "</div>";
|
||||
|
||||
// Add client text (name of the client)
|
||||
result += `<div class="client-text-div"
|
||||
style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
|
||||
"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
|
||||
});
|
||||
}
|
||||
|
||||
overlayContent.innerHTML = result;
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
// Handle the auth message event which is send by the client to init the session
|
||||
// The clients send therefore all channels and clients to us
|
||||
function handleAuthMessage(data) {
|
||||
// Set channels and clients
|
||||
|
||||
for (let i = 0; i < data.payload.connections.length; i++) {
|
||||
const newChannels = parseChannelInfos(data.payload.connections[i].channelInfos, data.payload.connections[i].id);
|
||||
// Add all clients
|
||||
const newClients = parseClientInfos(data.payload.connections[i].clientInfos, data.payload.connections[i].id);
|
||||
|
||||
for (let j = 0; j < newChannels.length; j++) {
|
||||
channelList.add(newChannels[j]);
|
||||
}
|
||||
|
||||
for (let j = 0; j < newClients.length; j++) {
|
||||
clientList.add(newClients[j]);
|
||||
}
|
||||
}
|
||||
|
||||
// channelList.setItems(parseChannelInfos(data.payload.connections[0].channelInfos));
|
||||
// clientList.setItems(parseClientInfos(data.payload.connections[0].clientInfos, data.payload.connectionId));
|
||||
|
||||
// The client of this current user
|
||||
selfClient = clientList.getByIds(data.payload.connections[0].clientId, data.payload.connections[0].id);
|
||||
}
|
||||
|
||||
// Handle the event when a client moved to another place/channel
|
||||
// Also includes disconnecting and connecting of clients
|
||||
function handleClientMoved(data) {
|
||||
// Get our client object based on the target client id of this event
|
||||
// This can be null if the client does not exist in our list (newly joined)
|
||||
const client = clientList.getByIds(data.payload.clientId, data.payload.connectionId);
|
||||
|
||||
if (data.payload.newChannelId == 0) {
|
||||
// If newChannelId is 0, the client left the server
|
||||
// Client disconnected
|
||||
if (client) {
|
||||
console.log(`${client.name} disconnected`);
|
||||
clientList.remove(client); // Remove disconnected client from clientList
|
||||
}
|
||||
|
||||
// If the disconnected client is the current user
|
||||
if (data.payload.clientId == selfClient.id) {
|
||||
//* NOTE: since this app does support multiple servers yet, we expect the user to be connected to NO servers at this point
|
||||
console.log("You disconnected");
|
||||
clientList.clear(); // remove all clients.
|
||||
channelList.clear();
|
||||
}
|
||||
} else {
|
||||
// Client switched the channel OR JOINED the server to a channel
|
||||
if (client) {
|
||||
// Client just switched the channel
|
||||
// Like described at the const client declaration, the client is not null therefore he already existed in our list/server
|
||||
client.channel = channelList.getByIds(data.payload.newChannelId, data.payload.connectionId);
|
||||
} else {
|
||||
// Client joined the server
|
||||
// Like described at the const client declaration, the client is null he is NEW in our list/server
|
||||
clientList.add(
|
||||
new Client(
|
||||
data.payload.clientId,
|
||||
data.payload.connectionId,
|
||||
channelList.getByIds(data.payload.newChannelId, data.payload.connectionId),
|
||||
data.payload.properties.nickname
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle the event where a client updates his properties (e.g. name, muteStatus)
|
||||
function handleClientPropertiesUpdate(data) {
|
||||
// Get our client object based on the target client id of this event
|
||||
// This can be null if the client does not exist in our list
|
||||
const client = clientList.getByIds(data.payload.clientId, data.payload.connectionId);
|
||||
|
||||
if (data.payload.properties.channelGroupInheritedChannelId == 0) {
|
||||
if (client) {
|
||||
clientList.remove(client);
|
||||
}
|
||||
} else {
|
||||
if (client) {
|
||||
// Update client properties
|
||||
|
||||
// Other to the handleClientMoved function this handleClientPropertiesUpdate function also gets called
|
||||
// if anything at all happend to the client, so we update the channel here to be sure we dont miss anything
|
||||
client.channel = channelList.getByIds(
|
||||
data.payload.properties.channelGroupInheritedChannelId,
|
||||
data.payload.connectionId
|
||||
);
|
||||
|
||||
client.name = data.payload.properties.nickname;
|
||||
client.inputMuted = data.payload.properties.inputMuted;
|
||||
client.outputMuted = data.payload.properties.outputMuted;
|
||||
} else {
|
||||
// For some reason the client did not exist in our list. Add client, to prevent further errors.
|
||||
console.log(data.payload.connectionId);
|
||||
clientList.add(
|
||||
new Client(
|
||||
data.payload.clientId,
|
||||
data.payload.connectionId,
|
||||
channelList.getByIds(data.payload.properties.channelGroupInheritedChannelId, data.payload.connectionId),
|
||||
data.payload.properties.nickname,
|
||||
data.payload.properies.inputMuted,
|
||||
data.payload.properies.outputMuted
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gets called when a client starts talking
|
||||
//* NOTE: If the "current self-user" is speaking but muted, this will still be called. This does not apply to foreign clients
|
||||
function handleTalkStatusChanged(data) {
|
||||
let client = clientList.getByIds(data.payload.clientId, data.payload.connectionId);
|
||||
if (client) {
|
||||
client.talkStatus = data.payload.status;
|
||||
}
|
||||
console.log(channelList);
|
||||
console.log(clientList);
|
||||
}
|
||||
|
||||
function handleClientSelfPropertyUpdated(data) {}
|
||||
@@ -1,84 +0,0 @@
|
||||
class Connection {
|
||||
constructor(id) {
|
||||
this.id = +id;
|
||||
}
|
||||
}
|
||||
|
||||
class Channel {
|
||||
constructor(id, connectionId, name) {
|
||||
this.id = +id;
|
||||
this.connectionId = +connectionId;
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
class Client {
|
||||
constructor(id, connectionId, channel, name, inputMuted = false, outputMuted = false, talkStatus = 0) {
|
||||
this.id = +id;
|
||||
this.connectionId = +connectionId;
|
||||
this.channel = channel;
|
||||
this.name = name;
|
||||
this.inputMuted = inputMuted;
|
||||
this.outputMuted = outputMuted;
|
||||
this.talkStatus = talkStatus;
|
||||
console.log(`Client created: ${this.id} - ${this.name}`);
|
||||
}
|
||||
|
||||
isMuted() {
|
||||
return this.inputMuted == true || this.outputMuted == true;
|
||||
}
|
||||
|
||||
isHidden() {
|
||||
return (
|
||||
(CONFIG.hideSilent && (this.talkStatus == 0 || this.isMuted())) || (CONFIG.hideSelf && this.id == selfClient.id)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class List {
|
||||
constructor(items = []) {
|
||||
this.items = items;
|
||||
}
|
||||
|
||||
getByIds(id, connectionId) {
|
||||
id = +id;
|
||||
connectionId = +connectionId;
|
||||
|
||||
console.log(id, connectionId);
|
||||
return this.items.filter((obj) => {
|
||||
return obj.id == id && obj.connectionId == connectionId;
|
||||
})[0];
|
||||
}
|
||||
|
||||
add(item) {
|
||||
this.items.push(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);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
// Parse teamspeak channel structure into our objects
|
||||
function parseChannelInfos(channelInfos, connectionId) {
|
||||
let result = [];
|
||||
let rootChannels = channelInfos.rootChannels;
|
||||
let subChannels = channelInfos.subChannels;
|
||||
|
||||
rootChannels.forEach((rc) => {
|
||||
result.push(new Channel(rc.id, connectionId, rc.properties.name));
|
||||
|
||||
if (subChannels !== null && rc.id in subChannels) {
|
||||
subChannels[rc.id].forEach((sc) => {
|
||||
result.push(new Channel(sc.id, connectionId, sc.properties.name));
|
||||
});
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// Parse teamspeak clients into our objects
|
||||
function parseClientInfos(clientInfos, connectionId) {
|
||||
let result = [];
|
||||
clientInfos.forEach((e) => {
|
||||
console.log("-----------------------------------");
|
||||
console.log(e);
|
||||
console.log(connectionId);
|
||||
console.log(channelList.items);
|
||||
console.log(channelList.getByIds(e.channelId, connectionId));
|
||||
console.log("-----------------------------------");
|
||||
|
||||
result.push(
|
||||
new Client(
|
||||
e.id,
|
||||
connectionId,
|
||||
channelList.getByIds(e.channelId, connectionId),
|
||||
e.properties.nickname,
|
||||
e.properties.inputMuted,
|
||||
e.properties.outputMuted
|
||||
)
|
||||
);
|
||||
});
|
||||
return result;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
function getClientsInChannel(channel) {
|
||||
let result = [];
|
||||
|
||||
clientList.items.forEach((e) => {
|
||||
if (e.channel) {
|
||||
if (e.channel.id == channel.id) {
|
||||
result.push(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"version": "v0.2.1"
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<!-- https://github.com/DerTyp876/ts5-obs-overlay/ -->
|
||||
<!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 apiKey = "";
|
||||
let clientList = new List();
|
||||
let channelList = new List();
|
||||
let connectionList = new List();
|
||||
|
||||
let currentConnectionId = 0;
|
||||
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>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
|
||||
# A OBS-Overlay for TeamSpeak5
|
||||
Made with the "Remote App" feature of TeamSpeak5
|
||||
- [A OBS-Overlay for TeamSpeak5](#a-obs-overlay-for-teamspeak5)
|
||||
- [Setup](#setup)
|
||||
- [Update](#update)
|
||||
- [Use script](#use-script)
|
||||
- [Manually](#manually)
|
||||
- [Configuration](#configuration)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Option 1:](#option-1)
|
||||
- [Option 2:](#option-2)
|
||||
- [Option 3:](#option-3)
|
||||
|
||||
>**_WARNING:_** This overlay works only show the first server you were connected to.
|
||||
|
||||
## Setup
|
||||
1. Download the [latest release](https://github.com/DerTyp876/ts5-obs-overlay/releases/latest) of this project & extract the archive to a folder of your choice
|
||||
2. Open your TeamSpeak5 client and go to
|
||||
`settings -> Remote Apps`
|
||||
3. Enable the "Remote Apps" feature
|
||||
|
||||
|
||||
4. Open your OBS Studio & add a new **browser source** to your scene
|
||||
|
||||
|
||||
5. In the properties of your new browser source, select the Local File check box
|
||||
6. Click "Browse" next to the newly apperared "Local file" field
|
||||
7. Now select the in step 1 downloaded `overlay.html`
|
||||
8. Set the "Width" to `2000` and the "Height" to `1000` (This is just my own preference. If you have better values, use them)
|
||||
|
||||
|
||||
9. Now connect to a TeamSpeak server and check if it works. You need to **accept** the remote app in your TeamSpeak notifications
|
||||
|
||||
**Done**
|
||||
## Update
|
||||
### Use script
|
||||
If you want to update the project automatically, just double-click the "update.bat" file **OR** open a new console in the project directory and run the "update.ps1" command.
|
||||
If you encounter problems because of the microsoft execution policy open a console in the project directory and run
|
||||
`powershell -ExecutionPolicy Bypass -File update.ps1`
|
||||
https://stackoverflow.com/questions/4037939/powershell-says-execution-of-scripts-is-disabled-on-this-system
|
||||
|
||||
### Manually
|
||||
To manually update just delete the hole project directory and repeat the [setup](#setup) above :).
|
||||
|
||||
## Configuration
|
||||
In the `config.js` file, which is located in the same folder as the `overlay.html` file, you can make various settings for the appearance of the overlay.
|
||||
Since everything is written in simple css and html, you can change the `css/style.css` file to your liking.
|
||||
>**_NOTE_** If your change something in the files you have to do [Option 3 of the troubleshooting below](#option-3).
|
||||
|
||||
## Troubleshooting
|
||||
Possible solutions to fix the overlay.
|
||||
### Option 1:
|
||||
Disconnect from all TeamSpeak servers and reconnect to just one
|
||||
### Option 2:
|
||||
Restart TeamSpeak5
|
||||
### Option 3:
|
||||
1. Open OBS Studio
|
||||
2. Go open the properties of your browser source
|
||||
3. On the bottom of the properties press the "Refresh cache of current page" button.
|
||||
@@ -1,2 +0,0 @@
|
||||
powershell ./update.ps1
|
||||
pause
|
||||
@@ -1,49 +0,0 @@
|
||||
Write-Output "Starting update..."
|
||||
|
||||
$currentVersionString = (Get-Content .\meta.json | ConvertFrom-Json).version
|
||||
Write-Output "Current version: $currentVersionString"
|
||||
|
||||
Write-Output "Searching for newest version..."
|
||||
$newestVersionString = ""
|
||||
$req = Invoke-WebRequest https://github.com/DerTyp876/ts5-obs-overlay/releases/latest
|
||||
|
||||
foreach ($tag in $req.ParsedHtml.body.getElementsByTagName('h1')) {
|
||||
if ($tag.innerText[0] -eq "v") {
|
||||
$newestVersionString = $tag.innerText
|
||||
}
|
||||
}
|
||||
|
||||
if ($newestVersionString -ne "") {
|
||||
Write-Output "Newest version found: $newestVersionString"
|
||||
|
||||
|
||||
$currentVersion = ($currentVersionString -replace "v")
|
||||
$newestVersion = ($newestVersionString -replace "v")
|
||||
|
||||
if ([System.Version]$currentVersion -gt [System.Version]$newestVersion) {
|
||||
Write-Output "Current version is up to date!"
|
||||
}
|
||||
else {
|
||||
Write-Output "Updating to newer version..."
|
||||
|
||||
Remove-Item * -Recurse -Force -Confirm
|
||||
|
||||
mkdir ./temp
|
||||
attrib +h ./temp
|
||||
Write-Output "Downloading newer version..."
|
||||
Invoke-WebRequest -Uri "https://github.com/DerTyp876/ts5-obs-overlay/archive/refs/tags/$newestVersionString.zip" -OutFile "./temp/$newestVersionString.zip"
|
||||
Write-Output "Extracting archive..."
|
||||
Expand-Archive -Path "./temp/$newestVersionString.zip" -DestinationPath "./temp/"
|
||||
Get-ChildItem -Path "./temp/ts5-obs-overlay-$($newestVersionString -replace 'v')" -Recurse | Move-Item -Destination "./"
|
||||
|
||||
Remove-Item "./temp" -Recurse -Force -Confirm
|
||||
|
||||
Write-Output "You are now up to date again!"
|
||||
}
|
||||
}
|
||||
else {
|
||||
Write-Output "No new version found!"
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user