PB-95: Video background for Row

Author: eug123

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

@@ -204,14 +204,17 @@
                 </checkbox>
             </formElements>
         </field>
-        <field name="video_fallback_image" sortOrder="140" formElement="imageUploader">
+        <field name="video_fallback_image" sortOrder="140" formElement="imageUploader" template="Magento_PageBuilder/form/element/uploader/image">
             <settings>
                 <visible>false</visible>
                 <label translate="true">Fallback Image</label>
                 <componentType>imageUploader</componentType>
                 <imports>
                     <link name="visible">${$.parentName}.background_type:videoVisible</link>
                 </imports>
+                <tooltip>
+                    <description translate="true">Fallback images appear on the screen before a video loads. When the video loads, it replaces the fallback image. If the video does not load for some reason, the fallback image remains on the screen in place of the video.</description>
+                </tooltip>
             </settings>
             <formElements>
                 <imageUploader>

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/uploader/image.html

@@ -0,0 +1,52 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<div class="admin__field" visible="visible" css="$data.additionalClasses">
+    <label class="admin__field-label" if="$data.label" attr="for: uid">
+        <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
+    </label>
+
+    <div class="admin__field-control" css="'_with-tooltip': $data.tooltip">
+        <div class="file-uploader image-uploader" data-role="drop-zone" css="_loading: isLoading">
+            <div class="file-uploader-area">
+                <input type="file" afterRender="onElementRender" attr="id: uid, name: inputName, multiple: isMultipleFiles" disable="disabled" />
+                <label class="file-uploader-button action-default" attr="for: uid, disabled: disabled" disable="disabled" translate="'Upload'" />
+                <label
+                    data-bind="event: {change: addFileFromMediaGallery, click: openMediaBrowserDialog}"
+                    class="file-uploader-button action-default"
+                    attr="id: mediaGalleryUid, disabled: disabled"
+                    data-force_static_path="1"
+                    translate="'Select from Gallery'"/>
+                <render args="tooltipTpl" if="$data.tooltip"/>
+                <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
+                <p class="image-upload-requirements">
+                    <span if="$data.maxFileSize">
+                        <span translate="'Maximum file size'" />: <text args="formatSize($data.maxFileSize)"/>.
+                    </span>
+                    <span if="$data.allowedExtensions">
+                        <span translate="'Allowed file types'" />: <text args="getAllowedFileExtensionsInCommaDelimitedFormat()"/>.
+                    </span>
+                </p>
+            </div>
+
+            <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
+                <span html="notice"/>
+            </div>
+
+            <label class="admin__field-error" if="error" attr="for: uid" text="error"/>
+
+            <each args="data: value, as: '$file'" render="$parent.getPreviewTmpl($file)"/>
+
+            <div if="!hasData()" class="image image-placeholder" click="triggerImageUpload">
+                <div class="file-uploader-summary product-image-wrapper">
+                    <div class="file-uploader-spinner image-uploader-spinner" />
+                    <p class="image-placeholder-text" translate="'Browse to find or drag image here'"/>
+                </div>
+            </div>
+        </div>
+        <render args="$data.service.template" if="$data.hasService()"/>
+    </div>
+</div>

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

@@ -26,7 +26,7 @@ import PreviewCollection from "../preview-collection";
 export default class Preview extends PreviewCollection {
     public getChildren: KnockoutComputed<{}>;
     public wrapClass: KnockoutObservable<boolean> = ko.observable(false);
-    private element: Element;
+    private element: HTMLElement;
 
     /**
      * Debounce and defer the init of Jarallax
@@ -154,9 +154,9 @@ export default class Preview extends PreviewCollection {
     /**
      * Init the parallax element
      *
-     * @param {Element} element
+     * @param {HTMLElement} element
      */
-    public initParallax(element: Element) {
+    public initParallax(element: HTMLElement) {
         this.element = element;
         _.defer(() => {
             this.buildJarallax();

app/code/Magento/PageBuilder/view/base/web/js/resource/vimeo/vimeo-wrapper.js

@@ -7,6 +7,7 @@ define([
     'vimeo'
 ], function (Player) {
     'use strict';
+
     window.Vimeo = window.Vimeo || {
         'Player': Player
     };