fix: filter style tweaks, loading icon patch

assets/controllers/loading_icon_controller.js

@@ -14,7 +14,22 @@ export default class extends Controller {
     static targets = ['icon']
 
     connect() {
+        this.element.hideIcon = this.hideIcon.bind(this);
+        this.element.showIcon = this.showIcon.bind(this);
+        this.element.toggleIcon = this.toggleIcon.bind(this);
+        this.element.isVisibile = this.isVisible.bind(this);
+    }
 
+    isVisible() {
+        return !this.iconTarget.classList.contains('hidden');
+    }
+
+    showIcon() {
+        this.iconTarget.classList.remove('hidden');
+    }
+
+    hideIcon() {
+        this.iconTarget.classList.add('hidden');
     }
 
     toggleIcon() {

assets/controllers/result_filter_controller.js

@@ -22,7 +22,7 @@ export default class extends Controller {
     defaultOptions = '<option value="">n/a</option><option value="-">-</option>';
 
     static outlets = ['tv-episode-list']
-    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'selectAll', 'downloadSelected']
+    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'loadingIcon', 'selectAll', 'downloadSelected']
     static values = {
         'imdbId': String,
         'media-type': String,
@@ -34,19 +34,24 @@ export default class extends Controller {
         if (this.mediaTypeValue === "tvshows") {
             this.activeFilter['season'] = 1;
         }
-        await this.filter();
+        this.filter();
+        this.setTimerToStopLoadingIcon();
 
         document.addEventListener('optionsLoaded', this.loadOptions.bind(this));
     }
 
+    setTimerToStopLoadingIcon() {
+        setTimeout(() => this.loadingIconTarget.hideIcon(), 10000);
+    }
+
     // Event is fired from movies/tvshows controllers to populate this data
-    async loadOptions({detail: { options }}) {
-        await options.forEach((option) => {
+    loadOptions({detail: { options }}) {
+        options.forEach((option) => {
             this.addLanguages(option);
             this.addProviders(option);
             this.addQualities(option);
         })
-        await this.filter();
+        this.filter();
     }
 
     selectAllEpisodes() {
@@ -96,7 +101,7 @@ export default class extends Controller {
         this.qualityTarget.tomselect.items = preferred;
     }
 
-    async filter() {
+    filter() {
         const downloadSeasonSpan = document.querySelector("#downloadSeasonModal");
 
         this.activeFilter = {

assets/icons/zondicons/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" d="m0 11l2-2l5 5L18 3l2 2L7 18z"/></svg>

src/User/Framework/Form/UserMediaPreferencesForm.php

@@ -8,7 +8,10 @@ use App\User\Database\CountryLanguages;
 use App\User\Database\ProviderList;
 use App\User\Database\QualityList;
 use App\User\Database\ResolutionList;
+use App\User\Dto\UserPreferences;
+use App\User\Dto\UserPreferencesFactory;
 use App\User\Framework\Repository\PreferenceOptionRepository;
+use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Event\PreSetDataEvent;
 use Symfony\Component\Form\Event\PreSubmitEvent;
@@ -21,9 +24,14 @@ use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 class UserMediaPreferencesForm extends AbstractType
 {
+    private UserPreferences $userPreferences;
+
     public function __construct(
         private readonly UrlGeneratorInterface $urlGenerator,
-    ) {}
+        private readonly Security $security,
+    ) {
+        $this->userPreferences = UserPreferencesFactory::createFromUser($security->getUser());
+    }
 
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
@@ -42,6 +50,7 @@ class UserMediaPreferencesForm extends AbstractType
                 'data-result-filter-target' => $fieldName,
                 'data-controller' => 'symfony--ux-autocomplete--autocomplete',
                 'data-symfony--ux-autocomplete--autocomplete-tom-select-options-value' => '{"highlight":false}',
+                'data-preferred' => \json_encode($this->userPreferences->$fieldName),
             ],
             'row_attr' => [
                 'class' => 'filter-label'

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
       "bg-orange-400",
       "bg-blue-600",
       "bg-rose-600",
+      "bg-black/20",
       "alert-success",
       "alert-warning",
       "font-bold",

templates/components/Filter.html.twig

@@ -8,7 +8,7 @@
 >
     {% set preferences_form = form %}
     {{ form_start(preferences_form) }}
-        <div class="flex flex-row gap-2 justify-between">
+        <div class="flex flex-col md:flex-row gap-2 justify-between">
             {{ form_row(preferences_form.resolution) }}
             {{ form_row(preferences_form.codec) }}
             {{ form_row(preferences_form.language) }}
@@ -16,11 +16,11 @@
             {{ form_row(preferences_form.quality) }}
 
             {% if results.media.mediaType == "tvshows" %}
-                <div class="filter-label">
+                <div class="flex flex-col gap-1 md:gap-3">
                     <label for="season">
                         Season
                     </label>
-                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-0.5 bg-stone-100 text-gray-800"
+                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-1 md:py-2 text-center bg-orange-500 text-white rounded-ms"
                             {{ stimulus_action('result_filter', 'setSeason', 'change') }}
                             {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
                     >
@@ -35,13 +35,15 @@
                 </div>
             {% endif %}
         </div>
+    {{ form_end(preferences_form) }}
 
-    <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
+    <div class="flex flex-col md:flex-row justify-between">
+        <span
+                {{ stimulus_target('result-filter', 'loadingIcon') }}
+                {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
             class="loading-icon">
             <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
         </span>
-    {{ form_end(preferences_form) }}
-
 
         {% if results.media.mediaType == "tvshows" %}
             <div class="flex flex-row gap-2 justify-end px-8">
@@ -64,4 +66,5 @@
                 />
             </div>
         {% endif %}
+    </div>
 </div>

templates/components/SearchResult.html.twig

@@ -10,7 +10,7 @@
 
         <div class="w-full flex flex-col">
             <h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
-                {{ title }} - {{ year }}
+                {{ title }} ({{ year }})
             </h3>
             <p class="hidden md:block md:text-gray-50">
                 {{ description }}

templates/components/SubmitButton.html.twig

@@ -0,0 +1,8 @@
+<button class="submit-button flex flex-row gap-2 items-center">
+    {% if show_icon|default %}
+        <twig:ux:icon name="zondicons:checkmark" width=".8rem" class="text-green-500" />
+    {% endif %}
+    {% if false == icon_only|default(false) %}
+        {{ text|default('submit') }}
+    {% endif %}
+</button>

templates/search/result.html.twig

@@ -19,7 +19,7 @@
                     <div class="w-full flex flex-col">
                         <div class="mb-4 flex flex-row gap-2 justify-between">
                             <h3 class="text-xl font-medium leading-tight font-bold text-gray-50">
-                                {{ results.media.title }} - {{ results.media.year }}
+                                {{ results.media.title }} ({{ results.media.year }})
                             </h3>
 
                             {% if results.media.mediaType == "tvshows" %}

templates/user/preferences.html.twig

@@ -7,17 +7,15 @@
     <twig:Card title="Media Preferences" class="w-full">
         <p class="text-gray-50 mb-4">Define a filter to be pre-applied to your download options.</p>
         <div id="filter">
-            {{ form_start(preferences_form.instantiateForm) }}
-                <div class="flex flex-row gap-2">
+            {{ form_start(preferences_form) }}
+                <div class="flex flex-col md:flex-row gap-2">
                     {{ form_row(preferences_form.resolution) }}
                     {{ form_row(preferences_form.codec) }}
                     {{ form_row(preferences_form.language) }}
                     {{ form_row(preferences_form.provider) }}
                     {{ form_row(preferences_form.quality) }}
-                </div>
-                <div class="flex flex-row justify-end">
-                    <div>
-                        <button class="submit-button">Save</button>
+                    <div class="self-end mb-4">
+                        <twig:SubmitButton show_icon text="Save"/>
                     </div>
                 </div>
             {{ form_end(preferences_form) }}