Merge pull request #83 from ulaharbmg/JS-372

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

Author: uharbachou

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

@@ -97,6 +97,7 @@ define([
         },
 
         PV: 'product-video', // [CONST]
+        PVLOADED: 'fotorama__product-video--loaded', // [CONST]
         VID: 'video', // [CONST]
         VI: 'vimeo', // [CONST]
         FTVC: 'fotorama__video-close',
@@ -127,7 +128,7 @@ define([
          * @private
          */
         _checkFullscreen: function () {
-            if ($(this.element).find('.fotorama__fullscreen-icon')) {
+            if (this.element.data('fotorama').fullScreen || false) {
                 this.isFullscreen = true;
             }
         },
@@ -226,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');
         },
 
@@ -239,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');
         },
 
@@ -597,23 +594,18 @@ define([
          */
         _unloadVideoPlayer: function ($wrapper, current, close) {
             var self = this;
-
+            $wrapper.find('.' + this.PVLOADED).not('.fotorama__active').removeClass(this.PVLOADED);
             $wrapper.find('.' + this.PV).each(function () {
                 var $item = $(this).parent(),
                     cloneVideoDiv,
                     iframeElement = $(this).find('iframe'),
                     currentIndex,
-                    itemIndex,
-                    videoPreview = $item.find('img').not('.fotorama__img--full');
+                    itemIndex;
 
                 if (iframeElement.length === 0) {
                     return;
                 }
 
-                if (!videoPreview.is(':visible')) {
-                    videoPreview.show();
-                }
-
                 currentIndex = current.activeFrame.$stageFrame.index();
                 itemIndex = $item.index();
 

app/code/Magento/ProductVideo/view/frontend/web/js/load-player.js

@@ -189,7 +189,7 @@ define(['jquery', 'jquery/ui'], function ($) {
                              */
                             'onReady': function onPlayerReady() {
                                 self._player.getDuration();
-                                self.element.closest('.fotorama-video-container').find('img').hide();
+                                self.element.closest('.fotorama__stage__frame').addClass('fotorama__product-video--loaded');
                             },
 
                             /**
@@ -336,7 +336,7 @@ define(['jquery', 'jquery/ui'], function ($) {
 
             // Froogaloop throws error without a registered ready event
             this._player.addEvent('ready', function (id) {
-                $('#' + id).closest('.fotorama-video-container').find('img').hide();
+                $('#' + id).closest('.fotorama__stage__frame').addClass('fotorama__product-video--loaded');
             });
         },
 

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: '';