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

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

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

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: {

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>
   );