save all with +x as script changes them anyways

.npmrc

@@ -1,4 +0,0 @@
-audit=false
-fund=false
-update-notifier=false
-package-lock=true

.woodpecker/base.yaml

@@ -1,89 +0,0 @@
-when:
-  event: [push, deployment, manual, cron]
-
-labels:
-  platform: linux/amd64
-
-variables:
-  - &node_image 'node:14-bullseye'
-  - &buildx_image 'woodpeckerci/plugin-docker-buildx:2.2.1'
-  - &platforms 'linux/amd64'
-  - &dockerfile 'docker/Dockerfile.ci'
-    
-
-steps:
-  prepare-npm:
-    image: *node_image
-    secrets:
-      - npmconf
-    commands:
-      - git config --add safe.directory '*'
-      - if [ "$${NPMCONF:-}" != "" ]; then echo "$${NPMCONF}" >> "$${HOME}/.npmrc"; fi
-      - npm ci
-      - npx browserslist@latest --update-db
-
-  build-npm:
-    image: *node_image
-    commands:
-      - bash ./scripts/build.sh web dev
-
-  build-docker-next:
-    image: *buildx_image
-    pull: true
-    settings:
-      platforms: *platforms
-      dockerfile: *dockerfile
-      context: .
-      registry:
-        from_secret: registry_domain
-      repo:
-        from_secret: target_image_name
-      password:
-        from_secret: registry_token
-      username:
-        from_secret: registry_user
-      auto_tag: true
-      tag: [next, "next-${CI_COMMIT_SHA:0:8}"]
-    when:
-      branch: ${CI_REPO_DEFAULT_BRANCH}
-      event: push
-  
-  build-docker-branch:
-    image: *buildx_image
-    pull: true
-    settings:
-      platforms: *platforms
-      dockerfile: *dockerfile
-      context: .
-      registry:
-        from_secret: registry_domain
-      repo:
-        from_secret: target_image_name
-      password:
-        from_secret: registry_token
-      username:
-        from_secret: registry_user
-      auto_tag: true
-      tag: ["${CI_COMMIT_BRANCH}", "${CI_COMMIT_BRANCH}-${CI_COMMIT_SHA:0:8}"]
-    when:
-      event: [push, manual]
-
-  build-docker-tag:
-    image: *buildx_image
-    pull: true
-    settings:
-      platforms: *platforms
-      dockerfile: *dockerfile
-      context: .
-      registry:
-        from_secret: registry_domain
-      repo:
-        from_secret: target_image_name
-      password:
-        from_secret: registry_token
-      username:
-        from_secret: registry_user
-      auto_tag: true
-      tag: [latest, "${CI_COMMIT_TAG}", "tag-${CI_COMMIT_SHA:0:8}"]
-    when:
-      event: [tag]

client-api/.gitignore

@@ -0,0 +1,2 @@
+#My local environment to deploy the files directly
+environment/

client-api/api.php

@@ -0,0 +1,314 @@
+<?php
+    /**
+     * Created by PhpStorm.
+     * User: WolverinDEV
+     * Date: 04.10.18
+     * Time: 16:42
+     */
+
+    $UI_BASE_PATH = "ui-files/";
+    $CLIENT_BASE_PATH = "files/";
+
+    function errorExit($message) {
+        http_response_code(400);
+        die(json_encode([
+            "success" => false,
+            "msg" => $message
+        ]));
+    }
+
+    function verifyPostSecret() {
+        if(!isset($_POST["secret"])) {
+            errorExit("Missing required information!");
+        }
+
+        $require_secret = file_get_contents(".deploy_secret");
+        if($require_secret === false || strlen($require_secret) == 0) {
+            errorExit("Server missing secret!");
+        }
+
+        if(!is_string($_POST["secret"])) {
+            errorExit("Invalid secret!");
+        }
+
+        if(strcmp(trim($require_secret), trim($_POST["secret"])) !== 0) {
+            errorExit("Secret does not match!");
+        }
+    }
+
+    function handleRequest() {
+        if(isset($_GET) && isset($_GET["type"])) {
+            if ($_GET["type"] == "update-info") {
+                global $CLIENT_BASE_PATH;
+                $raw_versions = file_get_contents($CLIENT_BASE_PATH . "/version.json");
+                if($raw_versions === false) {
+                    errorExit("Missing file!");
+                }
+
+                $versions = json_decode($raw_versions, true);
+                $versions["success"] = true;
+
+                die(json_encode($versions));
+            }
+            else if ($_GET["type"] == "update-download") {
+                global $CLIENT_BASE_PATH;
+
+                $path = $CLIENT_BASE_PATH . $_GET["channel"] . DIRECTORY_SEPARATOR . $_GET["version"] . DIRECTORY_SEPARATOR;
+                $raw_release_info = file_get_contents($path . "info.json");
+                if($raw_release_info === false) {
+                    errorExit("missing info file (version and/or channel missing. Path was " . $path . ")");
+                }
+                $release_info = json_decode($raw_release_info);
+
+                foreach($release_info as $platform) {
+                    if($platform->platform != $_GET["platform"]) continue;
+                    if($platform->arch != $_GET["arch"]) continue;
+
+                    http_response_code(200);
+                    header("Cache-Control: public"); // needed for internet explorer
+                    header("Content-Type: application/binary");
+                    header("Content-Transfer-Encoding: Binary");
+                    header("Content-Length:".filesize($path . $platform->update));
+                    header("Content-Disposition: attachment; filename=update.tar.gz");
+                    header("info-version: 1");
+                    readfile($path . $platform->update);
+                    die();
+                }
+                errorExit("Missing platform, arch or file");
+            }
+            else if ($_GET["type"] == "ui-info") {
+                global $UI_BASE_PATH;
+
+                $version_info = file_get_contents($UI_BASE_PATH . "info.json");
+                if($version_info === false) $version_info = array();
+                else $version_info = json_decode($version_info, true);
+
+                $info = array();
+                $info["success"] = true;
+                $info["versions"] = array();
+
+                foreach($version_info as $channel => $data) {
+                    if(!isset($data["latest"])) continue;
+
+                    $channel_info = [
+                        "timestamp" => $data["latest"]["timestamp"],
+                        "version" => $data["latest"]["version"],
+                        "git-ref" => $data["latest"]["git-ref"],
+                        "channel" => $channel,
+                        "required_client" => $data["latest"]["required_client"]
+                    ];
+                    array_push($info["versions"], $channel_info);
+                }
+                
+                die(json_encode($info));
+            } else if ($_GET["type"] == "ui-download") {
+                global $UI_BASE_PATH;
+
+                if(!isset($_GET["channel"]) || !isset($_GET["version"]))
+                    errorExit("missing required parameters");
+
+                if($_GET["version"] !== "latest" && !isset($_GET["git-ref"]))
+                    errorExit("missing required parameters");
+
+                $version_info = file_get_contents($UI_BASE_PATH . "info.json");
+                if($version_info === false) $version_info = array();
+                else $version_info = json_decode($version_info, true);
+
+                $channel_data = $version_info[$_GET["channel"]];
+                if(!isset($channel_data))
+                    errorExit("channel unknown");
+
+                $ui_pack = false;
+                if($_GET["version"] === "latest") {
+                    $ui_pack = $channel_data["latest"];
+                } else {
+                    foreach ($channel_data["history"] as $entry) {
+                        if($entry["version"] == $_GET["version"] && $entry["git-ref"] == $_GET["git-ref"]) {
+                            $ui_pack = $entry;
+                            break;
+                        }
+                    }
+                }
+                if($ui_pack === false)
+                    errorExit("missing version");
+
+
+                header("Cache-Control: public"); // needed for internet explorer
+                header("Content-Type: application/binary");
+                header("Content-Transfer-Encoding: Binary");
+                header("Content-Disposition: attachment; filename=ui.tar.gz");
+                header("info-version: 1");
+
+                header("x-ui-timestamp: " . $ui_pack["timestamp"]);
+                header("x-ui-version: " . $ui_pack["version"]);
+                header("x-ui-git-ref: " . $ui_pack["git-ref"]);
+                header("x-ui-required_client: " . $ui_pack["required_client"]);
+
+                $read = readfile($ui_pack["file"]);
+                header("Content-Length:" . $read);
+
+                if($read === false) errorExit("internal error: Failed to read file!");
+                die();
+            }
+        }
+        else if($_POST["type"] == "deploy-build") {
+            global $CLIENT_BASE_PATH;
+
+            if(!isset($_POST["version"]) || !isset($_POST["platform"]) || !isset($_POST["arch"]) || !isset($_POST["update_suffix"]) || !isset($_POST["installer_suffix"])) {
+                errorExit("Missing required information!");
+            }
+
+            verifyPostSecret();
+
+            if(!isset($_FILES["update"])) {
+                errorExit("Missing update file");
+            }
+
+            if($_FILES["update"]["error"] !== UPLOAD_ERR_OK) {
+                errorExit("Upload for update failed!");
+            }
+
+            if(!isset($_FILES["installer"])) {
+                errorExit("Missing installer file");
+            }
+
+            if($_FILES["installer"]["error"] !== UPLOAD_ERR_OK) {
+                errorExit("Upload for installer failed!");
+            }
+
+            $json_version = json_decode($_POST["version"], true);
+            $version = $json_version["major"] . "." . $json_version["minor"] . "." . $json_version["patch"] . ($json_version["build"] > 0 ? "-" . $json_version["build"] : "");
+            $path = $CLIENT_BASE_PATH . DIRECTORY_SEPARATOR . $_POST["channel"] . DIRECTORY_SEPARATOR . $version . DIRECTORY_SEPARATOR;
+            exec("mkdir -p " . $path);
+            //mkdir($path, 777, true);
+
+
+            $filename_update = "TeaClient-" . $_POST["platform"] . "_" . $_POST["arch"] . "." . $_POST["update_suffix"];
+            $filename_install = "TeaClient-" . $_POST["platform"] . "_" . $_POST["arch"] . "." . $_POST["installer_suffix"];
+
+            {
+                $version_info = file_get_contents($path . "info.json");
+                if($version_info === false) {
+                    $version_info = array();
+                } else {
+                    $version_info = json_decode($version_info, true);
+                    if($version_info === false) {
+                        errorExit("Failed to decode old versions info file");
+                    }
+                }
+
+                for($index = 0; $index < count($version_info); $index++) {
+                    if($version_info[$index]["platform"] == $_POST["platform"] && $version_info[$index]["arch"] == $_POST["arch"]) {
+                        array_splice($version_info, $index, 1);
+                        break;
+                    }
+                }
+
+                $info = array();
+                $info["platform"] = $_POST["platform"];
+                $info["arch"] = $_POST["arch"];
+                $info["update"] = $filename_update;
+                $info["install"] = $filename_install;
+                array_push($version_info, $info);
+                file_put_contents($path . "info.json", json_encode($version_info));
+            }
+
+            {
+                $filename = $CLIENT_BASE_PATH . DIRECTORY_SEPARATOR . "version.json";
+                $indexes = file_get_contents($filename);
+                if($indexes === false) {
+                    $indexes = array();
+                } else {
+                    $indexes = json_decode($indexes, true);
+                    if($indexes === false) {
+                        errorExit("Failed to decode old latest versions info file");
+                    }
+                }
+
+                $index = &$indexes[$_POST["channel"]];
+                if(!isset($index)) {
+                    $index = array();
+                }
+
+                for($idx = 0; $idx < count($index); $idx++) {
+                    if($index[$idx]["platform"] == $_POST["platform"] && $index[$idx]["arch"] == $_POST["arch"]) {
+                        array_splice($index, $idx, 1);
+                        break;
+                    }
+                }
+
+                $info = array();
+                $info["platform"] = $_POST["platform"];
+                $info["arch"] = $_POST["arch"];
+                $info["version"] = $json_version;
+                array_push($index, $info);
+
+                file_put_contents($filename, json_encode($indexes));
+            }
+
+            move_uploaded_file($_FILES["installer"]["tmp_name"],$path . $filename_install);
+            move_uploaded_file($_FILES["update"]["tmp_name"],$path . $filename_update);
+
+            die(json_encode([
+                "success" => true
+            ]));
+        }
+        else if($_POST["type"] == "deploy-ui-build") {
+            global $UI_BASE_PATH;
+
+            if(!isset($_POST["channel"]) || !isset($_POST["version"]) || !isset($_POST["git_ref"]) || !isset($_POST["required_client"])) {
+                errorExit("Missing required information!");
+            }
+
+            verifyPostSecret();
+
+            $path = $UI_BASE_PATH . DIRECTORY_SEPARATOR;
+            $channeled_path = $UI_BASE_PATH . DIRECTORY_SEPARATOR . $_POST["channel"];
+            $filename = "TeaClientUI-" . $_POST["version"] . "_" . $_POST["git_ref"] . ".tar.gz";
+            exec("mkdir -p " . $path);
+            exec("mkdir -p " . $channeled_path);
+
+            {
+                $info = file_get_contents($path . "info.json");
+                if($info === false) {
+                    $info = array();
+                } else {
+                    $info = json_decode($info, true);
+                    if($info === false) {
+                        errorExit("failed to decode old info file");
+                    }
+                }
+
+                $channel_info = &$info[$_POST["channel"]];
+                if(!$channel_info) {
+                    $channel_info = array();
+                }
+
+                $entry = [
+                    "timestamp" => time(),
+                    "file" => $channeled_path . DIRECTORY_SEPARATOR . $filename,
+                    "version" => $_POST["version"],
+                    "git-ref" => $_POST["git_ref"],
+                    "required_client" => $_POST["required_client"]
+                ];
+
+                $channel_info["latest"] = $entry;
+                if(!$channel_info["history"]) $channel_info["history"] = array();
+                array_push($channel_info["history"], $entry);
+
+                file_put_contents($path . "info.json", json_encode($info));
+            }
+
+
+            move_uploaded_file($_FILES["file"]["tmp_name"],$channeled_path . DIRECTORY_SEPARATOR . $filename);
+            die(json_encode([
+                "success" => true
+            ]));
+        }
+        else die(json_encode([
+            "success" => false,
+            "error" => "invalid action!"
+        ]));
+    }
+
+    handleRequest();

client/.gitignore

@@ -0,0 +1,8 @@
+app/**/*.css
+app/**/*.css.map
+
+app/**/*.js
+app/**/*.js.map
+
+declarations/
+generated/

client/app/AppMain.scss

@@ -0,0 +1,31 @@
+:global {
+	html, body {
+		border: 0;
+		margin: 0;
+	}
+
+	.app-container {
+		right: 0;
+		left: 0;
+		top: 0;
+		bottom: 0;
+
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		display: flex;
+		justify-content: stretch;
+
+		.app {
+			width: 100%;
+			height: 100%;
+			margin: 0;
+
+			display: flex; flex-direction: column; resize: both;
+		}
+	}
+
+	footer {
+		display: none!important;
+	}
+}

client/app/entry-points/AppMain.ts

@@ -0,0 +1,4 @@
+window.__native_client_init_shared(__webpack_require__);
+
+import "../AppMain.scss";
+import "tc-shared/entry-points/MainApp";

client/app/entry-points/ModalWindow.ts

@@ -0,0 +1,2 @@
+window.__native_client_init_shared(__webpack_require__);
+import "tc-shared/entry-points/ModalWindow";

client/app/external.d.ts

@@ -0,0 +1,7 @@
+interface Window {
+    __native_client_init_hook: () => void;
+    __native_client_init_shared: (webpackRequire: any) => void;
+}
+
+declare const __teaclient_preview_notice: any;
+declare const __teaclient_preview_error: any;

client/css/static/main.css

@@ -0,0 +1,30 @@
+html, body {
+  border: 0;
+  margin: 0;
+}
+
+.app-container {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: flex;
+  justify-content: stretch;
+}
+.app-container .app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  resize: both;
+}
+
+footer {
+  display: none !important;
+}
+
+/*# sourceMappingURL=main.css.map */

client/css/static/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EAEA;EAAe;EAAwB;;;AAIzC;EACC","file":"main.css"}

client/generate_packed.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+BASEDIR=$(dirname "$0")
+cd "$BASEDIR"
+source ../scripts/resolve_commands.sh
+
+if [[ ! -e declarations/imports_shared.d.ts ]]; then
+    echo "generate the declarations first!"
+    echo "Execute: /scripts/build_declarations.sh"
+    exit 1
+fi
+
+if [[ ! -e ../shared/generated/shared.js ]]; then
+    echo "generate the shared packed file first!"
+    echo "Execute: /shared/generate_packed.sh"
+    exit 1
+fi
+
+execute_tsc -p tsconfig/tsconfig_packed.json
+if [[ $? -ne 0 ]]; then
+    echo "Failed to build file"
+    exit 1
+fi

client/tsconfig/dtsconfig.json

@@ -0,0 +1,6 @@
+{
+  "source_files": [
+    "../js/**/*.ts"
+  ],
+  "target_file": "../declarations/exports.d.ts"
+}

client/tsconfig/tsconfig.json

@@ -0,0 +1,12 @@
+/* general web project config */
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "sourceMap": true
+  },
+  "include": [
+    "../declarations/imports_*.d.ts",
+    "../js/**/*.ts"
+  ]
+}

client/tsconfig/tsconfig_packed.json

@@ -0,0 +1,14 @@
+/* packed web project config */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "none",
+    "outFile": "../generated/client.js",
+    "allowJs": true
+  },
+  "include": [
+    "../declarations/imports_*.d.ts",
+    "../js/**/*.ts",
+    "../../shared/generated/shared.js"
+  ]
+}

docker/Dockerfile.base

@@ -1,17 +0,0 @@
-FROM nginx:mainline-alpine
-
-COPY ./docker/default.conf /etc/nginx/conf.d/default.conf
-COPY ./docker/nginx.conf /etc/nginx/nginx.conf
-COPY ./docker/entrypoint.sh /
-
-RUN apk update --no-cache && apk upgrade --no-cache \
-    && apk add --no-cache openssl tzdata \
-    && mkdir -p /var/www/TeaWeb /etc/ssl/certs \
-    && chmod +x /entrypoint.sh
-
-ENV TZ="Europe/Berlin"
-
-EXPOSE 80 443
-
-ENTRYPOINT ["/entrypoint.sh"]
-CMD ["nginx", "-g", "daemon off;"]

docker/Dockerfile.ci

@@ -1,2 +0,0 @@
-FROM reg.c1.datenclown.at/teaspeak/web-base:latest
-COPY ./dist/ /var/www/TeaWeb/

docker/default.conf

@@ -1,36 +0,0 @@
-server {
-    listen       80;
-    server_name  _;
-    return 301 https://$host$request_uri;
-}
-
-server {
-    listen       443 default_server ssl http2;
-    server_name  _;
-
-    ssl_ciphers         EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-GCM-SHA256:TLS-CHACHA20-POLY1305-SHA256:TLS-AES-256-GCM-SHA384:TLS-AES-128-GCM-SHA256;
-    ssl_protocols       TLSv1.2 TLSv1.3;
-    ssl_dhparam         /etc/ssl/certs/dhparam.pem;
-    ssl_ecdh_curve      secp384r1;
-    ssl_certificate     /etc/ssl/certs/tea_bundle.crt;
-    ssl_certificate_key /etc/ssl/certs/tea.key;
-    ssl_session_cache   shared:MozSSL:10m;
-    ssl_session_timeout 1d;
-    ssl_prefer_server_ciphers on;
-
-    location / {
-        root   /var/www/TeaWeb;
-        index  index.html;
-    }
-
-    #error_page  404              /404.html;
-
-    # redirect server error pages to the static page /50x.html
-    #
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-
-    gzip          off;
-}

docker/entrypoint.sh

@@ -1,29 +0,0 @@
-#!/usr/bin/env sh
-set -e
-
-gen_self_signed() {
-  echo "[WRN] No certificates found, generating self signed cert with key"
-  openssl req -x509 -nodes -days 1780 -newkey rsa:4096 \
-    -keyout /etc/ssl/certs/tea.key \
-    -out /etc/ssl/certs/tea_bundle.crt \
-    -subj "/C=DE/ST=Berlin/L=Germany/O=TeaSpeak/OU=TeaWeb/CN=localhost/emailAddress=noreply@teaspeak.de"
-}
-
-gen_diffie_hellman() {
-  echo "[INF] No Diffie-Hellman pem found, generating new with 2048 byte"
-  openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
-}
-
-if [ "$1" = "nginx" ]; then
-  if [ ! -f /etc/ssl/certs/tea.key ] && [ ! -f /etc/ssl/certs/tea_bundle.crt ]; then
-    gen_self_signed
-  elif [ ! -f /etc/ssl/certs/tea.key ] || [ ! -f /etc/ssl/certs/tea_bundle.crt ]; then
-    echo "[ERR] Only found a key or crt-bundle file but both files are REQUIRED!"
-    exit 1
-  fi
-  if [ ! -f /etc/ssl/certs/dhparam.pem ]; then
-    gen_diffie_hellman
-  fi
-fi
-
-exec "$@"

docker/nginx.conf

@@ -1,32 +0,0 @@
-user  nginx;
-worker_processes  auto;
-
-error_log  /var/log/nginx/error.log warn;
-pid        /var/run/nginx.pid;
-
-
-events {
-    worker_connections  1024;
-}
-
-
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-
-    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
-                      '$status $body_bytes_sent "$http_referer" '
-                      '"$http_user_agent" "$http_x_forwarded_for"';
-
-    access_log  /var/log/nginx/access.log  main;
-
-    sendfile        on;
-    #tcp_nopush     on;
-
-    server_tokens      off;
-    keepalive_timeout  75;
-
-    #gzip  on;
-
-    include /etc/nginx/conf.d/*.conf;
-}

loader/app/targets/app.ts

@@ -51,6 +51,18 @@ loader.register_task(loader.Stage.SETUP, {
     priority: 10
 });
 
+/* test if we're getting loaded within a TeaClient preview window */
+loader.register_task(loader.Stage.SETUP, {
+    name: "TeaClient tester",
+    function: async () => {
+        if(typeof __teaclient_preview_notice !== "undefined" && typeof __teaclient_preview_error !== "undefined") {
+            loader.critical_error("Why you're opening TeaWeb within the TeaSpeak client?!");
+            throw "we're already a TeaClient!";
+        }
+    },
+    priority: 100
+});
+
 export default class implements ApplicationLoader {
     execute() {
         loader.execute_managed(true);

loader/app/targets/shared.ts

@@ -2,6 +2,27 @@ import * as loader from "../loader/loader";
 import {Stage} from "../loader/loader";
 import {detect as detectBrowser} from "detect-browser";
 
+loader.register_task(Stage.SETUP, {
+    name: "app init",
+    function: async () => {
+        /* TeaClient */
+        if(window.require || window.__native_client_init_hook) {
+            if(__build.target !== "client") {
+                loader.critical_error("App seems not to be compiled for the client.", "This app has been compiled for " + __build.target);
+                return;
+            }
+
+            window.__native_client_init_hook();
+        } else {
+            if(__build.target !== "web") {
+                loader.critical_error("App seems not to be compiled for the web.", "This app has been compiled for " + __build.target);
+                return;
+            }
+        }
+    },
+    priority: 1000
+});
+
 loader.register_task(Stage.SETUP, {
     name: __build.target === "web" ? "outdated browser checker" : "outdated renderer tester",
     function: async () => {

loader/index.ejs

@@ -9,6 +9,7 @@
 
         <meta name="og:description" content="The TeaSpeak Web client is a in the browser running client for the VoIP communication software TeaSpeak." />
         <meta name="og:url" content="https://web.teaspeak.de/">
+        <% /* TODO: Put in an appropriate image <meta name="og:image" content="https://www.whatsapp.com/img/whatsapp-promo.png"> */ %>
 
         <% /* Using an absolute path here since the manifest.json works only with such. */ %>
         <% /* <link rel="manifest" href="/manifest.json"> */ %>
@@ -26,6 +27,19 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <meta name="format-detection" content="telephone=no">
 
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script defer async src="https://www.googletagmanager.com/gtag/js?id=UA-113151733-4"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+
+            gtag('js', new Date());
+            gtag('config', 'UA-113151733-4');
+        </script>
+
         <link rel="preload" as="image" href="<%= require("./images/initial-sequence.gif") %>">
         <link rel="preload" as="image" href="<%= require("./images/bowl.png") %>">
         <% /* We don't preload the bowl since it's only a div background */ %>

package-lock.json

@@ -2834,7 +2834,6 @@
       "version": "7.10.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.3.tgz",
       "integrity": "sha512-RzGO0RLSdokm9Ipe/YD+7ww8X2Ro79qiXZF3HU9ljrM+qnJmH1Vqth+hbiQZy761LnMJTMitHDuKVYTk3k4dLw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -3038,16 +3037,6 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
-    "@emoji-mart/data": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.1.2.tgz",
-      "integrity": "sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg=="
-    },
-    "@emoji-mart/react": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
-      "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g=="
-    },
     "@google-cloud/common": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.4.0.tgz",
@@ -4981,6 +4970,15 @@
       "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
       "dev": true
     },
+    "@types/emoji-mart": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.12.tgz",
+      "integrity": "sha512-ff8xM0+98PhhX15xjDseOWGDz413QvCK6D+yes88u0GJ7DoH3qR5AdMI9CbYA7/jE25WxSvX2SsGnI8Mw1Wbkw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/emscripten": {
       "version": "1.39.10",
       "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.10.tgz",
@@ -9917,9 +9915,13 @@
       }
     },
     "emoji-mart": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
-      "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-3.0.1.tgz",
+      "integrity": "sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "prop-types": "^15.6.0"
+      }
     },
     "emoji-regex": {
       "version": "9.2.2",
@@ -19525,8 +19527,7 @@
     "regenerator-runtime": {
       "version": "0.13.5",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-      "dev": true
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",

package.json

@@ -24,6 +24,7 @@
     "@svgr/webpack": "^5.5.0",
     "@types/dompurify": "^2.4.0",
     "@types/ejs": "^3.1.5",
+    "@types/emoji-mart": "^3.0.12",
     "@types/emscripten": "^1.39.10",
     "@types/fs-extra": "^8.1.5",
     "@types/html-minifier": "^3.5.3",
@@ -97,8 +98,6 @@
   },
   "homepage": "https://www.teaspeak.de",
   "dependencies": {
-    "@emoji-mart/data": "^1.1.2",
-    "@emoji-mart/react": "^1.1.1",
     "@types/crypto-js": "^4.2.1",
     "broadcastchannel-polyfill": "^1.0.1",
     "buffer": "^6.0.3",
@@ -106,7 +105,7 @@
     "crypto-js": "^4.2.0",
     "detect-browser": "^5.3.0",
     "dompurify": "^2.4.7",
-    "emoji-mart": "^5.5.2",
+    "emoji-mart": "^3.0.1",
     "emoji-regex": "^9.2.2",
     "highlight.js": "^10.7.3",
     "ip-regex": "^4.3.0",

scripts/build_in_docker.sh

@@ -11,17 +11,20 @@ if [[ ! -d "${NPM_DIR}" ]]; then
 fi
 
 if [[ "${BUILDINDOCKER:-}" != "yes" ]]; then
-    if docker -v | grep -qi "podman"; then
-        is_podman='yes'
-    fi
-    docker run --rm --workdir "/work" -v "${BASEPATH}:/work" -e is_podman="${is_podman:-no}" -e BUILDINDOCKER=yes -e npm_config_cache=/work/.npm node:14-bullseye /bin/bash -c 'chmod +x /work/scripts/build_in_docker.sh && /work/scripts/build_in_docker.sh'
+    docker run --rm --workdir "/work" -v "${NPM_DIR}:/home/" -v "${BASEPATH}:/work" -e BUILDINDOCKER=yes node:14-bullseye /bin/bash -c 'chmod +x /work/scripts/build_in_docker.sh && /work/scripts/build_in_docker.sh'
     exit
 fi
 
 ## in docker
 
+echo "adding npmrc"
+cat >>"${HOME}/.npmrc" <<'EOF'
+cache=/work/.npm
+fund=false
+EOF
+
 echo "adding secure git dir"
-git config --global --add safe.directory '*'
+git config --global --add safe.directory /work
 
 echo "running chmods"
 find "${BASEPATH}" -iname "*.sh" -exec chmod +x {} +
@@ -38,9 +41,5 @@ npx browserslist@latest --update-db || exit 1
 echo "running build"
 "${BASEPATH}/scripts/build.sh" web rel
 
-if [[ "${is_podman}" != 'yes' ]]; then
-    echo "fixing perms"
-    chown -R 1000:1000 /work
-else
-    echo "in podman, not fixing perms"
-fi
+echo "fixing perms"
+chown -R 1000:1000 /work

scripts/deploy_ui_files.sh

@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+
+# Example usage: ./scripts/deploy_ui_files.sh http://dev.clientapi.teaspeak.de/api.php test 1.1.0
+
+cd "$(dirname "$0")" || { echo "failed to enter base directory"; exit 1; }
+source "./helper.sh"
+
+if [[ "$#" -ne 3 ]]; then
+    echo "Illegal number of parameters (url | channel | required version)"
+    exit 1
+fi
+
+# shellcheck disable=SC2154
+if [[ "${teaclient_deploy_secret}" == "" ]]; then
+    echo "Missing deploy secret!"
+    exit 1
+fi
+
+package_file=$(find_release_package "client" "release")
+if [[ $? -ne 0 ]]; then
+  echo "$package_file"
+  exit 1
+fi
+
+# We require a .tar.gz file and not a zip file.
+# So we're extracting the contents and tar.gz ing them
+temp_dir=$(mktemp -d)
+unzip "$package_file" -d "$temp_dir/raw/"
+if [[ $? -ne 0 ]]; then
+    rm -r "$temp_dir" &>/dev/null
+    echo "Failed to unpack package."
+    exit 1
+fi
+
+echo "Generating .tar.gz file from $package_file"
+package_file="$temp_dir/$(basename -s ".zip" "$package_file").tar.gz"
+tar --use-compress-program="gzip -9" -C "$temp_dir/raw/" -c . -cf "$package_file";
+if [[ $? -ne 0 ]]; then
+    rm -r "$temp_dir"
+    echo "Failed to package package."
+    exit 1
+fi
+
+git_hash=$(git_version "short-tag")
+application_version=$(project_version)
+echo "Deploying $package_file."
+echo "Hash: ${git_hash}, Version: ${application_version}, Target channel: $2."
+
+upload_result=$(curl \
+  -k \
+  -X POST \
+  -F "required_client=$3" \
+  -F "type=deploy-ui-build" \
+  -F "channel=$2" \
+  -F "version=$application_version" \
+  -F "git_ref=$git_hash" \
+  -F "secret=${teaclient_deploy_secret}" \
+  -F "file=@$package_file" \
+   "$1"
+)
+
+rm -r "$temp_dir"
+echo "Server upload result: $upload_result"
+success=$(echo "${upload_result}" | python -c "import sys, json; print(json.load(sys.stdin)['success'])")
+
+if [[ ! "${success}" == "True" ]]; then
+    error_message=$(echo "${upload_result}" | python -c "import sys, json; print(json.load(sys.stdin)['msg'])" 2>/dev/null);
+    echo "Failed to deploy build: ${error_message}"
+    exit 1
+else
+  echo "Build successfully deployed!"
+  exit 0
+fi

scripts/in_docker_prep.sh

@@ -1,11 +0,0 @@
-#!/bin/bash
-
-SCRIPT=$(realpath "$0")
-SCRIPTPATH=$(dirname "$SCRIPT")
-BASEPATH="$(realpath "${SCRIPTPATH}/../")"
-
-echo "adding secure git dir"
-git config --global --add safe.directory '*'
-
-echo "running chmods"
-find "${BASEPATH}" -iname "*.sh" -exec chmod +x {} +

scripts/install_dependencies.sh

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+
+install_sys_deps() {
+    # shellcheck disable=SC2207
+    curl_version=($(curl --version 2>/dev/null))
+
+    # shellcheck disable=SC2181
+    if [[ $? -ne 0 ]]; then
+        echo "> Missing curl. Please install it."
+        exit 1
+    fi
+    echo "> Found curl ${curl_version[1]}"
+}
+
+install_node() {
+    node_version=$(node --version 2>/dev/null)
+    # shellcheck disable=SC2181
+    if [[ $? -ne 0 ]]; then
+        echo "> Missing node. We can't currently install it automatically."
+        echo "> Please download the latest version here: https://nodejs.org/en/download/"
+        exit 1
+    else
+        echo "> Found node $node_version"
+    fi
+
+    npm_version=$(npm --version 2>/dev/null)
+    # shellcheck disable=SC2181
+    if [[ $? -ne 0 ]]; then
+        echo "> Missing npm. Please ensure you've correctly installed node."
+        echo "> You may need to add npm manually to your PATH variable."
+        exit 1
+    else
+        echo "> Found npm $npm_version"
+    fi
+}
+
+install_sys_deps
+install_node

scripts/run_node_docker.sh

@@ -1,28 +0,0 @@
-#!/bin/bash
-
-SCRIPT=$(realpath "$0")
-SCRIPTPATH=$(dirname "$SCRIPT")
-BASEPATH="$(realpath "${SCRIPTPATH}/../")"
-
-NPM_DIR="${BASEPATH}/.npm"
-
-if [[ ! -d "${NPM_DIR}" ]]; then
-    mkdir "${NPM_DIR}" || exit 1
-fi
-
-if docker -v | grep -qi "podman"; then
-    is_podman='yes'
-fi
-
-function run() {
-    docker run --rm --workdir "/work" -v "${BASEPATH}:/work" -e is_podman="${is_podman:-no}" -e BUILDINDOCKER=yes -e npm_config_cache=/work/.npm ${opts:-} node:14-bullseye ${@}
-}
-
-opts="-it" run /bin/bash -c 'bash /work/scripts/in_docker_prep.sh && bash'
-
-if [[ "${is_podman}" != 'yes' ]]; then
-    echo "fixing perms"
-    run /bin/bash -c 'chown -R 1000:1000 /work'
-else
-    echo "in podman, not fixing perms"
-fi

scripts/travis/build.sh

@@ -0,0 +1,177 @@
+#!/bin/bash
+
+cd "$(dirname "$0")/../../" || { echo "Failed to enter base dir"; exit 1; }
+source ./scripts/travis/properties.sh
+
+build_verbose=0
+build_release=1
+build_debug=0
+
+function print_help() {
+    echo "Possible arguments:"
+    echo "  --verbose=[yes|no]          | Enable verbose build output (Default: $build_verbose)"
+    echo "  --enable-release=[yes|no]   | Enable release build (Default: $build_release)"
+    echo "  --enable-debug=[yes|no]     | Enable debug build (Default: $build_debug)"
+}
+
+function parse_arguments() {
+    # Preprocess the help parameter
+    for argument in "$@"; do
+        if [[ "$argument" = "--help" ]] || [[ "$argument" = "-h" ]]; then
+            print_help
+            exit 1
+        fi
+    done
+
+    shopt -s nocasematch
+    for argument in "$@"; do
+        echo "Argument: $argument"
+        if [[ "$argument" =~ ^--verbose(=(y|1)?[[:alnum:]]*$)?$ ]]; then
+            build_verbose=0
+            if [[ -z "${BASH_REMATCH[1]}" ]] || [[ -n "${BASH_REMATCH[2]}" ]]; then
+                build_verbose=1
+            fi
+
+            if [[ ${build_verbose} ]]; then
+                echo "Enabled verbose output"
+            fi
+        elif [[ "$argument" =~ ^--enable-release(=(y|1)?[[:alnum:]]*$)?$ ]]; then
+            build_release=0
+            if [[ -z "${BASH_REMATCH[1]}" ]] || [[ -n "${BASH_REMATCH[2]}" ]]; then
+                build_release=1
+            fi
+
+            if [[ ${build_release} ]]; then
+                echo "Enabled release build!"
+            fi
+        elif [[ "$argument" =~ ^--enable-debug(=(y|1)?[[:alnum:]]*$)?$ ]]; then
+            build_debug=0
+            if [[ -z "${BASH_REMATCH[1]}" ]] || [[ -n "${BASH_REMATCH[2]}" ]]; then
+                build_debug=1
+            fi
+
+            if [[ ${build_debug} ]]; then
+                echo "Enabled debug build!"
+            fi
+        fi
+    done
+}
+
+function execute() {
+    time_begin=$(date +%s%N)
+
+    echo "> Executing step: $1" >> "${LOG_FILE}"
+    echo -e "\e[32m> Executing step: $1\e[0m"
+    #Execute the command
+    for command in "${@:3}"; do
+        echo "$> $command" >> "${LOG_FILE}"
+        if [[ ${build_verbose} -gt 0 ]]; then
+            echo "$> $command"
+        fi
+
+        error=""
+        if [[ ${build_verbose} -gt 0 ]]; then
+            if [[ -f ${LOG_FILE}.tmp ]]; then
+                rm "${LOG_FILE}.tmp"
+            fi
+            ${command} |& tee "${LOG_FILE}.tmp" | grep -E '^[^(/\S*/libstdc++.so\S*: no version information available)].*'
+
+            error_code=${PIPESTATUS[0]}
+            error=$(cat "${LOG_FILE}.tmp")
+            cat "${LOG_FILE}.tmp" >> "${LOG_FILE}"
+            rm "${LOG_FILE}.tmp"
+        else
+            error=$(${command} 2>&1)
+            error_code=$?
+            echo "$error" >> "${LOG_FILE}"
+        fi
+
+
+        if [[ ${error_code} -ne 0 ]]; then
+            break
+        fi
+    done
+
+    #Log the result
+    time_end=$(date +%s%N)
+    time_needed=$((time_end - time_begin))
+    time_needed_ms=$((time_needed / 1000000))
+    step_color="\e[32m"
+    [[ ${error_code} -ne 0 ]] && step_color="\e[31m"
+    echo "$step_color> Step took ${time_needed_ms}ms" >> ${LOG_FILE}
+    echo -e "$step_color> Step took ${time_needed_ms}ms\e[0m"
+
+    if [[ ${error_code} -ne 0 ]]; then
+        handle_failure ${error_code} "$2"
+    fi
+
+    error=""
+}
+
+function handle_failure() {
+    # We cut of the nasty "node: /usr/lib/libstdc++.so.6: no version information available (required by node)" message
+    echo "--------------------------- [ERROR] ---------------------------"
+    echo "We've encountered an fatal error, which isn't recoverable!"
+    echo "                    Aborting build process!"
+    echo ""
+    echo "Exit code    : $1"
+    echo "Error message: ${*:2}"
+    if [[ ${build_verbose} -eq 0 ]] && [[ "$error" != "" ]]; then
+        echo "Command log  : (lookup \"${LOG_FILE}\" for detailed output!)"
+        echo "$error"
+    fi
+    echo "--------------------------- [ERROR] ---------------------------"
+    exit 1
+}
+
+cd "$(dirname "$0")/../../" || { echo "Failed to enter base dir"; exit 1; }
+error=""
+
+LOG_FILE="$(pwd)/$LOG_FILE"
+if [[ ! -d $(dirname "${LOG_FILE}") ]]; then
+    mkdir -p "$(dirname "${LOG_FILE}")"
+fi
+
+if [[ $# -eq 0 ]]; then
+    echo "Executing build scripts with no arguments"
+else
+    echo "Executing build scripts with arguments: $* ($#)"
+fi
+if [[ "$1" == "bash" ]]; then
+    bash
+    exit 0
+fi
+
+parse_arguments "${@:1}"
+
+if [[ -e "$LOG_FILE" ]]; then
+    rm "$LOG_FILE"
+fi
+
+echo "----------     Setup       ----------"
+chmod +x ./scripts/install_dependencies.sh
+source ./scripts/install_dependencies.sh
+
+echo "----------   Web client    ----------"
+
+function execute_build_release() {
+    execute \
+        "Building release package" \
+        "Failed to build release" \
+        "./scripts/build.sh web release"
+}
+function execute_build_debug() {
+    execute \
+        "Building debug package" \
+        "Failed to build debug" \
+        "./scripts/build.sh web dev"
+}
+
+chmod +x ./scripts/build.sh
+if [[ ${build_release} ]]; then
+    execute_build_release
+fi
+if [[ ${build_debug} ]]; then
+    execute_build_debug
+fi
+exit 0

scripts/travis/deploy_docker.sh

@@ -0,0 +1,61 @@
+#!/usr/bin/env bash
+
+cd "$(dirname "$0")/../../" || { echo "Failed to enter base dir"; exit 1; }
+source ./scripts/travis/properties.sh
+source ./scripts/helper.sh
+
+git_rev=$(git_version "short-tag")
+if [[ "$1" == "release" ]]; then
+    echo "Releasing $git_rev as release"
+    rolling_tag="latest"
+elif [[ "$1" == "development" ]]; then
+    echo "Releasing $git_rev as beta release"
+    rolling_tag="beta"
+else
+    echo "Invalid release mode"
+    exit 1
+fi
+
+# FIXME: This dosn't work anymore
+zip_file=$(find "$PACKAGES_DIRECTORY" -maxdepth 1 -name "TeaWeb-release*.zip" -print)
+[[ $(echo "$zip_file" | wc -l) -ne 1 ]] && {
+    echo "Invalid .zip file count (Expected 1 but got $(echo "$zip_file" | wc -l)): ${zip_file[*]}"
+    exit 1
+}
+[[ ! -e "$zip_file" ]] && {
+    echo "File ($zip_file) does not exists"
+    exit 1
+}
+
+git clone https://github.com/TeaSpeak/TeaDocker.git auto-build/teadocker || {
+    echo "Failed to clone the TeaDocker project"
+    exit 1
+}
+
+cp "$zip_file" auto-build/teadocker/web/TeaWeb-release.zip || {
+    echo "Failed to copy Docker webclient files to the docker files build context"
+    exit 1
+}
+
+docker build -f auto-build/teadocker/web/travis.Dockerfile --build-arg WEB_VERSION="$git_rev" --build-arg WEB_ZIP=TeaWeb-release.zip  -t teaspeak/web:"$rolling_tag" auto-build/teadocker/web || {
+    echo "Failed to build dockerfile"
+    exit 1
+}
+
+docker tag teaspeak/web:"$rolling_tag" teaspeak/web:"$git_rev" || {
+    echo "Failed to tag docker release"
+    exit 1
+}
+
+docker login -u "$DOCKERHUB_USER" -p "$DOCKERHUB_TOKEN" || {
+    echo "Failed to login to docker hub"
+    exit 1
+}
+
+docker push teaspeak/web || {
+    echo "Failed to push new teaspeak/web tags"
+    exit 1
+}
+docker logout # &> /dev/null
+
+exit 0

scripts/travis/deploy_github.sh

@@ -0,0 +1,92 @@
+#!/usr/bin/env bash
+
+cd "$(dirname "$0")/../../" || {
+  echo "Failed to enter base dir"
+  exit 1
+}
+source ./scripts/travis/properties.sh
+source ./scripts/helper.sh
+
+if [[ -z "${GIT_AUTHTOKEN}" ]]; then
+  echo "GIT_AUTHTOKEN isn't set. Don't deploying build!"
+  exit 0
+fi
+
+git_release_executable="/tmp/git-release"
+install_git_release() {
+  if [[ -x "${git_release_executable}" ]]; then
+    # File already available. No need to install it.
+    return 0
+  fi
+
+  if [[ ! -f ${git_release_executable} ]]; then
+    echo "Downloading github-release-linux (1.2.4)"
+
+    if [[ -f /tmp/git-release.gz ]]; then
+      rm /tmp/git-release.gz
+    fi
+    wget https://github.com/tfausak/github-release/releases/download/1.2.4/github-release-linux.gz -O /tmp/git-release.gz -q
+    [[ $? -eq 0 ]] || {
+      echo "Failed to download github-release-linux"
+      exit 1
+    }
+
+    gunzip /tmp/git-release.gz
+    _exit_code=$?
+    [[ $_exit_code -eq 0 ]] || {
+      echo "Failed to unzip github-release-linux"
+      exit 1
+    }
+    chmod +x /tmp/git-release
+
+    echo "Download of github-release-linux (1.2.4) finished"
+  else
+    chmod +x ${git_release_executable}
+  fi
+
+  if [[ ! -x ${git_release_executable} ]]; then
+    echo "git-release isn't executable"
+    exit 1
+  fi
+}
+install_git_release
+
+git_versions_tag=$(git_version "short-tag")
+echo "Deploying $git_versions_tag ($(git_version "long-tag")) to GitHub."
+
+echo "Generating release tag"
+${git_release_executable} release \
+    --repo "TeaWeb" \
+    --owner "TeaSpeak" \
+    --token "${GIT_AUTHTOKEN}" \
+    --title "Travis auto build $git_versions_tag" \
+    --tag "$git_versions_tag" \
+    --description "This is a auto build release from travis"
+
+[[ $? -eq 0 ]] || {
+  echo "Failed to generate git release"
+  exit 1
+}
+
+upload_package() {
+  local package_file
+  package_file=$(find_release_package "web" "$1")
+  if [[ $? -eq 0 ]]; then
+    echo "Uploading $1 package ($package_file)"
+    ${git_release_executable} upload \
+        --repo "TeaWeb" \
+        --owner "TeaSpeak" \
+        --token "${GIT_AUTHTOKEN}" \
+        --tag "$git_versions_tag" \
+        --file "$package_file" \
+        --name "$(basename "$package_file")"
+
+    echo "Successfully uploaded $1 package"
+  else
+    echo "Skipping $1 package upload: $package_file"
+  fi
+}
+
+upload_package "development"
+upload_package "release"
+exit 0

scripts/travis/deploy_server.sh

@@ -0,0 +1,51 @@
+#!/usr/bin/env bash
+
+if [[ -z "$1" ]]; then
+    echo "Missing deploy channel"
+    exit 1
+fi
+
+cd "$(dirname "$0")/../../" || {
+  echo "Failed to enter base dir"
+  exit 1
+}
+source ./scripts/travis/properties.sh
+source ./scripts/helper.sh
+
+if [[ -z "${SSH_KEY}" ]]; then
+    echo "Missing environment variable SSH_KEY. Please set it before using this script!"
+    exit 1
+fi
+echo "${SSH_KEY}" | base64 --decode > /tmp/sftp_key
+chmod 600 /tmp/sftp_key
+
+[[ $? -ne 0 ]] && {
+    echo "Failed to write SSH key"
+    exit 1
+}
+
+
+package_file=$(find_release_package "web" "release")
+if [[ $? -ne 0 ]]; then
+    echo "$package_file"
+    exit 1
+fi
+
+upload_name=$(basename "$package_file")
+ssh -oStrictHostKeyChecking=no -oIdentitiesOnly=yes -i /tmp/sftp_key TeaSpeak-Travis-Web@web.teaspeak.dev rm "tmp-upload/*.zip" # Cleanup the old files
+_exit_code=$?
+[[ $_exit_code -ne 0 ]] && {
+    echo "Failed to delete the old .zip files ($_exit_code)"
+}
+
+sftp -oStrictHostKeyChecking=no -oIdentitiesOnly=yes -i /tmp/sftp_key TeaSpeak-Travis-Web@web.teaspeak.dev << EOF
+    put $package_file tmp-upload/$upload_name
+EOF
+_exit_code=$?
+[[ $_exit_code -ne 0 ]] && {
+    echo "Failed to upload the .zip file ($_exit_code)"
+    exit 1
+}
+
+ssh -oStrictHostKeyChecking=no -oIdentitiesOnly=yes -i /tmp/sftp_key TeaSpeak-Travis-Web@web.teaspeak.dev "./unpack.sh $1 tmp-upload/$upload_name"
+exit $?

scripts/travis/properties.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+
+LOG_FILE="auto-build/logs/build.log"
+PACKAGES_DIRECTORY="auto-build/packages/"

shared/js/Bookmarks.ts

@@ -1,14 +1,14 @@
 import * as loader from "tc-loader";
-import { Stage } from "tc-loader";
-import { ignorePromise, WritableKeys } from "tc-shared/proto";
-import { LogCategory, logDebug, logError, logInfo, logTrace, logWarn } from "tc-shared/log";
-import { guid } from "tc-shared/crypto/uid";
-import { Registry } from "tc-events";
-import { server_connections } from "tc-shared/ConnectionManager";
-import { defaultConnectProfile, findConnectProfile } from "tc-shared/profiles/ConnectionProfile";
-import { ConnectionState } from "tc-shared/ConnectionHandler";
+import {Stage} from "tc-loader";
+import {ignorePromise, WritableKeys} from "tc-shared/proto";
+import {LogCategory, logDebug, logError, logInfo, logTrace, logWarn} from "tc-shared/log";
+import {guid} from "tc-shared/crypto/uid";
+import {Registry} from "tc-events";
+import {server_connections} from "tc-shared/ConnectionManager";
+import {defaultConnectProfile, findConnectProfile} from "tc-shared/profiles/ConnectionProfile";
+import {ConnectionState} from "tc-shared/ConnectionHandler";
 import * as _ from "lodash";
-import { getStorageAdapter } from "tc-shared/StorageAdapter";
+import {getStorageAdapter} from "tc-shared/StorageAdapter";
 
 type BookmarkBase = {
     readonly uniqueId: string,
@@ -64,9 +64,9 @@ export class BookmarkManager {
 
     async loadBookmarks() {
         const bookmarksJson = await getStorageAdapter().get(kStorageKey);
-        if (typeof bookmarksJson !== "string") {
+        if(typeof bookmarksJson !== "string") {
             const oldBookmarksJson = await getStorageAdapter().get("bookmarks");
-            if (typeof oldBookmarksJson === "string") {
+            if(typeof oldBookmarksJson === "string") {
                 logDebug(LogCategory.BOOKMARKS, tr("Found no new bookmarks but found old bookmarks. Trying to import."));
                 try {
                     this.importOldBookmarks(oldBookmarksJson);
@@ -83,7 +83,7 @@ export class BookmarkManager {
         } else {
             try {
                 const storageData = JSON.parse(bookmarksJson);
-                if (storageData.version !== 2) {
+                if(storageData.version !== 2) {
                     throw tr("bookmark storage has an invalid version");
                 }
 
@@ -99,7 +99,7 @@ export class BookmarkManager {
             }
         }
 
-        if (!this.defaultBookmarkCreated && this.registeredBookmarks.length === 0) {
+        if(!this.defaultBookmarkCreated && this.registeredBookmarks.length === 0) {
             this.defaultBookmarkCreated = true;
 
             logDebug(LogCategory.BOOKMARKS, tr("No bookmarks found. Registering default bookmark."));
@@ -107,12 +107,12 @@ export class BookmarkManager {
                 connectOnStartup: false,
                 connectProfile: "default",
 
-                displayName: "Our LanPart<",
+                displayName: "Official TeaSpeak - Test server",
 
                 parentEntry: undefined,
                 previousEntry: undefined,
 
-                serverAddress: "tea.lp.kle.li",
+                serverAddress: "ts.teaspeak.de",
                 serverPasswordHash: undefined,
 
                 defaultChannel: undefined,
@@ -123,21 +123,21 @@ export class BookmarkManager {
 
     private importOldBookmarks(jsonData: string) {
         const data = JSON.parse(jsonData);
-        if (typeof data?.root_bookmark !== "object") {
+        if(typeof data?.root_bookmark !== "object") {
             throw tr("missing root bookmark");
         }
 
-        if (!Array.isArray(data?.root_bookmark?.content)) {
+        if(!Array.isArray(data?.root_bookmark?.content)) {
             throw tr("Missing root bookmarks content");
         }
 
-        const registerBookmarks = (parentEntry: string, previousEntry: string, entry: any): string | undefined => {
-            if (typeof entry.display_name !== "string") {
+        const registerBookmarks = (parentEntry: string, previousEntry: string, entry: any) : string | undefined => {
+            if(typeof entry.display_name !== "string") {
                 logWarn(LogCategory.BOOKMARKS, tr("Missing display_name in old bookmark entry. Skipping entry."));
                 return undefined;
             }
 
-            if ("content" in entry) {
+            if("content" in entry) {
                 /* it was a directory */
                 const directory = this.createDirectory({
                     previousEntry,
@@ -152,23 +152,23 @@ export class BookmarkManager {
                 });
             } else {
                 /* it was a normal entry */
-                if (typeof entry.connect_profile !== "string") {
+                if(typeof entry.connect_profile !== "string") {
                     logWarn(LogCategory.BOOKMARKS, tr("Missing connect_profile in old bookmark entry. Skipping entry."));
                     return undefined;
                 }
 
-                if (typeof entry.server_properties?.server_address !== "string") {
+                if(typeof entry.server_properties?.server_address !== "string") {
                     logWarn(LogCategory.BOOKMARKS, tr("Missing server_address in old bookmark entry. Skipping entry."));
                     return undefined;
                 }
 
-                if (typeof entry.server_properties?.server_port !== "number") {
+                if(typeof entry.server_properties?.server_port !== "number") {
                     logWarn(LogCategory.BOOKMARKS, tr("Missing server_port in old bookmark entry. Skipping entry."));
                     return undefined;
                 }
 
                 let serverAddress;
-                if (entry.server_properties.server_address.indexOf(":") !== -1) {
+                if(entry.server_properties.server_address.indexOf(":") !== -1) {
                     serverAddress = `[${entry.server_properties.server_address}]`;
                 } else {
                     serverAddress = entry.server_properties.server_address;
@@ -209,23 +209,23 @@ export class BookmarkManager {
         }));
     }
 
-    getRegisteredBookmarks(): BookmarkEntry[] {
+    getRegisteredBookmarks() : BookmarkEntry[] {
         return this.registeredBookmarks;
     }
 
-    getOrderedRegisteredBookmarks(): OrderedBookmarkEntry[] {
+    getOrderedRegisteredBookmarks() : OrderedBookmarkEntry[] {
         const unorderedBookmarks = this.registeredBookmarks.slice(0);
         const orderedBookmarks: OrderedBookmarkEntry[] = [];
 
         const orderTreeLayer = (entries: BookmarkEntry[]): BookmarkEntry[] => {
-            if (entries.length === 0) {
+            if(entries.length === 0) {
                 return [];
             }
 
             const result = [];
-            while (entries.length > 0) {
+            while(entries.length > 0) {
                 let head = entries.find(entry => !entry.previousEntry) || entries[0];
-                while (head) {
+                while(head) {
                     result.push(head);
                     entries.remove(head);
                     head = entries.find(entry => entry.previousEntry === head.uniqueId);
@@ -240,7 +240,7 @@ export class BookmarkManager {
             children.forEach(child => unorderedBookmarks.remove(child));
 
             const childCount = children.length;
-            for (const entry of orderTreeLayer(children)) {
+            for(const entry of orderTreeLayer(children)) {
                 let orderedEntry: OrderedBookmarkEntry = {
                     entry: entry,
                     depth: depth,
@@ -264,11 +264,11 @@ export class BookmarkManager {
         return orderedBookmarks;
     }
 
-    findBookmark(uniqueId: string): BookmarkEntry | undefined {
+    findBookmark(uniqueId: string) : BookmarkEntry | undefined {
         return this.registeredBookmarks.find(entry => entry.uniqueId === uniqueId);
     }
 
-    createBookmark(properties: Pick<BookmarkInfo, WritableKeys<BookmarkInfo>>): BookmarkInfo {
+    createBookmark(properties: Pick<BookmarkInfo, WritableKeys<BookmarkInfo>>) : BookmarkInfo {
         this.validateHangInPoint(properties);
         const bookmark = Object.assign(properties, {
             uniqueId: guid(),
@@ -284,7 +284,7 @@ export class BookmarkManager {
         this.doEditBookmark(uniqueId, newValues);
     }
 
-    createDirectory(properties: Pick<BookmarkInfo, WritableKeys<BookmarkDirectory>>): BookmarkDirectory {
+    createDirectory(properties: Pick<BookmarkInfo, WritableKeys<BookmarkDirectory>>) : BookmarkDirectory {
         this.validateHangInPoint(properties);
         const bookmark = Object.assign(properties, {
             uniqueId: guid(),
@@ -300,20 +300,20 @@ export class BookmarkManager {
         this.doEditBookmark(uniqueId, newValues);
     }
 
-    directoryContents(uniqueId: string): BookmarkEntry[] {
+    directoryContents(uniqueId: string) : BookmarkEntry[] {
         return this.registeredBookmarks.filter(bookmark => bookmark.parentEntry === uniqueId);
     }
 
     deleteEntry(uniqueId: string) {
         const index = this.registeredBookmarks.findIndex(entry => entry.uniqueId === uniqueId);
-        if (index === -1) {
+        if(index === -1) {
             return;
         }
 
-        const [entry] = this.registeredBookmarks.splice(index, 1);
-        const children = [], pendingChildren = [entry];
+        const [ entry ] = this.registeredBookmarks.splice(index, 1);
+        const children = [], pendingChildren = [ entry ];
 
-        while (pendingChildren[0]) {
+        while(pendingChildren[0]) {
             const child = pendingChildren.pop_front();
             children.push(child);
 
@@ -329,12 +329,12 @@ export class BookmarkManager {
 
     executeConnect(uniqueId: string, newTab: boolean) {
         const bookmark = this.findBookmark(uniqueId);
-        if (!bookmark || bookmark.type !== "entry") {
+        if(!bookmark || bookmark.type !== "entry") {
             return;
         }
 
         const connection = newTab ? server_connections.spawnConnectionHandler() : server_connections.getActiveConnectionHandler();
-        if (!connection) {
+        if(!connection) {
             return;
         }
 
@@ -360,12 +360,12 @@ export class BookmarkManager {
 
     executeAutoConnect() {
         let newTab = server_connections.getActiveConnectionHandler().connection_state !== ConnectionState.UNCONNECTED;
-        for (const entry of this.getOrderedRegisteredBookmarks()) {
-            if (entry.entry.type !== "entry") {
+        for(const entry of this.getOrderedRegisteredBookmarks()) {
+            if(entry.entry.type !== "entry") {
                 continue;
             }
 
-            if (!entry.entry.connectOnStartup) {
+            if(!entry.entry.connectOnStartup) {
                 continue;
             }
 
@@ -374,14 +374,14 @@ export class BookmarkManager {
         }
     }
 
-    exportBookmarks(): string {
+    exportBookmarks() : string {
         return JSON.stringify({
             version: 1,
             bookmarks: this.registeredBookmarks
         });
     }
 
-    importBookmarks(filePayload: string): number {
+    importBookmarks(filePayload: string) : number {
         let data;
         try {
             data = JSON.parse(filePayload)
@@ -389,26 +389,26 @@ export class BookmarkManager {
             throw tr("failed to parse bookmarks");
         }
 
-        if (data?.version !== 1) {
+        if(data?.version !== 1) {
             throw tr("supplied data contains invalid version");
         }
 
         const newBookmarks = data.bookmarks as BookmarkEntry[];
-        if (!Array.isArray(newBookmarks)) {
+        if(!Array.isArray(newBookmarks)) {
             throw tr("missing bookmarks");
         }
 
         /* TODO: Validate integrity? */
-        for (const knownBookmark of this.registeredBookmarks) {
+        for(const knownBookmark of this.registeredBookmarks) {
             const index = newBookmarks.findIndex(entry => entry.uniqueId === knownBookmark.uniqueId);
-            if (index === -1) {
+            if(index === -1) {
                 continue;
             }
 
             newBookmarks.splice(index, 1);
         }
 
-        if (newBookmarks.length === 0) {
+        if(newBookmarks.length === 0) {
             return;
         }
 
@@ -420,26 +420,26 @@ export class BookmarkManager {
 
     private doEditBookmark(uniqueId: string, newValues: any) {
         const bookmarkInfo = this.findBookmark(uniqueId);
-        if (!bookmarkInfo) {
+        if(!bookmarkInfo) {
             return;
         }
 
         const originalProperties = _.cloneDeep(bookmarkInfo);
-        for (const key of Object.keys(newValues)) {
+        for(const key of Object.keys(newValues)) {
             bookmarkInfo[key] = newValues[key];
         }
         this.validateHangInPoint(bookmarkInfo);
 
         const editedKeys = [];
-        for (const key of Object.keys(newValues)) {
-            if (_.isEqual(bookmarkInfo[key], originalProperties[key])) {
+        for(const key of Object.keys(newValues)) {
+            if(_.isEqual(bookmarkInfo[key], originalProperties[key])) {
                 continue;
             }
 
             editedKeys.push(key);
         }
 
-        if (editedKeys.length === 0) {
+        if(editedKeys.length === 0) {
             return;
         }
 
@@ -448,12 +448,12 @@ export class BookmarkManager {
     }
 
     private validateHangInPoint(entry: Partial<BookmarkBase>) {
-        if (entry.previousEntry) {
+        if(entry.previousEntry) {
             const previousEntry = this.findBookmark(entry.previousEntry);
-            if (!previousEntry) {
+            if(!previousEntry) {
                 logError(LogCategory.BOOKMARKS, tr("New bookmark previous entry does not exists. Clearing it."));
                 entry.previousEntry = undefined;
-            } else if (previousEntry.parentEntry !== entry.parentEntry) {
+            } else if(previousEntry.parentEntry !== entry.parentEntry) {
                 logWarn(LogCategory.BOOKMARKS, tr("Previous entries parent does not match our entries parent. Updating our parent from %s to %s"), entry.parentEntry, previousEntry.parentEntry);
                 entry.parentEntry = previousEntry.parentEntry;
             }
@@ -461,13 +461,13 @@ export class BookmarkManager {
 
             const openList = this.registeredBookmarks.filter(e1 => e1.parentEntry === entry.parentEntry);
             let currentEntry = entry;
-            while (true) {
-                if (!currentEntry.previousEntry) {
+            while(true) {
+                if(!currentEntry.previousEntry) {
                     break;
                 }
 
                 const previousEntry = openList.find(entry => entry.uniqueId === currentEntry.previousEntry);
-                if (!previousEntry) {
+                if(!previousEntry) {
                     logError(LogCategory.BOOKMARKS, tr("Found circular dependency within the previous entry or one of the previous entries does not exists. Clearing out previous entry."));
                     entry.previousEntry = undefined;
                     break;
@@ -478,22 +478,22 @@ export class BookmarkManager {
             }
         }
 
-        if (entry.parentEntry) {
+        if(entry.parentEntry) {
             const parentEntry = this.findBookmark(entry.parentEntry);
-            if (!parentEntry) {
+            if(!parentEntry) {
                 logError(LogCategory.BOOKMARKS, tr("Missing parent entry %s. Clearing it."), entry.parentEntry);
                 entry.parentEntry = undefined;
             }
 
             const openList = this.registeredBookmarks.slice();
             let currentEntry = entry;
-            while (true) {
-                if (!currentEntry.parentEntry) {
+            while(true) {
+                if(!currentEntry.parentEntry) {
                     break;
                 }
 
                 const parentEntry = openList.find(entry => entry.uniqueId === currentEntry.parentEntry);
-                if (!parentEntry) {
+                if(!parentEntry) {
                     logError(LogCategory.BOOKMARKS, tr("Found circular dependency within a parent or one of the parents does not exists. Clearing out parent."));
                     entry.parentEntry = undefined;
                     break;
@@ -504,9 +504,9 @@ export class BookmarkManager {
             }
         }
 
-        if (entry.previousEntry) {
+        if(entry.previousEntry) {
             this.registeredBookmarks.forEach(bookmark => {
-                if (bookmark.previousEntry === entry.previousEntry && bookmark !== entry) {
+                if(bookmark.previousEntry === entry.previousEntry && bookmark !== entry) {
                     bookmark.previousEntry = bookmark.uniqueId;
                 }
             });

shared/js/connection/rtc/Connection.ts

@@ -895,7 +895,7 @@ export class RTCConnection {
         this.peer = new RTCPeerConnection({
             bundlePolicy: "max-bundle",
             rtcpMuxPolicy: "require",
-            iceServers: [{ urls: ["stun:turn.lp.kle.li:3478"] }]
+            iceServers: [{ urls: ["stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302"] }]
         });
 
         if (this.audioSupport) {

shared/js/settings.ts

@@ -1,10 +1,10 @@
-import { LogCategory, logError, logInfo, logTrace } from "./log";
+import {LogCategory, logError, logInfo, logTrace} from "./log";
 import * as loader from "tc-loader";
-import { Stage } from "tc-loader";
-import { Registry } from "./events";
-import { tr } from "./i18n/localize";
-import { CallOnce, ignorePromise } from "tc-shared/proto";
-import { getStorageAdapter } from "tc-shared/StorageAdapter";
+import {Stage} from "tc-loader";
+import {Registry} from "./events";
+import {tr} from "./i18n/localize";
+import {CallOnce, ignorePromise} from "tc-shared/proto";
+import {getStorageAdapter} from "tc-shared/StorageAdapter";
 
 /*
  * TODO: Sync settings across renderer instances
@@ -14,17 +14,17 @@ export type RegistryValueType = boolean | number | string | object;
 export type RegistryValueTypeNames = "boolean" | "number" | "string" | "object";
 
 export type RegistryValueTypeMapping<T> = T extends boolean ? "boolean" :
-    T extends number ? "number" :
-    T extends string ? "string" :
-    T extends object ? "object" :
-    never;
+                                  T extends number ? "number" :
+                                  T extends string ? "string" :
+                                  T extends object ? "object" :
+                                  never;
 
 export interface RegistryKey<ValueType extends RegistryValueType> {
     key: string;
     valueType: RegistryValueTypeMapping<ValueType>;
 
     fallbackKeys?: string | string[];
-    fallbackImports?: { [key: string]: (value: string) => ValueType };
+    fallbackImports?: {[key: string]:(value: string) => ValueType};
 
     description?: string;
 
@@ -37,7 +37,7 @@ export interface ValuedRegistryKey<ValueType extends RegistryValueType> extends
 
 const UPDATE_DIRECT: boolean = true;
 
-function decodeValueFromString<T extends RegistryValueType>(input: string, type: RegistryValueTypeMapping<T>): T {
+function decodeValueFromString<T extends RegistryValueType>(input: string, type: RegistryValueTypeMapping<T>) : T {
     switch (type) {
         case "string":
             return input as any;
@@ -60,7 +60,7 @@ function decodeValueFromString<T extends RegistryValueType>(input: string, type:
     }
 }
 
-export function encodeSettingValueToString<T extends RegistryValueType>(input: T): string {
+export function encodeSettingValueToString<T extends RegistryValueType>(input: T) : string {
     switch (typeof input) {
         case "string":
             return input;
@@ -83,24 +83,24 @@ export function resolveSettingKey<ValueType extends RegistryValueType, DefaultTy
     key: RegistryKey<ValueType>,
     resolver: (key: string) => string | undefined | null,
     defaultValue: DefaultType
-): ValueType | DefaultType {
+) : ValueType | DefaultType {
     let value = resolver(key.key);
 
     const keys = [key.key];
-    if (Array.isArray(key.fallbackKeys)) {
+    if(Array.isArray(key.fallbackKeys)) {
         keys.push(...key.fallbackKeys);
     }
 
-    for (const resolveKey of keys) {
+    for(const resolveKey of keys) {
         value = resolver(resolveKey);
-        if (typeof value !== "string") {
+        if(typeof value !== "string") {
             continue;
         }
 
         switch (key.valueType) {
             case "number":
             case "boolean":
-                if (value.length === 0) {
+                if(value.length === 0) {
                     continue;
                 }
                 break;
@@ -109,9 +109,9 @@ export function resolveSettingKey<ValueType extends RegistryValueType, DefaultTy
                 break;
         }
 
-        if (key.fallbackImports) {
+        if(key.fallbackImports) {
             const fallbackValueImporter = key.fallbackImports[resolveKey];
-            if (fallbackValueImporter) {
+            if(fallbackValueImporter) {
                 return fallbackValueImporter(value);
             }
         }
@@ -129,21 +129,21 @@ export class UrlParameterParser {
         this.url = url;
     }
 
-    private getParameter(key: string): string | undefined {
+    private getParameter(key: string) : string | undefined {
         const value = this.url.searchParams.get(key);
-        if (value === null) {
+        if(value === null) {
             return undefined;
         }
 
         return decodeURIComponent(value);
     }
 
-    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V>, defaultValue: DV): V | DV;
-    getValue<V extends RegistryValueType>(key: ValuedRegistryKey<V>, defaultValue?: V): V;
-    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V> | ValuedRegistryKey<V>, defaultValue: DV): V | DV {
-        if (arguments.length > 1) {
+    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V>, defaultValue: DV) : V | DV;
+    getValue<V extends RegistryValueType>(key: ValuedRegistryKey<V>, defaultValue?: V) : V;
+    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V> | ValuedRegistryKey<V>, defaultValue: DV) : V | DV {
+        if(arguments.length > 1) {
             return resolveSettingKey(key, key => this.getParameter(key), defaultValue);
-        } else if ("defaultValue" in key) {
+        } else if("defaultValue" in key) {
             return resolveSettingKey(key, key => this.getParameter(key), key.defaultValue);
         } else {
             throw tr("missing value");
@@ -155,14 +155,14 @@ export class UrlParameterBuilder {
     private parameters = {};
 
     setValue<V extends RegistryValueType>(key: RegistryKey<V>, value: V) {
-        if (value === undefined) {
+        if(value === undefined) {
             delete this.parameters[key.key];
         } else {
             this.parameters[key.key] = encodeURIComponent(encodeSettingValueToString(value));
         }
     }
 
-    build(): string {
+    build() : string {
         return Object.keys(this.parameters).map(key => `${key}=${this.parameters[key]}`).join("&");
     }
 }
@@ -174,12 +174,12 @@ export class UrlParameterBuilder {
 export namespace AppParameters {
     export const Instance = new UrlParameterParser(new URL(window.location.href));
 
-    export function getValue<V extends RegistryValueType, DV>(key: RegistryKey<V>, defaultValue: DV): V | DV;
-    export function getValue<V extends RegistryValueType>(key: ValuedRegistryKey<V>, defaultValue?: V): V;
-    export function getValue<V extends RegistryValueType, DV>(key: RegistryKey<V> | ValuedRegistryKey<V>, defaultValue: DV): V | DV {
-        if (arguments.length > 1) {
+    export function getValue<V extends RegistryValueType, DV>(key: RegistryKey<V>, defaultValue: DV) : V | DV;
+    export function getValue<V extends RegistryValueType>(key: ValuedRegistryKey<V>, defaultValue?: V) : V;
+    export function getValue<V extends RegistryValueType, DV>(key: RegistryKey<V> | ValuedRegistryKey<V>, defaultValue: DV) : V | DV {
+        if(arguments.length > 1) {
             return Instance.getValue(key, defaultValue);
-        } else if ("defaultValue" in key) {
+        } else if("defaultValue" in key) {
             return Instance.getValue(key);
         } else {
             throw tr("missing value");
@@ -364,7 +364,7 @@ export class Settings {
     static readonly KEY_I18N_DEFAULT_REPOSITORY: ValuedRegistryKey<string> = {
         key: "i18n.default_repository",
         valueType: "string",
-        defaultValue: "i18n/"
+        defaultValue: "https://web.teaspeak.de/i18n/"
     };
 
     /* Default client states */
@@ -408,12 +408,12 @@ export class Settings {
     static readonly KEY_FLAG_CONNECT_DEFAULT: ValuedRegistryKey<boolean> = {
         key: "connect_default",
         valueType: "boolean",
-        defaultValue: true
+        defaultValue: false
     };
     static readonly KEY_CONNECT_ADDRESS: ValuedRegistryKey<string> = {
         key: "connect_address",
         valueType: "string",
-        defaultValue: "tea.lp.kle.li"
+        defaultValue: undefined
     };
     static readonly KEY_CONNECT_PROFILE: ValuedRegistryKey<string> = {
         key: "connect_profile",
@@ -448,7 +448,7 @@ export class Settings {
 
     static readonly KEY_CONNECT_NO_DNSPROXY: ValuedRegistryKey<boolean> = {
         key: "connect_no_dnsproxy",
-        defaultValue: true,
+        defaultValue: false,
         valueType: "boolean",
     };
 
@@ -616,7 +616,7 @@ export class Settings {
         /* defaultValue: <users download directory> */
     };
 
-    static readonly KEY_IPC_REMOTE_ADDRESS: RegistryKey<string> = {
+    static readonly  KEY_IPC_REMOTE_ADDRESS: RegistryKey<string> = {
         key: "ipc-address",
         valueType: "string"
     };
@@ -913,8 +913,8 @@ export class Settings {
     static readonly KEYS = (() => {
         const result = [];
 
-        for (const key of Object.keys(Settings)) {
-            if (!key.toUpperCase().startsWith("KEY_")) {
+        for(const key of Object.keys(Settings)) {
+            if(!key.toUpperCase().startsWith("KEY_")) {
                 continue;
             }
 
@@ -943,13 +943,13 @@ export class Settings {
         const json = await getStorageAdapter().get("settings.global");
 
         try {
-            if (json === null) {
+            if(json === null) {
                 logInfo(LogCategory.GENERAL, tr("Found no settings. Creating new client settings."));
                 this.settingsCache = {};
             } else {
                 this.settingsCache = JSON.parse(json);
             }
-        } catch (error) {
+        } catch(error) {
             this.settingsCache = {};
             logError(LogCategory.GENERAL, tr("Failed to load global settings!\nJson: %s\nError: %o"), json, error);
 
@@ -957,7 +957,7 @@ export class Settings {
                 //FIXME: Readd this
                 //createErrorModal(tr("Failed to load global settings"), tr("Failed to load global client settings!\nLookup console for more information.")).open();
             };
-            if (!loader.finished()) {
+            if(!loader.finished()) {
                 loader.register_task(loader.Stage.LOADED, {
                     priority: 0,
                     name: "Settings error",
@@ -969,18 +969,18 @@ export class Settings {
         }
 
         this.saveWorker = setInterval(() => {
-            if (this.updated) {
+            if(this.updated) {
                 this.save();
             }
         }, 5 * 1000);
     }
 
-    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V>, defaultValue: DV): V | DV;
-    getValue<V extends RegistryValueType>(key: ValuedRegistryKey<V>, defaultValue?: V): V;
-    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V> | ValuedRegistryKey<V>, defaultValue: DV): V | DV {
-        if (arguments.length > 1) {
+    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V>, defaultValue: DV) : V | DV;
+    getValue<V extends RegistryValueType>(key: ValuedRegistryKey<V>, defaultValue?: V) : V;
+    getValue<V extends RegistryValueType, DV>(key: RegistryKey<V> | ValuedRegistryKey<V>, defaultValue: DV) : V | DV {
+        if(arguments.length > 1) {
             return resolveSettingKey(key, key => this.settingsCache[key], defaultValue);
-        } else if ("defaultValue" in key) {
+        } else if("defaultValue" in key) {
             return resolveSettingKey(key, key => this.settingsCache[key], key.defaultValue);
         } else {
             debugger;
@@ -988,17 +988,17 @@ export class Settings {
         }
     }
 
-    setValue<T extends RegistryValueType>(key: RegistryKey<T>, value?: T) {
-        if (value === null) {
+    setValue<T extends RegistryValueType>(key: RegistryKey<T>, value?: T){
+        if(value === null) {
             value = undefined;
         }
 
-        if (this.settingsCache[key.key] === value) {
+        if(this.settingsCache[key.key] === value) {
             return;
         }
 
         const oldValue = this.settingsCache[key.key];
-        if (value === undefined) {
+        if(value === undefined) {
             delete this.settingsCache[key.key];
         } else {
             this.settingsCache[key.key] = encodeSettingValueToString(value);
@@ -1014,21 +1014,21 @@ export class Settings {
         });
         logTrace(LogCategory.GENERAL, tr("Changing global setting %s to %o"), key.key, value);
 
-        if (UPDATE_DIRECT) {
+        if(UPDATE_DIRECT) {
             this.save();
         }
     }
 
-    globalChangeListener<T extends RegistryValueType>(key: RegistryKey<T>, listener: (newValue: T) => void): () => void {
+    globalChangeListener<T extends RegistryValueType>(key: RegistryKey<T>, listener: (newValue: T) => void) : () => void {
         return this.events.on("notify_setting_changed", event => {
-            if (event.setting === key.key && event.mode === "global") {
+            if(event.setting === key.key && event.mode === "global") {
                 listener(event.newCastedValue);
             }
         })
     }
 
     private async doSave() {
-        if (this.saveState === "none") {
+        if(this.saveState === "none") {
             return;
         }
 
@@ -1040,7 +1040,7 @@ export class Settings {
             } catch (error) {
                 logError(LogCategory.GENERAL, tr("Failed to save global settings: %o"), error);
             }
-        } while (this.saveState !== "saving");
+        } while(this.saveState !== "saving");
 
         this.saveState = "none";
     }

shared/js/ui/modal/connect/Controller.ts

@@ -1,25 +1,25 @@
-import { Registry } from "tc-shared/events";
+import {Registry} from "tc-shared/events";
 import {
     ConnectUiEvents,
     ConnectUiVariables,
 } from "tc-shared/ui/modal/connect/Definitions";
-import { LogCategory, logError, logWarn } from "tc-shared/log";
+import {LogCategory, logError, logWarn} from "tc-shared/log";
 import {
     availableConnectProfiles,
     ConnectionProfile,
     defaultConnectProfile,
     findConnectProfile
 } from "tc-shared/profiles/ConnectionProfile";
-import { Settings, settings } from "tc-shared/settings";
-import { connectionHistory, ConnectionHistoryEntry } from "tc-shared/connectionlog/History";
-import { createErrorModal } from "tc-shared/ui/elements/Modal";
-import { ConnectionHandler } from "tc-shared/ConnectionHandler";
-import { server_connections } from "tc-shared/ConnectionManager";
-import { parseServerAddress } from "tc-shared/tree/Server";
-import { spawnSettingsModal } from "tc-shared/ui/modal/ModalSettings";
-import { UiVariableProvider } from "tc-shared/ui/utils/Variable";
-import { createIpcUiVariableProvider } from "tc-shared/ui/utils/IpcVariable";
-import { spawnModal } from "tc-shared/ui/react-elements/modal";
+import {Settings, settings} from "tc-shared/settings";
+import {connectionHistory, ConnectionHistoryEntry} from "tc-shared/connectionlog/History";
+import {createErrorModal} from "tc-shared/ui/elements/Modal";
+import {ConnectionHandler} from "tc-shared/ConnectionHandler";
+import {server_connections} from "tc-shared/ConnectionManager";
+import {parseServerAddress} from "tc-shared/tree/Server";
+import {spawnSettingsModal} from "tc-shared/ui/modal/ModalSettings";
+import {UiVariableProvider} from "tc-shared/ui/utils/Variable";
+import {createIpcUiVariableProvider} from "tc-shared/ui/utils/IpcVariable";
+import {spawnModal} from "tc-shared/ui/react-elements/modal";
 import ipRegex from "ip-regex";
 
 const kRegexDomain = /^(localhost|((([a-zA-Z0-9_-]{0,63}\.){0,253})?[a-zA-Z0-9_-]{0,63}\.[a-zA-Z]{2,64}))$/i;
@@ -61,8 +61,7 @@ class ConnectController {
     private validateNickname: boolean;
     private validateAddress: boolean;
 
-    constructor(uiVariables: UiVariableProvider<ConnectUiVariables>) {
-        7
+    constructor(uiVariables: UiVariableProvider<ConnectUiVariables>) {7
         this.uiEvents = new Registry<ConnectUiEvents>();
         this.uiEvents.enableDebug("modal-connect");
 
@@ -72,7 +71,7 @@ class ConnectController {
         this.validateNickname = false;
         this.validateAddress = false;
 
-        this.defaultAddress = "tea.lp.kle.li";
+        this.defaultAddress = "ts.teaspeak.de";
         this.historyShown = settings.getValue(Settings.KEY_CONNECT_SHOW_HISTORY);
 
         this.currentAddress = settings.getValue(Settings.KEY_CONNECT_ADDRESS);
@@ -110,11 +109,11 @@ class ConnectController {
         }));
 
         this.uiVariables.setVariableProvider("server_address_valid", () => {
-            if (this.validateAddress) {
+            if(this.validateAddress) {
                 const address = this.currentAddress || this.defaultAddress || "";
                 const parsedAddress = parseServerAddress(address);
 
-                if (parsedAddress) {
+                if(parsedAddress) {
                     kRegexDomain.lastIndex = 0;
                     return kRegexDomain.test(parsedAddress.host) || ipRegex({ exact: true }).test(parsedAddress.host);
                 } else {
@@ -126,7 +125,7 @@ class ConnectController {
         });
 
         this.uiVariables.setVariableEditor("server_address", newValue => {
-            if (this.currentAddress === newValue.currentAddress) {
+            if(this.currentAddress === newValue.currentAddress) {
                 return false;
             }
 
@@ -140,7 +139,7 @@ class ConnectController {
         }));
 
         this.uiVariables.setVariableProvider("nickname_valid", () => {
-            if (this.validateNickname) {
+            if(this.validateNickname) {
                 const nickname = this.currentNickname || this.currentProfile?.connectUsername() || "";
                 return nickname.length >= 3 && nickname.length <= 30;
             } else {
@@ -149,7 +148,7 @@ class ConnectController {
         });
 
         this.uiVariables.setVariableEditor("nickname", newValue => {
-            if (this.currentNickname === newValue.currentNickname) {
+            if(this.currentNickname === newValue.currentNickname) {
                 return false;
             }
 
@@ -167,7 +166,7 @@ class ConnectController {
         }));
 
         this.uiVariables.setVariableEditor("password", newValue => {
-            if (this.currentPassword === newValue.password) {
+            if(this.currentPassword === newValue.password) {
                 return false;
             }
 
@@ -180,7 +179,7 @@ class ConnectController {
 
         this.uiVariables.setVariableProvider("historyShown", () => this.historyShown);
         this.uiVariables.setVariableEditor("historyShown", newValue => {
-            if (this.historyShown === newValue) {
+            if(this.historyShown === newValue) {
                 return false;
             }
 
@@ -189,8 +188,8 @@ class ConnectController {
             return true;
         });
 
-        this.uiVariables.setVariableProvider("history", async () => {
-            if (!this.history) {
+        this.uiVariables.setVariableProvider("history",async () => {
+            if(!this.history) {
                 this.history = await connectionHistory.lastConnectedServers(10);
             }
 
@@ -238,7 +237,7 @@ class ConnectController {
 
         this.uiVariables.setVariableEditor("profiles", newValue => {
             const profile = findConnectProfile(newValue.selected);
-            if (!profile) {
+            if(!profile) {
                 createErrorModal(tr("Invalid profile"), tr("Target connect profile is missing.")).open();
                 return false;
             }
@@ -253,16 +252,16 @@ class ConnectController {
         this.uiVariables.destroy();
     }
 
-    generateConnectParameters(): ConnectParameters | undefined {
-        if (!this.uiVariables.getVariableSync("nickname_valid", undefined, true)) {
+    generateConnectParameters() : ConnectParameters | undefined {
+        if(!this.uiVariables.getVariableSync("nickname_valid", undefined, true)) {
             return undefined;
         }
 
-        if (!this.uiVariables.getVariableSync("server_address_valid", undefined, true)) {
+        if(!this.uiVariables.getVariableSync("server_address_valid", undefined, true)) {
             return undefined;
         }
 
-        if (!this.uiVariables.getVariableSync("profile_valid", undefined, true)) {
+        if(!this.uiVariables.getVariableSync("profile_valid", undefined, true)) {
             return undefined;
         }
 
@@ -280,7 +279,7 @@ class ConnectController {
     }
 
     setSelectedHistoryId(id: number | -1) {
-        if (this.selectedHistoryId === id) {
+        if(this.selectedHistoryId === id) {
             return;
         }
 
@@ -288,7 +287,7 @@ class ConnectController {
         this.uiVariables.sendVariable("history");
 
         const historyEntry = this.history?.find(entry => entry.id === id);
-        if (!historyEntry) { return; }
+        if(!historyEntry) { return; }
 
         this.currentAddress = historyEntry.targetAddress;
         this.currentNickname = historyEntry.nickname;
@@ -301,12 +300,12 @@ class ConnectController {
     }
 
     setSelectedAddress(address: string | undefined, validate: boolean, updateUi: boolean) {
-        if (this.currentAddress !== address) {
+        if(this.currentAddress !== address) {
             this.currentAddress = address;
             settings.setValue(Settings.KEY_CONNECT_ADDRESS, address);
             this.setSelectedHistoryId(-1);
 
-            if (updateUi) {
+            if(updateUi) {
                 this.uiVariables.sendVariable("server_address");
             }
         }
@@ -316,7 +315,7 @@ class ConnectController {
     }
 
     setSelectedProfile(profile: ConnectionProfile | undefined) {
-        if (this.currentProfile === profile) {
+        if(this.currentProfile === profile) {
             return;
         }
 
@@ -348,11 +347,11 @@ export function spawnConnectModalNew(options: ConnectModalOptions) {
     const variableProvider = createIpcUiVariableProvider();
     const controller = new ConnectController(variableProvider);
 
-    if (typeof options.selectedAddress === "string") {
+    if(typeof options.selectedAddress === "string") {
         controller.setSelectedAddress(options.selectedAddress, false, true);
     }
 
-    if (typeof options.selectedProfile === "object") {
+    if(typeof options.selectedProfile === "object") {
         controller.setSelectedProfile(options.selectedProfile);
     }
 
@@ -364,7 +363,7 @@ export function spawnConnectModalNew(options: ConnectModalOptions) {
 
     controller.uiEvents.on("action_connect", event => {
         const parameters = controller.generateConnectParameters();
-        if (!parameters) {
+        if(!parameters) {
             /* invalid parameters detected */
             return;
         }
@@ -372,14 +371,14 @@ export function spawnConnectModalNew(options: ConnectModalOptions) {
         modal.destroy();
 
         let connection: ConnectionHandler;
-        if (event.newTab) {
+        if(event.newTab) {
             connection = server_connections.spawnConnectionHandler();
             server_connections.setActiveConnectionHandler(connection);
         } else {
             connection = server_connections.getActiveConnectionHandler();
         }
 
-        if (!connection) {
+        if(!connection) {
             return;
         }
 

shared/js/ui/react-elements/ChatBox.tsx

@@ -1,16 +1,14 @@
 import * as React from "react";
-import { useEffect, useRef, useState } from "react";
-import { Registry } from "tc-shared/events";
-
-import { settings, Settings } from "tc-shared/settings";
-import { Translatable } from "tc-shared/ui/react-elements/i18n";
-
-import Picker from '@emoji-mart/react'
-import data from '@emoji-mart/data'
-import { Emoji, init } from "emoji-mart";
-
-init({ data })
+import {useEffect, useRef, useState} from "react";
+import {Registry} from "tc-shared/events";
 
+import '!style-loader!css-loader!emoji-mart/css/emoji-mart.css'
+import {Picker, emojiIndex} from 'emoji-mart'
+import {settings, Settings} from "tc-shared/settings";
+import {Translatable} from "tc-shared/ui/react-elements/i18n";
+import {getTwenmojiHashFromNativeEmoji} from "tc-shared/text/bbcode/EmojiUtil";
+import {BaseEmoji} from "emoji-mart";
+import {useGlobalSetting} from "tc-shared/ui/react-elements/Helper";
 
 const cssStyle = require("./ChatBox.scss");
 
@@ -30,26 +28,34 @@ interface ChatBoxEvents {
 }
 
 const LastUsedEmoji = () => {
-    return <img key={"fallback"} alt={""} src={"img/smiley.png"} />;
+    const settingValue = useGlobalSetting(Settings.KEY_CHAT_LAST_USED_EMOJI);
+    const lastEmoji: BaseEmoji = (emojiIndex.emojis[settingValue] || emojiIndex.emojis["joy"]) as any;
+    if(!lastEmoji?.native) {
+        return <img key={"fallback"} alt={""} src={"img/smiley-smile.svg"} />;
+    }
+
+    return (
+        <img draggable={false} src={"https://twemoji.maxcdn.com/v/12.1.2/72x72/" + getTwenmojiHashFromNativeEmoji(lastEmoji.native) + ".png"} alt={lastEmoji.native} className={cssStyle.emoji} />
+    )
 }
 
 const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
-    const [shown, setShown] = useState(false);
-    const [enabled, setEnabled] = useState(false);
+    const [ shown, setShown ] = useState(false);
+    const [ enabled, setEnabled ] = useState(false);
 
     const refContainer = useRef();
 
     useEffect(() => {
-        if (!shown) {
+        if(!shown) {
             return;
         }
 
         const clickListener = (event: MouseEvent) => {
             let target = event.target as HTMLElement;
-            while (target && target !== refContainer.current)
+            while(target && target !== refContainer.current)
                 target = target.parentElement;
 
-            if (target === refContainer.current && target)
+            if(target === refContainer.current && target)
                 return;
 
             setShown(false);
@@ -70,21 +76,22 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
             <div className={cssStyle.picker} style={{ display: shown ? undefined : "none" }}>
                 {!shown ? undefined :
                     <Picker
-                        data={data}
                         key={"picker"}
-                        set={"native"}
-                        noCountryFlags={true}
+                        set={"twitter"}
+                        theme={"light"}
                         showPreview={true}
                         title={""}
-                        skinTonePosition={"none"}
+                        showSkinTones={true}
+                        useButton={false}
+                        native={false}
 
-                        onEmojiSelect={(emoji: any) => {
-                            if (enabled) {
+                        onSelect={(emoji: any) => {
+                            if(enabled) {
+                                settings.setValue(Settings.KEY_CHAT_LAST_USED_EMOJI, emoji.id as string);
                                 props.events.fire("action_insert_text", { text: emoji.native, focus: true });
                             }
                         }}
                     />
-
                 }
             </div>
         </div>
@@ -94,27 +101,27 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
 const pasteTextTransformElement = document.createElement("div");
 
 const nodeToText = (element: Node) => {
-    if (element instanceof Text) {
+    if(element instanceof Text) {
         return element.textContent;
-    } else if (element instanceof HTMLElement) {
-        if (element instanceof HTMLImageElement) {
+    } else if(element instanceof HTMLElement) {
+        if(element instanceof HTMLImageElement) {
             return element.alt || element.title;
-        } else if (element instanceof HTMLBRElement) {
+        } else if(element instanceof HTMLBRElement) {
             return '\n';
-        } else if (element instanceof HTMLAnchorElement) {
+        } else if(element instanceof HTMLAnchorElement) {
             const content = [...element.childNodes].map(nodeToText).join("");
 
-            if (element.href) {
-                if (settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
-                    if (content && element.title) {
+            if(element.href) {
+                if(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
+                    if(content && element.title) {
                         return `[${content}](${element.href} "${element.title}")`;
-                    } else if (content) {
+                    } else if(content) {
                         return `[${content}](${element.href})`;
                     } else {
                         return `[${element.href}](${element.href})`;
                     }
-                } else if (settings.getValue(Settings.KEY_CHAT_ENABLE_BBCODE)) {
-                    if (content) {
+                } else if(settings.getValue(Settings.KEY_CHAT_ENABLE_BBCODE)) {
+                    if(content) {
                         return `[url=${element.href}]${content}"[/url]`;
                     } else {
                         return `[url]${element.href}"[/url]`;
@@ -127,11 +134,11 @@ const nodeToText = (element: Node) => {
             }
         }
 
-        if (element.children.length > 0) {
+        if(element.children.length > 0) {
             return [...element.childNodes].map(nodeToText).join("");
         }
 
-        return typeof (element.innerText) === "string" ? element.innerText : "";
+        return typeof(element.innerText) === "string" ? element.innerText : "";
     } else {
         return "";
     }
@@ -139,19 +146,19 @@ const nodeToText = (element: Node) => {
 
 const htmlEscape = (message: string) => {
     pasteTextTransformElement.innerText = message;
-    message = pasteTextTransformElement.innerHTML;
+    message =  pasteTextTransformElement.innerHTML;
     return message.replace(/ /g, '&nbsp;');
 };
 
 const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean, placeholder?: string }) => {
-    const [enabled, setEnabled] = useState(!!props.enabled);
-    const [historyIndex, setHistoryIndex] = useState(-1);
+    const [ enabled, setEnabled ] = useState(!!props.enabled);
+    const [ historyIndex, setHistoryIndex ] = useState(-1);
     const history = useRef([]);
     const refInput = useRef<HTMLInputElement>();
     const typingTimeout = useRef(undefined);
 
     const triggerTyping = () => {
-        if (typeof typingTimeout.current === "number")
+        if(typeof typingTimeout.current === "number")
             return;
 
         props.events.fire("notify_typing");
@@ -175,7 +182,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
         event.preventDefault();
 
         const clipboard = event.clipboardData || (window as any).clipboardData;
-        if (!clipboard) return;
+        if(!clipboard) return;
 
         const rawText = clipboard.getData('text/plain');
         const selection = window.getSelection();
@@ -184,7 +191,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
         }
 
         let htmlXML = clipboard.getData('text/html');
-        if (!htmlXML) {
+        if(!htmlXML) {
             pasteTextTransformElement.textContent = rawText;
             htmlXML = pasteTextTransformElement.innerHTML;
         }
@@ -228,33 +235,33 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
         triggerTyping();
 
         const inputEmpty = refInput.current.innerText.trim().length === 0;
-        if (event.key === "Enter" && !event.shiftKey) {
-            if (inputEmpty) {
+        if(event.key === "Enter" && !event.shiftKey) {
+            if(inputEmpty) {
                 return;
             }
 
             const text = refInput.current.innerText;
             props.events.fire("action_submit_message", { message: text });
             history.current.push(text);
-            while (history.current.length > 10) {
+            while(history.current.length > 10) {
                 history.current.pop_front();
             }
 
             refInput.current.innerText = "";
             setHistoryIndex(-1);
             event.preventDefault();
-        } else if (event.key === "ArrowUp") {
+        } else if(event.key === "ArrowUp") {
             const inputOriginal = history.current[historyIndex] === refInput.current.innerText;
-            if (inputEmpty && (historyIndex === -1 || !inputOriginal)) {
+            if(inputEmpty && (historyIndex === -1 || !inputOriginal)) {
                 setHistory(history.current.length - 1);
                 event.preventDefault();
-            } else if (historyIndex > 0 && inputOriginal) {
+            } else if(historyIndex > 0 && inputOriginal) {
                 setHistory(historyIndex - 1);
                 event.preventDefault();
             }
-        } else if (event.key === "ArrowDown") {
-            if (history.current[historyIndex] === refInput.current.innerText) {
-                if (historyIndex < history.current.length - 1) {
+        } else if(event.key === "ArrowDown") {
+            if(history.current[historyIndex] === refInput.current.innerText) {
+                if(historyIndex < history.current.length - 1) {
                     setHistory(historyIndex + 1);
                 } else {
                     setHistory(-1);
@@ -266,7 +273,7 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
 
     props.events.reactUse("action_request_focus", () => refInput.current?.focus());
     props.events.reactUse("notify_typing", () => {
-        if (typeof typingTimeout.current === "number") {
+        if(typeof typingTimeout.current === "number") {
             return;
         }
 
@@ -274,15 +281,15 @@ const TextInput = (props: { events: Registry<ChatBoxEvents>, enabled?: boolean,
     });
     props.events.reactUse("action_insert_text", event => {
         refInput.current.innerHTML = refInput.current.innerHTML + event.text;
-        if (event.focus) {
+        if(event.focus) {
             refInput.current.focus();
         }
     });
     props.events.reactUse("action_set_enabled", event => {
         setEnabled(event.enabled);
-        if (!event.enabled) {
+        if(!event.enabled) {
             const text = refInput.current.innerText;
-            if (text.trim().length !== 0)
+            if(text.trim().length !== 0)
                 history.current.push(text);
             refInput.current.innerText = "";
         }
@@ -317,17 +324,17 @@ export interface ChatBoxState {
 }
 
 const MarkdownFormatHelper = () => {
-    const [visible, setVisible] = useState(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
+    const [ visible, setVisible ] = useState(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
 
     settings.events.reactUse("notify_setting_changed", event => {
-        if (event.setting !== Settings.KEY_CHAT_ENABLE_MARKDOWN.key) {
+        if(event.setting !== Settings.KEY_CHAT_ENABLE_MARKDOWN.key) {
             return;
         }
 
         setVisible(settings.getValue(Settings.KEY_CHAT_ENABLE_MARKDOWN));
     });
 
-    if (visible) {
+    if(visible) {
         return (
             <div key={"help"} className={cssStyle.containerHelp}>*italic*, **bold**, ~~strikethrough~~, `code`, <Translatable>and more</Translatable>...</div>
         );
@@ -373,7 +380,7 @@ export class ChatBox extends React.Component<ChatBoxProperties, ChatBoxState> {
     }
 
     componentDidUpdate(prevProps: Readonly<ChatBoxProperties>, prevState: Readonly<ChatBoxState>, snapshot?: any): void {
-        if (prevState.enabled !== this.state.enabled) {
+        if(prevState.enabled !== this.state.enabled) {
             this.events.fire_react("action_set_enabled", { enabled: this.state.enabled });
         }
     }

tsbaseconfig.json

@@ -14,6 +14,7 @@
   },
   "include": [
     "webpack.config.ts",
+    "webpack-client.config.ts",
     "webpack-web.config.ts",
     "webpack/build-definitions.d.ts",
     "webpack/HtmlWebpackInlineSource.ts",

web/app/dns/resolver.ts

@@ -1,11 +1,11 @@
-import { LogCategory, logError, logTrace, logWarn } from "tc-shared/log";
-import { tr } from "tc-shared/i18n/localize";
-import { default_options, DNSAddress, DNSResolveResult, ResolveOptions } from "tc-shared/dns";
-import { executeDnsRequest, RRType } from "./api";
+import {LogCategory, logError, logTrace, logWarn} from "tc-shared/log";
+import {tr} from "tc-shared/i18n/localize";
+import {default_options, DNSAddress, DNSResolveResult, ResolveOptions} from "tc-shared/dns";
+import {executeDnsRequest, RRType} from "./api";
 
 interface DNSResolveMethod {
-    name(): string;
-    resolve(address: DNSAddress): Promise<DNSAddress | undefined>;
+    name() : string;
+    resolve(address: DNSAddress) : Promise<DNSAddress | undefined>;
 }
 
 class LocalhostResolver implements DNSResolveMethod {
@@ -14,7 +14,7 @@ class LocalhostResolver implements DNSResolveMethod {
     }
 
     async resolve(address: DNSAddress): Promise<DNSAddress | undefined> {
-        if (address.hostname === "localhost") {
+        if(address.hostname === "localhost") {
             return {
                 hostname: "127.0.0.1",
                 port: address.port
@@ -26,20 +26,6 @@ class LocalhostResolver implements DNSResolveMethod {
 
 }
 
-class FakeResolver implements DNSResolveMethod {
-    name(): string {
-        return "fake resolver";
-    }
-
-    async resolve(address: DNSAddress): Promise<DNSAddress | undefined> {
-        return {
-            hostname: "tea.lp.kle.li",
-            port: address.port
-        }
-    }
-
-}
-
 class IPResolveMethod implements DNSResolveMethod {
     readonly v6: boolean;
 
@@ -54,7 +40,7 @@ class IPResolveMethod implements DNSResolveMethod {
 
     async resolve(address: DNSAddress): Promise<DNSAddress | undefined> {
         const answer = await executeDnsRequest(address.hostname, this.v6 ? RRType.AAAA : RRType.A);
-        if (!answer.length) {
+        if(!answer.length) {
             return undefined;
         }
 
@@ -86,10 +72,10 @@ class SRVResolveMethod implements DNSResolveMethod {
     async resolve(address: DNSAddress): Promise<DNSAddress | undefined> {
         const answer = await executeDnsRequest((this.application ? this.application + "." : "") + address.hostname, RRType.SRV);
 
-        const records: { [key: number]: ParsedSVRRecord[] } = {};
-        for (const record of answer) {
+        const records: {[key: number]: ParsedSVRRecord[]} = {};
+        for(const record of answer) {
             const parts = record.data.split(" ");
-            if (parts.length !== 4) {
+            if(parts.length !== 4) {
                 logWarn(LogCategory.DNS, tr("Failed to parse SRV record %s. Invalid split length."), record);
                 continue;
             }
@@ -98,7 +84,7 @@ class SRVResolveMethod implements DNSResolveMethod {
             const weight = parseInt(parts[1]);
             const port = parseInt(parts[2]);
 
-            if ((priority < 0 || priority > 65535) || (weight < 0 || weight > 65535) || (port < 0 || port > 65535)) {
+            if((priority < 0 || priority > 65535) || (weight < 0 || weight > 65535) || (port < 0 || port > 65535)) {
                 logWarn(LogCategory.DNS, tr("Failed to parse SRV record %s. Malformed data."), record);
                 continue;
             }
@@ -113,35 +99,35 @@ class SRVResolveMethod implements DNSResolveMethod {
 
         /* get the record with the highest priority */
         const priority_strings = Object.keys(records);
-        if (!priority_strings.length) {
+        if(!priority_strings.length) {
             return undefined;
         }
 
         let highestPriority: ParsedSVRRecord[];
-        for (const priority_str of priority_strings) {
-            if (!highestPriority || !highestPriority.length) {
+        for(const priority_str of priority_strings) {
+            if(!highestPriority || !highestPriority.length) {
                 highestPriority = records[priority_str];
             }
 
-            if (highestPriority[0].priority < parseInt(priority_str)) {
+            if(highestPriority[0].priority < parseInt(priority_str)) {
                 highestPriority = records[priority_str];
             }
         }
 
-        if (!highestPriority.length) {
+        if(!highestPriority.length) {
             return undefined;
         }
 
         /* select randomly one record */
         let record: ParsedSVRRecord;
         const max_weight = highestPriority.map(e => e.weight).reduce((a, b) => a + b, 0);
-        if (max_weight == 0) {
+        if(max_weight == 0) {
             record = highestPriority[Math.floor(Math.random() * highestPriority.length)];
         } else {
             let rnd = Math.random() * max_weight;
-            for (let i = 0; i < highestPriority.length; i++) {
+            for(let i = 0; i < highestPriority.length; i++) {
                 rnd -= highestPriority[i].weight;
-                if (rnd > 0) {
+                if(rnd > 0) {
                     continue;
                 }
 
@@ -150,7 +136,7 @@ class SRVResolveMethod implements DNSResolveMethod {
             }
         }
 
-        if (!record) {
+        if(!record) {
             /* shall never happen */
             record = highestPriority[0];
         }
@@ -179,7 +165,7 @@ class SRV_IPResolveMethod implements DNSResolveMethod {
 
     async resolve(address: DNSAddress): Promise<DNSAddress | undefined> {
         const srvAddress = await this.srvResolver.resolve(address);
-        if (!srvAddress) {
+        if(!srvAddress) {
             return undefined;
         }
 
@@ -204,7 +190,7 @@ class DomainRootResolveMethod implements DNSResolveMethod {
 
     async resolve(address: DNSAddress): Promise<DNSAddress | undefined> {
         const parts = address.hostname.split(".");
-        if (parts.length < 3) {
+        if(parts.length < 3) {
             return undefined;
         }
 
@@ -217,7 +203,7 @@ class DomainRootResolveMethod implements DNSResolveMethod {
 
 class TeaSpeakDNSResolve {
     readonly address: DNSAddress;
-    private resolvers: { [key: string]: { resolver: DNSResolveMethod, after: string[] } } = {};
+    private resolvers: {[key: string]:{ resolver: DNSResolveMethod, after: string[] }} = {};
     private resolving = false;
     private timeout;
 
@@ -232,15 +218,15 @@ class TeaSpeakDNSResolve {
     }
 
     registerResolver(resolver: DNSResolveMethod, ...after: (string | DNSResolveMethod)[]) {
-        if (this.resolving) {
+        if(this.resolving) {
             throw tr("resolver is already resolving");
         }
 
         this.resolvers[resolver.name()] = { resolver: resolver, after: after.map(e => typeof e === "string" ? e : e.name()) };
     }
 
-    resolve(timeout: number): Promise<DNSAddress> {
-        if (this.resolving) {
+    resolve(timeout: number) : Promise<DNSAddress> {
+        if(this.resolving) {
             throw tr("already resolving");
         }
         this.resolving = true;
@@ -277,53 +263,52 @@ class TeaSpeakDNSResolve {
         let invoke_count = 0;
 
         _main_loop:
-        for (const resolver_name of Object.keys(this.resolvers)) {
-            if (this.resolving_resolvers.findIndex(e => e === resolver_name) !== -1) continue;
-            if (this.finished_resolvers.findIndex(e => e === resolver_name) !== -1) continue;
+            for(const resolver_name of Object.keys(this.resolvers)) {
+                if(this.resolving_resolvers.findIndex(e => e === resolver_name) !== -1) continue;
+                if(this.finished_resolvers.findIndex(e => e === resolver_name) !== -1) continue;
 
-            const resolver = this.resolvers[resolver_name];
-            for (const after of resolver.after)
-                if (this.finished_resolvers.findIndex(e => e === after) === -1) continue _main_loop;
+                const resolver = this.resolvers[resolver_name];
+                for(const after of resolver.after)
+                    if(this.finished_resolvers.findIndex(e => e === after) === -1) continue _main_loop;
 
-            invoke_count++;
-            logTrace(LogCategory.DNS, tr(" Executing resolver %s"), resolver_name);
+                invoke_count++;
+                logTrace(LogCategory.DNS, tr(" Executing resolver %s"), resolver_name);
 
-            this.resolving_resolvers.push(resolver_name);
-            resolver.resolver.resolve(this.address).then(result => {
-                if (!this.resolving || !this.callback_success) return; /* resolve has been finished already */
-                this.finished_resolvers.push(resolver_name);
+                this.resolving_resolvers.push(resolver_name);
+                resolver.resolver.resolve(this.address).then(result => {
+                    if(!this.resolving || !this.callback_success) return; /* resolve has been finished already */
+                    this.finished_resolvers.push(resolver_name);
 
-                if (!result) {
-                    logTrace(LogCategory.DNS, tr(" Resolver %s returned an empty response."), resolver_name);
+                    if(!result) {
+                        logTrace(LogCategory.DNS, tr(" Resolver %s returned an empty response."), resolver_name);
+                        this.invoke_resolvers();
+                        return;
+                    }
+
+                    logTrace(LogCategory.DNS, tr(" Successfully resolved address %s:%d to %s:%d via resolver %s"),
+                        this.address.hostname, this.address.port,
+                        result.hostname, result.port,
+                        resolver_name);
+                    this.callback_success(result);
+                }).catch(error => {
+                    if(!this.resolving || !this.callback_success) return; /* resolve has been finished already */
+                    this.finished_resolvers.push(resolver_name);
+
+                    logTrace(LogCategory.DNS, tr(" Resolver %s ran into an error: %o"), resolver_name, error);
                     this.invoke_resolvers();
-                    return;
-                }
+                }).then(() => {
+                    this.resolving_resolvers.remove(resolver_name);
+                    if(!this.resolving_resolvers.length && this.resolving)
+                        this.invoke_resolvers();
+                });
+            }
 
-                logTrace(LogCategory.DNS, tr(" Successfully resolved address %s:%d to %s:%d via resolver %s"),
-                    this.address.hostname, this.address.port,
-                    result.hostname, result.port,
-                    resolver_name);
-                this.callback_success(result);
-            }).catch(error => {
-                if (!this.resolving || !this.callback_success) return; /* resolve has been finished already */
-                this.finished_resolvers.push(resolver_name);
-
-                logTrace(LogCategory.DNS, tr(" Resolver %s ran into an error: %o"), resolver_name, error);
-                this.invoke_resolvers();
-            }).then(() => {
-                this.resolving_resolvers.remove(resolver_name);
-                if (!this.resolving_resolvers.length && this.resolving)
-                    this.invoke_resolvers();
-            });
-        }
-
-        if (invoke_count === 0 && !this.resolving_resolvers.length && this.resolving) {
+        if(invoke_count === 0 && !this.resolving_resolvers.length && this.resolving) {
             this.callback_fail("no response");
         }
     }
 }
 
-const kResolverFake = new FakeResolver();
 const kResolverLocalhost = new LocalhostResolver();
 
 const kResolverIpV4 = new IPResolveMethod(false);
@@ -335,16 +320,14 @@ const resolverSrvTS3 = new SRV_IPResolveMethod(new SRVResolveMethod("_ts3._udp")
 const resolverDrSrvTS = new DomainRootResolveMethod(resolverSrvTS);
 const resolverDrSrvTS3 = new DomainRootResolveMethod(resolverSrvTS3);
 
-export async function resolveTeaSpeakServerAddress(address: DNSAddress, _options?: ResolveOptions): Promise<DNSResolveResult> {
+export async function resolveTeaSpeakServerAddress(address: DNSAddress, _options?: ResolveOptions) : Promise<DNSResolveResult> {
     try {
         const options = Object.assign({}, default_options);
         Object.assign(options, _options);
 
         const resolver = new TeaSpeakDNSResolve(address);
 
-        resolver.registerResolver(kResolverFake);
-
-        resolver.registerResolver(kResolverLocalhost, kResolverFake);
+        resolver.registerResolver(kResolverLocalhost);
 
         resolver.registerResolver(resolverSrvTS, kResolverLocalhost);
         resolver.registerResolver(resolverSrvTS3, kResolverLocalhost);
@@ -357,7 +340,7 @@ export async function resolveTeaSpeakServerAddress(address: DNSAddress, _options
         resolver.registerResolver(kResolverIpV6, kResolverIpV4);
 
         const response = await resolver.resolve(options.timeout || 5000);
-        if (!response) {
+        if(!response) {
             return {
                 status: "empty-result"
             };
@@ -369,7 +352,7 @@ export async function resolveTeaSpeakServerAddress(address: DNSAddress, _options
             resolvedAddress: response
         };
     } catch (error) {
-        if (typeof error !== "string") {
+        if(typeof error !== "string") {
             logError(LogCategory.DNS, tr("Failed to resolve %o: %o"), address, error);
             error = tr("lookup the console");
         }
@@ -381,9 +364,9 @@ export async function resolveTeaSpeakServerAddress(address: DNSAddress, _options
     }
 }
 
-export async function resolveAddressIpV4(address: string): Promise<string> {
+export async function resolveAddressIpV4(address: string) : Promise<string> {
     const result = await executeDnsRequest(address, RRType.A);
-    if (!result.length) return undefined;
+    if(!result.length) return undefined;
 
     return result[0].data;
 }

webpack-client.config.ts

@@ -0,0 +1,27 @@
+import * as path from "path";
+import * as config_base from "./webpack.config";
+
+export = env => config_base.config(env, "client").then(config => {
+    Object.assign(config.entry, {
+        "main-app": ["./client/app/entry-points/AppMain.ts"],
+        "modal-external": ["./client/app/entry-points/ModalWindow.ts"]
+    });
+
+    Object.assign(config.resolve.alias, {
+        "tc-shared": path.resolve(__dirname, "shared/js"),
+    });
+
+    if(!Array.isArray(config.externals)) {
+        throw "invalid config";
+    }
+
+    config.externals.push(({ context, request }, callback) => {
+        if (request.startsWith("tc-backend/")) {
+            return callback(null, `window["backend-loader"].require("${request}")`);
+        }
+
+        callback(undefined, undefined);
+    });
+
+    return Promise.resolve(config);
+});