fix: use proper language api to return tmdb available languages (#73)

* fix: use proper language api to return tmdb available languages

* fix: escape languages to nullify xss security

Author: TimilsinaBimal

app/api/endpoints/meta.py

@@ -1,3 +1,5 @@
+import asyncio
+
 from fastapi import APIRouter, HTTPException
 from loguru import logger
 
@@ -8,15 +10,41 @@
 
 @router.get("/api/languages")
 async def get_languages():
-    """
-    Proxy endpoint to fetch languages from TMDB.
-    """
     try:
         tmdb = get_tmdb_service()
-        languages = await tmdb.get_languages()
-        if not languages:
-            return []
-        return languages
+        tasks = [
+            tmdb.get_primary_translations(),
+            tmdb.get_languages(),
+            tmdb.get_countries(),
+        ]
+        primary_translations, languages, countries = await asyncio.gather(*tasks)
+
+        language_map = {lang["iso_639_1"]: lang["english_name"] for lang in languages}
+
+        country_map = {country["iso_3166_1"]: country["english_name"] for country in countries}
+
+        result = []
+        for element in primary_translations:
+            # element looks like "en-US"
+            parts = element.split("-")
+            if len(parts) != 2:
+                continue
+
+            lang_code, country_code = parts
+
+            language_name = language_map.get(lang_code)
+            country_name = country_map.get(country_code)
+
+            if language_name and country_name:
+                result.append(
+                    {
+                        "iso_639_1": element,
+                        "language": language_name,
+                        "country": country_name,
+                    }
+                )
+        return result
+
     except Exception as e:
         logger.error(f"Failed to fetch languages: {e}")
         raise HTTPException(status_code=502, detail="Failed to fetch languages from TMDB")

app/services/tmdb/service.py

@@ -111,6 +111,16 @@ async def get_languages(self) -> list[dict[str, Any]]:
         """Fetch supported languages from TMDB."""
         return await self.client.get("/configuration/languages")
 
+    @alru_cache(maxsize=1, ttl=86400)
+    async def get_countries(self) -> list[dict[str, Any]]:
+        """Fetch supported countries from TMDB."""
+        return await self.client.get("/configuration/countries")
+
+    @alru_cache(maxsize=1, ttl=86400)
+    async def get_primary_translations(self) -> list[str]:
+        """Fetch supported primary translations from TMDB."""
+        return await self.client.get("/configuration/primary_translations")
+
 
 @functools.lru_cache(maxsize=16)
 def get_tmdb_service(language: str = "en-US") -> TMDBService:

app/static/script.js

@@ -676,18 +676,17 @@ async function initializeLanguageSelect() {
         if (!languagesResponse.ok) throw new Error('Failed to fetch languages');
         const languages = await languagesResponse.json();
         languages.sort((a, b) => {
-            if (a.iso_639_1 === 'en') return -1;
-            if (b.iso_639_1 === 'en') return 1;
-            return a.english_name.localeCompare(b.english_name);
+            if (a.iso_639_1 === 'en-US') return -1;
+            if (b.iso_639_1 === 'en-US') return 1;
+            return a.language.localeCompare(b.language);
         });
         languageSelect.innerHTML = languages.map(lang => {
             const code = lang.iso_639_1;
-            const label = lang.name ? lang.name : lang.english_name;
-            const fullLabel = lang.name && lang.name !== lang.english_name ? `${lang.english_name} (${lang.name})` : lang.english_name;
-            return `<option value="${code}" ${code === 'en' ? 'selected' : ''}>${fullLabel}</option>`;
+            const fullLabel = escapeHtml(lang.language) + ' (' + escapeHtml(lang.country) + ')';
+            return '<option value="' + escapeHtml(code) + '"' + (code === 'en-US' ? ' selected' : '') + '>' + fullLabel + '</option>';
         }).join('');
     } catch (err) {
-        languageSelect.innerHTML = '<option value="en">English</option>';
+        languageSelect.innerHTML = '<option value="en-US">English (US)</option>';
     }
 }