wip: filter twig component pre-select options

assets/controllers/result_filter_controller.js

@@ -20,6 +20,8 @@ export default class extends Controller {
         "provider": "",
     }
 
+    userPreferences = []
+
     static outlets = ['movie-results', 'tv-results']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'selectAll', 'downloadSelected']
     static values = {
@@ -28,22 +30,11 @@ export default class extends Controller {
     }
 
     async connect() {
-        await fetch('/api/preferences/media')
-            .then(response => response.json())
-            .then(response => {
-                this.addResolutions(response['resolution']);
-                this.addCodecs(response['codec']);
-            });
-
-        await fetch('/api/user/preferences/values')
-            .then(response => response.json())
-            .then(response => {
-                this.activeFilter = response;
-                if (this.mediaTypeValue === "tvshows") {
-                    this.activeFilter['season'] = 1;
-                }
-                console.log(this.activeFilter);
-            })
+        this.userPreferences = await(await fetch('/api/user/preferences/values')).json();
+        if (this.mediaTypeValue === "tvshows") {
+            this.activeFilter['season'] = 1;
+        }
+        await this.filter();
     }
 
     async movieResultsOutletConnected(outlet) {
@@ -67,14 +58,24 @@ export default class extends Controller {
     addResolutions(resolutions) {
         this.resolutionTarget.innerHTML = '<option value="">n/a</option>';
         this.resolutionTarget.innerHTML += resolutions.preferenceOptions
-            .map((resolution) => '<option value="'+resolution.name.toLowerCase()+'">'+resolution.name+'</option>')
+            .map((resolution) => {
+                if ('resolution' in this.userPreferences) {
+                    return '<option value="' + resolution.name.toLowerCase() + '" selected>' + resolution.name + '</option>';
+                }
+                return '<option value="' + resolution.name.toLowerCase() + '">' + resolution.name + '</option>';
+            })
             .join();
     }
 
     addCodecs(codecs) {
         this.codecTarget.innerHTML = '<option value="">n/a</option>';
         this.codecTarget.innerHTML += codecs.preferenceOptions
-            .map((codec) => '<option value="'+codec.name.toLowerCase()+'">'+codec.name+'</option>')
+            .map((codec) => {
+                if ('codec' in this.userPreferences) {
+                    return '<option value="' + codec.name.toLowerCase() + '" selected>' + codec.name + '</option>';
+                }
+                return '<option value="' + codec.name.toLowerCase() + '">' + codec.name + '</option>'
+            })
             .join();
     }
 

assets/controllers/tv_results_controller.js

@@ -26,7 +26,8 @@ export default class extends Controller {
     }
 
     async setOptions() {
-        if (true === this.activeValue) {
+        if (true === this.activeValue && this.optionsLoaded === false) {
+            this.optionsLoaded = true;
             await fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
                 .then(res => res.text())
                 .then(response => {
@@ -38,7 +39,6 @@ export default class extends Controller {
                     } else {
                         this.episodeSelectorTarget.disabled = true;
                     }
-                    this.optionsLoaded = true;
                     this.loadingIconOutlet.increaseCount();
                 });
         }

src/Twig/Components/Filter.php

@@ -2,6 +2,9 @@
 
 namespace App\Twig\Components;
 
+use Aimeos\Map;
+use App\User\Framework\Repository\PreferencesRepository;
+use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\DefaultActionTrait;
 
@@ -9,4 +12,21 @@ use Symfony\UX\LiveComponent\DefaultActionTrait;
 final class Filter
 {
     use DefaultActionTrait;
+
+    public array $preferences = [];
+
+    public array $userPreferences = [];
+
+    public function __construct(
+        private readonly PreferencesRepository $preferencesRepository,
+        private readonly Security $security,
+    ) {
+        $this->preferences = Map::from($this->preferencesRepository->findEnabled())
+            ->rekey(fn($element) => $element->getId())
+            ->map(fn($element) => $element->getPreferenceOptions()->toArray())
+            ->toArray();
+        $this->userPreferences = Map::from($this->security->getUser()->getUserPreferenceValues())
+            ->toArray();
+//        dd($this->userPreferences);
+    }
 }

templates/components/Filter.html.twig

@@ -13,27 +13,19 @@
                     class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
                     value="{{ app.user.userPreferenceValues["resolution"] }}"
             >
-{#                <option {{ filter.resolution == "n/a" ? "selected" }}#}
-{#                        value="">n/a</option>#}
-{#                <option {{ filter.resolution == "720p" ? "selected" }}#}
-{#                        value="720p">720p</option>#}
-{#                <option {{ filter.resolution == "1080p" ? "selected" }}#}
-{#                        value="1080p">1080p</option>#}
-{#                <option {{ filter.resolution == "2160p" ? "selected" }}#}
-{#                        value="2160p">2160p</option>#}
+                <option value="">n/a</option>
+                {% for option in this.preferences['resolution'] %}
+                <option value="{{ option.name|lower }}">{{ option.name }}</option>
+                {% endfor %}
             </select>
         </label>
         <label for="codec">
             Codec
             <select id="codec" data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-sm text-gray-800 rounded-md">
-{#                <option {{ filter.codec == "n/a" ? "selected" }}#}
-{#                        value="">n/a</option>#}
-{#                <option {{ filter.codec == "-" ? "selected" }}#}
-{#                        value="-">-</option>#}
-{#                <option {{ filter.codec == "h264" ? "selected" }}#}
-{#                        value="h264">h264</option>#}
-{#                <option {{ filter.codec == "h265" ? "selected" }}#}
-{#                        value="h265">h265/HEVC</option>#}
+                <option value="">n/a</option>
+                {% for option in this.preferences['codec'] %}
+                    <option value="{{ option.name|lower }}">{{ option.name }}</option>
+                {% endfor %}
             </select>
         </label>
         <label for="language">