PB-95: Video background for Row

Author: eug123

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

@@ -54,7 +54,7 @@
                             <attribute name="parallax_speed" source="data-parallax-speed"/>
                             <attribute name="background_images" source="data-background-images"/>
                             <attribute name="background_type" source="data-background-type"/>
-                            <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/data-src"/>
+                            <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
                             <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"/>
@@ -114,7 +114,7 @@
                         <attribute name="parallax_speed" source="data-parallax-speed"/>
                         <attribute name="background_images" source="data-background-images"/>
                         <attribute name="background_type" source="data-background-type"/>
-                        <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/data-src"/>
+                        <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
                         <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"/>
@@ -175,7 +175,7 @@
                         <attribute name="parallax_speed" source="data-parallax-speed"/>
                         <attribute name="background_images" source="data-background-images"/>
                         <attribute name="background_type" source="data-background-type"/>
-                        <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/data-src"/>
+                        <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
                         <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"/>

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

@@ -88,13 +88,7 @@
                 <dataType>text</dataType>
                 <label translate="true">Video URL</label>
                 <tooltip>
-                    <description translate="true">
-                        <![CDATA[
-                        <p>Supported video sources are:</p>
-                        <p>URL to YouTube or Vimeo video</p>
-                        <p>URL to .mp4, .ogv or .webm video file</p>
-                        ]]>
-                    </description>
+                    <description translate="true">Video URLs can include web URLs to files with video extensions (such as https://company/videos/myvideo.mp4) or embed codes from YouTube or Vimeo.</description>
                 </tooltip>
                 <imports>
                     <link name="visible">${$.parentName}.background_type:videoVisible</link>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/video/converter/attribute/data-src.js

@@ -171,7 +171,7 @@ define([
                     href.match(/\.(mp4|ogv|webm)(?!\w)/)
                 );
             },
-            $.mage.__('Please enter a valid video URL.')
+            $.mage.__('Please enter a valid video URL. Valid URLs have a video file extension (.mp4, .webm, .ogv) or an embed code from YouTube or Vimeo.')//eslint-disable-line max-len
         );
 
         validator.addRule(

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/video/converter/attribute/src.js

@@ -11,7 +11,10 @@
     <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
          attr="data.inner.attributes"
          ko-style="data.inner.style"
-         css="Object.assign(data.inner.css(), {'empty-container': contentType.children().length == 0, 'jarallax': data.inner.attributes()['data-enable-parallax'] == 1})"
+         css="Object.assign(data.inner.css(), {
+            'empty-container': contentType.children().length == 0,
+            'jarallax': data.inner.attributes()['data-enable-parallax'] == 1 || data.inner.attributes()['data-background-type'] == 'video'
+            })"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
          afterRender="initParallax">
         <div if="data.video_overlay.attributes()['data-video-overlay-color']"

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

@@ -8,7 +8,10 @@
 <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
      attr="data.main.attributes"
      ko-style="data.main.style"
-     css="Object.assign(data.main.css(), {'empty-container': contentType.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1})"
+     css="Object.assign(data.main.css(), {
+        'empty-container': contentType.children().length == 0,
+        'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'
+        })"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
      afterRender="initParallax">
     <div if="data.video_overlay.attributes()['data-video-overlay-color']"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html

@@ -15,6 +15,11 @@ export default class Src implements ConverterInterface {
      * @returns {string | object}
      */
     public fromDom(value: string): string | object {
+        const fileRegExp = new RegExp("^(webm:|mp4:|ogv:)");
+        if (fileRegExp.test(value)) {
+            return value.substr(fileRegExp.exec(value)[0].length)
+        }
+
         return value;
     }
 
@@ -35,11 +40,15 @@ export default class Src implements ConverterInterface {
             "(?:youtu\\.be\/|youtube\\.com\/(?:embed\/|v\/|watch\\?v=|watch\\?.+&v=))([\\w-]{11})(?![\\w-])");
         const vimeoRegExp = new RegExp("https?:\/\/(?:www\\.|player\\.)?vimeo.com\/(?:channels\/" +
             "(?:\\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\\d+)\/video\/|video\/|)(\\d+)(?:$|\/|\\?)");
+        const fileRegExp = new RegExp("^(?:https:)?\\/\\/.*[\\\\\\/].+\\.(webm|mp4|ogv)(?!\w)");
 
         if (youtubeRegExp.test(value)) {
             return "https://www.youtube.com/embed/" + youtubeRegExp.exec(value)[1];
         } else if (vimeoRegExp.test(value)) {
             return "https://player.vimeo.com/video/" + vimeoRegExp.exec(value)[3] + "?title=0&byline=0&portrait=0";
+        } else if (fileRegExp.test(value)) {
+            const result = fileRegExp.exec(value);
+            return result[1] + ":" + value;
         }
 
         return value;

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html

@@ -13,9 +13,8 @@
         z-index: 0;
     }
 
-    .jarallax{
+    .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;