wip-feat: language filter

assets/controllers/result_filter_controller.js

@@ -9,12 +9,79 @@ export default class extends Controller {
     H264_CODECS = ['h264', 'h.264', 'x264']
     H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
 
+    languages = []
+    providers = []
+    seasons = []
+
     static outlets = ['movie-results', 'tv-results']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'episode']
     static values = {
         'media-type': String
     }
 
+    async tvResultsOutletConnected(outlet) {
+        if (outlet.options.length === 0) {
+            await outlet.setOptions();
+        }
+        outlet.options.forEach((option) => {
+            this.addLanguages(option, option.dataset);
+            // this.addProviders(option, props);
+            // this.addSeasons(option, props);
+            // this.addEpisodes(option, props);
+        })
+    }
+
+    addLanguages(option, props) {
+        const languages = Object.assign([], JSON.parse(props['languages']));
+        languages.forEach((language) => {
+            if (!this.languages.includes(language)) {
+                this.languages.push(language);
+            }
+        });
+
+        this.languageTarget.innerHTML = '<option value="">n/a</option>';
+        this.languageTarget.innerHTML += this.languages.sort()
+            .map((language) => '<option value="'+language+'">'+language+'</option>')
+            .join();
+    }
+
+    addProviders(option, props) {
+        if (!this.providers.includes(props['provider'])) {
+            this.providers.push(props['provider']);
+        }
+
+        this.providerTarget.innerHTML = '<option value="">n/a</option>';
+        this.providerTarget.innerHTML += this.providers.sort()
+            .map((provider) => '<option value="'+provider+'">'+provider+'</option>')
+            .join();
+
+    }
+
+    addSeasons(option, props) {
+        if (!this.seasons.includes(parseInt(props['season']))) {
+            this.seasons.push(parseInt(props['season']));
+        }
+
+        this.seasonTarget.innerHTML = '<option value="">n/a</option>';
+        this.seasonTarget.innerHTML += this.seasons.sort((a, b) => a - b)
+            .filter((season) => parseInt(season))
+            .map((season) => '<option value="'+season+'">'+season+'</option>')
+            .join('');
+        this.seasonTarget.querySelectorAll('option')[1].selected = true;
+    }
+
+    addEpisodes(option, props) {
+        if (!this.episodes.includes(parseInt(props['episodeNumber']))) {
+            this.episodes.push(parseInt(props['episodeNumber']));
+        }
+
+        this.episodeTarget.innerHTML = this.episodes.sort((a, b) => a - b)
+            .filter((episode) => parseInt(episode))
+            .map((episode) => '<option value="'+episode+'">'+episode+'</option>')
+            .join('');
+
+    }
+
     filter() {
         let results = [];
         this.activeFilter = {

assets/controllers/tv_results_controller.js

@@ -19,9 +19,13 @@ export default class extends Controller {
 
     options = []
 
-    connect() {
+    async connect() {
+        await this.setOptions();
+    }
+
+    async setOptions() {
         if (true === this.activeValue) {
-            fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
+            await fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
                 .then(res => res.text())
                 .then(response => {
                     this.element.innerHTML = response;

templates/torrentio/tvshows.html.twig

@@ -54,7 +54,7 @@
             </thead>
             <tbody>
             {% for result in results.results %}
-                <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200">
+                <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200" data-languages="{{ result.languages|json_encode }}">
                     <td id="size" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                         {{ result.size }}
                     </td>