Merge branch 'ACP2E-485' of https://github.com/magento-l3/magento2-page-builder into L3-PR-2022-04-19

Author: alzota

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

@@ -8,6 +8,68 @@ import {DataObject} from "../../../../data-store";
 import {get} from "../../../../utils/object";
 
 export default class VideoSrc implements ConverterInterface {
+
+    /**
+     * Parse YouTube parameters from given URL and Autoplay setting from UI
+     *
+     * @param url string
+     * @param data DataObject
+     * @returns string
+     * @private
+     */
+    private static parseYoutubeGetParams(url: string, data: DataObject): string {
+        const acceptableYouTubeParams = [
+            "rel",
+            "controls",
+            "autoplay",
+            "mute",
+            "loop",
+            "playlist",
+            "cc_lang_pref",
+            "cc_load_policy",
+            "color",
+            "disablekb",
+            "end",
+            "fs",
+            "hl",
+            "iv_load_policy",
+            "modestbranding",
+            "start",
+        ];
+
+        const a = document.createElement("a");
+        a.href = url;
+        const urlGetParams: {[key: string]: string} = {};
+        a.search.slice(a.search.indexOf("?") + 1).split("&").map((hash) => {
+            const [key, val] = hash.split("=");
+            urlGetParams[key] = decodeURIComponent(val);
+        });
+
+        const filteredGetParams: {[key: string]: string} = {};
+        for (const param of acceptableYouTubeParams) {
+            if (urlGetParams.hasOwnProperty(param)) {
+                filteredGetParams[param] = urlGetParams[param];
+            }
+        }
+
+        if (data.autoplay === "true") {
+            filteredGetParams.autoplay = "1";
+            filteredGetParams.mute = "1";
+        } else {
+            delete filteredGetParams.autoplay;
+            delete filteredGetParams.mute;
+        }
+
+        const processedGetParams = [];
+        for (const param in filteredGetParams) {
+            if (filteredGetParams.hasOwnProperty(param)) {
+                processedGetParams.push(encodeURI(param + "=" + filteredGetParams[param]));
+            }
+        }
+
+        return processedGetParams.length > 0 ? "?" + processedGetParams.join("&") : "";
+    }
+
     /**
      * Convert value to internal format
      *
@@ -16,6 +78,7 @@ export default class VideoSrc implements ConverterInterface {
      */
     public fromDom(value: string): string | object {
         value = value.replace(/\?autoplay=1&mute=1/g, "");
+        value = value.replace(/&autoplay=1&mute=1/g, "");
         value = value.replace(/\?title=0&byline=0&portrait=0/g, "");
         value = value.replace(/&autoplay=1&autopause=0&muted=1/g, "");
         return value;
@@ -41,7 +104,7 @@ 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&mute=1" : "");
+                VideoSrc.parseYoutubeGetParams(value, data);
         } 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&autopause=0&muted=1" : "");

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

@@ -0,0 +1,68 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+    'jquery',
+    'Magento_PageBuilder/js/content-type/video/converter/attribute/videosrc'
+], function ($, VideoSrc) {
+    'use strict';
+
+    describe('Magento_PageBuilder/js/content-type/video/converter/attribute/videosrc', function () {
+        var model;
+
+        beforeEach(function () {
+            model = new VideoSrc();
+        });
+
+        describe('toDom', function () {
+            it('Should remove non-youtube and preserve youtube tags in URL', function () {
+                var data = {
+                        video_source: 'https://www.youtube.com/embed/ishbTyLs6ps?rel=1&non-youtube-tag=value',
+                        autoplay: 'false'
+                    },
+                    result = model.toDom('video_source', data);
+
+                expect(result).toBe('https://www.youtube.com/embed/ishbTyLs6ps?rel=1');
+            });
+        });
+
+        describe('toDom', function () {
+            it('Should add autoplay and mute to URL if Autoplay enabled in UI', function () {
+                var data = {
+                        video_source: 'https://www.youtube.com/embed/ishbTyLs6ps?rel=1&controls=0',
+                        autoplay: 'true'
+                    },
+                    result = model.toDom('video_source', data);
+
+                expect(result).toBe('https://www.youtube.com/embed/ishbTyLs6ps?rel=1&controls=0&autoplay=1&mute=1');
+            });
+        });
+
+        describe('toDom', function () {
+            it('Should remove autoplay and mute from URL if Autoplay disabled in UI', function () {
+                var data = {
+                        video_source: 'https://www.youtube.com/embed/ishbTyLs6ps?rel=1&controls=0&autoplay=1&mute=1',
+                        autoplay: 'false'
+                    },
+                    result = model.toDom('video_source', data);
+
+                expect(result).toBe('https://www.youtube.com/embed/ishbTyLs6ps?rel=1&controls=0');
+            });
+        });
+
+        describe('fromDom', function () {
+            it('Should remove autoplay and mute from the URL as it is controlled via UI', function () {
+                var result;
+
+                result = model.fromDom('https://www.youtube.com/embed/ishbTyLs6ps?rel=1&controls=0&autoplay=1&mute=1');
+                expect(result).toBe('https://www.youtube.com/embed/ishbTyLs6ps?rel=1&controls=0');
+
+                result = model.fromDom('https://www.youtube.com/embed/ishbTyLs6ps?autoplay=1&mute=1');
+                expect(result).toBe('https://www.youtube.com/embed/ishbTyLs6ps');
+            });
+        });
+    });
+});