Keep active multimedia player visible in product list

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",
         ],
     },

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));
+    });
+})();

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;