feat: uses web components to simplify javascript logic

assets/components/download-option-tr.js

@@ -40,15 +40,9 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
         this.episodeId = this.getAttribute('episode-id') ?? null;
         this.#downloadBtnEl = this.querySelector('.download-btn');
         this.#selectEpisodeInputEl = this.querySelector('input[type="checkbox"]');
-        console.log(this.#selectEpisodeInputEl)
 
         this.#downloadBtnEl.addEventListener('click', () => this.download());
-        // document.addEventListener('filterDownloadOptions', this.filter.bind(this));
     }
-    connectedCallback() {
-
-    }
-
     get isSelected() {
         return this.#selectEpisodeInputEl.checked;
     }
@@ -57,16 +51,6 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
         this.#selectEpisodeInputEl.checked = value;
     }
 
-    // attribute change
-    attributeChangedCallback(property, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        this[ property ] = newValue;
-    }
-
-    static get observedAttributes() {
-        return ['size', 'quality', 'resolution', 'codec', 'seeders', 'provider'];
-    }
-
     filter({ detail: { activeFilter } }) {
         const optionHeader = document.querySelector(`[data-option-id="${this.dataset['localId']}"]`)
         const props = {
@@ -117,7 +101,6 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
     }
 
     download() {
-        console.log('Downloading dis bihh')
         fetch('/api/download', {
             method: 'POST',
             headers: {

assets/components/episode-container.js

@@ -1,7 +1,4 @@
 export default class EpisodeContainer extends HTMLElement {
-    H264_CODECS = ['h264', 'h.264', 'x264']
-    H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
-
     options = [];
     showTitle;
 
@@ -27,19 +24,6 @@ export default class EpisodeContainer extends HTMLElement {
         document.addEventListener('downloadSelectedEpisodes', this.downloadSelectedResults.bind(this));
         document.addEventListener('selectEpisodeForDownload', (e) => this.selectEpisodeForDownload(e.detail.select));
     }
-    connectedCallback() {
-
-    }
-
-    // attribute change
-    attributeChangedCallback(property, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        this[ property ] = newValue;
-    }
-
-    static get observedAttributes() {
-        return ['name'];
-    }
 
     toggleResults() {
         this.#resultsToggleBtnEl.classList.toggle('rotate-90');

assets/components/movie-container.js

@@ -1,7 +1,4 @@
 export default class MovieContainer extends HTMLElement {
-    H264_CODECS = ['h264', 'h.264', 'x264']
-    H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
-
     #resultsTableEl;
     #resultsCountNumberEl;
 
@@ -13,12 +10,6 @@ export default class MovieContainer extends HTMLElement {
         document.addEventListener('filterDownloadOptions', this.filter.bind(this));
     }
 
-    // attribute change
-    attributeChangedCallback(property, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        this[ property ] = newValue;
-    }
-
     filter({ detail: { activeFilter } }) {
         const options = this.querySelectorAll('tr.download-option');
         let firstIncluded = true;

assets/controllers/movie_results_controller.js

@@ -6,9 +6,6 @@ import { Controller } from '@hotwired/stimulus';
 */
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
-    H264_CODECS = ['h264', 'h.264', 'x264']
-    H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
-
     static values = {
         title: String,
         tmdbId: String,

assets/controllers/result_filter_controller.js

@@ -19,7 +19,7 @@ export default class extends Controller {
         "quality": "",
     }
 
-    static outlets = ['movie-results', 'tv-results', 'tv-episode-list']
+    static outlets = ['tv-episode-list']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'selectAll', 'downloadSelected']
     static values = {
         'imdbId': String,
@@ -55,6 +55,10 @@ export default class extends Controller {
         }));
     }
 
+    downloadSelectedEpisodes() {
+        document.dispatchEvent(new CustomEvent('downloadSelectedEpisodes', {}));
+    }
+
     addLanguages(option) {
         const languages = Object.assign([], option.languages);
         languages.forEach((language) => {
@@ -171,8 +175,4 @@ export default class extends Controller {
             }
         })
     }
-
-    downloadSelectedEpisodes() {
-        document.dispatchEvent(new CustomEvent('downloadSelectedEpisodes', {}));
-    }
 }

assets/controllers/tv_results_controller.js

@@ -18,7 +18,7 @@ export default class extends Controller {
         active: Boolean,
     };
 
-    static targets = ['list', 'count', 'episodeSelector', 'toggleButton', 'listContainer']
+    static targets = ['list', 'count', 'episodeSelector',]
     static outlets = ['loading-icon']
 
     options = []
@@ -37,17 +37,4 @@ export default class extends Controller {
             this.episodeSelectorTarget.disabled = true;
         }
     }
-
-    download() {
-        this.element.options.forEach(option => {
-            const optionSelector = option.querySelector('input[type="checkbox"]');
-            if (true === optionSelector.checked) {
-                const downloadBtn = option.querySelector('button.download-btn');
-                const downloadBtnController = this.application.getControllerForElementAndIdentifier(downloadBtn, 'download-button');
-                downloadBtnController.download();
-                optionSelector.checked = false;
-                this.episodeSelectorTarget.checked = false;
-            }
-        })
-    }
 }