Skip to content

Commit 4355811

Browse files
cspruiellcspruiell
committed
PB-265: Video background for Banner
1 parent 2db4901 commit 4355811

File tree

14 files changed

+381
-25
lines changed

14 files changed

+381
-25
lines changed

‎app/code/Magento/PageBuilder/etc/di.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
</item>
113113
<item name="banner" xsi:type="array">
114114
<item name="default" xsi:type="array">
115-
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
115+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/banner/appearance/default/widget</item>
116116
<item name="config" xsi:type="array">
117117
<item name="buttonSelector" xsi:type="string">.pagebuilder-banner-button</item>
118118
<item name="showOverlay" xsi:type="string">hover</item>

‎app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/banner.xml

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,12 @@
5353
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
5454
<style name="text_align" source="text_align"/>
5555
<attribute name="background_images" source="data-background-images"/>
56+
<attribute name="background_type" source="data-background-type"/>
57+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
58+
<attribute name="video_loop" source="data-video-loop"/>
59+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
60+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
61+
<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"/>
5662
</element>
5763
<element name="overlay">
5864
<style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/banner/converter/style/overlay-background-color" persistence_mode="write"/>
@@ -61,6 +67,10 @@
6167
<element name="content">
6268
<html name="message" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
6369
</element>
70+
<element name="video_overlay">
71+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
72+
<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"/>
73+
</element>
6474
<element name="button">
6575
<style name="opacity" source="opacity" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-opacity" persistence_mode="write"/>
6676
<style name="visibility" source="visibility" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-visibility" persistence_mode="write"/>
@@ -73,6 +83,16 @@
7383
</element>
7484
</elements>
7585
<converters>
86+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
87+
<config>
88+
<item name="attribute_name" value="background_type"/>
89+
<item name="desktop_image_variable" value="background_image"/>
90+
<item name="mobile_image_variable" value="mobile_image"/>
91+
<item name="video_source_variable" value="video_source"/>
92+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
93+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
94+
</config>
95+
</converter>
7696
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
7797
<config>
7898
<item name="attribute_name" value="background_images"/>
@@ -118,6 +138,12 @@
118138
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
119139
<style name="text_align" source="text_align"/>
120140
<attribute name="background_images" source="data-background-images"/>
141+
<attribute name="background_type" source="data-background-type"/>
142+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
143+
<attribute name="video_loop" source="data-video-loop"/>
144+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
145+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
146+
<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"/>
121147
</element>
122148
<element name="overlay">
123149
<style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/banner/converter/style/overlay-background-color" persistence_mode="write"/>
@@ -126,6 +152,10 @@
126152
<element name="content">
127153
<html name="message" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
128154
</element>
155+
<element name="video_overlay">
156+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
157+
<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"/>
158+
</element>
129159
<element name="button">
130160
<style name="opacity" source="opacity" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-opacity" persistence_mode="write"/>
131161
<style name="visibility" source="visibility" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-visibility" persistence_mode="write"/>
@@ -138,6 +168,16 @@
138168
</element>
139169
</elements>
140170
<converters>
171+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
172+
<config>
173+
<item name="attribute_name" value="background_type"/>
174+
<item name="desktop_image_variable" value="background_image"/>
175+
<item name="mobile_image_variable" value="mobile_image"/>
176+
<item name="video_source_variable" value="video_source"/>
177+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
178+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
179+
</config>
180+
</converter>
141181
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
142182
<config>
143183
<item name="attribute_name" value="background_images"/>
@@ -183,6 +223,12 @@
183223
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
184224
<style name="text_align" source="text_align"/>
185225
<attribute name="background_images" source="data-background-images"/>
226+
<attribute name="background_type" source="data-background-type"/>
227+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
228+
<attribute name="video_loop" source="data-video-loop"/>
229+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
230+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
231+
<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"/>
186232
</element>
187233
<element name="overlay">
188234
<style name="overlay_color" source="background_color" converter="Magento_PageBuilder/js/content-type/banner/converter/style/overlay-background-color" persistence_mode="write"/>
@@ -191,6 +237,10 @@
191237
<element name="content">
192238
<html name="message" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
193239
</element>
240+
<element name="video_overlay">
241+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
242+
<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"/>
243+
</element>
194244
<element name="button">
195245
<style name="opacity" source="opacity" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-opacity" persistence_mode="write"/>
196246
<style name="visibility" source="visibility" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-visibility" persistence_mode="write"/>
@@ -203,6 +253,16 @@
203253
</element>
204254
</elements>
205255
<converters>
256+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
257+
<config>
258+
<item name="attribute_name" value="background_type"/>
259+
<item name="desktop_image_variable" value="background_image"/>
260+
<item name="mobile_image_variable" value="mobile_image"/>
261+
<item name="video_source_variable" value="video_source"/>
262+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
263+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
264+
</config>
265+
</converter>
206266
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
207267
<config>
208268
<item name="attribute_name" value="background_images"/>
@@ -247,6 +307,12 @@
247307
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
248308
<style name="text_align" source="text_align"/>
249309
<attribute name="background_images" source="data-background-images"/>
310+
<attribute name="background_type" source="data-background-type"/>
311+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
312+
<attribute name="video_loop" source="data-video-loop"/>
313+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
314+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
315+
<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"/>
250316
</element>
251317
<element name="overlay">
252318
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/overlay-border-radius" persistence_mode="write"/>
@@ -258,6 +324,10 @@
258324
<element name="content">
259325
<html name="message" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
260326
</element>
327+
<element name="video_overlay">
328+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
329+
<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"/>
330+
</element>
261331
<element name="button">
262332
<style name="opacity" source="opacity" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-opacity" persistence_mode="write"/>
263333
<style name="visibility" source="visibility" converter="Magento_PageBuilder/js/content-type/banner/converter/style/button-visibility" persistence_mode="write"/>
@@ -270,6 +340,16 @@
270340
</element>
271341
</elements>
272342
<converters>
343+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
344+
<config>
345+
<item name="attribute_name" value="background_type"/>
346+
<item name="desktop_image_variable" value="background_image"/>
347+
<item name="mobile_image_variable" value="mobile_image"/>
348+
<item name="video_source_variable" value="video_source"/>
349+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
350+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
351+
</config>
352+
</converter>
273353
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
274354
<config>
275355
<item name="attribute_name" value="background_images"/>

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_banner_form.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* See COPYING.txt for license details.
66
*/
77
-->
8-
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form_with_background_attributes">
8+
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form_with_background_video">
99
<argument name="data" xsi:type="array">
1010
<item name="js_config" xsi:type="array">
1111
<item name="provider" xsi:type="string">pagebuilder_banner_form.pagebuilder_banner_form_data_source</item>

0 commit comments

Comments
 (0)