From 9ab1bb66f5b679decab1907a4cff30a4b7a6beaf Mon Sep 17 00:00:00 2001
From: Nicolas Bayet <nby@odoo.com>
Date: Tue, 4 Jan 2022 14:13:01 +0000
Subject: [PATCH] [FIX] web_editor: add youtube video from paste

The PR #44537 changed the method _createVideoNode to be async while
the wysiwyg still called the method as if being sync.
This commit adapt the code to be asynchronous.

Task-2727906

closes odoo/odoo#84327

X-original-commit: 683de2b41c2e3699c39126852c82f1bb988bd3e9
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/lib/odoo-editor/src/OdooEditor.js  | 42 ++++++-------
 .../lib/odoo-editor/src/powerbox/Powerbox.js  |  8 +--
 .../static/src/js/wysiwyg/widgets/media.js    | 59 +++++++++----------
 .../static/src/js/wysiwyg/wysiwyg.js          |  4 +-
 4 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
index 66b76f4f97b..5612c61dc08 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/OdooEditor.js
@@ -2779,27 +2779,29 @@ export class OdooEditor extends EventTarget {
                                     description: 'Embed the youtube video in the document.',
                                     fontawesome: 'fa-youtube-play',
                                     shouldPreValidate: () => false,
-                                    callback: () => {
+                                    callback: async () => {
+                                        let videoElement;
+                                        if (this.options.getYoutubeVideoElement) {
+                                            videoElement = await this.options.getYoutubeVideoElement(youtubeUrl[0]);
+                                        } else {
+                                            videoElement = document.createElement('iframe');
+                                            videoElement.setAttribute('width', '560');
+                                            videoElement.setAttribute('height', '315');
+                                            videoElement.setAttribute(
+                                                'src',
+                                                `https://www.youtube.com/embed/${youtubeUrl[1]}`,
+                                            );
+                                            videoElement.setAttribute('title', 'YouTube video player');
+                                            videoElement.setAttribute('frameborder', '0');
+                                            videoElement.setAttribute(
+                                                'allow',
+                                                'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+                                            );
+                                            videoElement.setAttribute('allowfullscreen', '1');
+                                        }
+
                                         execCommandAtStepIndex(stepIndexBeforeInsert, () => {
-                                            let videoElement;
-                                            if (this.options.getYoutubeVideoElement) {
-                                                videoElement = this.options.getYoutubeVideoElement(youtubeUrl[0]);
-                                            } else {
-                                                videoElement = document.createElement('iframe');
-                                                videoElement.setAttribute('width', '560');
-                                                videoElement.setAttribute('height', '315');
-                                                videoElement.setAttribute(
-                                                    'src',
-                                                    `https://www.youtube.com/embed/${youtubeUrl[1]}`,
-                                                );
-                                                videoElement.setAttribute('title', 'YouTube video player');
-                                                videoElement.setAttribute('frameborder', '0');
-                                                videoElement.setAttribute(
-                                                    'allow',
-                                                    'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-                                                );
-                                                videoElement.setAttribute('allowfullscreen', '1');
-                                            }
+
                                             const sel = this.document.getSelection();
                                             if (sel.rangeCount) {
                                                 sel.getRangeAt(0).insertNode(videoElement);
diff --git a/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js b/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js
index 1eefdd3ec97..93572a7f808 100644
--- a/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js
+++ b/addons/web_editor/static/lib/odoo-editor/src/powerbox/Powerbox.js
@@ -254,7 +254,7 @@ export class Powerbox {
 
             this.options.onStop && this.options.onStop();
         };
-        this._currentValidate = () => {
+        this._currentValidate = async () => {
             const command = this._currentFilteredCommands.find(
                 c => c === this._currentSelectedCommand,
             );
@@ -262,11 +262,11 @@ export class Powerbox {
                 !command.isIntermediateStep &&
                     (!command.shouldPreValidate || command.shouldPreValidate()) &&
                     this.options.preValidate &&
-                    this.options.preValidate();
-                command.callback();
+                    await this.options.preValidate();
+                await command.callback();
                 !command.isIntermediateStep &&
                     this.options.postValidate &&
-                    this.options.postValidate();
+                    await this.options.postValidate();
             }
             if (!command || !command.isIntermediateStep) {
                 this._stop();
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
index 966c1e747bd..cd482d83ca5 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -1302,6 +1302,34 @@ var VideoWidget = MediaWidget.extend({
             '</div>'
         );
     },
+    /**
+     * Creates a video node according to the given URL and options. If not
+     * possible, returns an error code.
+     *
+     * @param {string} url
+     * @param {Object} options
+     * @returns {Object}
+     *          $video -> the created video jQuery node
+     *          type -> the type of the created video
+     *          errorCode -> if defined, either '0' for invalid URL or '1' for
+     *              unsupported video provider
+     */
+    createVideoNode: async function (url, options) {
+        options = options || {};
+        const videoData = await this._getVideoURLData(url, options);
+        if (videoData.error) {
+            return {errorCode: 0};
+        }
+        if (!videoData.platform) {
+            return {errorCode: 1};
+        }
+        const $video = $('<iframe>').width(1280).height(720)
+            .attr('frameborder', 0)
+            .attr('src', videoData.embed_url)
+            .addClass('o_video_dialog_iframe');
+
+        return {$video: $video, platform: videoData.platform};
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -1325,35 +1353,6 @@ var VideoWidget = MediaWidget.extend({
             this.media.innerHTML = '';
         }
     },
-    /**
-     * Creates a video node according to the given URL and options. If not
-     * possible, returns an error code.
-     *
-     * @private
-     * @param {string} url
-     * @param {Object} options
-     * @returns {Object}
-     *          $video -> the created video jQuery node
-     *          type -> the type of the created video
-     *          errorCode -> if defined, either '0' for invalid URL or '1' for
-     *              unsupported video provider
-     */
-    _createVideoNode: async function (url, options) {
-        options = options || {};
-        const videoData = await this._getVideoURLData(url, options);
-        if (videoData.error) {
-            return {errorCode: 0};
-        }
-        if (!videoData.platform) {
-            return {errorCode: 1};
-        }
-        const $video = $('<iframe>').width(1280).height(720)
-            .attr('frameborder', 0)
-            .attr('src', videoData.embed_url)
-            .addClass('o_video_dialog_iframe');
-
-        return {$video: $video, platform: videoData.platform};
-    },
     /**
      * Updates the video preview according to video code and enabled options.
      *
@@ -1379,7 +1378,7 @@ var VideoWidget = MediaWidget.extend({
         }
         var url = embedMatch ? embedMatch[1] : code;
 
-        const query = await this._createVideoNode(url, {
+        const query = await this.createVideoNode(url, {
             'autoplay': this.isForBgVideo || this.$('input#o_video_autoplay').is(':checked'),
             'hide_controls': this.isForBgVideo || this.$('input#o_video_hide_controls').is(':checked'),
             'loop': this.isForBgVideo || this.$('input#o_video_loop').is(':checked'),
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index daeab7f27b7..56dcc5f4ca8 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -90,9 +90,9 @@ const Wysiwyg = Widget.extend({
             editorCollaborationOptions = this.setupCollaboration(options.collaborationChannel);
         }
 
-        const getYoutubeVideoElement = (url) => {
+        const getYoutubeVideoElement = async (url) => {
             const videoWidget = new weWidgets.VideoWidget(this, undefined, {});
-            const src = videoWidget._createVideoNode(url).$video.attr('src');
+            const src = (await videoWidget.createVideoNode(url)).$video.attr('src');
             return videoWidget.getWrappedIframe(src)[0];
         };