PB-375: Align video background with embedded video

 - add autoplay and support video files

Author: cspruiell

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

@@ -10,6 +10,7 @@
           label="Video"
           component="Magento_PageBuilder/js/content-type"
           preview_component="Magento_PageBuilder/js/content-type/video/preview"
+          master_component="Magento_PageBuilder/js/content-type/video/master"
           form="pagebuilder_video_form"
           menu_section="media"
           icon="icon-pagebuilder-video"
@@ -42,7 +43,8 @@
                         <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
                     </element>
                     <element name="video">
-                        <attribute name="video_source" source="src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src" preview_converter="Magento_PageBuilder/js/content-type/video/converter/attribute/src"/>
+                        <attribute name="video_source" source="src" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/videosrc" preview_converter="Magento_PageBuilder/js/content-type/video/converter/attribute/videosrc"/>
+                        <attribute name="autoplay" source="autoplay"/>
                     </element>
                 </elements>
             </appearance>

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

@@ -77,11 +77,13 @@
         <field name="video_source" formElement="input">
             <settings>
                 <validation>
-                    <rule name="validate-video-url" xsi:type="boolean">true</rule>
+                    <rule name="validate-video-source" xsi:type="boolean">true</rule>
                 </validation>
                 <dataType>text</dataType>
                 <label translate="true">Video URL</label>
-                <notice translate="true">YouTube and Vimeo supported</notice>
+                <tooltip>
+                    <description translate="true">Video URLs can be links to videos on YouTube or Vimeo, or HTTP(S) links to files with valid video extensions (we recommend .mp4)</description>
+                </tooltip>
             </settings>
         </field>
         <field name="max_width" formElement="input">
@@ -94,5 +96,28 @@
                 </additionalClasses>
             </settings>
         </field>
+        <field name="autoplay" sortOrder="110" formElement="checkbox">
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="default" xsi:type="string">false</item>
+                </item>
+            </argument>
+            <settings>
+                <dataType>boolean</dataType>
+                <label translate="true">Autoplay</label>
+                <dataScope>autoplay</dataScope>
+            </settings>
+            <formElements>
+                <checkbox>
+                    <settings>
+                        <valueMap>
+                            <map name="false" xsi:type="string">false</map>
+                            <map name="true" xsi:type="string">true</map>
+                        </valueMap>
+                        <prefer>toggle</prefer>
+                    </settings>
+                </checkbox>
+            </formElements>
+        </field>
     </fieldset>
 </form>

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

@@ -38,6 +38,7 @@
         }
 
         iframe,
+        video,
         .pagebuilder-video-placeholder {
             height: 100%;
             left: 0;

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

@@ -9,7 +9,8 @@
     <div class="pagebuilder-video-inner" attr="data.inner.attributes" ko-style="data.inner.style" css="data.inner.css">
         <div class="pagebuilder-video-wrapper" attr="data.wrapper.attributes" ko-style="Object.assign(data.wrapper.style(), {backgroundColor: data.wrapper.style().borderColor})" css="data.wrapper.css">
             <div class="pagebuilder-video-container" if="data.video.attributes().src">
-                <iframe frameborder="0" allowfullscreen attr="data.video.attributes"/>
+                <iframe frameborder="0" allowfullscreen attr="data.video.attributes" if="isHosted(data.video.attributes().src)"/>
+                <video frameborder="0" controls data-bind="attr: { 'autoplay': data.video.attributes().autoplay ==='true' ? 'true' : null, 'src': data.video.attributes().src }"  ifnot="isHosted(data.video.attributes().src)"/>
             </div>
         </div>
     </div>

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

@@ -10,7 +10,8 @@
         <div class="pagebuilder-video-inner" attr="data.inner.attributes" ko-style="data.inner.style" css="data.inner.css">
             <div class="pagebuilder-video-wrapper" attr="data.wrapper.attributes" ko-style="Object.assign(data.wrapper.style(), {backgroundColor: data.wrapper.style().borderColor})" css="data.wrapper.css">
                 <div class="pagebuilder-video-container">
-                    <iframe frameborder="0" allowfullscreen attr="data.video.attributes"/>
+                    <iframe frameborder="0" allowfullscreen attr="data.video.attributes" if="isHosted(data.video.attributes().src)"/>
+                    <video frameborder="0" controls data-bind="attr: { 'autoplay': data.video.attributes().autoplay ==='true' ? 'true' : null, 'src': data.video.attributes().src }" ifnot="isHosted(data.video.attributes().src)"/>
                     <i class="icon-pagebuilder-video pagebuilder-video-placeholder" ifnot="data.video.attributes().src"/>
                 </div>
             </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/video/default/master.html

@@ -43,9 +43,9 @@ export default class Src implements ConverterInterface {
         const fileRegExp = new RegExp("^(?:https:|http:)?\\/\\/.*[\\\\\\/].+\\.(webm|mp4|ogv)(?!\w)");
 
         if (youtubeRegExp.test(value)) {
-            return "https://www.youtube.com/embed/" + youtubeRegExp.exec(value)[1];
+            return "https://www.youtube.com/embed/" + youtubeRegExp.exec(value)[1] + (data.autoplay === "true" ? "?autoplay=1" : "");
         } else if (vimeoRegExp.test(value)) {
-            return "https://player.vimeo.com/video/" + vimeoRegExp.exec(value)[3] + "?title=0&byline=0&portrait=0";
+            return "https://player.vimeo.com/video/" + vimeoRegExp.exec(value)[3] + "?title=0&byline=0&portrait=0" + (data.autoplay === "true" ? "&autoplay=1" : "");
         } else if (fileRegExp.test(value)) {
             const result = fileRegExp.exec(value);
             return result[1] + ":" + value;

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/video/default/preview.html

@@ -0,0 +1,47 @@
+/**
+ * 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 VideoSrc implements ConverterInterface {
+    /**
+     * Convert value to internal format
+     *
+     * @param value string
+     * @returns {string | object}
+     */
+    public fromDom(value: string): string | object {
+        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+)(?:$|\/|\\?)");
+
+        if (youtubeRegExp.test(value)) {
+            return "https://www.youtube.com/embed/" + youtubeRegExp.exec(value)[1] + (data.autoplay === "true" ? "?autoplay=1" : "");
+        } else if (vimeoRegExp.test(value)) {
+            return "https://player.vimeo.com/video/" + vimeoRegExp.exec(value)[3] + "?title=0&byline=0&portrait=0" + (data.autoplay === "true" ? "&autoplay=1" : "");
+        }
+
+        return value;
+    }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import BaseMaster from "../master";
+
+export default class Master extends BaseMaster {
+
+    public isHosted(src: string): boolean {
+        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+)(?:$|\/|\\?)");
+        return (vimeoRegExp.test(src) || youtubeRegExp.test(src));
+    }
+
+}