feat: implement asynchronous language fetching and update templates for language selection

TimilsinaBimal · TimilsinaBimal · commit 0c00c0ade795 · 2025-12-27T20:38:30.000+05:45
diff --git a/app/api/endpoints/meta.py b/app/api/endpoints/meta.py
@@ -8,43 +8,50 @@
 router = APIRouter()
 
 
+async def fetch_languages_list():
+    """
+    Fetch and format languages list from TMDB.
+    Returns a list of language dictionaries with iso_639_1, language, and country.
+    """
+    tmdb = get_tmdb_service()
+    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,
+                }
+            )
+    result.sort(key=lambda x: (x["iso_639_1"] != "en-US", x["language"]))
+    return result
+
+
 @router.get("/api/languages")
 async def get_languages():
     try:
-        tmdb = get_tmdb_service()
-        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
-
+        languages = await fetch_languages_list()
+        return languages
     except Exception as e:
         logger.error(f"Failed to fetch languages: {e}")
         raise HTTPException(status_code=502, detail="Failed to fetch languages from TMDB")
diff --git a/app/core/app.py b/app/core/app.py
@@ -8,6 +8,7 @@
 from jinja2 import Environment, FileSystemLoader
 from loguru import logger
 
+from app.api.endpoints.meta import fetch_languages_list
 from app.api.main import api_router
 from app.services.token_store import token_store
 
@@ -64,12 +65,20 @@ async def lifespan(app: FastAPI):
 @app.get("/configure", response_class=HTMLResponse)
 @app.get("/{token}/configure", response_class=HTMLResponse)
 async def configure_page(request: Request, token: str | None = None):
+    languages = []
+    try:
+        languages = await fetch_languages_list()
+    except Exception as e:
+        logger.warning(f"Failed to fetch languages for template: {e}")
+        languages = [{"iso_639_1": "en-US", "language": "English", "country": "US"}]
+
     template = jinja_env.get_template("index.html")
     html_content = template.render(
         request=request,
         app_version=__version__,
         app_host=settings.HOST_NAME,
         announcement_html=settings.ANNOUNCEMENT_HTML or "",
+        languages=languages,
     )
     return HTMLResponse(content=html_content, media_type="text/html")
 
diff --git a/app/core/config.py b/app/core/config.py
@@ -29,14 +29,7 @@ class Settings(BaseSettings):
     REDIS_TOKEN_KEY: str = "watchly:token:"
     TOKEN_SALT: str = "change-me"
     TOKEN_TTL_SECONDS: int = 0  # 0 = never expire
-    ANNOUNCEMENT_HTML: str = (
-        '<img src="https://elfhosted.com/images/logo.svg" height="64px" width="64px" style="float: left;'
-        ' margin-right: 10px;"><p>This is the public instance of <a'
-        ' href="https://github.com/TimilsinaBimal/Watchly">Watchly</a>, sponsored by <a'
-        ' href="https://store.elfhosted.com/">ElfHosted</a> ❤️ <br>See our FREE <a'
-        ' href="https://stremio-addons-guide.elfhosted.com">Stremio Addons Guide</a> for more great addons and'
-        " features!</p>"
-    )
+    ANNOUNCEMENT_HTML: str = ""
     AUTO_UPDATE_CATALOGS: bool = True
     CATALOG_REFRESH_INTERVAL_SECONDS: int = 43200  # 12 hours
     APP_ENV: Literal["development", "production", "vercel"] = "production"
@@ -52,5 +45,4 @@ class Settings(BaseSettings):
 
 settings = Settings()
 
-# Get version from version.py (single source of truth)
 APP_VERSION = __version__
diff --git a/app/static/js/modules/catalog.js b/app/static/js/modules/catalog.js
@@ -82,7 +82,7 @@ function createCatalogItem(cat, index) {
             </div>
             <label class="switch relative inline-flex items-center cursor-pointer flex-shrink-0 ml-auto sm:ml-0">
                 <input type="checkbox" class="sr-only peer" ${cat.enabled ? 'checked' : ''} data-catalog-id="${cat.id}">
-                <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-white/20 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-white peer-checked:after:bg-black peer-checked:after:border-black"></div>
+                <div class="w-11 h-6 bg-neutral-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-white/20 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-white peer-checked:after:bg-black peer-checked:after:border-black"></div>
             </label>
         </div>
         <div class="catalog-desc hidden sm:block text-xs text-slate-500 mt-2 ml-8 pl-1">${escapeHtml(cat.description || '')}</div>
@@ -152,7 +152,7 @@ function setupRenameLogic(item, cat) {
     const renameBtn = item.querySelector('.rename-btn');
 
     const editActions = document.createElement('div');
-    editActions.className = 'edit-actions hidden absolute right-1 top-1/2 -translate-y-1/2 flex gap-1 bg-slate-900 pl-2 z-10';
+    editActions.className = 'edit-actions hidden absolute right-1 top-1/2 -translate-y-1/2 flex gap-1 bg-neutral-900 pl-2 z-10';
     editActions.innerHTML = `
         <button type="button" class="edit-btn save p-1 text-green-500 hover:bg-green-500/10 rounded transition" title="Save"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></button>
         <button type="button" class="edit-btn cancel p-1 text-red-500 hover:bg-red-500/10 rounded transition" title="Cancel"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
diff --git a/app/static/js/modules/form.js b/app/static/js/modules/form.js
@@ -144,7 +144,7 @@ function renderGenreList(container, genres, namePrefix) {
         <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer transition group">
             <div class="relative flex items-center">
                 <input type="checkbox" name="${namePrefix}" value="${genre.id}"
-                    class="peer appearance-none w-5 h-5 border-2 border-slate-600 rounded bg-slate-900 checked:bg-white checked:border-white transition-colors">
+                    class="peer appearance-none w-5 h-5 border-2 border-slate-600 rounded bg-neutral-900 checked:bg-white checked:border-white transition-colors">
                 <svg class="absolute w-3.5 h-3.5 text-black left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-100 pointer-events-none transition-opacity"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
@@ -155,26 +155,8 @@ function renderGenreList(container, genres, namePrefix) {
     `).join('');
 }
 
-// Language Selection
-async function initializeLanguageSelect() {
+function initializeLanguageSelect() {
     if (!languageSelect) return;
-    try {
-        const languagesResponse = await fetch('/api/languages');
-        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-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 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-US">English (US)</option>';
-    }
 }
 
 // Password Toggles
diff --git a/app/templates/components/modal_donation.html b/app/templates/components/modal_donation.html
@@ -81,7 +81,7 @@ <h3 class="text-xl font-bold text-white">Support Watchly 💙</h3>
 
                 <!-- Fun Fact -->
                 <div class="pt-3 border-t border-white/10">
-                    <div class="bg-slate-800/30 border border-slate-700/50 rounded-lg p-3">
+                    <div class="bg-neutral-800/30 border border-slate-700/50 rounded-lg p-3">
                         <p class="text-xs text-slate-400 leading-relaxed">
                             <span class="font-semibold text-slate-300">Fun fact:</span> Momo is a delicious steamed spicy
                             dumpling popular in Nepal. Just like how momo brings joy to
@@ -97,7 +97,7 @@ <h3 class="text-xl font-bold text-white">Support Watchly 💙</h3>
 <!-- Ko-fi Modal -->
 <div id="kofi-modal" class="fixed inset-0 z-50 hidden">
     <!-- Backdrop -->
-    <div class="absolute inset-0 bg-slate-950/80 backdrop-blur-sm transition-opacity" id="kofi-backdrop"></div>
+    <div class="absolute inset-0 bg-neutral-950/80 backdrop-blur-sm transition-opacity" id="kofi-backdrop"></div>
 
     <!-- Modal Content -->
     <div class="absolute inset-0 flex items-center justify-center p-4">
@@ -128,7 +128,7 @@ <h3 class="text-xl font-bold text-white">Support Watchly 💙</h3>
 <!-- Confirmation Modal -->
 <div id="confirmModal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
-    <div class="bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl max-w-md w-full transform transition-all scale-95 opacity-0"
+    <div class="bg-neutral-900 border border-slate-700 rounded-2xl shadow-2xl max-w-md w-full transform transition-all scale-95 opacity-0"
         id="confirmModalContent">
         <div class="p-6 space-y-4">
             <div class="flex items-start gap-4">
@@ -147,7 +147,7 @@ <h3 class="text-lg font-bold text-white mb-1" id="confirmModalTitle">Confirm Act
             </div>
             <div class="flex gap-3 pt-2">
                 <button id="confirmModalCancel"
-                    class="flex-1 px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl font-medium transition">
+                    class="flex-1 px-4 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-white rounded-xl font-medium transition">
                     Cancel
                 </button>
                 <button id="confirmModalConfirm"
diff --git a/app/templates/components/section_config.html b/app/templates/components/section_config.html
@@ -10,8 +10,12 @@ <h2 class="text-3xl font-bold text-white mb-2">Preferences</h2>
         <label class="block text-sm font-medium text-slate-400 uppercase tracking-wider">Language</label>
         <div class="relative">
             <select id="languageSelect"
-                class="w-full appearance-none bg-slate-900 hover:bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-3.5 text-white focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all cursor-pointer">
-                <!-- JS Populated -->
+                class="w-full appearance-none bg-neutral-900 hover:bg-neutral-800/80 border border-slate-700 rounded-xl px-4 py-3.5 text-white focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all cursor-pointer">
+                {% for lang in languages %}
+                <option value="{{ lang.iso_639_1 }}" {% if lang.iso_639_1 == 'en-US' %}selected{% endif %}>
+                    {{ lang.language }} ({{ lang.country }})
+                </option>
+                {% endfor %}
             </select>
             <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-400">
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -59,7 +63,7 @@ <h2 class="text-3xl font-bold text-white mb-2">Preferences</h2>
                 </svg>
             </div>
             <input type="text" id="rpdbKey"
-                class="w-full bg-slate-900 border border-slate-700 rounded-xl pl-11 pr-4 py-3.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all font-mono text-sm"
+                class="w-full bg-neutral-900 border border-slate-700 rounded-xl pl-11 pr-4 py-3.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all font-mono text-sm"
                 placeholder="Paste your RPDB API key here">
         </div>
         <p class="text-xs text-slate-500">Enable ratings on posters via <a
diff --git a/app/templates/components/section_install.html b/app/templates/components/section_install.html
@@ -74,7 +74,7 @@ <h3 class="text-3xl font-bold text-white mb-2">You're all set!</h3>
         class="bg-neutral-950 rounded-xl p-4 mb-8 border border-white/10 font-mono text-sm text-slate-200 break-all relative group">
         <div id="addonUrl">https://...</div>
         <div
-            class="absolute inset-0 bg-slate-900/90 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-xl cursor-default">
+            class="absolute inset-0 bg-neutral-900/90 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-xl cursor-default">
             <span class="text-white font-sans text-sm font-medium">Private Token - Do Not Share</span>
         </div>
     </div>
diff --git a/app/templates/components/section_login.html b/app/templates/components/section_login.html
@@ -26,12 +26,12 @@ <h2 class="text-3xl font-bold text-white mb-2">Connect to Stremio</h2>
             <label class="text-xs text-slate-400">Email</label>
             <input id="emailInput" type="email" autocomplete="email" inputmode="email"
                 spellcheck="false" required placeholder="you@example.com"
-                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all">
+                class="w-full bg-neutral-900 border border-slate-700 rounded-xl px-4 py-3.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all">
             <label class="text-xs text-slate-400">Password</label>
             <div class="relative">
                 <input id="passwordInput" type="password" autocomplete="current-password"
                     placeholder="Your Stremio password"
-                    class="w-full bg-slate-900 border border-slate-700 rounded-xl pl-4 pr-12 py-3.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all">
+                    class="w-full bg-neutral-900 border border-slate-700 rounded-xl pl-4 pr-12 py-3.5 text-white placeholder-slate-500 focus:ring-2 focus:ring-white/20 focus:border-white/30 outline-none transition-all">
                 <button type="button"
                     class="toggle-btn absolute right-2 top-1/2 -translate-y-1/2 bg-white/10 hover:bg-white/20 text-white p-2 rounded-lg"
                     aria-label="Show password" title="Show" data-target="passwordInput">
diff --git a/app/templates/components/section_welcome.html b/app/templates/components/section_welcome.html
diff --git a/app/templates/components/sidebar.html b/app/templates/components/sidebar.html
