nocopyrightsounds-widget 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nocopyrightsounds-widget",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Un widget musical persistant pour site web utilisant l'API NoCopyrightSounds",
   "main": "src/index.js",
   "type": "module",

package/src/index.js

@@ -1,14 +1,17 @@
 class NCSWidget {
     constructor(options = {}) {
         this.position = options.position || 'bottom-right';
-        
-        // 🌟 L'URL de VOTRE serveur par défaut (les autres devs n'auront rien à faire)
-        this.apiUrl = options.apiUrl || 'https://ncs-backend-api.onrender.com';
+        this.apiUrl = options.apiUrl || 'https://ncs-backend-api.onrender.com'; // ⚠️ METTEZ VOTRE URL RENDER ICI
         
         this.audio = new Audio();
         this.isPlaying = false;
         
-        // Persistance des données (Volume, Temps, et Musique en cours)
+        // Historique et File d'attente (Préchargement)
+        this.trackHistory = [];
+        this.currentHistoryIndex = -1;
+        this.nextTracksQueue = [];
+        this.isPreloading = false;
+        
         this.isBrowser = typeof window !== 'undefined';
         if (this.isBrowser) {
             this.audio.volume = localStorage.getItem('ncs_volume') || 0.5;
@@ -16,16 +19,18 @@ class NCSWidget {
             this.savedTrack = localStorage.getItem('ncs_currentTrack') || null;
             this.savedCover = localStorage.getItem('ncs_currentCover') || null;
             this.savedTitle = localStorage.getItem('ncs_currentTitle') || null;
+            this.isWidgetOpen = localStorage.getItem('ncs_isOpen') === 'true';
         }
 
         this.initDOM();
         this.attachEvents();
         
-        // Reprendre la lecture ou charger une nouvelle piste
+        // Initialisation de la musique
         if (this.savedTrack && this.savedTime > 0) {
             this.restoreTrack();
+            this.fillQueue(this.genreSelect.value); // Lancer le préchargement en fond
         } else {
-            this.loadTrack('electronic');
+            this.changeGenre(this.genreSelect.value);
         }
     }
 
@@ -38,44 +43,68 @@ class NCSWidget {
         const style = document.createElement('style');
         style.textContent = `
             #ncs-persistent-widget { position: fixed; ${this.getPositionStyles()} z-index: 99999; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+            
+            /* État Réduit */
             .ncs-minimized { width: 55px; height: 55px; border-radius: 50%; background: linear-gradient(135deg, #1DB954, #1ed760); cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 15px rgba(29, 185, 84, 0.4); font-size: 24px; transition: transform 0.2s; }
             .ncs-minimized:hover { transform: scale(1.1); }
-            .ncs-expanded { width: 300px; background: #181818; color: white; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: none; border: 1px solid #282828; }
-            .ncs-expanded.active { display: block; animation: ncsFadeIn 0.3s ease; }
             .ncs-minimized.hidden { display: none; }
             
+            /* État Agrandit */
+            .ncs-expanded { width: 320px; background: #181818; color: white; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: none; border: 1px solid #282828; }
+            .ncs-expanded.active { display: block; animation: ncsFadeIn 0.3s ease; }
+            
+            /* Header & Infos */
             .ncs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
-            .ncs-header strong { font-size: 14px; font-weight: 600; color: #b3b3b3; letter-spacing: 1px; text-transform: uppercase; }
+            .ncs-header strong { font-size: 14px; font-weight: 600; color: #b3b3b3; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
             .ncs-close-btn { background: transparent; border: none; color: #b3b3b3; font-size: 18px; cursor: pointer; padding: 0; transition: color 0.2s; }
             .ncs-close-btn:hover { color: white; }
             
+            /* Animation Visualizer */
+            .ncs-visualizer { display: flex; gap: 2px; height: 12px; align-items: flex-end; opacity: 0; transition: opacity 0.3s; }
+            .ncs-visualizer.playing { opacity: 1; }
+            .ncs-bar { width: 3px; background: #1DB954; border-radius: 2px; animation: bounce 0.5s infinite alternate; }
+            .ncs-bar:nth-child(2) { animation-delay: 0.15s; }
+            .ncs-bar:nth-child(3) { animation-delay: 0.3s; }
+            @keyframes bounce { from { height: 3px; } to { height: 12px; } }
+            
             .ncs-track-info { display: flex; align-items: center; margin-bottom: 15px; }
-            .ncs-cover { width: 60px; height: 60px; border-radius: 8px; background: #282828; margin-right: 15px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
+            .ncs-cover { width: 65px; height: 65px; border-radius: 8px; background: #282828; margin-right: 15px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
             .ncs-details { flex: 1; overflow: hidden; }
-            #ncs-track-name { font-size: 15px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
+            #ncs-track-name { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
             #ncs-genre { width: 100%; padding: 4px 8px; background: #282828; color: #b3b3b3; border: 1px solid #333; border-radius: 4px; font-size: 12px; cursor: pointer; outline: none; }
             
+            /* Progress & Controls */
             .ncs-progress-container { margin-bottom: 15px; display:flex; align-items:center; gap: 10px; font-size: 11px; color: #b3b3b3; }
             .ncs-slider { -webkit-appearance: none; width: 100%; height: 4px; background: #535353; border-radius: 2px; outline: none; cursor: pointer; }
             .ncs-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #1DB954; cursor: pointer; transition: transform 0.1s; }
             .ncs-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
             
-            .ncs-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 15px; }
-            .ncs-btn-circle { width: 45px; height: 45px; border-radius: 50%; background: white; color: black; border: none; font-size: 18px; cursor: pointer; display:flex; justify-content:center; align-items:center; transition: transform 0.2s; }
+            .ncs-controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 15px; }
+            .ncs-btn-circle { width: 50px; height: 50px; border-radius: 50%; background: white; color: black; border: none; font-size: 20px; cursor: pointer; display:flex; justify-content:center; align-items:center; transition: transform 0.2s; padding-left: 4px; }
+            .ncs-btn-circle.paused { padding-left: 0; }
             .ncs-btn-circle:hover { transform: scale(1.05); }
-            .ncs-btn-icon { background: transparent; border: none; color: #b3b3b3; font-size: 20px; cursor: pointer; transition: color 0.2s; }
+            .ncs-btn-icon { background: transparent; border: none; color: #b3b3b3; font-size: 20px; cursor: pointer; transition: color 0.2s; padding: 5px; }
             .ncs-btn-icon:hover { color: white; }
+            .ncs-btn-icon:disabled { color: #333; cursor: not-allowed; }
             
-            .ncs-volume-container { display: flex; align-items: center; gap: 10px; color: #b3b3b3; }
+            .ncs-bottom-bar { display: flex; justify-content: space-between; align-items: center; }
+            .ncs-volume-container { display: flex; align-items: center; gap: 8px; color: #b3b3b3; flex: 1; margin-right: 15px; }
+            .ncs-download-btn { color: #b3b3b3; text-decoration: none; font-size: 18px; transition: color 0.2s; }
+            .ncs-download-btn:hover { color: #1DB954; }
             
             @keyframes ncsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
         `;
 
         this.container.innerHTML = `
-            <div class="ncs-minimized">🎧</div>
-            <div class="ncs-expanded">
+            <div class="ncs-minimized ${this.isWidgetOpen ? 'hidden' : ''}">🎧</div>
+            <div class="ncs-expanded ${this.isWidgetOpen ? 'active' : ''}">
                 <div class="ncs-header">
-                    <strong>NCS Player</strong>
+                    <strong>
+                        NCS Player
+                        <div class="ncs-visualizer" id="ncs-vis">
+                            <div class="ncs-bar"></div><div class="ncs-bar"></div><div class="ncs-bar"></div>
+                        </div>
+                    </strong>
                     <button class="ncs-close-btn">✖</button>
                 </div>
                 
@@ -99,13 +128,17 @@ class NCSWidget {
                 </div>
 
                 <div class="ncs-controls">
+                    <button id="ncs-prev" class="ncs-btn-icon" disabled>⏮</button>
                     <button id="ncs-play-pause" class="ncs-btn-circle">▶</button>
                     <button id="ncs-next" class="ncs-btn-icon">⏭</button>
                 </div>
 
-                <div class="ncs-volume-container">
-                    <span>🔉</span>
-                    <input type="range" id="ncs-volume" class="ncs-slider" min="0" max="1" step="0.05" value="${this.audio.volume}">
+                <div class="ncs-bottom-bar">
+                    <div class="ncs-volume-container">
+                        <span>🔉</span>
+                        <input type="range" id="ncs-volume" class="ncs-slider" min="0" max="1" step="0.05" value="${this.audio.volume}">
+                    </div>
+                    <a id="ncs-download" class="ncs-download-btn" href="#" target="_blank" title="Télécharger ce titre">⬇️</a>
                 </div>
             </div>
         `;
@@ -113,11 +146,13 @@ class NCSWidget {
         document.head.appendChild(style);
         document.body.appendChild(this.container);
 
-        // Références
         this.minimized = this.container.querySelector('.ncs-minimized');
         this.expanded = this.container.querySelector('.ncs-expanded');
         this.playBtn = this.container.querySelector('#ncs-play-pause');
         this.nextBtn = this.container.querySelector('#ncs-next');
+        this.prevBtn = this.container.querySelector('#ncs-prev');
+        this.downloadBtn = this.container.querySelector('#ncs-download');
+        this.visualizer = this.container.querySelector('#ncs-vis');
         this.genreSelect = this.container.querySelector('#ncs-genre');
         this.trackName = this.container.querySelector('#ncs-track-name');
         this.coverImg = this.container.querySelector('#ncs-cover');
@@ -140,32 +175,37 @@ class NCSWidget {
     attachEvents() {
         if (!this.isBrowser) return;
         
-        // UI Events
-        this.minimized.addEventListener('click', () => this.toggleState());
-        this.container.querySelector('.ncs-close-btn').addEventListener('click', () => this.toggleState());
+        this.minimized.addEventListener('click', () => this.toggleState(true));
+        this.container.querySelector('.ncs-close-btn').addEventListener('click', () => this.toggleState(false));
+        
         this.playBtn.addEventListener('click', () => this.togglePlay());
-        this.nextBtn.addEventListener('click', () => this.loadTrack(this.genreSelect.value));
-        this.genreSelect.addEventListener('change', (e) => this.loadTrack(e.target.value));
+        this.nextBtn.addEventListener('click', () => this.handleNext());
+        this.prevBtn.addEventListener('click', () => this.handlePrev());
+        this.genreSelect.addEventListener('change', (e) => this.changeGenre(e.target.value));
 
-        // Audio Events
+        this.audio.addEventListener('play', () => {
+            this.playBtn.innerHTML = '⏸';
+            this.playBtn.classList.add('paused');
+            this.visualizer.classList.add('playing');
+        });
+        this.audio.addEventListener('pause', () => {
+            this.playBtn.innerHTML = '▶';
+            this.playBtn.classList.remove('paused');
+            this.visualizer.classList.remove('playing');
+        });
         this.audio.addEventListener('timeupdate', () => this.updateProgress());
         this.audio.addEventListener('loadedmetadata', () => {
             this.progressBar.max = this.audio.duration;
             this.timeTotal.innerText = this.formatTime(this.audio.duration);
         });
-        this.audio.addEventListener('ended', () => this.loadTrack(this.genreSelect.value)); // Auto-play suivant
+        this.audio.addEventListener('ended', () => this.handleNext());
 
-        // Inputs interactifs
-        this.progressBar.addEventListener('input', (e) => {
-            this.audio.currentTime = e.target.value;
-        });
-        
+        this.progressBar.addEventListener('input', (e) => { this.audio.currentTime = e.target.value; });
         this.volumeBar.addEventListener('input', (e) => {
             this.audio.volume = e.target.value;
             localStorage.setItem('ncs_volume', e.target.value);
         });
 
-        // Sauvegarde de la progression chaque seconde
         setInterval(() => {
             if (this.isPlaying && this.audio.currentTime > 0) {
                 localStorage.setItem('ncs_currentTime', this.audio.currentTime);
@@ -173,22 +213,25 @@ class NCSWidget {
         }, 1000);
     }
 
-    toggleState() {
-        this.minimized.classList.toggle('hidden');
-        this.expanded.classList.toggle('active');
+    toggleState(isOpen) {
+        if (isOpen) {
+            this.minimized.classList.add('hidden');
+            this.expanded.classList.add('active');
+        } else {
+            this.minimized.classList.remove('hidden');
+            this.expanded.classList.remove('active');
+        }
+        localStorage.setItem('ncs_isOpen', isOpen);
     }
 
     togglePlay() {
         if (this.isPlaying) {
             this.audio.pause();
-            this.playBtn.innerHTML = '▶';
         } else {
-            // Reprendre là où on en était si c'est le 1er clic après un changement de page
             if (this.savedTime > 0 && this.audio.currentTime === 0) {
                 this.audio.currentTime = this.savedTime;
             }
             this.audio.play();
-            this.playBtn.innerHTML = '⏸';
         }
         this.isPlaying = !this.isPlaying;
     }
@@ -205,47 +248,135 @@ class NCSWidget {
         return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
     }
 
+    // ----------------------------------------------------
+    // GESTION DES REQUÊTES ET DE LA FILE D'ATTENTE (NOUVEAU)
+    // ----------------------------------------------------
+
+    async fetchSingleTrack(genre) {
+        try {
+            const response = await fetch(`${this.apiUrl}/search?genre=${genre}`);
+            const data = await response.json();
+            return (data && data.length > 0) ? data[0] : null;
+        } catch (error) {
+            console.error("Erreur API NCS:", error);
+            return null;
+        }
+    }
+
+    async fillQueue(genre) {
+        if (this.isPreloading) return; // Éviter de lancer plusieurs recherches en même temps
+        this.isPreloading = true;
+
+        // Tant qu'on n'a pas 2 musiques d'avance, on cherche silencieusement
+        while (this.nextTracksQueue.length < 2) {
+            const track = await this.fetchSingleTrack(genre);
+            if (track) {
+                // Vérifier qu'on n'ajoute pas un doublon dans la file
+                const isDuplicate = this.nextTracksQueue.find(t => t.audioUrl === track.audioUrl);
+                if (!isDuplicate) this.nextTracksQueue.push(track);
+            } else {
+                break; // Stop si l'API ne répond plus
+            }
+        }
+        
+        this.isPreloading = false;
+    }
+
+    async changeGenre(genre) {
+        this.nextTracksQueue = []; // On vide la file d'attente car le genre a changé
+        this.trackName.innerText = "Recherche...";
+        
+        const track = await this.fetchSingleTrack(genre);
+        if (track) {
+            this.setTrack(track, true);
+            this.fillQueue(genre); // On lance le préchargement en fond !
+        } else {
+            this.trackName.innerText = "Aucune piste trouvée.";
+        }
+    }
+
+    // ----------------------------------------------------
+    // GESTION DU LECTEUR ET HISTORIQUE
+    // ----------------------------------------------------
+
     restoreTrack() {
         this.audio.src = this.savedTrack;
         this.trackName.innerText = this.savedTitle;
         if (this.savedCover) this.coverImg.src = this.savedCover;
-        // On ne met pas play() automatiquement à cause des règles des navigateurs (Autoplay policy)
+        this.downloadBtn.href = this.savedTrack;
+        
+        this.trackHistory = [{
+            audioUrl: this.savedTrack,
+            title: this.savedTitle,
+            coverUrl: this.savedCover
+        }];
+        this.currentHistoryIndex = 0;
     }
 
-    async loadTrack(genre) {
-        this.trackName.innerText = "Recherche...";
-        try {
-            const response = await fetch(`${this.apiUrl}/search?genre=${genre}`);
-            const data = await response.json();
+    setTrack(track, addToHistory = false) {
+        this.audio.src = track.audioUrl;
+        this.trackName.innerText = track.title;
+        if (track.coverUrl) this.coverImg.src = track.coverUrl;
+        this.downloadBtn.href = track.audioUrl;
+        
+        if (addToHistory) {
+            // Effacer le "futur" si on était revenu en arrière avant d'avancer
+            this.trackHistory = this.trackHistory.slice(0, this.currentHistoryIndex + 1);
+            this.trackHistory.push(track);
+            this.currentHistoryIndex = this.trackHistory.length - 1;
+            this.prevBtn.disabled = this.currentHistoryIndex <= 0;
+        }
 
-            if (data && data.length > 0) {
-                const track = data[0];
-                this.audio.src = track.audioUrl;
-                this.trackName.innerText = track.title;
-                if (track.coverUrl) this.coverImg.src = track.coverUrl;
-                
-                // Sauvegarder la nouvelle piste courante
-                if (this.isBrowser) {
-                    localStorage.setItem('ncs_currentTrack', track.audioUrl);
-                    localStorage.setItem('ncs_currentTitle', track.title);
-                    localStorage.setItem('ncs_currentCover', track.coverUrl);
-                    localStorage.setItem('ncs_currentTime', 0); // Reset timer
-                    this.savedTime = 0;
-                }
-                
-                // Si on était déjà en train d'écouter, on enchaîne
-                if (this.isPlaying) {
-                    this.audio.play();
-                } else if (this.audio.currentTime === 0 && this.playBtn.innerHTML === '⏸') {
-                    // Cas du clic sur "Suivant" alors que c'était en pause
-                    this.audio.play();
-                    this.isPlaying = true;
-                }
-            } else {
-                this.trackName.innerText = "Aucune piste.";
+        if (this.isBrowser) {
+            localStorage.setItem('ncs_currentTrack', track.audioUrl);
+            localStorage.setItem('ncs_currentTitle', track.title);
+            localStorage.setItem('ncs_currentCover', track.coverUrl);
+            localStorage.setItem('ncs_currentTime', 0);
+            this.savedTime = 0;
+        }
+        
+        if (this.isPlaying) {
+            this.audio.play();
+        } else if (this.audio.currentTime === 0 && this.playBtn.innerHTML === '⏸') {
+            this.audio.play();
+            this.isPlaying = true;
+        }
+    }
+
+    async handleNext() {
+        const genre = this.genreSelect.value;
+        
+        // Cas 1 : On a reculé dans l'historique et on veut revenir à la musique suivante connue
+        if (this.currentHistoryIndex < this.trackHistory.length - 1) {
+            this.currentHistoryIndex++;
+            this.setTrack(this.trackHistory[this.currentHistoryIndex], false);
+            this.prevBtn.disabled = this.currentHistoryIndex <= 0;
+        } 
+        // Cas 2 : L'historique est au bout, on pioche dans la file d'attente (instantané !)
+        else if (this.nextTracksQueue.length > 0) {
+            const nextTrack = this.nextTracksQueue.shift(); // Prend la 1ère de la file
+            this.setTrack(nextTrack, true);
+            this.fillQueue(genre); // On refait le plein discrètement
+        } 
+        // Cas 3 : L'utilisateur clique trop vite et la file d'attente est vide (Secours)
+        else {
+            this.trackName.innerText = "Recherche...";
+            const track = await this.fetchSingleTrack(genre);
+            if (track) {
+                this.setTrack(track, true);
+                this.fillQueue(genre);
             }
-        } catch (error) {
-            this.trackName.innerText = "Erreur API";
+        }
+    }
+
+    handlePrev() {
+        if (this.currentHistoryIndex > 0) {
+            this.currentHistoryIndex--;
+            this.setTrack(this.trackHistory[this.currentHistoryIndex], false);
+            this.prevBtn.disabled = this.currentHistoryIndex <= 0;
+            
+            this.savedTime = 0;
+            localStorage.setItem('ncs_currentTime', 0);
         }
     }
 }