From ef770cbc9c5ec6cc6ee959c17cd89251aa0bf222 Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@teaspeak.de>
Date: Mon, 10 Aug 2020 15:13:03 +0200
Subject: [PATCH] Updated the client play icons

---
 package-lock.json            |  6 ++---
 package.json                 |  2 +-
 shared/js/ui/tree/Client.tsx | 48 +++++++++++++++++-------------------
 shared/js/ui/tree/View.scss  |  4 +++
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 400ce7be..f672fbae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14720,9 +14720,9 @@
       }
     },
     "webpack-svg-sprite-generator": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/webpack-svg-sprite-generator/-/webpack-svg-sprite-generator-1.0.13.tgz",
-      "integrity": "sha512-1KZG+RpLeBZiFCUzKIVWfWUW24JccomaoYyNgKoYldCt4A4DgZPxsBi1QttfTtPzKJlGKXSlwps9RANGLEJY+Q==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/webpack-svg-sprite-generator/-/webpack-svg-sprite-generator-1.0.14.tgz",
+      "integrity": "sha512-F6NOiVxSnh5Ig6Ir1gXAnvEHBBP+nLv+6zl5oZ713BdZnuGPW2YWDsWXzJBOWcuARtHdH7m8sn4rNKUYr1WYug==",
       "dev": true,
       "requires": {
         "fs-extra": "^9.0.1",
diff --git a/package.json b/package.json
index e2004803..7d7528e4 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "webpack": "^4.42.1",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^3.3.11",
-    "webpack-svg-sprite-generator": "^1.0.13",
+    "webpack-svg-sprite-generator": "^1.0.14",
     "worker-plugin": "^4.0.2",
     "xml-parser": "^1.2.1"
   },
diff --git a/shared/js/ui/tree/Client.tsx b/shared/js/ui/tree/Client.tsx
index 486d34a1..f1234321 100644
--- a/shared/js/ui/tree/Client.tsx
+++ b/shared/js/ui/tree/Client.tsx
@@ -9,7 +9,8 @@ import {
     ClientEvents,
     ClientProperties,
     ClientType,
-    LocalClientEntry, MusicClientEntry
+    LocalClientEntry,
+    MusicClientEntry
 } from "../client";
 import {EventHandler, ReactEventHandler} from "tc-shared/events";
 import {Group, GroupEvents} from "tc-shared/permission/GroupManager";
@@ -17,6 +18,8 @@ import {Settings, settings} from "tc-shared/settings";
 import {TreeEntry, UnreadMarker} from "tc-shared/ui/tree/TreeEntry";
 import {LocalIconRenderer} from "tc-shared/ui/react-elements/Icon";
 import * as DOMPurify from "dompurify";
+import {ClientIcon} from "svg-sprites/client-icons";
+import {ClientIconRenderer} from "tc-shared/ui/react-elements/Icons";
 
 const clientStyle = require("./Client.scss");
 const viewStyle = require("./View.scss");
@@ -39,48 +42,43 @@ class ClientSpeakIcon extends ReactComponentBase<ClientIconProperties, {}> {
     ];
 
     render() {
-        let icon: string = "";
-        let clicon: string = "";
-
         const client = this.props.client;
         const properties = client.properties;
 
+        let icon: ClientIcon;
         if(properties.client_type_exact == ClientType.CLIENT_QUERY) {
-            icon = "client-server_query";
+            icon = ClientIcon.ServerQuery;
         } else {
             if (properties.client_away) {
-                icon = "client-away";
+                icon = ClientIcon.Away;
             } else if (!client.get_audio_handle() && !(this instanceof LocalClientEntry)) {
-                icon = "client-input_muted_local";
+                icon = ClientIcon.InputMutedLocal;
             } else if(!properties.client_output_hardware) {
-                icon = "client-hardware_output_muted";
+                icon = ClientIcon.HardwareOutputMuted;
             } else if(properties.client_output_muted) {
-                icon = "client-output_muted";
+                icon = ClientIcon.OutputMuted;
             } else if(!properties.client_input_hardware) {
-                icon = "client-hardware_input_muted";
+                icon = ClientIcon.HardwareInputMuted;
             } else if(properties.client_input_muted) {
-                icon = "client-input_muted";
+                icon = ClientIcon.InputMuted;
             } else {
                 if(client.isSpeaking()) {
-                    if(properties.client_is_channel_commander)
-                        clicon = "client_cc_talk";
-                    else
-                        clicon = "client_talk";
+                    if(properties.client_is_channel_commander) {
+                        icon = ClientIcon.PlayerCommanderOn;
+                    } else {
+                        icon = ClientIcon.PlayerOn;
+                    }
                 } else {
-                    if(properties.client_is_channel_commander)
-                        clicon = "client_cc_idle";
-                    else
-                        clicon = "client_idle";
+                    if(properties.client_is_channel_commander) {
+                        icon = ClientIcon.PlayerCommanderOff;
+                    } else {
+                        icon = ClientIcon.PlayerOff;
+                    }
                 }
             }
         }
 
-        if(clicon.length > 0)
-            return <div className={"clicon " + clicon} />;
-        else if(icon.length > 0)
-            return <div className={"icon " + icon} />;
-        else
-            return null;
+        return <ClientIconRenderer icon={icon} />
     }
 
     @EventHandler<ClientEvents>("notify_properties_updated")
diff --git a/shared/js/ui/tree/View.scss b/shared/js/ui/tree/View.scss
index aaf07f7c..11876f7c 100644
--- a/shared/js/ui/tree/View.scss
+++ b/shared/js/ui/tree/View.scss
@@ -30,6 +30,10 @@ html:root {
         line-height: 1;
     }
 
+    :global(.icon_em) {
+        font-size: 16px;
+    }
+
     .treeEntry {
         position: absolute;
         left: 0;