fix: auto applies filter on season change

assets/controllers/movie_results_controller.js

@@ -29,6 +29,11 @@ export default class extends Controller {
         }
     }
 
+    // Keeps compatible with Filter & TV Shows
+    isActive() {
+        return true;
+    }
+
     listTargetConnected(target) {
         // console.log(target);
     }

assets/controllers/result_filter_controller.js

@@ -13,6 +13,13 @@ export default class extends Controller {
     providers = []
     seasons = []
 
+    activeFilter = {
+        "resolution": "",
+        "codec": "",
+        "language": "",
+        "provider": "",
+    }
+
     static outlets = ['movie-results', 'tv-results']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season']
     static values = {
@@ -20,6 +27,11 @@ export default class extends Controller {
         'episodes': Array,
     }
 
+    connect() {
+        if (this.mediaTypeValue === "tvshows") {
+            this.activeFilter['season'] = 1;}
+    }
+
     async movieResultsOutletConnected(outlet) {
         await this.parseDownloadOptionForFilter(outlet)
     }
@@ -65,6 +77,8 @@ export default class extends Controller {
     }
 
     async filter() {
+        const currentSeason = this.activeFilter['season'];
+
         let results = [];
         this.activeFilter = {
             "resolution": this.resolutionTarget.value,
@@ -80,8 +94,16 @@ export default class extends Controller {
             this.activeFilter.season = this.seasonTarget.value;
         }
 
-        const filterOperation = (resultList) => {
+        const filterOperation = async (resultList, currentSeason) => {
-            if (false === resultList.isActive) {
+            if ("tvshows" === this.mediaTypeValue && currentSeason !== this.activeFilter['season']) {
+                if (resultList.seasonValue === this.seasonTarget.value) {
+                    await resultList.setActive();
+                } else {
+                    resultList.setInActive();
+                }
+            }
+
+            if (false === resultList.isActive()) {
                 return;
             }
 
@@ -101,7 +123,7 @@ export default class extends Controller {
                 option.classList.remove('hidden');
 
                 for (let [key, value] of Object.entries(this.activeFilter)) {
-                    if (value === "") {
+                    if (value === "" || key === "season") {
                         continue;
                     }
                     if (key === "codec" && value === "h264") {
@@ -138,15 +160,6 @@ export default class extends Controller {
             });
         }
 
-        if ("tvshows" === this.mediaTypeValue) {
+        await results.forEach((list) => filterOperation(list, currentSeason));
-            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

@@ -40,7 +40,9 @@ export default class extends Controller {
     async setActive() {
         this.activeValue = true;
         this.element.classList.remove('hidden');
-        await this.setOptions();
+        if (false === this.optionsLoaded) {
+            await this.setOptions();
+        }
     }
 
     setInActive() {

templates/search/partial/filter.html.twig

@@ -0,0 +1,63 @@
+<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') }}
+        {{ 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
+        <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">720p</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" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+                <option selected value="1">1</option>
+                {% for season in range(2, results.media.episodes|length) %}
+                    <option value="{{ season }}">{{ season }}</option>
+                {% endfor %}
+            </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/search/result.html.twig

@@ -24,69 +24,7 @@
                     </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"
+                {{ include('search/partial/filter.html.twig') }}
-                     {{ stimulus_controller('result_filter') }}
-                     {{ 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
-                        <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">720p</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" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
-                                <option selected value="1">1</option>
-                                {% for season in range(2, results.media.episodes|length) %}
-                                <option value="{{ season }}">{{ season }}</option>
-                                {% endfor %}
-                            </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 class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>