diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 26b584cf736..00f051cbd81 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1439,6 +1439,8 @@ const MediapickerUserValueWidget = UserValueWidget.extend({
noIcons: true,
noDocuments: true,
isForBgVideo: true,
+ vimeoPreviewIds: ['299225971', '414790269', '420192073', '368484050', '334729960', '417478345',
+ '312451183', '415226028', '367762632', '340475898', '374265101', '370467553'],
'res_model': $editable.data('oe-model'),
'res_id': $editable.data('oe-id'),
}, el).open();
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 65bceb1b053..df8cd89bfc5 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -1142,6 +1142,7 @@ var VideoWidget = MediaWidget.extend({
'change .o_video_dialog_options input': '_onUpdateVideoOption',
'input textarea#o_video_text': '_onVideoCodeInput',
'change textarea#o_video_text': '_onVideoCodeChange',
+ 'click .o_sample_video': '_onSampleVideoClick',
}),
/**
@@ -1151,6 +1152,8 @@ var VideoWidget = MediaWidget.extend({
this._super.apply(this, arguments);
this.isForBgVideo = !!options.isForBgVideo;
this._onVideoCodeInput = _.debounce(this._onVideoCodeInput, 1000);
+ // list of videoIds from vimeo.
+ this._vimeoPreviewIds = options.vimeoPreviewIds;
},
/**
* @override
@@ -1174,6 +1177,23 @@ var VideoWidget = MediaWidget.extend({
this._updateVideo();
}
+ // loads the thumbnail of vimeo video previews.
+ this.$('.o_sample_video').each((index, node) => {
+ const $node = $(node);
+ const videoId = $node.attr('data-vimeo');
+ if (!videoId) {
+ return;
+ }
+ fetch(`https://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/${videoId}`)
+ .then(response=>response.json())
+ .then((response) => {
+ $node.append($('', {
+ src: response.thumbnail_url,
+ class: 'mw-100 mh-100 p-1',
+ }));
+ });
+ });
+
return this._super.apply(this, arguments);
},
@@ -1344,6 +1364,19 @@ var VideoWidget = MediaWidget.extend({
_onUpdateVideoOption: function () {
this._updateVideo();
},
+ /**
+ * changes the video preview when clicking on the thumbnail of a suggested video
+ *
+ * @private
+ * @param {OdooEvent} ev
+ */
+ _onSampleVideoClick(ev) {
+ const vimeoId = ev.currentTarget.getAttribute('data-vimeo');
+ if (vimeoId) {
+ this.$('#o_video_text').val(`https://player.vimeo.com/video/${vimeoId}`);
+ this._updateVideo();
+ }
+ },
/**
* Called when the video code (URL / Iframe) change is confirmed -> Updates
* the video preview immediately.
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 79818d4ae2e..40bed4836d7 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -348,6 +348,10 @@ body .modal {
}
}
}
+
+ #video-suggestion > .o_sample_video {
+ cursor: pointer;
+ }
}
}
}
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 96823fde263..c05a50787a3 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -410,11 +410,11 @@
+