From ca13c7620a8e30670cbe3bedebca78d647160c55 Mon Sep 17 00:00:00 2001
From: Gogs <gogs@fake.local>
Date: Thu, 9 Jul 2026 15:35:20 +0200
Subject: [PATCH] Consolidation 1

---
 app/public/assets/js/live-now.js           | 22 +++++++++++++++-
 app/public/assets/js/modules/modal.js      | 11 ++++++--
 app/templates/day.php                      | 29 +---------------------
 app/templates/home.php                     | 22 +---------------
 app/templates/partials/programme-modal.php | 22 ++++++++++++++++
 5 files changed, 54 insertions(+), 52 deletions(-)
 create mode 100644 app/templates/partials/programme-modal.php

diff --git a/app/public/assets/js/live-now.js b/app/public/assets/js/live-now.js
index 1c962e8..fa7d305 100644
--- a/app/public/assets/js/live-now.js
+++ b/app/public/assets/js/live-now.js
@@ -192,7 +192,27 @@ function dashboardUpdateCard(card, item) {
     bar.style.width = `${TVGuideLive.calcPercent(item.start, item.stop)}%`;
   }
 
-  card.dataset.programmeId = `${item.channel_id}-${item.start}-${item.title}`;
+  const id = `${item.channel_id}-${item.start}-${item.title}`;
+  card.dataset.programmeId = id;
+
+  window.TVGUIDE_PROGRAMMES = window.TVGUIDE_PROGRAMMES || {};
+  window.TVGUIDE_PROGRAMMES[id] = {
+    id,
+    channel_id: item.channel_id,
+    channel: item.channel_name,
+    channel_number: item.channel_number,
+    favorite: item.favorite,
+    title: item.title,
+    subtitle: item.subtitle || '',
+    description: item.description || '',
+    category: item.category || '',
+    metadata: item.metadata || {},
+    year: item.year || '',
+    rating: item.rating || '',
+    country: item.country || '',
+    start: TVGuideLive.formatTime(item.start),
+    stop: TVGuideLive.formatTime(item.stop)
+  };
 }
 
 function dashboardRender(grid, items) {
diff --git a/app/public/assets/js/modules/modal.js b/app/public/assets/js/modules/modal.js
index 01ad38f..c0c62d6 100644
--- a/app/public/assets/js/modules/modal.js
+++ b/app/public/assets/js/modules/modal.js
@@ -85,10 +85,17 @@ export function initProgrammeModal() {
     document.body.classList.remove("modal-open");
   };
 
-  document.querySelectorAll(".timeline-programme, .dashboard-programme").forEach((programme) => {
-    programme.addEventListener("click", () => openModal(programme));
+  document.addEventListener("click", (event) => {
+    const programme = event.target.closest(".timeline-programme, .dashboard-programme");
+
+    if (!programme) {
+      return;
+    }
+
+    openModal(programme);
   });
 
+
   modal.querySelectorAll("[data-modal-close]").forEach((element) => {
     element.addEventListener("click", closeModal);
   });
diff --git a/app/templates/day.php b/app/templates/day.php
index 9bf990e..198cfb7 100644
--- a/app/templates/day.php
+++ b/app/templates/day.php
@@ -239,31 +239,4 @@ foreach ($dayProgrammes as $channel) {
       JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES
   ) ?>;
 </script>
-<div class="programme-modal" id="programmeModal" hidden>
-  <div class="programme-modal-backdrop" data-modal-close></div>
-
-  <div class="programme-modal-card">
-      <button class="programme-modal-close" type="button" data-modal-close>×</button>
-
-      <div class="programme-modal-header">
-
-          <img id="modalLogo" class="programme-modal-logo" src="/assets/logos/default.svg" alt="">
-
-          <div class="programme-modal-channel">
-              <div id="modalChannel"></div>
-              <div id="modalTime" class="programme-modal-time"></div>
-          </div>
-
-      </div>
-
-      <h2 id="modalTitle"></h2>
-
-      <div id="modalSubtitle" class="programme-modal-subtitle"></div>
-
-      <div id="modalCategory" class="programme-modal-category"></div>
-
-      <div id="modalMeta" class="programme-modal-meta"></div>
-
-      <p id="modalDescription"></p>
-  </div>
-</div>
+<?php require __DIR__ . '/partials/programme-modal.php'; ?>
diff --git a/app/templates/home.php b/app/templates/home.php
index f06b4ad..e6a9002 100644
--- a/app/templates/home.php
+++ b/app/templates/home.php
@@ -188,24 +188,4 @@ $favoritesNow = array_values(array_filter($currentProgrammes, fn($item) => !empt
   window.TVGUIDE_PROGRAMMES = <?= json_encode($programmeIndex, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
 </script>
 
-<div class="programme-modal" id="programmeModal" hidden>
-  <div class="programme-modal-backdrop" data-modal-close></div>
-
-  <div class="programme-modal-card">
-    <button class="programme-modal-close" type="button" data-modal-close>×</button>
-
-    <div class="programme-modal-header">
-      <img id="modalLogo" class="programme-modal-logo" src="/assets/logos/default.svg" alt="">
-      <div class="programme-modal-channel">
-        <div id="modalChannel"></div>
-        <div id="modalTime" class="programme-modal-time"></div>
-      </div>
-    </div>
-
-    <h2 id="modalTitle"></h2>
-    <div id="modalSubtitle" class="programme-modal-subtitle"></div>
-    <div id="modalCategory" class="programme-modal-category"></div>
-    <div id="modalMeta" class="programme-modal-meta"></div>
-    <p id="modalDescription"></p>
-  </div>
-</div>
+<?php require __DIR__ . '/partials/programme-modal.php'; ?>
diff --git a/app/templates/partials/programme-modal.php b/app/templates/partials/programme-modal.php
new file mode 100644
index 0000000..12c9443
--- /dev/null
+++ b/app/templates/partials/programme-modal.php
@@ -0,0 +1,22 @@
+<div class="programme-modal" id="programmeModal" hidden>
+  <div class="programme-modal-backdrop" data-modal-close></div>
+
+  <div class="programme-modal-card">
+    <button class="programme-modal-close" type="button" data-modal-close>×</button>
+
+    <div class="programme-modal-header">
+      <img id="modalLogo" class="programme-modal-logo" src="/assets/logos/default.svg" alt="">
+
+      <div class="programme-modal-channel">
+        <div id="modalChannel"></div>
+        <div id="modalTime" class="programme-modal-time"></div>
+      </div>
+    </div>
+
+    <h2 id="modalTitle"></h2>
+    <div id="modalSubtitle" class="programme-modal-subtitle"></div>
+    <div id="modalCategory" class="programme-modal-category"></div>
+    <div id="modalMeta" class="programme-modal-meta"></div>
+    <p id="modalDescription"></p>
+  </div>
+</div>