TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

redo emoji
ci/woodpecker/push/base Pipeline was successful Details

strip2
gapodo 2023-11-20 23:34:41 +01:00
parent 4c5e744f62
commit 7d5496e105
3 changed files with 80 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@ -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",
"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"
}
"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=="
},
"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",

5
package.json
View File

@ -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",

34
shared/js/ui/react-elements/ChatBox.tsx
View File

@ -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 {useGlobalSetting} from "tc-shared/ui/react-elements/Helper";
import Picker from '@emoji-mart/react'
import data from '@emoji-mart/data'
import { Emoji, init } from "emoji-mart";
init({ data })
const cssStyle = require("./ChatBox.scss");
@ -28,15 +30,8 @@ interface ChatBoxEvents {
}
const LastUsedEmoji = () => {
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 new Emoji({ id: 'smiley', set: 'native' }).component
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 +71,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"}
theme={"light"}
set={"native"}
noCountryFlags={true}
showPreview={true}
title={""}
showSkinTones={true}
useButton={false}
native={false}
skinTonePosition={"none"}
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>