wip: working 'download selected' button

assets/components/download-option-tr.js

@@ -2,6 +2,10 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
     H264_CODECS = ['h264', 'h.264', 'x264']
     H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
 
+    #downloadBtnEl;
+    #selectEpisodeInputEl;
+
+    url;
     size;
     quality;
     resolution;
@@ -12,26 +16,47 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
     mediaType;
     season;
     episode;
+    filename;
+    imdbId;
+    episodeId;
+    mediaTitle;
 
     constructor() {
         super();
+        this.url = this.getAttribute('url');
         this.size = this.getAttribute('size');
         this.quality = this.getAttribute('quality');
         this.resolution = this.getAttribute('resolution');
         this.codec = this.getAttribute('codec');
         this.seeders = this.getAttribute('seeders');
         this.provider = this.getAttribute('provider');
+        this.filename = this.getAttribute('filename');
+        this.imdbId = this.getAttribute('imdb-id');
         this.languages = JSON.parse(this.getAttribute('languages'));
         this.mediaType = this.getAttribute('media-type');
+        this.mediaTitle = this.getAttribute('media-title');
         this.season = this.getAttribute('season') ?? null;
         this.episode = this.getAttribute('episode') ?? null;
+        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;
+    }
+
+    set isSelected(value) {
+        this.#selectEpisodeInputEl.checked = value;
+    }
+
     // attribute change
     attributeChangedCallback(property, oldValue, newValue) {
         if (oldValue === newValue) return;
@@ -90,4 +115,27 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
 
         return include;
     }
+
+    download() {
+        console.log('Downloading dis bihh')
+        fetch('/api/download', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            },
+            body: JSON.stringify({
+                url: this.url,
+                title: this.mediaTitle,
+                filename: this.filename,
+                mediaType: this.mediaType,
+                imdbId: this.imdbId,
+                episodeId: this.episodeId
+            })
+        })
+            .then(res => res.json())
+            .then(json => {
+                console.log(json)
+            })
+    }
 }

assets/components/episode-container.js

@@ -3,6 +3,7 @@ export default class EpisodeContainer extends HTMLElement {
     H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
 
     options = [];
+    showTitle;
 
     #episodeSelectorEl;
     #resultsToggleBtnEl;
@@ -12,6 +13,7 @@ export default class EpisodeContainer extends HTMLElement {
 
     constructor() {
         super();
+        this.showTitle = this.getAttribute('show-title');
         this.#resultsTableEl = this.querySelector('.results-container');
         this.#resultsToggleBtnEl = this.querySelector('.dropdown-button');
         this.#resultsCountBadgeEl = this.querySelector('.results-count-badge');
@@ -22,6 +24,7 @@ export default class EpisodeContainer extends HTMLElement {
         this.#resultsCountBadgeEl.addEventListener('click', () => this.toggleResults());
 
         document.addEventListener('filterDownloadOptions', this.filter.bind(this));
+        document.addEventListener('downloadSelectedEpisodes', this.downloadSelectedResults.bind(this));
         document.addEventListener('selectEpisodeForDownload', (e) => this.selectEpisodeForDownload(e.detail.select));
     }
     connectedCallback() {
@@ -50,6 +53,20 @@ export default class EpisodeContainer extends HTMLElement {
         }
     }
 
+    downloadSelectedResults() {
+        if (this.#episodeSelectorEl.disabled === false &&
+            this.#episodeSelectorEl.checked === true
+        ) {
+            console.log('episode is selected')
+            this.options.forEach(option => {
+                if (option.isSelected === true) {
+                    option.download();
+                }
+                option.isSelected = false;
+            })
+        }
+    }
+
     filter({ detail: { activeFilter } }) {
         let firstIncluded = true;
         let count = 0;

assets/controllers/result_filter_controller.js

@@ -164,10 +164,6 @@ export default class extends Controller {
         this.tvEpisodeListOutlet.setSeason(event.target.value);
     }
 
-    uncheckSelectAllBtn() {
-        this.selectAllTarget.checked = false;
-    }
-
     downloadSeason() {
         fetch(`/api/download/season/${this.imdbIdValue}/${this.activeFilter['season']}`, {
             headers: {
@@ -177,11 +173,6 @@ export default class extends Controller {
     }
 
     downloadSelectedEpisodes() {
-        this.tvResultsOutlets.forEach(episode => {
-            if (episode.isActive() && episode.isSelected()) {
-                episode.download();
-            }
-        });
-        this.selectAllTarget.checked = false;
+        document.dispatchEvent(new CustomEvent('downloadSelectedEpisodes', {}));
     }
 }

assets/controllers/tv_results_controller.js

@@ -38,10 +38,6 @@ export default class extends Controller {
         }
     }
 
-    isSelected() {
-        return this.episodeSelectorTarget.checked;
-    }
-
     download() {
         this.element.options.forEach(option => {
             const optionSelector = option.querySelector('input[type="checkbox"]');

src/Torrentio/Action/Handler/GetTvShowOptionsHandler.php

@@ -28,6 +28,7 @@ class GetTvShowOptionsHandler implements HandlerInterface
         $file = $this->mediaFiles->episodeExists($parentShow->title, $command->season, $command->episode);
 
         return new GetTvShowOptionsResult(
+            parentShow: $parentShow,
             media: $media,
             file: MediaFileDto::fromSplFileInfo($file),
             season: $command->season,

src/Torrentio/Action/Result/GetTvShowOptionsResult.php

@@ -9,6 +9,7 @@ use OneToMany\RichBundle\Contract\ResultInterface;
 class GetTvShowOptionsResult implements ResultInterface
 {
     public function __construct(
+        public TmdbResult $parentShow,
         public TmdbResult $media,
         public MediaFileDto|false $file,
         public string $season,

templates/components/TvEpisodeList.html.twig

@@ -4,6 +4,7 @@
     <div data-live-id="{{ uniqid() }}" class="episode-container flex flex-col gap-4">
         {% for episode in this.getEpisodes().items %}
             <episode-container id="{{ episode_anchor(episode['season_number'], episode['episode_number']) }}" class="results"
+                 show-title="{{ this.title }}"
                  data-tv-results-loading-icon-outlet=".loading-icon"
                  data-download-button-outlet=".download-btn"
                     {{ stimulus_controller('tv_results', {

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

@@ -43,6 +43,7 @@
     {% for result in results.results %}
         <tr is="dl-tr"
             class="download-option bg-white dark:bg-slate-700 flex flex-col flex-no wrap r-tablerow border-b border-gray-500"
+            url="{{ result.url }}"
             size="{{ result.size }}"
             quality="{{ result.quality }}"
             resolution="{{ result.resolution }}"
@@ -51,10 +52,16 @@
             provider="{{ result.provider }}"
             languages="{{ result.languages|json_encode }}"
             media-type="{{ results.media.mediaType }}"
+            imdb-id="{{ results.media.imdbId }}"
+            filename="{{ result.filename }}"
             data-local-id="{{ result.localId }}"
             {% if "tvshows" == results.media.mediaType %}
                 season="{{ result.season }}"
                 episode="{{ result.episodeNumber }}"
+                episode-id="{{ episode_id(result.season, result.episodeNumber) }}"
+                media-title="{{ results.parentShow.title }}"
+            {% else %}
+                media-title="{{ results.media.title }}"
             {% endif %}
         >
             <td id="size" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
@@ -79,17 +86,7 @@
                 {{ result.languageFlags|raw }}
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-start mb:justify-end">
-                        <button class="download-btn p-1.5 bg-green-600 rounded-md text-gray-50"
-                            {{ stimulus_controller('download_button', {
-                                url: result.url,
-                                title: results.media.title,
-                                filename: result.filename,
-                                mediaType: results.media.mediaType,
-                                imdbId: results.media.imdbId ?? app.current_route_parameters.imdbId,
-                                episodeId: results|episode_id_from_results
-                            }) }}
-                            {{ stimulus_action('download_button', 'download', 'click') }}
-                        >
+                        <button class="download-btn p-1.5 bg-green-600 rounded-md text-gray-50">
                             Download
                         </button>
                 <label for="select">