MrBesen/tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix pin update in channels

Browse Source 
Go to message by author in media viewer
This commit is contained in:
morethanwords 2020-10-11 22:50:40 +03:00
parent 3ddd2dc665
commit 78998a5766
3 changed files with 82 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/lib/appManagers/appMediaViewer.ts
View File

@ -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 { isSafari } from "../../helpers/userAgent";
import appSidebarRight, { AppSidebarRight } from "../../components/sidebarRight";
import $rootScope from "../rootScope";
import { isTouchSupported } from "../../helpers/touchSupport";
import { isSafari } from "../../helpers/userAgent";
import { logger } from "../logger";
import VideoPlayer from "../mediaPlayer";
import { RichTextProcessor } from "../richtextprocessor";
import $rootScope from "../rootScope";
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<HTMLElement>);
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);

2
src/lib/appManagers/appMessagesManager.ts
View File

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

21
src/scss/partials/_mediaViewer.scss
View File

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