//js/settings import { themeManager, lastFMStorage, nowPlayingSettings, lyricsSettings, backgroundSettings, trackListSettings } from './storage.js'; import { db } from './db.js'; import { authManager } from './firebase/auth.js'; import { syncManager } from './firebase/sync.js'; import { initializeFirebaseSettingsUI } from './firebase/config.js'; export function initializeSettings(scrobbler, player, api, ui) { // Initialize Firebase UI & Settings authManager.updateUI(authManager.user); initializeFirebaseSettingsUI(); // Email Auth UI Logic const toggleEmailBtn = document.getElementById('toggle-email-auth-btn'); const cancelEmailBtn = document.getElementById('cancel-email-auth-btn'); const authContainer = document.getElementById('email-auth-container'); const authButtonsContainer = document.getElementById('auth-buttons-container'); const emailInput = document.getElementById('auth-email'); const passwordInput = document.getElementById('auth-password'); const signInBtn = document.getElementById('email-signin-btn'); const signUpBtn = document.getElementById('email-signup-btn'); if (toggleEmailBtn && authContainer && authButtonsContainer) { toggleEmailBtn.addEventListener('click', () => { authContainer.style.display = 'flex'; authButtonsContainer.style.display = 'none'; }); } if (cancelEmailBtn && authContainer && authButtonsContainer) { cancelEmailBtn.addEventListener('click', () => { authContainer.style.display = 'none'; authButtonsContainer.style.display = 'flex'; }); } if (signInBtn) { signInBtn.addEventListener('click', async () => { const email = emailInput.value; const password = passwordInput.value; if (!email || !password) { alert('Please enter both email and password.'); return; } try { await authManager.signInWithEmail(email, password); authContainer.style.display = 'none'; authButtonsContainer.style.display = 'flex'; emailInput.value = ''; passwordInput.value = ''; } catch (e) { // Error handled in authManager } }); } if (signUpBtn) { signUpBtn.addEventListener('click', async () => { const email = emailInput.value; const password = passwordInput.value; if (!email || !password) { alert('Please enter both email and password.'); return; } try { await authManager.signUpWithEmail(email, password); authContainer.style.display = 'none'; authButtonsContainer.style.display = 'flex'; emailInput.value = ''; passwordInput.value = ''; } catch (e) { // Error handled in authManager } }); } const lastfmConnectBtn = document.getElementById('lastfm-connect-btn'); const lastfmStatus = document.getElementById('lastfm-status'); const lastfmToggle = document.getElementById('lastfm-toggle'); const lastfmToggleSetting = document.getElementById('lastfm-toggle-setting'); const lastfmLoveToggle = document.getElementById('lastfm-love-toggle'); const lastfmLoveSetting = document.getElementById('lastfm-love-setting'); function updateLastFMUI() { if (scrobbler.isAuthenticated()) { lastfmStatus.textContent = `Connected as ${scrobbler.username}`; lastfmConnectBtn.textContent = 'Disconnect'; lastfmConnectBtn.classList.add('danger'); lastfmToggleSetting.style.display = 'flex'; lastfmLoveSetting.style.display = 'flex'; lastfmToggle.checked = lastFMStorage.isEnabled(); lastfmLoveToggle.checked = lastFMStorage.shouldLoveOnLike(); } else { lastfmStatus.textContent = 'Connect your Last.fm account to scrobble tracks'; lastfmConnectBtn.textContent = 'Connect Last.fm'; lastfmConnectBtn.classList.remove('danger'); lastfmToggleSetting.style.display = 'none'; lastfmLoveSetting.style.display = 'none'; } } updateLastFMUI(); lastfmConnectBtn?.addEventListener('click', async () => { if (scrobbler.isAuthenticated()) { if (confirm('Disconnect from Last.fm?')) { scrobbler.disconnect(); updateLastFMUI(); } return; } const authWindow = window.open('', '_blank'); lastfmConnectBtn.disabled = true; lastfmConnectBtn.textContent = 'Opening Last.fm...'; try { const { token, url } = await scrobbler.getAuthUrl(); if (authWindow) { authWindow.location.href = url; } else { alert('Popup blocked! Please allow popups.'); lastfmConnectBtn.textContent = 'Connect Last.fm'; lastfmConnectBtn.disabled = false; return; } lastfmConnectBtn.textContent = 'Waiting for authorization...'; let attempts = 0; const maxAttempts = 30; const checkAuth = setInterval(async () => { attempts++; if (attempts > maxAttempts) { clearInterval(checkAuth); lastfmConnectBtn.textContent = 'Connect Last.fm'; lastfmConnectBtn.disabled = false; if (authWindow && !authWindow.closed) authWindow.close(); alert('Authorization timed out. Please try again.'); return; } try { const result = await scrobbler.completeAuthentication(token); if (result.success) { clearInterval(checkAuth); if (authWindow && !authWindow.closed) authWindow.close(); updateLastFMUI(); lastfmConnectBtn.disabled = false; lastFMStorage.setEnabled(true); lastfmToggle.checked = true; alert(`Successfully connected to Last.fm as ${result.username}!`); } } catch (e) { // Still waiting } }, 2000); } catch (error) { console.error('Last.fm connection failed:', error); alert('Failed to connect to Last.fm: ' + error.message); lastfmConnectBtn.textContent = 'Connect Last.fm'; lastfmConnectBtn.disabled = false; if (authWindow && !authWindow.closed) authWindow.close(); } }); lastfmToggle?.addEventListener('change', (e) => { lastFMStorage.setEnabled(e.target.checked); }); lastfmLoveToggle?.addEventListener('change', (e) => { lastFMStorage.setLoveOnLike(e.target.checked); }); // Theme picker const themePicker = document.getElementById('theme-picker'); const currentTheme = themeManager.getTheme(); themePicker.querySelectorAll('.theme-option').forEach(option => { if (option.dataset.theme === currentTheme) { option.classList.add('active'); } option.addEventListener('click', () => { const theme = option.dataset.theme; themePicker.querySelectorAll('.theme-option').forEach(opt => opt.classList.remove('active')); option.classList.add('active'); if (theme === 'custom') { document.getElementById('custom-theme-editor').classList.add('show'); renderCustomThemeEditor(); } else { document.getElementById('custom-theme-editor').classList.remove('show'); themeManager.setTheme(theme); } }); }); function renderCustomThemeEditor() { const grid = document.getElementById('theme-color-grid'); const customTheme = themeManager.getCustomTheme() || { background: '#000000', foreground: '#fafafa', primary: '#ffffff', secondary: '#27272a', muted: '#27272a', border: '#27272a', highlight: '#ffffff' }; grid.innerHTML = Object.entries(customTheme).map(([key, value]) => `