phone numbers formatting, play stickers after sending

src/components/misc.ts

@@ -112,9 +112,9 @@ export class ProgressivePreloader {
     
     this.preloader.innerHTML = `
     <div class="you-spin-me-round">
-      <svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50">
+    <svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50">
-        <circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/>
+    <circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/>
-      </svg>
+    </svg>
     </div>`;
     
     if(cancelable) {
@@ -222,16 +222,16 @@ export class LazyLoadQueue {
 
 export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader) {
   //if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') {
-    let size = appPhotosManager.setAttachmentSize(doc, container);
+  let size = appPhotosManager.setAttachmentSize(doc, container);
   //}
-
+  
   let peerID = this.peerID ? this.peerID : this.currentMessageID;
-
+  
   //container.classList.add('video');
-
+  
   let img = container.firstElementChild as HTMLImageElement || new Image();
   img.setAttribute('message-id', '' + message.id);
-
+  
   if(!container.contains(img)) {
     container.append(img);
   }
@@ -274,7 +274,7 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
       //source.src = doc.url;
       source.src = URL.createObjectURL(blob);
       source.type = doc.mime_type;
-
+      
       if(img && container.contains(img)) {
         container.removeChild(img);
       }
@@ -294,7 +294,7 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
         this.log.warn('peer changed');
         return;
       }
-
+      
       img.src = URL.createObjectURL(blob);
       
       /* image.style.height = doc.h + 'px';
@@ -306,7 +306,7 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
         preloader.detach();
       }
     });
-
+    
     return this.peerID ? this.loadMediaQueuePush(load) : load();
   }
 }
@@ -321,7 +321,7 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
   let extSplitted = doc.file_name ? doc.file_name.split('.') : '';
   let ext = '';
   ext = extSplitted.length > 1 && Array.isArray(extSplitted) ? extSplitted.pop().toLowerCase() : 'file';
-
+  
   let ext2 = ext;
   if(doc.type == 'photo') {
     docDiv.classList.add('photo');
@@ -353,7 +353,7 @@ export function scrollable(el: HTMLDivElement, x = false, y = true) {
   container.classList.add('scrollable');
   if(x) container.classList.add('scrollable-x');
   if(y) container.classList.add('scrollable-y');
-
+  
   let type = x ? 'width' : 'height';
   let side = x ? 'left' : 'top';
   let scrollType = x ? 'scrollWidth' : 'scrollHeight';
@@ -367,61 +367,61 @@ export function scrollable(el: HTMLDivElement, x = false, y = true) {
       container.classList.remove('active');
     }, {once: true}); */
   });
-
+  
   let thumb = document.createElement('div');
   thumb.className = 'scrollbar-thumb';
-
+  
   // @ts-ignore
   thumb.style[type] = '30px';
-
+  
   let resize = () => {
     // @ts-ignore
     scrollHeight = container[scrollType];
-
+    
     let rect = container.getBoundingClientRect();
-
+    
     // @ts-ignore
     height = rect[type];
-
+    
     if(!height || height == scrollHeight) {
       thumbHeight = 0;
-
+      
       // @ts-ignore
       thumb.style[type] = thumbHeight + 'px';
       return;
     }
     //if(!height) return;
-
+    
     let divider = scrollHeight / height / 0.5;
     thumbHeight = height / divider;
-
+    
     if(thumbHeight < 20) thumbHeight = 20;
-
+    
     // @ts-ignore
     thumb.style[type] = thumbHeight + 'px';
-
+    
     // @ts-ignore
-    console.log('onresize', thumb.style[type], thumbHeight, height);
+    //console.log('onresize', thumb.style[type], thumbHeight, height);
   };
-
+  
   let scrollHeight = -1;
   let height = 0;
   let thumbHeight = 0;
   window.addEventListener('resize', resize);
   //container.addEventListener('DOMNodeInserted', resize);
-
+  
   container.addEventListener('scroll', (e) => {
     // @ts-ignore
     if(container[scrollType] != scrollHeight || thumbHeight == 0) {
       resize();
     }
-
+    
     // @ts-ignore
     let value = container[scrollSide] / (scrollHeight - height) * 100;
     let maxValue = 100 - (thumbHeight / height * 100);
-
+    
-    console.log('onscroll', container.scrollHeight, thumbHeight, height, value, maxValue);
+    //console.log('onscroll', container.scrollHeight, thumbHeight, height, value, maxValue);
-
+    
     // @ts-ignore
     thumb.style[side] = (value >= maxValue ? maxValue : value) + '%';
   });
@@ -436,19 +436,19 @@ export function scrollable(el: HTMLDivElement, x = false, y = true) {
 
 export function wrapPhoto(this: AppImManager, photo: any, message: any, container: HTMLDivElement) {
   //container.classList.add('photo');
-
+  
   let peerID = this.peerID;
-
+  
   let size = appPhotosManager.setAttachmentSize(photo.id, container);
   let image = container.firstElementChild as HTMLImageElement || new Image();
   image.setAttribute('message-id', message.mid);
-
+  
   if(!container.contains(image)) {
     container.append(image);
   }
-
+  
   let preloader = new ProgressivePreloader(container, false);
-
+  
   let load = () => appPhotosManager.preloadPhoto(photo.id, size).then((blob) => {
     if(this.peerID != peerID) {
       this.log.warn('peer changed');
@@ -456,16 +456,16 @@ export function wrapPhoto(this: AppImManager, photo: any, message: any, containe
     }
     
     image.src = URL.createObjectURL(blob);
-
+    
     preloader.detach();
   });
-
+  
   console.log('wrapPhoto', load, container, image);
-
+  
   return this.loadMediaQueue ? this.loadMediaQueuePush(load) : load();
 }
 
-export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: () => boolean, lazyLoadQueue?: LazyLoadQueue, group?: string, canvas?: boolean) {
+export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: () => boolean, lazyLoadQueue?: LazyLoadQueue, group?: string, canvas?: boolean, play = false) {
   let stickerType = doc.mime_type == "application/x-tgsticker" ? 2 : (doc.mime_type == "image/webp" ? 1 : 0);
   
   if(!stickerType) {
@@ -539,6 +539,10 @@ export function wrapSticker(doc: MTDocument, div: HTMLDivElement, middleware?: (
             }
           });
         }
+        
+        if(play) {
+          animation.play();
+        }
       });
       
       reader.readAsArrayBuffer(blob);
@@ -573,7 +577,7 @@ export function horizontalMenu(tabs: HTMLUListElement, content: HTMLDivElement,
     
     console.log('tabs click:', target);
     
-    if(target.classList.contains('active')) return false;
+    if(!target || target.classList.contains('active')) return false;
     
     let prev = tabs.querySelector('li.active') as HTMLLIElement;
     prev && prev.classList.remove('active');
@@ -607,7 +611,7 @@ export function horizontalMenu(tabs: HTMLUListElement, content: HTMLDivElement,
         setTimeout(() => {
           content.classList.add('animated');
           content.style.marginLeft = '';
-        }, 0);
+        }, 10);
       }
     }
     
@@ -651,3 +655,31 @@ export function getNearestDc() {
     return nearestDcResult;
   });
 }
+
+export function formatPhoneNumber(str: string) {
+  str = str.replace(/\D/g, '');
+  let phoneCode = str.slice(0, 6);
+
+  console.log('str', str, phoneCode);
+
+  let sortedCountries = Config.Countries.slice().sort((a, b) => b.phoneCode.length - a.phoneCode.length);
+
+  let country = sortedCountries.find((c) => {
+    return c.phoneCode.split(' and ').find((c) => phoneCode.indexOf(c.replace(/\D/g, '')) == 0);
+  });
+
+  let pattern = country ? country.pattern || country.phoneCode : '';
+  if(country) {
+    pattern.split('').forEach((symbol, idx) => {
+      if(symbol == ' ' && str[idx] != ' ' && str.length > idx) {
+        str = str.slice(0, idx) + ' ' + str.slice(idx);
+      }
+    });
+    
+    if(country.pattern) {
+      str = str.slice(0, country.pattern.length);
+    }
+  }
+
+  return {formatted: str, country};
+}

src/components/pageSignIn.ts

@@ -1,8 +1,9 @@
 import { MTProto } from "../lib/mtproto/mtproto";
-import { putPreloader, getNearestDc, scrollable } from "./misc";
+import { putPreloader, getNearestDc, scrollable, formatPhoneNumber } from "./misc";
 import {RichTextProcessor} from '../lib/richtextprocessor';
+import * as Config from '../lib/config';
 
-import { unifiedCountryCodeEmoji, countryCodeEmoji, findUpTag } from "../lib/utils";
+import { findUpTag } from "../lib/utils";
 import pageAuthCode from "./pageAuthCode";
 
 let installed = false;
@@ -11,13 +12,15 @@ type Country = {
   name: string,
   code: string,
   phoneCode: string,
+  pattern: string,
+  emoji: string,
   li?: HTMLLIElement[]
 };
 
-import _countries from '../countries_pretty.json';
+//import _countries from '../countries_pretty.json';
 
-//export default () => import('../countries_pretty.json').then(async(results) => {
 export default () => {
+//export default () => import('../countries.json').then(_countries => {
   //let pageAuthCode = await import('./pageAuthCode');
   //Array.from(document.querySelectorAll('body > .whole:not(.page-authCode)')).forEach(div => div.style.display = 'none');
   const pageEl = document.body.getElementsByClassName('page-sign')[0] as HTMLDivElement;
@@ -33,8 +36,8 @@ export default () => {
 
   installed = true;
 
-  //const countries: Country[] = results[0].default;
+  //const countries: Country[] = _countries.default.filter(c => c.emoji);
-  const countries: Country[] = _countries;
+  const countries: Country[] = Config.Countries.filter(c => c.emoji);
 
   let lastCountrySelected = '';
 
@@ -60,7 +63,8 @@ export default () => {
   
         /* let unified = unifiedCountryCodeEmoji(c.code);
         let emoji = unified.split('-').reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), ''); */
-        let emoji = countryCodeEmoji(c.code);
+        //let emoji = countryCodeEmoji(c.code);
+        let emoji = c.emoji;
 
         let liArr: Array<HTMLLIElement> = [];
         c.phoneCode.split(' and ').forEach((phoneCode: string) => {
@@ -151,28 +155,16 @@ export default () => {
     else selectCountryCode.focus();
   });
 
+  let sortedCountries = countries.slice().sort((a, b) => b.phoneCode.length - a.phoneCode.length);
+
   let telEl = pageEl.querySelector('input[name="phone"]') as HTMLInputElement;
   telEl.addEventListener('input', function(this: typeof telEl, e) {
     this.classList.remove('error');
-    this.value = '+' + this.value
-      .replace(/[^0-9\s]/g, '')
-      /* .replace(/(\d{1,4})(\d{1,3})?(\d{1,3})?/g, function(txt, f, s, t) {
-        if (t) {
-          return `(${f}) ${s}-${t}`
-        } else if (s) {
-          return `(${f}) ${s}`
-        } else if (f) {
-          return `(${f})`
-        }
-      }) */;
-    
-    let sorted = countries.slice().sort((a, b) => b.phoneCode.length - a.phoneCode.length);
-    let phoneCode = this.value.slice(1, 7).replace(/\D/g, '');
-    let country = sorted.find((c) => {
-      return c.phoneCode.split(' and ').find((c) => phoneCode.indexOf(c) == 0);
-    });
 
-    console.log(phoneCode, country);
+    let {formatted, country} = formatPhoneNumber(this.value);
+    this.value = formatted ? '+' + formatted : '';
+
+    console.log(formatted, country);
 
     let countryName = country ? country.name : ''/* 'Unknown' */;
     if(countryName != selectCountryCode.value) {
@@ -180,8 +172,10 @@ export default () => {
       lastCountrySelected = countryName;
     }
 
-    if(this.value.length >= 9) {
+    if(country && (this.value.length - 1) >= (country.pattern ? country.pattern.length : 9)) {
       btnNext.style.display = '';
+    } else {
+      btnNext.style.display = 'none';
     }
   });
 

src/countries.dat

@@ -0,0 +1,251 @@
+7 840;AB;Abkhazia;;0;
+93;AF;Afghanistan;93 XXX XXX XXX;11;🇦🇫
+358 18;AX;Aland Islands;;0;🇦🇽
+355;AL;Albania;355 XX XXX XXXX;12;🇦🇱
+213;DZ;Algeria;213 XXX XX XX XX;12;🇩🇿
+1 684;AS;American Samoa;1684 XXX XXXX;11;🇦🇸
+376;AD;Andorra;376 XX XX XX;9;🇦🇩
+244;AO;Angola;244 XXX XXX XXX;12;🇦🇴
+1 264;AI;Anguilla;1264 XXX XXXX;11;🇦🇮
+1 268;AG;Antigua & Barbuda;1268 XXX XXXX;11;🇦🇬
+54;AR;Argentina;;0;🇦🇷
+374;AM;Armenia;374 XX XXX XXX;11;🇦🇲
+297;AW;Aruba;297 XXX XXXX;10;🇦🇼
+247;SH;Ascension;290 XX XXX;8;🇸🇭
+61;AU;Australia;61 XXX XXX XXX;11;🇦🇺
+672;AU;Australian External Territories;61 XXX XXX XXX;11;🇦🇺
+43;AT;Austria;;0;🇦🇹
+994;AZ;Azerbaijan;994 XX XXX XX XX;12;🇦🇿
+1 242;BS;Bahamas;1242 XXX XXXX;11;🇧🇸
+973;BH;Bahrain;973 XXXX XXXX;11;🇧🇭
+880;BD;Bangladesh;;0;🇧🇩
+1 246;BB;Barbados;1246 XXX XXXX;11;🇧🇧
+1 268;AG;Barbuda;1268 XXX XXXX;11;🇦🇬
+375;BY;Belarus;375 XX XXX XXXX;12;🇧🇾
+32;BE;Belgium;32 XXX XX XX XX;11;🇧🇪
+501;BZ;Belize;;0;🇧🇿
+229;BJ;Benin;229 XX XXX XXX;11;🇧🇯
+1 441;BM;Bermuda;1441 XXX XXXX;11;🇧🇲
+975;BT;Bhutan;;0;🇧🇹
+591;BO;Bolivia;591 X XXX XXXX;11;🇧🇴
+599 7;BQ;Caribbean Netherlands;;0;🇧🇶
+387;BA;Bosnia & Herzegovina;;0;🇧🇦
+267;BW;Botswana;267 XX XXX XXX;11;🇧🇼
+55;BR;Brazil;55 XX XXXXX XXXX;13;🇧🇷
+246;IO;British Indian Ocean Territory;246 XXX XXXX;10;🇮🇴
+1 284;VG;British Virgin Islands;1284 XXX XXXX;11;🇻🇬
+673;BN;Brunei;673 XXX XXXX;10;🇧🇳
+359;BG;Bulgaria;;0;🇧🇬
+226;BF;Burkina Faso;226 XX XX XX XX;11;🇧🇫
+95;MM;Myanmar (Burma);;0;🇲🇲
+257;BI;Burundi;257 XX XX XXXX;11;🇧🇮
+855;KH;Cambodia;;0;🇰🇭
+237;CM;Cameroon;237 XXXX XXXX;11;🇨🇲
+1;CA;Canada;1 XXX XXX XXXX;11;🇨🇦
+238;CV;Cape Verde;238 XXX XXXX;10;🇨🇻
+1 345;KY;Cayman Islands;1345 XXX XXXX;11;🇰🇾
+236;CF;Central African Republic;236 XX XX XX XX;11;🇨🇫
+235;TD;Chad;235 XX XX XX XX;11;🇹🇩
+56;CL;Chile;56 X XXXX XXXX;11;🇨🇱
+86;CN;China;86 XXX XXXX XXXX;13;🇨🇳
+61;CX;Christmas Island;;0;🇨🇽
+61;CC;Cocos (Keeling) Islands;;0;🇨🇨
+57;CO;Colombia;57 XXX XXX XXXX;12;🇨🇴
+269;KM;Comoros;269 XXX XXXX;10;🇰🇲
+242;CG;Congo - Brazzaville;242 XX XXX XXXX;12;🇨🇬
+243;CD;Congo - Kinshasa;243 XX XXX XXXX;12;🇨🇩
+682;CK;Cook Islands;;0;🇨🇰
+506;CR;Costa Rica;;0;🇨🇷
+225;CI;Cote d’Ivoire;225 XX XXX XXX;11;🇨🇮
+385;HR;Croatia;;0;🇭🇷
+53;CU;Cuba;53 XXXX XXXX;10;🇨🇺
+599 9;CW;Curacao;;0;🇨🇼
+357;CY;Cyprus;357 XXXX XXXX;11;🇨🇾
+420;CZ;Czech Republic;;0;🇨🇿
+45;DK;Denmark;45 XXXX XXXX;10;🇩🇰
+246;DG;Diego Garcia;;0;🇩🇬
+253;DJ;Djibouti;253 XX XX XX XX;11;🇩🇯
+1 767;DM;Dominica;1767 XXX XXXX;11;🇩🇲
+1 809 and 1 829;DO;Dominican Republic;1 XXX XXX XXXX;11;🇩🇴
+670;TL;Timor-Leste;;0;🇹🇱
+593;EC;Ecuador;;0;🇪🇨
+20;EG;Egypt;20 XX XXX XXXX;11;🇪🇬
+503;SV;El Salvador;503 XXXX XXXX;11;🇸🇻
+240;GQ;Equatorial Guinea;240 XXX XXX XXX;12;🇬🇶
+291;ER;Eritrea;291 X XXX XXX;10;🇪🇷
+372;EE;Estonia;;0;🇪🇪
+251;ET;Ethiopia;251 XX XXX XXXX;12;🇪🇹
+500;FK;Falkland Islands;;0;🇫🇰
+298;FO;Faroe Islands;298 XXX XXX;9;🇫🇴
+679;FJ;Fiji;;0;🇫🇯
+358;FI;Finland;;0;🇫🇮
+33;FR;France;33 X XX XX XX XX;11;🇫🇷
+594;GF;French Guiana;;0;🇬🇫
+689;PF;French Polynesia;;0;🇵🇫
+241;GA;Gabon;241 X XX XX XX;10;🇬🇦
+220;GM;Gambia;220 XXX XXXX;10;🇬🇲
+995;GE;Georgia;;0;🇬🇪
+49;DE;Germany;49 XXX XXXXXXXX;13;🇩🇪
+233;GH;Ghana;;0;🇬🇭
+350;GI;Gibraltar;350 XXXX XXXX;11;🇬🇮
+30;GR;Greece;30 XX XXXX XXXX;12;🇬🇷
+299;GL;Greenland;299 XXX XXX;9;🇬🇱
+1 473;GD;Grenada;1473 XXX XXXX;11;🇬🇩
+590;GP;Guadeloupe;;0;🇬🇵
+1 671;GU;Guam;1671 XXX XXXX;11;🇬🇺
+502;GT;Guatemala;502 X XXX XXXX;11;🇬🇹
+44;GG;Guernsey;;0;🇬🇬
+224;GN;Guinea;224 XXX XXX XXX;12;🇬🇳
+245;GW;Guinea-Bissau;245 XXX XXXX;10;🇬🇼
+592;GY;Guyana;;0;🇬🇾
+509;HT;Haiti;;0;🇭🇹
+504;HN;Honduras;504 XXXX XXXX;11;🇭🇳
+852;HK;Hong Kong SAR China;;0;🇭🇰
+36;HU;Hungary;36 XX XXX XXXX;11;🇭🇺
+354;IS;Iceland;354 XXX XXXX;10;🇮🇸
+91;IN;India;91 XXXXX XXXXX;12;🇮🇳
+62;ID;Indonesia;;0;🇮🇩
+98;IR;Iran;98 XXX XXX XXXX;12;🇮🇷
+964;IQ;Iraq;964 XXX XXX XXXX;13;🇮🇶
+353;IE;Ireland;353 XX XXX XXXX;12;🇮🇪
+972;IL;Israel;972 XX XXX XXXX;12;🇮🇱
+39;IT;Italy;39 XXX XXX XXXX;12;🇮🇹
+1 876;JM;Jamaica;1876 XXX XXXX;11;🇯🇲
+47 79;SJ;Svalbard & Jan Mayen;;0;🇸🇯
+81;JP;Japan;81 XX XXXX XXXX;12;🇯🇵
+44;JE;Jersey;;0;🇯🇪
+962;JO;Jordan;962 X XXXX XXXX;12;🇯🇴
+7 7;KZ;Kazakhstan;7 XXX XXX XX XX;11;🇰🇿
+254;KE;Kenya;254 XXX XXX XXX;12;🇰🇪
+686;KI;Kiribati;;0;🇰🇮
+850;KP;North Korea;;0;🇰🇵
+82;KR;South Korea;;0;🇰🇷
+965;KW;Kuwait;965 XXXX XXXX;11;🇰🇼
+996;KG;Kyrgyzstan;;0;🇰🇬
+856;LA;Laos;;0;🇱🇦
+371;LV;Latvia;371 XXX XXXXX;11;🇱🇻
+961;LB;Lebanon;;0;🇱🇧
+266;LS;Lesotho;266 XX XXX XXX;11;🇱🇸
+231;LR;Liberia;;0;🇱🇷
+218;LY;Libya;218 XX XXX XXXX;12;🇱🇾
+423;LI;Liechtenstein;;0;🇱🇮
+370;LT;Lithuania;370 XXX XXXXX;11;🇱🇹
+352;LU;Luxembourg;;0;🇱🇺
+853;MO;Macau SAR China;;0;🇲🇴
+389;MK;Macedonia;;0;🇲🇰
+261;MG;Madagascar;261 XX XX XXX XX;12;🇲🇬
+265;MW;Malawi;;0;🇲🇼
+60;MM;Malaysia;;0;🇲🇲
+960;MV;Maldives;;0;🇲🇻
+223;ML;Mali;223 XXXX XXXX;11;🇲🇱
+356;MT;Malta;356 XX XX XX XX;11;🇲🇹
+692;MH;Marshall Islands;;0;🇲🇭
+596;MQ;Martinique;;0;🇲🇶
+222;MR;Mauritania;222 XXXX XXXX;11;🇲🇷
+230;MU;Mauritius;;0;🇲🇺
+262;YT;Mayotte;;0;🇾🇹
+52;MX;Mexico;;0;🇲🇽
+691;FM;Micronesia;;0;🇫🇲
+373;MD;Moldova;373 XX XXX XXX;11;🇲🇩
+377;MC;Monaco;377 XXXX XXXX;11;🇲🇨
+976;MN;Mongolia;;0;🇲🇳
+382;ME;Montenegro;;0;🇲🇪
+1 664;MS;Montserrat;1664 XXX XXXX;11;🇲🇸
+212;MA;Morocco;212 XX XXX XXXX;12;🇲🇦
+258;MZ;Mozambique;258 XX XXX XXXX;12;🇲🇿
+264;NA;Namibia;264 XX XXX XXXX;12;🇳🇦
+674;NR;Nauru;;0;🇳🇷
+977;NP;Nepal;;0;🇳🇵
+31;NL;Netherlands;31 X XX XX XX XX;11;🇳🇱
+687;NC;New Caledonia;;0;🇳🇨
+64;NZ;New Zealand;;0;🇳🇿
+505;NI;Nicaragua;505 XXXX XXXX;11;🇳🇮
+227;NE;Niger;227 XX XX XX XX;11;🇳🇪
+234;NG;Nigeria;;0;🇳🇬
+683;NU;Niue;;0;🇳🇺
+672;NF;Norfolk Island;;0;🇳🇫
+1 670;MP;Northern Mariana Islands;1670 XXX XXXX;11;🇲🇵
+47;NO;Norway;47 XXXX XXXX;10;🇳🇴
+968;OM;Oman;968 XXXX XXXX;11;🇴🇲
+92;PK;Pakistan;92 XXX XXX XXXX;12;🇵🇰
+680;PW;Palau;;0;🇵🇼
+970;PS;Palestinian Territories;970 XXX XX XXXX;12;🇵🇸
+507;PA;Panama;507 XXXX XXXX;11;🇵🇦
+675;PG;Papua New Guinea;;0;🇵🇬
+595;PY;Paraguay;595 XXX XXX XXX;12;🇵🇾
+51;PE;Peru;51 XXX XXX XXX;11;🇵🇪
+63;PH;Philippines;63 XXX XXX XXXX;12;🇵🇭
+64;PN;Pitcairn Islands;;0;🇵🇳
+48;PL;Poland;48 XXX XXX XXX;11;🇵🇱
+351;PT;Portugal;351 X XXXX XXXX;12;🇵🇹
+1 787 and 1 939;PR;Puerto Rico;1 XXX XXX XXXX;11;🇵🇷
+974;QA;Qatar;;0;🇶🇦
+262;RE;Reunion;262 XXX XXX XXX;12;🇷🇪
+40;RO;Romania;40 XXX XXX XXX;11;🇷🇴
+7;RU;Russia;7 XXX XXX XX XX;11;🇷🇺
+250;RW;Rwanda;250 XXX XXX XXX;12;🇷🇼
+590;BL;St. Barthelemy;;0;🇧🇱
+290;SH;St. Helena;290 XX XXX;8;🇸🇭
+1 869;KN;St. Kitts & Nevis;1869 XXX XXXX;11;🇰🇳
+1 758;LC;St. Lucia;1758 XXX XXXX;11;🇱🇨
+590;MF;St. Martin (France);;0;🇲🇫
+508;PM;St. Pierre and Miquelon;;0;🇵🇲
+1 784;VC;St. Vincent and the Grenadines;1784 XXX XXXX;11;🇻🇨
+685;WS;Samoa;;0;🇼🇸
+378;SM;San Marino;378 XXX XXX XXXX;13;🇸🇲
+239;ST;São Tome & Principe;239 XX XXXXX;10;🇸🇹
+966;SA;Saudi Arabia;;0;🇸🇦
+221;SN;Senegal;221 XX XXX XXXX;12;🇸🇳
+381;RS;Serbia;381 XX XXX XXXX;12;🇷🇸
+248;SC;Seychelles;248 X XX XX XX;10;🇸🇨
+232;SL;Sierra Leone;232 XX XXX XXX;11;🇸🇱
+65;SG;Singapore;65 XXXX XXXX;10;🇸🇬
+599 3;BQ;Sint Eustatius;;0;🇧🇶
+1 721;SX;Sint Maarten;1721 XXX XXXX;11;🇸🇽
+421;SK;Slovakia;;0;🇸🇰
+386;SI;Slovenia;;0;🇸🇮
+677;SB;Solomon Islands;;0;🇸🇧
+252;SO;Somalia;252 XX XXX XXX;11;🇸🇴
+27;ZA;South Africa;27 XX XXX XXXX;11;🇿🇦
+500;GS;South Georgia & South Sandwich Islands;;0;🇬🇸
+995 34;;South Ossetia;;0;
+211;SS;South Sudan;211 XX XXX XXXX;12;🇸🇸
+34;ES;Spain;34 XXX XXX XXX;11;🇪🇸
+94;LK;Sri Lanka;94 XX XXX XXXX;11;🇱🇰
+249;SD;Sudan;249 XX XXX XXXX;12;🇸🇩
+597;SR;Suriname;597 XXX XXXX;10;🇸🇷
+47 79;SJ;Svalbard;;0;🇸🇯
+268;SZ;Swaziland;268 XXXX XXXX;11;🇸🇿
+46;SE;Sweden;46 XX XXX XXXX;11;🇸🇪
+41;CH;Switzerland;41 XX XXX XXXX;11;🇨🇭
+963;SY;Syria;;0;🇸🇾
+886;TW;Taiwan;;0;🇹🇼
+992;TJ;Tajikistan;;0;🇹🇯
+255;TZ;Tanzania;255 XX XXX XXXX;12;🇹🇿
+66;TH;Thailand;66 X XXXX XXXX;11;🇹🇭
+228;TG;Togo;228 XX XXX XXX;11;🇹🇬
+690;TK;Tokelau;;0;🇹🇰
+676;TO;Tonga;;0;🇹🇴
+1 868;TT;Trinidad & Tobago;1868 XXX XXXX;11;🇹🇹
+216;TN;Tunisia;216 XX XXX XXX;11;🇹🇳
+90;TR;Turkey;90 XXX XXX XXXX;12;🇹🇷
+993;TM;Turkmenistan;993 XX XXXXXX;11;🇹🇲
+1 649;TC;Turks & Caicos Islands;1649 XXX XXXX;11;🇹🇨
+688;TV;Tuvalu;;0;🇹🇻
+256;UG;Uganda;256 XX XXX XXXX;12;🇺🇬
+380;UA;Ukraine;380 XX XXX XX XX;12;🇺🇦
+971;AE;United Arab Emirates;971 XX XXX XXXX;12;🇦🇪
+44;GB;United Kingdom;44 XXXX XXXXXX;12;🇬🇧
+1;US;United States;1 XXX XXX XXXX;11;🇺🇸
+598;UY;Uruguay;598 XXXX XXXX;11;🇺🇾
+1 340;VI;U.S. Virgin Islands;1340 XXX XXXX;11;🇻🇮
+998;UZ;Uzbekistan;998 XX XXXXXXX;12;🇺🇿
+678;VU;Vanuatu;;0;🇻🇺
+58;VE;Venezuela;58 XXX XXX XXXX;12;🇻🇪
+39 06 698;VA;Vatican City;;0;🇻🇦
+84;VN;Vietnam;;0;🇻🇳
+681;WF;Wallis & Futuna;;0;🇼🇫
+967;YE;Yemen;967 XXX XXX XXX;12;🇾🇪
+260;ZM;Zambia;260 XX XXX XXXX;12;🇿🇲
+255;;Zanzibar;;0;
+263;ZW;Zimbabwe;263 XX XXX XXXX;12;🇿🇼

src/format_jsons.js

@@ -1,13 +1,16 @@
 let emoji = require('./emoji_pretty.json');
-let countries = require('./countries_pretty.json');
+//let countries = require('./countries_pretty.json');
 
-console.log(emoji, countries);
+let countries = require('fs').readFileSync('./countries.dat').toString();
+console.log(countries);
+
+//console.log(emoji, countries);
 
 let formatted = emoji.filter(e => e.has_img_apple);
 
 /* formatted = formatted.map(e => {
   let {unified, name, short_names, category, sheet_x, sheet_y} = e;
-
+  
   return {
     unified,
     //name,
@@ -24,10 +27,10 @@ require('fs').writeFileSync('./emoji.json', JSON.stringify(formatted)); */
   let obj = {};
   formatted.forEach(e => {
     let {unified, name, short_names, category, sheet_x, sheet_y, sort_order} = e;
-
+    
     let emoji = unified.split('-')
-      .reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), '');
+    .reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), '');
-  
+    
     obj[/* unified */emoji] = {
       //unified,
       //name,
@@ -46,13 +49,13 @@ require('fs').writeFileSync('./emoji.json', JSON.stringify(formatted)); */
   let obj = {};
   formatted.forEach(e => {
     let {unified, name, short_names, category, sheet_x, sheet_y} = e;
-
+    
     
     let categories = ["Smileys & People", "Animals & Nature", "Food & Drink", 
-      "Travel & Places", "Activities", "Objects", "Symbols", "Flags", "Skin Tones"];
+    "Travel & Places", "Activities", "Objects", "Symbols", "Flags", "Skin Tones"];
     let categoryId = categories.findIndex(c => c == category);
     if(categoryId === -1) throw new Error(category);
-  
+    
     obj[unified] = [
       sheet_x,
       sheet_y,
@@ -63,13 +66,31 @@ require('fs').writeFileSync('./emoji.json', JSON.stringify(formatted)); */
   require('fs').writeFileSync('./emoji.json', JSON.stringify(obj));
 } */
 
-/* {
+{
   let arr = [];
-  countries.forEach(e => {
+  /* countries.forEach(e => {
     let {name, code, phoneCode} = e;
-  
+    
     arr.push([name, code, phoneCode]);
+  }); */
+  
+  const lines = countries.split('\n');
+  const data2 = [];
+  lines.forEach(x => {
+    if(!x.trim()) return;
+    const split = x.split(';');
+    const item = {
+      phoneCode: split[0],
+      code: split[1],
+      name: split[2],
+      pattern: split[3],
+      //count: Number(split[4]),
+      emoji: split[5]
+    };
+
+    arr.push(item);
+    console.log(item);
   });
   
   require('fs').writeFileSync('./countries.json', JSON.stringify(arr));
-} */
+}

src/lib/appManagers/appImManager.ts

@@ -916,7 +916,8 @@ export class AppImManager {
               }
 
               return true;
-            })/* .then(() => {
+            }, null, '', false, !!message.pending)/* .then(() => {
+              
               attachmentDiv.style.width = '';
               attachmentDiv.style.height = '';
             }) */;

src/lib/appManagers/appSidebarRight.ts

@@ -1,4 +1,4 @@
-import { LazyLoadQueue, horizontalMenu, wrapDocument } from "../../components/misc";
+import { LazyLoadQueue, horizontalMenu, wrapDocument, formatPhoneNumber } from "../../components/misc";
 import { isElementInViewport, $rootScope } from "../utils";
 import appMessagesManager from "./appMessagesManager";
 import appPhotosManager from "./appPhotosManager";
@@ -319,7 +319,7 @@ class AppSidebarRight {
     if($rootScope.selectedPeerID > 0) {
       let user = appUsersManager.getUser($rootScope.selectedPeerID);
       if(user.phone) {
-        setText(user.phone, this.profileElements.phone);
+        setText('+' + formatPhoneNumber(user.phone).formatted, this.profileElements.phone);
       }
 
       appProfileManager.getProfile($rootScope.selectedPeerID, true).then(userFull => {

src/lib/lottieLoader.ts

@@ -94,9 +94,11 @@ class LottieLoader {
 
   public getAnimation(el: HTMLElement, group = '') {
     let groups = group ? [group] : Object.keys(this.animations);
+    console.log('getAnimation', groups, this.animations);
     for(let group of groups) {
       let animations = this.animations[group];
 
+      
       let animation = animations.find(a => a.container === el);
       if(animation) return animation.animation;
     }

src/scss/style.scss

@@ -545,15 +545,18 @@ input {
 
 .select-wrapper {
   max-height: 300px;
-  height: auto;
+  /* height: auto; */
   position: absolute;
   width: 100%;
   top: calc(100% + 10px);
   left: 0;
-  overflow-y: auto;
+  overflow: hidden;
   background-color: #fff;
   z-index: 3;
   border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
   
   ul {
     margin: 10px 0;
@@ -1101,6 +1104,11 @@ div.scrollable::-webkit-scrollbar {
   height: 0;
 }
 
+div.scrollable::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+}
+
 ::-webkit-scrollbar-button {
   width: 0;
   height: 0;