feat: updates option count for each episode when filter changes

assets/controllers/result_filter_controller.js

@@ -9,15 +9,14 @@ export default class extends Controller {
     H264_CODECS = ['h264', 'h.264', 'x264']
     H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
 
-    static outlets = ['movie-results']
+    static outlets = ['movie-results', 'tv-results']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'episode']
     static values = {
         'media-type': String
     }
 
     filter() {
-        let resultList = this.movieResultsOutlet;
+        let results = [];
-
         this.activeFilter = {
             "resolution": this.resolutionTarget.value,
             "codec": this.codecTarget.value,
@@ -25,12 +24,13 @@ export default class extends Controller {
             // "episodeNumber": this.episodeTarget.value,
         }
 
-        if ("tvshows" === this.mediaTypeValue) {
+        if ("movies" === this.mediaTypeValue) {
+            results = this.movieResultsOutlets;
+        } else if ("tvshows" === this.mediaTypeValue) {
+            results = this.tvResultsOutlets;
             this.activeFilter.season = this.seasonTarget.value;
         }
 
-        console.log(this.activeFilter);
-
         const filterOperation = (resultList) => {
             if (resultList.options.length <= 0) {
                 return false;
@@ -41,10 +41,6 @@ export default class extends Controller {
             let selectedCount = 0;
 
             resultList.options.forEach((option) => {
-                if (option.classList.contains('header-row')) {
-                    return;
-                }
-
                 const props = {
                     "resolution": option.querySelector('#resolution').textContent.trim(),
                     "codec": option.querySelector('#codec').textContent.trim(),
@@ -88,6 +84,10 @@ export default class extends Controller {
                 } else {
                     count = count + 1;
                 }
+
+                if ("tvshows" === this.mediaTypeValue) {
+                    resultList.countTarget.innerText = count;
+                }
             });
             // resultList.getOptionCountEl().innerHTML = `${count} options`;
             // resultList.getSelectedCountEl().innerHTML = `${selectedCount} selected`;
@@ -96,10 +96,6 @@ export default class extends Controller {
             });
         }
 
-        if (resultList) {
+        results.forEach((list) => filterOperation(list));
-            filterOperation(resultList);
-        } else {
-            this.resultListOutlets.forEach((resultList) => filterOperation(resultList));
-        }
     }
 }

assets/controllers/tv_results_controller.js

@@ -14,16 +14,18 @@ export default class extends Controller {
         active: Boolean,
     };
 
-    static targets = ['list']
+    static targets = ['list', 'count']
-
     static outlets = ['loading-icon']
 
+    options = []
+
     connect() {
         if (true === this.activeValue) {
             fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
                 .then(res => res.text())
                 .then(response => {
                     this.element.innerHTML = response;
+                    this.options = this.element.querySelectorAll('tbody tr');
                     this.loadingIconOutlet.increaseCount();
                 });
         }

templates/search/result.html.twig

@@ -29,6 +29,7 @@
                      {{ stimulus_action('result_filter', 'filter', 'change') }}
                      data-result-filter-media-type-value="{{ results.media.mediaType }}"
                      data-result-filter-movie-results-outlet=".results"
+                     data-result-filter-tv-results-outlet=".results"
                 >
                     <label for="resolution">
                         Resolution
@@ -36,7 +37,7 @@
                             <option {{ filter.resolution == "n/a" ? "selected" }}
                                     value="">n/a</option>
                             <option {{ filter.resolution == "720p" ? "selected" }}
-                                    value="720p">780p</option>
+                                    value="720p">720p</option>
                             <option {{ filter.resolution == "1080p" ? "selected" }}
                                     value="1080p">1080p</option>
                             <option {{ filter.resolution == "2160p" ? "selected" }}
@@ -91,7 +92,7 @@
                     {% for season, episodes in results.media.episodes %}
                         {% set active = (season == '1') ? true : false %}
                         {% for episode in episodes %}
-                            <div class="{{ (active == false) ? 'hidden' }}"
+                            <div class="results {{ (active == false) ? 'hidden' }}"
                                  data-tv-results-loading-icon-outlet=".loading-icon"
                                  {{ stimulus_controller('tv_results', {
                                     tmdbId: results.media.tmdbId,

templates/torrentio/tvshows.html.twig

@@ -7,7 +7,7 @@
             <span>
                 <small class="py-1 px-1.5 grow-0 font-bold bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white"
                     {{ stimulus_action('tv-results', 'toggleList', 'click') }}
-                >{{ results.results|length }} results</small>
+                ><span {{ stimulus_target('tv-results', 'count') }}>{{ results.results|length }}</span> results</small>
             </span>
         </div>
         <div class="flex flex-col items-end hover:cursor-pointer"
@@ -55,22 +55,22 @@
             <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">
+                    <td id="size" 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">
+                    <td id="resolution" 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">
+                    <td id="codec" 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">
+                    <td id="seeders" 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">
+                    <td id="provider" 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">
+                    <td id="language" 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">