wip-feat: movie result filter

assets/controllers/movie_results_controller.js

@@ -10,11 +10,20 @@ export default class extends Controller {
         imdbId: String
     };
 
+    static targets = ['list']
+
+    options = []
+
     connect() {
         fetch(`/torrentio/movies/${this.imdbIdValue}`)
             .then(res => res.text())
             .then(response => {
                 this.element.innerHTML = response;
+                this.options = this.element.querySelectorAll('tbody tr');
             });
     }
+
+    listTargetConnected(target) {
+        // console.log(target);
+    }
 }

assets/controllers/result_filter_controller.js

@@ -6,5 +6,100 @@ import { Controller } from '@hotwired/stimulus';
 */
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
-    // ...
+    H264_CODECS = ['h264', 'h.264', 'x264']
+    H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
+
+    static outlets = ['movie-results']
+    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'episode']
+    static values = {
+        'media-type': String
+    }
+
+    filter() {
+        let resultList = this.movieResultsOutlet;
+
+        this.activeFilter = {
+            "resolution": this.resolutionTarget.value,
+            "codec": this.codecTarget.value,
+            // "language": this.languageTarget.value,
+            // "episodeNumber": this.episodeTarget.value,
+        }
+
+        if ("tvshows" === this.mediaTypeValue) {
+            this.activeFilter.season = this.seasonTarget.value;
+        }
+
+        console.log(this.activeFilter);
+
+        const filterOperation = (resultList) => {
+            if (resultList.options.length <= 0) {
+                return false;
+            }
+
+            let firstIncluded = true;
+            let count = 0;
+            let selectedCount = 0;
+
+            resultList.options.forEach((option) => {
+                if (option.classList.contains('header-row')) {
+                    return;
+                }
+
+                const props = {
+                    "resolution": option.querySelector('#resolution').textContent.trim(),
+                    "codec": option.querySelector('#codec').textContent.trim(),
+                    // "provider": option.querySelector('#provider').textContent,
+                    // "language": option.querySelector('#language').textContent,
+                    // "codec": option.querySelector('#codec').textContent,
+                }
+
+                let include = true;
+                option.classList.remove('hidden');
+                // option.selectInput.checked = false;
+
+                for (let [key, value] of Object.entries(this.activeFilter)) {
+                    if (value === "") {
+                        continue;
+                    }
+                    if (key === "codec" && value === "h264") {
+                        if (!this.H264_CODECS.includes(props[key].toLowerCase())) {
+                            include = false;
+                        }
+                    } else if (key === "codec" && value === "h265") {
+                        if (!this.H265_CODECS.includes(props[key].toLowerCase())) {
+                            include = false;
+                        }
+                    } else if (key === "language") {
+                        if (!props["languages"].includes(value)) {
+                            include = false;
+                        }
+                    } else if (props[key] !== value) {
+                        include = false;
+                    }
+                }
+
+                if (false === include) {
+                    option.classList.add('hidden');
+                } else if (true === firstIncluded) {
+                    count = 1;
+                    selectedCount = selectedCount + 1;
+                    // option.selectInput.checked = true;
+                    firstIncluded = false;
+                } else {
+                    count = count + 1;
+                }
+            });
+            // resultList.getOptionCountEl().innerHTML = `${count} options`;
+            // resultList.getSelectedCountEl().innerHTML = `${selectedCount} selected`;
+            this.dispatch('setSeason', {
+                detail: {season: parseInt(this.activeFilter.season)}
+            });
+        }
+
+        if (resultList) {
+            filterOperation(resultList);
+        } else {
+            this.resultListOutlets.forEach((resultList) => filterOperation(resultList));
+        }
+    }
 }

templates/search/result.html.twig

@@ -26,6 +26,9 @@
 
                 <div id="filter" class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg"
                      {{ stimulus_controller('result_filter') }}
+                     {{ stimulus_action('result_filter', 'filter', 'change') }}
+                     data-result-filter-media-type-value="{{ results.media.mediaType }}"
+                     data-result-filter-movie-results-outlet=".results"
                 >
                     <label for="resolution">
                         Resolution
@@ -100,7 +103,6 @@
                         {% endfor %}
                     {% endfor %}
                 {% endif %}
-
             </twig:Card>
         </div>
     </div>

templates/torrentio/movies.html.twig

@@ -1,10 +1,6 @@
-
-
 <div class="p-4 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
     <div class="overflow-hidden rounded-md">
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
+        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400" {{ stimulus_target('movie_results', 'list') }} >
-               data-movies-list-target="list"
-        >
             <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
             <tr class="dark:bg-stone-600 overflow-hidden">
                 <th scope="col"
@@ -39,22 +35,22 @@
             <tbody>
             {% for result in results.results %}
                 <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                    <td id="size" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.size }}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                    <td id="resolution" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.resolution }}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                    <td id="codec" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.codec }}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                    <td id="seeders" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.seeders }}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                    <td id="provider" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.provider }}
                     </td>
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
+                    <td id="language" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.languageFlags }}
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-end">

templates/torrentio/tvshows.html.twig

@@ -84,9 +84,6 @@
                 </tr>
             {% endfor %}
             </tbody>
-            <caption>
-                {{ results.results|length }} results
-            </caption>
         </table>
     </div>
 </div>