Skip to content

Commit 4231ab7

Browse files
eug123eug123
committed
PB-266: Video background for Slide
1 parent 71010ff commit 4231ab7

File tree

19 files changed

+519
-42
lines changed

19 files changed

+519
-42
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
<item name="slide" xsi:type="array">
102102
<item name="default" xsi:type="array">
103103
<!--required argument-->
104-
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
104+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/slide/appearance/default/widget</item>
105105
<!--optional if you need provide some config for your widget-->
106106
<item name="config" xsi:type="array">
107107
<item name="buttonSelector" xsi:type="string">.pagebuilder-slide-button</item>

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,12 @@
5959
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
6060
<style name="text_align" source="text_align"/>
6161
<attribute name="background_images" source="data-background-images"/>
62+
<attribute name="background_type" source="data-background-type"/>
63+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
64+
<attribute name="video_loop" source="data-video-loop"/>
65+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
66+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
67+
<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"/>
6268
</element>
6369
<element name="content">
6470
<html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -73,15 +79,39 @@
7379
</filter>
7480
</css>
7581
</element>
82+
<element name="video_overlay">
83+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
84+
<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"/>
85+
</element>
7686
</elements>
7787
<converters>
88+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
89+
<config>
90+
<item name="attribute_name" value="background_type"/>
91+
<item name="desktop_image_variable" value="background_image"/>
92+
<item name="mobile_image_variable" value="mobile_image"/>
93+
<item name="video_source_variable" value="video_source"/>
94+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
95+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
96+
</config>
97+
</converter>
7898
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
7999
<config>
80100
<item name="attribute_name" value="background_images"/>
81101
<item name="desktop_image_variable" value="background_image"/>
82102
<item name="mobile_image_variable" value="mobile_image"/>
83103
</config>
84104
</converter>
105+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
106+
<config>
107+
<item name="attribute_name" value="background_type"/>
108+
<item name="desktop_image_variable" value="background_image"/>
109+
<item name="mobile_image_variable" value="mobile_image"/>
110+
<item name="video_source_variable" value="video_source"/>
111+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
112+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
113+
</config>
114+
</converter>
85115
</converters>
86116
</appearance>
87117
<appearance name="collage-centered"
@@ -123,6 +153,12 @@
123153
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
124154
<style name="text_align" source="text_align"/>
125155
<attribute name="background_images" source="data-background-images"/>
156+
<attribute name="background_type" source="data-background-type"/>
157+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
158+
<attribute name="video_loop" source="data-video-loop"/>
159+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
160+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
161+
<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"/>
126162
</element>
127163
<element name="content">
128164
<html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -137,15 +173,39 @@
137173
</filter>
138174
</css>
139175
</element>
176+
<element name="video_overlay">
177+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
178+
<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"/>
179+
</element>
140180
</elements>
141181
<converters>
182+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
183+
<config>
184+
<item name="attribute_name" value="background_type"/>
185+
<item name="desktop_image_variable" value="background_image"/>
186+
<item name="mobile_image_variable" value="mobile_image"/>
187+
<item name="video_source_variable" value="video_source"/>
188+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
189+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
190+
</config>
191+
</converter>
142192
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
143193
<config>
144194
<item name="attribute_name" value="background_images"/>
145195
<item name="desktop_image_variable" value="background_image"/>
146196
<item name="mobile_image_variable" value="mobile_image"/>
147197
</config>
148198
</converter>
199+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
200+
<config>
201+
<item name="attribute_name" value="background_type"/>
202+
<item name="desktop_image_variable" value="background_image"/>
203+
<item name="mobile_image_variable" value="mobile_image"/>
204+
<item name="video_source_variable" value="video_source"/>
205+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
206+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
207+
</config>
208+
</converter>
149209
</converters>
150210
</appearance>
151211
<appearance name="collage-right"
@@ -187,6 +247,12 @@
187247
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
188248
<style name="text_align" source="text_align"/>
189249
<attribute name="background_images" source="data-background-images"/>
250+
<attribute name="background_type" source="data-background-type"/>
251+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
252+
<attribute name="video_loop" source="data-video-loop"/>
253+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
254+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
255+
<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"/>
190256
</element>
191257
<element name="content">
192258
<html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -201,15 +267,39 @@
201267
</filter>
202268
</css>
203269
</element>
270+
<element name="video_overlay">
271+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
272+
<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"/>
273+
</element>
204274
</elements>
205275
<converters>
276+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
277+
<config>
278+
<item name="attribute_name" value="background_type"/>
279+
<item name="desktop_image_variable" value="background_image"/>
280+
<item name="mobile_image_variable" value="mobile_image"/>
281+
<item name="video_source_variable" value="video_source"/>
282+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
283+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
284+
</config>
285+
</converter>
206286
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
207287
<config>
208288
<item name="attribute_name" value="background_images"/>
209289
<item name="desktop_image_variable" value="background_image"/>
210290
<item name="mobile_image_variable" value="mobile_image"/>
211291
</config>
212292
</converter>
293+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
294+
<config>
295+
<item name="attribute_name" value="background_type"/>
296+
<item name="desktop_image_variable" value="background_image"/>
297+
<item name="mobile_image_variable" value="mobile_image"/>
298+
<item name="video_source_variable" value="video_source"/>
299+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
300+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
301+
</config>
302+
</converter>
213303
</converters>
214304
</appearance>
215305
<appearance default="true"
@@ -253,6 +343,12 @@
253343
<style name="text_align" source="text_align"/>
254344
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
255345
<attribute name="background_images" source="data-background-images"/>
346+
<attribute name="background_type" source="data-background-type"/>
347+
<attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
348+
<attribute name="video_loop" source="data-video-loop"/>
349+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
350+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
351+
<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"/>
256352
</element>
257353
<element name="content">
258354
<html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -267,6 +363,10 @@
267363
</filter>
268364
</css>
269365
</element>
366+
<element name="video_overlay">
367+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
368+
<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"/>
369+
</element>
270370
</elements>
271371
<converters>
272372
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
@@ -276,6 +376,16 @@
276376
<item name="mobile_image_variable" value="mobile_image"/>
277377
</config>
278378
</converter>
379+
<converter name="background_type" component="Magento_PageBuilder/js/mass-converter/background-type">
380+
<config>
381+
<item name="attribute_name" value="background_type"/>
382+
<item name="desktop_image_variable" value="background_image"/>
383+
<item name="mobile_image_variable" value="mobile_image"/>
384+
<item name="video_source_variable" value="video_source"/>
385+
<item name="video_fallback_image_variable" value="video_fallback_image"/>
386+
<item name="video_overlay_color_variable" value="video_overlay_color"/>
387+
</config>
388+
</converter>
279389
</converters>
280390
</appearance>
281391
</appearances>

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_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_slide_form.pagebuilder_slide_form_data_source</item>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,16 @@
126126
overflow-wrap: break-word;
127127
word-wrap: break-word;
128128

129+
&[data-play-only-visible=true],
130+
&[data-video-lazy-load=true] {
131+
transform: translate3d(0, 150vh, 0);
132+
133+
&.video-inserted,
134+
.slick-current & {
135+
transform: translate3d(0, 0, 0);
136+
}
137+
}
138+
129139
.pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
130140
max-width: 540px;
131141
}
@@ -145,4 +155,14 @@
145155
word-break: break-word;
146156
}
147157
}
158+
159+
& + [data-content-type=slide] {
160+
height: 0;
161+
min-height: 0;
162+
163+
.slick-slider & {
164+
height: initial;
165+
min-height: inherit;
166+
}
167+
}
148168
}

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)