wip: working episode pagination, season switcher, monitor only new content

templates/components/Filter.html.twig

@@ -4,6 +4,7 @@
      data-result-filter-media-type-value="{{ results.media.mediaType }}"
      data-result-filter-movie-results-outlet=".results"
      data-result-filter-tv-results-outlet=".results"
+     data-result-filter-tv-episode-list-outlet=".episode-list"
 >
     <div class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
         <label for="resolution">
@@ -58,7 +59,9 @@
             <label for="season">
                 Season
                 <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
-                        {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}>
+                        {{ stimulus_action('result_filter', 'setSeason', 'change') }}
+                        {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
+                >
                     <option selected value="1">1</option>
                     {% for season in range(2, results.media.episodes|length) %}
                         <option value="{{ season }}">{{ season }}</option>

templates/components/TvEpisodeList.html.twig

@@ -0,0 +1,27 @@
+<div{{ attributes.defaults(stimulus_controller('tv_episode_list')) }}
+        class="episode-list flex flex-col gap-4"
+>
+    <div data-live-id="{{ uniqid() }}" class="episode-container flex flex-col gap-4">
+        {% for episode in this.episodes.items %}
+            <div id="episode_{{ episode['season_number'] }}_{{ episode['episode_number'] }}" class="results"
+                 data-tv-results-loading-icon-outlet=".loading-icon"
+                 data-download-button-outlet=".download-btn"
+                    {{ stimulus_controller('tv_results', {
+                        title: this.title,
+                        tmdbId: this.tmdbId,
+                        imdbId: this.imdbId,
+                        season: episode['season_number'],
+                        episode: episode['episode_number'],
+                        active: 'true',
+                    }) }}></div>
+        {% endfor %}
+    </div>
+    {% set paginator = this.episodes %}
+    {% include 'partial/tv-episode-list-paginator.html.twig' %}
+</div>
+
+{% macro placeholder(props) %}
+    <span>
+        <twig:ux:icon name="codex:loader" height="40" width="40" data-loading-icon-target="icon" class="text-end" />
+    </span>
+{% endmacro %}

templates/partial/paginator.html.twig

@@ -1,6 +1,6 @@
 {% set _currentPage = paginator.currentPage ?: 1 %}
 {% set _lastPage = paginator.lastPage %}
-{% set _showingPerPage = (_currentPage == _lastPage) ? paginator.total - (this.perPage * (_lastPage - 1))  : paginator.items.query.maxResults %}
+{% set _showingPerPage = (_currentPage == _lastPage) ? paginator.total - (this.perPage * (_lastPage - 1))  : ("query" in paginator.items) ? paginator.items.query.maxResults %}
 
 <p class="text-white mt-1">Showing {{ _showingPerPage }} of {{ paginator.total }} total results</p>
 
@@ -8,29 +8,29 @@
     <nav>
         <ul class="mt-2 flex flex-row justify-content-center gap-1 py-1 text-white text-sm">
             <li class="page-item{{ _currentPage <= 1 ? ' disabled' : '' }}">
-                <a {% if _currentPage > 1 %}
+                <button {% if _currentPage > 1 %}
                    data-action="click->live#action"
                    data-live-action-param="paginate"
                    data-live-page-param="{{ _currentPage - 1 }}"
                    {% endif %}
                    class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
                    aria-label="Previous"
-                   href="#"
+                   
                 >
                     &laquo;
-                </a>
+                </button>
             </li>
             {% set startPage = max(1, _currentPage - 2) %}
             {% set endPage = min(_lastPage, startPage + 4) %}
             {% if startPage > 1 %}
                 <li class="page-item">
-                    <a data-action="click->live#action"
+                    <button data-action="click->live#action"
                        data-live-action-param="paginate"
                        data-live-page-param="{{ "1"|number_format }}"
                        class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
                        aria-label="Next"
-                       href="#"
-                    >1</a>
+                       
+                    >1</button>
                 </li>
                 {% if startPage > 2 %}
                     <li class="page-item disabled">
@@ -39,14 +39,14 @@
                 {% endif %}
             {% endif %}
             {% for i in startPage..endPage %}
-                <li class="page-item}">
-                    <a data-action="click->live#action"
+                <li class="page-item">
+                    <button data-action="click->live#action"
                         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 %}
-                        href="#"
-                    >{{ i }}</a>
+                        
+                    >{{ i }}</button>
                 </li>
             {% endfor %}
             {% if endPage < _lastPage %}
@@ -56,27 +56,27 @@
                     </li>
                 {% endif %}
                 <li class="page-item">
-                    <a data-action="click->live#action"
+                    <button data-action="click->live#action"
                        data-live-action-param="paginate"
                        data-live-page-param="{{ _lastPage }}"
                        class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
                        aria-label="Next"
-                       href="#"
-                    >{{ _lastPage }}</a>
+                       
+                    >{{ _lastPage }}</button>
                 </li>
             {% endif %}
             <li class="page-item {{ _currentPage >= paginator.lastPage ? ' disabled' : '' }}">
-                <a {% if _currentPage < _lastPage %}
+                <button {% if _currentPage < _lastPage %}
                    data-action="click->live#action"
                    data-live-action-param="paginate"
                    data-live-page-param="{{ _currentPage + 1 }}"
                    {% endif %}
                    class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
                    aria-label="Next"
-                   href="#"
+                   
                 >
                     &raquo;
-                </a>
+                </button>
             </li>
         </ul>
     </nav>

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

@@ -0,0 +1,75 @@
+{% set _currentPage = paginator.currentPage ?: 1 %}
+{% set _lastPage = paginator.lastPage %}
+{% set _showingPerPage = (_currentPage == _lastPage) ? paginator.total - (this.perPage * (_lastPage - 1))  : ("query" in paginator.items) ? paginator.items.query.maxResults %}
+
+<p class="text-white mt-1">{{ paginator.getShowing() }}</p>
+
+{% if paginator.lastPage > 1 %}
+    <nav>
+        <ul class="mt-2 flex flex-row justify-content-center gap-1 py-1 text-white text-sm">
+            <li class="page-item{{ _currentPage <= 1 ? ' disabled' : '' }}">
+                <button
+                    {% if _currentPage > 1 %}
+                       {{ stimulus_action('tv-episode-list', 'paginate', 'click', {page: _currentPage - 1}) }}
+                    {% endif %}
+                    class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
+                    aria-label="Previous"
+                >
+                    &laquo;
+                </button>
+            </li>
+            {% set startPage = max(1, _currentPage - 2) %}
+            {% set endPage = min(_lastPage, startPage + 4) %}
+            {% if startPage > 1 %}
+                <li class="page-item">
+                    <button
+                        {{ stimulus_action('tv-episode-list', 'paginate', 'click', {page: 1}) }}
+                        class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
+                        aria-label="Next"
+                       
+                    >1</button>
+                </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>
+                    </li>
+                {% endif %}
+            {% endif %}
+            {% for i in startPage..endPage %}
+                <li class="page-item">
+                    <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 %}
+                    >{{ 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>
+                    </li>
+                {% endif %}
+                <li class="page-item">
+                    <button
+                        {{ stimulus_action('tv-episode-list', 'paginate', 'click', {page: _lastPage}) }}
+                        class="page-link px-2.5 py-1 rounded-lg bg-orange-500 align-middle"
+                        aria-label="Next"
+                    >{{ _lastPage }}</button>
+                </li>
+            {% endif %}
+            <li class="page-item {{ _currentPage >= paginator.lastPage ? ' disabled' : '' }}">
+                <button
+                    {% 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"
+                    aria-label="Next"
+                   
+                >
+                    &raquo;
+                </button>
+            </li>
+        </ul>
+    </nav>
+{% endif %}

templates/search/result.html.twig

@@ -118,22 +118,10 @@
                 <div class="results" {{ stimulus_controller('movie_results', {title: results.media.title, tmdbId: results.media.tmdbId, imdbId: results.media.imdbId}) }}>
                 </div>
                 {% elseif "tvshows" == results.media.mediaType %}
-                    {% for season, episodes in results.media.episodes %}
-                        {% set active = (season == '1') ? true : false %}
-                        {% for episode in episodes %}
-                            <div class="results {{ (active == false) ? 'hidden' }}"
-                                 data-tv-results-loading-icon-outlet=".loading-icon"
-                                 data-download-button-outlet=".download-btn"
-                                 {{ stimulus_controller('tv_results', {
-                                    title: results.media.title,
-                                    tmdbId: results.media.tmdbId,
-                                    imdbId: results.media.imdbId,
-                                    season: season,
-                                    episode: episode['episode_number'],
-                                    active: active,
-                            }) }}></div>
-                        {% endfor %}
-                    {% endfor %}
+                    <twig:TvEpisodeList
+                        :imdbId="results.media.imdbId" :season="results.season" :perPage="20" :pageNumber="1"
+                        :tmdbId="results.media.tmdbId" :title="results.media.title" loading="defer"
+                    />
                 {% endif %}
             </twig:Card>
         </div>