Fix blinking stickers, gifs

Fix icons Fix input search layout Fix message input layout
2021-01-11 19:21:03 +04:00 · 2021-01-11 19:21:03 +04:00 · 640ff63209
commit 640ff63209
parent 09ca70ecb7
29 changed files with 513 additions and 437 deletions
--- a/src/components/chat/bubbles.ts
+++ b/src/components/chat/bubbles.ts
@ -1967,7 +1967,8 @@ export default class ChatBubbles {
              play: true,
              loop: true,
              emoji: bubble.classList.contains('emoji-big') ? messageMessage : undefined,
-              withThumb: true
+              withThumb: true,
+              loadPromises
            });

            break;
@ -2219,7 +2220,7 @@ export default class ChatBubbles {

    if(savedFrom && this.peerId !== REPLIES_PEER_ID) {
      const goto = document.createElement('div');
-      goto.classList.add('bubble-beside-button', 'goto-original', 'tgico-arrow-next');
+      goto.classList.add('bubble-beside-button', 'goto-original', 'tgico-arrow_next');
      bubbleContainer.append(goto);
      bubble.dataset.savedFrom = savedFrom;
      bubble.classList.add('with-beside-button');
--- a/src/components/chat/input.ts
+++ b/src/components/chat/input.ts
@ -134,7 +134,7 @@ export default class ChatInput {
    this.inputContainer.append(this.rowsWrapper);
    this.chatInput.append(this.inputContainer);

-    this.goDownBtn = Button('bubbles-go-down btn-corner btn-circle z-depth-1 hide', {icon: 'arrow-down'});
+    this.goDownBtn = Button('bubbles-go-down btn-corner btn-circle z-depth-1 hide', {icon: 'arrow_down'});
    this.goDownUnreadBadge = document.createElement('span');
    this.goDownUnreadBadge.classList.add('badge', 'badge-24', 'badge-green');
    this.goDownBtn.append(this.goDownUnreadBadge);
@ -172,7 +172,7 @@ export default class ChatInput {
    this.inputScroll = new Scrollable(this.inputMessageContainer);

    if(this.chat.type === 'chat') {
-      this.btnScheduled = ButtonIcon('schedule', {noRipple: true});
+      this.btnScheduled = ButtonIcon('scheduled', {noRipple: true});
      this.btnScheduled.classList.add('btn-scheduled', 'hide');

      attachClickEvent(this.btnScheduled, (e) => {
--- a/src/components/chat/markupTooltip.ts
+++ b/src/components/chat/markupTooltip.ts
@ -61,7 +61,7 @@ export default class MarkupTooltip {
      }
    });

-    this.linkBackButton = ButtonIcon('back', {noRipple: true});
+    this.linkBackButton = ButtonIcon('arrow_back', {noRipple: true});
    this.linkInput = document.createElement('input');
    this.linkInput.placeholder = 'Enter URL...';
    this.linkInput.classList.add('input-clear');
--- a/src/components/chat/search.ts
+++ b/src/components/chat/search.ts
@ -32,7 +32,7 @@ export default class ChatSearch {
    this.element.classList.add('sidebar-header', 'chat-search', 'chatlist-container');

    this.backBtn = document.createElement('button');
-    this.backBtn.classList.add('btn-icon', 'tgico-back', 'sidebar-close-button');
+    this.backBtn.classList.add('btn-icon', 'tgico-arrow_back', 'sidebar-close-button');
    ripple(this.backBtn);
    
    this.backBtn.addEventListener('click', () => {
--- a/src/components/chat/topbar.ts
+++ b/src/components/chat/topbar.ts
@ -55,7 +55,7 @@ export default class ChatTopbar {
    this.container = document.createElement('div');
    this.container.classList.add('sidebar-header', 'topbar');

-    this.btnBack = ButtonIcon('back sidebar-close-button', {noRipple: true});
+    this.btnBack = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true});

    // * chat info section
    this.chatInfo = document.createElement('div');
--- a/src/components/emoticonsDropdown/tabs/stickers.ts
+++ b/src/components/emoticonsDropdown/tabs/stickers.ts
@ -72,6 +72,8 @@ export class SuperStickerRenderer {
    
    const size = mediaSizes.active.esgSticker.width;

+    console.log('processVisibleDiv:', div);
+
    const promise = wrapSticker({
      doc, 
      div: div as HTMLDivElement,
--- a/src/components/inputSearch.ts
+++ b/src/components/inputSearch.ts
@ -27,10 +27,10 @@ export default class InputSearch {
    this.input = this.inputField.input;
    this.input.classList.add('input-search-input');

-    const searchIcon = document.createElement('span');
+    const searchIcon = document.createElement('i');
    searchIcon.classList.add('tgico', 'tgico-search');

-    this.clearBtn = document.createElement('span');
+    this.clearBtn = document.createElement('i');
    this.clearBtn.classList.add('tgico', 'btn-icon', 'tgico-close');

    this.input.addEventListener('input', this.onInput);
--- a/src/components/lazyLoadQueue.ts
+++ b/src/components/lazyLoadQueue.ts
@ -224,7 +224,9 @@ export default class LazyLoadQueue extends LazyLoadQueueIntersector {

  private onVisibilityChange = (target: HTMLElement, visible: boolean) => {
    if(visible) {
-      this.log('isIntersecting', target);
+      /* if(DEBUG) {
+        this.log('isIntersecting', target);
+      } */

      // need for set element first if scrolled
      findAndSpliceAll(this.queue, (i) => i.div === target).forEach(item => {
@ -271,7 +273,8 @@ export class LazyLoadQueueRepeat extends LazyLoadQueueIntersector {
    this.intersector = new VisibilityIntersector((target, visible) => {
      const spliced = findAndSpliceAll(this.queue, (i) => i.div === target);
      if(visible) {
-        spliced.forEach(item => {
+        const items = spliced.length ? spliced : [this._queue.get(target)];
+        items.forEach(item => {
          this.queue.unshift(item || this._queue.get(target));
        });
      }
--- a/src/components/preloader.ts
+++ b/src/components/preloader.ts
@ -65,17 +65,23 @@ export default class ProgressivePreloader {

    const tempId = --this.tempId;

-    const onEnd = () => {
+    const onEnd = (successfully: boolean) => {
      promise.notify = null;

      if(tempId === this.tempId) {
+        if(successfully) {
+          this.setProgress(100);
+        }
+        
        this.detach();
        this.promise = promise = null;
      }
    };
    
    //promise.catch(onEnd);
-    promise.finally(onEnd);
+    promise
+    .then(() => onEnd(true))
+    .catch(() => onEnd(false));

    if(promise.addNotifyListener) {
      promise.addNotifyListener((details: {done: number, total: number}) => {
--- a/src/components/sidebarLeft/tabs/addMembers.ts
+++ b/src/components/sidebarLeft/tabs/addMembers.ts
@ -16,7 +16,7 @@ export default class AppAddMembersTab extends SliderSuperTab {
  }

  protected init() {
-    this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
+    this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'});
    this.content.append(this.nextBtn);
    
    this.nextBtn.addEventListener('click', () => {
@ -29,7 +29,7 @@ export default class AppAddMembersTab extends SliderSuperTab {
        const promise = this.takeOut(peerIds);

        if(promise instanceof Promise) {
-          this.nextBtn.classList.remove('tgico-arrow-next');
+          this.nextBtn.classList.remove('tgico-arrow_next');
          this.nextBtn.disabled = true;
          putPreloader(this.nextBtn);
          this.selector.freezed = true;
@ -83,7 +83,7 @@ export default class AppAddMembersTab extends SliderSuperTab {
      });
    }

-    this.nextBtn.classList.add('tgico-arrow-next');
+    this.nextBtn.classList.add('tgico-arrow_next');
    this.nextBtn.innerHTML = '';
    this.nextBtn.disabled = false;
    this.nextBtn.classList.toggle('is-visible', this.skippable);
--- a/src/components/sidebarLeft/tabs/newChannel.ts
+++ b/src/components/sidebarLeft/tabs/newChannel.ts
@ -54,7 +54,7 @@ export default class AppNewChannelTab extends SliderSuperTab {
    caption.classList.add('caption');
    caption.innerText = 'You can provide an optional description for your channel.';

-    this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
+    this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'});

    this.nextBtn.addEventListener('click', () => {
      const title = this.channelNameInputField.value;
--- a/src/components/sidebarLeft/tabs/newGroup.ts
+++ b/src/components/sidebarLeft/tabs/newGroup.ts
@ -44,7 +44,7 @@ export default class AppNewGroupTab extends SliderSuperTab {
      this.nextBtn.classList.toggle('is-visible', !!value.length && !this.groupNameInputField.input.classList.contains('error'));
    });

-    this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow-next'});
+    this.nextBtn = Button('btn-corner btn-circle', {icon: 'arrow_next'});

    this.nextBtn.addEventListener('click', () => {
      const title = this.groupNameInputField.value;
--- a/src/components/slider.ts
+++ b/src/components/slider.ts
@ -30,7 +30,7 @@ export class SliderSuperTab implements SliderTab {
    this.header = document.createElement('div');
    this.header.classList.add('sidebar-header');

-    this.closeBtn = ButtonIcon('back sidebar-close-button', {noRipple: true});
+    this.closeBtn = ButtonIcon('arrow_back sidebar-close-button', {noRipple: true});
    this.title = document.createElement('div');
    this.title.classList.add('sidebar-header__title');
    this.header.append(this.closeBtn, this.title);
--- a/src/components/visibilityIntersector.ts
+++ b/src/components/visibilityIntersector.ts
@ -17,7 +17,7 @@ export default class VisibilityIntersector {
      entries.forEach(entry => {
        const target = entry.target as TargetType;

-        if(this.items.get(target) == entry.isIntersecting) {
+        if(this.items.get(target) === entry.isIntersecting) {
          return;
        } else {
          this.items.set(target, entry.isIntersecting);
--- a/src/components/wrappers.ts
+++ b/src/components/wrappers.ts
@ -224,7 +224,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
      preloader = message.media.preloader as ProgressivePreloader;
      preloader.attach(container, false);
    } else if(!doc.downloaded && !doc.supportsStreaming) {
-      const promise = appDocsManager.downloadDoc(doc, undefined, lazyLoadQueue?.queueId);
+      const promise = appDocsManager.downloadDoc(doc, /* undefined,  */lazyLoadQueue?.queueId);
      preloader = new ProgressivePreloader(null, true, false, 'prepend');
      preloader.attach(container, true, promise);

@ -608,7 +608,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
    if(loadPromise) return loadPromise;

    const promise = photo._ === 'document' && photo.mime_type === 'image/gif' ? 
-      appDocsManager.downloadDoc(photo, undefined, lazyLoadQueue?.queueId) : 
+      appDocsManager.downloadDoc(photo, /* undefined,  */lazyLoadQueue?.queueId) : 
      appPhotosManager.preloadPhoto(photo, size, lazyLoadQueue?.queueId);

    if(preloader) {
@ -667,7 +667,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
  };
 }

-export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, onlyThumb, emoji, width, height, withThumb, loop}: {
+export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, onlyThumb, emoji, width, height, withThumb, loop, loadPromises}: {
  doc: MyDocument, 
  div: HTMLElement, 
  middleware?: () => boolean, 
@ -679,7 +679,8 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
  width?: number,
  height?: number,
  withThumb?: boolean,
-  loop?: boolean
+  loop?: boolean,
+  loadPromises?: Promise<any>[]
 }) {
  const stickerType = doc.sticker;

@ -707,29 +708,30 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o

  const toneIndex = emoji ? getEmojiToneIndex(emoji) : -1;
  
+  let loadThumbPromise = deferredPromise<void>();
+  let haveThumbCached = false;
  if((doc.thumbs?.length || doc.stickerCachedThumbs) && !div.firstElementChild && (!doc.downloaded || stickerType == 2 || onlyThumb)/*  && doc.thumbs[0]._ != 'photoSizeEmpty' */) {
    let thumb = doc.stickerCachedThumbs && doc.stickerCachedThumbs[toneIndex] || doc.thumbs[0];
    
    //console.log('wrap sticker', thumb, div);

-    let img: HTMLImageElement;
+    let thumbImage: HTMLImageElement;
    const afterRender = () => {
      if(!div.childElementCount) {
-        div.append(img);
+        thumbImage.classList.add('media-sticker', 'thumbnail');
+        div.append(thumbImage);
+        loadThumbPromise.resolve();
      }
    };

    if('url' in thumb) {
-      img = new Image();
-      renderImageFromUrl(img, thumb.url, afterRender);
+      thumbImage = new Image();
+      renderImageFromUrl(thumbImage, thumb.url, afterRender);
+      haveThumbCached = true;
    } else if('bytes' in thumb) {
-      if(thumb._ == 'photoPathSize') {
+      if(thumb._ === 'photoPathSize') {
        if(thumb.bytes.length) {
-          //if(!doc.w) console.error('no w', doc);
          const d = appPhotosManager.getPathFromPhotoPathSize(thumb);
-          /* if(d == 'Mz' || d.includes('151,48,349,33z')) {
-            console.error('no path', doc);
-          } */
          div.innerHTML = `<svg class="rlottie-vector" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${doc.w || 512} ${doc.h || 512}" xml:space="preserve">
            <path d="${d}"/>
          </svg>`;
@ -738,10 +740,12 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
        }
      } 
      
-      if(thumb && thumb._ != 'photoPathSize' && toneIndex <= 0) {
-        img = new Image();
+      if(thumb && thumb._ !== 'photoPathSize' && toneIndex <= 0) {
+        thumbImage = new Image();
+
        if((webpWorkerController.isWebpSupported() || doc.pFlags.stickerThumbConverted || thumb.url)/*  && false */) {
-          renderImageFromUrl(img, appPhotosManager.getPreviewURLFromThumb(thumb as PhotoSize.photoStrippedSize, true), afterRender);
+          renderImageFromUrl(thumbImage, appPhotosManager.getPreviewURLFromThumb(thumb as PhotoSize.photoStrippedSize, true), afterRender);
+          haveThumbCached = true;
        } else {
          webpWorkerController.convert(doc.id, (thumb as PhotoSize.photoStrippedSize).bytes as Uint8Array).then(bytes => {
            (thumb as PhotoSize.photoStrippedSize).bytes = bytes;
@ -750,20 +754,20 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
            if(middleware && !middleware()) return;
  
            if(!div.childElementCount) {
-              renderImageFromUrl(img, appPhotosManager.getPreviewURLFromThumb(thumb as PhotoSize.photoStrippedSize, true), afterRender);
+              renderImageFromUrl(thumbImage, appPhotosManager.getPreviewURLFromThumb(thumb as PhotoSize.photoStrippedSize, true), afterRender);
            }
          }).catch(() => {});
        }
      }
    } else if(stickerType == 2 && (withThumb || onlyThumb) && toneIndex <= 0) {
-      img = new Image();
+      thumbImage = new Image();

      const load = () => {
        if(div.childElementCount || (middleware && !middleware())) return;

        const r = () => {
          if(div.childElementCount || (middleware && !middleware())) return;
-          renderImageFromUrl(img, (thumb as PhotoSize.photoStrippedSize).url, afterRender);
+          renderImageFromUrl(thumbImage, (thumb as PhotoSize.photoStrippedSize).url, afterRender);
        };
  
        if((thumb as PhotoSize.photoStrippedSize).url) {
@ -779,10 +783,18 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
        return Promise.resolve();
      } else {
        load();
+
+        if((thumb as any).url) {
+          haveThumbCached = true;
+        }
      }
    }
  }

+  if(loadPromises && haveThumbCached) {
+    loadPromises.push(loadThumbPromise);
+  }
+
  if(onlyThumb) { // for sticker panel
    return Promise.resolve();
  }
@ -803,7 +815,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o

      //appDocsManager.downloadDocNew(doc.id).promise.then(res => res.json()).then(async(json) => {
      //fetch(doc.url).then(res => res.json()).then(async(json) => {
-      /* return */ await appDocsManager.downloadDoc(doc, undefined, lazyLoadQueue?.queueId)
+      /* return */ await appDocsManager.downloadDoc(doc, /* undefined,  */lazyLoadQueue?.queueId)
      .then(readBlobAsText)
      //.then(JSON.parse)
      .then(async(json) => {
@ -827,7 +839,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
          const needFadeIn = !element || element.tagName === 'svg';

          const cb = () => {
-            if(element && element != animation.canvas) {
+            if(element && element !== animation.canvas) {
              element.remove();
            }
          };
@ -866,46 +878,60 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
      });

      //console.timeEnd('render sticker' + doc.id);
-    } else if(stickerType == 1) {
-      let img = new Image();
+    } else if(stickerType === 1) {
+      const image = new Image();
+      const thumbImage = div.firstElementChild && div.firstElementChild !== image ? div.firstElementChild : null;
+      const needFadeIn = !downloaded || thumbImage;

-      if(!downloaded && (!div.firstElementChild || div.firstElementChild.tagName != 'IMG')) {
-        img.classList.add('fade-in-transition');
-        img.style.opacity = '0';
+      image.classList.add('media-sticker');

-        /* if(!div.firstElementChild) {
-          div.append(img);
-        } */
+      if(needFadeIn) {
+        image.classList.add('fade-in');
+      }

-        img.addEventListener('load', () => {
-          doc.downloaded = true;
-          
-          window.requestAnimationFrame(() => {
-            img.style.opacity = '';
+      return new Promise((resolve, reject) => {
+        const r = () => {
+          if(middleware && !middleware()) return resolve();
+  
+          renderImageFromUrl(image, doc.url, () => {
+            div.append(image);
+  
+            window.requestAnimationFrame(() => {
+              resolve();
+            });
+  
+            if(needFadeIn) {
+              setTimeout(() => {
+                image.classList.remove('fade-in');
+    
+                if(thumbImage) {
+                  thumbImage.remove();
+                }
+              }, 200);
+            }
          });
-        });
-      }
-
-      const r = () => {
-        if(middleware && !middleware()) return;
-
-        renderImageFromUrl(img, doc.url, () => {
-          if(div.firstElementChild && div.firstElementChild != img) {
-            div.firstElementChild.remove();
-          }
+        };
  
-          div.append(img);
-        });
-      };
-
-      if(doc.url) r();
-      else {
-        appDocsManager.downloadDoc(doc, undefined, lazyLoadQueue?.queueId).then(r);
-      }
+        if(doc.url) r();
+        else {
+          appDocsManager.downloadDoc(doc, /* undefined,  */lazyLoadQueue?.queueId).then(r, resolve);
+        }
+      });
    }
-  }; 
-  
-  return lazyLoadQueue && (!doc.downloaded || stickerType == 2) ? (lazyLoadQueue.push({div, load/* , wasSeen: group == 'chat' && stickerType != 2 */}), Promise.resolve()) : load();
+  };
+
+  const loadPromise: Promise<any> = lazyLoadQueue && (!doc.downloaded || stickerType == 2) ? 
+    (lazyLoadQueue.push({div, load}), Promise.resolve()) : 
+    load();
+
+  if(doc.downloaded && stickerType === 1) {
+    loadThumbPromise = loadPromise;
+    if(loadPromises) {
+      loadPromises.push(loadThumbPromise);
+    }
+  }
+
+  return loadPromise;
 }

 export function wrapReply(title: string, subtitle: string, message?: any) {
--- a/src/index.hbs
+++ b/src/index.hbs
@ -138,7 +138,7 @@
                    <div class="btn-menu-item menu-help tgico-help rp btn-disabled">Help</div>
                  </div>
                </div>
-                <div class="btn-icon tgico-back rp sidebar-back-button"></div>
+                <div class="btn-icon tgico-arrow_back rp sidebar-back-button"></div>
              </div>
            </div>
            <div class="sidebar-content transition zoom-fade">
@ -168,7 +168,7 @@
          </div>
          <div class="sidebar-slider-item">
            <div class="sidebar-header">
-              <button class="btn-icon tgico-back sidebar-close-button"></button>
+              <button class="btn-icon tgico-arrow_back sidebar-close-button"></button>
              <div class="sidebar-header__title">Archived Chats</div>
            </div>
            <div class="sidebar-content">
@ -179,7 +179,7 @@
          </div>
          <div class="sidebar-slider-item" id="contacts-container">
            <div class="sidebar-header">
-              <button class="btn-icon tgico-back sidebar-close-button"></button>
+              <button class="btn-icon tgico-arrow_back sidebar-close-button"></button>
            </div>
            <div class="sidebar-content">
              <div>
@ -189,7 +189,7 @@
          </div>
          <div class="sidebar-slider-item addmembers-container">
            <div class="sidebar-header">
-              <button class="btn-icon tgico-back sidebar-close-button"></button>
+              <button class="btn-icon tgico-arrow_back sidebar-close-button"></button>
              <div class="sidebar-header__title">Add Members</div>
            </div>
            <div class="sidebar-content">
--- a/src/lib/appManagers/appDocsManager.ts
+++ b/src/lib/appManagers/appDocsManager.ts
@ -245,70 +245,61 @@ export class AppDocsManager {

    if(!thumb.url) {
      if('bytes' in thumb) {
-        // * exclude from state
-        defineNotNumerableProperties(thumb, ['url']);
-        promise = blur(appPhotosManager.getPreviewURLFromBytes(thumb.bytes, !!doc.sticker)).then(url => thumb.url = url);
+        promise = blur(appPhotosManager.getPreviewURLFromBytes(thumb.bytes, !!doc.sticker)).then(url => {
+          defineNotNumerableProperties(thumb, ['url']); // * exclude from state
+          const cacheContext = appPhotosManager.getCacheContext(doc);
+          cacheContext.url = thumb.url = url;
+        }) as any;
      } else {
        //return this.getFileURL(doc, false, thumb);
-        promise = this.downloadDoc(doc, thumb);
+        promise = appPhotosManager.preloadPhoto(doc, thumb) as any;
      }
    }

    return {thumb, promise};
  }

-  public getThumb(doc: MyDocument, useBytes = true) {
-    if(doc.thumbs?.length) {
-      let thumb: PhotoSize;
-      if(!useBytes) {
-        thumb = doc.thumbs.find(t => !('bytes' in t));
-      }
-      
-      if(!thumb) {
-        thumb = doc.thumbs[0];
-      }
-
-      return this.getThumbURL(doc, thumb as any);
-    }
-
-    return null;
+  public getThumb(doc: MyDocument, tryNotToUseBytes = true) {
+    const thumb = appPhotosManager.choosePhotoSize(doc, 0, 0, !tryNotToUseBytes);
+    if(thumb._ === 'photoSizeEmpty') return null;
+    return this.getThumbURL(doc, thumb as any);
  }

  public getInputFileName(doc: MyDocument, thumbSize?: string) {
    return getFileNameByLocation(this.getInput(doc, thumbSize), {fileName: doc.file_name});
  }

-  public downloadDoc(doc: MyDocument, thumb?: PhotoSize.photoSize, queueId?: number): DownloadBlob {
-    const fileName = this.getInputFileName(doc, thumb?.type);
+  public downloadDoc(doc: MyDocument/* , thumb?: PhotoSize.photoSize */, queueId?: number): DownloadBlob {
+    const fileName = this.getInputFileName(doc/* , thumb?.type */);

    let download: DownloadBlob = appDownloadManager.getDownload(fileName);
    if(download) {
      return download;
    }

-    const downloadOptions = this.getFileDownloadOptions(doc, thumb, queueId);
+    const downloadOptions = this.getFileDownloadOptions(doc, undefined/* thumb */, queueId);
    download = appDownloadManager.download(downloadOptions);

    const originalPromise = download;
    originalPromise.then((blob) => {
-      if(thumb) {
+      /* if(thumb) {
        defineNotNumerableProperties(thumb, ['url']);
        thumb.url = URL.createObjectURL(blob);
        return;
-      } else if(!doc.supportsStreaming) {
+      } else  */if(!doc.supportsStreaming) {
        doc.url = URL.createObjectURL(blob);
      }

      doc.downloaded = true;
    });

-    if(doc.type == 'voice' && !opusDecodeController.isPlaySupported()) {
+    if(doc.type === 'voice' && !opusDecodeController.isPlaySupported()) {
      download = originalPromise.then(async(blob) => {
-        let reader = new FileReader();
+        const reader = new FileReader();
  
        await new Promise<void>((resolve, reject) => {
          reader.onloadend = (e) => {
-            let uint8 = new Uint8Array(e.target.result as ArrayBuffer);
+            const uint8 = new Uint8Array(e.target.result as ArrayBuffer);
            //console.log('sending uint8 to decoder:', uint8);
            opusDecodeController.decode(uint8).then(result => {
              doc.url = result.url;
--- a/src/lib/appManagers/appPhotosManager.ts
+++ b/src/lib/appManagers/appPhotosManager.ts
@ -4,7 +4,6 @@ import { getFileNameByLocation } from "../../helpers/fileName";
 import { safeReplaceArrayInObject, defineNotNumerableProperties, isObject } from "../../helpers/object";
 import { isSafari } from "../../helpers/userAgent";
 import { FileLocation, InputFileLocation, InputMedia, Photo, PhotoSize, PhotosPhotos } from "../../layer";
-import { DownloadOptions } from "../mtproto/apiFileManager";
 import apiManager from "../mtproto/mtprotoworker";
 import referenceDatabase, { ReferenceContext } from "../mtproto/referenceDatabase";
 import { calcImageInBox } from "../../helpers/dom";
@ -81,8 +80,7 @@ export class AppPhotosManager {
    return this.photos[photo.id] = photo;
  }
  
-  public choosePhotoSize(photo: MyPhoto | MyDocument, width = 0, height = 0) {
-    //if(Config.Navigator.retina) {
+  public choosePhotoSize(photo: MyPhoto | MyDocument, width = 0, height = 0, useBytes = false) {
    if(window.devicePixelRatio > 1) {
      width *= 2;
      height *= 2;
@ -101,17 +99,21 @@ export class AppPhotosManager {

    let bestPhotoSize: PhotoSize = {_: 'photoSizeEmpty', type: ''};
    const sizes = ((photo as MyPhoto).sizes || (photo as MyDocument).thumbs) as PhotoSize[];
-    if(sizes) {
+    if(sizes?.length) {
      for(const photoSize of sizes) {
        if(!('w' in photoSize) && !('h' in photoSize)) continue;
  
        bestPhotoSize = photoSize;
  
        const {w, h} = calcImageInBox(photoSize.w, photoSize.h, width, height);
-        if(w === width || h === height) {
+        if(w >= width || h >= height) {
          break;
        }
      }
+
+      if(useBytes && bestPhotoSize._ === 'photoSizeEmpty' && sizes[0]._ === 'photoStrippedSize') {
+        bestPhotoSize = sizes[0];
+      }
    }
    
    return bestPhotoSize;
@ -122,7 +124,7 @@ export class AppPhotosManager {
    return apiManager.invokeApi('photos.getUserPhotos', {
      user_id: inputUser,
      offset: 0,
-      limit: limit,
+      limit,
      max_id: maxId
    }).then((photosResult) => {
      appUsersManager.saveApiUsers(photosResult.users);
@ -325,15 +327,19 @@ export class AppPhotosManager {

    download = appDownloadManager.download(downloadOptions);
    download.then(blob => {
+      const url = URL.createObjectURL(blob);
      if(!cacheContext.downloaded || cacheContext.downloaded < blob.size) {
        defineNotNumerableProperties(cacheContext, ['downloaded', 'url']);

        cacheContext.downloaded = blob.size;
-        cacheContext.url = URL.createObjectURL(blob);
+        cacheContext.url = url;

        //console.log('wrote photo:', photo, photoSize, cacheContext, blob);
      }

+      defineNotNumerableProperties(photoSize, ['url']);
+      (photoSize as any).url = url;
+
      return blob;
    });

--- a/src/lib/cacheStorage.ts
+++ b/src/lib/cacheStorage.ts
@ -53,9 +53,9 @@ export default class CacheStorageController {
  } */

  public getFile(fileName: string, method: 'blob' | 'json' | 'text' = 'blob'): Promise<any> {
-    /* if(method == 'blob') {
+    if(method == 'blob') {
      return Promise.reject();
-    } */
+    }

    // const str = `get fileName: ${fileName}`;
    // console.time(str);
--- a/src/scss/partials/_chat.scss
+++ b/src/scss/partials/_chat.scss
@ -169,6 +169,23 @@ $chat-helper-size: 39px;
 		} */
 	}

+	.btn-scheduled {
+		margin-right: .75rem !important; // * maybe this is correct margin
+
+		&:after {
+			content: "";
+			position: absolute;
+			right: 5px;
+			//border: .1875rem solid #fff;
+			box-sizing: initial;
+			width: .5rem;
+			height: .5rem;
+			border-radius: 50%;
+			background: #61c642;
+			//box-shadow: -0.375rem -0.25rem 0 -0.1875rem #fff;
+		}
+	}
+
 	.btn-send-container {
 		position: absolute;
 		right: var(--padding-horizontal);
@ -212,9 +229,11 @@ $chat-helper-size: 39px;
 			background-color: $color-blue;
 			color: #fff;
 			border-radius: 50%;
-			width: 34px;
+			width: 34px; // * same as for btn-icon in input
 			height: 34px;
-			line-height: 38px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 		}

 		&.send .tgico-send, 
@ -791,6 +810,10 @@ $chat-helper-size: 39px;
 		> .scrollable {
 			position: relative;
 		}
+
+		& ~ .btn-icon {
+
+		}
 	}

 	.selection-container {
@ -879,7 +902,7 @@ $chat-helper-size: 39px;
 		//margin-bottom: 1px;

 		// ! EXPERIMENTAL
-		margin: 0 3px 5px;
+		margin: 0 .125rem 5px;
 		padding: 0.25rem;
 		width: 34px;
 		height: 34px;
@ -1029,16 +1052,8 @@ $chat-helper-size: 39px;
 		//}
 	}
 	
-	.preloader {
-		width: 100%;
-		height: 100%;
-		
-		svg {
-			width: 50px;
-			height: 50px;
-		}
-
-		&-container .preloader-circular {
+	.preloader-container {
+		.preloader-circular {
 			background-color: rgba(0, 0, 0, .3);
 		}
 	}
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@ -630,7 +630,7 @@ $bubble-margin: .25rem;
  }

  .preloader-container {
-    z-index: 1;
+    z-index: 2;
  }
  
  &:not(.sticker) {
--- a/src/scss/partials/_fonts.scss
+++ b/src/scss/partials/_fonts.scss
@ -2,14 +2,10 @@

@font-face {
  font-family: "#{$tgico-font-family}";
-  src: url("#{$tgico-font-path}/#{$tgico-font-family}.eot?5dnghg");
-  src: url("#{$tgico-font-path}/#{$tgico-font-family}.eot?5dnghg#iefix")
-      format("embedded-opentype"),
-    url("#{$tgico-font-path}/#{$tgico-font-family}.ttf?5dnghg")
-      format("truetype"),
-    url("#{$tgico-font-path}/#{$tgico-font-family}.woff?5dnghg") format("woff"),
-    url("#{$tgico-font-path}/#{$tgico-font-family}.svg?5dnghg##{$tgico-font-family}")
-      format("svg");
+  src:
+    url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?vptykr') format('truetype'),
+    url('#{$tgico-font-path}/#{$tgico-font-family}.woff?vptykr') format('woff'),
+    url('#{$tgico-font-path}/#{$tgico-font-family}.svg?vptykr#tgico') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
@ -23,430 +19,439 @@
 [class*=" tgico-"]:before,
 [class*=" tgico-"]:after {
  font-family: "#{$tgico-font-family}" !important;
-  speak: none;
+  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

+  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }


-.tgico-dragmedia:before {
+.tgico-permissions:before {
  content: "\e900";
 }
-.tgico-dragfiles:before {
+.tgico-phone:before {
  content: "\e901";
 }
-.tgico-link:before {
+.tgico-photo:before {
  content: "\e902";
 }
-.tgico-monospace:before {
+.tgico-pin:before {
  content: "\e903";
 }
-.tgico-strikethrough:before {
+.tgico-pinlist:before {
  content: "\e904";
 }
-.tgico-underline:before {
+.tgico-pinned_filled:before {
  content: "\e905";
 }
-.tgico-italic:before {
+.tgico-pinnedchat:before {
  content: "\e906";
 }
-.tgico-bold:before {
+.tgico-play:before {
  content: "\e907";
 }
-.tgico-botcom:before {
+.tgico-poll:before {
  content: "\e908";
 }
-.tgico-calendarfilter:before {
+.tgico-previous:before {
  content: "\e909";
 }
-.tgico-email:before {
+.tgico-radiooff:before {
  content: "\e90a";
 }
-.tgico-passwordoff:before {
+.tgico-radioon:before {
  content: "\e90b";
 }
-.tgico-commentssticker:before {
+.tgico-readchats:before {
  content: "\e90c";
 }
-.tgico-comments:before {
+.tgico-recent:before {
  content: "\e90d";
 }
-.tgico-previous:before {
+.tgico-replace:before {
  content: "\e90e";
 }
-.tgico-next:before {
+.tgico-reply:before {
  content: "\e90f";
 }
-.tgico-mention:before {
+.tgico-revote:before {
  content: "\e910";
 }
-.tgico-arrow-down:before {
+.tgico-savedmessages:before {
  content: "\e911";
-  margin-top: 2px;
-}
-.tgico-pinlist:before {
-  content: "\e912";
-}
-.tgico-replace:before {
-  content: "\e913";
 }
 .tgico-schedule:before {
+  content: "\e912";
+}
+.tgico-scheduled:before {
+  content: "\e913";
+}
+.tgico-search:before {
  content: "\e914";
 }
-.tgico-zoomout:before {
+.tgico-select:before {
  content: "\e915";
 }
-.tgico-zoomin:before {
+.tgico-send:before {
  content: "\e916";
 }
-.tgico-select:before {
+.tgico-send2:before {
  content: "\e917";
 }
-.tgico-info2:before {
+.tgico-sending:before {
  content: "\e918";
 }
-.tgico-clouddownload:before {
+.tgico-sendingerror:before {
  content: "\e919";
 }
-.tgico-readchats:before {
+.tgico-settings:before {
  content: "\e91a";
 }
-.tgico-noncontacts:before {
+.tgico-smallscreen:before {
  content: "\e91b";
 }
-.tgico-bots:before {
+.tgico-smile:before {
  content: "\e91c";
 }
-.tgico-muted:before {
+.tgico-sport:before {
  content: "\e91d";
 }
-.tgico-favourites:before {
+.tgico-stickers:before {
  content: "\e91e";
 }
-.tgico-tip:before {
+.tgico-stop:before {
  content: "\e91f";
 }
-.tgico-loginlogodesktop:before {
+.tgico-strikethrough:before {
  content: "\e920";
 }
-.tgico-loginlogomobile:before {
+.tgico-textedit:before {
  content: "\e921";
 }
-.tgico-calendar:before {
+.tgico-tip:before {
  content: "\e922";
 }
-.tgico-keyboard:before {
+.tgico-unarchive:before {
  content: "\e923";
 }
-.tgico-gifs:before {
+.tgico-underline:before {
  content: "\e924";
 }
-.tgico-stickers:before {
+.tgico-unlock:before {
  content: "\e925";
 }
-.tgico-deleteleft:before {
+.tgico-unmute:before {
  content: "\e926";
 }
-.tgico-folder:before {
+.tgico-unpin:before {
  content: "\e927";
 }
-.tgico-revote:before {
+.tgico-unread:before {
  content: "\e928";
 }
-.tgico-livelocation:before {
+.tgico-up:before {
  content: "\e929";
 }
-.tgico-microphone2:before {
+.tgico-user:before {
  content: "\e92a";
 }
-.tgico-colorize:before {
+.tgico-username:before {
  content: "\e92b";
 }
-.tgico-poll:before {
+.tgico-zoomin:before {
  content: "\e92c";
 }
-.tgico-minus:before {
+.tgico-zoomout:before {
  content: "\e92d";
 }
-.tgico-nosound:before {
+.tgico-check:before {
  content: "\e92e";
 }
-.tgico-microphone:before {
+.tgico-checks:before {
  content: "\e92f";
 }
-.tgico-largeplay:before {
+.tgico-activesessions:before {
  content: "\e930";
 }
-.tgico-largepause:before {
+.tgico-add:before {
  content: "\e931";
 }
-.tgico-newchannel:before {
+.tgico-addmember_filled:before {
  content: "\e932";
 }
-.tgico-newgroup:before {
+.tgico-adduser:before {
  content: "\e933";
 }
-.tgico-newprivate:before {
+.tgico-admin:before {
  content: "\e934";
 }
-.tgico-chatsplaceholder:before {
+.tgico-animals:before {
  content: "\e935";
 }
-.tgico-newchat_filled:before {
+.tgico-archive:before {
  content: "\e936";
 }
-.tgico-addmember_filled:before {
+.tgico-arrow_back:before {
  content: "\e937";
 }
-.tgico-delete:before {
+.tgico-arrow_down:before {
  content: "\e938";
 }
-.tgico-delete_filled:before {
+.tgico-arrow_next:before {
  content: "\e939";
 }
-.tgico-send2:before {
+.tgico-attach:before {
  content: "\e93a";
 }
-.tgico-avatar_deletedaccount:before {
+.tgico-avatar_archivedchats:before {
  content: "\e93b";
 }
-.tgico-avatar_archivedchats:before {
+.tgico-avatar_deletedaccount:before {
  content: "\e93c";
 }
 .tgico-avatar_savedmessages:before {
  content: "\e93d";
 }
-.tgico-pinnedchat:before {
+.tgico-bold:before {
  content: "\e93e";
 }
-.tgico-channelviews:before {
+.tgico-botcom:before {
  content: "\e93f";
 }
-.tgico-sendingerror:before {
+.tgico-bots:before {
  content: "\e940";
 }
-.tgico-sending:before {
+.tgico-calendar:before {
  content: "\e941";
 }
-.tgico-check:before {
+.tgico-calendarfilter:before {
  content: "\e942";
 }
-.tgico-checks:before {
+.tgico-camera:before {
  content: "\e943";
 }
-.tgico-radioon:before {
+.tgico-cameraadd:before {
  content: "\e944";
 }
-.tgico-radiooff:before {
+.tgico-car:before {
  content: "\e945";
 }
-.tgico-checkboxempty:before {
+.tgico-channel:before {
  content: "\e946";
 }
-.tgico-checkboxblock:before {
+.tgico-channelviews:before {
  content: "\e947";
 }
-.tgico-checkboxon:before {
+.tgico-chatsplaceholder:before {
  content: "\e948";
 }
-.tgico-eye2:before {
+.tgico-check1:before {
  content: "\e949";
 }
-.tgico-eye1:before {
+.tgico-checkbox:before {
  content: "\e94a";
 }
-.tgico-fullscreen:before {
+.tgico-checkboxblock:before {
  content: "\e94b";
 }
-.tgico-smallscreen:before {
+.tgico-checkboxempty:before {
  content: "\e94c";
 }
-.tgico-flag:before {
+.tgico-checkboxon:before {
  content: "\e94d";
 }
-.tgico-lamp:before {
+.tgico-close:before {
  content: "\e94e";
 }
-.tgico-sport:before {
+.tgico-clouddownload:before {
  content: "\e94f";
 }
-.tgico-car:before {
+.tgico-colorize:before {
  content: "\e950";
 }
-.tgico-eats:before {
+.tgico-comments:before {
  content: "\e951";
 }
-.tgico-animals:before {
+.tgico-commentssticker:before {
  content: "\e952";
 }
-.tgico-smile:before {
+.tgico-copy:before {
  content: "\e953";
 }
-.tgico-unpin:before {
+.tgico-data:before {
  content: "\e954";
 }
-.tgico-send:before {
+.tgico-delete_filled:before {
  content: "\e955";
 }
-.tgico-unread:before {
+.tgico-delete:before {
  content: "\e956";
 }
-.tgico-settings:before {
+.tgico-deleteleft:before {
  content: "\e957";
 }
-.tgico-edit:before {
+.tgico-deleteuser:before {
  content: "\e958";
 }
-.tgico-download:before {
+.tgico-document:before {
  content: "\e959";
 }
-.tgico-cameraadd:before {
+.tgico-down:before {
  content: "\e95a";
 }
-.tgico-camera:before {
+.tgico-download:before {
  content: "\e95b";
 }
-.tgico-permissions:before {
+.tgico-dragfiles:before {
  content: "\e95c";
 }
-.tgico-admin:before {
+.tgico-dragmedia:before {
  content: "\e95d";
 }
-.tgico-stop:before {
+.tgico-eats:before {
  content: "\e95e";
 }
-.tgico-username:before {
+.tgico-edit:before {
  content: "\e95f";
 }
-.tgico-location:before {
+.tgico-email:before {
  content: "\e960";
 }
-.tgico-info:before {
+.tgico-eye1:before {
  content: "\e961";
 }
-.tgico-deleteuser:before {
+.tgico-eye2:before {
  content: "\e962";
 }
-.tgico-adduser:before {
+.tgico-favourites:before {
  content: "\e963";
 }
-.tgico-recent:before {
+.tgico-flag:before {
  content: "\e964";
 }
-.tgico-channel:before {
+.tgico-folder:before {
  content: "\e965";
 }
-.tgico-document:before {
+.tgico-forward:before {
  content: "\e966";
 }
-.tgico-activesessions:before {
+.tgico-fullscreen:before {
  content: "\e967";
 }
-.tgico-logout:before {
+.tgico-gifs:before {
  content: "\e968";
 }
-.tgico-help:before {
+.tgico-group:before {
  content: "\e969";
 }
-.tgico-play:before {
+.tgico-help:before {
  content: "\e96a";
 }
-.tgico-pause:before {
+.tgico-info:before {
  content: "\e96b";
 }
-.tgico-reply:before {
+.tgico-info2:before {
  content: "\e96c";
 }
-.tgico-forward:before {
+.tgico-italic:before {
  content: "\e96d";
 }
-.tgico-arrow-next:before {
+.tgico-keyboard:before {
  content: "\e96e";
 }
-.tgico-unlock:before {
+.tgico-lamp:before {
  content: "\e96f";
 }
-.tgico-lock:before {
+.tgico-language:before {
  content: "\e970";
 }
-.tgico-data:before {
+.tgico-largepause:before {
  content: "\e971";
 }
-.tgico-user:before {
+.tgico-largeplay:before {
  content: "\e972";
 }
-.tgico-group:before {
+.tgico-link:before {
  content: "\e973";
 }
-.tgico-mute:before {
+.tgico-livelocation:before {
  content: "\e974";
 }
-.tgico-unmute:before {
+.tgico-location:before {
  content: "\e975";
 }
-.tgico-photo:before {
+.tgico-lock:before {
  content: "\e976";
 }
-.tgico-language:before {
+.tgico-loginlogodesktop:before {
  content: "\e977";
 }
-.tgico-message:before {
+.tgico-loginlogomobile:before {
  content: "\e978";
 }
-.tgico-pin:before {
+.tgico-logout:before {
  content: "\e979";
 }
-.tgico-attach:before {
+.tgico-mention:before {
  content: "\e97a";
 }
-.tgico-phone:before {
+.tgico-menu:before {
  content: "\e97b";
 }
-.tgico-savedmessages:before {
+.tgico-message:before {
  content: "\e97c";
 }
-.tgico-checkbox:before {
+.tgico-microphone:before {
  content: "\e97d";
 }
-.tgico-copy:before {
+.tgico-microphone2:before {
  content: "\e97e";
 }
-.tgico-unarchive:before {
+.tgico-minus:before {
  content: "\e97f";
 }
-.tgico-archive:before {
+.tgico-monospace:before {
  content: "\e980";
 }
-.tgico-check1:before {
+.tgico-more:before {
  content: "\e981";
 }
-.tgico-up:before {
+.tgico-mute:before {
  content: "\e982";
 }
-.tgico-down:before {
+.tgico-muted:before {
  content: "\e983";
 }
-.tgico-close:before {
+.tgico-newchannel:before {
  content: "\e984";
 }
-.tgico-add:before {
+.tgico-newchat_filled:before {
  content: "\e985";
 }
-.tgico-back:before {
+.tgico-newgroup:before {
  content: "\e986";
 }
-.tgico-more:before {
+.tgico-newprivate:before {
  content: "\e987";
 }
-.tgico-menu:before {
+.tgico-next:before {
  content: "\e988";
 }
-.tgico-search:before {
+.tgico-noncontacts:before {
  content: "\e989";
 }
+.tgico-nosound:before {
+  content: "\e98a";
+}
+.tgico-passwordoff:before {
+  content: "\e98b";
+}
+.tgico-pause:before {
+  content: "\e98c";
+}
--- a/src/scss/partials/_gifsMasonry.scss
+++ b/src/scss/partials/_gifsMasonry.scss
@ -23,4 +23,8 @@
      top: 0;
    }
  }
+
+  .preloader-container {
+    z-index: 2;
+  }
 }
--- a/src/scss/partials/_ico.scss
+++ b/src/scss/partials/_ico.scss
@ -13,141 +13,144 @@ $tgico-font-path: "assets/fonts" !default;
 .replace(/\.(.+?):before\{content:"(.+?);\}/g, `$$$1: "\\$2;\n`);
 */

-$tgico-dragmedia: "\e900";
-$tgico-dragfiles: "\e901";
-$tgico-link: "\e902";
-$tgico-monospace: "\e903";
-$tgico-strikethrough: "\e904";
-$tgico-underline: "\e905";
-$tgico-italic: "\e906";
-$tgico-bold: "\e907";
-$tgico-botcom: "\e908";
-$tgico-calendarfilter: "\e909";
-$tgico-email: "\e90a";
-$tgico-passwordoff: "\e90b";
-$tgico-commentssticker: "\e90c";
-$tgico-comments: "\e90d";
-$tgico-previous: "\e90e";
-$tgico-next: "\e90f";
-$tgico-mention: "\e910";
-$tgico-arrow-down: "\e911";
-$tgico-pinlist: "\e912";
-$tgico-replace: "\e913";
-$tgico-schedule: "\e914";
-$tgico-zoomout: "\e915";
-$tgico-zoomin: "\e916";
-$tgico-select: "\e917";
-$tgico-info2: "\e918";
-$tgico-clouddownload: "\e919";
-$tgico-readchats: "\e91a";
-$tgico-noncontacts: "\e91b";
-$tgico-bots: "\e91c";
-$tgico-muted: "\e91d";
-$tgico-favourites: "\e91e";
-$tgico-tip: "\e91f";
-$tgico-loginlogodesktop: "\e920";
-$tgico-loginlogomobile: "\e921";
-$tgico-calendar: "\e922";
-$tgico-keyboard: "\e923";
-$tgico-gifs: "\e924";
-$tgico-stickers: "\e925";
-$tgico-deleteleft: "\e926";
-$tgico-folder: "\e927";
-$tgico-revote: "\e928";
-$tgico-livelocation: "\e929";
-$tgico-microphone2: "\e92a";
-$tgico-colorize: "\e92b";
-$tgico-poll: "\e92c";
-$tgico-minus: "\e92d";
-$tgico-nosound: "\e92e";
-$tgico-microphone: "\e92f";
-$tgico-largeplay: "\e930";
-$tgico-largepause: "\e931";
-$tgico-newchannel: "\e932";
-$tgico-newgroup: "\e933";
-$tgico-newprivate: "\e934";
-$tgico-chatsplaceholder: "\e935";
-$tgico-newchat_filled: "\e936";
-$tgico-addmember_filled: "\e937";
-$tgico-delete: "\e938";
-$tgico-delete_filled: "\e939";
-$tgico-send2: "\e93a";
-$tgico-avatar_deletedaccount: "\e93b";
-$tgico-avatar_archivedchats: "\e93c";
+$tgico-permissions: "\e900";
+$tgico-phone: "\e901";
+$tgico-photo: "\e902";
+$tgico-pin: "\e903";
+$tgico-pinlist: "\e904";
+$tgico-pinned_filled: "\e905";
+$tgico-pinnedchat: "\e906";
+$tgico-play: "\e907";
+$tgico-poll: "\e908";
+$tgico-previous: "\e909";
+$tgico-radiooff: "\e90a";
+$tgico-radioon: "\e90b";
+$tgico-readchats: "\e90c";
+$tgico-recent: "\e90d";
+$tgico-replace: "\e90e";
+$tgico-reply: "\e90f";
+$tgico-revote: "\e910";
+$tgico-savedmessages: "\e911";
+$tgico-schedule: "\e912";
+$tgico-scheduled: "\e913";
+$tgico-search: "\e914";
+$tgico-select: "\e915";
+$tgico-send: "\e916";
+$tgico-send2: "\e917";
+$tgico-sending: "\e918";
+$tgico-sendingerror: "\e919";
+$tgico-settings: "\e91a";
+$tgico-smallscreen: "\e91b";
+$tgico-smile: "\e91c";
+$tgico-sport: "\e91d";
+$tgico-stickers: "\e91e";
+$tgico-stop: "\e91f";
+$tgico-strikethrough: "\e920";
+$tgico-textedit: "\e921";
+$tgico-tip: "\e922";
+$tgico-unarchive: "\e923";
+$tgico-underline: "\e924";
+$tgico-unlock: "\e925";
+$tgico-unmute: "\e926";
+$tgico-unpin: "\e927";
+$tgico-unread: "\e928";
+$tgico-up: "\e929";
+$tgico-user: "\e92a";
+$tgico-username: "\e92b";
+$tgico-zoomin: "\e92c";
+$tgico-zoomout: "\e92d";
+$tgico-check: "\e92e";
+$tgico-checks: "\e92f";
+$tgico-activesessions: "\e930";
+$tgico-add: "\e931";
+$tgico-addmember_filled: "\e932";
+$tgico-adduser: "\e933";
+$tgico-admin: "\e934";
+$tgico-animals: "\e935";
+$tgico-archive: "\e936";
+$tgico-arrow_back: "\e937";
+$tgico-arrow_down: "\e938";
+$tgico-arrow_next: "\e939";
+$tgico-attach: "\e93a";
+$tgico-avatar_archivedchats: "\e93b";
+$tgico-avatar_deletedaccount: "\e93c";
 $tgico-avatar_savedmessages: "\e93d";
-$tgico-pinnedchat: "\e93e";
-$tgico-channelviews: "\e93f";
-$tgico-sendingerror: "\e940";
-$tgico-sending: "\e941";
-$tgico-check: "\e942";
-$tgico-checks: "\e943";
-$tgico-radioon: "\e944";
-$tgico-radiooff: "\e945";
-$tgico-checkboxempty: "\e946";
-$tgico-checkboxblock: "\e947";
-$tgico-checkboxon: "\e948";
-$tgico-eye2: "\e949";
-$tgico-eye1: "\e94a";
-$tgico-fullscreen: "\e94b";
-$tgico-smallscreen: "\e94c";
-$tgico-flag: "\e94d";
-$tgico-lamp: "\e94e";
-$tgico-sport: "\e94f";
-$tgico-car: "\e950";
-$tgico-eats: "\e951";
-$tgico-animals: "\e952";
-$tgico-smile: "\e953";
-$tgico-unpin: "\e954";
-$tgico-send: "\e955";
-$tgico-unread: "\e956";
-$tgico-settings: "\e957";
-$tgico-edit: "\e958";
-$tgico-download: "\e959";
-$tgico-cameraadd: "\e95a";
-$tgico-camera: "\e95b";
-$tgico-permissions: "\e95c";
-$tgico-admin: "\e95d";
-$tgico-stop: "\e95e";
-$tgico-username: "\e95f";
-$tgico-location: "\e960";
-$tgico-info: "\e961";
-$tgico-deleteuser: "\e962";
-$tgico-adduser: "\e963";
-$tgico-recent: "\e964";
-$tgico-channel: "\e965";
-$tgico-document: "\e966";
-$tgico-activesessions: "\e967";
-$tgico-logout: "\e968";
-$tgico-help: "\e969";
-$tgico-play: "\e96a";
-$tgico-pause: "\e96b";
-$tgico-reply: "\e96c";
-$tgico-forward: "\e96d";
-$tgico-arrow-next: "\e96e";
-$tgico-unlock: "\e96f";
-$tgico-lock: "\e970";
-$tgico-data: "\e971";
-$tgico-user: "\e972";
-$tgico-group: "\e973";
-$tgico-mute: "\e974";
-$tgico-unmute: "\e975";
-$tgico-photo: "\e976";
-$tgico-language: "\e977";
-$tgico-message: "\e978";
-$tgico-pin: "\e979";
-$tgico-attach: "\e97a";
-$tgico-phone: "\e97b";
-$tgico-savedmessages: "\e97c";
-$tgico-checkbox: "\e97d";
-$tgico-copy: "\e97e";
-$tgico-unarchive: "\e97f";
-$tgico-archive: "\e980";
-$tgico-check1: "\e981";
-$tgico-up: "\e982";
-$tgico-down: "\e983";
-$tgico-close: "\e984";
-$tgico-add: "\e985";
-$tgico-back: "\e986";
-$tgico-more: "\e987";
-$tgico-menu: "\e988";
-$tgico-search: "\e989";
+$tgico-bold: "\e93e";
+$tgico-botcom: "\e93f";
+$tgico-bots: "\e940";
+$tgico-calendar: "\e941";
+$tgico-calendarfilter: "\e942";
+$tgico-camera: "\e943";
+$tgico-cameraadd: "\e944";
+$tgico-car: "\e945";
+$tgico-channel: "\e946";
+$tgico-channelviews: "\e947";
+$tgico-chatsplaceholder: "\e948";
+$tgico-check1: "\e949";
+$tgico-checkbox: "\e94a";
+$tgico-checkboxblock: "\e94b";
+$tgico-checkboxempty: "\e94c";
+$tgico-checkboxon: "\e94d";
+$tgico-close: "\e94e";
+$tgico-clouddownload: "\e94f";
+$tgico-colorize: "\e950";
+$tgico-comments: "\e951";
+$tgico-commentssticker: "\e952";
+$tgico-copy: "\e953";
+$tgico-data: "\e954";
+$tgico-delete_filled: "\e955";
+$tgico-delete: "\e956";
+$tgico-deleteleft: "\e957";
+$tgico-deleteuser: "\e958";
+$tgico-document: "\e959";
+$tgico-down: "\e95a";
+$tgico-download: "\e95b";
+$tgico-dragfiles: "\e95c";
+$tgico-dragmedia: "\e95d";
+$tgico-eats: "\e95e";
+$tgico-edit: "\e95f";
+$tgico-email: "\e960";
+$tgico-eye1: "\e961";
+$tgico-eye2: "\e962";
+$tgico-favourites: "\e963";
+$tgico-flag: "\e964";
+$tgico-folder: "\e965";
+$tgico-forward: "\e966";
+$tgico-fullscreen: "\e967";
+$tgico-gifs: "\e968";
+$tgico-group: "\e969";
+$tgico-help: "\e96a";
+$tgico-info: "\e96b";
+$tgico-info2: "\e96c";
+$tgico-italic: "\e96d";
+$tgico-keyboard: "\e96e";
+$tgico-lamp: "\e96f";
+$tgico-language: "\e970";
+$tgico-largepause: "\e971";
+$tgico-largeplay: "\e972";
+$tgico-link: "\e973";
+$tgico-livelocation: "\e974";
+$tgico-location: "\e975";
+$tgico-lock: "\e976";
+$tgico-loginlogodesktop: "\e977";
+$tgico-loginlogomobile: "\e978";
+$tgico-logout: "\e979";
+$tgico-mention: "\e97a";
+$tgico-menu: "\e97b";
+$tgico-message: "\e97c";
+$tgico-microphone: "\e97d";
+$tgico-microphone2: "\e97e";
+$tgico-minus: "\e97f";
+$tgico-monospace: "\e980";
+$tgico-more: "\e981";
+$tgico-mute: "\e982";
+$tgico-muted: "\e983";
+$tgico-newchannel: "\e984";
+$tgico-newchat_filled: "\e985";
+$tgico-newgroup: "\e986";
+$tgico-newprivate: "\e987";
+$tgico-next: "\e988";
+$tgico-noncontacts: "\e989";
+$tgico-nosound: "\e98a";
+$tgico-passwordoff: "\e98b";
+$tgico-pause: "\e98c";
--- a/src/scss/partials/_input.scss
+++ b/src/scss/partials/_input.scss
@ -203,8 +203,8 @@ input:focus, button:focus {
  position: relative;
  width: 100%;
  //Vozmojno nado budet vernut margin-left: 22px;, tak kak eto vrode v levom bare tak po verstke, a v pravom bare dlya mobili nado 16, gde stiker seti 
-  margin-left: 22px;
-  margin-right: 4px;
+  margin-left: 1rem;
+  margin-right: .25rem;
  overflow: hidden;

  @include respond-to(handhelds) {
@ -222,6 +222,7 @@ input:focus, button:focus {
    border-radius: 22px;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
    border-color: transparent;
+    line-height: var(--height);

    body.animation-level-0 & {
      transition: none;
@ -253,28 +254,32 @@ input:focus, button:focus {

  > .tgico {
    position: absolute;
-    left: 12px;
    top: 50%;
-    transform: translateY(-50%);
+    transform: translate(0, -50%);
    text-align: center;
    font-size: 24px;
    color: $color-gray;
    opacity: .6;
    transition: all .2s ease-out;
+    line-height: 1;

    body.animation-level-0 & {
      transition: none;
    }
+  }

-    &:before {
-      vertical-align: middle;
+  > .tgico-search {
+    width: 24px;
+    height: 24px;
+    left: .75rem;
+  }
+
+  > .tgico-close {
+    right: 0px;
+    z-index: 1;
+
+    &:before { // ! я сгорел, почему-то здесь иконка сдвигается на пиксель влево, и это происходит из-за position: absolute на .tgico ...
+      margin-right: -1px;
    }
  }
-
-  .tgico-close {
-    left: auto;
-    right: 0px;
-    top: 48%;
-    z-index: 1;
-  }
 }
--- a/src/scss/partials/_leftSidebar.scss
+++ b/src/scss/partials/_leftSidebar.scss
@ -191,8 +191,9 @@

  .sidebar-header__btn-container {
    position: relative;
-    width: 39.75px;
-    height: 39px;
+    width: 40px;
+    height: 40px;
+    flex: 0 0 auto;

    > .btn-icon {
      visibility: hidden;
--- a/src/scss/partials/_rightSidebar.scss
+++ b/src/scss/partials/_rightSidebar.scss
@ -48,7 +48,7 @@
    flex: 0 0 auto;

    .sidebar-close-button:before {
-      content: $tgico-back;
+      content: $tgico-arrow_back;

      @include respond-to(not-handhelds) {
        content: $tgico-close;
@ -61,10 +61,6 @@
      position: relative;
      flex: 1 1 auto;
    }
-
-    .btn-icon {
-      overflow: inherit;
-    }
  }

  /* #forward-container {
@ -737,3 +733,9 @@
    }
  }
 }
+
+#search-gifs-container {
+  .gifs-masonry {
+    margin-top: -2.5px;
+  }
+}
--- a/src/scss/partials/_sidebar.scss
+++ b/src/scss/partials/_sidebar.scss
@ -36,6 +36,8 @@

  &-close-button {
    overflow: inherit !important;
+    width: 40px;
+    height: 40px;
  }

  &-content {
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@ -1177,7 +1177,7 @@ middle-ellipsis-element {
  }
 }

-.media-photo, .media-video {
+.media-photo, .media-video, .media-sticker {
  position: absolute;
  top: 0;
  right: 0;
@ -1192,3 +1192,7 @@ middle-ellipsis-element {
 .media-video {
  z-index: 1; // * overflow media-photo
 }
+
+.media-sticker {
+  margin: auto;
+}