Skip to content

Commit ce3ed40

Browse files
eug123eug123
committed
PB-95: Video background for Row
1 parent 6041c3e commit ce3ed40

File tree

29 files changed

+4072
-17
lines changed

29 files changed

+4072
-17
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -497,6 +497,23 @@
497497
</argument>
498498
</arguments>
499499
</virtualType>
500+
<virtualType name="BackgroundTypeSource" type="Magento\PageBuilder\Model\Source\VisualSelect">
501+
<arguments>
502+
<argument name="optionsSize" xsi:type="string">small</argument>
503+
<argument name="optionsData" xsi:type="array">
504+
<item name="0" xsi:type="array">
505+
<item name="value" xsi:type="string">image</item>
506+
<item name="title" xsi:type="string" translate="true">Image</item>
507+
<item name="icon" xsi:type="string">Magento_PageBuilder::css/images/form/element/visual-select/background-type/image.svg</item>
508+
</item>
509+
<item name="1" xsi:type="array">
510+
<item name="value" xsi:type="string">video</item>
511+
<item name="title" xsi:type="string" translate="true">Video</item>
512+
<item name="icon" xsi:type="string">Magento_PageBuilder::css/images/form/element/visual-select/background-type/video.svg</item>
513+
</item>
514+
</argument>
515+
</arguments>
516+
</virtualType>
500517
<virtualType name="CarouselModeSource" type="Magento\PageBuilder\Model\Source\VisualSelect">
501518
<arguments>
502519
<argument name="optionsSize" xsi:type="string">small</argument>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,25 @@
5353
<attribute name="enable_parallax" source="data-enable-parallax"/>
5454
<attribute name="parallax_speed" source="data-parallax-speed"/>
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"/>
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"/>
5661
<css name="css_classes"/>
5762
</element>
5863
<element name="container">
5964
<style name="justify_content" source="justify_content"/>
6065
<static_style source="display" value="flex"/>
6166
<static_style source="flex_direction" value="column"/>
6267
</element>
68+
<element name="video_img">
69+
<attribute name="video_fallback_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
70+
</element>
71+
<element name="video_overlay">
72+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
73+
<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"/>
74+
</element>
6375
</elements>
6476
<converters>
6577
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
@@ -98,6 +110,11 @@
98110
<attribute name="enable_parallax" source="data-enable-parallax"/>
99111
<attribute name="parallax_speed" source="data-parallax-speed"/>
100112
<attribute name="background_images" source="data-background-images"/>
113+
<attribute name="background_type" source="data-background-type"/>
114+
<attribute name="video_source" source="data-video-src"/>
115+
<attribute name="video_loop" source="data-video-loop"/>
116+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
117+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
101118
<css name="css_classes"/>
102119
</element>
103120
<element name="inner" />
@@ -106,6 +123,13 @@
106123
<static_style source="display" value="flex"/>
107124
<static_style source="flex_direction" value="column"/>
108125
</element>
126+
<element name="video_img">
127+
<attribute name="video_fallback_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
128+
</element>
129+
<element name="video_overlay">
130+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
131+
<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"/>
132+
</element>
109133
</elements>
110134
<converters>
111135
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">
@@ -144,6 +168,11 @@
144168
<attribute name="enable_parallax" source="data-enable-parallax"/>
145169
<attribute name="parallax_speed" source="data-parallax-speed"/>
146170
<attribute name="background_images" source="data-background-images"/>
171+
<attribute name="background_type" source="data-background-type"/>
172+
<attribute name="video_source" source="data-video-src"/>
173+
<attribute name="video_loop" source="data-video-loop"/>
174+
<attribute name="video_play_only_visible" source="data-video-play-only-visible"/>
175+
<attribute name="video_lazy_load" source="data-video-lazy-load"/>
147176
<css name="css_classes"/>
148177
</element>
149178
<element name="inner" />
@@ -152,6 +181,13 @@
152181
<static_style source="display" value="flex"/>
153182
<static_style source="flex_direction" value="column"/>
154183
</element>
184+
<element name="video_img">
185+
<attribute name="video_fallback_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
186+
</element>
187+
<element name="video_overlay">
188+
<style name="video_overlay_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/video-overlay-color" persistence_mode="write"/>
189+
<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"/>
190+
</element>
155191
</elements>
156192
<converters>
157193
<converter name="background_images" component="Magento_PageBuilder/js/mass-converter/background-images">

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

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
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">
9+
<settings>
10+
<namespace>pagebuilder_base_form_with_background_video</namespace>
11+
</settings>
12+
<fieldset name="background">
13+
<field name="background_type" sortOrder="20" formElement="select" component="Magento_PageBuilder/js/form/element/condition-options">
14+
<settings>
15+
<dataType>text</dataType>
16+
<label translate="true">Background Type</label>
17+
<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
18+
<dataScope>background_type</dataScope>
19+
</settings>
20+
<formElements>
21+
<select>
22+
<settings>
23+
<options class="BackgroundTypeSource"/>
24+
</settings>
25+
</select>
26+
</formElements>
27+
</field>
28+
<field name="background_image" sortOrder="30">
29+
<settings>
30+
<visible>false</visible>
31+
<imports>
32+
<link name="visible">${$.parentName}.background_type:imageVisible</link>
33+
</imports>
34+
</settings>
35+
</field>
36+
<field name="mobile_image" sortOrder="40">
37+
<settings>
38+
<visible>false</visible>
39+
<imports>
40+
<link name="visible">${$.parentName}.background_type:imageVisible</link>
41+
</imports>
42+
</settings>
43+
</field>
44+
<field name="background_size" sortOrder="50">
45+
<settings>
46+
<visible>false</visible>
47+
<imports>
48+
<link name="visible">${$.parentName}.background_type:imageVisible</link>
49+
</imports>
50+
</settings>
51+
</field>
52+
<field name="background_position" sortOrder="60">
53+
<settings>
54+
<visible>false</visible>
55+
<imports>
56+
<link name="visible">${$.parentName}.background_type:imageVisible</link>
57+
</imports>
58+
</settings>
59+
</field>
60+
<field name="background_attachment" sortOrder="70">
61+
<settings>
62+
<visible>false</visible>
63+
<imports>
64+
<link name="visible">${$.parentName}.background_type:imageVisible</link>
65+
</imports>
66+
</settings>
67+
</field>
68+
<field name="background_repeat" sortOrder="80">
69+
<settings>
70+
<visible>false</visible>
71+
<imports>
72+
<link name="visible">${$.parentName}.background_type:imageVisible</link>
73+
</imports>
74+
</settings>
75+
</field>
76+
<field name="video_source" sortOrder="90" formElement="input">
77+
<settings>
78+
<visible>false</visible>
79+
<!-- <validation>-->
80+
<!-- <rule name="validate-video-url" xsi:type="boolean">true</rule>-->
81+
<!-- </validation>-->
82+
<dataType>text</dataType>
83+
<label translate="true">Video URL</label>
84+
<tooltip>
85+
<description translate="true">
86+
<![CDATA[
87+
<p>Supported video formats include:</p>
88+
<p>MP4...</p>
89+
]]>
90+
</description>
91+
</tooltip>
92+
<imports>
93+
<link name="visible">${$.parentName}.background_type:videoVisible</link>
94+
</imports>
95+
</settings>
96+
</field>
97+
<field name="video_overlay_color" sortOrder="100" formElement="colorPicker">
98+
<settings>
99+
<visible>false</visible>
100+
<label translate="true">Overlay Color</label>
101+
<componentType>colorPicker</componentType>
102+
<placeholder translate="true">No Color</placeholder>
103+
<validation>
104+
<rule name="validate-color" xsi:type="boolean">true</rule>
105+
</validation>
106+
<dataScope>video_overlay_color</dataScope>
107+
<additionalClasses>
108+
<class name="admin__field-medium">true</class>
109+
</additionalClasses>
110+
<imports>
111+
<link name="visible">${$.parentName}.background_type:videoVisible</link>
112+
</imports>
113+
</settings>
114+
<formElements>
115+
<colorPicker>
116+
<settings>
117+
<colorPickerMode>full</colorPickerMode>
118+
<colorFormat>hex</colorFormat>
119+
</settings>
120+
</colorPicker>
121+
</formElements>
122+
</field>
123+
<field name="video_loop" sortOrder="110" formElement="checkbox">
124+
<argument name="data" xsi:type="array">
125+
<item name="config" xsi:type="array">
126+
<item name="default" xsi:type="string">true</item>
127+
</item>
128+
</argument>
129+
<settings>
130+
<visible>false</visible>
131+
<dataType>boolean</dataType>
132+
<label translate="true">Infinite Loop</label>
133+
<dataScope>video_loop</dataScope>
134+
<imports>
135+
<link name="visible">${$.parentName}.background_type:videoVisible</link>
136+
</imports>
137+
</settings>
138+
<formElements>
139+
<checkbox>
140+
<settings>
141+
<valueMap>
142+
<map name="false" xsi:type="string">false</map>
143+
<map name="true" xsi:type="string">true</map>
144+
</valueMap>
145+
<prefer>toggle</prefer>
146+
</settings>
147+
</checkbox>
148+
</formElements>
149+
</field>
150+
<field name="video_lazy_load" sortOrder="120" formElement="checkbox">
151+
<argument name="data" xsi:type="array">
152+
<item name="config" xsi:type="array">
153+
<item name="default" xsi:type="string">true</item>
154+
</item>
155+
</argument>
156+
<settings>
157+
<visible>false</visible>
158+
<dataType>boolean</dataType>
159+
<label translate="true">Lazy Load</label>
160+
<dataScope>video_lazy_load</dataScope>
161+
<imports>
162+
<link name="visible">${$.parentName}.background_type:videoVisible</link>
163+
</imports>
164+
<notice translate="true">Preload videos only when it is visible on the screen.</notice>
165+
</settings>
166+
<formElements>
167+
<checkbox>
168+
<settings>
169+
<valueMap>
170+
<map name="false" xsi:type="string">false</map>
171+
<map name="true" xsi:type="string">true</map>
172+
</valueMap>
173+
<prefer>toggle</prefer>
174+
</settings>
175+
</checkbox>
176+
</formElements>
177+
</field>
178+
<field name="video_play_only_visible" sortOrder="130" formElement="checkbox">
179+
<argument name="data" xsi:type="array">
180+
<item name="config" xsi:type="array">
181+
<item name="default" xsi:type="string">true</item>
182+
</item>
183+
</argument>
184+
<settings>
185+
<visible>false</visible>
186+
<dataType>boolean</dataType>
187+
<label translate="true">Play Only Visible</label>
188+
<dataScope>video_play_only_visible</dataScope>
189+
<notice translate="true">Video will play only when it is visible on the screen.</notice>
190+
<imports>
191+
<link name="visible">${$.parentName}.background_type:videoVisible</link>
192+
</imports>
193+
</settings>
194+
<formElements>
195+
<checkbox>
196+
<settings>
197+
<valueMap>
198+
<map name="false" xsi:type="string">false</map>
199+
<map name="true" xsi:type="string">true</map>
200+
</valueMap>
201+
<prefer>toggle</prefer>
202+
</settings>
203+
</checkbox>
204+
</formElements>
205+
</field>
206+
<field name="video_fallback_image" sortOrder="140" formElement="imageUploader">
207+
<settings>
208+
<visible>false</visible>
209+
<label translate="true">Fallback Image</label>
210+
<componentType>imageUploader</componentType>
211+
<imports>
212+
<link name="visible">${$.parentName}.background_type:videoVisible</link>
213+
</imports>
214+
</settings>
215+
<formElements>
216+
<imageUploader>
217+
<settings>
218+
<allowedExtensions>jpg jpeg gif png</allowedExtensions>
219+
<maxFileSize>4194304</maxFileSize>
220+
<uploaderConfig>
221+
<param xsi:type="string" name="url">pagebuilder/contenttype/image_upload</param>
222+
</uploaderConfig>
223+
<previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
224+
</settings>
225+
</imageUploader>
226+
</formElements>
227+
</field>
228+
</fieldset>
229+
</form>

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_row_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_row_form.pagebuilder_row_form_data_source</item>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/images/form/element/visual-select/background-type/image.svg

Lines changed: 1 addition & 0 deletions
Loading

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/images/form/element/visual-select/background-type/video.svg

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@
2727
z-index: -1;
2828
}
2929

30+
.video-overlay {
31+
position: absolute;
32+
top: 0; bottom: 0; left: 0; right: 0;
33+
z-index: -99;
34+
}
35+
3036
.pagebuilder-content-type.children-min-height.pagebuilder-row {
3137
> .element-children {
3238
min-height: inherit;

0 commit comments

Comments
 (0)