Include language name with along with code

Use npm cldr package to get the language name that corresponds to the
country code for the language switcher

proxy/make.js

@@ -4,6 +4,7 @@
 
 var { writeFileSync, readdirSync, statSync } = require('fs');
 var { execSync, spawn } = require('child_process');
+var cldr = require('cldr');
 
 // All files required.
 var FILES = [
@@ -49,6 +50,20 @@ var copyTranslations = function(outDir) {
   execSync(`cp -rf translation/* ${outDir}/_locales/`);
 };
 
+var getDisplayName = function(locale) {
+  var code = locale.split("_")[0];
+  try {
+    var name = cldr.extractLanguageDisplayNames(code)[code];
+  }
+  catch(e) {
+    return '';
+  }
+  if (name === undefined) {
+    return '';
+  }
+  return name;
+}
+
 var availableLangs = function() {
   let out = "const availableLangs = new Set([\n";
   let dirs = readdirSync('translation').filter((f) => {
@@ -63,6 +78,19 @@ var availableLangs = function() {
   return out;
 };
 
+var translatedLangs = function() {
+  let out = "const availableLangs = {\n";
+  let dirs = readdirSync('translation').filter((f) => {
+    const s = statSync(`translation/${f}`);
+    return s.isDirectory();
+  });
+  dirs.push('en_US');
+  dirs.sort();
+  dirs = dirs.map(d => `'${d}': {"name": '${getDisplayName(d)}'},`);
+  out += dirs.join("\n");
+  out += "\n};\n\n";
+  return out;
+};
 var tasks = new Map();
 
 var task = function(key, msg, func) {
@@ -94,7 +122,7 @@ task('build', 'build the snowflake proxy', function() {
   execSync(`cp -r ${STATIC}/ ${outDir}/`);
   copyTranslations(outDir);
   concatJS(outDir, 'badge', 'embed.js', availableLangs());
-  writeFileSync(`${outDir}/index.js`, availableLangs(), 'utf8');
+  writeFileSync(`${outDir}/index.js`, translatedLangs(), 'utf8');
   execSync(`cat ${STATIC}/index.js >> ${outDir}/index.js`);
   console.log('Snowflake prepared.');
 });

proxy/package.json

@@ -26,6 +26,7 @@
     "jasmine": "2.5.2"
   },
   "dependencies": {
+    "cldr": "^5.4.1",
     "wrtc": "^0.0.61",
     "ws": "^3.3.1",
     "xmlhttprequest": "^1.8.0"

proxy/static/index.html

@@ -20,7 +20,6 @@
         <div class="btn-group dropdown pull-right">
 
           <button id="language-switcher" type="button" class="btn btn-dark bg-dark dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            en_US
           </button>
           <div id="supported-languages" class="dropdown-menu">
           </div>

proxy/static/index.js

@@ -29,11 +29,11 @@ var getLang = function() {
     lang = override_lang;
   }
 
-  if (availableLangs.has(lang)) {
+  if (Object.prototype.hasOwnProperty.call(availableLangs, lang)) {
     return lang;
   }
   lang = lang.split('_')[0];
-  if (availableLangs.has(lang)) {
+  if (Object.prototype.hasOwnProperty.call(availableLangs, lang)) {
     return lang;
   }
   return defaultLang;
@@ -64,7 +64,8 @@ fetch(`./_locales/${getLang()}/messages.json`)
 })
 .then((json) => {
   var language = document.getElementById('language-switcher');
-  language.innerText = `${getLang()}`
+  var lang = `${getLang()}`
+  language.innerText = availableLangs[lang].name + ' (' + lang + ')';
   var messages = new Messages(json);
   fill(document.body, (m) => {
     return messages.getMessage(m);
@@ -72,11 +73,11 @@ fetch(`./_locales/${getLang()}/messages.json`)
 });
 
 // Populate language switcher list
-availableLangs.forEach(function (lang) {
+for (var lang in availableLangs) {
   var languageList = document.getElementById('supported-languages');
   var link = document.createElement('a');
   link.setAttribute('href', '?lang='+lang);
   link.setAttribute('class', "dropdown-item");
-  link.innerText = lang;
+  link.innerText = availableLangs[lang].name + ' (' + lang + ')';
   languageList.lastChild.after(link);
-});
+}