feat: landing page for show monitors

assets/components/monitor-list-row.js

@@ -67,6 +67,9 @@ export default class MonitorListRow extends HTMLTableRowElement {
                     <th class="px-4 py-2">
                       <div class="dark:text-orange-500 text-right whitespace-nowrap ">Downloaded At</div>
                     </th>
+                    <th class="px-4 py-2">
+                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Air Date</div>
+                    </th>
                 </tr>
             </thead>
             <tbody>
@@ -107,6 +110,9 @@ export default class MonitorListRow extends HTMLTableRowElement {
                     <td class="px-4 py-2">
                       <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('downloaded-at') ?? "-"}</div>
                     </td>
+                    <td class="px-4 py-2">
+                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('air-date') ?? "-"}</div>
+                    </td>
                 </tr>
             </tbody>
         </table>

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

assets/controllers/monitor_list_controller.js

@@ -23,7 +23,12 @@ export default class extends Controller {
                 }
 
                 if (null !== content && undefined !== content && "" !== content) {
-                    document.dispatchEvent(new CustomEvent('showPreviewContentModal', {detail: {heading: heading, content: content}}))
+                    if (['', null, undefined].includes(monitor.getAttribute('parent-id'))) {
+                        window.location.href = `/monitors/${monitor.getAttribute('monitor-id')}`;
+                    } else {
+                        document.dispatchEvent(new CustomEvent('showPreviewContentModal', {detail: {heading: heading, content: content}}))
+                    }
+
                 }
             })
         })

config/packages/sentry.yaml

@@ -1,7 +1,22 @@
 when@prod:
     sentry:
-        register_error_listener: false # Disables the ErrorListener to avoid duplicated log in sentry
-        register_error_handler: false # Disables the ErrorListener, ExceptionListener and FatalErrorListener integrations of the base PHP SDK
+        register_error_listener: true # Disables the ErrorListener to avoid duplicated log in sentry
+        register_error_handler: true # Disables the ErrorListener, ExceptionListener and FatalErrorListener integrations of the base PHP SDK
+
+        options:
+            release: '%app.version%'
+            traces_sample_rate: 1
+            profiles_sample_rate: 1
+            attach_stacktrace: true
+
+        tracing:
+            enabled: true
+            dbal: # DB queries
+                enabled: true
+            cache: # cache pools
+                enabled: true
+            twig: # templating engine
+                enabled: true
 
     services:
         # (Optionally) Configure the breadcrumb handler as a service (needed for the breadcrumb Monolog handler)

migrations/Version20251106045808.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20251106045808 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql(<<<'SQL'
+            ALTER TABLE monitor ADD poster VARCHAR(1024) DEFAULT NULL
+        SQL);
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql(<<<'SQL'
+            ALTER TABLE monitor DROP poster
+        SQL);
+    }
+}

src/Base/Util/Paginator.php

@@ -33,7 +33,6 @@ class Paginator
     public function paginate($query, int $page = 1, int $limit = 5): Paginator
     {
         $paginator = new OrmPaginator($query);
-
         $paginator
             ->getQuery()
             ->setFirstResult($limit * ($page - 1))

src/Monitor/Action/Handler/AddMonitorHandler.php

@@ -8,6 +8,7 @@ use App\Monitor\Action\Result\AddMonitorResult;
 use App\Monitor\Framework\Entity\Monitor;
 use App\Monitor\Framework\Repository\MonitorRepository;
 use App\Monitor\MonitorEvents;
+use App\Tmdb\TmdbClient;
 use App\User\Framework\Repository\UserRepository;
 use DateTimeImmutable;
 use OneToMany\RichBundle\Contract\CommandInterface;
@@ -22,13 +23,17 @@ readonly class AddMonitorHandler implements HandlerInterface
         private MessageBusInterface $bus,
         private MonitorRepository $movieMonitorRepository,
         private UserRepository $userRepository,
+        private TmdbClient $tmdb,
     ) {}
 
     public function handle(CommandInterface $command): ResultInterface
     {
         $user = $this->userRepository->find($command->userId);
+        $poster = $this->getPoster($command->imdbId);
+
         $monitor = (new Monitor())
             ->setUser($user)
+            ->setPoster($poster)
             ->setTmdbId($command->tmdbId)
             ->setImdbId($command->imdbId)
             ->setTitle($command->title)
@@ -56,4 +61,10 @@ readonly class AddMonitorHandler implements HandlerInterface
             ]
         );
     }
+
+    private function getPoster(string $imdbId): ?string
+    {
+        $data = $this->tmdb->tvShowDetails($imdbId);
+        return $data->poster;
+    }
 }

src/Monitor/Action/Handler/MonitorTvEpisodeHandler.php

@@ -9,6 +9,7 @@ use App\Download\Framework\Repository\DownloadRepository;
 use App\EventLog\Action\Command\AddEventLogCommand;
 use App\Monitor\Action\Command\MonitorMovieCommand;
 use App\Monitor\Action\Result\MonitorTvEpisodeResult;
+use App\Monitor\Framework\Entity\Monitor;
 use App\Monitor\Framework\Repository\MonitorRepository;
 use App\Monitor\MonitorEvents;
 use App\Tmdb\TmdbClient;
@@ -43,6 +44,7 @@ readonly class MonitorTvEpisodeHandler implements HandlerInterface
         try {
             $monitor = $this->monitorRepository->find($command->movieMonitorId);
             $this->logger->info('> [MonitorTvEpisodeHandler] Executing MonitorTvEpisodeHandler for ' . $monitor->getTitle() . ' season ' . $monitor->getSeason() . ' episode ' . $monitor->getEpisode());
+            $this->refreshData($monitor);
 
             $this->bus->dispatch(new AddEventLogCommand(
                 $monitor->getUser(),
@@ -151,4 +153,15 @@ readonly class MonitorTvEpisodeHandler implements HandlerInterface
             ]
         );
     }
+
+    private function refreshData(Monitor $monitor)
+    {
+        if (null === $monitor->getPoster()) {
+            $this->logger->info('> [MonitorTvEpisodeHandler] Refreshing poster for "' . $monitor->getTitle() . '"');
+            $poster = $monitor->getParent()->getPoster();
+            if (null !== $poster && "" !== $poster) {
+                $monitor->setPoster($poster);
+            }
+        }
+    }
 }

src/Monitor/Action/Handler/MonitorTvShowHandler.php

@@ -37,6 +37,7 @@ readonly class MonitorTvShowHandler implements HandlerInterface
     {
         $this->logger->info('> [MonitorTvShowHandler] Executing MonitorTvShowHandler');
         $monitor = $this->monitorRepository->find($command->monitorId);
+        $this->refreshData($monitor);
 
         // Check current episodes
         $downloadedEpisodes = $this->mediaFiles
@@ -157,4 +158,15 @@ readonly class MonitorTvShowHandler implements HandlerInterface
                 'status' => ['New', 'Active', 'In Progress']
             ]) !== null;
     }
+
+    private function refreshData(Monitor $monitor)
+    {
+        if (null === $monitor->getPoster()) {
+            $this->logger->info('> [MonitorTvShowHandler] Refreshing poster for "' . $monitor->getTitle() . '"');
+            $poster = $this->tmdb->tvshowDetails($monitor->getImdbId())->poster;
+            if (null !== $poster && "" !== $poster) {
+                $monitor->setPoster($poster);
+            }
+        }
+    }
 }

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/CalendarController.php

@@ -3,6 +3,7 @@
 namespace App\Monitor\Framework\Controller;
 
 use Aimeos\Map;
+use App\Monitor\Framework\Entity\Monitor;
 use App\Monitor\Framework\Repository\MonitorRepository;
 use App\User\Framework\Entity\User;
 use Spatie\IcalendarGenerator\Components\Calendar;
@@ -27,9 +28,10 @@ class CalendarController extends AbstractController
              ->refreshInterval(10);
 
         $monitors = $monitorRepository->whereAirDateNotNull();
-        $calendar->event(Map::from($monitors)->map(function ($monitor) {
+        $calendar->event(Map::from($monitors)->map(function (Monitor $monitor) {
             return new Event($monitor->getTitle())
                 ->startsAt($monitor->getAirDate())
+                ->attachment($monitor->getPoster())
                 ->fullDay();
         })->toArray());
 

src/Monitor/Framework/Controller/WebController.php

@@ -7,7 +7,11 @@ use App\Monitor\Action\Handler\AddMonitorHandler;
 use App\Monitor\Action\Handler\DeleteMonitorHandler;
 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;
@@ -34,4 +38,19 @@ class WebController extends AbstractController
     {
         return $this->render('monitor/upcoming-episodes.html.twig');
     }
+
+    #[Route('/monitors/{id}', name: 'app.monitor.view', methods: ['GET'])]
+    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,
+        ]);
+    }
 }

src/Monitor/Framework/Entity/Monitor.php

@@ -50,6 +50,9 @@ class Monitor
     #[ORM\Column(nullable: true)]
     private ?int $searchCount = null;
 
+    #[ORM\Column(nullable: true)]
+    private ?string $poster = null;
+
     #[ORM\Column]
     private bool $onlyFuture = true;
 
@@ -230,6 +233,17 @@ class Monitor
         return $this;
     }
 
+    public function getPoster(): ?string
+    {
+        return $this->poster;
+    }
+
+    public function setPoster(?string $poster): ?self
+    {
+        $this->poster = $poster;
+        return $this;
+    }
+
     public function getParent(): ?self
     {
         return $this->parent;

src/Twig/Components/MonitorList.php

@@ -17,11 +17,14 @@ final class MonitorList extends AbstractController
 
     use PaginateTrait;
 
+    #[LiveProp(writable: true)]
+    public ?int $parentMonitorId = null;
+
     #[LiveProp(writable: true)]
     public string $term = "";
 
     #[LiveProp(writable: true)]
-    public string $type;
+    public string $type = "";
 
     #[LiveProp(writable: true)]
     public bool $isWidget = true;
@@ -33,7 +36,9 @@ final class MonitorList extends AbstractController
     #[LiveAction]
     public function getMonitors()
     {
-        if ($this->type === "active") {
+        if (null !== $this->parentMonitorId) {
+            return $this->getChildMonitorsByParentId($this->parentMonitorId);
+        } elseif ($this->type === "active") {
             return $this->getActiveUserMonitors();
         } elseif ($this->type === "complete") {
             return $this->getCompleteUserMonitors();
@@ -48,6 +53,7 @@ final class MonitorList extends AbstractController
         return $this->asPaginator($this->monitorRepository->createQueryBuilder('m')
             ->andWhere('m.status IN (:statuses)')
             ->andWhere('(m.title LIKE :term OR m.imdbId LIKE :term OR m.monitorType LIKE :term OR m.status LIKE :term)')
+            ->andWhere('m.parent IS NULL')
             ->setParameter('statuses', ['New', 'In Progress', 'Active'])
             ->setParameter('term', '%'.$this->term.'%')
             ->orderBy('m.id', 'DESC')
@@ -67,4 +73,16 @@ final class MonitorList extends AbstractController
             ->getQuery()
         );
     }
+
+    #[LiveAction]
+    public function getChildMonitorsByParentId(int $parentId)
+    {
+        return $this->asPaginator(
+            $this->monitorRepository->createQueryBuilder('m')
+                ->andWhere("m.parent = :parentId")
+                ->setParameter('parentId', $parentId)
+                ->orderBy('m.id', 'DESC')
+                ->getQuery()
+        );
+    }
 }

templates/bundles/TwigBundle/Exception/error.html.twig

@@ -1,11 +1,10 @@
 {% extends 'bare.html.twig' %}
 
 {% block body %}
-    <h2 class="px-4 py-4 text-3xl font-extrabold text-orange-500">{{  }}</h2>
+    <h2 class="px-4 py-4 text-3xl font-extrabold text-orange-500">500</h2>
     <div class="flex flex-col bg-orange-500/50 p-4 rounded-lg gap-4 w-full md:w-[420px] border-orange-500 border-2 text-gray-50 animate-fade">
         <div class="flex flex-col m-0 text-center">
             <h3 class="text-2xl text-bold text-center text-gray-50">Oh crap!</h3>
-            <small>(or is it?)</small>
         </div>
         <p class="mb-2">There are many things I'm capable of, but this ain't one of 'em!</p>
         <pre class="bg-gray-800 text-white p-4 rounded-md overflow-x-auto">

templates/components/MonitorList.html.twig

@@ -17,10 +17,17 @@
                 class="px-6 py-3 text-start">
                 ID
             </th>
+            {% if null != parentMonitorId %}
             <th scope="col"
                 class="hidden md:table-cell px-6 py-3 text-start">
                 Search Count
             </th>
+            {% else %}
+            <th scope="col"
+                class="hidden md:table-cell px-6 py-3 text-start">
+                Episodes
+            </th>
+            {% endif %}
             <th scope="col"
                 class="hidden md:table-cell px-6 py-3 text-start">
                 Created at

templates/components/MonitorListRow.html.twig

@@ -1,16 +1,18 @@
-<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 }}"
    media-title="{{ monitor.title }}"
    season="{{ monitor.season }}"
-   episode="{{ monitor.episode }}"
+   episode="{{ monitor.episode ?? '-' }}"
    status="{{ monitor.status }}"
    search-count="{{ monitor.searchCount }}"
    media-type="{{ monitor.monitorType|monitor_type }}"
    episode-id="{{ monitor|monitor_media_id }}"
    created-at="{{ monitor.createdAt|date('m/d/Y g:i a') }}"
    last-search="{{ monitor.lastSearch|date('m/d/Y g:i a') }}"
-   downloaded-at="{{ monitor.downloadedAt|date('m/d/Y g:i a') }}"
+   downloaded-at="{{null != monitor.downloadedAt ? monitor.downloadedAt|date('m/d/Y g:i a') : '-' }}"
+   air-date="{{ null != monitor.airDate ? monitor.airDate|date('m/d/Y g:i a') : '-' }}"
 >
     <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
         <a href="{{ path('app_search_result', {imdbId: monitor.imdbId, mediaType: monitor.monitorType|as_download_type}) }}"
@@ -26,9 +28,17 @@
     <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>
+    {% endif %}
     <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm">
         {{ monitor.createdAt|date('m/d/Y h:i a') }}
     </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

@@ -0,0 +1,97 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{ monitor.title }} — Monitors — Torsearch{% endblock %}
+{% block h2 %}Monitors{% endblock %}
+
+{% 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>
+{% endblock %}