From 0e7d74a5e9b7bb3495228355f57084c692b4b6f4 Mon Sep 17 00:00:00 2001
From: Romaric MOYEUVRE <romo@odoo.com>
Date: Mon, 9 Dec 2024 15:39:33 +0100
Subject: [PATCH] MediaVideo, BackgroundVideo

---
 addons/website/static/src/core/video_utils.js |  45 +++
 .../interactions/video/background_video.js    | 112 +++++++
 .../src/interactions/video/media_video.js     |  91 ++++++
 .../src/js/content/snippets.animation.js      | 306 ------------------
 4 files changed, 248 insertions(+), 306 deletions(-)
 create mode 100644 addons/website/static/src/core/video_utils.js
 create mode 100644 addons/website/static/src/interactions/video/background_video.js
 create mode 100644 addons/website/static/src/interactions/video/media_video.js

diff --git a/addons/website/static/src/core/video_utils.js b/addons/website/static/src/core/video_utils.js
new file mode 100644
index 0000000000000..e48720a34073a
--- /dev/null
+++ b/addons/website/static/src/core/video_utils.js
@@ -0,0 +1,45 @@
+import { loadJS } from "@web/core/assets";
+import { hasTouch } from "@web/core/browser/feature_detection";
+import { SIZES, utils as uiUtils } from "@web/core/ui/ui_service";
+
+/**
+ * Takes care of any necessary setup for autoplaying video. In practice,
+ * this method will load the youtube iframe API for mobile environments
+ * because mobile environments don't support the youtube autoplay param
+ * passed in the url.
+ *
+ * @param {string} src
+ * @param {boolean} needCookiesApproval
+ */
+export function setupAutoplay(src, needCookiesApproval = false) {
+    const isYoutubeVideo = src.indexOf('youtube') >= 0;
+    const isMobileEnv = uiUtils.getSize() <= SIZES.LG && hasTouch();
+
+    if (isYoutubeVideo && isMobileEnv && !window.YT && !needCookiesApproval) {
+        const oldOnYoutubeIframeAPIReady = window.onYouTubeIframeAPIReady;
+        const promise = new Promise(resolve => {
+            window.onYouTubeIframeAPIReady = () => {
+                if (oldOnYoutubeIframeAPIReady) {
+                    oldOnYoutubeIframeAPIReady();
+                }
+                return resolve();
+            };
+        });
+        loadJS('https://www.youtube.com/iframe_api');
+        return promise;
+    }
+    return null;
+}
+
+/**
+ * @param {HTMLIframeElement} iframeEl - the iframe containing the video player
+ */
+export function triggerAutoplay(iframeEl) {
+    // YouTube does not allow to auto-play video in mobile devices, so we
+    // have to play the video manually.
+    new window.YT.Player(iframeEl, {
+        events: {
+            onReady: ev => ev.target.playVideo(),
+        }
+    });
+}
diff --git a/addons/website/static/src/interactions/video/background_video.js b/addons/website/static/src/interactions/video/background_video.js
new file mode 100644
index 0000000000000..072c9cb848377
--- /dev/null
+++ b/addons/website/static/src/interactions/video/background_video.js
@@ -0,0 +1,112 @@
+import { Interaction } from "@website/core/interaction";
+import { registry } from "@web/core/registry";
+
+import { _t } from "@web/core/l10n/translation";
+import { uniqueId } from "@web/core/utils/functions";
+import { renderToElement } from "@web/core/utils/render";
+
+import { setupAutoplay, triggerAutoplay } from "../../core/video_utils";
+
+class BackgroundVideo extends Interaction {
+    static selector = ".o_background_video";
+    dynamicSelectors = {
+        ...this.dynamicSelectors,
+        _dropdown: () => this.el.closest(".dropdown-menu").parentElement,
+        _modal: () => this.el.closest("modal"),
+    }
+    dynamicContent = {
+        _document: {
+            "t-on-optionalCookiesAccepted": () => this.iframeEl.src = this.videoSrc,
+        },
+        _window: {
+            "t-on-resize": this.throttledForAnimation(() => this.adjustIframe()),
+        },
+        _dropdown: {
+            "t-on-shown.bs.dropdown": this.throttledForAnimation(() => this.adjustIframe()),
+        },
+        _modal: {
+            "t-on-show.bs.modal": () => this.hideVideoContainer = true,
+            "t-on-shown.bs.modal": () => this.hideVideoContainer = false,
+        },
+        ".o_bg_video_container": {
+            "t-att-class": () => ({
+                "d-none": this.hideVideoContainer,
+            }),
+        },
+    }
+
+    setup() {
+        this.hideVideoContainer = false;
+        this.videoSrc = this.el.dataset.bgVideoSrc;
+        this.iframeID = uniqueId("o_bg_video_iframe_");
+    }
+
+    start() {
+        const promise = setupAutoplay(this.videoSrc);
+        if (promise) {
+            this.videoSrc += "&enablejsapi=1";
+            this.waitFor(promise).then(() => this.appendBgVideo());
+        }
+    }
+
+    adjustIframe() {
+        if (!this.iframeEl) {
+            return;
+        }
+
+        this.iframeEl.classList.remove("show");
+
+        var wrapperWidth = this.el.innerWidth;
+        var wrapperHeight = this.el.innerHeight;
+        var relativeRatio = (wrapperWidth / wrapperHeight) / (16 / 9);
+
+        if (relativeRatio >= 1.0) {
+            this.iframeEl.style.width = "100%";
+            this.iframeEl.style.height = (relativeRatio * 100) + "%";
+            this.iframeEl.style.insetInlineStart = "0";
+            this.iframeEl.style.insetBlockStart = (-(relativeRatio - 1.0) / 2 * 100) + "%";
+        } else {
+            this.iframeEl.style.width = ((1 / relativeRatio) * 100) + "%";
+            this.iframeEl.style.height = "100%";
+            this.iframeEl.style.insetInlineStart = (-((1 / relativeRatio) - 1.0) / 2 * 100) + "%";
+            this.iframeEl.style.insetBlockStart = "0";
+        }
+
+        void this.iframeEl.offsetWidth; // Force style addition
+        this.iframeEl.classList.add("show");
+    }
+
+    appendBgVideo() {
+        const allowedCookies = !this.el.dataset.needCookiesApproval;
+
+        const oldContainer = this.bgVideoContainer || this.querySelector(":scope > .o_bg_video_container");
+        this.bgVideoContainer = renderToElement("website.background.video", {
+            videoSrc: allowedCookies ? this.videoSrc : "about:blank",
+            iframeID: this.iframeID,
+        });
+
+        this.iframeEl = this.bgVideoContainer.querySelector(".o_bg_video_iframe");
+        this.addListener(this.iframe, "load", () => {
+            this.bgVideoContainer.find(".o_bg_video_loading").remove();
+            // When there is a "slide in (left or right) animation" element, we
+            // need to adjust the iframe size once it has been loaded, otherwise
+            // an horizontal scrollbar may appear.
+            this.adjustIframe();
+        });
+        this.insert(this.bgVideoContainer, this.el, "afterbegin")
+        oldContainer.remove();
+
+        this.adjustIframe();
+        triggerAutoplay(this.iframeEl);
+    }
+}
+
+registry
+    .category("website.active_elements")
+    .add("website.background_video", BackgroundVideo);
+
+registry
+    .category("website.editable_active_elements_builders")
+    .add("website.background_video", {
+        Interaction: BackgroundVideo,
+    });
diff --git a/addons/website/static/src/interactions/video/media_video.js b/addons/website/static/src/interactions/video/media_video.js
new file mode 100644
index 0000000000000..32f18454e83b9
--- /dev/null
+++ b/addons/website/static/src/interactions/video/media_video.js
@@ -0,0 +1,91 @@
+import { Interaction } from "@website/core/interaction";
+import { registry } from "@web/core/registry";
+
+import { _t } from "@web/core/l10n/translation";
+import { escape } from "@web/core/utils/strings";
+
+import { setupAutoplay, triggerAutoplay } from "../../core/video_utils";
+
+class MediaVideo extends Interaction {
+    static selector = ".media_iframe_video";
+
+    setup() {
+        if (this.el.dataset.needCookiesApproval) {
+            this.sizeContainerEl = this.el.querySelector(":scope > .media_iframe_video_size");
+            this.sizeContainerEl.classList.add("d-none");
+            this.addListener(document, "optionalCookiesAccepted", this.sizeContainerEl.classList.remove("d-none"))
+            this.registerCleanup(() => this.sizeContainerEl.classList.remove("d-none"));
+        }
+    }
+
+    start() {
+        let iframeEl = this.el.querySelector(':scope > iframe');
+
+        // The following code is only there to ensure compatibility with
+        // videos added before bug fixes or new Odoo versions where the
+        // <iframe/> element is properly saved.
+        if (!iframeEl) {
+            iframeEl = this.generateIframe();
+        }
+
+        if (!iframeEl?.getAttribute('src')) {
+            const promise = setupAutoplay(iframeEl.getAttribute('src'), this.el.dataset.needCookiesApproval);
+            if (promise) {
+                this.waitFor(promise).then(() => triggerAutoplay(iframeEl));
+            }
+        }
+    }
+
+    generateIframe() {
+        // Bug fix / compatibility: empty the <div/> element as all information
+        // to rebuild the iframe should have been saved on the <div/> element
+        this.el.innerHTML = "";
+
+        // Add extra content for size / edition
+        const div1 = document.createElement("div");
+        div1.classList.add("css_editable_mode_display");
+        div1.innerHTML = "&nbsp;";
+        const div2 = document.createElement("div");
+        div2.classList.add("media_iframe_video_size");
+        div2.innerHTML = "&nbsp;";
+        this.el.appendChild(div1);
+        this.el.appendChild(div2);
+
+        // Rebuild the iframe. Depending on version / compatibility / instance,
+        // the src is saved in the 'data-src' attribute or the
+        // 'data-oe-expression' one (the latter is used as a workaround in 10.0
+        // system but should obviously be reviewed in master).
+
+        let src = escape(this.el.getAttribute('oe-expression') || this.el.getAttribute('src'));
+        // Validate the src to only accept supported domains we can trust
+
+        let m = src.match(/^(?:https?:)?\/\/([^/?#]+)/);
+        if (!m) {
+            return;
+        }
+
+        let domain = m[1].replace(/^www\./, '');
+        const supportedDomains = [
+            "youtu.be", "youtube.com", "youtube-nocookie.com",
+            "instagram.com",
+            "player.vimeo.com", "vimeo.com",
+            "dailymotion.com",
+            "player.youku.com", "youku.com",
+        ];
+        if (!supportedDomains.includes(domain)) {
+            return;
+        }
+
+        const iframeEl = document.createElement("iframe")
+        iframeEl.frameborder = "0";
+        iframeEl.allowFullscreen = "allowfullscreen";
+        iframeEl.ariaLabel = _t("Media video");
+        this.el.appendChild(iframeEl);
+        this.services.website_cookies.manageIframeSrc(this.el, src);
+        return iframeEl;
+    }
+}
+
+registry
+    .category("website.active_elements")
+    .add("website.media_video", MediaVideo);
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 5b21c256d4dab..e92f4a1a45160 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -454,312 +454,6 @@ window.SelectorEngine.find = function (...args) {
     }
 };
 
-const MobileYoutubeAutoplayMixin = {
-    /**
-     * Takes care of any necessary setup for autoplaying video. In practice,
-     * this method will load the youtube iframe API for mobile environments
-     * because mobile environments don't support the youtube autoplay param
-     * passed in the url.
-     *
-     * @private
-     * @param {string} src - The source url of the video
-     */
-    _setupAutoplay: function (src) {
-        let promise = Promise.resolve();
-
-        this.isYoutubeVideo = src.indexOf('youtube') >= 0;
-        this.isMobileEnv = uiUtils.getSize() <= SIZES.LG && hasTouch();
-
-        if (this.isYoutubeVideo && this.isMobileEnv && !window.YT && !this.el.dataset.needCookiesApproval) {
-            const oldOnYoutubeIframeAPIReady = window.onYouTubeIframeAPIReady;
-            promise = new Promise(resolve => {
-                window.onYouTubeIframeAPIReady = () => {
-                    if (oldOnYoutubeIframeAPIReady) {
-                        oldOnYoutubeIframeAPIReady();
-                    }
-                    return resolve();
-                };
-            });
-            loadJS('https://www.youtube.com/iframe_api');
-        }
-
-        return promise;
-    },
-    /**
-     * @private
-     * @param {DOMElement} iframeEl - the iframe containing the video player
-     */
-    _triggerAutoplay: function (iframeEl) {
-        // YouTube does not allow to auto-play video in mobile devices, so we
-        // have to play the video manually.
-        if (this.isMobileEnv && this.isYoutubeVideo && !this.el.dataset.needCookiesApproval) {
-            new window.YT.Player(iframeEl, {
-                events: {
-                    onReady: ev => ev.target.playVideo(),
-                }
-            });
-        }
-    },
-};
-
-registry.mediaVideo = publicWidget.Widget.extend(
-    MobileYoutubeAutoplayMixin, ObservingCookieWidgetMixin, {
-    selector: '.media_iframe_video',
-
-    /**
-     * @override
-     */
-    start: function () {
-        // TODO: this code should be refactored to make more sense and be better
-        // integrated with Odoo (this refactoring should be done in master).
-
-        const proms = [this._super.apply(this, arguments)];
-        let iframeEl = this.el.querySelector(':scope > iframe');
-
-        // The following code is only there to ensure compatibility with
-        // videos added before bug fixes or new Odoo versions where the
-        // <iframe/> element is properly saved.
-        if (!iframeEl) {
-            iframeEl = this._generateIframe();
-        }
-
-        if (this.el.dataset.needCookiesApproval) {
-            const sizeContainerEl = this.el.querySelector(":scope > .media_iframe_video_size");
-            sizeContainerEl.classList.add("d-none");
-            this._showSizeContainerEl = () => {
-                sizeContainerEl.classList.remove("d-none");
-            };
-            document.addEventListener(
-                "optionalCookiesAccepted", this._showSizeContainerEl, { once: true }
-            );
-        }
-
-        // We don't want to cause an error that would prevent entering edit mode
-        // if there is an iframe that doesn't have a src (this was possible for
-        // a while with the media dialog).
-        if (!iframeEl || !iframeEl.getAttribute('src')) {
-            // Something went wrong: no iframe is present in the DOM and the
-            // widget was unable to create one on the fly.
-            return Promise.all(proms);
-        }
-
-        proms.push(this._setupAutoplay(iframeEl.getAttribute('src')));
-        return Promise.all(proms).then(() => {
-            this._triggerAutoplay(iframeEl);
-        });
-    },
-    /**
-     * @override
-     */
-    destroy() {
-        if (this._showSizeContainerEl) {
-            document.removeEventListener("optionalCookiesAccepted", this._showSizeContainerEl);
-            this._showSizeContainerEl();
-        }
-        return this._super(...arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _generateIframe: function () {
-        // Bug fix / compatibility: empty the <div/> element as all information
-        // to rebuild the iframe should have been saved on the <div/> element
-        this.$el.empty();
-
-        // Add extra content for size / edition
-        this.$el.append(
-            '<div class="css_editable_mode_display">&nbsp;</div>' +
-            '<div class="media_iframe_video_size">&nbsp;</div>'
-        );
-
-        // Rebuild the iframe. Depending on version / compatibility / instance,
-        // the src is saved in the 'data-src' attribute or the
-        // 'data-oe-expression' one (the latter is used as a workaround in 10.0
-        // system but should obviously be reviewed in master).
-        var src = escape(this.$el.data('oe-expression') || this.$el.data('src'));
-        // Validate the src to only accept supported domains we can trust
-        var m = src.match(/^(?:https?:)?\/\/([^/?#]+)/);
-        if (!m) {
-            // Unsupported protocol or wrong URL format, don't inject iframe
-            return;
-        }
-        var domain = m[1].replace(/^www\./, '');
-        const supportedDomains = [
-            "youtu.be", "youtube.com", "youtube-nocookie.com",
-            "instagram.com",
-            "player.vimeo.com", "vimeo.com",
-            "dailymotion.com",
-            "player.youku.com", "youku.com",
-        ];
-        if (!supportedDomains.includes(domain)) {
-            // Unsupported domain, don't inject iframe
-            return;
-        }
-
-        const iframeEl = $('<iframe/>', {
-            frameborder: '0',
-            allowfullscreen: 'allowfullscreen',
-            "aria-label": _t("Media video"),
-        })[0];
-        this.$el.append(iframeEl);
-        this._manageIframeSrc(this.el, src);
-        return iframeEl;
-    },
-});
-
-registry.backgroundVideo = publicWidget.Widget.extend(MobileYoutubeAutoplayMixin, {
-    selector: '.o_background_video',
-    disabledInEditableMode: false,
-
-    /**
-     * @override
-     */
-    start: function () {
-        var proms = [this._super(...arguments)];
-
-        this.videoSrc = this.el.dataset.bgVideoSrc;
-        this.iframeID = uniqueId("o_bg_video_iframe_");
-        proms.push(this._setupAutoplay(this.videoSrc));
-        if (this.isYoutubeVideo && this.isMobileEnv && !this.videoSrc.includes('enablejsapi=1')) {
-            // Compatibility: when choosing an autoplay youtube video via the
-            // media manager, the API was not automatically enabled before but
-            // only enabled here in the case of background videos.
-            // TODO migrate those old cases so this code can be removed?
-            this.videoSrc += '&enablejsapi=1';
-        }
-
-        this.throttledUpdate = throttleForAnimation(() => this._adjustIframe());
-
-        var $dropdownMenu = this.$el.closest('.dropdown-menu');
-        if ($dropdownMenu.length) {
-            this.$dropdownParent = $dropdownMenu.parent();
-            this.$dropdownParent.on("shown.bs.dropdown.backgroundVideo", this.throttledUpdate);
-        }
-
-        $(window).on("resize." + this.iframeID, this.throttledUpdate);
-
-        const $modal = this.$el.closest('.modal');
-        if ($modal.length) {
-            $modal.on('show.bs.modal', () => {
-                const videoContainerEl = this.el.querySelector('.o_bg_video_container');
-                videoContainerEl.classList.add('d-none');
-            });
-            $modal.on('shown.bs.modal', () => {
-                this._adjustIframe();
-                const videoContainerEl = this.el.querySelector('.o_bg_video_container');
-                videoContainerEl.classList.remove('d-none');
-            });
-        }
-        return Promise.all(proms).then(() => this._appendBgVideo());
-    },
-    /**
-     * @override
-     */
-    destroy: function () {
-        this._super.apply(this, arguments);
-
-        if (this.$dropdownParent) {
-            this.$dropdownParent.off('.backgroundVideo');
-        }
-
-        $(window).off('resize.' + this.iframeID);
-
-        this.throttledUpdate.cancel();
-
-        if (this.$bgVideoContainer) {
-            this.$bgVideoContainer.remove();
-        }
-        document.removeEventListener(
-            "optionalCookiesAccepted",
-            this.__onEnableVideoPostCookiesAccepted
-        );
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Adjusts iframe sizes and position so that it fills the container and so
-     * that it is centered in it.
-     *
-     * @private
-     */
-    _adjustIframe: function () {
-        if (!this.$iframe) {
-            return;
-        }
-
-        this.$iframe.removeClass('show');
-
-        // Adjust the iframe
-        var wrapperWidth = this.$el.innerWidth();
-        var wrapperHeight = this.$el.innerHeight();
-        var relativeRatio = (wrapperWidth / wrapperHeight) / (16 / 9);
-        var style = {};
-        if (relativeRatio >= 1.0) {
-            style['width'] = '100%';
-            style['height'] = (relativeRatio * 100) + '%';
-            style['inset-inline-start'] = '0';
-            style['inset-block-start'] = (-(relativeRatio - 1.0) / 2 * 100) + '%';
-        } else {
-            style['width'] = ((1 / relativeRatio) * 100) + '%';
-            style['height'] = '100%';
-            style['inset-inline-start'] = (-((1 / relativeRatio) - 1.0) / 2 * 100) + '%';
-            style['inset-block-start'] = '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.
-     *
-     * @private
-     */
-    _appendBgVideo: function () {
-        const allowedCookies = !this.el.dataset.needCookiesApproval;
-
-        var $oldContainer = this.$bgVideoContainer || this.$('> .o_bg_video_container');
-        this.$bgVideoContainer = $(renderToElement('website.background.video', {
-            videoSrc: allowedCookies ? this.videoSrc : "about:blank",
-            iframeID: this.iframeID,
-        }));
-        this.$iframe = this.$bgVideoContainer.find('.o_bg_video_iframe');
-        this.$iframe.one('load', () => {
-            this.$bgVideoContainer.find('.o_bg_video_loading').remove();
-            // When there is a "slide in (left or right) animation" element, we
-            // need to adjust the iframe size once it has been loaded, otherwise
-            // an horizontal scrollbar may appear.
-            this._adjustIframe();
-        });
-        this.$bgVideoContainer.prependTo(this.$el);
-        $oldContainer.remove();
-
-        if (!allowedCookies) {
-            // We don't add the optional cookies warning for background videos
-            // so that the fallback message doesn't appear behind the content.
-            this.__onEnableVideoPostCookiesAccepted = () => {
-                this.$iframe[0].src = this.videoSrc;
-            };
-            document.addEventListener(
-                "optionalCookiesAccepted",
-                this.__onEnableVideoPostCookiesAccepted,
-                { once: true }
-            );
-        }
-
-        this._adjustIframe();
-        this._triggerAutoplay(this.$iframe[0]);
-    },
-});
-
 export default {
     Widget: publicWidget.Widget,
     Animation: Animation,