wip: working episode pagination, season switcher, monitor only new content

assets/controllers/result_filter_controller.js

@@ -20,7 +20,7 @@ export default class extends Controller {
         "provider": "",
     }
 
-    static outlets = ['movie-results', 'tv-results']
+    static outlets = ['movie-results', 'tv-results', 'tv-episode-list']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'selectAll', 'downloadSelected']
     static values = {
         'media-type': String,
@@ -127,6 +127,10 @@ export default class extends Controller {
         }
     }
 
+    setSeason(event) {
+        this.tvEpisodeListOutlet.setSeason(event.target.value);
+    }
+
     uncheckSelectAllBtn() {
         this.selectAllTarget.checked = false;
     }

assets/controllers/tv_episode_list_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
+*/
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    async initialize() {
+        this.component = await getComponent(this.element);
+        this.component.on('render:finished', (component) => {
+            console.log(component);
+        });
+    }
+
+    setSeason(season) {
+        this.element.querySelectorAll(".episode-container").forEach(element => element.remove());
+        this.component.set('pageNumber', 1);
+        this.component.set('season', parseInt(season));
+        this.component.render();
+    }
+
+    paginate(event) {
+        console.log(event.params.page)
+        this.element.querySelectorAll(".episode-container").forEach(element => element.remove());
+        this.component.action('paginate', {page: event.params.page});
+        this.component.render();
+    }
+
+    connect() {
+        // Called every time the controller is connected to the DOM
+        // (on page load, when it's added to the DOM, moved in the DOM, etc.)
+
+        // Here you can add event listeners on the element or target elements,
+        // add or remove classes, attributes, dispatch custom events, etc.
+        // this.fooTarget.addEventListener('click', this._fooBar)
+    }
+
+    // Add custom controller actions here
+    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
+
+    disconnect() {
+        // Called anytime its element is disconnected from the DOM
+        // (on page change, when it's removed from or moved in the DOM, etc.)
+
+        // Here you should remove all event listeners added in "connect()" 
+        // this.fooTarget.removeEventListener('click', this._fooBar)
+    }
+}

assets/controllers/tv_results_controller.js

@@ -29,7 +29,7 @@ export default class extends Controller {
     }
 
     async setOptions() {
-        if (true === this.activeValue && this.optionsLoaded === false) {
+        if (this.optionsLoaded === false) {
             this.optionsLoaded = true;
             await fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
                 .then(res => res.text())
@@ -56,7 +56,7 @@ export default class extends Controller {
 
     async setActive() {
         this.activeValue = true;
-        this.element.classList.remove('hidden');
+        // this.element.classList.remove('hidden');
         if (false === this.optionsLoaded) {
             await this.setOptions();
         }
@@ -67,7 +67,7 @@ export default class extends Controller {
         // if (true === this.hasEpisodeSelectorTarget()) {
         this.episodeSelectorTarget.checked = false;
         // }
-        this.element.classList.add('hidden');
+        // this.element.classList.add('hidden');
     }
 
     isActive() {