laten zien hoe downloads en zo gaan

public/app.js

@@ -146,12 +146,21 @@ async function api(path, body) {
     };
   }
 
-  const response = await fetch(path, options);
-  const data = await response.json();
-  if (!response.ok) {
-    throw new ApiError(data.error || `HTTP ${response.status}`, response.status, data.code);
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 30000);
+  try {
+    const response = await fetch(path, { ...options, signal: controller.signal });
+    const data = await response.json();
+    if (!response.ok) {
+      throw new ApiError(data.error || `HTTP ${response.status}`, response.status, data.code);
+    }
+    return data;
+  } catch (error) {
+    if (controller.signal.aborted) throw new Error("request-timeout");
+    throw error;
+  } finally {
+    clearTimeout(timeout);
   }
-  return data;
 }
 
 // Displays the login overlay and optionally reports why authentication failed.
@@ -671,6 +680,11 @@ function render(nextState) {
   renderPlayer(nextState);
   if (nextState.error) {
     setStatus(t(nextState.error));
+  } else if (nextState.download) {
+    const download = nextState.download;
+    const received = (download.received / 1000000).toFixed(1);
+    const total = Number.isFinite(download.total) ? (download.total / 1000000).toFixed(1) : "?";
+    setStatus(t("downloadingMedia", { name: download.filename, received, total }));
   } else {
     setStatus(nextState.discovering ? t("searchingPlayers") : "");
   }