fix: performs filtering in web component

assets/components/episode-container.js

@@ -1,16 +1,23 @@
 export default class EpisodeContainer extends HTMLElement {
+    H264_CODECS = ['h264', 'h.264', 'x264']
+    H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
+
     #resultsToggleBtnEl;
     #resultsTableEl;
     #resultsCountBadgeEl;
+    #resultsCountNumberEl;
 
     constructor() {
         super();
+        this.#resultsTableEl = this.querySelector('.results-container');
         this.#resultsToggleBtnEl = this.querySelector('.dropdown-button');
         this.#resultsCountBadgeEl = this.querySelector('.results-count-badge');
-        this.#resultsTableEl = this.querySelector('.results-container');
+        this.#resultsCountNumberEl = this.querySelector('.results-count-number');
 
         this.#resultsToggleBtnEl.addEventListener('click', () => this.toggleResults());
         this.#resultsCountBadgeEl.addEventListener('click', () => this.toggleResults());
+
+        document.addEventListener('filterDownloadOptions', this.filter.bind(this));
     }
     connectedCallback() {
 
@@ -31,4 +38,67 @@ export default class EpisodeContainer extends HTMLElement {
         this.#resultsToggleBtnEl.classList.toggle('-rotate-90');
         this.#resultsTableEl.classList.toggle('hidden');
     }
+
+    filter({ detail: { activeFilter } }) {
+        const options = this.querySelectorAll('tr.download-option');
+
+        let firstIncluded = true;
+        let count = 0;
+        let selectedCount = 0;
+
+        options.forEach((option) => {
+            const optionHeader = document.querySelector(`[data-option-id="${option.dataset['localId']}"]`)
+            const props = {
+                "resolution": option.querySelector('#resolution').textContent.trim(),
+                "codec": option.querySelector('#codec').textContent.trim(),
+                "provider": option.querySelector('#provider').textContent.trim(),
+                "languages": JSON.parse(option.dataset['languages']),
+                "quality": option.dataset['quality'],
+            }
+
+            let include = true;
+            option.classList.add('r-tablerow');
+            option.classList.remove('hidden');
+            optionHeader.classList.add('r-tablerow');
+            optionHeader.classList.remove('hidden');
+            option.querySelector('input[type="checkbox"]').checked = false;
+
+            for (let [key, value] of Object.entries(activeFilter)) {
+                if (value === "" || key === "season") {
+                    continue;
+                }
+                if (key === "codec" && value === "h264") {
+                    if (!this.H264_CODECS.includes(props[key].toLowerCase())) {
+                        include = false;
+                    }
+                } else if (key === "codec" && value === "h265") {
+                    if (!this.H265_CODECS.includes(props[key].toLowerCase())) {
+                        include = false;
+                    }
+                } else if (key === "language") {
+                    if (!props["languages"].includes(value)) {
+                        include = false;
+                    }
+                } else if (props[key] !== value) {
+                    include = false;
+                }
+            }
+
+            if (false === include) {
+                option.classList.remove('r-tablerow');
+                option.classList.add('hidden');
+                optionHeader.classList.remove('r-tablerow');
+                optionHeader.classList.add('hidden');
+            } else if (true === firstIncluded) {
+                count = 1;
+                selectedCount = selectedCount + 1;
+                option.querySelector('input[type="checkbox"]').checked = true;
+                firstIncluded = false;
+            } else {
+                count = count + 1;
+            }
+
+            this.#resultsCountNumberEl.innerText = count;
+        });
+    }
 }

assets/controllers/result_filter_controller.js

@@ -128,7 +128,6 @@ export default class extends Controller {
 
     async filter() {
         const downloadSeasonSpan = document.querySelector("#downloadSeasonModal");
-        const currentSeason = this.activeFilter['season'];
 
         let results = [];
         this.activeFilter = {
@@ -141,14 +140,22 @@ export default class extends Controller {
 
         if ("movies" === this.mediaTypeValue) {
             results = this.movieResultsOutlets;
-            await results.forEach((list) => list.filter(this.activeFilter));
 
         } else if ("tvshows" === this.mediaTypeValue) {
             results = this.tvResultsOutlets;
+            downloadSeasonSpan.innerText = this.seasonTarget.value;
             this.activeFilter.season = this.seasonTarget.value;
-            downloadSeasonSpan.innerText = this.activeFilter.season;
-            await results.forEach((list) => list.filter(this.activeFilter, currentSeason, this.seasonTarget.value));
         }
+
+        const event = new CustomEvent('filterDownloadOptions', {
+            detail: {
+                activeFilter: this.activeFilter
+            }
+        })
+
+        document.dispatchEvent(event);
+
+        // await results.forEach((list) => list.filter(this.activeFilter));
     }
 
     setSeason(event) {

assets/controllers/tv_results_controller.js

@@ -83,77 +83,4 @@ export default class extends Controller {
             }
         })
     }
-
-    async filter(activeFilter, currentSeason, newSeason) {
-        if (currentSeason !== activeFilter['season']) {
-            if (this.seasonValue === newSeason) {
-                await this.setActive();
-            } else {
-                await this.setInActive();
-            }
-        }
-
-        if (false === this.isActive()) {
-            return;
-        }
-
-        let firstIncluded = true;
-        let count = 0;
-        let selectedCount = 0;
-
-        this.options.forEach((option) => {
-            const optionHeader = document.querySelector(`[data-option-id="${option.dataset['localId']}"]`)
-            const props = {
-                "resolution": option.querySelector('#resolution').textContent.trim(),
-                "codec": option.querySelector('#codec').textContent.trim(),
-                "provider": option.querySelector('#provider').textContent.trim(),
-                "languages": JSON.parse(option.dataset['languages']),
-                "quality": option.dataset['quality'],
-            }
-
-            let include = true;
-            option.classList.add('r-tablerow');
-            option.classList.remove('hidden');
-            optionHeader.classList.add('r-tablerow');
-            optionHeader.classList.remove('hidden');
-            option.querySelector('input[type="checkbox"]').checked = false;
-
-            for (let [key, value] of Object.entries(activeFilter)) {
-                if (value === "" || key === "season") {
-                    continue;
-                }
-                if (key === "codec" && value === "h264") {
-                    if (!this.H264_CODECS.includes(props[key].toLowerCase())) {
-                        include = false;
-                    }
-                } else if (key === "codec" && value === "h265") {
-                    if (!this.H265_CODECS.includes(props[key].toLowerCase())) {
-                        include = false;
-                    }
-                } else if (key === "language") {
-                    if (!props["languages"].includes(value)) {
-                        include = false;
-                    }
-                } else if (props[key] !== value) {
-                    include = false;
-                }
-            }
-
-            if (false === include) {
-                option.classList.remove('r-tablerow');
-                option.classList.add('hidden');
-                optionHeader.classList.remove('r-tablerow');
-                optionHeader.classList.add('hidden');
-            } else if (true === firstIncluded) {
-                count = 1;
-                selectedCount = selectedCount + 1;
-                option.querySelector('input[type="checkbox"]').checked = true;
-                firstIncluded = false;
-            } else {
-                count = count + 1;
-            }
-
-            this.countTarget.innerText = count;
-        });
-    }
 }

templates/components/TvEpisodeList.html.twig

@@ -31,7 +31,7 @@
                                 <p>{{ episode['overview']|truncate }}</p>
                                 <div>
                                     <button class="results-count-badge py-1 px-1.5 mr-1 grow-0 font-bold text-xs bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white" title="Click to expand the results table for season {{ episode['season_number'] }} episode {{ episode['episode_number'] }}.">
-                                        <span {{ stimulus_target('tv-results', 'count') }}>-</span> results
+                                        <span class="results-count-number" {{ stimulus_target('tv-results', 'count') }}>-</span> results
                                     </button>
 
                                     <small class="py-1 px-1.5 mr-1 grow-0 font-bold bg-gray-700 rounded-lg font-normal text-white" title='"{{ episode['name'] }}" aired on {{ episode['air_date']|date(null, 'UTC') }}.'>

templates/torrentio/partial/option-table.html.twig

@@ -41,7 +41,7 @@
     </thead>
     <tbody class="flex-1 sm:flex-none">
     {% for result in results.results %}
-        <tr class="bg-white dark:bg-slate-700 flex flex-col flex-no wrap r-tablerow border-b border-gray-500" data-local-id="{{ result.localId }}" data-provider="{{ result.provider }}" data-quality="{{ result.quality }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
+        <tr class="download-option bg-white dark:bg-slate-700 flex flex-col flex-no wrap r-tablerow border-b border-gray-500" data-local-id="{{ result.localId }}" data-provider="{{ result.provider }}" data-quality="{{ result.quality }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }}"{% endif %}>
             <td id="size" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                 {{ result.size }}
             </td>