janis/teamspeak-obs-overlay
1
0
Fork 0
mirror of https://github.com/DerTyp7/teamspeak-obs-overlay.git synced 2025-10-29 12:52:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

add basic generator structure

Browse Source
This commit is contained in:
DerTyp7
2023-11-10 11:20:58 +01:00
parent e2a8472cf9
commit bbd10af0dc
5 changed files with 332 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
package-lock.json generated
View File

@@ -1026,9 +1026,9 @@
"devOptional": true
},
"node_modules/@types/react": {
"version": "18.2.35",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.35.tgz",
"integrity": "sha512-LG3xpFZ++rTndV+/XFyX5vUP7NI9yxyk+MQvBDq+CVs8I9DLSc3Ymwb1Vmw5YDoeNeHN4PDZa3HylMKJYT9PNQ==",
"version": "18.2.37",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz",
"integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==",
"devOptional": true,
"dependencies": {
"@types/prop-types": "*",
@@ -1037,9 +1037,9 @@
}
},
"node_modules/@types/react-dom": {
"version": "18.2.14",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz",
"integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==",
"version": "18.2.15",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz",
"integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==",
"dev": true,
"dependencies": {
"@types/react": "*"
@@ -1114,15 +1114,15 @@
}
},
"node_modules/@typescript-eslint/parser": {
"version": "6.9.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.9.1.tgz",
"integrity": "sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==",
"version": "6.10.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
"integrity": "sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==",
"dev": true,
"dependencies": {
"@typescript-eslint/scope-manager": "6.9.1",
"@typescript-eslint/types": "6.9.1",
"@typescript-eslint/typescript-estree": "6.9.1",
"@typescript-eslint/visitor-keys": "6.9.1",
"@typescript-eslint/scope-manager": "6.10.0",
"@typescript-eslint/types": "6.10.0",
"@typescript-eslint/typescript-estree": "6.10.0",
"@typescript-eslint/visitor-keys": "6.10.0",
"debug": "^4.3.4"
},
"engines": {
@@ -1142,13 +1142,13 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
"version": "6.9.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.9.1.tgz",
"integrity": "sha512-38IxvKB6NAne3g/+MyXMs2Cda/Sz+CEpmm+KLGEM8hx/CvnSRuw51i8ukfwB/B/sESdeTGet1NH1Wj7I0YXswg==",
"version": "6.10.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.10.0.tgz",
"integrity": "sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "6.9.1",
"@typescript-eslint/visitor-keys": "6.9.1"
"@typescript-eslint/types": "6.10.0",
"@typescript-eslint/visitor-keys": "6.10.0"
},
"engines": {
"node": "^16.0.0 || >=18.0.0"
@@ -1159,9 +1159,9 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
"version": "6.9.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.9.1.tgz",
"integrity": "sha512-BUGslGOb14zUHOUmDB2FfT6SI1CcZEJYfF3qFwBeUrU6srJfzANonwRYHDpLBuzbq3HaoF2XL2hcr01c8f8OaQ==",
"version": "6.10.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.10.0.tgz",
"integrity": "sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==",
"dev": true,
"engines": {
"node": "^16.0.0 || >=18.0.0"
@@ -1172,13 +1172,13 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
"version": "6.9.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.1.tgz",
"integrity": "sha512-U+mUylTHfcqeO7mLWVQ5W/tMLXqVpRv61wm9ZtfE5egz7gtnmqVIw9ryh0mgIlkKk9rZLY3UHygsBSdB9/ftyw==",
"version": "6.10.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.10.0.tgz",
"integrity": "sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "6.9.1",
"@typescript-eslint/visitor-keys": "6.9.1",
"@typescript-eslint/types": "6.10.0",
"@typescript-eslint/visitor-keys": "6.10.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
@@ -1199,12 +1199,12 @@
}
},
"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
"version": "6.9.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.1.tgz",
"integrity": "sha512-MUaPUe/QRLEffARsmNfmpghuQkW436DvESW+h+M52w0coICHRfD6Np9/K6PdACwnrq1HmuLl+cSPZaJmeVPkSw==",
"version": "6.10.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.10.0.tgz",
"integrity": "sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==",
"dev": true,
"dependencies": {
"@typescript-eslint/types": "6.9.1",
"@typescript-eslint/types": "6.10.0",
"eslint-visitor-keys": "^3.4.1"
},
"engines": {

80
src/Generator.tsx
View File

@@ -1,5 +1,81 @@
import React from "react";
import React, { ChangeEvent } from "react";
import "@styles/Generator.scss";
export default function Generator() {
return <div>Generator</div>;
const [outputUrl, setOutputUrl] = React.useState("sdlgkhfldskgjhdkjfghlkdfsjghlkjdshg");
const copiedTooltipRef = React.useRef<HTMLDivElement>(null);
const [showChannelName, setShowChannelName] = React.useState(true);
function copy() {
navigator.clipboard.writeText(outputUrl);
if (copiedTooltipRef.current) {
copiedTooltipRef.current.style.animation = "tooltipAnimation 200ms";
copiedTooltipRef.current.style.opacity = "1";
setTimeout(() => {
if (copiedTooltipRef.current) {
copiedTooltipRef.current.style.opacity = "0";
copiedTooltipRef.current.style.animation = "";
}
}, 1000);
}
}
return (
<div className="generator">
<div className="output">
<p className="url">
<code>{outputUrl}</code>
</p>
<button onClick={copy} className="copy">
Copy
</button>
<div ref={copiedTooltipRef} className="copiedTooltip">
Copied!
</div>
</div>
<div className="configuration">
<div className="options">
<h1>Configurations</h1>
<div className="option">
<input
type="checkbox"
checked={showChannelName}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setShowChannelName(e.target.checked);
}}
/>
<label>Show channelname</label>
</div>
<div className="option">
<input
type="checkbox"
checked={showChannelName}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setShowChannelName(e.target.checked);
}}
/>
<label>Hide non talking clients</label>
</div>
<div className="option">
<input
type="number"
value={20}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
setShowChannelName(e.target.checked);
}}
/>
<label>Client Limit</label>
</div>
</div>
<div className="viewer">s</div>
</div>
</div>
);
}

222
src/styles/Generator.scss Normal file
View File

@@ -0,0 +1,222 @@
// Breakpoints
$breakpoint-1: 760px;
$breakpoint-2: 565px;
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
background-color: #232528;
}
@keyframes tooltipAnimation {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.generator {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
color: white;
button {
background-color: #202024;
color: #fff;
font-weight: bold;
border: 2px solid #31f399;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
transition: all 300ms ease-in-out;
&:hover {
background-color: #42d486;
color: #202024;
}
}
.output {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 20px;
position: relative;
height: 20px;
.url {
white-space: nowrap;
overflow: auto;
font-weight: bold;
width: 500px;
padding: 5px 10px;
background-color: #313136;
border-radius: 5px;
text-align: center;
@media screen and (max-width: $breakpoint-1) {
width: 300px;
}
@media screen and (max-width: $breakpoint-2) {
width: 200px;
}
}
.copy {
padding: 5px 10px;
border: 2px solid #31f39973;
transition: all 100ms ease-in-out;
&:hover {
border-color: #42d486;
background-color: transparent;
color: #fff;
}
}
.copiedTooltip {
opacity: 0;
position: absolute;
right: -90px;
background-color: #31f399;
color: #202024;
padding: 5px 10px;
border-radius: 5px;
font-size: 0.8rem;
font-weight: bold;
}
}
.configuration {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
flex: 1;
gap: 30px;
h1 {
font-size: 1.2rem;
text-align: center;
}
.options {
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
height: 100%;
width: 100%;
border-right: 5px solid rgb(131, 131, 131);
gap: 10px;
}
.viewer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: #fff;
}
.option {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
column-gap: 10px;
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #31f399;
border-radius: 5px;
background-color: #202024;
outline: none;
transition: all 200ms ease-in-out;
position: relative;
color: white;
text-align: center;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
// make it a cross when checked
&:checked {
&:after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #31f399;
transform: rotate(45deg);
}
&:before {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #31f399;
transform: rotate(-45deg);
}
&:after,
&:before {
top: 7px;
left: 3px;
}
}
cursor: pointer;
}
input[type="number"] {
width: 50px;
cursor: text;
}
label {
cursor: pointer;
}
}
}
}
// custom dark themed scrollbar
::-webkit-scrollbar {
width: 5px;
height: 15px;
}
::-webkit-scrollbar-track {
background: #363638;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #31f39973;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #48ee95;
}

1
src/styles/Viewer.scss
View File

@@ -3,6 +3,7 @@
flex-direction: column;
gap: 0 0;
padding: 1rem;
font-size: 3rem;
.channelNameContainer {
display: flex;

2
src/styles/index.scss
View File

@@ -1,5 +1,5 @@
* {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 3rem;
font-size: 1rem;
}