From 705fe6963d4bc82230ce3189b675db46aa620b4b Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Fri, 2 Jul 2021 09:52:52 +0300 Subject: [PATCH] Display sticker sets in general settings --- .../emoticonsDropdown/tabs/stickers.ts | 52 +++------------ src/components/row.ts | 10 +-- .../sidebarLeft/tabs/generalSettings.ts | 65 +++++++++++++++++++ src/components/wrappers.ts | 63 +++++++++++++++++- src/scss/partials/_row.scss | 8 +++ 5 files changed, 151 insertions(+), 47 deletions(-) diff --git a/src/components/emoticonsDropdown/tabs/stickers.ts b/src/components/emoticonsDropdown/tabs/stickers.ts index a7cd7b69..c6e93a11 100644 --- a/src/components/emoticonsDropdown/tabs/stickers.ts +++ b/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) { - EmoticonsDropdown.lazyLoadQueue.push({ - div: button, - load: () => { - const downloadOptions = appStickersManager.getStickerSetThumbDownloadOptions(stickerSet.set); - const promise = appDownloadManager.download(downloadOptions); - - if(stickerSet.set.pFlags.animated) { - 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 - } + wrapStickerSetThumb({ + set, + container: button, + group: EMOTICONSSTICKERGROUP, + lazyLoadQueue: EmoticonsDropdown.lazyLoadQueue, + width: 32, + height: 32, + autoplay: false + }); } init() { diff --git a/src/components/row.ts b/src/components/row.ts index 9c36ca67..75967ddd 100644 --- a/src/components/row.ts +++ b/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) { diff --git a/src/components/sidebarLeft/tabs/generalSettings.ts b/src/components/sidebarLeft/tabs/generalSettings.ts index b3b0928b..7e0f4f54 100644 --- a/src/components/sidebarLeft/tabs/generalSettings.ts +++ b/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(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); } } diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index ef3e373e..d9820b81 100644 --- a/src/components/wrappers.ts +++ b/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, diff --git a/src/scss/partials/_row.scss b/src/scss/partials/_row.scss index 5f5325c2..14482b18 100644 --- a/src/scss/partials/_row.scss +++ b/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; + } }