PB-95: Video background for Row

eug123 · eug123 · commit ea41d08b7f31 · 2020-02-05T09:55:39.000-06:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/row.xml b/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/row.xml
@@ -58,22 +58,25 @@
                             <attribute name="video_loop" source="data-video-loop"/>
                             <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                             <attribute name="video_lazy_load" source="data-video-lazy-load"/>
+                            <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                             <css name="css_classes"/>
                         </element>
                         <element name="container">
                             <style name="justify_content" source="justify_content"/>
                             <static_style source="display" value="flex"/>
                             <static_style source="flex_direction" value="column"/>
                         </element>
-                        <element name="video_img">
-                            <attribute name="video_fallback_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
-                        </element>
                         <element name="video_overlay">
                             <style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
                             <attribute name="video_overlay_color_attribute" storage_key="video_overlay_color" source="data-video-overlay-color" converter="Magento_PageBuilder/js/converter/attribute/video-overlay-color"/>
                         </element>
                     </elements>
                     <converters>
+                        <converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
+                            <config>
+                                <item name="attribute_name" value="background_type"/>
+                            </config>
+                        </converter>
                         <converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
                             <config>
                                 <item name="attribute_name" value="background_images"/>
@@ -115,6 +118,7 @@
                         <attribute name="video_loop" source="data-video-loop"/>
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
+                        <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                         <css name="css_classes"/>
                     </element>
                     <element name="inner" />
@@ -123,9 +127,6 @@
                         <static_style source="display" value="flex"/>
                         <static_style source="flex_direction" value="column"/>
                     </element>
-                    <element name="video_img">
-                        <attribute name="video_fallback_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
-                    </element>
                     <element name="video_overlay">
                         <style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
                         <attribute name="video_overlay_color_attribute" storage_key="video_overlay_color" source="data-video-overlay-color" converter="Magento_PageBuilder/js/converter/attribute/video-overlay-color"/>
@@ -139,6 +140,11 @@
                             <item name="mobile_image_variable" value="mobile_image"/>
                         </config>
                     </converter>
+                    <converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
+                        <config>
+                            <item name="attribute_name" value="background_type"/>
+                        </config>
+                    </converter>
                 </converters>
             </appearance>
             <appearance name="full-bleed"
@@ -173,6 +179,7 @@
                         <attribute name="video_loop" source="data-video-loop"/>
                         <attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
                         <attribute name="video_lazy_load" source="data-video-lazy-load"/>
+                        <attribute name="video_fallback_image" source="data-video-fallback-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                         <css name="css_classes"/>
                     </element>
                     <element name="inner" />
@@ -181,9 +188,6 @@
                         <static_style source="display" value="flex"/>
                         <static_style source="flex_direction" value="column"/>
                     </element>
-                    <element name="video_img">
-                        <attribute name="video_fallback_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
-                    </element>
                     <element name="video_overlay">
                         <style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
                         <attribute name="video_overlay_color_attribute" storage_key="video_overlay_color" source="data-video-overlay-color" converter="Magento_PageBuilder/js/converter/attribute/video-overlay-color"/>
@@ -197,6 +201,11 @@
                             <item name="mobile_image_variable" value="mobile_image"/>
                         </config>
                     </converter>
+                    <converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
+                        <config>
+                            <item name="attribute_name" value="background_type"/>
+                        </config>
+                    </converter>
                 </converters>
             </appearance>
         </appearances>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_base_form_with_background_video.xml b/app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_base_form_with_background_video.xml
@@ -11,6 +11,11 @@
     </settings>
     <fieldset name="background">
         <field name="background_type" sortOrder="20" formElement="select" component="Magento_PageBuilder/js/form/element/condition-options">
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="default" xsi:type="string">image</item>
+                </item>
+            </argument>
             <settings>
                 <dataType>text</dataType>
                 <label translate="true">Background Type</label>
@@ -77,6 +82,7 @@
             <settings>
                 <visible>false</visible>
                 <validation>
+                    <rule name="required-entry" xsi:type="boolean">true</rule>
                     <rule name="validate-video-source" xsi:type="boolean">true</rule>
                 </validation>
                 <dataType>text</dataType>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/master.html
@@ -11,13 +11,10 @@
     <div attr="data.inner.attributes"
          ko-style="Object.assign(data.container.style(), data.inner.style())"
          css="data.inner.css">
-        <div if="data.video_overlay.style().backgroundColor"
+        <div if="data.video_overlay.attributes()['data-video-overlay-color']"
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
-        <img if="data.video_img.attributes().src"
-             attr="data.video_img.attributes"
-             class="jarallax-img jarallax-video-fallback" />
         <render args="masterTemplate"/>
     </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html
@@ -14,13 +14,10 @@
          css="Object.assign(data.inner.css(), {'empty-container': contentType.children().length == 0, 'jarallax': data.inner.attributes()['data-enable-parallax'] == 1})"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
          afterRender="initParallax">
-        <div if="data.video_overlay.style().backgroundColor"
+        <div if="data.video_overlay.attributes()['data-video-overlay-color']"
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
-        <img if="data.video_img.attributes().src"
-             attr="data.video_img.attributes"
-             class="jarallax-img jarallax-video-fallback"/>
         <render args="getOptions().template"/>
         <div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
             <if args="$parent.isContainer()">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/master.html
@@ -8,12 +8,9 @@
 <div attr="data.main.attributes"
      ko-style="Object.assign(data.container.style(), data.main.style())"
      css="data.main.css">
-    <div if="data.video_overlay.style().backgroundColor"
+    <div if="data.video_overlay.attributes()['data-video-overlay-color']"
          class="video-overlay"
          attr="data.video_overlay.attributes"
          ko-style="data.video_overlay.style" />
-    <img if="data.video_img.attributes().src"
-         attr="data.video_img.attributes"
-         class="jarallax-img jarallax-video-fallback" />
     <render args="masterTemplate"/>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html
@@ -11,13 +11,10 @@
      css="Object.assign(data.main.css(), {'empty-container': contentType.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1})"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
      afterRender="initParallax">
-    <div if="data.video_overlay.style().backgroundColor"
+    <div if="data.video_overlay.attributes()['data-video-overlay-color']"
          class="video-overlay"
          attr="data.video_overlay.attributes"
          ko-style="data.video_overlay.style" />
-    <img if="data.video_img.attributes().src"
-         attr="data.video_img.attributes"
-         class="jarallax-img jarallax-video-fallback"/>
     <render args="getOptions().template"/>
     <div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
         <if args="$parent.isContainer()">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/master.html
@@ -8,13 +8,10 @@
 <div attr="data.main.attributes"
      ko-style="Object.assign(data.container.style(), data.main.style())"
      css="data.main.css">
-    <div if="data.video_overlay.style().backgroundColor"
+    <div if="data.video_overlay.attributes()['data-video-overlay-color']"
          class="video-overlay"
          attr="data.video_overlay.attributes"
          ko-style="data.video_overlay.style" />
-    <img if="data.video_img.attributes().src"
-         attr="data.video_img.attributes"
-         class="jarallax-img jarallax-video-fallback" />
     <div class="row-full-width-inner"
          attr="data.inner.attributes"
          ko-style="data.inner.style"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html
@@ -14,13 +14,10 @@
         })"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
      afterRender="initParallax">
-    <div if="data.video_overlay.style().backgroundColor"
+    <div if="data.video_overlay.attributes()['data-video-overlay-color']"
          class="video-overlay"
          attr="data.video_overlay.attributes"
          ko-style="data.video_overlay.style" />
-    <img if="data.video_img.attributes().src"
-         attr="data.video_img.attributes"
-         class="jarallax-img jarallax-video-fallback"/>
     <render args="getOptions().template"/>
     <div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
         <if args="$parent.isContainer()">
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts
@@ -76,7 +76,7 @@ export default class Preview extends PreviewCollection {
         }
 
         if (this.element &&
-            (this.contentType.dataStore.get("background_type") as string) === 'video' &&
+            (this.element.dataset.backgroundType as string) === 'video' &&
             (this.element.dataset.videoSrc as string).length
         ) {
             window.Vimeo = window.Vimeo || {"Player": Player};
@@ -90,6 +90,7 @@ export default class Preview extends PreviewCollection {
                     this.element,
                     {
                         videoSrc: this.element.dataset.videoSrc as string,
+                        imgSrc: this.element.dataset.videoFallbackSrc as string,
                         videoLoop: (this.contentType.dataStore.get("video_loop") as string) === "true",
                         speed: !isNaN(parallaxSpeed) ? parallaxSpeed : 0.5,
                         videoPlayOnlyVisible: (this.contentType.dataStore.get("video_play_only_visible") as string) === "true",
diff --git a/app/code/Magento/PageBuilder/view/base/web/css/source/jarallax/jarallax.less b/app/code/Magento/PageBuilder/view/base/web/css/source/jarallax/jarallax.less
@@ -1,26 +1,33 @@
-.jarallax {
-    position: relative;
-    z-index: 0;
-}
-.jarallax > .jarallax-img {
-    // Support for plugin https://github.com/bfred-it/object-fit-images
-    font-family: 'object-fit: cover;', sans-serif;
-    height: 100%;
-    left: 0;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: -1;
-}
-.jarallax-video-fallback {
-    transform: scale3d(0,0,0);
-}
-.video-overlay {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: -99;
+& when (@media-common = true) {
+    .jarallax {
+        position: relative;
+        z-index: 0;
+    }
+
+    .jarallax > .jarallax-img {
+        // Support for plugin https://github.com/bfred-it/object-fit-images
+        font-family: 'object-fit: cover;', sans-serif;
+        height: 100%;
+        left: 0;
+        object-fit: cover;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: -1;
+    }
+
+    .jarallax-video-fallback {
+        transform: scale3d(0, 0, 0);
+    }
+
+    .jarallax {
+        .video-overlay {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: -99;
+        }
+    }
 }
diff --git a/app/code/Magento/PageBuilder/view/base/web/js/content-type/row/appearance/default/widget.js b/app/code/Magento/PageBuilder/view/base/web/js/content-type/row/appearance/default/widget.js
@@ -35,6 +35,7 @@ define([
             parallaxSpeed = $element.data('enableParallax') !== 1 ? 1 : parallaxSpeed;
 
             jarallaxConfig = {
+                imgSrc: $element.data('videoFallbackSrc'),
                 speed: !isNaN(parallaxSpeed) ? parallaxSpeed : 0.5,
                 videoLoop: $element.data('videoLoop'),
                 videoPlayOnlyVisible: $element.data('videoPlayOnlyVisible'),
