Fix media viewer caption transition

Avoid showing controls before loadeddata

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

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;

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

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,8 +414,11 @@
   &-appear {
     opacity: 0;
     visibility: hidden;
+
+    @include animation-level(2) {
       transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration);
     }
+  }
   
   &-topbar {
     position: absolute;
@@ -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) {