wip-feat: season filter

assets/controllers/result_filter_controller.js

@@ -14,9 +14,10 @@ export default class extends Controller {
     seasons = []
 
     static outlets = ['movie-results', 'tv-results']
-    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'episode']
+    static targets = ['resolution', 'codec', 'language', 'provider', 'season']
     static values = {
-        'media-type': String
+        'media-type': String,
+        'episodes': Array,
     }
 
     async movieResultsOutletConnected(outlet) {
@@ -34,8 +35,6 @@ export default class extends Controller {
         outlet.options.forEach((option) => {
             this.addLanguages(option, option.dataset);
             this.addProviders(option, option.dataset);
-            // this.addSeasons(option, props);
-            // this.addEpisodes(option, props);
         })
     }
 
@@ -65,32 +64,7 @@ export default class extends Controller {
 
     }
 
-    addSeasons(option, props) {
+    async filter() {
-        if (!this.seasons.includes(parseInt(props['season']))) {
-            this.seasons.push(parseInt(props['season']));
-        }
-
-        this.seasonTarget.innerHTML = '<option value="">n/a</option>';
-        this.seasonTarget.innerHTML += this.seasons.sort((a, b) => a - b)
-            .filter((season) => parseInt(season))
-            .map((season) => '<option value="'+season+'">'+season+'</option>')
-            .join('');
-        this.seasonTarget.querySelectorAll('option')[1].selected = true;
-    }
-
-    addEpisodes(option, props) {
-        if (!this.episodes.includes(parseInt(props['episodeNumber']))) {
-            this.episodes.push(parseInt(props['episodeNumber']));
-        }
-
-        this.episodeTarget.innerHTML = this.episodes.sort((a, b) => a - b)
-            .filter((episode) => parseInt(episode))
-            .map((episode) => '<option value="'+episode+'">'+episode+'</option>')
-            .join('');
-
-    }
-
-    filter() {
         let results = [];
         this.activeFilter = {
             "resolution": this.resolutionTarget.value,
@@ -107,8 +81,8 @@ export default class extends Controller {
         }
 
         const filterOperation = (resultList) => {
-            if (resultList.options.length <= 0) {
+            if (false === resultList.isActive) {
-                return false;
+                return;
             }
 
             let firstIncluded = true;
@@ -121,12 +95,10 @@ export default class extends Controller {
                     "codec": option.querySelector('#codec').textContent.trim(),
                     "provider": option.querySelector('#provider').textContent.trim(),
                     "languages": JSON.parse(option.dataset['languages']),
-                    // "codec": option.querySelector('#codec').textContent,
                 }
 
                 let include = true;
                 option.classList.remove('hidden');
-                // option.selectInput.checked = false;
 
                 for (let [key, value] of Object.entries(this.activeFilter)) {
                     if (value === "") {
@@ -164,13 +136,17 @@ export default class extends Controller {
                     resultList.countTarget.innerText = count;
                 }
             });
-            // resultList.getOptionCountEl().innerHTML = `${count} options`;
-            // resultList.getSelectedCountEl().innerHTML = `${selectedCount} selected`;
-            this.dispatch('setSeason', {
-                detail: {season: parseInt(this.activeFilter.season)}
-            });
         }
 
+        if ("tvshows" === this.mediaTypeValue) {
+            await results.forEach(async (list) => {
+                if (list.seasonValue === this.seasonTarget.value) {
+                    await list.setActive();
+                } else {
+                    list.setInActive();
+                }
+            })
+        }
         results.forEach((list) => filterOperation(list));
     }
 }

assets/controllers/tv_results_controller.js

@@ -18,6 +18,7 @@ export default class extends Controller {
     static outlets = ['loading-icon']
 
     options = []
+    optionsLoaded = false
 
     async connect() {
         await this.setOptions();
@@ -30,11 +31,27 @@ export default class extends Controller {
                 .then(response => {
                     this.element.innerHTML = response;
                     this.options = this.element.querySelectorAll('tbody tr');
+                    this.optionsLoaded = true;
                     this.loadingIconOutlet.increaseCount();
                 });
         }
     }
 
+    async setActive() {
+        this.activeValue = true;
+        this.element.classList.remove('hidden');
+        await this.setOptions();
+    }
+
+    setInActive() {
+        this.activeValue = false;
+        this.element.classList.add('hidden');
+    }
+
+    isActive() {
+        return this.activeValue;
+    }
+
     toggleList() {
         this.listTarget.classList.toggle('hidden');
     }

templates/search/result.html.twig

@@ -72,16 +72,19 @@
                     {% 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">
+                            <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-sm">
-                                <option selected value="">n/a</option>
+                                <option selected value="1">1</option>
-                            </select>
+                                {% for season in range(2, results.media.episodes|length) %}
-                        </label>
+                                <option value="{{ season }}">{{ season }}</option>
-                        <label for="episodeNumber">
+                                {% endfor %}
-                            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>
+{#                        <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>
 

templates/torrentio/tvshows.html.twig

@@ -54,7 +54,7 @@
             </thead>
             <tbody>
             {% for result in results.results %}
-                <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200" data-languages="{{ result.languages|json_encode }}" data-provider="{{ result.provider }}">
+                <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200" data-languages="{{ result.languages|json_encode }}" data-season="{{ results.season }}">
                     <td id="size" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.size }}
                     </td>
@@ -71,7 +71,7 @@
                         {{ result.provider }}
                     </td>
                     <td id="language" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50" data-languages="{{ result.languages|json_encode }}">
-                        {{ result.languageFlags }}
+                        {{ result.languageFlags|raw }}
                     </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">