From c98d360726c9733904ef18f49f6a3684f24bb0ee Mon Sep 17 00:00:00 2001
From: snt <snt@esgaroth.criptomart.net>
Date: Sun, 29 Mar 2026 17:48:13 +0200
Subject: [PATCH] Keep active multimedia player visible in product list

---
 website_sale_product_library/__manifest__.py  |  1 +
 .../static/src/js/multimedia_hover_player.js  | 40 +++++++++++++++++++
 .../static/src/scss/custom.scss               |  4 +-
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 website_sale_product_library/static/src/js/multimedia_hover_player.js

diff --git a/website_sale_product_library/__manifest__.py b/website_sale_product_library/__manifest__.py
index 1219a10..e7afb7f 100644
--- a/website_sale_product_library/__manifest__.py
+++ b/website_sale_product_library/__manifest__.py
@@ -21,6 +21,7 @@ Modifica la tienda online con los campos de product_library.
     "data": ["views/website_sale_views.xml"],
     "assets": {
         "web.assets_frontend": [
+            "website_sale_product_library/static/src/js/multimedia_hover_player.js",
             "website_sale_product_library/static/src/scss/custom.scss",
         ],
     },
diff --git a/website_sale_product_library/static/src/js/multimedia_hover_player.js b/website_sale_product_library/static/src/js/multimedia_hover_player.js
new file mode 100644
index 0000000..a2a0647
--- /dev/null
+++ b/website_sale_product_library/static/src/js/multimedia_hover_player.js
@@ -0,0 +1,40 @@
+/** @odoo-module */
+
+(function () {
+    const ACTIVE_CLASS = 'o_multimedia_player_active';
+
+    function getProductCard(el) {
+        return el && el.closest('.oe_product_cart');
+    }
+
+    function activateCard(card) {
+        if (!card) {
+            return;
+        }
+
+        const cards = document.querySelectorAll('.oe_product_cart.' + ACTIVE_CLASS);
+        cards.forEach((c) => {
+            if (c !== card) {
+                c.classList.remove(ACTIVE_CLASS);
+            }
+        });
+
+        card.classList.add(ACTIVE_CLASS);
+    }
+
+    document.addEventListener('click', (ev) => {
+        const player = ev.target.closest('.o_multimedia_hover_player');
+        if (!player) {
+            return;
+        }
+        activateCard(getProductCard(player));
+    });
+
+    document.addEventListener('focusin', (ev) => {
+        const iframe = ev.target.closest('.o_multimedia_hover_player iframe');
+        if (!iframe) {
+            return;
+        }
+        activateCard(getProductCard(iframe));
+    });
+})();
diff --git a/website_sale_product_library/static/src/scss/custom.scss b/website_sale_product_library/static/src/scss/custom.scss
index 985ea53..8334aa0 100644
--- a/website_sale_product_library/static/src/scss/custom.scss
+++ b/website_sale_product_library/static/src/scss/custom.scss
@@ -18,7 +18,9 @@
 }
 
 .oe_product_cart:hover .o_multimedia_hover_player,
-.o_multimedia_hover_player:hover {
+.o_multimedia_hover_player:hover,
+.oe_product_cart.o_multimedia_player_active .o_multimedia_hover_player,
+.o_multimedia_hover_player:focus-within {
     max-height: 60px;
     opacity: 1;
     pointer-events: auto;