Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ // DOM Elements
+ const searchInput = document.getElementById('searchInput');
+ const searchButton = document.getElementById('searchButton');
+ const featuredPlaylists = document.getElementById('featuredPlaylists');
+ const recentTracks = document.getElementById('recentTracks');
+ const playlistList = document.getElementById('playlistList');
+ const playButton = document.getElementById('playButton');
+ const prevButton = document.getElementById('prevButton');
+ const nextButton = document.getElementById('nextButton');
+ const progress = document.getElementById('progress');
+ const progressBar = document.querySelector('.progress-bar');
+ const currentTimeEl = document.getElementById('currentTime');
+ const durationEl = document.getElementById('duration');
+ const trackTitle = document.getElementById('trackTitle');
+ const trackArtist = document.getElementById('trackArtist');
+ const trackImage = document.getElementById('trackImage');
+
+ // Audio element
+ const audio = new Audio();
+ let isPlaying = false;
+ let currentTrackIndex = 0;
+ let tracks = [];
+
+ // Deezer API base URL
+ const DEEZER_API = 'https://api.deezer.com';
+
+ // Fetch featured playlists
+ function fetchFeaturedPlaylists() {
+ fetch(`${DEEZER_API}/chart/0/playlists`)
+ .then(response => response.json())
+ .then(data => {
+ featuredPlaylists.innerHTML = '';
+ data.data.forEach(playlist => {
+ const playlistCard = document.createElement('div');
+ playlistCard.className = 'playlist-card';
+ playlistCard.innerHTML = `
+
+

+
+
${playlist.title}
+
${playlist.nb_tracks} tracks
+ `;
+ playlistCard.addEventListener('click', () => fetchPlaylistTracks(playlist.id));
+ featuredPlaylists.appendChild(playlistCard);
+ });
+ })
+ .catch(error => console.error('Error fetching playlists:', error));
+ }
+
+ // Fetch playlist tracks
+ function fetchPlaylistTracks(playlistId) {
+ fetch(`${DEEZER_API}/playlist/${playlistId}/tracks`)
+ .then(response => response.json())
+ .then(data => {
+ tracks = data.data;
+ displayTracks(tracks);
+ // Play the first track automatically
+ if (tracks.length > 0) {
+ playTrack(0);
+ }
+ })
+ .catch(error => console.error('Error fetching playlist tracks:', error));
+ }
+
+ // Display tracks
+ function displayTracks(tracks) {
+ recentTracks.innerHTML = '';
+ tracks.forEach((track, index) => {
+ const trackRow = document.createElement('div');
+ trackRow.className = 'track-row';
+ trackRow.innerHTML = `
+
${formatTime(track.duration)}
+ `;
+ trackRow.addEventListener('click', () => playTrack(index));
+ recentTracks.appendChild(trackRow);
+ });
+ }
+
+ // Play track
+ function playTrack(index) {
+ currentTrackIndex = index;
+ const track = tracks[index];
+
+ audio.src = track.preview;
+ audio.play();
+ isPlaying = true;
+ playButton.innerHTML = '❚❚';
+
+ // Update track info
+ trackTitle.textContent = track.title;
+ trackArtist.textContent = track.artist.name;
+ trackImage.innerHTML = `

`;
+
+ // Set duration
+ durationEl.textContent = formatTime(track.duration);
+ }
+
+ // Format time (seconds to MM:SS)
+ function formatTime(seconds) {
+ const mins = Math.floor(seconds / 60);
+ const secs = Math.floor(seconds % 60);
+ return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+ }
+
+ // Update progress bar
+ function updateProgress() {
+ const { duration, currentTime } = audio;
+ const progressPercent = (currentTime / duration) * 100;
+ progress.style.width = `${progressPercent}%`;
+ currentTimeEl.textContent = formatTime(currentTime);
+ }
+
+ // Set progress bar
+ function setProgress(e) {
+ const width = this.clientWidth;
+ const clickX = e.offsetX;
+ const duration = audio.duration;
+ audio.currentTime = (clickX / width) * duration;
+ }
+
+ // Search function
+ function searchTracks(query) {
+ if (!query) return;
+
+ fetch(`${DEEZER_API}/search?q=${encodeURIComponent(query)}`)
+ .then(response => response.json())
+ .then(data => {
+ tracks = data.data;
+ displayTracks(tracks);
+ // Play the first track if available
+ if (tracks.length > 0) {
+ playTrack(0);
+ }
+ })
+ .catch(error => console.error('Error searching tracks:', error));
+ }
+
+ // Event listeners
+ playButton.addEventListener('click', () => {
+ if (isPlaying) {
+ audio.pause();
+ playButton.innerHTML = '▶';
+ } else {
+ audio.play();
+ playButton.innerHTML = '❚❚';
+ }
+ isPlaying = !isPlaying;
+ });
+
+ prevButton.addEventListener('click', () => {
+ currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
+ playTrack(currentTrackIndex);
+ });
+
+ nextButton.addEventListener('click', () => {
+ currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
+ playTrack(currentTrackIndex);
+ });
+
+ progressBar.addEventListener('click', setProgress);
+
+ audio.addEventListener('timeupdate', updateProgress);
+
+ audio.addEventListener('ended', () => {
+ nextButton.click();
+ });
+
+ searchButton.addEventListener('click', () => {
+ searchTracks(searchInput.value);
+ });
+
+ searchInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ searchTracks(searchInput.value);
+ }
+ });
+
+ // Initialize with featured playlists
+ fetchFeaturedPlaylists();
+
+ // Create sample playlists in sidebar
+ const samplePlaylists = ['Favorites', 'Workout Mix', 'Chill Vibes', 'Road Trip'];
+ playlistList.innerHTML = samplePlaylists.map(playlist =>
+ `
${playlist}`+ ).join('');
+ });