From f69065ca79c2e1d0dffb8a1b3d89614b360ffc67 Mon Sep 17 00:00:00 2001
From: Jeremy S <poke@unpoke.com>
Date: Tue, 4 Apr 2023 21:55:05 -0400
Subject: [PATCH] Hiding language preference flags while on Windows platforms.

Windows has an issue displaying country flag emoji. This is a platform issue which does not even appear to be fixed in Win11. As a result this fix will just hide the emoji when a windows operating system is detected.
resolves #606
---
 web/src/components/Preferences.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js
index 3f6c1b39..8aa1ea0b 100644
--- a/web/src/components/Preferences.js
+++ b/web/src/components/Preferences.js
@@ -436,10 +436,19 @@ const Appearance = () => {
 const Language = () => {
     const { t, i18n } = useTranslation();
     const labelId = "prefLanguage";
-    const randomFlags = shuffle(["🇬🇧", "🇺🇸", "🇪🇸", "🇫🇷", "🇧🇬", "🇨🇿", "🇩🇪", "🇵🇱", "🇺🇦", "🇨🇳", "🇮🇹", "🇭🇺", "🇧🇷", "🇳🇱", "🇮🇩", "🇯🇵", "🇷🇺", "🇹🇷"]).slice(0, 3);
-    const title = t("prefs_appearance_language_title") + " " + randomFlags.join(" ");
     const lang = i18n.language ?? "en";
 
+    // Country flags are displayed using emoji. Emoji rendereing is handled by platform fonts.
+    // Windows in particular does not yet play nicely with flag emoji so for now, hide flags on Windows.
+    // Note: There are ways around this by using custom fonts. This appears to be implemented in Firefox...
+    //       Not worth the hassle.
+    const randomFlags = shuffle(["🇬🇧", "🇺🇸", "🇪🇸", "🇫🇷", "🇧🇬", "🇨🇿", "🇩🇪", "🇵🇱", "🇺🇦", "🇨🇳", "🇮🇹", "🇭🇺", "🇧🇷", "🇳🇱", "🇮🇩", "🇯🇵", "🇷🇺", "🇹🇷"]).slice(0, 3);
+    const showFlags = !navigator.userAgent.includes("Windows");
+    let title = t("prefs_appearance_language_title");
+    if (showFlags === true) {
+        title += " " + randomFlags.join(" ");
+    }
+
     const handleChange = async (ev) => {
         await i18n.changeLanguage(ev.target.value);
         await maybeUpdateAccountSettings({