1 files changed, 108 insertions, 5 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index baa1d8c5a7c..7f60a976a35 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -29,6 +29,102 @@ options.Class.include({
     },
 });
 
+options.registry.background.include({
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _getEditableMedia: function () {
+        if (!this._hasBgvideo()) {
+            return this._super(...arguments);
+        }
+        return this.$('.o_bg_video_iframe')[0];
+    },
+    /**
+     * @override
+     */
+    _getMediaDialogOptions: function () {
+        return _.extend(this._super(...arguments), {
+            // For now, disable the possibility to have a parallax video bg
+            noVideos: this.$target.is('.parallax, .s_parallax_bg'),
+            isForBgVideo: true,
+        });
+    },
+    /**
+     * @override
+     */
+    _setActive: function () {
+        this._super(...arguments);
+        if (this._hasBgvideo()) {
+            this.$el.find('[data-choose-image]').addClass('active');
+        }
+    },
+    /**
+     * Updates the background video used by the snippet.
+     *
+     * @private
+     * @see this.selectClass for parameters
+     */
+    _setBgVideo: function (previewMode, value) {
+        this.$('> .o_bg_video_container').toggleClass('d-none', previewMode === true);
+
+        if (previewMode !== false) {
+            return;
+        }
+
+        var target = this.$target[0];
+        target.classList.toggle('o_background_video', !!(value && value.length));
+        if (value && value.length) {
+            target.dataset.bgVideoSrc = value;
+        } else {
+            delete target.dataset.bgVideoSrc;
+        }
+        this._refreshPublicWidgets();
+        this._setActive();
+    },
+    /**
+     * Returns whether the current target has a background video or not.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _hasBgvideo: function () {
+        return this.$target[0].classList.contains('o_background_video');
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+     _onBackgroundColorUpdate: function (ev, previewMode) {
+        var ret = this._super(...arguments);
+        if (ret) {
+            this._setBgVideo(previewMode);
+        }
+        return ret;
+    },
+    /**
+     * @override
+     */
+    _onSaveMediaDialog: function (data) {
+        if (!data.bgVideoSrc) {
+            this._setBgVideo(false);
+            this._super(...arguments);
+            return;
+        }
+        // if the user chose a video, only add the video without removing the
+        // background
+        this._setBgVideo(false, data.bgVideoSrc);
+    },
+});
+
 options.registry.menu_data = options.Class.extend({
     xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
 
@@ -1014,6 +1110,7 @@ options.registry.gallery = options.Class.extend({
             }
             self._reset();
             self.trigger_up('cover_update');
+            this._setActive();
         });
         dialog.open();
     },
@@ -1170,11 +1267,12 @@ options.registry.gallery = options.Class.extend({
         var urls = _.map(this._getImages(), function (img) {
             return $(img).attr('src');
         });
+        var currentInterval = this.$target.find('.carousel:first').attr('data-interval');
         var params = {
             srcs : urls,
             index: 0,
             title: "",
-            interval : this.$target.data('interval') || false,
+            interval : currentInterval || this.$target.data('interval') || 0,
             id: 'slideshow_' + new Date().getTime(),
             userStyle: imgStyle,
         },
@@ -1312,7 +1410,7 @@ options.registry.gallery = options.Class.extend({
             .data('mode');
 
         var carousel = this.$target[0].querySelector('.carousel');
-        var activeInterval = carousel ? carousel.dataset.interval : undefined;
+        var activeInterval = carousel ? (carousel.dataset.interval || 0) : undefined;
         var $intervalOptions = this.$el.find('[data-interval]');
         $intervalOptions.removeClass('active')
             .filter('[data-interval="' + activeInterval + '"]')
@@ -1334,14 +1432,19 @@ options.registry.gallery = options.Class.extend({
         var $stylingOptions = this.$el.find('[data-styling]');
         $stylingOptions.removeClass('active');
         var img = this.$target[0].querySelector('img');
+        var activeStyleSelectors = [];
         if (img) {
-            var activeStyleSelectors = [];
             for (const className of img.classList) {
                 activeStyleSelectors.push('[data-styling="' + className + '"]');
             }
-            $stylingOptions.filter(activeStyleSelectors.join(', '))
-                .addClass('active');
         }
+        var $toEnable = activeStyleSelectors.length
+            ? $stylingOptions.filter(activeStyleSelectors.join(', '))
+            : null;
+        if (!$toEnable || !$toEnable.length) {
+            $toEnable = $stylingOptions.first();
+        }
+        $toEnable.addClass('active');
     },
 });