229 lines
9.2 KiB
JavaScript
229 lines
9.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const searchInput = document.getElementById('mainSearch');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
if (searchInput.value.trim().toLowerCase() === 'deep1') {
|
|
window.location.href = 'premium.php';
|
|
} else {
|
|
alert('Searching for: ' + searchInput.value);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- AUTHENTICATION ---
|
|
const authButtons = document.getElementById('auth-buttons');
|
|
const userGreeting = document.getElementById('user-greeting');
|
|
const loginForm = document.getElementById('login-form');
|
|
const signupForm = document.getElementById('signup-form');
|
|
const loginModal = new bootstrap.Modal(document.getElementById('loginModal'));
|
|
const signupModal = new bootstrap.Modal(document.getElementById('signupModal'));
|
|
const loginError = document.getElementById('login-error');
|
|
const signupError = document.getElementById('signup-error');
|
|
let isLoggedIn = false;
|
|
|
|
async function checkAuth() {
|
|
try {
|
|
const response = await fetch('auth.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
|
body: 'action=check_auth'
|
|
});
|
|
const result = await response.json();
|
|
isLoggedIn = result.loggedIn;
|
|
if (isLoggedIn) {
|
|
authButtons.classList.add('d-none');
|
|
userGreeting.innerHTML = `Welcome, ${escapeHTML(result.email)} <button id="logout-button" class="btn btn-sm btn-outline-secondary ms-2">Logout</button>`;
|
|
userGreeting.classList.remove('d-none');
|
|
} else {
|
|
authButtons.classList.remove('d-none');
|
|
userGreeting.classList.add('d-none');
|
|
}
|
|
} catch (error) {
|
|
console.error('Auth check failed', error);
|
|
}
|
|
await renderPlaylists();
|
|
}
|
|
|
|
if(loginForm) {
|
|
loginForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
loginError.textContent = '';
|
|
const response = await fetch('auth.php', {
|
|
method: 'POST',
|
|
body: new URLSearchParams({action: 'login', email: document.getElementById('login-email').value, password: document.getElementById('login-password').value})
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
loginModal.hide();
|
|
await checkAuth();
|
|
} else {
|
|
loginError.textContent = result.message;
|
|
}
|
|
});
|
|
}
|
|
|
|
if(signupForm) {
|
|
signupForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
signupError.textContent = '';
|
|
const response = await fetch('auth.php', {
|
|
method: 'POST',
|
|
body: new URLSearchParams({action: 'register', email: document.getElementById('signup-email').value, password: document.getElementById('signup-password').value})
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
signupModal.hide();
|
|
await checkAuth();
|
|
} else {
|
|
signupError.textContent = result.message;
|
|
}
|
|
});
|
|
}
|
|
|
|
userGreeting.addEventListener('click', async (e) => {
|
|
if (e.target.id === 'logout-button') {
|
|
await fetch('auth.php', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: 'action=logout' });
|
|
isLoggedIn = false;
|
|
checkAuth();
|
|
}
|
|
});
|
|
|
|
// --- END AUTHENTICATION ---
|
|
|
|
const navLinks = {
|
|
home: document.getElementById('nav-home'),
|
|
playlists: document.getElementById('nav-playlists'),
|
|
settings: document.getElementById('nav-settings'),
|
|
help: document.getElementById('nav-help'),
|
|
};
|
|
|
|
const sections = {
|
|
home: document.getElementById('home-section'),
|
|
playlists: document.getElementById('playlists-section'),
|
|
};
|
|
|
|
function navigateTo(sectionName) {
|
|
Object.values(sections).forEach(section => {
|
|
if (section) section.style.display = 'none';
|
|
});
|
|
if (sections[sectionName]) {
|
|
sections[sectionName].style.display = 'block';
|
|
}
|
|
Object.values(navLinks).forEach(link => {
|
|
if(link) link.classList.remove('active');
|
|
});
|
|
if (navLinks[sectionName]) {
|
|
navLinks[sectionName].classList.add('active');
|
|
}
|
|
}
|
|
|
|
if(navLinks.home) navLinks.home.addEventListener('click', (e) => { e.preventDefault(); navigateTo('home'); });
|
|
if(navLinks.playlists) navLinks.playlists.addEventListener('click', (e) => { e.preventDefault(); navigateTo('playlists'); });
|
|
if(navLinks.settings) navLinks.settings.addEventListener('click', (e) => { e.preventDefault(); alert('Settings page is not yet implemented.'); });
|
|
if(navLinks.help) navLinks.help.addEventListener('click', (e) => { e.preventDefault(); alert('Help page is not yet implemented.'); });
|
|
|
|
// --- PLAYLISTS ---
|
|
const playlistForm = document.getElementById('add-playlist-form');
|
|
const playlistsList = document.getElementById('playlists-list');
|
|
|
|
// Local Storage Functions
|
|
const getLocalPlaylists = () => JSON.parse(localStorage.getItem('user_playlists')) || [];
|
|
const saveLocalPlaylists = (playlists) => localStorage.setItem('user_playlists', JSON.stringify(playlists));
|
|
|
|
async function renderPlaylists() {
|
|
playlistsList.innerHTML = '<p class="text-white-50">Loading...</p>';
|
|
let playlists = [];
|
|
if (isLoggedIn) {
|
|
const response = await fetch('playlist_manager.php?action=get');
|
|
playlists = await response.json();
|
|
} else {
|
|
playlists = getLocalPlaylists();
|
|
}
|
|
|
|
playlistsList.innerHTML = '';
|
|
if (playlists.length === 0) {
|
|
playlistsList.innerHTML = '<p class="text-white-50">Your added playlists will appear here.</p>';
|
|
if (!isLoggedIn) {
|
|
playlistsList.innerHTML += '<p class="text-white-50">Sign up to save your playlists to your account.</p>';
|
|
}
|
|
return;
|
|
}
|
|
|
|
playlists.forEach((playlist, index) => {
|
|
const playlistEl = document.createElement('div');
|
|
playlistEl.className = 'card playlist-card mb-3';
|
|
const playlistId = isLoggedIn ? playlist.id : index;
|
|
playlistEl.innerHTML = `
|
|
<div class="card-body d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h5 class="card-title mb-1">${escapeHTML(playlist.name)}</h5>
|
|
<p class="card-text text-white-50 text-truncate" style="max-width: 200px;">${escapeHTML(playlist.url)}</p>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-primary play-playlist" data-url="${escapeHTML(playlist.url)}"><i class="bi bi-play-fill"></i></button>
|
|
<button class="btn btn-sm btn-outline-danger delete-playlist" data-id="${playlistId}"><i class="bi bi-trash-fill"></i></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
playlistsList.appendChild(playlistEl);
|
|
});
|
|
}
|
|
|
|
if (playlistForm) {
|
|
playlistForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const name = document.getElementById('playlist-name').value;
|
|
const url = document.getElementById('playlist-url').value;
|
|
|
|
if (isLoggedIn) {
|
|
await fetch('playlist_manager.php', {
|
|
method: 'POST',
|
|
body: new URLSearchParams({action: 'add', name, url})
|
|
});
|
|
} else {
|
|
const playlists = getLocalPlaylists();
|
|
playlists.push({ name, url });
|
|
saveLocalPlaylists(playlists);
|
|
}
|
|
|
|
renderPlaylists();
|
|
playlistForm.reset();
|
|
});
|
|
}
|
|
|
|
playlistsList.addEventListener('click', async function(e) {
|
|
const playButton = e.target.closest('.play-playlist');
|
|
const deleteButton = e.target.closest('.delete-playlist');
|
|
|
|
if (playButton) {
|
|
window.location.href = `player.php?url=${encodeURIComponent(playButton.dataset.url)}`;
|
|
}
|
|
|
|
if (deleteButton) {
|
|
const id = deleteButton.dataset.id;
|
|
if (isLoggedIn) {
|
|
await fetch('playlist_manager.php', {
|
|
method: 'POST',
|
|
body: new URLSearchParams({action: 'delete', id})
|
|
});
|
|
} else {
|
|
let playlists = getLocalPlaylists();
|
|
playlists.splice(id, 1);
|
|
saveLocalPlaylists(playlists);
|
|
}
|
|
renderPlaylists();
|
|
}
|
|
});
|
|
|
|
checkAuth();
|
|
});
|
|
|
|
function escapeHTML(str) {
|
|
var p = document.createElement("p");
|
|
p.appendChild(document.createTextNode(str));
|
|
return p.innerHTML;
|
|
}
|