Merge pull request #71 from ValeryYafremau/JS-356

JS-356: Add preview arrows while video is playing (for better navigation)

Author: uharbachou

lib/web/mage/gallery/gallery.less

@@ -874,6 +874,10 @@
                 transition-property: none;
             }
         }
+        iframe {
+            width: calc(~'100% - @{fotorama-arw-size} * 2');
+            left: @fotorama-arw-size;
+        }
     }
 }
 

lib/web/magnifier/magnify.js

@@ -807,6 +807,22 @@ define([
             });
         }
 
+        /**
+         * Displays navigation arrows on preview if it contains ifraime.
+         * @param fotorama - object of fotorama
+         */
+        function showArrows (fotorama) {
+            var $arrows = $('[data-gallery-role="arrow"]');
+
+            if ((fotorama.activeFrame.$stageFrame.find(':has(iframe)').length && fotorama.fullScreen) || 
+                (fotorama.fullScreen && config.fullscreen.arrows) || 
+                (!fotorama.fullScreen && config.arrows)) {
+                $arrows.show();
+            } else {
+                $arrows.hide();
+            }
+        };
+
         $.extend(config.magnifierOpts, {
             zoomable: false,
             thumb: '.fotorama__img',
@@ -836,6 +852,7 @@ define([
                 !checkForVideo($activeStageFrame) && $($activeStageFrame).magnify(config.magnifierOpts);
             }
         });
+
         $(element).on('gallery:loaded', function (e) {
             var $prevImage;
             $(element).find(gallerySelector)
@@ -888,6 +905,7 @@ define([
                     resetVars($(fullscreenImageSelector));
                     magnifierFullscreen(fotorama);
                     mousewheel(e, fotorama, element);
+                    showArrows(fotorama);
 
                     if ($prevImage) {
                         calculateMinSize($prevImage);