PB-265: Video background for Banner

- fix uploader
- fix slider widget

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerCommonTest.xml

@@ -1982,6 +1982,8 @@
         <comment userInput="Go to Media Storage from stage" stepKey="commentGoToMediaStorageFromStage1"/>
         <actionGroup ref="goToMediaStorageFromStage" stepKey="goToMediaStorageFromStage1">
             <argument name="contentType" value="PageBuilderBannerContentType"/>
+            <argument name="x" value="0"/>
+            <argument name="y" value="0"/>
         </actionGroup>
         <!-- Delete image A -->
         <comment stepKey="deleteImageA" userInput="Delete image A"/>

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

@@ -155,5 +155,14 @@
             max-width: 100%;
             word-break: break-word;
         }
+
+        .dragging {
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top:0;
+            width: 100%;
+            z-index: 4;
+        }
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css" event="mousedown: activateEditor">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-poster-content">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

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

@@ -4,9 +4,10 @@
  */
 define([
     'jquery',
+    'underscore',
     'Magento_PageBuilder/js/widget/show-on-hover',
     'Magento_PageBuilder/js/widget/video-background'
-], function ($, showOnHover, videoBackground) {
+], function ($, _, showOnHover, videoBackground) {
     'use strict';
 
     return function (config, element) {
@@ -30,7 +31,7 @@ define([
             $slider.on('afterChange init', function () {
                 var videoSlides = $slider[0].querySelectorAll('.jarallax');
 
-                videoSlides.forEach(function (videoSlide) {
+                _.each(videoSlides, function (videoSlide) {
                     videoSlide.jarallax && videoSlide.jarallax.onScroll();
                 });
             });