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") : "");
   }

public/translate.js

@@ -3,6 +3,8 @@
 
   const translations = {
     en: {
+      "request-timeout": "The server did not respond within 30 seconds. Status will be refreshed automatically.",
+      downloadingMedia: "Downloading {name}: {received} / {total} MB",
       folders: "Folders",
       savePlaylist: "SAVE PLAYLIST",
       playlistSaved: "SAVED",
@@ -41,6 +43,8 @@
       "dlna-renderer-unreachable": "The DLNA renderer is unreachable.",
     },
     nl: {
+      "request-timeout": "De server antwoordde niet binnen 30 seconden. De status wordt automatisch opnieuw opgehaald.",
+      downloadingMedia: "Downloaden van {name}: {received} / {total} MB",
       folders: "Mappen",
       savePlaylist: "AFSPEELLIJST OPSLAAN",
       playlistSaved: "OPGESLAGEN",