Metadata

app/public/assets/css/modal.css

@@ -76,3 +76,10 @@
   line-height: 1.55;
   margin: 0;
 }
+
+.programme-modal-meta {
+    margin: .5rem 0 1rem;
+    color: var(--muted);
+    font-size: .92rem;
+    line-height: 1.4;
+}

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

@@ -10,6 +10,7 @@ export function initProgrammeModal() {
   const description = document.getElementById("modalDescription");
   const category = document.getElementById("modalCategory");
   const time = document.getElementById("modalTime");
+  const meta = document.getElementById("modalMeta");
 
   const openModal = (programmeElement) => {
     const id = programmeElement.dataset.programmeId;
@@ -19,10 +20,47 @@ export function initProgrammeModal() {
       return;
     }
 
+    const metadata = programme.metadata || {};
+
     title.textContent = programme.title || "";
-    subtitle.textContent = programme.subtitle || "";
+    subtitle.textContent =
+        metadata.episode_title ||
+        programme.subtitle ||
+        "";
     description.textContent = programme.description || "Keine Beschreibung vorhanden.";
     category.textContent = programme.category || "";
+
+    const metaItems = [];
+
+    if (metadata.season && metadata.episode) {
+        let text = `Staffel ${metadata.season} · Episode ${metadata.episode}`;
+
+        if (metadata.episode_total) {
+            text += `/${metadata.episode_total}`;
+        }
+
+        metaItems.push(text);
+    }
+
+    if (metadata.country) {
+        metaItems.push(metadata.country);
+    }
+
+    if (metadata.year) {
+        metaItems.push(metadata.year);
+    }
+
+    if (metadata.age_rating) {
+        metaItems.push(`FSK ${metadata.age_rating}`);
+    }
+
+    if (Array.isArray(metadata.genres) && metadata.genres.length) {
+        metaItems.push(metadata.genres.join(", "));
+    }
+
+    meta.textContent = metaItems.join(" • ");
+    meta.hidden = metaItems.length === 0;
+
     time.textContent = `${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}`;
 
     modal.hidden = false;
@@ -31,6 +69,7 @@ export function initProgrammeModal() {
 
   const closeModal = () => {
     modal.hidden = true;
+    meta.textContent = "";
     document.body.classList.remove("modal-open");
   };