Merge pull request #32 from DerTyp7/dependabot/npm_and_yarn/vite-4.4.2

Bump vite from 4.3.9 to 4.4.2

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,23 @@
+---
+name: Bug report
+about: Something isn't working for you
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+> Screenshots are welcome
+## Describe the bug
+A clear and concise description of what the bug is.
+
+## To Reproduce
+Example or explanation to reproduce the issue.
+
+## Expected behavior
+A clear and concise description of what you expected to happen.
+
+**Your environment:**
+ - OS: [e.g. Windows 11]
+ - OBS version: [e.g. 29.1.3]
+ - Overlay version [e.g. v1.1.0]

.github/dependabot.yml

@@ -0,0 +1,10 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

README.md

@@ -3,31 +3,33 @@
 This is a overlay for OBS to show the current talking clients in your Teamspeak 5 Channel.  
 This App uses the new "Remote Apps" feature of Teamspeak 5.
 
-![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)
+![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/d0ab06f2-1a36-479d-826f-bd4bd3d405b7)
 
 - [Teamspeak5-OBS-Overlay](#teamspeak5-obs-overlay)
   - [Setup](#setup)
     - [Customization (Parameters)](#customization-parameters)
   - [Setup (Developer)](#setup-developer)
+  - [Common Issues](#common-issues)
+    - [The overlay is empty, but i'm connected to a Teamspeak 5 server](#the-overlay-is-empty-but-im-connected-to-a-teamspeak-5-server)
 
 ## Setup
 
-1. Download the `index.html` of the latest release from [here](https://github.com/DerTyp876/ts5-obs-overlay/releases/tag/v1.0.0)
+1. Download the `ts5-overlay-{version}.html` of the latest release from [here](https://github.com/DerTyp7/ts5-obs-overlay/releases/latest)
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)  
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/04dc3a66-c493-429b-b4ae-44bade473ad6)  
-   1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `index.html`
+   1.1. (optional) You can rename the file. Just remember using the new file name in the future instead of `ts5-overlay-{version}.html`
 2. Go into the Teamspeak 5 Settings and enable "Remote Apps"  
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/b31bc553-fde2-46ab-b07c-d3c81339cc7d)
 
 3. Add a new Browser Source to your OBS Scene  
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/0198b468-bb96-4b65-bdd4-3d6bb3ef7d25)  
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/0198b468-bb96-4b65-bdd4-3d6bb3ef7d25)  
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/58ad399f-5344-456f-b243-6e267b489fd5)
 
-4. Tick the checkbox "Local File" and select the downloaded `index.html`  
+4. Tick the checkbox "Local File" and select the downloaded `ts5-overlay-{version}.html`  
     4.1. Set the width and height to your desired size (e.g. 1920x1080 OR 1280x720)  
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/5ad8ce69-645b-45e7-acc3-ce7ba8d7f8ab)
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/5ad8ce69-645b-45e7-acc3-ce7ba8d7f8ab)
 
 5. You should now receive a notification in Teamspeak 5 that the app is allowed to connect to your Teamspeak 5 client. Allow it. (If you don't get a notification, restart Teamspeak 5 and OBS -> try again)  
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/40faa435-e128-415f-98eb-a9e8809e8f65)
 
 ### Customization (Parameters)
 
@@ -36,14 +38,14 @@ You can customize the overlay by adding parameters to the URL of the Browser Sou
 1. Open your Browser Source settings
 2. **Untick** the checkbox "Local File"
 3. Add `file://` to the beginning of the URL  
-   ![image](https://github.com/DerTyp876/ts5-obs-overlay/assets/76851529/87985b4c-4397-4681-9635-239d1e382c24)
+   ![image](https://github.com/DerTyp7/ts5-obs-overlay/assets/76851529/87985b4c-4397-4681-9635-239d1e382c24)
 4. Start adding parameters like discribed below
 
 Start by adding a `?` to the end of the URL and then add the parameters.
 To add multiple parameters, you have to seperate them with a `&`.
 
-Like this: `file://C:/Users/.../index.html?parameter1=value1&parameter2=value2`  
+Like this: `file://C:/Users/.../ts5-overlay-{version}.html?parameter1=value1&parameter2=value2`  
-Real example: `file://C:/Users/.../index.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5`
+Real example: `file://C:/Users/.../ts5-overlay-{version}.html?remoteAppPort=5899&hideNonTalking=true&clientLimit=5`
 
 This is a list of all available parameters (all parameters are optional):
 
@@ -59,3 +61,17 @@ This is a list of all available parameters (all parameters are optional):
 1. Clone this repository
 2. Run `npm install`
 3. To start the development server run `npm run dev`
+
+## Common Issues
+
+### The overlay is empty, but i'm connected to a Teamspeak 5 server
+
+Sadly TeamSpeak5 does not give us any information about the current active server tab.  
+So we try currently use a workaround, where the active server tab is determined by looking on which server the your hardware input was unmuted the latest, since the non-active server tabs in TS5 usually mute the client’s microphone.
+
+However this workaround is not 100% accurate and can fail in some cases.
+
+Possible fixes:
+
+- Unmute and mute yourself in the active server tab (Just a normal unmute and mute, not the hardware mute)
+- Reconnect to the TS5 server while the overlay is open

package.json

@@ -10,25 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@types/node": "^20.3.2",
+    "@types/node": "^20.4.1",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.0",
+    "react-router-dom": "^6.14.1",
-    "sass": "^1.62.1"
+    "sass": "^1.63.6"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
-    "@types/react": "^18.0.37",
+    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "eslint": "^8.38.0",
+    "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.1.6",
-    "vite": "^4.3.9",
+    "vite": "^4.4.2",
     "vite-plugin-singlefile": "^0.13.5"
   }
 }

src/handlers/teamspeak/connectionHandler.ts

@@ -54,7 +54,7 @@ export class TS5ConnectionHandler implements ITS5ConnectionHandler {
       type: "auth",
       payload: {
         identifier: "de.tealfire.obs",
-        version: "1.0.0",
+        version: "1.1.2",
         name: "TS5 OBS Overlay",
         description: "A OBS overlay for TS5 by DerTyp876",
         content: {

vite.config.ts

@@ -17,5 +17,9 @@ export default defineConfig({
       '@styles': path.resolve(__dirname, './src/styles'),
     },
   },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
   plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],
 })