[FIX] website: fix usability of the popup snippet

There were some usability issues with the popup when a video was
inserted inside it:
- The video would be playing before the popup is shown and the user
  would thus miss part of that video (potentially a lot, depending of
  the set popup delay).
- The video would continue to play in the background after closing the
  popup.

task-2251203

closes odoo/odoo#63634

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Siddarth Gajjar <sga@odoo.com>

addons/website/static/src/snippets/s_popup/000.js

@@ -10,6 +10,7 @@ const PopupWidget = publicWidget.Widget.extend({
     events: {
         'click .js_close_popup': '_onCloseClick',
         'hide.bs.modal': '_onHideModal',
+        'show.bs.modal': '_onShowModal',
     },
 
     /**
@@ -92,6 +93,19 @@ const PopupWidget = publicWidget.Widget.extend({
         const nbDays = this.$el.find('.modal').data('consentsDuration');
         utils.set_cookie(this.$el.attr('id'), true, nbDays * 24 * 60 * 60);
         this._popupAlreadyShown = true;
+
+        this.$target.find('.media_iframe_video iframe').each((i, iframe) => {
+            iframe.src = '';
+        });
+    },
+    /**
+     * @private
+     */
+    _onShowModal() {
+        this.el.querySelectorAll('.media_iframe_video').forEach(media => {
+            const iframe = media.querySelector('iframe');
+            iframe.src = media.dataset.oeExpression || media.dataset.src; // TODO still oeExpression to remove someday
+        });
     },
 });
 

addons/website/static/src/snippets/s_popup/options.js

@@ -17,10 +17,21 @@ options.registry.SnippetPopup = options.Class.extend({
         });
         this.$target.on('shown.bs.modal.SnippetPopup', () => {
             this.trigger_up('snippet_option_visibility_update', {show: true});
+            // TODO duplicated code from the popup public widget, this should
+            // be moved to a *video* public widget and be reviewed in master
+            this.$target[0].querySelectorAll('.media_iframe_video').forEach(media => {
+                const iframe = media.querySelector('iframe');
+                iframe.src = media.dataset.oeExpression || media.dataset.src; // TODO still oeExpression to remove someday
+            });
         });
         this.$target.on('hidden.bs.modal.SnippetPopup', () => {
             this.trigger_up('snippet_option_visibility_update', {show: false});
+            this._removeIframeSrc();
         });
+        // The video might be playing before entering edit mode (possibly with
+        // sound). Stop the video, as the user can't do it (no button on video
+        // in edit mode).
+        this._removeIframeSrc();
         return this._super(...arguments);
     },
     /**
@@ -28,6 +39,9 @@ options.registry.SnippetPopup = options.Class.extend({
      */
     destroy: function () {
         this._super(...arguments);
+        // The video should not start before the modal opens, remove it from the
+        // DOM. It will be added back on modal open to start the video.
+        this._removeIframeSrc();
         this.$target.off('.SnippetPopup');
     },
     /**
@@ -110,5 +124,16 @@ options.registry.SnippetPopup = options.Class.extend({
         }
         return this._super(...arguments);
     },
+    /**
+     * Removes the iframe `src` attribute (a copy of the src is already on the
+     * parent `oe-expression` attribute).
+     *
+     * @private
+     */
+    _removeIframeSrc() {
+        this.$target.find('.media_iframe_video iframe').each((i, iframe) => {
+            iframe.src = '';
+        });
+    },
 });
 });