fix: auto applies filter on season change
This commit is contained in:
@@ -29,6 +29,11 @@ export default class extends Controller {
|
||||
}
|
||||
}
|
||||
|
||||
// Keeps compatible with Filter & TV Shows
|
||||
isActive() {
|
||||
return true;
|
||||
}
|
||||
|
||||
listTargetConnected(target) {
|
||||
// console.log(target);
|
||||
}
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
|
||||
63
templates/search/partial/filter.html.twig
Normal file
63
templates/search/partial/filter.html.twig
Normal 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>
|
||||
@@ -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}) }}>
|
||||
|
||||
Reference in New Issue
Block a user