From f253b33910f09a4268f9ac5ce7af68bf5f99e4ca Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwell.digital>
Date: Thu, 6 Nov 2025 15:16:59 -0600
Subject: [PATCH] feat: shows monitor poster on modal

---
 assets/components/preview-content-dialog.js        | 3 +++
 src/Monitor/Framework/Controller/ApiController.php | 1 +
 templates/components/MonitorListRow.html.twig      | 2 ++
 templates/components/PreviewModal.html.twig        | 2 +-
 templates/monitor/upcoming-episodes.html.twig      | 8 +++++++-
 5 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/assets/components/preview-content-dialog.js b/assets/components/preview-content-dialog.js
index 5ff1885..9c73e98 100644
--- a/assets/components/preview-content-dialog.js
+++ b/assets/components/preview-content-dialog.js
@@ -28,6 +28,9 @@ export default class PreviewContentDialog extends HTMLDialogElement {
     }
 
     display({ heading, content }) {
+        if (this.hasAttribute('mdWidth')) {
+            this.style.width = this.getAttribute('mdWidth');
+        }
         this.setHeading(heading);
         this.setContent(content);
         this.showModal();
diff --git a/src/Monitor/Framework/Controller/ApiController.php b/src/Monitor/Framework/Controller/ApiController.php
index 466944a..f037f41 100644
--- a/src/Monitor/Framework/Controller/ApiController.php
+++ b/src/Monitor/Framework/Controller/ApiController.php
@@ -98,6 +98,7 @@ class ApiController extends AbstractController
                 'allDay' => true,
                 'backgroundColor' => $eventColors[$monitor->getImdbId()],
                 'borderColor' => $eventColors[$monitor->getImdbId()],
+                'attachment' => $monitor->getPoster(),
             ];
         });
 
diff --git a/templates/components/MonitorListRow.html.twig b/templates/components/MonitorListRow.html.twig
index 1902d81..9a10a9e 100644
--- a/templates/components/MonitorListRow.html.twig
+++ b/templates/components/MonitorListRow.html.twig
@@ -28,11 +28,13 @@
     <td class="px-6 py-4 whitespace-nowrap text-sm">
         {{ monitor|monitor_media_id }}
     </td>
+    {# Monitor is a CHILD monitor #}
     {% if null != monitor.parent %}
     <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm">
         {{ monitor.searchCount }}
     </td>
     {% else %}
+    {# Monitor is a PARENT monitor #}
     <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm">
         {{ monitor.children|length }}
     </td>
diff --git a/templates/components/PreviewModal.html.twig b/templates/components/PreviewModal.html.twig
index 34d7878..4ec0cef 100644
--- a/templates/components/PreviewModal.html.twig
+++ b/templates/components/PreviewModal.html.twig
@@ -1,4 +1,4 @@
-<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[50rem] rounded-md dark:bg-gray-950/80 dark:border-2 dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-3xl">
+<dialog{{ attributes }} is="preview-content-dialog" class="py-3 px-4 w-full md:w-[{{ mdWidth|default('50rem') }}] rounded-md dark:bg-gray-950/80 dark:border-2 dark:border-orange-500 dark:text-white backdrop-filter backdrop-blur-3xl">
     <div class="flex flex-row justify-end">
         <twig:ux:icon name="ic:twotone-cancel" width="16.75px" height="16.75px" class="modal-close rounded-full align-middle text-red-600 hover:text-red-700" />
     </div>
diff --git a/templates/monitor/upcoming-episodes.html.twig b/templates/monitor/upcoming-episodes.html.twig
index 7448535..a77f9eb 100644
--- a/templates/monitor/upcoming-episodes.html.twig
+++ b/templates/monitor/upcoming-episodes.html.twig
@@ -34,6 +34,7 @@
         }
         document.addEventListener('DOMContentLoaded', async function() {
             const modal = document.getElementById('previewModal');
+            modal.setAttribute('mdWidth', '25rem');
             let data = await fetch('/api/monitor/upcoming-episodes');
             data = (await data.json())['data'];
 
@@ -47,7 +48,12 @@
                 eventClick: function (data) {
                     modal.display({
                         heading: data.event.title,
-                        content: `<p>${data.event.startStr}</p>`
+                        content: `
+<div class="flex flex-col gap-4 justify-center items-center">
+    <img src="${data.event.extendedProps.attachment}" class="w-[90%] rounded-md" />
+    <p>${data.event.startStr}</p>
+</div>
+`
                     })
                 }
             });