-
diff --git a/src/Viewer.tsx b/src/Viewer.tsx
index e8f5b94..d3e911f 100644
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -1,5 +1,6 @@
import "@styles/Viewer.scss";
import useTSRemoteApp, { IClient } from "react-teamspeak-remote-app-api";
+import TalkStatus from "@/components/TalkStatus";
export default function Viewer({
remoteAppPort = 5899,
@@ -7,12 +8,14 @@ export default function Viewer({
hideNonTalking = false,
clientLimit = 0,
alignRight = false,
+ showTsAvatar = false,
}: {
remoteAppPort?: number;
showChannelName?: boolean;
hideNonTalking?: boolean;
clientLimit?: number;
alignRight?: boolean;
+ showTsAvatar?: boolean;
}) {
const { clients, activeConnectionId, currentChannel } = useTSRemoteApp({
remoteAppPort: remoteAppPort,
@@ -59,103 +62,7 @@ export default function Viewer({
className={`client ${alignRight ? "client--align-right" : ""}`}
key={`${client.id}-${client.channel?.connection.id}`}
>
- {client.properties.outputHardware == false ? (
-
- ) : client.properties.inputHardware == false ? (
-
- ) : client.properties.outputMuted ? (
-
- ) : client.properties.inputMuted ? (
-
- ) : client.talkStatus == 1 ? (
-
- ) : (
-
- )}
+ {client.properties.nickname}
); diff --git a/src/assets/icons/input_hardware.svg b/src/assets/icons/input_hardware.svg new file mode 100644 index 0000000..fd4d004 --- /dev/null +++ b/src/assets/icons/input_hardware.svg @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/src/assets/icons/input_muted.svg b/src/assets/icons/input_muted.svg new file mode 100644 index 0000000..cf7e787 --- /dev/null +++ b/src/assets/icons/input_muted.svg @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/src/assets/icons/muted_hardware_output.svg b/src/assets/icons/muted_hardware_output.svg new file mode 100644 index 0000000..9e76f60 --- /dev/null +++ b/src/assets/icons/muted_hardware_output.svg @@ -0,0 +1,25 @@ + \ No newline at end of file diff --git a/src/assets/icons/not_talk.svg b/src/assets/icons/not_talk.svg new file mode 100644 index 0000000..e5db837 --- /dev/null +++ b/src/assets/icons/not_talk.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/assets/icons/output_muted.svg b/src/assets/icons/output_muted.svg new file mode 100644 index 0000000..6ccfa42 --- /dev/null +++ b/src/assets/icons/output_muted.svg @@ -0,0 +1,25 @@ + \ No newline at end of file diff --git a/src/assets/icons/talk.svg b/src/assets/icons/talk.svg new file mode 100644 index 0000000..30ffbf2 --- /dev/null +++ b/src/assets/icons/talk.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/components/TalkStatus.tsx b/src/components/TalkStatus.tsx new file mode 100644 index 0000000..65ca387 --- /dev/null +++ b/src/components/TalkStatus.tsx @@ -0,0 +1,47 @@ +import "@styles/TalkStatus.scss"; +import { IClient } from "react-teamspeak-remote-app-api"; +import MutedHardwareOutputSvg from "@assets/icons/muted_hardware_output.svg?react"; +import InputHardwareSvg from "@assets/icons/input_hardware.svg?react"; +import OutputMutedSvg from "@assets/icons/output_muted.svg?react"; +import InputMutedSvg from "@assets/icons/input_muted.svg?react"; +import TalkingSvg from "@assets/icons/talk.svg?react"; +import NotTalkingSvg from "@assets/icons/not_talk.svg?react"; + +// TODO outsource svg to files +export default function TalkStatus({ client, showTsAvatar }: { client: IClient; showTsAvatar: boolean }) { + function getTeamSpeakAvatarUrl(): string { + // MyTeamSpeak avatar property looks like this: + // 1,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/258947109;2,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/71073868;4,https://storage.googleapis.com/ts-sys-myts-avatars/d4864285-0b77-4f2d-b0c5-1ae585e66ee5/1260429936 + // 2, is the avatar we want to use. The other ones are away and busy avatars. + return ( + client.properties.myteamspeakAvatar.split("2,")[1] ?? + client.properties.myteamspeakAvatar.split(";")[0].split(",")[1] + ); + } + + return ( +
+ {showTsAvatar ? (
+
+ );
+}
diff --git a/src/styles/Generator.scss b/src/styles/Generator.scss
index 97312c0..48a39f7 100644
--- a/src/styles/Generator.scss
+++ b/src/styles/Generator.scss
@@ -202,27 +202,17 @@ $breakpoint-3: 600px;
// Preview styles
.preview {
+ display: flex;
flex: 1;
+ background-image: url("/images/viewer_example_background.png");
+ background-repeat: no-repeat;
+ background-size: cover;
border: 2px solid #31f39973;
- // Viewer styles (see src/styles/Viewer.scss)
- .viewer {
- background-image: url("/images/viewer_example_background.png");
- background-repeat: no-repeat;
- background-size: cover;
+ iframe {
+ width: 100%;
min-height: 500px;
- h1 {
- font-size: 2rem;
- }
- .client {
- svg {
- width: 2rem;
- }
-
- p {
- font-size: 2rem;
- }
- }
+ border: none;
}
}
}
diff --git a/src/styles/TalkStatus.scss b/src/styles/TalkStatus.scss
new file mode 100644
index 0000000..188e5f2
--- /dev/null
+++ b/src/styles/TalkStatus.scss
@@ -0,0 +1,42 @@
+.talkStatus {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &--avatar {
+ margin-right: 4rem;
+
+ svg {
+ width: 6rem !important;
+ margin-left: -9.5rem;
+ }
+ }
+
+ svg {
+ width: 5rem;
+ aspect-ratio: 1/1;
+ margin-right: 0.5rem;
+ filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
+ }
+}
+
+.avatar {
+ $border-radius: 100rem;
+ $border-width: 0.7rem;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ aspect-ratio: 1/1;
+ border: $border-width solid transparent;
+ border-radius: $border-radius;
+
+ img {
+ width: 10rem;
+ border-radius: $border-radius;
+ }
+
+ &--talk {
+ border: $border-width solid rgb(0, 195, 255);
+ }
+}
diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss
index d8d4508..699c4a1 100644
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -5,21 +5,22 @@
.viewer {
display: flex;
flex-direction: column;
- padding: 0.5rem;
+ padding: 0.3rem;
+ gap: 0.3rem;
&--align-right {
align-items: flex-end;
}
h1 {
- font-size: 5vw;
+ font-size: 4.5rem;
}
h1,
p {
background-color: #2f313680;
- padding: 0.25rem 0.5rem;
- border-radius: 0.25rem;
+ padding: 0.25rem 1.2rem;
+ border-radius: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -43,17 +44,9 @@
flex-direction: row-reverse;
}
- // icon styles
- svg {
- width: 5vw;
- aspect-ratio: 1/1;
- margin-right: 0.5rem;
- filter: drop-shadow(0 0 0.75rem rgba(15, 15, 15, 0.1));
- }
-
// client name styles
p {
- font-size: 5vw;
+ font-size: 4rem;
}
}
}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..fa3e1b9 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,2 @@
///
+ })
+
+ ) : null}
+
+ {client.properties.outputHardware === false ? (
+