[FIX] website: make background videos in mega menus work

When a background video was used in a mega menu, it was only working in
edit mode. Indeed, the background video size is computed on page load
(and on window resize) but as the video is inside a hidden dropdown
menu in this case, the size cannot be properly computed.

This commit fixes the issue by recomputing the video size on dropdown
menu opening.

task-2080590

closes odoo/odoo#38314

X-original-commit: 66ec1c19b63fe26e559ed2d8d7359df974ade789
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 18 insertions, 1 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 9a7b4ee8c14..c303d0691d3 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -710,7 +710,15 @@ registry.backgroundVideo = publicWidget.Widget.extend({
             }
         }
 
-        $(window).on('resize.' + this.iframeID, _.throttle(() => this._adjustIframe(), 50));
+        var throttledUpdate = _.throttle(() => this._adjustIframe(), 50);
+
+        var $dropdownMenu = this.$el.closest('.dropdown-menu');
+        if ($dropdownMenu.length) {
+            this.$dropdownParent = $dropdownMenu.parent();
+            this.$dropdownParent.on('shown.bs.dropdown.backgroundVideo', throttledUpdate);
+        }
+
+        $(window).on('resize.' + this.iframeID, throttledUpdate);
 
         return Promise.all(proms).then(() => this._appendBgVideo());
     },
@@ -720,6 +728,10 @@ registry.backgroundVideo = publicWidget.Widget.extend({
     destroy: function () {
         this._super.apply(this, arguments);
 
+        if (this.$dropdownParent) {
+            this.$dropdownParent.off('.backgroundVideo');
+        }
+
         $(window).off('resize.' + this.iframeID);
 
         if (this.$bgVideoContainer) {
@@ -738,6 +750,8 @@ registry.backgroundVideo = publicWidget.Widget.extend({
      * @private
      */
     _adjustIframe: function () {
+        this.$iframe.removeClass('show');
+
         // Adjust the iframe
         var wrapperWidth = this.$target.innerWidth();
         var wrapperHeight = this.$target.innerHeight();
@@ -755,6 +769,9 @@ registry.backgroundVideo = publicWidget.Widget.extend({
             style['top'] = '0';
         }
         this.$iframe.css(style);
+
+        void this.$iframe[0].offsetWidth; // Force style addition
+        this.$iframe.addClass('show');
     },
     /**
      * Append background video related elements to the target.