PB-95: Video background for Row

Author: eug123

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/row.xml

@@ -75,6 +75,11 @@
                         <converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
                             <config>
                                 <item name="attribute_name" value="background_type"/>
+                                <item name="desktop_image_variable" value="background_image"/>
+                                <item name="mobile_image_variable" value="mobile_image"/>
+                                <item name="video_source_variable" value="video_source"/>
+                                <item name="video_fallback_image_variable" value="video_fallback_image"/>
+                                <item name="video_overlay_color_variable" value="video_overlay_color"/>
                             </config>
                         </converter>
                         <converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
@@ -143,6 +148,11 @@
                     <converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
                         <config>
                             <item name="attribute_name" value="background_type"/>
+                            <item name="desktop_image_variable" value="background_image"/>
+                            <item name="mobile_image_variable" value="mobile_image"/>
+                            <item name="video_source_variable" value="video_source"/>
+                            <item name="video_fallback_image_variable" value="video_fallback_image"/>
+                            <item name="video_overlay_color_variable" value="video_overlay_color"/>
                         </config>
                     </converter>
                 </converters>
@@ -204,6 +214,11 @@
                     <converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
                         <config>
                             <item name="attribute_name" value="background_type"/>
+                            <item name="desktop_image_variable" value="background_image"/>
+                            <item name="mobile_image_variable" value="mobile_image"/>
+                            <item name="video_source_variable" value="video_source"/>
+                            <item name="video_fallback_image_variable" value="video_fallback_image"/>
+                            <item name="video_overlay_color_variable" value="video_overlay_color"/>
                         </config>
                     </converter>
                 </converters>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_base_form_with_background_video.xml

@@ -88,7 +88,7 @@
                 <dataType>text</dataType>
                 <label translate="true">Video URL</label>
                 <tooltip>
-                    <description translate="true">Video URLs can include web URLs to files with video extensions (such as https://company/videos/myvideo.mp4) or embed codes from YouTube or Vimeo.</description>
+                    <description translate="true">Video URLs can be links to videos on YouTube or Vimeo, or HTTP(S) links to files with valid video extensions (we recommend .mp4)</description>
                 </tooltip>
                 <imports>
                     <link name="visible">${$.parentName}.background_type:videoVisible</link>

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

@@ -171,7 +171,7 @@ define([
                     href.match(/\.(mp4|ogv|webm)(?!\w)/)
                 );
             },
-            $.mage.__('Please enter a valid video URL. Valid URLs have a video file extension (.mp4, .webm, .ogv) or an embed code from YouTube or Vimeo.')//eslint-disable-line max-len
+            $.mage.__('Please enter a valid video URL. Valid URLs have a video file extension (.mp4, .webm, .ogv) or links to videos on YouTube or Vimeo.')//eslint-disable-line max-len
         );
 
         validator.addRule(

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

@@ -79,7 +79,7 @@ export interface DataMappingAttributesInterface {
     var?: string;
     name: string;
     reader?: string;
-    value?: string|boolean;
+    value?: string;
     converter?: string;
     preview_converter?: string;
     persistence_mode?: string;

app/code/Magento/PageBuilder/view/adminhtml/web/js/mass-converter/background-type.js

@@ -5,7 +5,7 @@
 
 import "jarallax";
 import "jarallaxVideo";
-import Player from "vimeo";
+import "vimeoWrapper";
 import $ from "jquery";
 import ko from "knockout";
 import events from "Magento_PageBuilder/js/events";
@@ -20,10 +20,6 @@ import {ContentTypeMountEventParamsInterface, ContentTypeReadyEventParamsInterfa
 import ObservableUpdater from "../observable-updater";
 import PreviewCollection from "../preview-collection";
 
-declare global {
-    interface Window { Vimeo: any; }
-}
-
 /**
  * @api
  */
@@ -43,14 +39,18 @@ export default class Preview extends PreviewCollection {
             // 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 backgroundImage = (this.contentType.dataStore.get("background_image") as any[]);
             jarallax(this.element, "destroy");
             this.element.setAttribute("style", style);
+            if (this.contentType.dataStore.get("background_type") as string !== "video" && backgroundImage) {
+                this.element.style.backgroundImage = backgroundImage;
+            }
         } catch (e) {
             // Failure of destroying is acceptable
         }
         if (this.element &&
             $(this.element).hasClass("jarallax") &&
-            (this.contentType.dataStore.get("background_type") as string) !== 'video' &&
+            (this.contentType.dataStore.get("background_type") as string) !== "video" &&
             (this.contentType.dataStore.get("background_image") as any[]).length
         ) {
             _.defer(() => {
@@ -76,10 +76,9 @@ export default class Preview extends PreviewCollection {
         }
 
         if (this.element &&
-            (this.element.dataset.backgroundType as string) === 'video' &&
+            (this.element.dataset.backgroundType as string) === "video" &&
             (this.element.dataset.videoSrc as string).length
         ) {
-            window.Vimeo = window.Vimeo || {"Player": Player};
             const parallaxSpeed = (this.contentType.dataStore.get("enable_parallax") as string) === "1"
                 ? Number.parseFloat(this.contentType.dataStore.get("parallax_speed") as string)
                 : 1;

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type-config.types.ts

@@ -26,15 +26,15 @@ export default class BackgroundType implements ConverterInterface {
      * @returns {object}
      */
     public toDom(data: ConverterDataInterface, config: ConverterConfigInterface): ConverterDataInterface {
-        const   backgroundType = get(data, config.attribute_name);
+        const backgroundType = get<string>(data, config.attribute_name);
 
         if (backgroundType === 'video') {
-            set(data, "background_image", []);
-            set(data, "mobile_image", []);
+            set(data, config.desktop_image_variable, []);
+            set(data, config.mobile_image_variable, []);
         } else if (backgroundType === 'image') {
-            set(data, "video_source", "");
-            set(data, "video_fallback_image", []);
-            set(data, "video_overlay_color", "");
+            set(data, config.video_source_variable, null);
+            set(data, config.video_fallback_image_variable, []);
+            set(data, config.video_overlay_color_variable, "");
         }
 
         return data;

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

@@ -9,15 +9,16 @@ var config = {
             'slick': 'Magento_PageBuilder/js/resource/slick/slick',
             'jarallax': 'Magento_PageBuilder/js/resource/jarallax/jarallax',
             'jarallaxVideo': 'Magento_PageBuilder/js/resource/jarallax/jarallax-video',
-            'vimeo': 'Magento_PageBuilder/js/resource/vimeo/player'
+            'vimeo': 'Magento_PageBuilder/js/resource/vimeo/player',
+            'vimeoWrapper': 'Magento_PageBuilder/js/resource/vimeo/vimeo-wrapper'
         }
     },
     shim: {
         'Magento_PageBuilder/js/resource/slick/slick': {
             deps: ['jquery']
         },
         'Magento_PageBuilder/js/resource/jarallax/jarallax-video': {
-            deps: ['jarallax', 'vimeo']
+            deps: ['jarallax', 'vimeoWrapper']
         },
         'Magento_PageBuilder/js/resource/vimeo/player': {
             exports: ['Player']

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/mass-converter/background-type.ts

@@ -4,10 +4,10 @@
  */
 define([
     'jquery',
-    'vimeo',
     'jarallax',
-    'jarallaxVideo'
-], function ($, Player) {
+    'jarallaxVideo',
+    'vimeoWrapper'
+], function ($) {
     'use strict';
 
     return function (config, element) {
@@ -28,10 +28,6 @@ define([
         parallaxSpeed = parallaxSpeed || parseFloat($element.data('parallaxSpeed'));
 
         if ($element.data('background-type') === 'video') {
-            window.Vimeo = window.Vimeo || {
-                'Player': Player
-            };
-
             parallaxSpeed = $element.data('enableParallax') !== 1 ? 1 : parallaxSpeed;
 
             jarallaxConfig = {