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

Rename metadata source status selectors

Browse source 
- Switch the dashboard/sidebar service-status card from spotify-branded ids to metadata-source ids
- Update the shared status helpers to target the renamed metadata-source card
- Keep the actual Spotify auth and settings UI unchanged
This commit is contained in:
Antti Kettunen 2026-05-02 15:09:44 +03:00
parent 36131656dd
commit a2176af00e
No known key found for this signature in database
GPG key ID: C6B2A3D250359BD7
4 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
webui/index.html
View file

@ -279,9 +279,9 @@
<!-- Status Section --> <!-- Status Section -->
<div class="status-section"> <div class="status-section">
<h4 class="status-title">Service Status</h4> <h4 class="status-title">Service Status</h4>
<div class="status-indicator" id="spotify-indicator"> <div class="status-indicator" id="metadata-source-indicator">
<span class="status-dot disconnected"></span> <span class="status-dot disconnected"></span>
<span class="status-name" id="music-source-name">Spotify</span> <span class="status-name" id="metadata-source-name">Spotify</span>
</div> </div>
<div class="status-indicator" id="media-server-indicator"> <div class="status-indicator" id="media-server-indicator">
<span class="status-dot disconnected"></span> <span class="status-dot disconnected"></span>
@ -616,14 +616,14 @@
<div class="dashboard-section"> <div class="dashboard-section">
<h3 class="section-title">Service Status</h3> <h3 class="section-title">Service Status</h3>
<div class="service-status-grid"> <div class="service-status-grid">
<div class="service-card" id="spotify-service-card"> <div class="service-card" id="metadata-source-service-card">
<div class="service-card-header"> <div class="service-card-header">
<span class="service-card-title" id="music-source-title">Spotify</span> <span class="service-card-title" id="metadata-source-title">Spotify</span>
<span class="service-card-indicator disconnected" <span class="service-card-indicator disconnected"
id="spotify-status-indicator">●</span> id="metadata-source-status-indicator">●</span>
</div> </div>
<p class="service-card-status-text" id="spotify-status-text">Disconnected</p> <p class="service-card-status-text" id="metadata-source-status-text">Disconnected</p>
<p class="service-card-response-time" id="spotify-response-time">Response: --</p> <p class="service-card-response-time" id="metadata-source-response-time">Response: --</p>
<div class="service-card-footer"> <div class="service-card-footer">
<button class="service-card-button" <button class="service-card-button"
onclick="testDashboardConnection(getActiveMetadataSource())">Test Connection</button> onclick="testDashboardConnection(getActiveMetadataSource())">Test Connection</button>

4
webui/static/core.js
View file

@ -484,11 +484,11 @@ function handleServiceStatusUpdate(data) {
} }
// Same logic as fetchAndUpdateServiceStatus response handler // Same logic as fetchAndUpdateServiceStatus response handler
updateServiceStatus('spotify', data.metadata_source, data.spotify); updateServiceStatus('metadata-source', data.metadata_source, data.spotify);
updateServiceStatus('media-server', data.media_server); updateServiceStatus('media-server', data.media_server);
updateServiceStatus('soulseek', data.soulseek); updateServiceStatus('soulseek', data.soulseek);
updateSidebarServiceStatus('spotify', data.metadata_source, data.spotify); updateSidebarServiceStatus('metadata-source', data.metadata_source, data.spotify);
updateSidebarServiceStatus('media-server', data.media_server); updateSidebarServiceStatus('media-server', data.media_server);
updateSidebarServiceStatus('soulseek', data.soulseek); updateSidebarServiceStatus('soulseek', data.soulseek);

12
webui/static/helper.js
View file

@ -173,7 +173,7 @@ const HELPER_CONTENT = {
title: 'Support & Community', title: 'Support & Community',
description: 'Links to the SoulSync community Discord, GitHub issues for bug reports, and documentation resources.', description: 'Links to the SoulSync community Discord, GitHub issues for bug reports, and documentation resources.',
}, },
'#spotify-indicator': { '#metadata-source-indicator': {
title: 'Metadata Source', title: 'Metadata Source',
description: 'Connection status of your primary metadata source. This service provides artist, album, and track information for searches, enrichment, and discovery.', description: 'Connection status of your primary metadata source. This service provides artist, album, and track information for searches, enrichment, and discovery.',
tips: [ tips: [
@ -236,7 +236,7 @@ const HELPER_CONTENT = {
// ─── DASHBOARD: SERVICE CARDS ─────────────────────────────────── // ─── DASHBOARD: SERVICE CARDS ───────────────────────────────────
'#spotify-service-card': { '#metadata-source-service-card': {
title: 'Metadata Source Status', title: 'Metadata Source Status',
description: 'Detailed connection info for your active metadata source. Shows connection state, response latency, and allows manual connection testing.', description: 'Detailed connection info for your active metadata source. Shows connection state, response latency, and allows manual connection testing.',
tips: [ tips: [
@ -2375,7 +2375,7 @@ const HELPER_TOURS = {
{ page: 'dashboard', selector: '#wishlist-button', title: 'Wishlist', description: 'Tracks queued for download. Failed downloads, watchlist discoveries, and manual additions all land here for retry.' }, { page: 'dashboard', selector: '#wishlist-button', title: 'Wishlist', description: 'Tracks queued for download. Failed downloads, watchlist discoveries, and manual additions all land here for retry.' },
// Service cards // Service cards
{ page: 'dashboard', selector: '#spotify-service-card', title: 'Metadata Source', description: 'Shows your metadata source connection (Spotify, iTunes, or Deezer). This determines where album, artist, and track info comes from. Click "Test Connection" to verify.' }, { page: 'dashboard', selector: '#metadata-source-service-card', title: 'Metadata Source', description: 'Shows your metadata source connection (Spotify, iTunes, or Deezer). This determines where album, artist, and track info comes from. Click "Test Connection" to verify.' },
{ page: 'dashboard', selector: '#media-server-service-card', title: 'Media Server', description: 'Your media server (Plex, Jellyfin, or Navidrome). This is where your music library lives. SoulSync reads your collection and sends downloads here.' }, { page: 'dashboard', selector: '#media-server-service-card', title: 'Media Server', description: 'Your media server (Plex, Jellyfin, or Navidrome). This is where your music library lives. SoulSync reads your collection and sends downloads here.' },
{ page: 'dashboard', selector: '#soulseek-service-card', title: 'Download Source', description: 'Your primary download source status. In hybrid mode, shows the first source in your priority chain.' }, { page: 'dashboard', selector: '#soulseek-service-card', title: 'Download Source', description: 'Your primary download source status. In hybrid mode, shows the first source in your priority chain.' },
@ -4336,7 +4336,7 @@ function _updateHelperBadge() {
const TROUBLESHOOT_RULES = [ const TROUBLESHOOT_RULES = [
{ {
selector: '#spotify-service-card .status-dot.disconnected, #spotify-service-card .status-dot.error', selector: '#metadata-source-service-card .service-card-indicator.disconnected, #metadata-source-service-card .service-card-indicator.error',
title: 'Metadata Source Disconnected', title: 'Metadata Source Disconnected',
steps: [ steps: [
'Go to Settings → Connections and verify your API credentials', 'Go to Settings → Connections and verify your API credentials',
@ -4347,7 +4347,7 @@ const TROUBLESHOOT_RULES = [
action: { label: 'Open Settings', fn: () => navigateToPage('settings') } action: { label: 'Open Settings', fn: () => navigateToPage('settings') }
}, },
{ {
selector: '#media-server-service-card .status-dot.disconnected, #media-server-service-card .status-dot.error', selector: '#media-server-service-card .service-card-indicator.disconnected, #media-server-service-card .service-card-indicator.error',
title: 'Media Server Disconnected', title: 'Media Server Disconnected',
steps: [ steps: [
'Check that your media server (Plex/Jellyfin/Navidrome) is running', 'Check that your media server (Plex/Jellyfin/Navidrome) is running',
@ -4358,7 +4358,7 @@ const TROUBLESHOOT_RULES = [
action: { label: 'Open Settings', fn: () => navigateToPage('settings') } action: { label: 'Open Settings', fn: () => navigateToPage('settings') }
}, },
{ {
selector: '#soulseek-service-card .status-dot.disconnected, #soulseek-service-card .status-dot.error', selector: '#soulseek-service-card .service-card-indicator.disconnected, #soulseek-service-card .service-card-indicator.error',
title: 'Download Source Disconnected', title: 'Download Source Disconnected',
steps: [ steps: [
'Verify your Soulseek/download client is running and reachable', 'Verify your Soulseek/download client is running and reachable',

20
webui/static/shared-helpers.js
View file

@ -3156,12 +3156,12 @@ async function fetchAndUpdateServiceStatus() {
} }
// Update service status indicators and text (dashboard) // Update service status indicators and text (dashboard)
updateServiceStatus('spotify', data.metadata_source, data.spotify); updateServiceStatus('metadata-source', data.metadata_source, data.spotify);
updateServiceStatus('media-server', data.media_server); updateServiceStatus('media-server', data.media_server);
updateServiceStatus('soulseek', data.soulseek); updateServiceStatus('soulseek', data.soulseek);
// Update sidebar service status indicators // Update sidebar service status indicators
updateSidebarServiceStatus('spotify', data.metadata_source, data.spotify); updateSidebarServiceStatus('metadata-source', data.metadata_source, data.spotify);
updateSidebarServiceStatus('media-server', data.media_server); updateSidebarServiceStatus('media-server', data.media_server);
updateSidebarServiceStatus('soulseek', data.soulseek); updateSidebarServiceStatus('soulseek', data.soulseek);
@ -3286,7 +3286,7 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
const statusText = document.getElementById(`${service}-status-text`); const statusText = document.getElementById(`${service}-status-text`);
if (indicator && statusText) { if (indicator && statusText) {
if (service === 'spotify') { if (service === 'metadata-source') {
const presentation = getMetadataSourcePresentation(statusData || {}, spotifyStatus || {}); const presentation = getMetadataSourcePresentation(statusData || {}, spotifyStatus || {});
indicator.className = `service-card-indicator ${presentation.statusClass}`; indicator.className = `service-card-indicator ${presentation.statusClass}`;
statusText.textContent = presentation.statusText; statusText.textContent = presentation.statusText;
@ -3305,8 +3305,8 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
} }
// Update music source title based on active source // Update music source title based on active source
if (service === 'spotify' && statusData.source) { if (service === 'metadata-source' && statusData.source) {
const musicSourceTitleElement = document.getElementById('music-source-title'); const musicSourceTitleElement = document.getElementById('metadata-source-title');
if (musicSourceTitleElement) { if (musicSourceTitleElement) {
const sourceName = getMetadataSourceLabel(statusData.source); const sourceName = getMetadataSourceLabel(statusData.source);
musicSourceTitleElement.textContent = sourceName; musicSourceTitleElement.textContent = sourceName;
@ -3326,7 +3326,7 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
syncPrimaryMetadataSourceAvailability(spotifyStatus); syncPrimaryMetadataSourceAvailability(spotifyStatus);
const responseTimeElement = document.getElementById('spotify-response-time'); const responseTimeElement = document.getElementById('metadata-source-response-time');
if (responseTimeElement) { if (responseTimeElement) {
const responseTime = statusData.response_time; const responseTime = statusData.response_time;
responseTimeElement.textContent = responseTime !== undefined && responseTime !== null responseTimeElement.textContent = responseTime !== undefined && responseTime !== null
@ -3334,7 +3334,7 @@ function updateServiceStatus(service, statusData, spotifyStatus = null) {
: 'Response: --'; : 'Response: --';
} }
const testButton = document.querySelector('#spotify-service-card .service-card-button'); const testButton = document.querySelector('#metadata-source-service-card .service-card-button');
if (testButton) { if (testButton) {
const source = statusData.source || 'spotify'; const source = statusData.source || 'spotify';
testButton.setAttribute('onclick', `testDashboardConnection('${source}')`); testButton.setAttribute('onclick', `testDashboardConnection('${source}')`);
@ -3357,7 +3357,7 @@ function updateSidebarServiceStatus(service, statusData, spotifyStatus = null) {
const nameElement = indicator.querySelector('.status-name'); const nameElement = indicator.querySelector('.status-name');
if (dot) { if (dot) {
if (service === 'spotify') { if (service === 'metadata-source') {
const presentation = getMetadataSourcePresentation(statusData || {}, spotifyStatus || {}); const presentation = getMetadataSourcePresentation(statusData || {}, spotifyStatus || {});
dot.className = `status-dot ${presentation.dotClass}`; dot.className = `status-dot ${presentation.dotClass}`;
dot.title = presentation.dotTitle; dot.title = presentation.dotTitle;
@ -3377,8 +3377,8 @@ function updateSidebarServiceStatus(service, statusData, spotifyStatus = null) {
} }
// Update music source name in sidebar based on active source // Update music source name in sidebar based on active source
if (service === 'spotify' && statusData.source) { if (service === 'metadata-source' && statusData.source) {
const musicSourceNameElement = document.getElementById('music-source-name'); const musicSourceNameElement = document.getElementById('metadata-source-name');
if (musicSourceNameElement) { if (musicSourceNameElement) {
const sourceName = getMetadataSourceLabel(statusData.source); const sourceName = getMetadataSourceLabel(statusData.source);
musicSourceNameElement.textContent = sourceName; musicSourceNameElement.textContent = sourceName;