[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>
This commit is contained in:
Nicolas Bayet
@@ -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);
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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'),
|
||||
|
||||
@@ -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];
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user