wip: filters movie results, adds options to filter input

assets/controllers/movie_results_controller.js

@@ -52,6 +52,7 @@ export default class extends Controller {
                 "resolution": option.querySelector('#resolution').textContent.trim(),
                 "codec": option.querySelector('#codec').textContent.trim(),
                 "provider": option.querySelector('#provider').textContent.trim(),
+                "quality": option.dataset['quality'],
                 "languages": JSON.parse(option.dataset['languages']),
             }
 

assets/controllers/result_filter_controller.js

@@ -11,6 +11,7 @@ export default class extends Controller {
 
     languages = []
     providers = []
+    qualities = []
     seasons = []
 
     activeFilter = {
@@ -18,10 +19,11 @@ export default class extends Controller {
         "codec": "",
         "language": "",
         "provider": "",
+        "quality": "",
     }
 
     static outlets = ['movie-results', 'tv-results', 'tv-episode-list']
-    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'selectAll', 'downloadSelected']
+    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'selectAll', 'downloadSelected']
     static values = {
         'media-type': String,
         'episodes': Array,
@@ -49,6 +51,7 @@ export default class extends Controller {
         outlet.options.forEach((option) => {
             this.addLanguages(option, option.dataset);
             this.addProviders(option, option.dataset);
+            this.addQualities(option, option.dataset);
         })
         await this.filter();
     }
@@ -105,6 +108,30 @@ export default class extends Controller {
 
     }
 
+    addQualities(option, props) {
+        if (!this.qualities.includes(props['quality'])) {
+            this.qualities.push(props['quality']);
+        }
+
+        const preferred = this.qualityTarget.dataset.preferred;
+        if (preferred) {
+            this.qualityTarget.innerHTML = '<option value="'+preferred+'" selected>'+preferred+'</option>';
+            this.qualityTarget.innerHTML += '<option value="">n/a</option>';
+        } else {
+            this.qualityTarget.innerHTML = '<option value="">n/a</option>';
+        }
+
+        this.qualityTarget.innerHTML += this.qualities.sort()
+            .map((quality) => {
+                const preferred = this.qualityTarget.dataset.preferred;
+                if (preferred === quality) {
+                    return;
+                }
+                return '<option value="' + quality + '">' + quality + '</option>'
+            })
+            .join();
+    }
+
     async filter() {
         const currentSeason = this.activeFilter['season'];
 
@@ -114,6 +141,7 @@ export default class extends Controller {
             "codec": this.codecTarget.value,
             "language": this.languageTarget.value,
             "provider": this.providerTarget.value,
+            "quality": this.qualityTarget.value,
         }
 
         if ("movies" === this.mediaTypeValue) {