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

mediaviewer slide

This commit is contained in:
Eduard Kuzmenko 2020-02-15 18:14:58 +07:00
parent efa3151602
commit 98ddc93d9a
3 changed files with 235 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index_template.html
View File

@ -231,9 +231,9 @@
<div class="media-viewer-caption"></div>
<!-- <div class="media-viewer-loader a-loader"></div> -->
</div>
<div class="media-viewer-mover" style="display: none;"></div>
</div>
</div>
<div class="media-viewer-mover" style="display: none;"></div>
<div class="popup popup-delete-message">
<div class="popup-container z-depth-1">
<div class="popup-header">Do you want to delete this message?</div>

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

@ -26,7 +26,8 @@ export class AppMediaViewer {
private content = {
container: this.overlaysDiv.querySelector('.media-viewer-media') as HTMLDivElement,
caption: this.overlaysDiv.querySelector('.media-viewer-caption') as HTMLDivElement,
mover: this.overlaysDiv.querySelector('.media-viewer-mover') as HTMLDivElement
//mover: this.overlaysDiv.querySelector('.media-viewer-mover') as HTMLDivElement
mover: document.querySelector('.media-viewer-mover') as HTMLDivElement
};
public currentMessageID = 0;
@ -37,10 +38,14 @@ export class AppMediaViewer {
private nextTarget: HTMLElement = null;
public log: ReturnType<typeof logger>;
public onKeyDownBinded: any;
public onClickBinded: any;
constructor() {
this.log = logger('AMV');
this.preloader = new ProgressivePreloader();
this.onKeyDownBinded = this.onKeyDown.bind(this);
this.buttons.close.addEventListener('click', () => {
//this.overlaysDiv.classList.remove('active');
@ -48,6 +53,12 @@ export class AppMediaViewer {
this.currentMessageID = 0;
this.setMoverToTarget(this.lastTarget, true);
this.lastTarget = null;
this.prevTarget = null;
this.nextTarget = null;
window.removeEventListener('keydown', this.onKeyDownBinded);
});
this.buttons.prev.addEventListener('click', () => {
@ -73,31 +84,85 @@ export class AppMediaViewer {
appPhotosManager.downloadPhoto(message.media.photo.id);
});
this.overlaysDiv.addEventListener('click', (e) => {
this.onClickBinded = (e: MouseEvent) => {
let target = e.target as HTMLElement;
if(target == this.mediaViewerDiv || target.tagName == 'IMG') {
this.buttons.close.click();
}
});
};
this.overlaysDiv.addEventListener('click', this.onClickBinded);
this.content.mover.addEventListener('click', this.onClickBinded);
//this.content.mover.append(this.buttons.prev, this.buttons.next);
}
public setMoverToTarget(target: HTMLElement, closing = false) {
public onKeyDown(e: KeyboardEvent) {
//this.log('onKeyDown', e);
if(e.key == 'ArrowRight') {
this.buttons.next.click();
} else if(e.key == 'ArrowLeft') {
this.buttons.prev.click();
}
}
public setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) {
let mover = this.content.mover;
if(!closing) {
mover.innerHTML = '';
mover.append(this.buttons.prev, this.buttons.next);
}
let wasActive = fromRight !== 0;
let delay = wasActive ? 350 : 200;
/* if(wasActive) {
this.moveTheMover(mover);
mover = this.setNewMover();
} */
this.log('setMoverToTarget', target, closing, wasActive, fromRight);
let rect = target.getBoundingClientRect();
let containerRect = this.content.container.getBoundingClientRect();
let scaleX = rect.width / containerRect.width;
let scaleY = rect.height / containerRect.height;
mover.style.transform = `translate(${rect.left}px, ${rect.top}px) scale(${scaleX}, ${scaleY})`;
let transform = '';
let left: number;
let top: number;
if(wasActive) {
left = fromRight === 1 ? appPhotosManager.windowW : -containerRect.width;
top = containerRect.top;
} else {
left = rect.left;
top = rect.top;
}
transform += `translate(${left}px,${top}px) `;
mover.style.width = containerRect.width + 'px';
mover.style.height = containerRect.height + 'px';
mover.style.borderRadius = window.getComputedStyle(target.parentElement).getPropertyValue('border-radius');
mover.classList.remove('cover');
let borderRadius = '';
if(!wasActive) {
let scaleX = rect.width / containerRect.width;
let scaleY = rect.height / containerRect.height;
transform += `scale(${scaleX},${scaleY}) `;
borderRadius = window.getComputedStyle(target.parentElement).getPropertyValue('border-radius');
mover.style.borderRadius = borderRadius;
}
mover.style.transform = transform;
if(wasActive) {
this.log('setMoverToTarget', mover.style.transform);
}
if(!closing) {
let img: HTMLImageElement;
@ -107,6 +172,8 @@ export class AppMediaViewer {
//img.style.objectFit = 'cover';
img = new Image();
img.src = target.style.backgroundImage.slice(5, -2);
//mover.classList.add('cover');
//mover.style.backgroundImage = target.style.backgroundImage;
} else if(target.tagName == 'IMG') {
img = new Image();
img.src = (target as HTMLImageElement).src;
@ -119,42 +186,112 @@ export class AppMediaViewer {
}
if(img) {
mover.appendChild(img);
img.style.borderRadius = borderRadius;
mover.prepend(img);
} else if(video) {
mover.appendChild(video);
video.style.borderRadius = borderRadius;
mover.prepend(video);
}
mover.style.display = '';
mover.classList.add('active');
setTimeout(() => {
mover.classList.add(wasActive ? 'moving' : 'active');
}, 0);
} else {
setTimeout(() => {
this.overlaysDiv.classList.remove('active');
}, 200 / 2);
}, 0);
setTimeout(() => {
mover.style.borderRadius = borderRadius;
if(mover.firstElementChild) {
(mover.firstElementChild as HTMLElement).style.borderRadius = borderRadius;
}
}, delay / 2);
if(target.tagName == 'DIV') {
mover.classList.add('cover');
}
setTimeout(() => {
mover.innerHTML = '';
mover.classList.remove('active');
mover.classList.remove('moving', 'active', 'cover');
mover.style.display = 'none';
}, 200);
}, delay);
}
return () => {
mover.style.transform = `translate(${containerRect.left}px, ${containerRect.top}px) scale(1, 1)`;
mover.style.transform = `translate(${containerRect.left}px,${containerRect.top}px) scale(1,1)`;
setTimeout(() => {
mover.style.borderRadius = '';
}, 200 / 2);
if(mover.firstElementChild) {
(mover.firstElementChild as HTMLElement).style.borderRadius = '';
}
mover.classList.remove('cover');
}, delay / 2);
};
}
public moveTheMover(mover: HTMLDivElement, toLeft = true) {
let windowW = appPhotosManager.windowW;
let windowH = appPhotosManager.windowH;
mover.classList.add('moving');
let rect = mover.getBoundingClientRect();
let newTransform = mover.style.transform.replace(/translate\((.+?),/, /* 'translate(-' + windowW + 'px,', */ (match, p1) => {
this.log('replace func', match, p1);
let x = +p1.slice(0, -2);
x = toLeft ? -rect.width : windowW;
return match.replace(p1, x + 'px');
});
this.log('set newTransform:', newTransform, mover.style.transform, toLeft);
mover.style.transform = newTransform;
setTimeout(() => {
mover.remove();
}, 350);
}
public setNewMover() {
let newMover = document.createElement('div');
newMover.classList.add('media-viewer-mover');
let oldMover = this.content.mover;
oldMover.parentElement.append(newMover);
newMover.addEventListener('click', this.onClickBinded);
return this.content.mover = newMover;
}
public openMedia(message: any, target?: HTMLElement, prevTarget?: HTMLElement, nextTarget?: HTMLElement) {
this.log('openMedia doc:', message, prevTarget, nextTarget);
let media = message.media.photo || message.media.document || message.media.webpage.document || message.media.webpage.photo;
let isVideo = media.mime_type == 'video/mp4';
let fromRight = 0;
if(this.lastTarget !== null) {
if(this.lastTarget === prevTarget) {
fromRight = 1;
} else if(this.lastTarget === nextTarget) {
fromRight = -1;
}
}
this.currentMessageID = message.mid;
this.prevTarget = prevTarget || null;
this.nextTarget = nextTarget || null;
this.lastTarget = target;
let container = this.content.container;
@ -180,15 +317,22 @@ export class AppMediaViewer {
}
appDialogsManager.loadDialogPhoto(this.author.avatarEl, message.fromID);
this.overlaysDiv.classList.add('active');
container.classList.add('loading');
// ok set
let wasActive = fromRight !== 0;
if(wasActive) {
this.moveTheMover(this.content.mover, fromRight === 1);
this.setNewMover();
} else {
window.addEventListener('keydown', this.onKeyDownBinded);
this.overlaysDiv.classList.add('active');
}
this.log('wasActive:', wasActive);
let mover = this.content.mover;
this.lastTarget = target;
let maxWidth = appPhotosManager.windowW - 16;
let maxHeight = appPhotosManager.windowH - 100;
if(isVideo) {
@ -196,8 +340,8 @@ export class AppMediaViewer {
this.log('will wrap video', media, size);
let afterTimeout = this.setMoverToTarget(target);
let afterTimeout = this.setMoverToTarget(target, false, fromRight);
//if(wasActive) return;
setTimeout(() => {
afterTimeout();
@ -207,12 +351,12 @@ export class AppMediaViewer {
return;
}
});
});
}, 0);
} else {
let size = appPhotosManager.setAttachmentSize(media.id, container, maxWidth, maxHeight);
let afterTimeout = this.setMoverToTarget(target);
let afterTimeout = this.setMoverToTarget(target, false, fromRight);
//if(wasActive) return;
setTimeout(() => {
afterTimeout();
this.preloader.attach(mover);
@ -228,7 +372,7 @@ export class AppMediaViewer {
let image = mover.firstElementChild as HTMLImageElement || new Image();
image.src = URL.createObjectURL(blob);
mover.append(image);
mover.prepend(image);
this.preloader.detach();
}).catch(err => {

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

@ -118,47 +118,6 @@
/* object-fit: cover; */
object-fit: contain;
}
.media-viewer-switcher-left, .media-viewer-switcher-right {
position: absolute;
left: 0;
top: 0;
width: 10rem;
height: 100%;
cursor: pointer;
z-index: 5;
&:hover {
> span {
opacity: 1;
}
}
}
.media-viewer-switcher-right {
left: auto;
right: 0;
}
.media-viewer-prev-button, .media-viewer-next-button {
cursor: pointer;
position: absolute;
color: #fff;
font-size: 3rem;
left: 2rem;
top: 50%;
transform: translateY(-50%) rotate(90deg);
opacity: 0;
transition: .2s opacity;
z-index: 5;
/* box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07); */
}
.media-viewer-next-button {
left: auto;
right: 2rem;
transform: translateY(-50%) rotate(-90deg);
}
.media-viewer-caption {
flex: 1;
@ -176,15 +135,62 @@
}
}
&-switcher-left, &-switcher-right {
position: absolute;
left: 0;
top: 0;
width: 10rem;
height: 100%;
cursor: pointer;
z-index: 5;
&:hover {
> span {
opacity: 1;
}
}
}
&-switcher-right {
left: auto;
right: 0;
}
&-prev-button, &-next-button {
cursor: pointer;
position: absolute;
color: #fff;
font-size: 3rem;
left: 2rem;
top: 50%;
transform: translateY(-50%) rotate(90deg);
opacity: 0;
transition: .2s opacity;
z-index: 5;
/* box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07); */
}
&-next-button {
left: auto;
right: 2rem;
transform: translateY(-50%) rotate(-90deg);
}
&-mover {
position: fixed;
position: fixed!important;
z-index: 4;
display: flex;
justify-content: center;
min-height: auto!important;
//transition: .5s all;
left: 0;
top: 0;
transform-origin: top left;
overflow: hidden;
//border-radius: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
.ckin__player {
width: 100%;
@ -192,13 +198,26 @@
}
img, video {
/* object-fit: contain; */
width: 100%;
height: 100%;
}
&.cover {
align-items: center;
img, video {
width: auto;
height: auto;
overflow: hidden;
}
}
&.active {
transition: .2s all;
transition: .2s transform;
}
&.moving {
transition: 350ms transform ease;
}
}
}