r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better media viewer caption transition

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-08-19 14:37:17 +03:00
parent 9381802bf4
commit 4b6a8ff056
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/appMediaViewer.ts
View File

@ -657,6 +657,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
mover.classList.add('hiding');
}
this.wholeDiv.classList.add('backwards');
setTimeout(() => {
this.wholeDiv.classList.remove('active');
}, 0);
@ -1346,6 +1347,16 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */);
let captionTimeout: number;
const setCaptionTimeout = () => {
if(captionTimeout) {
clearTimeout(captionTimeout);
}
captionTimeout = window.setTimeout(() => {
captionTimeout = undefined;
this.content.caption.classList.remove('is-focused');
}, 800);
};
this.content.caption.addEventListener('touchstart', () => {
if(!mediaSizes.isMobile) return;
@ -1356,15 +1367,11 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
captionTimeout = undefined;
}
document.addEventListener('touchend', () => {
captionTimeout = window.setTimeout(() => {
captionTimeout = undefined;
this.content.caption.classList.remove('is-focused');
}, 500);
}, {once: true});
document.addEventListener('touchend', setCaptionTimeout, {once: true});
});
new Scrollable(this.content.caption);
const captionScrollable = new Scrollable(this.content.caption);
captionScrollable.onAdditionalScroll = setCaptionTimeout;
//this.content.main.append(this.content.caption);
this.wholeDiv.append(this.content.caption);

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

@ -130,11 +130,9 @@
line-height: var(--line-height);
white-space: pre-wrap;
background-color: transparent;
visibility: hidden;
@include animation-level(2) {
transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, visibility 0s, background-color var(--open-duration) ease-in-out;
transition-delay: 0s, 0s, 0s, 0s;
transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, background-color var(--open-duration) ease-in-out;
}
a {
@ -181,6 +179,10 @@
transform: translate3d(0, -69px, 0);
}
.media-viewer-whole.backwards & {
visibility: hidden;
}
@include hover() {
background-color: #000;
opacity: 1 !important;
@ -506,12 +508,15 @@
> .btn-icon */ {
opacity: 1;
visibility: visible;
transition: opacity var(--open-duration) 0s, visibility 0s 0s;
@include animation-level(2) {
transition: opacity var(--open-duration) 0s, visibility 0s 0s;
}
}
.media-viewer-caption {
visibility: visible;
transition-delay: 0s, 0s, var(--open-duration), 0s;
// transition-delay: 0s, 0s, var(--open-duration), 0s;
}
}