PB-266: Video background for Slide

Author: eug123

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

@@ -126,12 +126,38 @@
         overflow-wrap: break-word;
         word-wrap: break-word;
 
-        &[data-background-type='video'][data-play-only-visible='true'] {
-            transform: translate3d(0, 150vh, 0);
 
-            &.video-inserted,
+        &.jarallax {
+            .video-overlay {
+                z-index: 1;
+            }
+
+            .pagebuilder-overlay {
+                position: relative;
+                z-index: 2;
+            }
+
+            [id*='jarallax-container'] {
+                > div,
+                > img,
+                > video,
+                > iframe {
+                    margin: auto !important;
+                    transform: none !important;
+                }
+            }
+        }
+
+        .jarallax-viewport-element {
+            height: 100%;
+            left: -150vw;
+            position: absolute;
+            top: 0;
+            width: 1px;
+            z-index: 100;
+
             .slick-current & {
-                transform: translate3d(0, 0, 0);
+                left: 0;
             }
         }
 

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

@@ -106,8 +106,15 @@ export default class Preview extends BasePreview {
             (this.wrapper.dataset.backgroundType as string) === "video" &&
             (this.wrapper.dataset.videoSrc as string).length
         ) {
+
             _.defer(() => {
                 // Build Parallax on elements with the correct class
+                const viewportElement = $("<div class=\"jarallax-viewport-element\"></div>") as JQuery;
+
+                $(this.wrapper).append(
+                    $('.jarallax-viewport-element', this.wrapper).length ? '' : viewportElement
+                );
+
                 jarallax(
                     this.wrapper,
                     {
@@ -116,7 +123,7 @@ export default class Preview extends BasePreview {
                         videoLoop: (this.contentType.dataStore.get("video_loop") as string) === "true",
                         speed: 1,
                         videoPlayOnlyVisible: (this.contentType.dataStore.get("video_play_only_visible") as string) === "true",
-                        videoLazyLoading: (this.contentType.dataStore.get("video_lazy_load") as string) === "true",
+                        elementInViewport: $('.jarallax-viewport-element', this.wrapper)
                     },
                 );
             });
@@ -501,7 +508,13 @@ export default class Preview extends BasePreview {
                 $((slider.preview as SliderPreview).element).on("beforeChange", () => {
                     this.slideChanged = false;
                 });
-                $((slider.preview as SliderPreview).element).on("afterChange", () => {
+                $((slider.preview as SliderPreview).element).on("afterChange", (event, slider) => {
+                    $(slider.$slides).each((index, slide) => {
+                        const videoSlide = slide.querySelector('.jarallax');
+                        if (videoSlide) {
+                            jarallax(videoSlide, 'onScroll');
+                        }
+                    });
                     this.slideChanged = true;
                 });
             }

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

@@ -11,31 +11,30 @@ define([
 
     return function (config, element) {
         var videoElement = element[0].querySelector('[data-background-type=video]'),
+            viewportElement = document.createElement('div'),
             $slider = null;
 
         showOnHover(config);
 
         if (videoElement) {
             $slider = $(element).closest('[data-content-type=slider]');
+            viewportElement.classList.add('jarallax-viewport-element');
+            videoElement.setAttribute('data-element-in-viewport', '.jarallax-viewport-element');
+            videoElement.appendChild(viewportElement);
             videoBackground(config, videoElement);
-            $slider.on('setPosition', function (event, slick) {
-                var currentVideoSlide = slick.$slides[slick.currentSlide].querySelector('.jarallax');
 
-                if (currentVideoSlide.jarallax.options.videoPlayOnlyVisible) {
-                    currentVideoSlide.jarallax.video.play();
-                }
+            if ($slider.data('afterChangeIsSet')) {
+                return;
+            }
 
-                if (videoElement.jarallax.isVideoInserted) {
-                    videoElement.classList.add('video-inserted');
-                }
-            });
-            $slider.on('beforeChange', function (event, slick) {
-                var currentVideoSlide = slick.$slides[slick.currentSlide].querySelector('.jarallax');
+            $slider.on('afterChange', function () {
+                var videoSlides = $slider[0].querySelectorAll('.jarallax');
 
-                if (currentVideoSlide.jarallax.options.videoPlayOnlyVisible) {
-                    currentVideoSlide.jarallax.video.pause();
-                }
+                videoSlides.forEach(function (videoSlide) {
+                    videoSlide.jarallax.onScroll();
+                });
             });
+            $slider.data('afterChangeIsSet', true)
         }
     };
 });

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

@@ -27,7 +27,8 @@ define([
             videoLoop: $element.data('videoLoop'),
             videoPlayOnlyVisible: $element.data('videoPlayOnlyVisible'),
             videoLazyLoading: $element.data('videoLazyLoad'),
-            disableVideo: false
+            disableVideo: false,
+            elementInViewport: $element.data('elementInViewport') && $element[0].querySelector($element.data('elementInViewport'))
         });
     };
 });

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

@@ -44,12 +44,16 @@
         overflow-wrap: break-word;
         word-wrap: break-word;
 
-        &[data-background-type='video'][data-play-only-visible='true'] {
-            transform: translate3d(0, 150vh, 0);
+        .jarallax-viewport-element {
+            height: 100%;
+            left: -150vw;
+            position: absolute;
+            top: 0;
+            width: 1px;
+            z-index: 100;
 
-            &.video-inserted,
             .slick-current & {
-                transform: translate3d(0, 0, 0);
+                left: 0;
             }
         }
 
@@ -64,8 +68,10 @@
             }
 
             [id*='jarallax-container'] {
-                video,
-                iframe {
+                > div,
+                > img,
+                > video,
+                > iframe {
                     margin: auto !important;
                     transform: none !important;
                 }