From 44e7d113cad2d038aa8aa4e6d9623d6c72f7b59f Mon Sep 17 00:00:00 2001
From: Alexandre <44178713+alexbelgium@users.noreply.github.com>
Date: Sat, 26 Apr 2025 15:38:40 +0200
Subject: [PATCH] Load progress bar after image on audio player (#326)

* Load progress bar after image

* Ensure bottom overlay on top

* zindex
---
 homepage/static/custom-audio-player.js | 27 ++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/homepage/static/custom-audio-player.js b/homepage/static/custom-audio-player.js
index 7a44655..1252d37 100644
--- a/homepage/static/custom-audio-player.js
+++ b/homepage/static/custom-audio-player.js
@@ -214,19 +214,21 @@ function initCustomAudioPlayers() {
       });
 
       // Dark vertical progression bar
-      indicator = document.createElement("div");
-      applyStyles(indicator, {
-        position: "absolute",
-        top: "0",
-        bottom: "0",
-        // Start at left margin
-        left: CONFIG.LEFT_MARGIN_PERCENT + "%",
-        width: "2px",
-        background: "rgba(0,0,0,0.8)",
-        pointerEvents: "none",
-        borderRadius: "2px",
+      img.addEventListener("load", () => {
+        indicator = document.createElement("div");
+        applyStyles(indicator, {
+          position: "absolute",
+          top: "0",
+          bottom: "0",
+          // Start at left margin
+          left: CONFIG.LEFT_MARGIN_PERCENT + "%",
+          width: "2px",
+          background: "rgba(0,0,0,0.8)",
+          pointerEvents: "none",
+          borderRadius: "2px",
+        });
+        wrapper.appendChild(indicator);
       });
-      wrapper.appendChild(indicator);
     }
 
     // Loading spinner
@@ -405,6 +407,7 @@ function initCustomAudioPlayers() {
       position: "absolute",
       left: "0",
       bottom: "0",
+      zIndex: 1,
       width: "100%",
       height: "15%",
       display: "none",