From 385650f3f96075a0d9a51695c052a9685d0e6527 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Thu, 4 Nov 2021 18:38:17 +0400 Subject: [PATCH] Fix editing profile Fix bubble names with via Fix displaying hidden name in media viewer --- src/components/appMediaViewer.ts | 12 +- src/components/appMediaViewerBase.ts | 45 ++++-- src/components/chat/bubbles.ts | 136 ++++++++++-------- src/components/editPeer.ts | 11 +- src/components/inputField.ts | 5 +- src/components/popups/index.ts | 6 +- src/components/popups/peer.ts | 3 +- src/components/popups/reportMessages.ts | 2 +- .../popups/reportMessagesConfirm.ts | 4 + .../sidebarLeft/tabs/editProfile.ts | 2 +- src/components/sidebarRight/tabs/chatType.ts | 2 +- src/components/sidebarRight/tabs/editChat.ts | 4 +- src/components/usernameInputField.ts | 2 +- src/lib/lottieLoader.ts | 16 +-- src/scss/partials/_button.scss | 10 +- src/scss/partials/_chatBubble.scss | 28 ++-- 16 files changed, 170 insertions(+), 118 deletions(-) diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index 35bfd2b8..ea87740f 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -13,7 +13,7 @@ import SearchListLoader from "../helpers/searchListLoader"; import { Message } from "../layer"; import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager"; import appImManager from "../lib/appManagers/appImManager"; -import appMessagesManager from "../lib/appManagers/appMessagesManager"; +import appMessagesManager, { MyMessage } from "../lib/appManagers/appMessagesManager"; import appPhotosManager, { MyPhoto } from "../lib/appManagers/appPhotosManager"; import RichTextProcessor from "../lib/richtextprocessor"; import { MediaSearchContext } from "./appMediaPlaybackController"; @@ -227,12 +227,12 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet } }; - private setCaption(message: Message.message) { - const caption = message.message; + private setCaption(message: MyMessage) { + const caption = (message as Message.message).message; let html = ''; if(caption) { html = RichTextProcessor.wrapRichText(caption, { - entities: message.totalEntities + entities: (message as Message.message).totalEntities }); } @@ -248,12 +248,12 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet return this; } - public async openMedia(message: any, target?: HTMLElement, fromRight = 0, reverse = false, + public async openMedia(message: MyMessage, target?: HTMLElement, fromRight = 0, reverse = false, prevTargets: AppMediaViewerTargetType[] = [], nextTargets: AppMediaViewerTargetType[] = []/* , needLoadMore = true */) { if(this.setMoverPromise) return this.setMoverPromise; const mid = message.mid; - const fromId = message.fromId; + const fromId = (message as Message.message).fwd_from && !message.fromId ? (message as Message.message).fwd_from.from_name : message.fromId; const media = appMessagesManager.getMediaFromMessage(message); this.buttons.forward.classList.toggle('hide', message._ === 'messageService'); diff --git a/src/components/appMediaViewerBase.ts b/src/components/appMediaViewerBase.ts index 9522629d..722f4157 100644 --- a/src/components/appMediaViewerBase.ts +++ b/src/components/appMediaViewerBase.ts @@ -39,6 +39,9 @@ import RangeSelector from "./rangeSelector"; import windowSize from "../helpers/windowSize"; import ListLoader from "../helpers/listLoader"; import EventListenerBase from "../helpers/eventListenerBase"; +import { MyMessage } from "../lib/appManagers/appMessagesManager"; +import RichTextProcessor from "../lib/richtextprocessor"; +import { NULL_PEER_ID } from "../lib/mtproto/mtproto_config"; const ZOOM_STEP = 0.5; const ZOOM_INITIAL_VALUE = 1; @@ -1096,32 +1099,50 @@ export default class AppMediaViewerBase< } */ } - protected setAuthorInfo(fromId: PeerId, timestamp: number) { + protected setAuthorInfo(fromId: PeerId | string, timestamp: number) { replaceContent(this.author.date, formatFullSentTime(timestamp)); - replaceContent(this.author.nameEl, new PeerTitle({ - peerId: fromId, - dialog: false, - onlyFirstName: false, - plainText: false - }).element); + const isPeerId = fromId.isPeerId(); + let title: HTMLElement; + if(isPeerId) { + title = new PeerTitle({ + peerId: fromId as PeerId, + dialog: false, + onlyFirstName: false, + plainText: false + }).element; + } else { + title = document.createElement('span'); + title.innerHTML = RichTextProcessor.wrapEmojiText(fromId); + title.classList.add('peer-title'); + } + + replaceContent(this.author.nameEl, title); let oldAvatar = this.author.avatarEl; - this.author.avatarEl = (this.author.avatarEl.cloneNode() as AvatarElement); - this.author.avatarEl.setAttribute('peer', '' + (fromId || rootScope.myId)); + this.author.avatarEl = (oldAvatar.cloneNode() as AvatarElement); + + if(!isPeerId) { + this.author.avatarEl.setAttribute('peer-title', '' + fromId); + } else { + this.author.avatarEl.removeAttribute('peer-title'); + } + + this.author.avatarEl.setAttribute('peer', '' + (fromId || NULL_PEER_ID)); + oldAvatar.parentElement.replaceChild(this.author.avatarEl, oldAvatar); } protected async _openMedia( media: MyDocument | MyPhoto, timestamp: number, - fromId: PeerId, + fromId: PeerId | string, fromRight: number, target?: HTMLElement, reverse = false, prevTargets: TargetType[] = [], nextTargets: TargetType[] = [], - message?: Message.message + message?: MyMessage /* , needLoadMore = true */ ) { if(this.setMoverPromise) return this.setMoverPromise; @@ -1407,7 +1428,7 @@ export default class AppMediaViewerBase< } if(useController) { - const rollback = appMediaPlaybackController.setSingleMedia(video, message); + const rollback = appMediaPlaybackController.setSingleMedia(video, message as Message.message); this.addEventListener('setMoverBefore', () => { rollback(); diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 542f99ea..93c42df2 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -42,7 +42,7 @@ import ListenerSetter from "../../helpers/listenerSetter"; import PollElement from "../poll"; import AudioElement from "../audio"; import { Message, MessageEntity, MessageReplyHeader, Photo, PhotoSize, ReplyMarkup, Update, WebPage } from "../../layer"; -import { REPLIES_PEER_ID } from "../../lib/mtproto/mtproto_config"; +import { NULL_PEER_ID, REPLIES_PEER_ID } from "../../lib/mtproto/mtproto_config"; import { FocusDirection } from "../../helpers/fastSmoothScroll"; import useHeavyAnimationCheck, { getHeavyAnimationPromise, dispatchHeavyAnimationEvent, interruptHeavyAnimation } from "../../hooks/useHeavyAnimationCheck"; import { fastRaf, fastRafPromise } from "../../helpers/schedulers"; @@ -79,6 +79,7 @@ import SetTransition from "../singleTransition"; import handleHorizontalSwipe from "../../helpers/dom/handleHorizontalSwipe"; import { cancelContextMenuOpening } from "../misc"; import findUpAttribute from "../../helpers/dom/findUpAttribute"; +import findUpAsChild from "../../helpers/dom/findUpAsChild"; const USE_MEDIA_TAILS = false; const IGNORE_ACTIONS: Set = new Set([ @@ -981,24 +982,35 @@ export default class ChatBubbles { return; } - const nameDiv = findUpClassName(target, 'peer-title') || findUpClassName(target, 'name') || findUpTag(target, 'AVATAR-ELEMENT') || findUpAttribute(target, 'data-saved-from'); - if(nameDiv && nameDiv !== bubble) { - target = nameDiv || target; - const peerId = (target.dataset.peerId || target.getAttribute('peer')); - const savedFrom = target.dataset.savedFrom; - if(nameDiv.classList.contains('is-via')) { - const message = '@' + this.appUsersManager.getUser(peerId).username + ' '; + const via = findUpClassName(target, 'is-via'); + if(via) { + const el = via.querySelector('.peer-title') as HTMLElement; + if(target === el || findUpAsChild(target, el)) { + const message = el.innerText + ' '; this.appDraftsManager.setDraft(this.peerId, this.chat.threadId, message); cancelEvent(e); - } else if(savedFrom) { - const [peerId, mid] = savedFrom.split('_'); + + return; + } + } - this.chat.appImManager.setInnerPeer(peerId.toPeerId(), +mid); - } else { - if(peerId) { - this.chat.appImManager.setInnerPeer(peerId.toPeerId()); + const nameDiv = findUpClassName(target, 'peer-title') || findUpTag(target, 'AVATAR-ELEMENT') || findUpAttribute(target, 'data-saved-from'); + if(nameDiv && nameDiv !== bubble) { + target = nameDiv || target; + const peerIdStr = target.dataset.peerId || target.getAttribute('peer'); + if(typeof(peerIdStr) === 'string') { + const savedFrom = target.dataset.savedFrom; + if(savedFrom) { + const [peerId, mid] = savedFrom.split('_'); + + this.chat.appImManager.setInnerPeer(peerId.toPeerId(), +mid); } else { - toast(I18n.format('HidAccount', true)); + const peerId = peerIdStr.toPeerId(); + if(peerId !== NULL_PEER_ID) { + this.chat.appImManager.setInnerPeer(peerId); + } else { + toast(I18n.format('HidAccount', true)); + } } } @@ -1006,7 +1018,7 @@ export default class ChatBubbles { } //this.log('chatInner click:', target); - const isVideoComponentElement = target.tagName === 'SPAN' && !target.classList.contains('emoji'); + // const isVideoComponentElement = target.tagName === 'SPAN' && findUpClassName(target, 'media-container'); /* if(isVideoComponentElement) { const video = target.parentElement.querySelector('video') as HTMLElement; if(video) { @@ -1031,7 +1043,7 @@ export default class ChatBubbles { const documentDiv = findUpClassName(target, 'document-with-thumb'); if((target.tagName === 'IMG' && !target.classList.contains('emoji') && !target.classList.contains('document-thumb')) || target.classList.contains('album-item') - || isVideoComponentElement + // || isVideoComponentElement || (target.tagName === 'VIDEO' && !bubble.classList.contains('round')) || (documentDiv && !documentDiv.querySelector('.preloader-container'))) { const groupedItem = findUpClassName(target, 'album-item') || findUpClassName(target, 'document-container'); @@ -3040,15 +3052,19 @@ export default class ChatBubbles { const needName = (message.fromId !== rootScope.myId && this.appPeersManager.isAnyChat(peerId) && !this.appPeersManager.isBroadcast(peerId)) || message.viaBotId; if(needName || message.fwd_from || message.reply_to_mid) { // chat let title: HTMLElement | DocumentFragment; + let titleVia: typeof title; const isForwardFromChannel = message.from_id && message.from_id._ === 'peerChannel' && message.fromId === message.fwdFromId; let isHidden = message.fwd_from && !message.fwd_from.from_id && !message.fwd_from.channel_id; if(message.viaBotId) { - title = document.createElement('span'); - title.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username; - title.classList.add('peer-title'); - } else if(isHidden) { + titleVia = document.createElement('span'); + titleVia.innerText = '@' + this.appUsersManager.getUser(message.viaBotId).username; + titleVia.classList.add('peer-title'); + bubble.classList.add('must-have-name'); + } + + if(isHidden) { ///////this.log('message to render hidden', message); title = document.createElement('span'); title.innerHTML = RichTextProcessor.wrapEmojiText(message.fwd_from.from_name); @@ -3056,7 +3072,7 @@ export default class ChatBubbles { //title = message.fwd_from.from_name; bubble.classList.add('hidden-profile'); } else { - title = new PeerTitle({peerId: message.viaBotId || message.fwdFromId || message.fromId}).element; + title = new PeerTitle({peerId: message.fwdFromId || message.fromId}).element; } if(message.reply_to_mid && message.reply_to_mid !== this.chat.threadId) { @@ -3070,53 +3086,35 @@ export default class ChatBubbles { //this.log(title); - if(message.viaBotId) { - //if(!bubble.classList.contains('sticker') || true) { - let nameDiv = document.createElement('div'); - nameDiv.classList.add('name', 'is-via'); - nameDiv.dataset.peerId = message.viaBotId; - nameDiv.append(i18n('ViaBot'), ' ', title); - nameContainer.append(nameDiv); - // } else { - // bubble.classList.add('hide-name'); - // } - } else if((message.fwdFromId || message.fwd_from)) { + let nameDiv: HTMLElement; + if((message.fwdFromId || message.fwd_from)) { if(this.peerId !== rootScope.myId && !isForwardFromChannel) { bubble.classList.add('forwarded'); } if(message.savedFrom) { savedFrom = message.savedFrom; + title.dataset.savedFrom = savedFrom; } - //if(!bubble.classList.contains('sticker') || true) { - let nameDiv = document.createElement('div'); - nameDiv.classList.add('name'); - nameDiv.dataset.peerId = message.fwdFromId; - - if((this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) && !isStandaloneMedia) { - nameDiv.style.color = this.appPeersManager.getPeerColorById(message.fwdFromId, false); - nameDiv.append(title); - } else { - /* const fromTitle = message.fromId === this.myID || appPeersManager.isBroadcast(message.fwdFromId || message.fromId) ? '' : `
${appPeersManager.getPeerTitle(message.fromId)}
`; - nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */ - const args: FormatterArguments = [title]; - if(isStandaloneMedia) { - args.unshift(document.createElement('br')); - } - nameDiv.append(i18n('ForwardedFrom', [args])); + nameDiv = document.createElement('div'); + title.dataset.peerId = message.fwdFromId; - if(savedFrom) { - nameDiv.dataset.savedFrom = savedFrom; - } + if((this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID || isForwardFromChannel) && !isStandaloneMedia) { + nameDiv.style.color = this.appPeersManager.getPeerColorById(message.fwdFromId, false); + nameDiv.append(title); + } else { + /* const fromTitle = message.fromId === this.myID || appPeersManager.isBroadcast(message.fwdFromId || message.fromId) ? '' : `
${appPeersManager.getPeerTitle(message.fromId)}
`; + nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */ + const args: FormatterArguments = [title]; + if(isStandaloneMedia) { + args.unshift(document.createElement('br')); } - - nameContainer.append(nameDiv); - //} - } else { + nameDiv.append(i18n('ForwardedFrom', [args])); + } + } else if(!message.viaBotId) { if(!isStandaloneMedia && needName) { - let nameDiv = document.createElement('div'); - nameDiv.classList.add('name'); + nameDiv = document.createElement('div'); nameDiv.append(title); if(!our) { @@ -3124,12 +3122,30 @@ export default class ChatBubbles { } nameDiv.dataset.peerId = message.fromId; - nameContainer.append(nameDiv); } else /* if(!message.reply_to_mid) */ { bubble.classList.add('hide-name'); } } + if(message.viaBotId) { + if(!nameDiv) { + nameDiv = document.createElement('div'); + } else { + nameDiv.append(' '); + } + + const span = document.createElement('span'); + span.append(i18n('ViaBot'), ' ', titleVia); + span.classList.add('is-via'); + + nameDiv.append(span); + } + + if(nameDiv) { + nameDiv.classList.add('name'); + nameContainer.append(nameDiv); + } + const needAvatar = this.chat.isAnyGroup() && !isOut; if(needAvatar) { let avatarElem = new AvatarElement(); @@ -3141,7 +3157,7 @@ export default class ChatBubbles { avatarElem.setAttribute('peer-title', /* '🔥 FF 🔥' */message.fwd_from.from_name); } - avatarElem.setAttribute('peer', '' + (((message.fwd_from && (this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID)) || isForwardFromChannel ? message.fwdFromId : message.fromId) || 0)); + avatarElem.setAttribute('peer', '' + (((message.fwd_from && (this.peerId === rootScope.myId || this.peerId === REPLIES_PEER_ID)) || isForwardFromChannel ? message.fwdFromId : message.fromId) || NULL_PEER_ID)); //avatarElem.update(); //this.log('exec loadDialogPhoto', message); diff --git a/src/components/editPeer.ts b/src/components/editPeer.ts index ba8ddb8c..6972d206 100644 --- a/src/components/editPeer.ts +++ b/src/components/editPeer.ts @@ -95,11 +95,12 @@ export default class EditPeer { return true; } - let validLength = 0, requiredLength = 0, requiredValidLength = 0; + let changedLength = 0, requiredLength = 0, requiredValidLength = 0; this.inputFields.forEach(inputField => { - const isValid = inputField.isValid(); - if(isValid) { - ++validLength; + if(inputField.isValid()) { + if(inputField.isChanged()) { + ++changedLength; + } if(inputField.required) { ++requiredValidLength; @@ -111,7 +112,7 @@ export default class EditPeer { } }); - return requiredLength === requiredValidLength && validLength > 0; + return requiredLength === requiredValidLength && changedLength > 0; }; public handleChange = () => { diff --git a/src/components/inputField.ts b/src/components/inputField.ts index e516d08b..7baee449 100644 --- a/src/components/inputField.ts +++ b/src/components/inputField.ts @@ -300,11 +300,14 @@ class InputField { public isValid() { return !this.input.classList.contains('error') && - this.isChanged() && (!this.validate || this.validate()) && (!this.required || !isInputEmpty(this.input)); } + public isValidToChange() { + return this.isValid() && this.isChanged(); + } + public setDraftValue(value = '', silent = false) { if(!this.options.plainText) { value = RichTextProcessor.wrapDraftText(value); diff --git a/src/components/popups/index.ts b/src/components/popups/index.ts index a6d421d5..56a6531a 100644 --- a/src/components/popups/index.ts +++ b/src/components/popups/index.ts @@ -42,7 +42,7 @@ export default class PopupElement { protected btnClose: HTMLElement; protected btnConfirm: HTMLButtonElement; protected body: HTMLElement; - protected buttons: HTMLElement; + protected buttonsEl: HTMLElement; protected onClose: () => void; protected onCloseAfterTimeout: () => void; @@ -55,7 +55,7 @@ export default class PopupElement { protected confirmShortcutIsSendShortcut: boolean; protected btnConfirmOnEnter: HTMLButtonElement; - constructor(className: string, buttons?: Array, options: PopupOptions = {}) { + constructor(className: string, protected buttons?: Array, options: PopupOptions = {}) { this.element.classList.add('popup'); this.element.className = 'popup' + (className ? ' ' + className : ''); this.container.classList.add('popup-container', 'z-depth-1'); @@ -105,7 +105,7 @@ export default class PopupElement { let btnConfirmOnEnter = this.btnConfirm; if(buttons && buttons.length) { - const buttonsDiv = this.buttons = document.createElement('div'); + const buttonsDiv = this.buttonsEl = document.createElement('div'); buttonsDiv.classList.add('popup-buttons'); if(buttons.length === 2) { diff --git a/src/components/popups/peer.ts b/src/components/popups/peer.ts index 22169cb4..eda526fa 100644 --- a/src/components/popups/peer.ts +++ b/src/components/popups/peer.ts @@ -9,6 +9,7 @@ import PopupElement, { addCancelButton, PopupButton, PopupOptions } from "."; import { i18n, LangPackKey } from "../../lib/langPack"; import CheckboxField, { CheckboxFieldOptions } from "../checkboxField"; +export type PopupPeerButton = Omit & Partial<{callback: PopupPeerButtonCallback}>; export type PopupPeerButtonCallbackCheckboxes = Set; export type PopupPeerButtonCallback = (checkboxes?: PopupPeerButtonCallbackCheckboxes) => void; export type PopupPeerCheckboxOptions = CheckboxFieldOptions & {checkboxField?: CheckboxField}; @@ -22,7 +23,7 @@ export type PopupPeerOptions = PopupOptions & Partial<{ description: string, descriptionLangKey?: LangPackKey, descriptionLangArgs?: any[], - buttons?: Array & Partial<{callback: PopupPeerButtonCallback}>>, + buttons?: Array, checkboxes: Array }>; export default class PopupPeer extends PopupElement { diff --git a/src/components/popups/reportMessages.ts b/src/components/popups/reportMessages.ts index 4552d62b..b0ad9a99 100644 --- a/src/components/popups/reportMessages.ts +++ b/src/components/popups/reportMessages.ts @@ -48,7 +48,7 @@ export default class PopupReportMessages extends PopupPeer { }, {listenerSetter: this.listenerSetter}); this.body.style.margin = '0 -1rem'; - this.buttons.style.marginTop = '.5rem'; + this.buttonsEl.style.marginTop = '.5rem'; this.show(); } diff --git a/src/components/popups/reportMessagesConfirm.ts b/src/components/popups/reportMessagesConfirm.ts index 485dbed4..764757a9 100644 --- a/src/components/popups/reportMessagesConfirm.ts +++ b/src/components/popups/reportMessagesConfirm.ts @@ -61,6 +61,10 @@ export default class PopupReportMessagesConfirm extends PopupPeer { placeholder: 'ReportChatDescription' }); + inputField.input.addEventListener('input', () => { + this.buttons[0].element.toggleAttribute('disabled', !inputField.isValid()); + }); + this.body.append(inputField.container); } } diff --git a/src/components/sidebarLeft/tabs/editProfile.ts b/src/components/sidebarLeft/tabs/editProfile.ts index 7fecf293..8c5852fb 100644 --- a/src/components/sidebarLeft/tabs/editProfile.ts +++ b/src/components/sidebarLeft/tabs/editProfile.ts @@ -135,7 +135,7 @@ export default class AppEditProfileTab extends SliderSuperTab { })); } - if(this.usernameInputField.isValid() && !this.usernameInputField.input.classList.contains('error')) { + if(this.usernameInputField.isValidToChange()) { promises.push(appUsersManager.updateUsername(this.usernameInputField.value)); } diff --git a/src/components/sidebarRight/tabs/chatType.ts b/src/components/sidebarRight/tabs/chatType.ts index 4c4e6844..64a5ef3e 100644 --- a/src/components/sidebarRight/tabs/chatType.ts +++ b/src/components/sidebarRight/tabs/chatType.ts @@ -117,7 +117,7 @@ export default class AppChatTypeTab extends SliderSuperTabEventable { const onChange = () => { const changed = (privateRow.radioField.checked && (originalValue !== placeholder/* || revoked */)) - || (linkInputField.isValid() && linkInputField.input.classList.contains('valid')); + || (linkInputField.isValidToChange() && linkInputField.input.classList.contains('valid')); applyBtn.classList.toggle('is-visible', changed); }; diff --git a/src/components/sidebarRight/tabs/editChat.ts b/src/components/sidebarRight/tabs/editChat.ts index c381b395..6276a7a5 100644 --- a/src/components/sidebarRight/tabs/editChat.ts +++ b/src/components/sidebarRight/tabs/editChat.ts @@ -174,11 +174,11 @@ export default class AppEditChatTab extends SliderSuperTab { let promises: Promise[] = []; const id = this.chatId; - if(this.chatNameInputField.isValid()) { + if(this.chatNameInputField.isValidToChange()) { promises.push(appChatsManager.editTitle(id, this.chatNameInputField.value)); } - if(this.descriptionInputField.isValid()) { + if(this.descriptionInputField.isValidToChange()) { promises.push(appChatsManager.editAbout(id, this.descriptionInputField.value)); } diff --git a/src/components/usernameInputField.ts b/src/components/usernameInputField.ts index f89bbb96..c7ae477a 100644 --- a/src/components/usernameInputField.ts +++ b/src/components/usernameInputField.ts @@ -97,7 +97,7 @@ export class UsernameInputField extends InputField { this.options.onChange && this.options.onChange(); const value = this.getValue(); - if(value !== username && this.isValid() && RichTextProcessor.isUsernameValid(value)) { + if(value !== username && this.isValidToChange() && RichTextProcessor.isUsernameValid(value)) { this.checkUsername(value); } }); diff --git a/src/lib/lottieLoader.ts b/src/lib/lottieLoader.ts index cd1e72b4..034a7389 100644 --- a/src/lib/lottieLoader.ts +++ b/src/lib/lottieLoader.ts @@ -21,7 +21,7 @@ let convert = (value: number) => { type RLottiePlayerListeners = 'enterFrame' | 'ready' | 'firstFrame' | 'cached'; type RLottieOptions = { - container: HTMLElement, + container?: HTMLElement, autoplay?: boolean, animationData: string, loop?: boolean, @@ -83,15 +83,14 @@ export class RLottiePlayer extends EventListenerBase<{ private currentMethod: RLottiePlayer['mainLoopForwards'] | RLottiePlayer['mainLoopBackwards']; private frameListener: () => void; - constructor({el, worker, options}: { - el: HTMLElement, + constructor({worker, options}: { worker: QueryableWorker, options: RLottieOptions }) { super(true); this.reqId = ++RLottiePlayer['reqId']; - this.el = el; + this.el = options.container; this.worker = worker; for(let i in options) { @@ -416,7 +415,7 @@ export class RLottiePlayer extends EventListenerBase<{ this.addEventListener('enterFrame', () => { this.dispatchEvent('firstFrame'); - this.el.appendChild(this.canvas); + this.el && this.el.appendChild(this.canvas); //console.log('enterFrame firstFrame'); @@ -720,7 +719,7 @@ class LottieLoader { await this.loadLottieWorkers(); } - if(!params.width || !params.height) { + if((!params.width || !params.height) && params.container) { params.width = parseInt(params.container.style.width); params.height = parseInt(params.container.style.height); } @@ -731,7 +730,7 @@ class LottieLoader { params.group = group; - const player = this.initPlayer(params.container, params); + const player = this.initPlayer(params); if(group !== 'none') { animationIntersector.addAnimation(player, group); @@ -790,9 +789,8 @@ class LottieLoader { this.workers.length = 0; } - private initPlayer(el: HTMLElement, options: RLottieOptions) { + private initPlayer(options: RLottieOptions) { const rlPlayer = new RLottiePlayer({ - el, worker: this.workers[this.curWorkerNum++], options }); diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index 5d0f7be8..752da48b 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -15,6 +15,11 @@ } @include btn-hoverable(); + + &:disabled { + pointer-events: none !important; + opacity: var(--disabled-opacity); + } } .btn-icon { @@ -42,11 +47,6 @@ &.active { color: var(--primary-color); } - - &:disabled { - pointer-events: none !important; - opacity: var(--disabled-opacity); - } } .btn-corner { diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 7a642a81..001a2b28 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -277,9 +277,7 @@ $bubble-beside-button-width: 38px; position: relative; display: flex; flex-direction: column-reverse; - /* font-size: 0; */ - width: max-content; - height: fit-content; + // align-items: flex-start; z-index: 2; user-select: none; background-color: var(--message-background-color); @@ -327,7 +325,8 @@ $bubble-beside-button-width: 38px; opacity: .99999; // for safari pointer-events: none; - &:before, &:after { + &:before, + &:after { display: none; } @@ -426,7 +425,7 @@ $bubble-beside-button-width: 38px; } } - &:not(.forwarded) { + &:not(.forwarded):not(.must-have-name) { &:not(.is-group-first) { .bubble-content > .name, .document-wrapper > .name { @@ -1116,7 +1115,7 @@ $bubble-beside-button-width: 38px; &.forwarded .attachment, &.is-reply .attachment, - &:not(.hide-name).is-message-empty .attachment/* , + &:not(.hide-name)/* .is-message-empty */ .attachment/* , &:not(.hide-name):not(.sticker) .attachment */ { border-top-left-radius: 0; border-top-right-radius: 0; @@ -1596,6 +1595,11 @@ $bubble-beside-button-width: 38px; float: none; } + .video-time, + .video-play { + pointer-events: none; + } + .video-time { position: absolute; top: 3px; @@ -1655,10 +1659,13 @@ $bubble-beside-button-width: 38px; } .name { - cursor: pointer; user-select: none; } + .peer-title { + cursor: pointer; + } + &-content > .name, .document-wrapper > .name { /* padding: .2675rem 9px 0 9px; */ @@ -1676,9 +1683,9 @@ $bubble-beside-button-width: 38px; //white-space: nowrap; } - &:not(.is-group-first) .bubble-content > .name .name { + /* &:not(.is-group-first) .bubble-content > .name .name { display: none; - } + } */ &:not(.webpage) { &.photo, @@ -2191,7 +2198,8 @@ $bubble-beside-button-width: 38px; } &.just-media { - .reply, .name { + .reply, + .name { right: calc(100% + 10px); }