Fix possible emoji in username

src/components/chatInput.ts

@@ -561,11 +561,14 @@ export class ChatInput {
     this.btnSend.addEventListener('click', onBtnSendClick);
 
     if(this.recorder) {
-      this.btnCancelRecord.addEventListener('click', () => {
+      const onCancelRecordClick = (e: Event) => {
+        cancelEvent(e);
         this.recordCanceled = true;
         this.recorder.stop();
         opusDecodeController.setKeepAlive(false);
-      });
+      };
+      this.btnCancelRecord.addEventListener('touchend', onCancelRecordClick);
+      this.btnCancelRecord.addEventListener('click', onCancelRecordClick);
 
       this.recorder.onstop = () => {
         this.recording = false;
@@ -603,7 +606,7 @@ export class ChatInput {
   
         let perf = performance.now();
         opusDecodeController.decode(typedArray, true).then(result => {
-          console.log('WAVEFORM!:', /* waveform,  */performance.now() - perf);
+          //console.log('WAVEFORM!:', /* waveform,  */performance.now() - perf);
   
           opusDecodeController.setKeepAlive(false);
   

src/components/emoticonsDropdown/tabs/emoji.ts

@@ -67,7 +67,9 @@ export default class EmojiTab implements EmoticonsTab {
           console.log('append emoji', emoji, emojiUnicode(emoji));
         } */
 
-        this.appendEmoji(emoji/* .replace(/[\ufe0f\u2640\u2642\u2695]/g, '') */, itemsDiv);
+        emoji = emoji.split('-').reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), '');
+
+        this.appendEmoji(emoji/* .replace(/[\ufe0f\u2640\u2642\u2695]/g, '') */, itemsDiv, false, false);
 
         /* if(category == 'Smileys & Emotion') {
           console.log('appended emoji', emoji, itemsDiv.children[itemsDiv.childElementCount - 1].innerHTML, emojiUnicode(emoji));
@@ -120,13 +122,26 @@ export default class EmojiTab implements EmoticonsTab {
     this.init = null;
   }
 
-  private appendEmoji(emoji: string, container: HTMLElement, prepend = false) {
+  private appendEmoji(emoji: string, container: HTMLElement, prepend = false, unified = false) {
     //const emoji = details.unified;
     //const emoji = (details.unified as string).split('-')
     //.reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), '');
 
     const spanEmoji = document.createElement('span');
-    const kek = RichTextProcessor.wrapEmojiText(emoji);
+
+    let kek: string;
+    if(unified) {
+      kek = RichTextProcessor.wrapRichText('_', {
+        entities: [{
+          _: 'messageEntityEmoji',
+          offset: 0,
+          length: emoji.split('-').length,
+          unicode: emoji
+        }]
+      });
+    } else {
+      kek = RichTextProcessor.wrapEmojiText(emoji);
+    }
 
     /* if(!kek.includes('emoji')) {
       console.log(emoji, kek, spanEmoji, emoji.length, new TextEncoder().encode(emoji), emojiUnicode(emoji));

src/lib/richtextprocessor.ts

@@ -86,7 +86,19 @@ var markdownEntities = {
 };
 
 function getEmojiSpritesheetCoords(emojiCode: string) {
-  return encodeEmoji(emojiCode).replace(/(-fe0f|fe0f)/g, '');
+  let unified = encodeEmoji(emojiCode)/* .replace(/(-fe0f|fe0f)/g, '') */;
+
+  if(unified == '1f441-200d-1f5e8') {
+    unified = '1f441-fe0f-200d-1f5e8-fe0f';
+  }
+
+  if(!emojiData.hasOwnProperty(unified)/*  && !emojiData.hasOwnProperty(unified.replace(/(-fe0f|fe0f)/g, '')) */) {
+  //if(!emojiData.hasOwnProperty(emojiCode) && !emojiData.hasOwnProperty(emojiCode.replace(/[\ufe0f\u200d]/g, ''))) {
+    //console.error('lol', unified);
+    return null;
+  }
+
+  return unified.replace(/(-fe0f|fe0f)/g, '');
 }
 function parseEntities(text: string, options = {}) {
   var match;

src/scripts/format_jsons.js

@@ -8,6 +8,41 @@ let countries = require('fs').readFileSync('./countries.dat').toString();
 
 let formatted = emoji.filter(e => e.has_img_apple);
 
+function encodeEmoji(emojiText) {
+  const codepoints = toCodePoints(removeVS16s(emojiText)).join('-');
+  return codepoints;
+}
+
+const vs16RegExp = /\uFE0F/g;
+// avoid using a string literal like '\u200D' here because minifiers expand it inline
+const zeroWidthJoiner = String.fromCharCode(0x200d);
+
+const removeVS16s = (rawEmoji) => (rawEmoji.indexOf(zeroWidthJoiner) < 0 ? rawEmoji.replace(vs16RegExp, '') : rawEmoji);
+
+function toCodePoints(unicodeSurrogates) {
+  const points = [];
+  let char = 0;
+  let previous = 0;
+  let i = 0;
+  while(i < unicodeSurrogates.length) {
+    char = unicodeSurrogates.charCodeAt(i++);
+    if(previous) {
+      points.push((0x10000 + ((previous - 0xd800) << 10) + (char - 0xdc00)).toString(16));
+      previous = 0;
+    } else if (char > 0xd800 && char <= 0xdbff) {
+      previous = char;
+    } else {
+      points.push(char.toString(16));
+    }
+  }
+
+  if(points.length && points[0].length == 2) {
+    points[0] = '00' + points[0];
+  }
+
+  return points;
+}
+
 /* formatted = formatted.map(e => {
   let {unified, name, short_names, category, sheet_x, sheet_y} = e;
   
@@ -87,13 +122,28 @@ if(false) {
   });
 
   let obj = {};
-  formatted.forEach(e => {
+  if(false/*  || true */) formatted.forEach(e => {
     let {unified, name, short_names, category, sheet_x, sheet_y, sort_order} = e;
 
     let emoji = unified/* .replace(/-FE0F/gi, '') */.split('-')
     .reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), '');
 
-    //emoji = emoji.replace(/\ufe0f/g, '');
+    //emoji = emoji.replace(/[\ufe0f\u200d]/g, '');
+    
+    let c = categories[category] === undefined ? 9 : categories[category];
+    //obj[emoji] = '' + c + sort_order;
+    //obj[emoji] = +('' + (c * 1000 + sort_order)).replace(/0+/g, '0').replace(/^(\d)0(\d)/g, '$1$2');
+    obj[emoji] = e.sort_order !== undefined ? +('' + c + sort_order) : 0;
+  });
+
+  if(true) 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)), '');
+
+    emoji = encodeEmoji(emoji);
+    //emoji = emoji.replace(/(-fe0f|fe0f)/g, '');
     
     let c = categories[category] === undefined ? 9 : categories[category];
     //obj[emoji] = '' + c + sort_order;

src/scss/partials/_chatBubble.scss

@@ -1103,6 +1103,11 @@ $bubble-margin: .25rem;
 
 .bubble-audio .time {
   width: unset !important;
+  padding-left: 14px !important;
+
+  @include respond-to(handhelds) {
+    padding-left: 0px !important;
+  }
 }
 
 .bubble.is-in {

src/scss/partials/_ckin.scss

@@ -212,7 +212,8 @@
     align-items: center;
 
     @include respond-to(handhelds) {
-      margin-right: .75rem;
+      //margin: -3px .75rem 0 2px;
+      margin: -3px 2px 0 2px;
     }
     
     &__icon {
@@ -221,6 +222,11 @@
       height: 24px;
       margin-right: 8px;
       cursor: pointer;
+
+      @include respond-to(handhelds) {
+        width: 20px;
+        height: 20px;
+      }
     }
 
     .progress-line {

src/scss/partials/_rightSidebar.scss

@@ -419,13 +419,22 @@
           min-height: 60px;
         }
 
-        @include respond-to(handhelds) {
+        .preloader-container {
-          .preloader-container {
+          .preloader-circular {
+            background-color: rgba(0, 0, 0, 0.35);
+          }
+
+          @include respond-to(handhelds) {
             width: 40px;
             height: 40px;
             top: 9px;
             left: 2px;
           }
+
+          @include respond-to(not-handhelds) {
+            width: 38px;
+            height: 38px;
+          }
         }
 
         .audio {
@@ -460,6 +469,11 @@
             border-radius: 50%;
             background-color: #50a2e9;
             align-items: center;
+
+            @include respond-to(not-handhelds) {
+              width: 48px;
+              height: 48px;
+            }
           }
 
           &-toggle, &-download {