feat: landing page for show monitors

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();

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(),
             ];
         });
 

src/Monitor/Framework/Controller/WebController.php

@@ -9,6 +9,9 @@ use App\Monitor\Action\Input\AddMonitorInput;
 use App\Monitor\Action\Input\DeleteMonitorInput;
 use App\Monitor\Framework\Entity\Monitor;
 use App\Monitor\Framework\Repository\MonitorRepository;
+use App\Search\Action\Command\GetMediaInfoCommand;
+use App\Search\Action\Handler\GetMediaInfoHandler;
+use App\Tmdb\TmdbClient;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
@@ -37,10 +40,17 @@ class WebController extends AbstractController
     }
 
     #[Route('/monitors/{id}', name: 'app.monitor.view', methods: ['GET'])]
-    public function viewMonitor(Monitor $monitor)
+    public function viewMonitor(Monitor $monitor, GetMediaInfoHandler $getMediaInfoHandler)
     {
+        $media = $getMediaInfoHandler->handle(
+            new GetMediaInfoCommand(
+                imdbId: $monitor->getImdbId(),
+                mediaType: 'tvshows',
+            )
+        );
         return $this->render('monitor/view.html.twig', [
             'monitor' => $monitor,
+            'results' => $media,
         ]);
     }
 }

templates/components/MonitorListRow.html.twig

@@ -1,4 +1,4 @@
-<tr{{ attributes }} is="monitor-list-row" id="monitor_{{ monitor.id }}"  class="dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900"
+<tr{{ attributes }} is="monitor-list-row" id="monitor_{{ monitor.id }}"  class="dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-900 cursor-pointer"
    monitor-id="{{ monitor.id }}"
    parent-id="{{ monitor.parent.id ?? null }}"
    imdb-id="{{ monitor.imdbId }}"
@@ -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>

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>

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>
+`
                     })
                 }
             });

templates/monitor/view.html.twig

@@ -6,6 +6,91 @@
 {% block body %}
     <div class="px-4 py-2">
         <twig:Card title="Viewing your monitors for {{ monitor.title }}">
+            <div class="p-2 md:p-4 flex flex-col md:flex-row gap-6">
+                {% if results.media.poster != null %}
+                    <img class="w-full md:w-[12.5rem] rounded-lg" src="{{ results.media.poster }}" />
+                {% else %}
+                    <div class="w-full md:w-[12.5rem] h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
+                        <twig:ux:icon width="24" name="hugeicons:loading-01" />
+                    </div>
+                {% endif %}
+
+                <div class="w-full flex flex-col">
+                    <div class="mb-4 flex flex-row gap-2 justify-between">
+                        <h3 class="text-xl font-medium leading-tight font-bold text-gray-50">
+                            {{ results.media.title }} ({{ results.media.year }})
+                        </h3>
+                    </div>
+
+                    <p class="text-gray-50 mb-4">
+                        {{ results.media.description }}
+                    </p>
+
+                    <div class="text-gray-50">
+                        {% if results.media.stars != null %}
+                            <strong>Starring</strong>: {{ results.media.stars|join(', ') }} <br />
+                        {% endif %}
+
+                        {% if results.media.directors != null %}
+                            <strong>Directors</strong>: {{ results.media.directors|join(', ') }} <br />
+                        {% endif %}
+
+                        {% if results.media.producers != null %}
+                            <strong>Producers</strong>: {{ results.media.producers|join(', ') }} <br />
+                        {% endif %}
+
+                        {% if results.media.creators != null %}
+                            <strong>Creators</strong>: {{ results.media.creators|join(', ') }} <br />
+                        {% endif %}
+
+                        {% if results.media.genres != null %}
+                            <div id="genres" class="text-gray-50 my-4">
+                                {% for genre in results.media.genres %}
+                                    <small class="px-2 py-1 border border-orange-500 rounded-full">{{ genre }}</small>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
+                    </div>
+
+                    {% if results.media.mediaType == "tvshows" %}
+                        <div class="flex flex-row justify-start items-end grow text-xs">
+                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold text-xs bg-orange-500 rounded-lg text-white">
+                                <span>{{ results.media.numberSeasons }}</span> season(s)
+                            </span>
+                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-sky-700 rounded-lg text-white" title='"{{ results.media.title }}" first aired on {{ results.media.premiereDate|date(null, 'UTC') }}.'>
+                                {{ results.media.premiereDate|date(null, 'UTC') }}
+                            </span>
+                        </div>
+                    {% endif %}
+
+                    {% if "movies" == results.media.mediaType %}
+                        <div class="flex flex-row justify-start items-end grow text-xs">
+                            <span class="results-count-badge py-1 px-1.5 mr-1 grow-0 font-bold text-xs bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white">
+                                <span class="results-count-number" id="movie_results_count">-</span> results
+                            </span>
+
+                            <twig:Turbo:Frame id="meb_{{ results.media.imdbId }}" src="{{ path('api.library.search', {
+                                title: results.media.title,
+                                block: 'media_exists_badge',
+                                target: "meb_" ~ results.media.imdbId
+                            }) }}">
+                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-rose-600 rounded-lg text-white" title="Movie has not been downloaded yet.">
+                                    missing
+                                </span>
+                            </twig:Turbo:Frame>
+
+                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-sky-700 rounded-lg text-white" title="Release date {{ results.media.episodeAirDate }}">
+                                {{ results.media.premiereDate|date('n/j/Y', 'UTC') }}
+                            </span>
+
+                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white" title="This movie has a runtime of {{ results.media.runtime }} minutes.">
+                                {{ results.media.runtime }} minutes
+                            </span>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+
             <twig:MonitorList :parentMonitorId="monitor.id" :isWidget="false" :perPage="10"></twig:MonitorList>
         </twig:Card>
     </div>