PB-95: Video background for Row

Author: eug123

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/row/_default.less

@@ -16,20 +16,25 @@
 //  Support for plugin github.com/bfred-it/object-fit-images
 //  _________________________________________________________________
 
-.jarallax > .jarallax-img {
-    font-family: 'object-fit: cover;', sans-serif;
-    height: 100%;
-    left: 0;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: -1;
+.jarallax {
+    > .jarallax-img {
+        font-family: 'object-fit: cover;', sans-serif;
+        height: 100%;
+        left: 0;
+        object-fit: cover;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: -1;
+    }
 }
 
 .video-overlay {
+    bottom: 0;
+    left: 0;
     position: absolute;
-    top: 0; bottom: 0; left: 0; right: 0;
+    right: 0;
+    top: 0;
     z-index: -99;
 }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

@@ -166,9 +166,9 @@ define([
                 href = (href || '').replace(/^\s+/, '').replace(/\s+$/, '');
 
                 return validateIsUrl(href) && (
-                    href.match(/youtube\.com|youtu\.be/)
-                    || href.match(/vimeo\.com/)
-                    || href.match(/\.(mp4|ogv|webm)(?!\w)/)
+                    href.match(/youtube\.com|youtu\.be/) ||
+                    href.match(/vimeo\.com/) ||
+                    href.match(/\.(mp4|ogv|webm)(?!\w)/)
                 );
             },
             $.mage.__('Please enter a valid video URL.')

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts

@@ -41,8 +41,8 @@ export default class Preview extends PreviewCollection {
         // Destroy all instances of the plugin prior
         try {
             // store/apply correct style after destroying, as jarallax incorrectly overrides it with stale value
-            const style = this.element.getAttribute("style")
-                || this.element.getAttribute("data-jarallax-original-styles");
+            const style = this.element.getAttribute("style") ||
+                this.element.getAttribute("data-jarallax-original-styles");
             jarallax(this.element, "destroy");
             this.element.setAttribute("style", style);
         } catch (e) {

app/code/Magento/PageBuilder/view/base/web/css/source/jarallax/jarallax.less

@@ -1,19 +1,30 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Jarallax styles
+//  _________________________________________________________________
+
 & when (@media-common = true) {
     .jarallax {
         position: relative;
         z-index: 0;
     }
 
-    .jarallax > .jarallax-img {
-        // Support for plugin https://github.com/bfred-it/object-fit-images
-        font-family: 'object-fit: cover;', sans-serif;
-        height: 100%;
-        left: 0;
-        object-fit: cover;
-        position: absolute;
-        top: 0;
-        width: 100%;
-        z-index: -1;
+    .jarallax{
+        & > .jarallax-img {
+            // Support for plugin https://github.com/bfred-it/object-fit-images
+            font-family: 'object-fit: cover;', sans-serif;
+            height: 100%;
+            left: 0;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            width: 100%;
+            z-index: -1;
+        }
     }
 
     .jarallax-video-fallback {
@@ -22,11 +33,11 @@
 
     .jarallax {
         .video-overlay {
-            position: absolute;
-            top: 0;
             bottom: 0;
             left: 0;
+            position: absolute;
             right: 0;
+            top: 0;
             z-index: -99;
         }
     }

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

@@ -40,7 +40,7 @@ define([
                 videoLoop: $element.data('videoLoop'),
                 videoPlayOnlyVisible: $element.data('videoPlayOnlyVisible'),
                 disableVideo: false
-            }
+            };
         }
 
         jarallaxConfig = jarallaxConfig || {

dev/tests/static/testsuite/Magento/Test/Integrity/Xml/ExtendsBaseFormTest.php

@@ -64,7 +64,8 @@ private function getXmlFiles(): array
             'pagebuilder_column_form.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_slide_form.xml' => 'pagebuilder_base_form_with_background_attributes',
             'pagebuilder_tab_item_form.xml' => 'pagebuilder_base_form_with_background_attributes',
-            'pagebuilder_row_form.xml' => 'pagebuilder_base_form_with_background_attributes',
+            'pagebuilder_base_form_with_background_video.xml' => 'pagebuilder_base_form_with_background_attributes',
+            'pagebuilder_row_form.xml' => 'pagebuilder_base_form_with_background_video',
             'pagebuilder_products_carousel_form.xml' => 'pagebuilder_products_form',
         ];
         $componentRegistrar = new ComponentRegistrar();