PB-95: Video background for Row

Author: eug123

app/code/Magento/PageBuilder/view/base/web/js/content-type/row/appearance/default/widget.js

@@ -4,48 +4,38 @@
  */
 define([
     'jquery',
-    'jarallax',
-    'jarallaxVideo',
-    'vimeoWrapper'
-], function ($) {
+    'Magento_PageBuilder/js/widget/video-background',
+    'jarallax'
+], function ($, videoBackground) {
     'use strict';
 
     return function (config, element) {
         var $element = $(element),
-            parallaxSpeed = null,
-            jarallaxConfig = null;
+            parallaxSpeed = null;
 
         if ($element.data('appearance') === 'contained') {
             $element = $(element).find('[data-element="inner"]');
         }
 
-        if ($element.data('enableParallax') !== 1 && $element.data('background-type') !== 'video') {
+        if ($element.data('background-type') === 'video') {
+            videoBackground(config, $element[0]);
+            return;
+        }
+
+        if ($element.data('enableParallax') !== 1) {
             return;
         }
 
         $element.addClass('jarallax');
         $element.attr('data-jarallax', '');
-        parallaxSpeed = parallaxSpeed || parseFloat($element.data('parallaxSpeed'));
 
-        if ($element.data('background-type') === 'video') {
-            parallaxSpeed = $element.data('enableParallax') !== 1 ? 1 : parallaxSpeed;
-
-            jarallaxConfig = {
-                imgSrc: $element.data('videoFallbackSrc'),
-                speed: !isNaN(parallaxSpeed) ? parallaxSpeed : 0.5,
-                videoLoop: $element.data('videoLoop'),
-                videoPlayOnlyVisible: $element.data('videoPlayOnlyVisible'),
-                disableVideo: false
-            };
-        }
+        parallaxSpeed = parseFloat($element.data('parallaxSpeed'));
 
-        jarallaxConfig = jarallaxConfig || {
+        window.jarallax($element[0], {
             imgPosition: $element[0].style.backgroundPosition || '50% 50%',
             imgRepeat: $element[0].style.backgroundRepeat || 'no-repeat',
             imgSize: $element[0].style.backgroundSize || 'cover',
             speed: !isNaN(parallaxSpeed) ? parallaxSpeed : 0.5
-        };
-
-        window.jarallax($element[0], jarallaxConfig);
+        });
     };
 });

app/code/Magento/PageBuilder/view/base/web/js/widget/video-background.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'jquery',
+    'jarallax',
+    'jarallaxVideo',
+    'vimeoWrapper'
+], function ($) {
+    'use strict';
+
+    return function (config, element) {
+        var $element = $(element),
+            parallaxSpeed = $element.data('enableParallax') !== 1 ? 1 : parseFloat($element.data('parallaxSpeed'));
+
+        if ($element.data('background-type') !== 'video') {
+            return;
+        }
+
+        $element.addClass('jarallax');
+        $element.attr('data-jarallax', '');
+
+        window.jarallax($element[0], {
+            imgSrc: $element.data('videoFallbackSrc'),
+            speed: !isNaN(parallaxSpeed) ? parallaxSpeed : 0.5,
+            videoLoop: $element.data('videoLoop'),
+            videoPlayOnlyVisible: $element.data('videoPlayOnlyVisible'),
+            videoLazyLoading: $element.data('videoLazyLoad'),
+            disableVideo: false
+        });
+    };
+});

dev/tests/js/jasmine/tests/app/code/Magento/PageBuilder/view/frontend/web/js/content-type/row/appearance/default/widget.test.js

@@ -53,61 +53,5 @@ define([
                 speed: 1
             });
         });
-
-        it('Should call jarallax if video background and enableParallax === 1', function () {
-            var el = document.createElement('div');
-
-            spyOn(window, 'jarallax');
-
-            el.setAttribute('data-enable-parallax', '1');
-            el.setAttribute('data-background-type', 'video');
-
-            rowWidgetInitializer(undefined, el);
-
-            expect(window.jarallax).toHaveBeenCalled();
-        });
-
-        it('Should call jarallax if video background and parallax not enabled with speed = 1', function () {
-            var el = document.createElement('div');
-
-            spyOn(window, 'jarallax');
-
-            el.setAttribute('data-enable-parallax', '0');
-            el.setAttribute('data-background-type', 'video');
-
-            rowWidgetInitializer(undefined, el);
-
-            expect(window.jarallax).toHaveBeenCalledWith(el, {
-                speed: 1,
-                imgSrc: undefined,
-                videoLoop: undefined,
-                videoPlayOnlyVisible: undefined,
-                disableVideo: false
-            });
-        });
-
-        it('Should call jarallax on element based on its data if video background', function () {
-            var el = document.createElement('div');
-
-            spyOn(window, 'jarallax');
-
-            el.setAttribute('data-enable-parallax', '1');
-            el.setAttribute('data-background-type', 'video');
-            el.setAttribute('data-enable-parallax', '1');
-            el.setAttribute('data-video-fallback-src', '/image/test.jpg');
-            el.setAttribute('data-video-loop', 'true');
-            el.setAttribute('data-video-play-only-visible', 'false');
-            el.setAttribute('data-parallax-speed', '0.3');
-
-            rowWidgetInitializer(undefined, el);
-
-            expect(window.jarallax).toHaveBeenCalledWith(el, {
-                speed: 0.3,
-                imgSrc: '/image/test.jpg',
-                videoLoop: true,
-                videoPlayOnlyVisible: false,
-                disableVideo: false
-            });
-        });
     });
 });