[IMP] website, *: allow to set background video to snippets

* web_editor

This commit adds support to set background videos to all the snippets
that already support setting background images (except on parallax
background for now).

task-1920630

closes odoo/odoo#36261

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Varun Raval <var@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>

4 files changed, 95 insertions, 37 deletions

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 f124d1841f0..5b493dfef0d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -838,23 +838,18 @@ registry.background = SnippetOption.extend({
      * @see this.selectClass for parameters
      */
     chooseImage: function (previewMode, value, $opt) {
-        // Put fake image in the DOM, edit it and use it as background-image
-        var $image = $('<img/>', {class: 'd-none', src: value === 'true' ? '' : value}).appendTo(this.$target);
+        var options = this._getMediaDialogOptions();
+        var media = this._getEditableMedia();
 
-        var $editable = this.$target.closest('.o_editable');
-        var _editor = new weWidgets.MediaDialog(this, {
-            'onlyImages': true,
-            'firstFilters': ['background'],
-            'res_model': $editable.data('oe-model'),
-            'res_id': $editable.data('oe-id'),
-        }, $image[0]).open();
-
-        _editor.on('save', this, function () {
-            this._setCustomBackground($image.attr('src'));
+        var _editor = new weWidgets.MediaDialog(this, options, media).open();
+        _editor.on('save', this, data => {
+            this._onSaveMediaDialog(data);
             this.$target.trigger('content_changed');
         });
-        _editor.on('closed', this, function () {
-            $image.remove();
+        _editor.on('closed', this, () => {
+            if (media.classList.contains('o_we_fake_image')) {
+                media.parentNode.removeChild(media);
+            }
         });
     },
 
@@ -871,16 +866,7 @@ registry.background = SnippetOption.extend({
             return;
         }
         this.$target.off('.background-option')
-            .on('background-color-event.background-option', (function (e, previewMode) {
-                e.stopPropagation();
-                if (e.currentTarget !== e.target) {
-                    return;
-                }
-                if (previewMode === false) {
-                    this.__customImageSrc = undefined;
-                }
-                this.background(previewMode);
-            }).bind(this));
+            .on('background-color-event.background-option', this._onBackgroundColorUpdate.bind(this));
     },
     /**
      * @override
@@ -897,6 +883,37 @@ registry.background = SnippetOption.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Returns a media element the media dialog will be able to edit to use
+     * the result as the snippet's background somehow.
+     *
+     * @private
+     * @returns {HTMLElement}
+     */
+    _getEditableMedia: function () {
+        var $image = $('<img/>', {
+            class: 'd-none o_we_fake_image',
+        }).appendTo(this.$target);
+        return $image[0];
+    },
+    /**
+     * Returns the options to be given to the MediaDialog instance when choosing
+     * a snippet's background.
+     *
+     * @private
+     * @returns {Object}
+     */
+    _getMediaDialogOptions: function () {
+        var $editable = this.$target.closest('.o_editable');
+        return {
+            noDocuments: true,
+            noIcons: true,
+            noVideos: true,
+            firstFilters: ['background'],
+            res_model: $editable.data('oe-model'),
+            res_id: $editable.data('oe-id'),
+        };
+    },
+    /**
      * Returns the src value from a css value related to a background image
      * (e.g. "url('blabla')" => "blabla" / "none" => "").
      *
@@ -941,6 +958,42 @@ registry.background = SnippetOption.extend({
         this._setActive();
         this.$target.trigger('snippet-option-change', [this]);
     },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called on background-color update (useful to remove the background to be
+     * able to see the chosen color).
+     *
+     * @private
+     * @param {Event} ev
+     * @param {boolean|string} previewMode
+     * @returns {boolean} true if the color has been applied (removing the
+     *                    background)
+     */
+    _onBackgroundColorUpdate: function (ev, previewMode) {
+        ev.stopPropagation();
+        if (ev.currentTarget !== ev.target) {
+            return false;
+        }
+        if (previewMode === false) {
+            this.__customImageSrc = undefined;
+        }
+        this.background(previewMode);
+        return true;
+    },
+    /**
+     * Called on media dialog save (when choosing a snippet's background) ->
+     * sets the resulting media as the snippet's background somehow.
+     *
+     * @private
+     * @param {Object} data
+     */
+    _onSaveMediaDialog: function (data) {
+        this._setCustomBackground(data.src);
+    },
 });
 
 /**
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 cbb39ea6173..a6a9fb675fd 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -1009,8 +1009,9 @@ var VideoWidget = MediaWidget.extend({
     /**
      * @constructor
      */
-    init: function (parent, media) {
+    init: function (parent, media, options) {
         this._super.apply(this, arguments);
+        this.isForBgVideo = !!options.isForBgVideo;
         this._onVideoCodeInput = _.debounce(this._onVideoCodeInput, 1000);
     },
     /**
@@ -1021,7 +1022,7 @@ var VideoWidget = MediaWidget.extend({
 
         if (this.media) {
             var $media = $(this.media);
-            var src = $media.data('oe-expression') || $media.data('src') || '';
+            var src = $media.data('oe-expression') || $media.data('src') || ($media.is('iframe') ? $media.attr('src') : '') || '';
             this.$('textarea#o_video_text').val(src);
 
             this.$('input#o_video_autoplay').prop('checked', src.indexOf('autoplay=1') >= 0);
@@ -1047,6 +1048,9 @@ var VideoWidget = MediaWidget.extend({
      */
     save: function () {
         this._updateVideo();
+        if (this.isForBgVideo) {
+            return Promise.resolve({bgVideoSrc: this.$content.attr('src')});
+        }
         if (this.$('.o_video_dialog_iframe').is('iframe')) {
             this.$media = $(
                 '<div class="media_iframe_video" data-oe-expression="' + this.$content.attr('src') + '">' +
@@ -1200,13 +1204,13 @@ var VideoWidget = MediaWidget.extend({
         var url = embedMatch ? embedMatch[1] : code;
 
         var query = this._createVideoNode(url, {
-            autoplay: this.$('input#o_video_autoplay').is(':checked'),
-            hide_controls: this.$('input#o_video_hide_controls').is(':checked'),
-            loop: this.$('input#o_video_loop').is(':checked'),
-            hide_fullscreen: this.$('input#o_video_hide_fullscreen').is(':checked'),
-            hide_yt_logo: this.$('input#o_video_hide_yt_logo').is(':checked'),
-            hide_dm_logo: this.$('input#o_video_hide_dm_logo').is(':checked'),
-            hide_dm_share: this.$('input#o_video_hide_dm_share').is(':checked'),
+            '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'),
+            'hide_fullscreen': this.isForBgVideo || this.$('input#o_video_hide_fullscreen').is(':checked'),
+            'hide_yt_logo': this.isForBgVideo || this.$('input#o_video_hide_yt_logo').is(':checked'),
+            'hide_dm_logo': this.isForBgVideo || this.$('input#o_video_hide_dm_logo').is(':checked'),
+            'hide_dm_share': this.isForBgVideo || this.$('input#o_video_hide_dm_share').is(':checked'),
         });
 
         var $optBox = this.$('.o_video_dialog_options');
@@ -1222,8 +1226,9 @@ var VideoWidget = MediaWidget.extend({
         // Individually show / hide options base on the video provider
         $optBox.find('div.o_' + query.type + '_option').removeClass('d-none');
 
-        // Hide the entire options box if no options are available
-        $optBox.toggleClass('d-none', $optBox.find('div:not(.d-none)').length === 0);
+        // Hide the entire options box if no options are available or if the
+        // dialog is opened for a background-video
+        $optBox.toggleClass('d-none', this.isForBgVideo || $optBox.find('div:not(.d-none)').length === 0);
 
         if (query.type === 'yt') {
             // Youtube only: If 'hide controls' is checked, hide 'fullscreen'
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
index 84dd8e7f650..6d1f2b642c7 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
@@ -76,7 +76,7 @@ var MediaDialog = Dialog.extend({
             this.activeWidget = this.imageWidget;
         } else if (this.documentWidget && $media.is('a.o_image')) {
             this.activeWidget = this.documentWidget;
-        } else if (this.videoWidget && $media.hasClass('media_iframe_video')) {
+        } else if (this.videoWidget && $media.is('.media_iframe_video, .o_bg_video_iframe')) {
             this.activeWidget = this.videoWidget;
         } else if (this.iconWidget && $media.is('span, i')) {
             this.activeWidget = this.iconWidget;
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index b9b29a8984e..bcf3a480a93 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -383,7 +383,7 @@
                     <textarea class="form-control" id="o_video_text" placeholder="Copy-paste your URL or embed code here"/>
                 </div>
                 <div class="text-right">
-                    <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Instagram</i></b>, <b><i>Vine.co</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
+                    <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
                 </div>
                 <div class="o_video_dialog_options d-none mt-4">
                     <div class="o_yt_option o_vim_option o_dm_option">