diff --git a/core/font/TwemojiCountryFlags.woff2 b/core/font/TwemojiCountryFlags.woff2
new file mode 100644
index 00000000..b9d6ea84
Binary files /dev/null and b/core/font/TwemojiCountryFlags.woff2 differ
diff --git a/core/font/material-icons.css b/core/font/material-icons.css
index a1c525ae..62b28ab7 100644
--- a/core/font/material-icons.css
+++ b/core/font/material-icons.css
@@ -101,3 +101,10 @@
local('PaytoneOne'),
url(PaytoneOne.ttf) format('truetype');
}
+
+@font-face {
+ font-family: 'Twemoji Country Flags';
+ src: url('TwemojiCountryFlags.woff2') format('woff2');
+ font-weight: normal;
+ font-style: normal;
+}
\ No newline at end of file
diff --git a/plugins/plugins/core/components/ChatEmojiFlags.js b/plugins/plugins/core/components/ChatEmojiFlags.js
new file mode 100644
index 00000000..4956b6a5
--- /dev/null
+++ b/plugins/plugins/core/components/ChatEmojiFlags.js
@@ -0,0 +1,20 @@
+import { supportsEmojiFlags } from './ChatTestEmojiFlags'
+
+export function supportCountryFlagEmojis(fontName = "Twemoji Country Flags", fontUrl = "/font/TwemojiCountryFlags.woff2") {
+ if (typeof window !== "undefined" && supportsEmojiFlags("😊") && !supportsEmojiFlags("🇨ðŸ‡")) {
+ const style = document.createElement("style")
+
+ style.textContent = `@font-face {
+ font-family: "${fontName}";
+ unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
+ src: url('${fontUrl}') format('woff2');
+ font-display: swap;
+ }`
+
+ document.head.appendChild(style)
+
+ return true
+ }
+
+ return false
+}
\ No newline at end of file
diff --git a/plugins/plugins/core/components/ChatTestEmojiFlags.js b/plugins/plugins/core/components/ChatTestEmojiFlags.js
new file mode 100644
index 00000000..07e48083
--- /dev/null
+++ b/plugins/plugins/core/components/ChatTestEmojiFlags.js
@@ -0,0 +1,32 @@
+const FONT_FAMILY = '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif'
+
+function makeCtx() {
+ const canvas = document.createElement("canvas")
+ canvas.width = canvas.height = 1
+
+ const ctx = canvas.getContext("2d", { willReadFrequently: true })
+
+ ctx.textBaseline = "top"
+ ctx.font = `100px ${FONT_FAMILY}`
+ ctx.scale(0.01, 0.01)
+
+ return ctx
+}
+
+function getColor(ctx, text, color) {
+ ctx.clearRect(0, 0, 100, 100)
+ ctx.fillStyle = color
+ ctx.fillText(text, 0, 0)
+
+ const bytes = ctx.getImageData(0, 0, 1, 1).data
+
+ return bytes.join(",")
+}
+
+export function supportsEmojiFlags(text) {
+ const ctx = makeCtx()
+ const white = getColor(ctx, text, "#fff")
+ const black = getColor(ctx, text, "#000")
+
+ return black === white && !black.startsWith("0,0,0,")
+}
\ No newline at end of file
diff --git a/plugins/plugins/core/q-chat/index.html b/plugins/plugins/core/q-chat/index.html
index e6fab848..04e74a55 100644
--- a/plugins/plugins/core/q-chat/index.html
+++ b/plugins/plugins/core/q-chat/index.html
@@ -41,7 +41,7 @@
html,
body {
margin: 0;
- font-family: "Roboto", sans-serif;
+ font-family: "Twemoji Country Flags", "Roboto", sans-serif;
background: var(--plugback);
overflow: hidden;
}
diff --git a/plugins/plugins/core/q-chat/q-chat.src.js b/plugins/plugins/core/q-chat/q-chat.src.js
index 7a5b75d1..71b2f597 100644
--- a/plugins/plugins/core/q-chat/q-chat.src.js
+++ b/plugins/plugins/core/q-chat/q-chat.src.js
@@ -3,6 +3,7 @@ import { render } from 'lit/html.js'
import { Epml } from '../../../epml'
import { passiveSupport } from 'passive-events-support/src/utils'
import { Editor, Extension } from '@tiptap/core'
+import { supportCountryFlagEmojis } from '../components/ChatEmojiFlags'
import { qchatStyles } from '../components/plugins-css'
import isElectron from 'is-electron'
import WebWorker from 'web-worker:./computePowWorker'
@@ -24,7 +25,6 @@ import '@material/mwc-icon'
import '@material/mwc-snackbar'
import '@polymer/paper-spinner/paper-spinner-lite.js'
import '@vaadin/grid'
-import '@vaadin/scroller'
import '@vaadin/tooltip'
// Multi language support
@@ -36,6 +36,7 @@ registerTranslateConfig({
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
passiveSupport({ events: ['touchstart'] })
+supportCountryFlagEmojis()
class Chat extends LitElement {
static get properties() {
@@ -150,14 +151,9 @@ class Chat extends LitElement {
-
- ${this.isEmptyArray(this.chatHeads) ? this.renderLoadingText() : this.renderChatHead(this.chatHeads)}
-
-