danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

video settings: video API placeholders use the exact music service structure

Browse source 
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).
This commit is contained in:
BoulderBadgeDad 2026-06-14 00:37:20 -07:00
parent e982b19bc5
commit 9d3cf14cdd
2 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
tests/test_video_side_shell.py
View file

@ -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():

45
webui/index.html
View file

@ -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>