PB-375: Align video background with embedded video

- fix autoplay

Author: omiroshnichenko

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

@@ -44,7 +44,8 @@
                     </element>
                     <element name="video">
                         <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"/>
+                        <attribute name="autoplay" storage_key="autoplay" source="autoplay" converter="Magento_PageBuilder/js/content-type/video/converter/attribute/autoplay"/>
+                        <attribute name="muted_video" storage_key="autoplay" source="muted"/>
                     </element>
                 </elements>
             </appearance>

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

@@ -10,7 +10,7 @@
         <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" if="isHosted(data.video.attributes().src)"/>
-                <video frameborder="0" controls="" attr="autoplay: data.video.attributes().autoplay ==='true' ? 'true' : null, src: data.video.attributes().src, 'data-element': data.video.attributes()['data-element']" ifnot="isHosted(data.video.attributes().src)"/>
+                <video frameborder="0" controls="" attr="data.video.attributes" ifnot="isHosted(data.video.attributes().src)"/>
             </div>
         </div>
     </div>

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

@@ -11,7 +11,7 @@
             <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" if="isHosted(data.video.attributes().src)"/>
-                    <video frameborder="0" controls="" attr="autoplay: data.video.attributes().autoplay ==='true' ? 'true' : null, src: data.video.attributes().src, 'data-element': data.video.attributes()['data-element']" ifnot="isHosted(data.video.attributes().src)"/>
+                    <video frameborder="0" controls attr="data.video.attributes()" ifnot="isHosted(data.video.attributes().src)" afterRender="onAfterRender"/>
                     <i class="icon-pagebuilder-video pagebuilder-video-placeholder" ifnot="data.video.attributes().src"/>
                 </div>
             </div>

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

@@ -0,0 +1,33 @@
+/**
+ * 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 === "true" ? value : "false";
+    }
+
+    /**
+     * Convert value to knockout format
+     *
+     * @param name string
+     * @param data Object
+     * @returns {boolean|string}
+     */
+    public toDom(name: string, data: DataObject): boolean|string {
+        const value = get<string>(data, name);
+
+        return value === "true" ? true : null;
+    }
+}

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] + (data.autoplay === "true" ? "?autoplay=1" : "");
+            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" + (data.autoplay === "true" ? "&autoplay=1" : "");
+            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;

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

@@ -38,10 +38,10 @@ export default class VideoSrc implements ConverterInterface {
 
         if (youtubeRegExp.test(value)) {
             return "https://www.youtube.com/embed/" + youtubeRegExp.exec(value)[1] +
-                (data.autoplay === "true" ? "?autoplay=1" : "");
+                (data.autoplay === "true" ? "?autoplay=1&mute=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" : "");
+                "?title=0&byline=0&portrait=0" + (data.autoplay === "true" ? "&autoplay=1&autopause=0&muted=1" : "");
         }
 
         return value;

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

@@ -40,4 +40,14 @@ export default class Preview extends BasePreview {
         return (vimeoRegExp.test(src) || youtubeRegExp.test(src));
     }
 
+    /**
+     * After render callback
+     *
+     * @param {HTMLVideoElement} videoElement
+     * @param {Preview} self
+     */
+    public onAfterRender(videoElement: HTMLVideoElement, self: Preview) {
+        // Assign muted attribute explicitly due to API issues
+        videoElement.muted = self.data.video.attributes().autoplay;
+    }
 }