90 lines
4.1 KiB
JavaScript
90 lines
4.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const moodButtons = document.querySelectorAll('.btn-mood');
|
|
const resultsSection = document.getElementById('results');
|
|
const resultsTitle = document.getElementById('results-title');
|
|
const videoGrid = document.getElementById('video-grid');
|
|
const isLoggedIn = document.body.dataset.loggedIn === 'true';
|
|
|
|
// Hardcoded YouTube video IDs for different moods
|
|
const musicDatabase = {
|
|
happy: [{id: 'y6Sxv-sUYtM', title: 'Pharrell Williams - Happy'}, {id: 'HgzGwKwLmgM', title: 'Queen - Don\'t Stop Me Now'}, {id: 'iPUmE-tne5s', title: 'Katrina & The Waves - Walking On Sunshine'}],
|
|
sad: [{id: 'hLQl3WQQoQ0', title: 'Adele - Someone Like You'}, {id: '8AHCfZTRGiI', title: 'Johnny Cash - Hurt'}, {id: 'XFkzRNyygfk', title: 'Radiohead - Creep'}],
|
|
energetic: [{id: 'v2AC41dglnM', title: 'AC/DC - Thunderstruck'}, {id: 'o1tj2zJ2Wvg', title: 'Guns N\' Roses - Welcome to the Jungle'}, {id: 'CD-E-LDc384', title: 'Metallica - Enter Sandman'}],
|
|
calm: [{id: 'vNwYtllyt3Q', title: 'Brian Eno - Music for Airports 1/1'}, {id: 'S-Xm7s9eGxU', title: 'Erik Satie - Gymnopédie No. 1'}, {id: 'U3u4pQ44e14', title: 'Claude Debussy - Clair de Lune'}],
|
|
upbeat: [{id: 'FGBhQbmPwH8', title: 'Daft Punk - One More Time'}, {id: 'sy1dYFGkPUE', title: 'Justice - D.A.N.C.E.'}, {id: 'Cj8JrQ9w5jY', title: 'LCD Soundsystem - Daft Punk Is Playing at My House'}]
|
|
};
|
|
|
|
moodButtons.forEach(button => {
|
|
button.addEventListener('click', function () {
|
|
const mood = this.dataset.mood;
|
|
|
|
// Update active button
|
|
moodButtons.forEach(btn => btn.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
displayVideos(mood);
|
|
});
|
|
});
|
|
|
|
function displayVideos(mood) {
|
|
const videos = musicDatabase[mood] || [];
|
|
videoGrid.innerHTML = ''; // Clear previous results
|
|
|
|
if (videos.length > 0) {
|
|
resultsTitle.textContent = `Here's your ${mood} playlist`;
|
|
resultsSection.style.display = 'block';
|
|
|
|
videos.forEach(video => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-lg-4 col-md-6';
|
|
|
|
const videoContainer = document.createElement('div');
|
|
videoContainer.className = 'video-container';
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = `https://www.youtube.com/embed/${video.id}`;
|
|
iframe.title = 'YouTube video player';
|
|
iframe.frameBorder = '0';
|
|
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
|
|
iframe.allowFullscreen = true;
|
|
|
|
videoContainer.appendChild(iframe);
|
|
|
|
if (isLoggedIn) {
|
|
const saveButton = document.createElement('button');
|
|
saveButton.className = 'btn btn-sm btn-outline-light mt-2';
|
|
saveButton.textContent = 'Save to favorites';
|
|
saveButton.addEventListener('click', () => saveToFavorites(video.id, video.title));
|
|
videoContainer.appendChild(saveButton);
|
|
}
|
|
|
|
col.appendChild(videoContainer);
|
|
videoGrid.appendChild(col);
|
|
});
|
|
|
|
// Smooth scroll to results
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
} else {
|
|
resultsSection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function saveToFavorites(videoId, title) {
|
|
fetch('/api/favorites.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ video_id: videoId, title: title, thumbnail: `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg` })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Saved to favorites!');
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
}
|
|
});
|
|
}
|
|
}); |