Timeline, Style

app/public/assets/js/modules/modal.js

@@ -11,6 +11,8 @@ export function initProgrammeModal() {
   const category = document.getElementById("modalCategory");
   const time = document.getElementById("modalTime");
   const meta = document.getElementById("modalMeta");
+  const logo = document.getElementById("modalLogo");
+  const channel = document.getElementById("modalChannel");
 
   const openModal = (programmeElement) => {
     const id = programmeElement.dataset.programmeId;
@@ -30,6 +32,16 @@ export function initProgrammeModal() {
     description.textContent = programme.description || "Keine Beschreibung vorhanden.";
     category.textContent = programme.category || "";
 
+    channel.textContent =
+        `Kanal ${programme.channel_number} · ${programme.channel}`;
+
+    logo.src = `/assets/logos/${encodeURIComponent(programme.channel_id)}.svg`;
+
+    logo.onerror = () => {
+        logo.onerror = null;
+        logo.src = "/assets/logos/default.svg";
+    };
+
     const metaItems = [];
 
     if (metadata.season && metadata.episode) {
@@ -61,7 +73,7 @@ export function initProgrammeModal() {
     meta.textContent = metaItems.join(" • ");
     meta.hidden = metaItems.length === 0;
 
-    time.textContent = `${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}`;
+    time.textContent = `${programme.start} – ${programme.stop}`;
 
     modal.hidden = false;
     document.body.classList.add("modal-open");