Reorder Settings Connections tab for better UX
Metadata Source selector moved to top (sets context for everything below). Services grouped logically: metadata sources (Spotify, iTunes, Deezer, Discogs) → streaming services (Tidal, Qobuz) → enrichment (Last.fm, Genius) → verification (AcoustID) → scrobbling (ListenBrainz) → Hydrabase.
This commit is contained in:
Broque Thomas
parent
893bff79cd
commit
e73c1e69c2
1 changed files with 127 additions and 128 deletions
255
webui/index.html
255
webui/index.html
|
|
@ -3954,6 +3954,23 @@
|
|||
<div class="settings-group" data-stg="connections">
|
||||
<h3>API Configuration</h3>
|
||||
|
||||
<!-- Metadata Source Selection (first — tells user what they're configuring for) -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title" style="color: #e8e8e8;">Metadata Source</h4>
|
||||
<div class="form-group">
|
||||
<label>Primary Source:</label>
|
||||
<select id="metadata-fallback-source">
|
||||
<option value="spotify">Spotify</option>
|
||||
<option value="itunes">iTunes / Apple Music</option>
|
||||
<option value="deezer">Deezer</option>
|
||||
<option value="discogs">Discogs</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-help">The primary source for artist, album, and track metadata. Spotify requires authentication below. Discogs requires a personal token.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spotify Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title spotify-title">Spotify</h4>
|
||||
|
|
@ -3991,36 +4008,35 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tidal Playlist/Metadata Auth -->
|
||||
<!-- iTunes Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title tidal-title">Tidal (Playlists & Metadata)</h4>
|
||||
<h4 class="service-title itunes-title">iTunes / Apple Music</h4>
|
||||
<div class="form-group">
|
||||
<label>Client ID:</label>
|
||||
<input type="text" id="tidal-client-id" placeholder="Tidal Client ID">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Client Secret:</label>
|
||||
<input type="password" id="tidal-client-secret"
|
||||
placeholder="Tidal Client Secret">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Redirect URI:</label>
|
||||
<input type="text" id="tidal-redirect-uri"
|
||||
placeholder="http://127.0.0.1:8889/tidal/callback">
|
||||
<label>Storefront Country:</label>
|
||||
<select id="itunes-country">
|
||||
<option value="US">United States (US)</option>
|
||||
<option value="GB">United Kingdom (GB)</option>
|
||||
<option value="CA">Canada (CA)</option>
|
||||
<option value="AU">Australia (AU)</option>
|
||||
<option value="DE">Germany (DE)</option>
|
||||
<option value="FR">France (FR)</option>
|
||||
<option value="JP">Japan (JP)</option>
|
||||
<option value="KR">South Korea (KR)</option>
|
||||
<option value="BR">Brazil (BR)</option>
|
||||
<option value="SE">Sweden (SE)</option>
|
||||
<option value="NL">Netherlands (NL)</option>
|
||||
<option value="IT">Italy (IT)</option>
|
||||
<option value="ES">Spain (ES)</option>
|
||||
<option value="MX">Mexico (MX)</option>
|
||||
<option value="IN">India (IN)</option>
|
||||
<option value="RU">Russia (RU)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-label">Current Redirect URI:</div>
|
||||
<div class="callback-url" id="tidal-callback-display">
|
||||
http://127.0.0.1:8889/tidal/callback</div>
|
||||
<div class="callback-help">Add this URL to your Tidal app configuration</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="auth-button" onclick="authenticateTidal()">🔐
|
||||
Authenticate</button>
|
||||
<div class="callback-help">Sets the primary Apple Music storefront. Region-specific albums are auto-searched across other storefronts as fallback.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Deezer OAuth Auth -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title deezer-title">Deezer (Favorites & Playlists)</h4>
|
||||
|
|
@ -4049,6 +4065,51 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Discogs Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title" style="color: #333;">Discogs</h4>
|
||||
<div class="form-group">
|
||||
<label>Personal Access Token:</label>
|
||||
<input type="password" id="discogs-token"
|
||||
placeholder="Discogs Personal Access Token">
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-help">Get your free token from <a
|
||||
href="https://www.discogs.com/settings/developers" target="_blank"
|
||||
style="color: #ffff64;">Discogs Developer Settings</a></div>
|
||||
<div class="callback-help">Click "Generate new token" — no app registration needed. Provides 60 req/min and cover art in search results.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tidal Playlist/Metadata Auth -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title tidal-title">Tidal (Playlists & Metadata)</h4>
|
||||
<div class="form-group">
|
||||
<label>Client ID:</label>
|
||||
<input type="text" id="tidal-client-id" placeholder="Tidal Client ID">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Client Secret:</label>
|
||||
<input type="password" id="tidal-client-secret"
|
||||
placeholder="Tidal Client Secret">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Redirect URI:</label>
|
||||
<input type="text" id="tidal-redirect-uri"
|
||||
placeholder="http://127.0.0.1:8889/tidal/callback">
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-label">Current Redirect URI:</div>
|
||||
<div class="callback-url" id="tidal-callback-display">
|
||||
http://127.0.0.1:8889/tidal/callback</div>
|
||||
<div class="callback-help">Add this URL to your Tidal app configuration</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="auth-button" onclick="authenticateTidal()">🔐
|
||||
Authenticate</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Qobuz Metadata/Enrichment Auth -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title qobuz-title">Qobuz (Metadata & Enrichment)</h4>
|
||||
|
|
@ -4081,64 +4142,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ListenBrainz Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title listenbrainz-title">ListenBrainz</h4>
|
||||
<div class="form-group">
|
||||
<label>API Base URL:</label>
|
||||
<input type="text" id="listenbrainz-base-url"
|
||||
placeholder="Leave empty for official (api.listenbrainz.org)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>User Token:</label>
|
||||
<input type="password" id="listenbrainz-token"
|
||||
placeholder="ListenBrainz User Token">
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-help">Get your token from <a
|
||||
href="https://listenbrainz.org/profile/" target="_blank"
|
||||
style="color: #eb743b;">ListenBrainz Settings</a></div>
|
||||
<div class="callback-help">Self-hosted? Enter your server URL (e.g. http://localhost:8093)</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 12px;">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="listenbrainz-scrobble-enabled">
|
||||
Scrobble plays to ListenBrainz
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AcoustID Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title acoustid-title">AcoustID Verification</h4>
|
||||
<div class="form-group" style="margin-bottom: 12px;">
|
||||
<label class="checkbox-label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input type="checkbox" id="acoustid-enabled"
|
||||
style="width: 16px; height: 16px;">
|
||||
<span>Enable Download Verification</span>
|
||||
</label>
|
||||
<div style="color: #888; font-size: 0.8em; margin-top: 4px; margin-left: 24px;">
|
||||
Verifies downloaded audio matches expected track using fingerprints
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>API Key:</label>
|
||||
<input type="password" id="acoustid-api-key" placeholder="AcoustID API Key">
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-help">Get your free API key from <a
|
||||
href="https://acoustid.org/new-application" target="_blank"
|
||||
style="color: #ba55d3;">AcoustID Applications</a></div>
|
||||
<div class="callback-help"
|
||||
style="opacity: 0.7; font-size: 0.85em; margin-top: 4px;">
|
||||
The fpcalc fingerprint tool is automatically downloaded if needed.
|
||||
Failed verifications move files to Quarantine folder.
|
||||
</div>
|
||||
</div>
|
||||
<button class="test-button" onclick="clearQuarantine()" style="margin-top: 10px; background: rgba(255,82,82,0.15); border-color: rgba(255,82,82,0.3); color: #ff5252;">Clear Quarantine</button>
|
||||
</div>
|
||||
|
||||
<!-- Last.fm Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title lastfm-title">Last.fm</h4>
|
||||
|
|
@ -4186,65 +4189,61 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iTunes Settings -->
|
||||
<!-- AcoustID Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title itunes-title">iTunes / Apple Music</h4>
|
||||
<h4 class="service-title acoustid-title">AcoustID Verification</h4>
|
||||
<div class="form-group" style="margin-bottom: 12px;">
|
||||
<label class="checkbox-label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input type="checkbox" id="acoustid-enabled"
|
||||
style="width: 16px; height: 16px;">
|
||||
<span>Enable Download Verification</span>
|
||||
</label>
|
||||
<div style="color: #888; font-size: 0.8em; margin-top: 4px; margin-left: 24px;">
|
||||
Verifies downloaded audio matches expected track using fingerprints
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Storefront Country:</label>
|
||||
<select id="itunes-country">
|
||||
<option value="US">United States (US)</option>
|
||||
<option value="GB">United Kingdom (GB)</option>
|
||||
<option value="CA">Canada (CA)</option>
|
||||
<option value="AU">Australia (AU)</option>
|
||||
<option value="DE">Germany (DE)</option>
|
||||
<option value="FR">France (FR)</option>
|
||||
<option value="JP">Japan (JP)</option>
|
||||
<option value="KR">South Korea (KR)</option>
|
||||
<option value="BR">Brazil (BR)</option>
|
||||
<option value="SE">Sweden (SE)</option>
|
||||
<option value="NL">Netherlands (NL)</option>
|
||||
<option value="IT">Italy (IT)</option>
|
||||
<option value="ES">Spain (ES)</option>
|
||||
<option value="MX">Mexico (MX)</option>
|
||||
<option value="IN">India (IN)</option>
|
||||
<option value="RU">Russia (RU)</option>
|
||||
</select>
|
||||
<label>API Key:</label>
|
||||
<input type="password" id="acoustid-api-key" placeholder="AcoustID API Key">
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-help">Sets the primary Apple Music storefront. Region-specific albums are auto-searched across other storefronts as fallback.</div>
|
||||
<div class="callback-help">Get your free API key from <a
|
||||
href="https://acoustid.org/new-application" target="_blank"
|
||||
style="color: #ba55d3;">AcoustID Applications</a></div>
|
||||
<div class="callback-help"
|
||||
style="opacity: 0.7; font-size: 0.85em; margin-top: 4px;">
|
||||
The fpcalc fingerprint tool is automatically downloaded if needed.
|
||||
Failed verifications move files to Quarantine folder.
|
||||
</div>
|
||||
</div>
|
||||
<button class="test-button" onclick="clearQuarantine()" style="margin-top: 10px; background: rgba(255,82,82,0.15); border-color: rgba(255,82,82,0.3); color: #ff5252;">Clear Quarantine</button>
|
||||
</div>
|
||||
|
||||
<!-- Discogs Settings -->
|
||||
<!-- ListenBrainz Settings -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title" style="color: #333;">Discogs</h4>
|
||||
<h4 class="service-title listenbrainz-title">ListenBrainz</h4>
|
||||
<div class="form-group">
|
||||
<label>Personal Access Token:</label>
|
||||
<input type="password" id="discogs-token"
|
||||
placeholder="Discogs Personal Access Token">
|
||||
<label>API Base URL:</label>
|
||||
<input type="text" id="listenbrainz-base-url"
|
||||
placeholder="Leave empty for official (api.listenbrainz.org)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>User Token:</label>
|
||||
<input type="password" id="listenbrainz-token"
|
||||
placeholder="ListenBrainz User Token">
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-help">Get your free token from <a
|
||||
href="https://www.discogs.com/settings/developers" target="_blank"
|
||||
style="color: #ffff64;">Discogs Developer Settings</a></div>
|
||||
<div class="callback-help">Click "Generate new token" — no app registration needed. Provides 60 req/min and cover art in search results.</div>
|
||||
<div class="callback-help">Get your token from <a
|
||||
href="https://listenbrainz.org/profile/" target="_blank"
|
||||
style="color: #eb743b;">ListenBrainz Settings</a></div>
|
||||
<div class="callback-help">Self-hosted? Enter your server URL (e.g. http://localhost:8093)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata Source Selection -->
|
||||
<div class="api-service-frame">
|
||||
<h4 class="service-title" style="color: #e8e8e8;">Metadata Source</h4>
|
||||
<div class="form-group">
|
||||
<label>Primary Source:</label>
|
||||
<select id="metadata-fallback-source">
|
||||
<option value="spotify">Spotify</option>
|
||||
<option value="itunes">iTunes / Apple Music</option>
|
||||
<option value="deezer">Deezer</option>
|
||||
<option value="discogs">Discogs</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="callback-info">
|
||||
<div class="callback-help">The primary source for artist, album, and track metadata. Spotify requires authentication above. Discogs requires a personal token.</div>
|
||||
<div class="form-group" style="margin-top: 12px;">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="listenbrainz-scrobble-enabled">
|
||||
Scrobble plays to ListenBrainz
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue