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"/>
+                            <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/data-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"/>
@@ -111,7 +111,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"/>
+                        <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/data-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"/>
@@ -169,7 +169,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"/>
+                        <attribute name="video_source" source="data-video-src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/data-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

@@ -76,16 +76,17 @@
         <field name="video_source" sortOrder="90" formElement="input">
             <settings>
                 <visible>false</visible>
-                <!--                <validation>-->
-                <!--                    <rule name="validate-video-url" xsi:type="boolean">true</rule>-->
-                <!--                </validation>-->
+                <validation>
+                    <rule name="validate-video-source" xsi:type="boolean">true</rule>
+                </validation>
                 <dataType>text</dataType>
                 <label translate="true">Video URL</label>
                 <tooltip>
                     <description translate="true">
                         <![CDATA[
-                        <p>Supported video formats include:</p>
-                        <p>MP4...</p>
+                        <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>
                 </tooltip>

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

@@ -156,6 +156,24 @@ define([
             $.mage.__('Please enter a valid video URL.')
         );
 
+        validator.addRule(
+            'validate-video-source',
+            function (href) {
+                if (utils.isEmptyNoTrim(href)) {
+                    return true;
+                }
+
+                href = (href || '').replace(/^\s+/, '').replace(/\s+$/, '');
+
+                return validateIsUrl(href) && (
+                    href.match(/youtube\.com|youtu\.be/)
+                    || href.match(/vimeo\.com/)
+                    || href.match(/\.(mp4|ogv|webm)(?!\w)/)
+                );
+            },
+            $.mage.__('Please enter a valid video URL.')
+        );
+
         validator.addRule(
             'validate-css-class',
             function (value) {

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

@@ -77,7 +77,7 @@ export default class Preview extends PreviewCollection {
 
         if (this.element &&
             (this.contentType.dataStore.get("background_type") as string) === 'video' &&
-            (this.contentType.dataStore.get("video_source") as any[]).length
+            (this.element.dataset.videoSrc as string).length
         ) {
             window.Vimeo = window.Vimeo || {"Player": Player};
             const parallaxSpeed = (this.contentType.dataStore.get("enable_parallax") as string) === "1"
@@ -89,7 +89,7 @@ export default class Preview extends PreviewCollection {
                 jarallax(
                     this.element,
                     {
-                        videoSrc: this.contentType.dataStore.get("video_source") as string,
+                        videoSrc: this.element.dataset.videoSrc 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",

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

@@ -0,0 +1,56 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import ConverterInterface from "../../../../converter/converter-interface";
+import {DataObject} from "../../../../data-store";
+import {get} from "../../../../utils/object";
+
+export default class Src implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @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;
+    }
+
+    /**
+     * Convert value to knockout format
+     *
+     * @param name string
+     * @param data Object
+     * @returns {string}
+     */
+    public toDom(name: string, data: DataObject): string {
+        const value = get<string>(data, name);
+        if (value === undefined) {
+            return "";
+        }
+
+        const youtubeRegExp = new RegExp("^(?:https?:\/\/|\/\/)?(?:www\\.|m\\.)?" +
+            "(?: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/watch?v=" + youtubeRegExp.exec(value)[1];
+        } else if (vimeoRegExp.test(value)) {
+            return "https://vimeo.com/" + vimeoRegExp.exec(value)[3];
+        } else if (fileRegExp.test(value)) {
+            const result = fileRegExp.exec(value);
+            return result[1] + ":" + value;
+        }
+
+        return value;
+    }
+}