fix: auto applies filter on season change

This commit is contained in:
2025-04-22 23:40:28 -05:00
parent edce0c576d
commit 31d1b20045
5 changed files with 98 additions and 77 deletions

View File

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

View File

@@ -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) => {
if (false === resultList.isActive) {
const filterOperation = async (resultList, currentSeason) => {
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(async (list) => {
if (list.seasonValue === this.seasonTarget.value) {
await list.setActive();
} else {
list.setInActive();
}
})
}
results.forEach((list) => filterOperation(list));
await results.forEach((list) => filterOperation(list, currentSeason));
}
}

View File

@@ -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() {

View File

@@ -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>

View File

@@ -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"
{{ 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>
{{ include('search/partial/filter.html.twig') }}
{% if "movies" == results.media.mediaType %}
<div class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>