feat: landing page for show monitors

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 }}"

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>