JS-372: [Full-screen mode] Left and right side of image visible while video player is loading

- Fixed close button view

Author: uharbachou

app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js

@@ -227,11 +227,9 @@ define([
          * @private
          */
         _hideCloseVideo: function () {
-            $(this.element).find('.' + this.FTVC).css({
-                opacity: 0,
-                transform: 'translate3d(95px, -95px, 0)',
-                display: 'none'
-            });
+            $(this.element)
+                .find('.' + this.FTVC)
+                .removeClass('fotorama-show-control');
             $('.' + this.FTAR).removeClass('hidden-video');
         },
 
@@ -240,11 +238,9 @@ define([
          * @private
          */
         _showCloseVideo: function () {
-            $(this.element).find('.' + this.FTVC).css({
-                opacity: 1,
-                transform: 'translate3d(0px, 0px, 0)',
-                display: 'block'
-            });
+            $(this.element)
+                .find('.' + this.FTVC)
+                .addClass('fotorama-show-control');
             $('.' + this.FTAR).addClass('hidden-video');
         },
 

app/design/frontend/Magento/blank/Magento_ProductVideo/web/css/source/_module.less

@@ -80,11 +80,6 @@ and (orientation : landscape) {
     z-index: -1 !important;
 }
 
-.fotorama__video-close {
-    bottom: 89%;
-    top: auto;
-}
-
 .fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active:after {
     bottom: 0;
     content: '';

lib/web/mage/gallery/gallery.less

@@ -488,35 +488,6 @@
     }
 }
 
-.fotorama__video-close {
-    &:extend(.fotorama-sprite);
-    background-position: -60px -9px;
-    height: @fotorama_close_size;
-    opacity: 0;
-    right: 0;
-    top: 0;
-    width: @fotorama_close_size;
-    z-index: 19;
-    .fotorama__wrap--css2 & {
-        display: none;
-    }
-
-    .fotorama__wrap--css3 & {
-        .fotorama-translate3d(@fotorama-arw-size, -@fotorama-arw-size, 0);
-    }
-
-    .fotorama__wrap--video & {
-        display: block;
-        opacity: 1;
-    }
-
-    .fotorama__wrap--css3 {
-        &.fotorama__wrap--video & {
-            transform: translate3d(0, 0, 0);
-        }
-    }
-}
-
 .fotorama__wrap--no-controls.fotorama__wrap--toggle-arrows {
     .fotorama__arr,
     .fotorama__fullscreen-icon {
@@ -981,6 +952,22 @@
     }
 }
 
+.fotorama__video-close {
+    &:extend(.fotorama-sprite);
+    background-position: (-@fotorama_close_button) 0;
+    height: @fotorama_close_button;
+    opacity: 0;
+    right: 0;
+    top: 0;
+    width: @fotorama_close_button;
+    transition: opacity 0.3s ease-in-out;
+    transform: translate3d((@fotorama_close_button), (-@fotorama_close_button), 0);
+    &.fotorama-show-control {
+        opacity: 1;
+        transform: translate3d(0, -10px, 0);
+    }
+}
+
 // While first time init
 .gallery-placeholder {
     .loading-mask {

lib/web/mage/gallery/module/_variables.less

@@ -9,5 +9,5 @@
 @fotorama-inner-box-shadow: 3px;
 @fotorama-spinner-size: 64px;
 @fotorama-thumb-arrow: 30px;
-@fotorama_close_size: 30px;
+@fotorama_close_button: 80px;
 @size-fotorama-block: 80px;