mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2026-07-31 16:49:04 +02:00
Compare commits
1 Commits
dependabot
...
v2.2.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
aaa770be2b |
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"useTabs": false,
|
"useTabs": false,
|
||||||
"printWidth": 120,
|
"printWidth": 180,
|
||||||
"singleQuote": false,
|
"singleQuote": false,
|
||||||
"semi": true
|
"semi": true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,13 +3,10 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta name="description" content="An OBS overlay for TeamSpeak5, so your audience can see who is talking. https://github.com/DerTyp7/ts5-obs-overlay" />
|
||||||
name="description"
|
|
||||||
content="An OBS overlay for TeamSpeak5/6, so your audience can see who is talking. https://github.com/DerTyp7/teamspeak-obs-overlay"
|
|
||||||
/>
|
|
||||||
<meta name="author" content="DerTyp7" />
|
<meta name="author" content="DerTyp7" />
|
||||||
<link rel="icon" href="/logo.svg" type="image/x-icon" />
|
<link rel="icon" href="/logo.svg" type="image/x-icon" />
|
||||||
<title>TeamSpeak-OBS-Overlay</title>
|
<title>TS5-OBS-Overlay</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
91
package-lock.json
generated
91
package-lock.json
generated
@@ -22,7 +22,7 @@
|
|||||||
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
||||||
"@typescript-eslint/parser": "^8.21.0",
|
"@typescript-eslint/parser": "^8.21.0",
|
||||||
"@vitejs/plugin-react-swc": "^3.7.2",
|
"@vitejs/plugin-react-swc": "^3.7.2",
|
||||||
"eslint": "^9.23.0",
|
"eslint": "^9.18.0",
|
||||||
"eslint-plugin-react-hooks": "^5.1.0",
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.18",
|
"eslint-plugin-react-refresh": "^0.4.18",
|
||||||
"typescript": "^5.7.3",
|
"typescript": "^5.7.3",
|
||||||
@@ -615,13 +615,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@eslint/config-array": {
|
"node_modules/@eslint/config-array": {
|
||||||
"version": "0.19.2",
|
"version": "0.19.1",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz",
|
||||||
"integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==",
|
"integrity": "sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint/object-schema": "^2.1.6",
|
"@eslint/object-schema": "^2.1.5",
|
||||||
"debug": "^4.3.1",
|
"debug": "^4.3.1",
|
||||||
"minimatch": "^3.1.2"
|
"minimatch": "^3.1.2"
|
||||||
},
|
},
|
||||||
@@ -629,20 +629,10 @@
|
|||||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@eslint/config-helpers": {
|
|
||||||
"version": "0.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.0.tgz",
|
|
||||||
"integrity": "sha512-yJLLmLexii32mGrhW29qvU3QBVTu0GUmEf/J4XsBtVhp4JkIUFN/BjWqTF63yRvGApIDpZm5fa97LtYtINmfeQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"engines": {
|
|
||||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@eslint/core": {
|
"node_modules/@eslint/core": {
|
||||||
"version": "0.12.0",
|
"version": "0.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.10.0.tgz",
|
||||||
"integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==",
|
"integrity": "sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@@ -653,9 +643,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@eslint/eslintrc": {
|
"node_modules/@eslint/eslintrc": {
|
||||||
"version": "3.3.1",
|
"version": "3.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
|
||||||
"integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
|
"integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@@ -677,9 +667,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@eslint/js": {
|
"node_modules/@eslint/js": {
|
||||||
"version": "9.23.0",
|
"version": "9.18.0",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.23.0.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.18.0.tgz",
|
||||||
"integrity": "sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==",
|
"integrity": "sha512-fK6L7rxcq6/z+AaQMtiFTkvbHkBLNlwyRxHpKawP0x3u9+NC6MQTnFW+AdpwC6gfHTW0051cokQgtTN2FqlxQA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -687,9 +677,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@eslint/object-schema": {
|
"node_modules/@eslint/object-schema": {
|
||||||
"version": "2.1.6",
|
"version": "2.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.5.tgz",
|
||||||
"integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
|
"integrity": "sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -697,13 +687,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@eslint/plugin-kit": {
|
"node_modules/@eslint/plugin-kit": {
|
||||||
"version": "0.2.7",
|
"version": "0.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.5.tgz",
|
||||||
"integrity": "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==",
|
"integrity": "sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint/core": "^0.12.0",
|
"@eslint/core": "^0.10.0",
|
||||||
"levn": "^0.4.1"
|
"levn": "^0.4.1"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -762,9 +752,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@humanwhocodes/retry": {
|
"node_modules/@humanwhocodes/retry": {
|
||||||
"version": "0.4.2",
|
"version": "0.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
|
||||||
"integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==",
|
"integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"engines": {
|
"engines": {
|
||||||
@@ -2378,23 +2368,22 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/eslint": {
|
"node_modules/eslint": {
|
||||||
"version": "9.23.0",
|
"version": "9.18.0",
|
||||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.23.0.tgz",
|
"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.18.0.tgz",
|
||||||
"integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==",
|
"integrity": "sha512-+waTfRWQlSbpt3KWE+CjrPPYnbq9kfZIYUqapc0uBXyjTp8aYXZDsUH16m39Ryq3NjAVP4tjuF7KaukeqoCoaA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/eslint-utils": "^4.2.0",
|
"@eslint-community/eslint-utils": "^4.2.0",
|
||||||
"@eslint-community/regexpp": "^4.12.1",
|
"@eslint-community/regexpp": "^4.12.1",
|
||||||
"@eslint/config-array": "^0.19.2",
|
"@eslint/config-array": "^0.19.0",
|
||||||
"@eslint/config-helpers": "^0.2.0",
|
"@eslint/core": "^0.10.0",
|
||||||
"@eslint/core": "^0.12.0",
|
"@eslint/eslintrc": "^3.2.0",
|
||||||
"@eslint/eslintrc": "^3.3.1",
|
"@eslint/js": "9.18.0",
|
||||||
"@eslint/js": "9.23.0",
|
"@eslint/plugin-kit": "^0.2.5",
|
||||||
"@eslint/plugin-kit": "^0.2.7",
|
|
||||||
"@humanfs/node": "^0.16.6",
|
"@humanfs/node": "^0.16.6",
|
||||||
"@humanwhocodes/module-importer": "^1.0.1",
|
"@humanwhocodes/module-importer": "^1.0.1",
|
||||||
"@humanwhocodes/retry": "^0.4.2",
|
"@humanwhocodes/retry": "^0.4.1",
|
||||||
"@types/estree": "^1.0.6",
|
"@types/estree": "^1.0.6",
|
||||||
"@types/json-schema": "^7.0.15",
|
"@types/json-schema": "^7.0.15",
|
||||||
"ajv": "^6.12.4",
|
"ajv": "^6.12.4",
|
||||||
@@ -2402,7 +2391,7 @@
|
|||||||
"cross-spawn": "^7.0.6",
|
"cross-spawn": "^7.0.6",
|
||||||
"debug": "^4.3.2",
|
"debug": "^4.3.2",
|
||||||
"escape-string-regexp": "^4.0.0",
|
"escape-string-regexp": "^4.0.0",
|
||||||
"eslint-scope": "^8.3.0",
|
"eslint-scope": "^8.2.0",
|
||||||
"eslint-visitor-keys": "^4.2.0",
|
"eslint-visitor-keys": "^4.2.0",
|
||||||
"espree": "^10.3.0",
|
"espree": "^10.3.0",
|
||||||
"esquery": "^1.5.0",
|
"esquery": "^1.5.0",
|
||||||
@@ -2462,9 +2451,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/eslint-scope": {
|
"node_modules/eslint-scope": {
|
||||||
"version": "8.3.0",
|
"version": "8.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
|
||||||
"integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
|
"integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "BSD-2-Clause",
|
"license": "BSD-2-Clause",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@@ -2816,9 +2805,9 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/import-fresh": {
|
"node_modules/import-fresh": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||||
"integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
|
"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
"@typescript-eslint/eslint-plugin": "^8.21.0",
|
||||||
"@typescript-eslint/parser": "^8.21.0",
|
"@typescript-eslint/parser": "^8.21.0",
|
||||||
"@vitejs/plugin-react-swc": "^3.7.2",
|
"@vitejs/plugin-react-swc": "^3.7.2",
|
||||||
"eslint": "^9.23.0",
|
"eslint": "^9.18.0",
|
||||||
"eslint-plugin-react-hooks": "^5.1.0",
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.18",
|
"eslint-plugin-react-refresh": "^0.4.18",
|
||||||
"typescript": "^5.7.3",
|
"typescript": "^5.7.3",
|
||||||
|
|||||||
@@ -17,7 +17,6 @@ export default function App() {
|
|||||||
showChannelName={searchParams.get("showChannelName") === "true"}
|
showChannelName={searchParams.get("showChannelName") === "true"}
|
||||||
hideNonTalking={searchParams.get("hideNonTalking") === "true"}
|
hideNonTalking={searchParams.get("hideNonTalking") === "true"}
|
||||||
clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
|
clientLimit={searchParams.get("clientLimit") ? parseInt(searchParams.get("clientLimit") ?? "0") : 0}
|
||||||
alignRight={searchParams.get("alignRight") === "true"}
|
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -9,14 +9,13 @@ export default function Generator() {
|
|||||||
|
|
||||||
const [remoteAppPort, setRemoteAppPort] = useState(5899);
|
const [remoteAppPort, setRemoteAppPort] = useState(5899);
|
||||||
const [showChannelName, setShowChannelName] = useState(true);
|
const [showChannelName, setShowChannelName] = useState(true);
|
||||||
const [alignRight, setAlignRight] = useState(false);
|
|
||||||
const [hideNonTalking, setHideNonTalking] = useState(false);
|
const [hideNonTalking, setHideNonTalking] = useState(false);
|
||||||
const [clientLimit, setClientLimit] = useState(0);
|
const [clientLimit, setClientLimit] = useState(0);
|
||||||
|
|
||||||
// Effect to generate URL when dependencies change
|
// Effect to generate URL when dependencies change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
generateUrl();
|
generateUrl();
|
||||||
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit, alignRight]);
|
}, [remoteAppPort, showChannelName, hideNonTalking, clientLimit]);
|
||||||
|
|
||||||
// Function to generate the output URL
|
// Function to generate the output URL
|
||||||
function generateUrl() {
|
function generateUrl() {
|
||||||
@@ -27,7 +26,6 @@ export default function Generator() {
|
|||||||
url.searchParams.set("showChannelName", showChannelName.toString());
|
url.searchParams.set("showChannelName", showChannelName.toString());
|
||||||
url.searchParams.set("hideNonTalking", hideNonTalking.toString());
|
url.searchParams.set("hideNonTalking", hideNonTalking.toString());
|
||||||
url.searchParams.set("clientLimit", clientLimit.toString());
|
url.searchParams.set("clientLimit", clientLimit.toString());
|
||||||
url.searchParams.set("alignRight", alignRight.toString());
|
|
||||||
|
|
||||||
// url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
|
// url.hash function always sets the hash to the end of the URL, so we have to replace the question mark with a hash
|
||||||
// gh-pages needs the hash to be between the base URL and the search params
|
// gh-pages needs the hash to be between the base URL and the search params
|
||||||
@@ -64,9 +62,7 @@ export default function Generator() {
|
|||||||
<p>1. Customize your settings</p>
|
<p>1. Customize your settings</p>
|
||||||
<p>2. Copy the generated URL</p>
|
<p>2. Copy the generated URL</p>
|
||||||
<p>3. Paste the URL into the BrowserSource URL field in OBS</p>
|
<p>3. Paste the URL into the BrowserSource URL field in OBS</p>
|
||||||
<a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">
|
<a href="https://github.com/DerTyp7/ts5-obs-overlay#detailed-instructions">Click here for detailed instructions</a>
|
||||||
Click here for detailed instructions
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Output Section */}
|
{/* Output Section */}
|
||||||
@@ -102,34 +98,18 @@ export default function Generator() {
|
|||||||
<input type="checkbox" checked={hideNonTalking} />
|
<input type="checkbox" checked={hideNonTalking} />
|
||||||
<label>Hide non talking clients</label>
|
<label>Hide non talking clients</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Alignment Option */}
|
|
||||||
<div className="option" onClick={() => setAlignRight(!alignRight)}>
|
|
||||||
<input type="checkbox" checked={alignRight} />
|
|
||||||
<label>Align Right</label>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
{/* Client Limit Option */}
|
{/* Client Limit Option */}
|
||||||
<div className="option">
|
<div className="option">
|
||||||
<input
|
<input type="number" value={clientLimit} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))} />
|
||||||
type="number"
|
|
||||||
value={clientLimit}
|
|
||||||
min={0}
|
|
||||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setClientLimit(parseInt(e.target.value))}
|
|
||||||
/>
|
|
||||||
<label>Client Limit</label>
|
<label>Client Limit</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* RemoteApp-Port Option */}
|
{/* RemoteApp-Port Option */}
|
||||||
<div className="option">
|
<div className="option">
|
||||||
<input
|
<input type="number" value={remoteAppPort} min={0} onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))} />
|
||||||
type="number"
|
|
||||||
value={remoteAppPort}
|
|
||||||
min={0}
|
|
||||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setRemoteAppPort(parseInt(e.target.value))}
|
|
||||||
/>
|
|
||||||
<label>RemoteApp-Port</label>
|
<label>RemoteApp-Port</label>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -138,13 +118,7 @@ export default function Generator() {
|
|||||||
|
|
||||||
{/* Preview */}
|
{/* Preview */}
|
||||||
<div className="preview">
|
<div className="preview">
|
||||||
<Viewer
|
<Viewer remoteAppPort={remoteAppPort} showChannelName={showChannelName} hideNonTalking={hideNonTalking} clientLimit={clientLimit} />
|
||||||
remoteAppPort={remoteAppPort}
|
|
||||||
showChannelName={showChannelName}
|
|
||||||
hideNonTalking={hideNonTalking}
|
|
||||||
clientLimit={clientLimit}
|
|
||||||
alignRight={alignRight}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,13 +6,11 @@ export default function Viewer({
|
|||||||
showChannelName = false,
|
showChannelName = false,
|
||||||
hideNonTalking = false,
|
hideNonTalking = false,
|
||||||
clientLimit = 0,
|
clientLimit = 0,
|
||||||
alignRight = false,
|
|
||||||
}: {
|
}: {
|
||||||
remoteAppPort?: number;
|
remoteAppPort?: number;
|
||||||
showChannelName?: boolean;
|
showChannelName?: boolean;
|
||||||
hideNonTalking?: boolean;
|
hideNonTalking?: boolean;
|
||||||
clientLimit?: number;
|
clientLimit?: number;
|
||||||
alignRight?: boolean;
|
|
||||||
}) {
|
}) {
|
||||||
const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
|
const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
|
||||||
remoteAppPort: remoteAppPort,
|
remoteAppPort: remoteAppPort,
|
||||||
@@ -32,7 +30,7 @@ export default function Viewer({
|
|||||||
}) as IClient[];
|
}) as IClient[];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`viewer ${alignRight ? "viewer--align-right" : ""}`}>
|
<div className="viewer">
|
||||||
{showChannelName && currentChannel ? (
|
{showChannelName && currentChannel ? (
|
||||||
<div className="channelNameContainer">
|
<div className="channelNameContainer">
|
||||||
<h1>{currentChannel?.properties.name}</h1>
|
<h1>{currentChannel?.properties.name}</h1>
|
||||||
@@ -46,19 +44,13 @@ export default function Viewer({
|
|||||||
|
|
||||||
if (client) {
|
if (client) {
|
||||||
//* Non-talking client
|
//* Non-talking client
|
||||||
if (
|
if (hideNonTalking && (client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)) {
|
||||||
hideNonTalking &&
|
|
||||||
(client.properties.inputMuted || client.properties.outputMuted || client.talkStatus == 0)
|
|
||||||
) {
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
//* Normal client
|
//* Normal client
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="client" key={`${client.id}-${client.channel?.connection.id}`}>
|
||||||
className={`client ${alignRight ? "client--align-right" : ""}`}
|
|
||||||
key={`${client.id}-${client.channel?.connection.id}`}
|
|
||||||
>
|
|
||||||
{client.properties.outputHardware == false ? (
|
{client.properties.outputHardware == false ? (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||||
<title>muted_hardware_output</title>
|
<title>muted_hardware_output</title>
|
||||||
@@ -93,16 +85,7 @@ export default function Viewer({
|
|||||||
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"
|
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="#d8d8d8"
|
fill="#d8d8d8"
|
||||||
/>
|
/>
|
||||||
<rect
|
<rect x="-5.93" y="61.89" width="139.87" height="14.02" rx="2.87" ry="2.87" transform="translate(-29.97 65.43) rotate(-45)" fill="#c9070a" />
|
||||||
x="-5.93"
|
|
||||||
y="61.89"
|
|
||||||
width="139.87"
|
|
||||||
height="14.02"
|
|
||||||
rx="2.87"
|
|
||||||
ry="2.87"
|
|
||||||
transform="translate(-29.97 65.43) rotate(-45)"
|
|
||||||
fill="#c9070a"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
) : client.properties.outputMuted ? (
|
) : client.properties.outputMuted ? (
|
||||||
|
|||||||
@@ -7,10 +7,6 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
|
||||||
&--align-right {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 5vw;
|
font-size: 5vw;
|
||||||
}
|
}
|
||||||
@@ -36,12 +32,9 @@
|
|||||||
.client {
|
.client {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 0.5rem 0.5rem;
|
gap: 0 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin: 0.5rem 0;
|
||||||
&--align-right {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
// icon styles
|
// icon styles
|
||||||
svg {
|
svg {
|
||||||
|
|||||||
Reference in New Issue
Block a user