JDM170/spotizerr-dev
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

si 100 años vivo, 100 años chingas a tu madre spotify

Browse Source
This commit is contained in:
cool.gitter.choco
2025-03-15 10:23:41 -06:00
parent 728639d9dd
commit c6204ada00
24 changed files with 869 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
static/css/config/config.css
View File

@@ -224,6 +224,16 @@ input:checked + .slider:before {
transform: translateY(-2px);
}
/* No Credentials Message */
.no-credentials {
padding: 1.5rem;
background: #2a2a2a;
border-radius: 8px;
margin-bottom: 1.5rem;
text-align: center;
color: #b3b3b3;
}
/* Credentials List */
.credentials-list {
margin-bottom: 2rem;
@@ -244,14 +254,49 @@ input:checked + .slider:before {
background: #3a3a3a;
}
/* New styling for credential info and actions */
.credential-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.credential-name {
font-weight: 600;
font-size: 1rem;
}
.search-credentials-status {
font-size: 0.8rem;
padding: 0.2rem 0.5rem;
border-radius: 12px;
display: inline-block;
width: fit-content;
}
.search-credentials-status.has-api {
background: rgba(29, 185, 84, 0.2);
color: #1db954;
}
.search-credentials-status.no-api {
background: rgba(255, 85, 85, 0.2);
color: #ff5555;
}
.credential-actions {
display: flex;
gap: 0.5rem;
}
.credential-actions button {
margin-left: 0.5rem;
padding: 0.4rem 0.8rem;
padding: 0.5rem 0.8rem;
border: none;
border-radius: 4px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
font-size: 0.8rem;
transition: opacity 0.3s ease, transform 0.2s ease;
white-space: nowrap;
}
.edit-btn {
@@ -259,6 +304,11 @@ input:checked + .slider:before {
color: #ffffff;
}
.edit-search-btn {
background: #2d6db5;
color: #ffffff;
}
.delete-btn {
background: #ff5555;
color: #ffffff;
@@ -282,7 +332,7 @@ input:checked + .slider:before {
transform: translateY(-2px);
}
#serviceFields {
#serviceFields, #searchFields {
margin: 1.5rem 0;
}
@@ -334,6 +384,7 @@ input:checked + .slider:before {
margin-top: 1rem;
text-align: center;
font-size: 0.9rem;
min-height: 1.2rem;
}
/* MOBILE RESPONSIVENESS */
@@ -382,7 +433,15 @@ input:checked + .slider:before {
.credential-actions {
width: 100%;
display: flex;
justify-content: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
.credential-actions button {
flex: 1;
text-align: center;
padding: 0.7rem 0.5rem;
}
/* Adjust toggle switch size for better touch support */

13
static/js/album.js
View File

@@ -9,7 +9,18 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
fetch(`/api/album/info?id=${encodeURIComponent(albumId)}`)
// Fetch the config to get active Spotify account first
fetch('/api/config')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch config');
return response.json();
})
.then(config => {
const mainAccount = config.spotify || '';
// Then fetch album info with the main parameter
return fetch(`/api/album/info?id=${encodeURIComponent(albumId)}&main=${mainAccount}`);
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();

13
static/js/artist.js
View File

@@ -10,7 +10,18 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
fetch(`/api/artist/info?id=${encodeURIComponent(artistId)}`)
// Fetch the config to get active Spotify account first
fetch('/api/config')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch config');
return response.json();
})
.then(config => {
const mainAccount = config.spotify || '';
// Then fetch artist info with the main parameter
return fetch(`/api/artist/info?id=${encodeURIComponent(artistId)}&main=${mainAccount}`);
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();

259
static/js/config.js
View File

@@ -9,6 +9,15 @@ const serviceConfig = {
validator: (data) => ({
username: data.username,
credentials: data.credentials
}),
// Adding search credentials fields
searchFields: [
{ id: 'client_id', label: 'Client ID', type: 'text' },
{ id: 'client_secret', label: 'Client Secret', type: 'password' }
],
searchValidator: (data) => ({
client_id: data.client_id,
client_secret: data.client_secret
})
},
deezer: {
@@ -23,6 +32,7 @@ const serviceConfig = {
let currentService = 'spotify';
let currentCredential = null;
let isEditingSearch = false;
// Global variables to hold the active accounts from the config response.
let activeSpotifyAccount = '';
@@ -88,7 +98,7 @@ function setupEventListeners() {
document.getElementById('customDirFormat').addEventListener('change', saveConfig);
document.getElementById('customTrackFormat').addEventListener('change', saveConfig);
// New: Max concurrent downloads change listener
// Max concurrent downloads change listener
document.getElementById('maxConcurrentDownloads').addEventListener('change', saveConfig);
}
@@ -148,8 +158,13 @@ async function updateAccountSelectors() {
async function loadCredentials(service) {
try {
const response = await fetch(`/api/credentials/${service}`);
renderCredentialsList(service, await response.json());
const response = await fetch(`/api/credentials/all/${service}`);
if (!response.ok) {
throw new Error(`Failed to load credentials: ${response.statusText}`);
}
const credentials = await response.json();
renderCredentialsList(service, credentials);
} catch (error) {
showConfigError(error.message);
}
@@ -157,25 +172,57 @@ async function loadCredentials(service) {
function renderCredentialsList(service, credentials) {
const list = document.querySelector('.credentials-list');
list.innerHTML = credentials
.map(name =>
`<div class="credential-item">
<span>${name}</span>
<div class="credential-actions">
<button class="edit-btn" data-name="${name}" data-service="${service}">Edit</button>
<button class="delete-btn" data-name="${name}" data-service="${service}">Delete</button>
</div>
</div>`
)
.join('');
list.innerHTML = '';
if (!credentials.length) {
list.innerHTML = '<div class="no-credentials">No accounts found. Add a new account below.</div>';
return;
}
credentials.forEach(credData => {
const credItem = document.createElement('div');
credItem.className = 'credential-item';
const hasSearchCreds = credData.search && Object.keys(credData.search).length > 0;
credItem.innerHTML = `
<div class="credential-info">
<span class="credential-name">${credData.name}</span>
${service === 'spotify' ?
`<div class="search-credentials-status ${hasSearchCreds ? 'has-api' : 'no-api'}">
${hasSearchCreds ? 'API Configured' : 'No API Credentials'}
</div>` : ''}
</div>
<div class="credential-actions">
<button class="edit-btn" data-name="${credData.name}" data-service="${service}">Edit Account</button>
${service === 'spotify' ?
`<button class="edit-search-btn" data-name="${credData.name}" data-service="${service}">
${hasSearchCreds ? 'Edit API' : 'Add API'}
</button>` : ''}
<button class="delete-btn" data-name="${credData.name}" data-service="${service}">Delete</button>
</div>
`;
list.appendChild(credItem);
});
// Set up event handlers
list.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', handleDeleteCredential);
});
list.querySelectorAll('.edit-btn').forEach(btn => {
btn.addEventListener('click', handleEditCredential);
btn.addEventListener('click', (e) => {
isEditingSearch = false;
handleEditCredential(e);
});
});
if (service === 'spotify') {
list.querySelectorAll('.edit-search-btn').forEach(btn => {
btn.addEventListener('click', handleEditSearchCredential);
});
}
}
async function handleDeleteCredential(e) {
@@ -187,6 +234,10 @@ async function handleDeleteCredential(e) {
throw new Error('Missing credential information');
}
if (!confirm(`Are you sure you want to delete the ${name} account?`)) {
return;
}
const response = await fetch(`/api/credentials/${service}/${name}`, {
method: 'DELETE'
});
@@ -223,31 +274,137 @@ async function handleEditCredential(e) {
await new Promise(resolve => setTimeout(resolve, 50));
const response = await fetch(`/api/credentials/${service}/${name}`);
if (!response.ok) {
throw new Error(`Failed to load credential: ${response.statusText}`);
}
const data = await response.json();
currentCredential = name;
document.getElementById('credentialName').value = name;
document.getElementById('credentialName').disabled = true;
document.getElementById('formTitle').textContent = `Edit ${service.charAt(0).toUpperCase() + service.slice(1)} Account`;
document.getElementById('submitCredentialBtn').textContent = 'Update Account';
// Show regular fields
populateFormFields(service, data);
toggleSearchFieldsVisibility(false);
} catch (error) {
showConfigError(error.message);
}
}
async function handleEditSearchCredential(e) {
const service = e.target.dataset.service;
const name = e.target.dataset.name;
try {
if (service !== 'spotify') {
throw new Error('Search credentials are only available for Spotify');
}
document.querySelector(`[data-service="${service}"]`).click();
await new Promise(resolve => setTimeout(resolve, 50));
isEditingSearch = true;
currentCredential = name;
document.getElementById('credentialName').value = name;
document.getElementById('credentialName').disabled = true;
document.getElementById('formTitle').textContent = `Spotify API Credentials for ${name}`;
document.getElementById('submitCredentialBtn').textContent = 'Save API Credentials';
// Try to load existing search credentials
try {
const searchResponse = await fetch(`/api/credentials/${service}/${name}?type=search`);
if (searchResponse.ok) {
const searchData = await searchResponse.json();
// Populate search fields
serviceConfig[service].searchFields.forEach(field => {
const element = document.getElementById(field.id);
if (element) element.value = searchData[field.id] || '';
});
} else {
// Clear search fields if no existing search credentials
serviceConfig[service].searchFields.forEach(field => {
const element = document.getElementById(field.id);
if (element) element.value = '';
});
}
} catch (error) {
// Clear search fields if there was an error
serviceConfig[service].searchFields.forEach(field => {
const element = document.getElementById(field.id);
if (element) element.value = '';
});
}
// Hide regular account fields, show search fields
toggleSearchFieldsVisibility(true);
} catch (error) {
showConfigError(error.message);
}
}
function toggleSearchFieldsVisibility(showSearchFields) {
const serviceFieldsDiv = document.getElementById('serviceFields');
const searchFieldsDiv = document.getElementById('searchFields');
if (showSearchFields) {
serviceFieldsDiv.style.display = 'none';
searchFieldsDiv.style.display = 'block';
} else {
serviceFieldsDiv.style.display = 'block';
searchFieldsDiv.style.display = 'none';
}
}
function updateFormFields() {
const serviceFields = document.getElementById('serviceFields');
serviceFields.innerHTML = serviceConfig[currentService].fields
.map(field =>
`<div class="form-group">
<label>${field.label}:</label>
<input type="${field.type}"
id="${field.id}"
name="${field.id}"
required
${field.type === 'password' ? 'autocomplete="new-password"' : ''}>
</div>`
)
.join('');
const serviceFieldsDiv = document.getElementById('serviceFields');
const searchFieldsDiv = document.getElementById('searchFields');
// Clear any existing fields
serviceFieldsDiv.innerHTML = '';
searchFieldsDiv.innerHTML = '';
// Add regular account fields
serviceConfig[currentService].fields.forEach(field => {
const fieldDiv = document.createElement('div');
fieldDiv.className = 'form-group';
fieldDiv.innerHTML = `
<label>${field.label}:</label>
<input type="${field.type}"
id="${field.id}"
name="${field.id}"
required
${field.type === 'password' ? 'autocomplete="new-password"' : ''}>
`;
serviceFieldsDiv.appendChild(fieldDiv);
});
// Add search fields for Spotify
if (currentService === 'spotify' && serviceConfig[currentService].searchFields) {
serviceConfig[currentService].searchFields.forEach(field => {
const fieldDiv = document.createElement('div');
fieldDiv.className = 'form-group';
fieldDiv.innerHTML = `
<label>${field.label}:</label>
<input type="${field.type}"
id="${field.id}"
name="${field.id}"
required
${field.type === 'password' ? 'autocomplete="new-password"' : ''}>
`;
searchFieldsDiv.appendChild(fieldDiv);
});
}
// Reset form title and button text
document.getElementById('formTitle').textContent = `Add New ${currentService.charAt(0).toUpperCase() + currentService.slice(1)} Account`;
document.getElementById('submitCredentialBtn').textContent = 'Save Account';
// Initially show regular fields, hide search fields
toggleSearchFieldsVisibility(false);
isEditingSearch = false;
}
function populateFormFields(service, data) {
@@ -268,16 +425,35 @@ async function handleCredentialSubmit(e) {
throw new Error('Credential name is required');
}
const formData = {};
serviceConfig[service].fields.forEach(field => {
formData[field.id] = document.getElementById(field.id).value.trim();
});
const data = serviceConfig[service].validator(formData);
const endpointName = currentCredential || name;
const method = currentCredential ? 'PUT' : 'POST';
let method, data, endpoint;
const response = await fetch(`/api/credentials/${service}/${endpointName}`, {
if (isEditingSearch && service === 'spotify') {
// Handle search credentials
const formData = {};
serviceConfig[service].searchFields.forEach(field => {
formData[field.id] = document.getElementById(field.id).value.trim();
});
data = serviceConfig[service].searchValidator(formData);
endpoint = `/api/credentials/${service}/${endpointName}?type=search`;
// Check if search credentials already exist for this account
const checkResponse = await fetch(endpoint);
method = checkResponse.ok ? 'PUT' : 'POST';
} else {
// Handle regular account credentials
const formData = {};
serviceConfig[service].fields.forEach(field => {
formData[field.id] = document.getElementById(field.id).value.trim();
});
data = serviceConfig[service].validator(formData);
endpoint = `/api/credentials/${service}/${endpointName}`;
method = currentCredential ? 'PUT' : 'POST';
}
const response = await fetch(endpoint, {
method,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
@@ -299,10 +475,19 @@ async function handleCredentialSubmit(e) {
function resetForm() {
currentCredential = null;
isEditingSearch = false;
const nameInput = document.getElementById('credentialName');
nameInput.value = '';
nameInput.disabled = false;
document.getElementById('credentialForm').reset();
// Reset form title and button text
const service = currentService.charAt(0).toUpperCase() + currentService.slice(1);
document.getElementById('formTitle').textContent = `Add New ${service} Account`;
document.getElementById('submitCredentialBtn').textContent = 'Save Account';
// Show regular account fields, hide search fields
toggleSearchFieldsVisibility(false);
}
async function saveConfig() {
@@ -369,5 +554,5 @@ async function loadConfig() {
function showConfigError(message) {
const errorDiv = document.getElementById('configError');
errorDiv.textContent = message;
setTimeout(() => (errorDiv.textContent = ''), 3000);
setTimeout(() => (errorDiv.textContent = ''), 5000);
}

12
static/js/main.js
View File

@@ -58,7 +58,13 @@ async function performSearch() {
resultsContainer.innerHTML = '<div class="loading">Searching...</div>';
try {
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}&search_type=${searchType}&limit=50`);
// Fetch config to get active Spotify account
const configResponse = await fetch('/api/config');
const config = await configResponse.json();
const mainAccount = config.spotify || '';
// Add the main parameter to the search API call
const response = await fetch(`/api/search?q=${encodeURIComponent(query)}&search_type=${searchType}&limit=50&main=${mainAccount}`);
const data = await response.json();
if (data.error) throw new Error(data.error);
@@ -81,7 +87,7 @@ async function performSearch() {
/**
* Attaches event listeners to all download buttons (both standard and small versions).
* Instead of using the NodeList index (which can be off when multiple buttons are in one card),
* we look up the closest result card’s data-index to get the correct item.
* we look up the closest result card's data-index to get the correct item.
*/
function attachDownloadListeners(items) {
document.querySelectorAll('.download-btn, .download-btn-small').forEach((btn) => {
@@ -294,7 +300,7 @@ function createResultCard(item, type, index) {
<div class="title-and-view">
<div class="track-title">${title}</div>
<div class="title-buttons">
<!-- A primary download button (if you want one for a “default” download) -->
<!-- A primary download button (if you want one for a "default" download) -->
<button class="download-btn-small"
data-url="${item.external_urls.spotify}"
data-type="${type}"

16
static/js/playlist.js
View File

@@ -11,8 +11,18 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
// Fetch playlist info and render it
fetch(`/api/playlist/info?id=${encodeURIComponent(playlistId)}`)
// Fetch the config to get active Spotify account first
fetch('/api/config')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch config');
return response.json();
})
.then(config => {
const mainAccount = config.spotify || '';
// Then fetch playlist info with the main parameter
return fetch(`/api/playlist/info?id=${encodeURIComponent(playlistId)}&main=${mainAccount}`);
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
@@ -280,8 +290,6 @@ async function downloadPlaylistAlbums(playlist) {
}
}
/**
* Starts the download process by building the API URL,
* fetching download details, and then adding the download to the queue.

14
static/js/track.js
View File

@@ -11,8 +11,18 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
// Fetch track info and render it
fetch(`/api/track/info?id=${encodeURIComponent(trackId)}`)
// Fetch the config to get active Spotify account first
fetch('/api/config')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch config');
return response.json();
})
.then(config => {
const mainAccount = config.spotify || '';
// Then fetch track info with the main parameter
return fetch(`/api/track/info?id=${encodeURIComponent(trackId)}&main=${mainAccount}`);
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();