From 521ec5690da9a1e1aac35b584862b50d904f9027 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Mon, 4 Jan 2021 14:09:48 +0400 Subject: [PATCH] Stickers settings --- src/components/animationIntersector.ts | 6 ++++++ src/components/chat/input.ts | 14 +++++++++++++- src/components/emoticonsDropdown/tabs/emoji.ts | 11 +++++++---- src/lib/appManagers/appImManager.ts | 4 ++++ src/lib/lottieLoader.ts | 17 +++++++++++++++-- src/scss/partials/_chatBubble.scss | 7 ------- src/scss/style.scss | 2 +- 7 files changed, 46 insertions(+), 15 deletions(-) diff --git a/src/components/animationIntersector.ts b/src/components/animationIntersector.ts index 4e794c42..ec8a340b 100644 --- a/src/components/animationIntersector.ts +++ b/src/components/animationIntersector.ts @@ -94,6 +94,12 @@ export class AnimationIntersector { group }; + if(animation instanceof RLottiePlayer) { + if(!rootScope.settings.stickers.loop && animation.loop) { + animation.loop = rootScope.settings.stickers.loop; + } + } + (this.byGroups[group] ?? (this.byGroups[group] = [])).push(player); this.observer.observe(player.el); } diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index 851b2ebb..228c69a1 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -301,6 +301,16 @@ export default class ChatInput { this.stickersHelper = new StickersHelper(this.rowsWrapper); + this.listenerSetter.add(rootScope, 'settings_updated', () => { + if(this.stickersHelper) { + if(!rootScope.settings.stickers.suggest) { + this.stickersHelper.checkEmoticon(''); + } else { + this.onMessageInput(); + } + } + }); + try { this.recorder = new Recorder({ //encoderBitRate: 32, @@ -802,7 +812,9 @@ export default class ChatInput { //this.chat.log('messageInput entities', richValue, value, markdownEntities); - if(this.stickersHelper && (this.chat.peerId > 0 || this.appChatsManager.hasRights(this.chat.peerId, 'send', 'send_stickers'))) { + if(this.stickersHelper && + rootScope.settings.stickers.suggest && + (this.chat.peerId > 0 || this.appChatsManager.hasRights(this.chat.peerId, 'send', 'send_stickers'))) { let emoticon = ''; if(entities.length && entities[0]._ == 'messageEntityEmoji') { const entity = entities[0]; diff --git a/src/components/emoticonsDropdown/tabs/emoji.ts b/src/components/emoticonsDropdown/tabs/emoji.ts index c1971f70..f1eef648 100644 --- a/src/components/emoticonsDropdown/tabs/emoji.ts +++ b/src/components/emoticonsDropdown/tabs/emoji.ts @@ -170,7 +170,8 @@ export default class EmojiTab implements EmoticonsTab { } private getEmojiFromElement(element: HTMLElement) { - if(element.tagName == 'SPAN' && !element.classList.contains('emoji')) { + if(element.nodeType === 3) return element.nodeValue; + if(element.tagName === 'SPAN' && !element.classList.contains('emoji')) { element = element.firstElementChild as HTMLElement; } @@ -181,12 +182,14 @@ export default class EmojiTab implements EmoticonsTab { let target = e.target as HTMLElement; //if(target.tagName != 'SPAN') return; - if(target.tagName == 'SPAN' && !target.classList.contains('emoji')) { - target = target.firstElementChild as HTMLElement; + if(target.tagName === 'SPAN' && !target.classList.contains('emoji')) { + target = target.firstChild as HTMLElement; } else if(target.tagName == 'DIV') return; //console.log('contentEmoji div', target); - appImManager.chat.input.messageInput.innerHTML += RichTextProcessor.emojiSupported ? target.innerHTML : target.outerHTML; + appImManager.chat.input.messageInput.innerHTML += RichTextProcessor.emojiSupported ? + (target.nodeType === 3 ? target.nodeValue : target.innerHTML) : + target.outerHTML; // Recent const emoji = this.getEmojiFromElement(target); diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 827e7897..46f1c250 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -28,6 +28,7 @@ import appPollsManager from './appPollsManager'; import SetTransition from '../../components/singleTransition'; import ChatDragAndDrop from '../../components/chat/dragAndDrop'; import { debounce } from '../../helpers/schedulers'; +import lottieLoader from '../lottieLoader'; //console.log('appImManager included33!'); @@ -156,6 +157,9 @@ export class AppImManager { apiManager.setQueueId(this.chat.bubbles.lazyLoadQueue.queueId); }, rootScope.settings.animationsEnabled ? 250 : 0, false, true); + + lottieLoader.setLoop(rootScope.settings.stickers.loop); + animationIntersector.checkAnimations(false); } private chatsSelectTab(tab: HTMLElement) { diff --git a/src/lib/lottieLoader.ts b/src/lib/lottieLoader.ts index 7391d239..4d26da7a 100644 --- a/src/lib/lottieLoader.ts +++ b/src/lib/lottieLoader.ts @@ -54,7 +54,9 @@ export class RLottiePlayer extends EventListenerBase<{ public direction = 1; public speed = 1; public autoplay = true; + public _autoplay: boolean; // ! will be used to store original value for settings.stickers.loop public loop = true; + public _loop: boolean; // ! will be used to store original value for settings.stickers.loop public group = ''; private frInterval: number; @@ -92,6 +94,9 @@ export class RLottiePlayer extends EventListenerBase<{ } } + this._loop = this.loop; + this._autoplay = this.autoplay; + // * Skip ratio (30fps) let skipRatio: number; if(options.skipRatio !== undefined) skipRatio = options.skipRatio; @@ -539,8 +544,8 @@ class LottieLoader { private log = logger('LOTTIE', LogLevels.error); public getAnimation(element: HTMLElement) { - for(let i in this.players) { - if(this.players[i].el == element) { + for(const i in this.players) { + if(this.players[i].el === element) { return this.players[i]; } } @@ -548,6 +553,14 @@ class LottieLoader { return null; } + public setLoop(loop: boolean) { + for(const i in this.players) { + const player = this.players[i]; + player.loop = loop; + player.autoplay = player._autoplay; + } + } + public loadLottieWorkers() { if(typeof(WebAssembly) === 'undefined') return Promise.reject(); diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 9d5580ac..308bed95 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -454,13 +454,6 @@ $bubble-margin: .25rem; vertical-align: bottom; } - span.emoji { - height: auto; - width: auto; - overflow: visible; - vertical-align: unset; - } - .thumbnail { position: absolute; } diff --git a/src/scss/style.scss b/src/scss/style.scss index f643a0e5..30bd73ef 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -301,7 +301,7 @@ a { } button, input, optgroup, select, textarea, html { - font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: "Roboto", -apple-system, apple color emoji, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } input, textarea, button, select, a, div {