From d6328786bad1c1d4398bcaa7e0bf0c0812f62083 Mon Sep 17 00:00:00 2001
From: Brock H Caldwell <brock@caldwellnetworks.com>
Date: Tue, 22 Apr 2025 10:04:14 -0500
Subject: [PATCH] fix: frontend cleanup

---
 .../controllers/result_filter_controller.js   |  10 ++
 src/Controller/SearchController.php           |   8 ++
 templates/search/result.html.twig             |  74 ++++++++--
 templates/torrentio/movies.html.twig          | 134 +++++++++---------
 templates/torrentio/tvshows.html.twig         |   5 +-
 5 files changed, 157 insertions(+), 74 deletions(-)
 create mode 100644 assets/controllers/result_filter_controller.js

diff --git a/assets/controllers/result_filter_controller.js b/assets/controllers/result_filter_controller.js
new file mode 100644
index 0000000..c07f69b
--- /dev/null
+++ b/assets/controllers/result_filter_controller.js
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://github.com/symfony/stimulus-bridge#lazy-controllers
+*/
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    // ...
+}
diff --git a/src/Controller/SearchController.php b/src/Controller/SearchController.php
index a0c5ee2..5ca8fa4 100644
--- a/src/Controller/SearchController.php
+++ b/src/Controller/SearchController.php
@@ -36,6 +36,14 @@ final class SearchController extends AbstractController
 
         return $this->render('search/result.html.twig', [
             'results' => $result,
+            'filter' => [
+                'resolution' => '',
+                'codec' => '',
+                'provider' => '',
+                'language' => '',
+                'season' => 1,
+                'episode' => ''
+            ]
         ]);
     }
 }
diff --git a/templates/search/result.html.twig b/templates/search/result.html.twig
index 8048a97..447eaac 100644
--- a/templates/search/result.html.twig
+++ b/templates/search/result.html.twig
@@ -17,15 +17,72 @@
                             {{ results.media.description }}
                         </p>
                     </div>
-                    <span {{ stimulus_controller('loading_icon', {total: results.media.episodes[1]|length, count: 0}) }}
+                    <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
                         class="loading-icon"
                     >
                         <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" />
                     </span>
                 </div>
 
+                <div id="filter" class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg"
+                     {{ stimulus_controller('result_filter') }}
+                >
+                    <label for="resolution">
+                        Resolution
+                        <select id="resolution" data-result-filter-target="resolution" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+                            <option {{ filter.resolution == "n/a" ? "selected" }}
+                                    value="">n/a</option>
+                            <option {{ filter.resolution == "720p" ? "selected" }}
+                                    value="720p">780p</option>
+                            <option {{ filter.resolution == "1080p" ? "selected" }}
+                                    value="1080p">1080p</option>
+                            <option {{ filter.resolution == "2160p" ? "selected" }}
+                                    value="2160p">2160p</option>
+                        </select>
+                    </label>
+                    <label for="codec">
+                        Codec
+                        <select id="codec" data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-sm text-gray-800 rounded-sm">
+                            <option {{ filter.codec == "n/a" ? "selected" }}
+                                    value="">n/a</option>
+                            <option {{ filter.codec == "-" ? "selected" }}
+                                    value="-">-</option>
+                            <option {{ filter.codec == "h264" ? "selected" }}
+                                    value="h264">h264</option>
+                            <option {{ filter.codec == "h265" ? "selected" }}
+                                    value="h265">h265/HEVC</option>
+                        </select>
+                    </label>
+                    <label for="language">
+                        Language
+                        <select id="language" data-result-filter-target="language" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+                            <option selected value="{{ filter.language }}">{{ filter.language }}</option>
+                        </select>
+                    </label>
+                    <label for="provider">
+                        Provider
+                        <select id="provider" data-result-filter-target="provider" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+                            <option selected value="">n/a</option>
+                        </select>
+                    </label>
+                    {% if results.media.mediaType == "tvshows" %}
+                        <label for="season">
+                            Season
+                            <select id="season" name="season" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+                                <option selected value="">n/a</option>
+                            </select>
+                        </label>
+                        <label for="episodeNumber">
+                            Episode
+                            <select id="episodeNumber" name="episodeNumber" data-result-filter-target="episode" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+                                <option selected value="">n/a</option>
+                            </select>
+                        </label>
+                    {% endif %}
+                </div>
+
                 {% if "movies" == results.media.mediaType %}
-                <div id="results" class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>
+                <div class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>
                 </div>
                 {% elseif "tvshows" == results.media.mediaType %}
                     {% for season, episodes in results.media.episodes %}
@@ -33,13 +90,12 @@
                         {% for episode in episodes %}
                             <div class="{{ (active == false) ? 'hidden' }}"
                                  data-tv-results-loading-icon-outlet=".loading-icon"
-                                 id="results"
-                                    {{ stimulus_controller('tv_results', {
-                                tmdbId: results.media.tmdbId,
-                                imdbId: results.media.imdbId,
-                                season: season,
-                                episode: episode['episode_number'],
-                                active: active,
+                                 {{ stimulus_controller('tv_results', {
+                                    tmdbId: results.media.tmdbId,
+                                    imdbId: results.media.imdbId,
+                                    season: season,
+                                    episode: episode['episode_number'],
+                                    active: active,
                             }) }}></div>
                         {% endfor %}
                     {% endfor %}
diff --git a/templates/torrentio/movies.html.twig b/templates/torrentio/movies.html.twig
index 4a88f5c..61833c1 100644
--- a/templates/torrentio/movies.html.twig
+++ b/templates/torrentio/movies.html.twig
@@ -1,67 +1,73 @@
 
 
-<div class="p-2 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
-    <table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-transparent rounded-lg">
-        <thead>
-        <tr class="dark:bg-stone-600 overflow-hidden rounded-md">
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-gray-50">
-                Size
-            </th>
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
-                Resolution
-            </th>
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
-                Codec
-            </th>
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
-                Seeders
-            </th>
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
-                Provider
-            </th>
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
-                Language
-            </th>
-            <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-gray-50">
-            </th>
-        </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 dark:divide-gray-50">
-        {% for result in results.results %}
-        <tr>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
-                {{ result.size }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
-                {{ result.resolution }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
-                {{ result.codec }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
-                {{ result.seeders }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
-                {{ result.provider }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
-                {{ result.languageFlags }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
-                <span class="p-1.5 bg-green-600 rounded-md">
-                    <span class="text-gray-50">Download</span>
-                </span>
-                <input class="ml-1" type="checkbox" name="select" />
-            </td>
-        </tr>
-        {% endfor %}
-        </tbody>
-    </table>
+<div class="p-4 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
+    <div class="overflow-hidden rounded-md">
+        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+               data-movies-list-target="list"
+        >
+            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr class="dark:bg-stone-600 overflow-hidden">
+                <th scope="col"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Size
+                </th>
+                <th scope="col"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Resolution
+                </th>
+                <th scope="col"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Codec
+                </th>
+                <th scope="col"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Seeders
+                </th>
+                <th scope="col"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Provider
+                </th>
+                <th scope="col"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    Language
+                </th>
+                <th scope="col"
+                    class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                </th>
+            </tr>
+            </thead>
+            <tbody>
+            {% for result in results.results %}
+                <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                        {{ result.size }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                        {{ result.resolution }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                        {{ result.codec }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                        {{ result.seeders }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                        {{ result.provider }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                        {{ result.languageFlags }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-end">
+                        <span class="p-1.5 bg-green-600 rounded-md text-gray-50">
+                            Download
+                        </span>
+                        <label for="select">
+                            <input id="select" type="checkbox" name="select" />
+                        </label>
+                    </td>
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    </div>
 </div>
\ No newline at end of file
diff --git a/templates/torrentio/tvshows.html.twig b/templates/torrentio/tvshows.html.twig
index dfef708..65be303 100644
--- a/templates/torrentio/tvshows.html.twig
+++ b/templates/torrentio/tvshows.html.twig
@@ -11,7 +11,7 @@
             </span>
         </div>
         <div class="flex flex-col items-end hover:cursor-pointer"
-             {{ stimulus_action('tv_results', 'toggleList', 'click') }}>
+             {{ stimulus_action('tv-results', 'toggleList', 'click') }}>
             <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32">
                 <path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/>
             </svg>
@@ -84,6 +84,9 @@
                 </tr>
             {% endfor %}
             </tbody>
+            <caption>
+                {{ results.results|length }} results
+            </caption>
         </table>
     </div>
 </div>