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

Fix media viewer caption transition

Browse Source 
Avoid showing controls before loadeddata
This commit is contained in:
Eduard Kuzmenko 2021-08-18 22:02:46 +03:00
parent 4e1d9ab899
commit 0a36822d65
4 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/appMediaViewer.ts
View File

@ -1343,7 +1343,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
this.content.main.prepend(stub); */ this.content.main.prepend(stub); */
this.content.caption = document.createElement('div'); this.content.caption = document.createElement('div');
this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption', MEDIA_VIEWER_CLASSNAME + '-appear'/* , 'media-viewer-stub' */); this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */);
let captionTimeout: number; let captionTimeout: number;
this.content.caption.addEventListener('touchstart', () => { this.content.caption.addEventListener('touchstart', () => {
@ -1360,7 +1360,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
captionTimeout = window.setTimeout(() => { captionTimeout = window.setTimeout(() => {
captionTimeout = undefined; captionTimeout = undefined;
this.content.caption.classList.remove('is-focused'); this.content.caption.classList.remove('is-focused');
}, 1000); }, 500);
}, {once: true}); }, {once: true});
}); });

14
src/lib/mediaPlayer.ts
View File

@ -15,6 +15,7 @@ import ButtonMenu from "../components/buttonMenu";
import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle"; import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle";
import EventListenerBase from "../helpers/eventListenerBase"; import EventListenerBase from "../helpers/eventListenerBase";
import rootScope from "./rootScope"; import rootScope from "./rootScope";
import findUpClassName from "../helpers/dom/findUpClassName";
export class MediaProgressLine extends RangeSelector { export class MediaProgressLine extends RangeSelector {
private filledLoad: HTMLDivElement; private filledLoad: HTMLDivElement;
@ -370,6 +371,19 @@ export default class VideoPlayer extends EventListenerBase<{
showControls(); showControls();
}); });
this.listenerSetter.add(this.wrapper)('mouseenter', () => {
showControls(false);
});
this.listenerSetter.add(this.wrapper)('mouseleave', (e) => {
if(findUpClassName(e.relatedTarget, 'media-viewer-caption')) {
showControls(false);
return;
}
hideControls();
});
this.listenerSetter.add(document)('keydown', (e: KeyboardEvent) => { this.listenerSetter.add(document)('keydown', (e: KeyboardEvent) => {
if(rootScope.overlaysActive > 1) { // forward popup is active, etc if(rootScope.overlaysActive > 1) { // forward popup is active, etc
return; return;

6
src/scss/partials/_ckin.scss
View File

@ -173,7 +173,7 @@
content: $tgico-play; content: $tgico-play;
} }
&.is-playing { &.is-playing, &:not(.played) {
.default__gradient-bottom { .default__gradient-bottom {
transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0);
} }
@ -187,9 +187,9 @@
} }
/* html.no-touch &:hover,*/ /* html.no-touch &:hover,*/
&.show-controls.ckin__fullscreen, /* &.show-controls.ckin__fullscreen,
&.show-controls:not(.ckin__fullscreen):hover, &.show-controls:not(.ckin__fullscreen):hover,
html.is-touch &.show-controls { html.is-touch */&.show-controls {
.default__gradient-bottom, .default__gradient-bottom,
.default__controls { .default__controls {
transform: translateZ(0); transform: translateZ(0);

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

@ -130,9 +130,11 @@
line-height: var(--line-height); line-height: var(--line-height);
white-space: pre-wrap; white-space: pre-wrap;
background-color: transparent; background-color: transparent;
visibility: hidden;
@include animation-level(2) { @include animation-level(2) {
transition: opacity var(--open-duration), background-color var(--open-duration); 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;
} }
a { a {
@ -175,10 +177,6 @@
height: auto; height: auto;
} }
@include animation-level(2) {
transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, background-color var(--open-duration);
}
.media-viewer-whole.has-video-controls & { .media-viewer-whole.has-video-controls & {
transform: translate3d(0, -69px, 0); transform: translate3d(0, -69px, 0);
} }
@ -416,7 +414,10 @@
&-appear { &-appear {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration);
@include animation-level(2) {
transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration);
}
} }
&-topbar { &-topbar {
@ -507,6 +508,11 @@
visibility: visible; visibility: visible;
transition: opacity var(--open-duration) 0s, visibility 0s 0s; transition: opacity var(--open-duration) 0s, visibility 0s 0s;
} }
.media-viewer-caption {
visibility: visible;
transition-delay: 0s, 0s, var(--open-duration), 0s;
}
} }
@include respond-to(handhelds) { @include respond-to(handhelds) {