[feature] init vite project

old_js/js/app.js

@@ -0,0 +1,89 @@
+// 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();

old_js/js/display_content.js

@@ -0,0 +1,38 @@
+// 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;
+}

old_js/js/event_handlers.js

@@ -0,0 +1,122 @@
+// 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) {}

old_js/js/objects.js

@@ -0,0 +1,84 @@
+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;
+    }
+  }
+}

old_js/js/parser.js

@@ -0,0 +1,42 @@
+// 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;
+}

old_js/js/utils.js

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