Merge pull request #4576 from matrix-org/t3chguy/kosovo2.0

Replace png flags and add Kosovo to country code dropdown

src/components/views/auth/CountryDropdown.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 
 import * as sdk from '../../../index';
 
-import { COUNTRIES } from '../../../phonenumber';
+import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 
@@ -80,7 +80,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
+        return <div className="mx_Dropdown_option_emoji">{ getEmojiFlag(iso2) }</div>;
     }
 
     _getShortOption(iso2) {

src/phonenumber.ts

@@ -25,10 +25,21 @@ const PHONE_NUMBER_REGEXP = /^[0-9 -.]+$/;
  *     a national-format number.
  * @return True if the number could be a valid phone number, otherwise false.
  */
-export function looksValid(phoneNumber) {
+export function looksValid(phoneNumber: string) {
     return PHONE_NUMBER_REGEXP.test(phoneNumber);
 }
 
+// Regional Indicator Symbol Letter A
+const UNICODE_BASE = 127462 - 'A'.charCodeAt(0);
+// Country code should be exactly 2 uppercase characters
+const COUNTRY_CODE_REGEX = /^[A-Z]{2}$/;
+
+export const getEmojiFlag = (countryCode: string) => {
+    if (!COUNTRY_CODE_REGEX.test(countryCode)) return '';
+    // Rip the country code out of the emoji and use that
+    return String.fromCodePoint(...countryCode.split('').map(l => UNICODE_BASE + l.charCodeAt(0)));
+};
+
 export const COUNTRIES = [
     {
         "iso2": "GB",
@@ -625,6 +636,11 @@ export const COUNTRIES = [
         "name": "Kiribati",
         "prefix": "686",
     },
+    {
+        "iso2": "XK",
+        "name": "Kosovo",
+        "prefix": "383",
+    },
     {
         "iso2": "KW",
         "name": "Kuwait",