fix: cleans up paginator

assets/controllers/tv_episode_list_controller.js

@@ -24,7 +24,6 @@ export default class extends Controller {
     }
 
     paginate(event) {
-        console.log(event.params.page)
         this.element.querySelectorAll(".episode-container").forEach(element => element.remove());
         this.component.action('paginate', {page: event.params.page});
         this.component.render();

assets/controllers/tv_results_controller.js

@@ -55,19 +55,13 @@ export default class extends Controller {
     // }
 
     async setActive() {
-        this.activeValue = true;
-        // this.element.classList.remove('hidden');
         if (false === this.optionsLoaded) {
             await this.setOptions();
         }
     }
 
     async setInActive() {
-        this.activeValue = false;
-        // if (true === this.hasEpisodeSelectorTarget()) {
         this.episodeSelectorTarget.checked = false;
-        // }
-        // this.element.classList.add('hidden');
     }
 
     isActive() {

src/Controller/TorrentioController.php

@@ -52,13 +52,13 @@ final class TorrentioController extends AbstractController
             $input->episode,
         );
 
-//        return $cache->get($cacheId, function (ItemInterface $item) use ($input) {
+        return $cache->get($cacheId, function (ItemInterface $item) use ($input) {
-//            $item->expiresAt(Carbon::now()->addHour()->setMinute(0)->setSecond(0));
+            $item->expiresAt(Carbon::now()->addHour()->setMinute(0)->setSecond(0));
             $results = $this->getTvShowOptionsHandler->handle($input->toCommand());
             return $this->render('torrentio/tvshows.html.twig', [
                 'results' => $results,
             ]);
-//        });
+        });
     }
 
     #[Route('/torrentio/tvshows/clear/{tmdbId}/{imdbId}/{season?}/{episode?}', name: 'app_clear_torrentio_tvshows')]

tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
       "bg-orange-400",
       "bg-blue-600",
       "bg-rose-600",
+      "min-w-64",
       "transition-opacity",
       "ease-in",
       "duration-700",

templates/partial/paginator.html.twig

@@ -34,7 +34,7 @@
                 </li>
                 {% if startPage > 2 %}
                     <li class="page-item disabled">
-                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle">...</span>
+                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle inline-flex items-stretch">...</span>
                     </li>
                 {% endif %}
             {% endif %}
@@ -44,15 +44,14 @@
                         data-live-action-param="paginate"
                         data-live-page-param="{{ i|number_format }}"
                         class="page-link px-2.5 py-1 rounded-lg bg-orange-500 text-white align-middle"
-                        {% if i == _currentPage %}style="background-color: #fff; color: darkorange; border: 2px solid darkorange;"{% endif %}
+                        {% if i == _currentPage %}style="background-color: #fff; color: darkorange; font-weight: bold;"{% endif %}
-                        
                     >{{ i }}</button>
                 </li>
             {% endfor %}
             {% if endPage < _lastPage %}
                 {% if endPage < _lastPage - 1 %}
                     <li class="page-item disabled">
-                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle">...</span>
+                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle inline-flex items-stretch">...</span>
                     </li>
                 {% endif %}
                 <li class="page-item">

templates/partial/tv-episode-list-paginator.html.twig

@@ -31,7 +31,7 @@
                 </li>
                 {% if startPage > 2 %}
                     <li class="page-item disabled">
-                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle">...</span>
+                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle inline-flex items-stretch">...</span>
                     </li>
                 {% endif %}
             {% endif %}
@@ -40,14 +40,14 @@
                     <button 
                         {{ stimulus_action('tv-episode-list', 'paginate', 'click', {page: i}) }}
                         class="page-link px-2.5 py-1 rounded-lg bg-orange-500 text-white align-middle"
-                        {% if i == _currentPage %}style="background-color: #fff; color: darkorange; border: 2px solid darkorange;"{% endif %}
+                        {% if i == _currentPage %}style="background-color: #fff; color: darkorange; font-weight: bold;"{% endif %}
                     >{{ i }}</button>
                 </li>
             {% endfor %}
             {% if endPage < _lastPage %}
                 {% if endPage < _lastPage - 1 %}
                     <li class="page-item disabled">
-                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle">...</span>
+                        <span class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle inline-flex items-stretch">...</span>
                     </li>
                 {% endif %}
                 <li class="page-item">
@@ -63,9 +63,8 @@
                     {% if _currentPage < _lastPage %}
                         {{ stimulus_action('tv-episode-list', 'paginate', 'click', {page: _currentPage + 1}) }}
                     {% endif %}
-                    class="page-link px-2.5 py-1 h-10 rounded-lg bg-orange-500 align-middle"
+                    class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
                     aria-label="Next"
-                   
                 >
                     &raquo;
                 </button>

templates/torrentio/tvshows.html.twig

@@ -3,7 +3,7 @@
         {% if results.media.poster != null %}
             <img class="w-64 rounded-lg" src="{{ results.media.poster }}" />
         {% else %}
-            <div class="w-64 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
+            <div class="w-64 min-w-64 sticky h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
                 <twig:ux:icon width="32" name="hugeicons:loading-01" />
             </div>
         {% endif %}