From 0a36822d659629d2e57eb1ee9b757f8f23375f13 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Wed, 18 Aug 2021 22:02:46 +0300
Subject: [PATCH] Fix media viewer caption transition Avoid showing controls
 before loadeddata

---
 src/components/appMediaViewer.ts    |  4 ++--
 src/lib/mediaPlayer.ts              | 14 ++++++++++++++
 src/scss/partials/_ckin.scss        |  6 +++---
 src/scss/partials/_mediaViewer.scss | 18 ++++++++++++------
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts
index d4240819..353650a7 100644
--- a/src/components/appMediaViewer.ts
+++ b/src/components/appMediaViewer.ts
@@ -1343,7 +1343,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
     this.content.main.prepend(stub); */
 
     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;
     this.content.caption.addEventListener('touchstart', () => {
@@ -1360,7 +1360,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
         captionTimeout = window.setTimeout(() => {
           captionTimeout = undefined;
           this.content.caption.classList.remove('is-focused');
-        }, 1000);
+        }, 500);
       }, {once: true});
     });
 
diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts
index 97799279..34931866 100644
--- a/src/lib/mediaPlayer.ts
+++ b/src/lib/mediaPlayer.ts
@@ -15,6 +15,7 @@ import ButtonMenu from "../components/buttonMenu";
 import { ButtonMenuToggleHandler } from "../components/buttonMenuToggle";
 import EventListenerBase from "../helpers/eventListenerBase";
 import rootScope from "./rootScope";
+import findUpClassName from "../helpers/dom/findUpClassName";
 
 export class MediaProgressLine extends RangeSelector {
   private filledLoad: HTMLDivElement;
@@ -370,6 +371,19 @@ export default class VideoPlayer extends EventListenerBase<{
           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) => {
           if(rootScope.overlaysActive > 1) { // forward popup is active, etc
             return;
diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss
index 9cc19626..c95c19d8 100644
--- a/src/scss/partials/_ckin.scss
+++ b/src/scss/partials/_ckin.scss
@@ -173,7 +173,7 @@
     content: $tgico-play;
   }
 
-  &.is-playing {
+  &.is-playing, &:not(.played) {
     .default__gradient-bottom {
       transform: translate3d(0, 50px, 0);
     }
@@ -187,9 +187,9 @@
     }
 
     /* html.no-touch &:hover,*/
-    &.show-controls.ckin__fullscreen, 
+    /* &.show-controls.ckin__fullscreen, 
     &.show-controls:not(.ckin__fullscreen):hover,
-    html.is-touch &.show-controls {
+    html.is-touch  */&.show-controls {
       .default__gradient-bottom, 
       .default__controls {
         transform: translateZ(0);
diff --git a/src/scss/partials/_mediaViewer.scss b/src/scss/partials/_mediaViewer.scss
index 20de99f2..dc798d67 100644
--- a/src/scss/partials/_mediaViewer.scss
+++ b/src/scss/partials/_mediaViewer.scss
@@ -130,9 +130,11 @@
     line-height: var(--line-height);
     white-space: pre-wrap;
     background-color: transparent;
+    visibility: hidden;
     
     @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 {
@@ -175,10 +177,6 @@
         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 & {
         transform: translate3d(0, -69px, 0);
       }
@@ -416,7 +414,10 @@
   &-appear {
     opacity: 0;
     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 {
@@ -507,6 +508,11 @@
         visibility: visible;
         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) {