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;
+        });
+    }
 }