redo emoji

loader/index.ejs

@@ -9,7 +9,6 @@
 
         <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"> */ %>
@@ -27,19 +26,6 @@
         <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,6 +2834,7 @@
       "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"
       }
@@ -3037,6 +3038,16 @@
       "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",
@@ -4970,15 +4981,6 @@
       "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",
@@ -9915,13 +9917,9 @@
       }
     },
     "emoji-mart": {
-      "version": "3.0.1",
+      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
-      "integrity": "sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==",
+      "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "prop-types": "^15.6.0"
-      }
     },
     "emoji-regex": {
       "version": "9.2.2",
@@ -19527,7 +19525,8 @@
     "regenerator-runtime": {
       "version": "0.13.5",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.5",

package.json

@@ -24,7 +24,6 @@
     "@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",
@@ -98,6 +97,8 @@
   },
   "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",
@@ -105,7 +106,7 @@
     "crypto-js": "^4.2.0",
     "detect-browser": "^5.3.0",
     "dompurify": "^2.4.7",
-    "emoji-mart": "^3.0.1",
+    "emoji-mart": "^5.5.2",
     "emoji-regex": "^9.2.2",
     "highlight.js": "^10.7.3",
     "ip-regex": "^4.3.0",

shared/js/Bookmarks.ts

@@ -107,12 +107,12 @@ export class BookmarkManager {
                 connectOnStartup: false,
                 connectProfile: "default",
 
-                displayName: "Official TeaSpeak - Test server",
+                displayName: "Our LanPart<",
 
                 parentEntry: undefined,
                 previousEntry: undefined,
 
-                serverAddress: "ts.teaspeak.de",
+                serverAddress: "tea.lp.kle.li",
                 serverPasswordHash: undefined,
 
                 defaultChannel: undefined,

shared/js/settings.ts

@@ -364,7 +364,7 @@ export class Settings {
     static readonly KEY_I18N_DEFAULT_REPOSITORY: ValuedRegistryKey<string> = {
         key: "i18n.default_repository",
         valueType: "string",
-        defaultValue: "https://web.teaspeak.de/i18n/"
+        defaultValue: "i18n/"
     };
 
     /* Default client states */

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

@@ -61,7 +61,8 @@ 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");
 
@@ -71,7 +72,7 @@ class ConnectController {
         this.validateNickname = false;
         this.validateAddress = false;
 
-        this.defaultAddress = "ts.teaspeak.de";
+        this.defaultAddress = "tea.lp.kle.li";
         this.historyShown = settings.getValue(Settings.KEY_CONNECT_SHOW_HISTORY);
 
         this.currentAddress = settings.getValue(Settings.KEY_CONNECT_ADDRESS);

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

@@ -2,13 +2,15 @@ import * as React from "react";
 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 Picker from '@emoji-mart/react'
-import {useGlobalSetting} from "tc-shared/ui/react-elements/Helper";
+import data from '@emoji-mart/data'
+import { Emoji, init } from "emoji-mart";
+
+init({ data })
+
 
 const cssStyle = require("./ChatBox.scss");
 
@@ -28,15 +30,7 @@ interface ChatBoxEvents {
 }
 
 const LastUsedEmoji = () => {
-    const settingValue = useGlobalSetting(Settings.KEY_CHAT_LAST_USED_EMOJI);
+    return <img key={"fallback"} alt={""} src={"img/smiley.png"} />;
-    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> }) => {
@@ -76,22 +70,21 @@ const EmojiButton = (props: { events: Registry<ChatBoxEvents> }) => {
             <div className={cssStyle.picker} style={{ display: shown ? undefined : "none" }}>
                 {!shown ? undefined :
                     <Picker
+                        data={data}
                         key={"picker"}
-                        set={"twitter"}
+                        set={"native"}
-                        theme={"light"}
+                        noCountryFlags={true}
                         showPreview={true}
                         title={""}
-                        showSkinTones={true}
+                        skinTonePosition={"none"}
-                        useButton={false}
-                        native={false}
 
-                        onSelect={(emoji: any) => {
+                        onEmojiSelect={(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>