diff --git a/old_js/.gitignore b/old_js/.gitignore deleted file mode 100644 index e69de29..0000000 diff --git a/old_js/.prettierrc b/old_js/.prettierrc deleted file mode 100644 index 054d599..0000000 --- a/old_js/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "tabWidth": 2, - "useTabs": false, - "printWidth": 120 -} diff --git a/old_js/config.js b/old_js/config.js deleted file mode 100644 index 6cfccae..0000000 --- a/old_js/config.js +++ /dev/null @@ -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 -}; diff --git a/old_js/css/style.css b/old_js/css/style.css deleted file mode 100644 index a5b9f6c..0000000 --- a/old_js/css/style.css +++ /dev/null @@ -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; -} diff --git a/old_js/img/muted_input.svg b/old_js/img/muted_input.svg deleted file mode 100644 index 31da5ba..0000000 --- a/old_js/img/muted_input.svg +++ /dev/null @@ -1 +0,0 @@ -muted_input \ No newline at end of file diff --git a/old_js/img/muted_output.svg b/old_js/img/muted_output.svg deleted file mode 100644 index 68c133e..0000000 --- a/old_js/img/muted_output.svg +++ /dev/null @@ -1 +0,0 @@ -muted_output \ No newline at end of file diff --git a/old_js/img/off.svg b/old_js/img/off.svg deleted file mode 100644 index e96add0..0000000 --- a/old_js/img/off.svg +++ /dev/null @@ -1 +0,0 @@ -player_off_v2 \ No newline at end of file diff --git a/old_js/img/on.svg b/old_js/img/on.svg deleted file mode 100644 index 2558730..0000000 --- a/old_js/img/on.svg +++ /dev/null @@ -1 +0,0 @@ -player_on_v2 \ No newline at end of file diff --git a/old_js/js/app.js b/old_js/js/app.js deleted file mode 100644 index 251bb41..0000000 --- a/old_js/js/app.js +++ /dev/null @@ -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(); diff --git a/old_js/js/display_content.js b/old_js/js/display_content.js deleted file mode 100644 index b26d52f..0000000 --- a/old_js/js/display_content.js +++ /dev/null @@ -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 += `
`; - - // Add image - result += '
'; - if (c.outputMuted) { - result += ' '; - } else if (c.inputMuted) { - result += ' '; - } else if (c.talkStatus == 1) { - result += ' '; - } else { - result += ' '; - } - - // Close client div - result += "
"; - - // Add client text (name of the client) - result += `

${c.name}

`; - }); - } - - overlayContent.innerHTML = result; -} diff --git a/old_js/js/event_handlers.js b/old_js/js/event_handlers.js deleted file mode 100644 index 9b539fd..0000000 --- a/old_js/js/event_handlers.js +++ /dev/null @@ -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) {} diff --git a/old_js/js/objects.js b/old_js/js/objects.js deleted file mode 100644 index 0b7ac93..0000000 --- a/old_js/js/objects.js +++ /dev/null @@ -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; - } - } -} diff --git a/old_js/js/parser.js b/old_js/js/parser.js deleted file mode 100644 index 0e2667d..0000000 --- a/old_js/js/parser.js +++ /dev/null @@ -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; -} diff --git a/old_js/js/utils.js b/old_js/js/utils.js deleted file mode 100644 index b4dd7e9..0000000 --- a/old_js/js/utils.js +++ /dev/null @@ -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; -} diff --git a/old_js/meta.json b/old_js/meta.json deleted file mode 100644 index 002fae3..0000000 --- a/old_js/meta.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "version": "v0.2.1" -} diff --git a/old_js/overlay.html b/old_js/overlay.html deleted file mode 100644 index a9de492..0000000 --- a/old_js/overlay.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - TS5 - OBS Overlay - - - - - -
- - - - - - - - - diff --git a/old_js/readme.md b/old_js/readme.md deleted file mode 100644 index 1ea3a0c..0000000 --- a/old_js/readme.md +++ /dev/null @@ -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 -![image](https://user-images.githubusercontent.com/76851529/197849050-d4e28b8e-c150-4462-8871-f77ec672ee49.png) - -4. Open your OBS Studio & add a new **browser source** to your scene -![image](https://user-images.githubusercontent.com/76851529/197849644-9396fb9c-4943-4cb2-a511-062ffcd60404.png) - -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) -![image](https://user-images.githubusercontent.com/76851529/197849886-679b200b-6d42-439e-bce6-44c6df67ffcc.png) - -9. Now connect to a TeamSpeak server and check if it works. You need to **accept** the remote app in your TeamSpeak notifications -![image](https://user-images.githubusercontent.com/76851529/197850151-ad057277-fe3d-427e-b21b-1d2b4875c70b.png) -**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. diff --git a/old_js/update.bat b/old_js/update.bat deleted file mode 100644 index 836dbd1..0000000 --- a/old_js/update.bat +++ /dev/null @@ -1,2 +0,0 @@ -powershell ./update.ps1 -pause \ No newline at end of file diff --git a/old_js/update.ps1 b/old_js/update.ps1 deleted file mode 100644 index 424ed88..0000000 --- a/old_js/update.ps1 +++ /dev/null @@ -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!" -} - - -