From 571158bc35fafe236443640b301f8754f045a47b Mon Sep 17 00:00:00 2001 From: morethanwords Date: Sun, 11 Oct 2020 22:50:40 +0300 Subject: [PATCH] Fix pin update in channels Go to message by author in media viewer --- src/lib/appManagers/appMediaViewer.ts | 121 ++++++++++++---------- src/lib/appManagers/appMessagesManager.ts | 2 +- src/scss/partials/_mediaViewer.scss | 21 ++-- 3 files changed, 81 insertions(+), 63 deletions(-) diff --git a/src/lib/appManagers/appMediaViewer.ts b/src/lib/appManagers/appMediaViewer.ts index 9b675a4b..d95aa556 100644 --- a/src/lib/appManagers/appMediaViewer.ts +++ b/src/lib/appManagers/appMediaViewer.ts @@ -1,22 +1,23 @@ -import appPeersManager from "./appPeersManager"; -import appPhotosManager from "./appPhotosManager"; -import appMessagesManager from "./appMessagesManager"; -import { RichTextProcessor } from "../richtextprocessor"; -import { logger } from "../logger"; -import ProgressivePreloader from "../../components/preloader"; -import { findUpClassName, generatePathData, fillPropertyValue, cancelEvent } from "../utils"; -import appDocsManager, {MyDocument} from "./appDocsManager"; -import VideoPlayer from "../mediaPlayer"; -import { renderImageFromUrl, parseMenuButtonsTo } from "../../components/misc"; +import appMediaPlaybackController from "../../components/appMediaPlaybackController"; import AvatarElement from "../../components/avatar"; import { LazyLoadQueueBase } from "../../components/lazyLoadQueue"; -import appMediaPlaybackController from "../../components/appMediaPlaybackController"; +import { parseMenuButtonsTo, renderImageFromUrl } from "../../components/misc"; +import ProgressivePreloader from "../../components/preloader"; +import appSidebarRight, { AppSidebarRight } from "../../components/sidebarRight"; import { deferredPromise } from "../../helpers/cancellablePromise"; import mediaSizes from "../../helpers/mediaSizes"; +import { isTouchSupported } from "../../helpers/touchSupport"; import { isSafari } from "../../helpers/userAgent"; -import appSidebarRight, { AppSidebarRight } from "../../components/sidebarRight"; +import { logger } from "../logger"; +import VideoPlayer from "../mediaPlayer"; +import { RichTextProcessor } from "../richtextprocessor"; import $rootScope from "../rootScope"; -import { isTouchSupported } from "../../helpers/touchSupport"; +import { cancelEvent, fillPropertyValue, findUpClassName, generatePathData } from "../utils"; +import appDocsManager, { MyDocument } from "./appDocsManager"; +import appImManager from "./appImManager"; +import appMessagesManager from "./appMessagesManager"; +import appPeersManager from "./appPeersManager"; +import appPhotosManager from "./appPhotosManager"; // TODO: масштабирование картинок (не SVG) при ресайзе, и правильный возврат на исходную позицию // TODO: картинки "обрезаются" если возвращаются или появляются с места, где есть их перекрытие (топбар, поле ввода) @@ -77,16 +78,17 @@ class SwipeHandler { } export class AppMediaViewer { - public wholeDiv = document.querySelector('.media-viewer-whole') as HTMLDivElement; - private overlaysDiv = this.wholeDiv.firstElementChild as HTMLDivElement; + public wholeDiv = document.querySelector('.media-viewer-whole') as HTMLElement; + private overlaysDiv = this.wholeDiv.firstElementChild as HTMLElement; private author = { + container: this.overlaysDiv.querySelector('.media-viewer-author') as HTMLElement, avatarEl: this.overlaysDiv.querySelector('.media-viewer-userpic') as AvatarElement, - nameEl: this.overlaysDiv.querySelector('.media-viewer-name') as HTMLDivElement, - date: this.overlaysDiv.querySelector('.media-viewer-date') as HTMLDivElement + nameEl: this.overlaysDiv.querySelector('.media-viewer-name') as HTMLElement, + date: this.overlaysDiv.querySelector('.media-viewer-date') as HTMLElement }; public buttons: {[k in 'delete' | 'forward' | 'download' | 'close' | 'prev' | 'next' | 'menu-delete' | 'menu-forward' | 'menu-download' | 'mobile-close']: HTMLElement} = {} as any; - private content: {[k in 'container' | 'caption' | 'mover']: HTMLDivElement} = { + private content: {[k in 'container' | 'caption' | 'mover']: HTMLElement} = { container: this.overlaysDiv.querySelector('.media-viewer-media'), caption: this.overlaysDiv.querySelector('.media-viewer-caption'), mover: null @@ -134,40 +136,9 @@ export class AppMediaViewer { this.lazyLoadQueue = new LazyLoadQueueBase(); parseMenuButtonsTo(this.buttons, this.wholeDiv.querySelectorAll(`[class*='menu']`) as NodeListOf); - - const close = (e: MouseEvent) => { - cancelEvent(e); - if(this.setMoverAnimationPromise) return; - //this.overlaysDiv.classList.remove('active'); - this.content.container.innerHTML = ''; - /* if(this.content.container.firstElementChild) { - URL.revokeObjectURL((this.content.container.firstElementChild as HTMLImageElement).src); - } */ - - this.peerID = 0; - this.currentMessageID = 0; - this.lazyLoadQueue.clear(); - - this.setMoverToTarget(this.lastTarget, true); - - this.lastTarget = null; - this.prevTargets = []; - this.nextTargets = []; - this.loadedAllMediaUp = this.loadedAllMediaDown = false; - this.loadMediaPromiseUp = this.loadMediaPromiseDown = null; - this.setMoverPromise = null; - - if(appSidebarRight.historyTabIDs.slice(-1)[0] == AppSidebarRight.SLIDERITEMSIDS.forward) { - setTimeout(() => { - appSidebarRight.forwardTab.closeBtn.click(); - }, 200); - } - - window.removeEventListener('keydown', this.onKeyDown); - }; [this.buttons.close, this.buttons["mobile-close"], this.preloaderStreamable.preloader].forEach(el => { - el.addEventListener('click', close); + el.addEventListener('click', this.close); }); this.buttons.prev.addEventListener('click', (e) => { @@ -208,6 +179,8 @@ export class AppMediaViewer { el.addEventListener('click', forward); }); + this.author.container.addEventListener('click', this.onAuthorClick); + this.wholeDiv.addEventListener('click', this.onClick); //this.content.mover.addEventListener('click', this.onClickBinded); //this.content.mover.append(this.buttons.prev, this.buttons.next); @@ -244,6 +217,50 @@ export class AppMediaViewer { } } + close = (e?: MouseEvent) => { + if(e) { + cancelEvent(e); + } + + if(this.setMoverAnimationPromise) return; + //this.overlaysDiv.classList.remove('active'); + this.content.container.innerHTML = ''; + /* if(this.content.container.firstElementChild) { + URL.revokeObjectURL((this.content.container.firstElementChild as HTMLImageElement).src); + } */ + + this.peerID = 0; + this.currentMessageID = 0; + this.lazyLoadQueue.clear(); + + const promise = this.setMoverToTarget(this.lastTarget, true).then(({onAnimationEnd}) => onAnimationEnd); + + this.lastTarget = null; + this.prevTargets = []; + this.nextTargets = []; + this.loadedAllMediaUp = this.loadedAllMediaDown = false; + this.loadMediaPromiseUp = this.loadMediaPromiseDown = null; + this.setMoverPromise = null; + + if(appSidebarRight.historyTabIDs.slice(-1)[0] == AppSidebarRight.SLIDERITEMSIDS.forward) { + promise.then(() => { + appSidebarRight.forwardTab.closeBtn.click(); + }); + } + + window.removeEventListener('keydown', this.onKeyDown); + + return promise; + }; + + onAuthorClick = (e: MouseEvent) => { + const mid = this.currentMessageID; + this.close(e).then(() => { + const message = appMessagesManager.getMessage(mid); + appImManager.setPeer(message.peerID, mid); + }); + }; + onClickDownload = (e: MouseEvent) => { const message = appMessagesManager.getMessage(this.currentMessageID); if(message.media.photo) { @@ -698,7 +715,7 @@ export class AppMediaViewer { step(); } - private removeCenterFromMover(mover: HTMLDivElement) { + private removeCenterFromMover(mover: HTMLElement) { if(mover.classList.contains('center')) { //const rect = mover.getBoundingClientRect(); const rect = this.content.container.getBoundingClientRect(); @@ -709,7 +726,7 @@ export class AppMediaViewer { } } - private moveTheMover(mover: HTMLDivElement, toLeft = true) { + private moveTheMover(mover: HTMLElement, toLeft = true) { const windowW = appPhotosManager.windowW; this.removeCenterFromMover(mover); diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts index 0300e447..4fd97af0 100644 --- a/src/lib/appManagers/appMessagesManager.ts +++ b/src/lib/appManagers/appMessagesManager.ts @@ -3971,7 +3971,7 @@ export class AppMessagesManager { break; } - case 'updateChannelPinnedMessage': + // 'updateChannelPinnedMessage' will be handled by appProfileManager case 'updateChatPinnedMessage': case 'updateUserPinnedMessage': { // hz nado li tut appMessagesIDsManager.getFullMessageID(update.max_id, channelID); diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss index 5cf5fff0..44286898 100644 --- a/src/scss/partials/_mediaViewer.scss +++ b/src/scss/partials/_mediaViewer.scss @@ -22,13 +22,14 @@ $move-duration: .35s; position: absolute; top: 0; left: 0; - height: 60px; - padding: 8px 8px 8px 80px; + height: 3.75rem; + padding: .5rem .5rem .5rem 5rem; display: flex; flex-direction: column; justify-content: center; color: #8b8b8b; transition: $open-duration; + cursor: pointer; html.no-touch &:hover { color: #fff; @@ -36,11 +37,11 @@ $move-duration: .35s; } &-userpic { - width: 44px; - height: 44px; + width: 2.75rem; + height: 2.75rem; position: absolute; - top: 8px; - left: 20px; + top: .5rem; + left: 1.25rem; @include respond-to(handhelds) { display: none; @@ -61,7 +62,7 @@ $move-duration: .35s; right: 0; display: flex; flex-flow: row nowrap; - padding: 8px; + padding: .5rem; .btn-icon { margin: 0 .25rem; @@ -125,14 +126,14 @@ $move-duration: .35s; &-switcher { position: absolute; left: 0; - top: 60px; + top: 3.75rem; width: 7rem; - height: calc(100% - 120px); + height: calc(100% - 7.5rem); cursor: pointer; z-index: 5; html.no-touch & { - height: calc(100% - 60px); + height: calc(100% - 3.75rem); &:hover { > span {