fix: turbo frame for tvshow results

assets/controllers/tv_results_controller.js

@@ -25,37 +25,18 @@ export default class extends Controller {
     optionsLoaded = false
     isOpen = false
 
-    async connect() {
-        await this.setOptions();
-    }
-
-    async setOptions() {
-        if (this.optionsLoaded === false) {
-            this.optionsLoaded = true;
-            let response;
-
-            try {
-                response = await fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
-            } catch (error) {
-                console.log('There was an error', error);
-            }
-
-            if (response?.ok) {
-                response = await response.text()
-                this.listContainerTarget.innerHTML = response;
-                this.options = this.element.querySelectorAll('tbody tr');
-                if (this.options.length > 0) {
-                    this.options.forEach((option) => option.querySelector('.download-btn').dataset['title'] = this.titleValue);
-                    this.options[0].querySelector('input[type="checkbox"]').checked = true;
-                } else {
-                    this.countTarget.innerText = 0;
-                    this.episodeSelectorTarget.disabled = true;
-                }
-                this.dispatch('optionsLoaded', {detail: {options: this.options}})
-                this.loadingIconOutlet.increaseCount();
-            } else {
-                console.log(`HTTP Response Code: ${response?.status}`)
-            }
+    async listTargetConnected() {
+        this.options = this.element.querySelectorAll('tbody tr');
+        if (this.options.length > 0) {
+            this.options.forEach((option) =>
+                option.querySelector('.download-btn').dataset['title'] = this.titleValue
+            );
+            this.options[0].querySelector('input[type="checkbox"]').checked = true;
+            this.dispatch('optionsLoaded', {detail: {options: this.options}})
+            this.loadingIconOutlet.increaseCount();
+        } else {
+            this.countTarget.innerText = 0;
+            this.episodeSelectorTarget.disabled = true;
         }
     }
 
@@ -134,6 +115,7 @@ export default class extends Controller {
                 "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;

src/Torrentio/Framework/Controller/WebController.php

@@ -35,8 +35,8 @@ final class WebController extends AbstractController
             $input->imdbId
         );
 
-       // return $cache->get($cacheId, function (ItemInterface $item) use ($input, $request) {
-       //     $item->expiresAt(Carbon::now()->addHour()->setMinute(0)->setSecond(0));
+        return $cache->get($cacheId, function (ItemInterface $item) use ($input, $request) {
+            $item->expiresAt(Carbon::now()->addHour()->setMinute(0)->setSecond(0));
             $results = $this->getMovieOptionsHandler->handle($input->toCommand());
 
             if ($request->headers->get('Turbo-Frame')) {
@@ -46,11 +46,11 @@ final class WebController extends AbstractController
             return $this->render('torrentio/movies.html.twig', [
                 'results' => $results,
             ]);
-        //});
+        });
     }
 
     #[Route('/torrentio/tvshows/{tmdbId}/{imdbId}/{season?}/{episode?}', name: 'app_torrentio_tvshows')]
-    public function tvShowOptions(GetTvShowOptionsInput $input, CacheInterface $cache): Response
+    public function tvShowOptions(GetTvShowOptionsInput $input, CacheInterface $cache, Request $request): Response
     {
         $cacheId = sprintf(
             "page.torrentio.tvshows.%s.%s.%s.%s",
@@ -61,9 +61,14 @@ final class WebController extends AbstractController
         );
 
         try {
-//            return $cache->get($cacheId, function (ItemInterface $item) use ($input) {
+//            return $cache->get($cacheId, function (ItemInterface $item) use ($input, $request) {
 //                $item->expiresAt(Carbon::now()->addHour()->setMinute(0)->setSecond(0));
                 $results = $this->getTvShowOptionsHandler->handle($input->toCommand());
+
+                if ($request->headers->get('Turbo-Frame')) {
+                    return $this->sendFragmentResponse($results, $request);
+                }
+
                 return $this->render('torrentio/tvshows.html.twig', [
                     'results' => $results,
                 ]);

templates/components/TvEpisodeList.html.twig

@@ -74,8 +74,15 @@
                             </button>
                         </div>
                     </div>
-                    <div {{ stimulus_target('tv-results', 'listContainer') }} class="inline-block overflow-hidden rounded-lg">
-
+                    <div class="inline-block overflow-hidden rounded-lg">
+                        <twig:Turbo:Frame id="results_{{ episode_id(episode['season_number'], episode['episode_number']) }}" src="{{ path('app_torrentio_tvshows', {
+                            tmdbId: this.tmdbId,
+                            imdbId: this.imdbId,
+                            season: episode['season_number'],
+                            episode: episode['episode_number'],
+                            target: 'results_' ~ episode_id(episode['season_number'], episode['episode_number']),
+                            block: 'tvshow_results'
+                        }) }}" />
                     </div>
                 </div>
             </div>

templates/torrentio/fragments.html.twig

@@ -8,4 +8,12 @@
             </div>
         </template>
     </turbo-stream>
+{% endblock %}
+
+{% block tvshow_results %}
+    <turbo-stream action="replace" targets="#{{ target }}">
+        <template>
+            {{ include('torrentio/partial/option-table.html.twig', {controller: 'tv-results'}) }}
+        </template>
+    </turbo-stream>
 {% endblock %}