[FIX] website[_slides]: don't autoplay videos in fallback iframe

Steps to reproduce:

  - Log in as admin
  - Install `eLearning` module
  - Create a course and add a youtube video as a lesson
  - Publish the course
  - Go to the website and click on the course
  - Enable `Editor` mode (top left corner)
  - Click on lesson to open it in fullscreen
  - Click `Back to course` button

Issue:

  Video is playing in the background.
  Same issue occure with video snippet in the website editor (by default
  video is mute but still playing in the background).

Cause:

  When editor mode is enabled, there is a fallback iframe that clone the
  content of the current page that we leave into it.

  Since the youtube video has `autoplay=1` in the URL, it will
  automatically start in the fallback iframe.

Solution:

  For regular website pages, remove the `autoplay` param from all
  media video iframes urls (targeting all `div.iframe` that have a class
  `media_iframe_video`).

  For eLearning, override the `WebsitePreview._cleanIframeFallback`
  method to remove the `autoplay` param from youtube videos URLs.

opw-3226002

closes odoo/odoo#121475

X-original-commit: ad78585cd514f5ff16647572d34937c18a112529
Signed-off-by: Romain Derie (rde) <rde@odoo.com>

addons/website/static/src/client_actions/website_preview/website_preview.js

@@ -419,6 +419,21 @@ export class WebsitePreview extends Component {
         });
     }
 
+    /**
+     * This method is called when the page is unloaded to clean
+     * the iframefallback content.
+     */
+    _cleanIframeFallback() {
+        // Remove autoplay in all media video iframes urls so videos are not
+        // playing in the background
+        const iframesEl = this.iframefallback.el.contentDocument.querySelectorAll(".media_iframe_video iframe");
+        for (const iframeEl of iframesEl) {
+            const url = new URL(iframeEl.src);
+            url.searchParams.delete('autoplay');
+            iframeEl.src = url.toString();
+        }
+    }
+
     _onPageUnload() {
         this.iframe.el.setAttribute('is-ready', 'false');
         // Before leaving the iframe, its content is replicated on an
@@ -431,6 +446,7 @@ export class WebsitePreview extends Component {
             this.iframefallback.el.contentDocument.body.replaceWith(this.iframe.el.contentDocument.body.cloneNode(true));
             this.iframefallback.el.classList.remove('d-none');
             $().getScrollingElement(this.iframefallback.el.contentDocument)[0].scrollTop = $().getScrollingElement(this.iframe.el.contentDocument)[0].scrollTop;
+            this._cleanIframeFallback();
         }
     }
     _onPageHide() {

addons/website_slides/__manifest__.py

@@ -72,6 +72,7 @@ Featuring
     'assets': {
         'web.assets_backend': [
             'website_slides/static/src/activity/**/*',
+            'website_slides/static/src/client_actions/website_preview/website_preview.js',
             'website_slides/static/src/slide_category_one2many_field.js',
             'website_slides/static/src/slide_category_list_renderer.js',
             'website_slides/static/src/scss/slide_views.scss',

addons/website_slides/static/src/client_actions/website_preview/website_preview.js

@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { patch } from 'web.utils';
+import { WebsitePreview } from '@website/client_actions/website_preview/website_preview';
+
+patch(WebsitePreview.prototype, 'website_slides_website_preview', {
+    /**
+     * @override
+     */
+    _cleanIframeFallback() {
+        // Remove autoplay in all youtube videos urls so videos are not playing
+        // in the background
+        const playersEl = this.iframefallback.el.contentDocument.querySelectorAll('[id^=youtube-player]');
+        for (const playerEl of playersEl) {
+            const url = new URL(playerEl.src);
+            url.searchParams.delete('autoplay');
+            playerEl.src = url.toString();
+        }
+        return this._super(...arguments);
+    }
+});