From 9d3cf14cdd1f6d48be1a733e03f7b40f017b6820 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Sun, 14 Jun 2026 00:37:20 -0700
Subject: [PATCH] video settings: video API placeholders use the exact music
 service structure

Standardized the TMDB/TVDB placeholders to the same .api-service-frame
.stg-service accordion markup as every music API service (header +
toggleStgService accordion + body with API Key field + callback-info), plus the
same 'Expand All' header. No bespoke structure. Reuses the existing accordion
handlers (already defined, integrity test green).
---
 tests/test_video_side_shell.py |  4 ++-
 webui/index.html               | 45 ++++++++++++++++++++++++++--------
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/tests/test_video_side_shell.py b/tests/test_video_side_shell.py
index 032391bc..ffdb3a48 100644
--- a/tests/test_video_side_shell.py
+++ b/tests/test_video_side_shell.py
@@ -211,7 +211,9 @@ def test_video_side_hides_music_api_config_and_shows_placeholders():
     css = _CSS_PATH.read_text(encoding="utf-8")
     assert 'body[data-side="video"] [data-music-only]' in css   # music API hidden on video
     assert "data-music-only" in _INDEX                          # the music API group is marked
-    assert "TMDB API Key" in _INDEX and "TVDB API Key" in _INDEX  # video placeholders
+    # Video placeholders use the SAME .api-service-frame structure as music.
+    assert 'class="api-service-frame stg-service" data-service="tmdb"' in _INDEX
+    assert 'class="api-service-frame stg-service" data-service="tvdb"' in _INDEX
 
 
 def test_video_settings_module_referenced_and_isolated():
diff --git a/webui/index.html b/webui/index.html
index f9468d4b..1c391de0 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -4740,18 +4740,43 @@
                             </div>
 
                             <!-- Video API Configuration (placeholders; shown only on the video
-                                 side in place of the music API services). -->
+                                 side in place of the music API services). Same structure as the
+                                 music service frames above. -->
                             <div class="settings-group" data-stg="connections" data-video-only>
-                                <h3>API Configuration</h3>
-                                <div class="form-group">
-                                    <label>TMDB API Key</label>
-                                    <input type="text" placeholder="The Movie Database — movie &amp; TV metadata" disabled>
-                                    <small style="color: #999; font-size: 0.9em; display: block; margin-top: 5px;">Coming soon — primary movie/TV metadata source.</small>
+                                <h3>API Configuration <button class="stg-accordion-toggle" onclick="toggleAllServiceAccordions(this)">Expand All</button></h3>
+                                <div class="api-service-frame stg-service" data-service="tmdb">
+                                    <div class="stg-service-header" onclick="toggleStgService(this)">
+                                        <span class="stg-service-dot" style="color: #01b4e4;"></span>
+                                        <h4 class="service-title">TMDB</h4>
+                                        <span class="stg-service-chevron">›</span>
+                                    </div>
+                                    <div class="stg-service-body">
+                                        <div class="form-group">
+                                            <label>API Key:</label>
+                                            <input type="password" id="tmdb-api-key" placeholder="The Movie Database API Key">
+                                        </div>
+                                        <div class="callback-info">
+                                            <div class="callback-help">Get your key from <a href="https://www.themoviedb.org/settings/api" target="_blank" style="color: #01b4e4;">TMDB API Settings</a></div>
+                                            <div class="callback-help">Primary movie &amp; TV metadata source.</div>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="form-group">
-                                    <label>TVDB API Key</label>
-                                    <input type="text" placeholder="TheTVDB — TV series metadata" disabled>
-                                    <small style="color: #999; font-size: 0.9em; display: block; margin-top: 5px;">Coming soon — TV metadata source.</small>
+                                <div class="api-service-frame stg-service" data-service="tvdb">
+                                    <div class="stg-service-header" onclick="toggleStgService(this)">
+                                        <span class="stg-service-dot" style="color: #6cd391;"></span>
+                                        <h4 class="service-title">TVDB</h4>
+                                        <span class="stg-service-chevron">›</span>
+                                    </div>
+                                    <div class="stg-service-body">
+                                        <div class="form-group">
+                                            <label>API Key:</label>
+                                            <input type="password" id="tvdb-api-key" placeholder="TheTVDB API Key">
+                                        </div>
+                                        <div class="callback-info">
+                                            <div class="callback-help">Get your key from <a href="https://thetvdb.com/dashboard/account/apikey" target="_blank" style="color: #6cd391;">TheTVDB API</a></div>
+                                            <div class="callback-help">TV series metadata source.</div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>