r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Display sticker sets in general settings

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-07-02 09:52:52 +03:00
parent d4ae090147
commit 705fe6963d
5 changed files with 151 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/emoticonsDropdown/tabs/stickers.ts
View File

@ -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() {

10
src/components/row.ts
View File

@ -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) {

65
src/components/sidebarLeft/tabs/generalSettings.ts
View File

@ -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);
}
}

63
src/components/wrappers.ts
View File

@ -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,

8
src/scss/partials/_row.scss
View File

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