From 02940b16486393926e5c97342d14307e243dbc18 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Fri, 28 Oct 2022 18:41:05 +0200
Subject: [PATCH] Icon Configuration for Languages

This patch allows users to specify icons for languages selectors
displayed in the subtitle editor. Users have to specify the selectable
languages anyway and the algorithm used before guessed wrong for popular
languages like English.

If no icon is specified for a language, the selector will simply omit
the icon and display just the label.

This fixes #825
---
 editor-settings.toml        |  8 ++++++++
 public/editor-settings.toml |  6 ++++++
 src/config.ts               |  5 ++++-
 src/main/SubtitleSelect.tsx | 30 ++++++------------------------
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/editor-settings.toml b/editor-settings.toml
index 769bae6b1..7f9bc0c8e 100644
--- a/editor-settings.toml
+++ b/editor-settings.toml
@@ -81,6 +81,14 @@
 "captions/source+en" = "English"
 "captions/source+es" = "Spanish"
 
+[subtitles.icons]
+# A list of icons to be displayed for languages defined above.
+# Values are strings but should preferably be Unicode icons.
+# These are optional and you can also choose to have no icons.
+"captions/source+de" = "🇩🇪"
+"captions/source+en" = "🇺🇸"
+"captions/source+es" = "🇪🇸"
+
 [subtitles.defaultVideoFlavor]
 # Specify the default video in the subtitle video player by flavor
 # If not specified, the editor will decide on a default by itself
diff --git a/public/editor-settings.toml b/public/editor-settings.toml
index 9b3fb2847..1aa2c0ae0 100644
--- a/public/editor-settings.toml
+++ b/public/editor-settings.toml
@@ -32,6 +32,12 @@ mainFlavor = "captions"
 "captions/source+de" = "Deutsch"
 "captions/source+en" = "English"
 "captions/source+es" = "Spanish"
+"captions/source" = "Generic"
+
+[subtitles.icons]
+"captions/source+de" = "🇩🇪"
+"captions/source+en" = "🇺🇸"
+"captions/source+es" = "🇪🇸"
 
 [thumbnail]
 show = true
diff --git a/src/config.ts b/src/config.ts
index 6303cd79c..0b83bef2e 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -54,6 +54,7 @@ interface iSettings {
     show: boolean,
     mainFlavor: string,
     languages: { [key: string]: string } | undefined,
+    icons: { [key: string]: string } | undefined,
     defaultVideoFlavor: Flavor | undefined,
   }
 }
@@ -86,7 +87,8 @@ var defaultSettings: iSettings = {
   subtitles: {
     show: false,
     mainFlavor: "captions",
-    languages: undefined,
+    languages: {},
+    icons: undefined,
     defaultVideoFlavor: undefined,
   }
 }
@@ -360,6 +362,7 @@ const SCHEMA = {
     show: types.boolean,
     mainFlavor: types.string,
     languages: types.map,
+    icons: types.map,
     defaultVideoFlavor: types.map,
   },
   thumbnail: {
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 6c0a380c8..78f7aaccb 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -62,11 +62,6 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
     setCanBeAddedFlavors(tempCanBeAddedFlavors)
   }, [captionTracks, subtitles])
 
-  // TODO: Make this function more robust
-  const parseCountryCode = (parseString: string) => {
-    return parseString.split("+").pop()?.slice(0, 2);
-  }
-
   const subtitleSelectStyle = css({
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fit, minmax(20em, 1fr))',
@@ -80,10 +75,11 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
     }
 
     for (let subFlavor of displayFlavors) {
+      const icon = ((settings.subtitles || {}).icons || {})[subFlavor.subFlavor];
       buttons.push(
         <SubtitleSelectButton
           title={subFlavor.title}
-          iconIdentifier={parseCountryCode(subFlavor.subFlavor)}
+          icon={icon}
           flavor={subFlavor.subFlavor}
           key={subFlavor.subFlavor}
         />
@@ -106,34 +102,20 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
  */
 const SubtitleSelectButton: React.FC<{
   title: string,
-  iconIdentifier: string | undefined,
+  icon: string | undefined,
   flavor: string,
 }> = ({
   title,
-  iconIdentifier,
+  icon,
   flavor
 }) => {
   const { t } = useTranslation();
   const theme = useSelector(selectTheme)
   const dispatch = useDispatch()
 
-  /**
-   * Quick and dirty function to get a flag unicode character by country code
-   * @param countryCode
-   * @returns
-   */
-  function getFlagEmoji(countryCode: string) {
-    var flag = countryCode.toUpperCase().replace(/./g, char =>
-      String.fromCodePoint(127397 + char.charCodeAt(0))
-    );
-    const regexEscape = /[\u{1F1E6}-\u{1F1FF}]/u;
-    if (regexEscape.test(flag)) {
-      return flag
-    }
-  }
-
   const flagStyle = css({
     fontSize: '2em',
+    overflow: 'hidden'
   });
 
   const titleStyle = css({
@@ -156,7 +138,7 @@ const SubtitleSelectButton: React.FC<{
         dispatch(setIsDisplayEditView(true))
         dispatch(setSelectedSubtitleFlavor(flavor))
       }}}>
-      {iconIdentifier && getFlagEmoji(iconIdentifier) && <div css={flagStyle}>{getFlagEmoji(iconIdentifier)}</div>}
+      {icon && <div css={flagStyle}>{icon}</div>}
       <div css={titleStyle}>{title}</div>
     </div>
   );