Display sticker sets in general settings

src/components/emoticonsDropdown/tabs/stickers.ts

@@ -21,7 +21,7 @@ import LazyLoadQueue, { LazyLoadQueueRepeat } from "../../lazyLoadQueue";
 import { putPreloader } from "../../misc";
 import Scrollable, { ScrollableX } from "../../scrollable";
 import StickyIntersector from "../../stickyIntersector";
-import { wrapSticker } from "../../wrappers";
+import { wrapSticker, wrapStickerSetThumb } from "../../wrappers";
 
 export class SuperStickerRenderer {
   public lazyLoadQueue: LazyLoadQueueRepeat;
@@ -214,47 +214,15 @@ export default class StickersTab implements EmoticonsTab {
 
     //console.log('got stickerSet', stickerSet, li);
     
-    if(stickerSet.set.thumbs?.length) {
+    wrapStickerSetThumb({
-      EmoticonsDropdown.lazyLoadQueue.push({
+      set,
-        div: button,
+      container: button,
-        load: () => {
+      group: EMOTICONSSTICKERGROUP,
-          const downloadOptions = appStickersManager.getStickerSetThumbDownloadOptions(stickerSet.set);
+      lazyLoadQueue: EmoticonsDropdown.lazyLoadQueue,
-          const promise = appDownloadManager.download(downloadOptions);
+      width: 32,
-
+      height: 32,
-          if(stickerSet.set.pFlags.animated) {
+      autoplay: false
-            return promise
+    });
-            .then(readBlobAsText)
-            //.then(JSON.parse)
-            .then(json => {
-              lottieLoader.loadAnimationWorker({
-                container: button,
-                loop: true,
-                autoplay: false,
-                animationData: json,
-                width: 32,
-                height: 32,
-                needUpscale: true
-              }, EMOTICONSSTICKERGROUP);
-            });
-          } else {
-            const image = new Image();
-    
-            return promise.then(blob => {
-              renderImageFromUrl(image, URL.createObjectURL(blob), () => {
-                button.append(image);
-              });
-            });
-          }
-        }
-      });
-    } else if(stickerSet.documents[0]._ !== 'documentEmpty') { // as thumb will be used first sticker
-      wrapSticker({
-        doc: stickerSet.documents[0],
-        div: button as any, 
-        group: EMOTICONSSTICKERGROUP,
-        lazyLoadQueue: EmoticonsDropdown.lazyLoadQueue
-      }); // kostil
-    }
   }
 
   init() {

src/components/row.ts

@@ -25,7 +25,8 @@ export default class Row {
   constructor(options: Partial<{
     icon: string,
     subtitle: string,
-    subtitleLangKey: LangPackKey
+    subtitleLangKey: LangPackKey,
+    subtitleLangArgs: any[],
     radioField: Row['radioField'],
     checkboxField: Row['checkboxField'],
     noCheckboxSubtitle: boolean,
@@ -33,7 +34,8 @@ export default class Row {
     titleLangKey: LangPackKey,
     titleRight: string | HTMLElement,
     clickable: boolean | ((e: Event) => void),
-    navigationTab: SliderSuperTab
+    navigationTab: SliderSuperTab,
+    havePadding: boolean
   }> = {}) {
     this.container = document.createElement(options.radioField || options.checkboxField ? 'label' : 'div');
     this.container.classList.add('row');
@@ -44,11 +46,11 @@ export default class Row {
     if(options.subtitle) {
       this.subtitle.innerHTML = options.subtitle;
     } else if(options.subtitleLangKey) {
-      this.subtitle.append(i18n(options.subtitleLangKey));
+      this.subtitle.append(i18n(options.subtitleLangKey, options.subtitleLangArgs));
     }
     this.container.append(this.subtitle);
 
-    let havePadding = false;
+    let havePadding = !!options.havePadding;
     if(options.radioField || options.checkboxField) {
       havePadding = true;
       if(options.radioField) {

src/components/sidebarLeft/tabs/generalSettings.ts

@@ -17,6 +17,13 @@ import Row from "../../row";
 import AppBackgroundTab from "./background";
 import { LangPackKey, _i18n } from "../../../lib/langPack";
 import { attachClickEvent } from "../../../helpers/dom/clickEvent";
+import appStickersManager from "../../../lib/appManagers/appStickersManager";
+import assumeType from "../../../helpers/assumeType";
+import { MessagesAllStickers, StickerSet } from "../../../layer";
+import RichTextProcessor from "../../../lib/richtextprocessor";
+import { wrapStickerSetThumb } from "../../wrappers";
+import LazyLoadQueue from "../../lazyLoadQueue";
+import PopupStickers from "../../popups/stickers";
 
 export class RangeSettingSelector {
   public container: HTMLDivElement;
@@ -206,6 +213,64 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
         withRipple: true
       });
 
+      const stickerSets: {[id: string]: Row} = {};
+
+      const lazyLoadQueue = new LazyLoadQueue();
+      const renderStickerSet = (stickerSet: StickerSet.stickerSet, method: 'append' | 'prepend' = 'append') => {
+        const row = new Row({
+          title: RichTextProcessor.wrapEmojiText(stickerSet.title),
+          subtitleLangKey: 'Stickers',
+          subtitleLangArgs: [stickerSet.count],
+          havePadding: true,
+          clickable: () => {
+            new PopupStickers({id: stickerSet.id, access_hash: stickerSet.access_hash}).show();
+          }
+        });
+
+        stickerSets[stickerSet.id] = row;
+
+        const div = document.createElement('div');
+        div.classList.add('row-media');
+
+        wrapStickerSetThumb({
+          set: stickerSet,
+          container: div,
+          group: 'GENERAL-SETTINGS',
+          lazyLoadQueue,
+          width: 48,
+          height: 48,
+          autoplay: true
+        });
+
+        row.container.append(div);
+
+        container[method](row.container);
+      };
+
+      appStickersManager.getAllStickers().then(allStickers => {
+        assumeType<MessagesAllStickers.messagesAllStickers>(allStickers);
+        for(const stickerSet of allStickers.sets) {
+          renderStickerSet(stickerSet);
+        }
+      });
+
+      this.listenerSetter.add(rootScope, 'stickers_installed', (e) => {
+        const set: StickerSet.stickerSet = e;
+        
+        if(!stickerSets[set.id]) {
+          renderStickerSet(set, 'prepend');
+        }
+      });
+  
+      this.listenerSetter.add(rootScope, 'stickers_deleted', (e) => {
+        const set: StickerSet.stickerSet = e;
+        
+        if(stickerSets[set.id]) {
+          stickerSets[set.id].container.remove();
+          delete stickerSets[set.id];
+        }
+      });
+
       container.append(suggestCheckboxField.label, loopCheckboxField.label);
     }
   }

src/components/wrappers.ts

@@ -12,7 +12,7 @@ import { formatDateAccordingToToday, months } from '../helpers/date';
 import mediaSizes from '../helpers/mediaSizes';
 import { formatBytes } from '../helpers/number';
 import { isSafari } from '../helpers/userAgent';
-import { PhotoSize } from '../layer';
+import { PhotoSize, StickerSet } from '../layer';
 import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager";
 import appMessagesManager from '../lib/appManagers/appMessagesManager';
 import appPhotosManager, { MyPhoto } from '../lib/appManagers/appPhotosManager';
@@ -41,6 +41,7 @@ import appStickersManager from '../lib/appManagers/appStickersManager';
 import { cancelEvent } from '../helpers/dom/cancelEvent';
 import { attachClickEvent } from '../helpers/dom/clickEvent';
 import isInDOM from '../helpers/dom/isInDOM';
+import lottieLoader from '../lib/lottieLoader';
 
 const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB
 
@@ -1166,6 +1167,66 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
   return loadPromise;
 }
 
+export async function wrapStickerSetThumb({set, lazyLoadQueue, container, group, autoplay, width, height}: {
+  set: StickerSet.stickerSet,
+  lazyLoadQueue: LazyLoadQueue,
+  container: HTMLElement,
+  group: string,
+  autoplay: boolean,
+  width: number,
+  height: number
+}) {
+  if(set.thumbs?.length) {
+    container.classList.add('media-sticker-wrapper');
+    lazyLoadQueue.push({
+      div: container,
+      load: () => {
+        const downloadOptions = appStickersManager.getStickerSetThumbDownloadOptions(set);
+        const promise = appDownloadManager.download(downloadOptions);
+
+        if(set.pFlags.animated) {
+          return promise
+          .then(readBlobAsText)
+          //.then(JSON.parse)
+          .then(json => {
+            lottieLoader.loadAnimationWorker({
+              container,
+              loop: true,
+              autoplay,
+              animationData: json,
+              width,
+              height,
+              needUpscale: true
+            }, group);
+          });
+        } else {
+          const image = new Image();
+          image.classList.add('media-sticker');
+  
+          return promise.then(blob => {
+            renderImageFromUrl(image, URL.createObjectURL(blob), () => {
+              container.append(image);
+            });
+          });
+        }
+      }
+    });
+
+    return;
+  }
+
+  const promise = appStickersManager.getStickerSet(set);
+  const stickerSet = await promise;
+  if(stickerSet.documents[0]._ !== 'documentEmpty') { // as thumb will be used first sticker
+    wrapSticker({
+      doc: stickerSet.documents[0],
+      div: container, 
+      group: group,
+      lazyLoadQueue
+    }); // kostil
+  }
+}
+
 export function wrapLocalSticker({emoji, width, height}: {
   doc?: MyDocument,
   url?: string,

src/scss/partials/_row.scss

@@ -107,4 +107,12 @@
       display: none;
     }
   }
+
+  &-media {
+    width: 48px !important;
+    height: 48px !important;
+    position: absolute !important;
+    margin: 0 !important;
+    left: .5rem;
+  }
 }