From fee835c3031440dee12f7ce03cbf42649516172e Mon Sep 17 00:00:00 2001
From: Ilan <2975845+Amadeco@users.noreply.github.com>
Date: Sun, 18 Feb 2024 16:49:31 +0100
Subject: [PATCH] (Video) Calling jarallax-wrapper and loading on demand
 librairies

I needed to replace jarallax with jarallax-wrapper to make it work with a custom Js bundler  (Magepack Bundle)
Indeed, without  jarallax-wrapper, window.jarallax is not populated and return an error (undefined var).

I take advantage to this commit to suggest to load on demand librairies (jarallaxVideo, vimeoWrapper) after the check of the data background-type.
---
 .../base/web/js/widget/video-background.js    | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/app/code/Magento/PageBuilder/view/base/web/js/widget/video-background.js b/app/code/Magento/PageBuilder/view/base/web/js/widget/video-background.js
index d918ab8f6c9..ed19c4bd354 100644
--- a/app/code/Magento/PageBuilder/view/base/web/js/widget/video-background.js
+++ b/app/code/Magento/PageBuilder/view/base/web/js/widget/video-background.js
@@ -3,10 +3,7 @@
  * See COPYING.txt for license details.
  */
 define([
-    'jquery',
-    'jarallax',
-    'jarallaxVideo',
-    'vimeoWrapper'
+    'jquery'
 ], function ($) {
     'use strict';
 
@@ -18,23 +15,25 @@ define([
             return;
         }
 
-        $element.addClass('jarallax');
-        $element.attr('data-jarallax', '');
+        require(['jarallax-wrapper', 'jarallaxVideo', 'vimeoWrapper'], function () {
+            $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,
-            elementInViewport: $element.data('elementInViewport') &&
-                $element[0].querySelector($element.data('elementInViewport'))
-        });
-        $element[0].jarallax.video && $element[0].jarallax.video.on('started', function () {
-            if ($element[0].jarallax.$video) {
-                $element[0].jarallax.$video.style.visibility = 'visible';
-            }
+            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,
+                elementInViewport: $element.data('elementInViewport') &&
+                    $element[0].querySelector($element.data('elementInViewport'))
+            });
+            $element[0].jarallax.video && $element[0].jarallax.video.on('started', function () {
+                if ($element[0].jarallax.$video) {
+                    $element[0].jarallax.$video.style.visibility = 'visible';
+                }
+            });
         });
     };
 });