nocopyrightsounds-widget 1.0.3 → 1.0.5

package/README.md

@@ -15,6 +15,6 @@ import NCSWidget from 'nocopyrightsounds-widget';
 
 const widget = new NCSWidget({
     position: 'bottom-right', // 'bottom-left', 'top-right', 'top-left'
-    apiUrl: 'https://ncs-api.kaninchenspeed.workers.dev' // L'URL de votre API
+    apiUrl: 'https://ncs-backend-api.onrender.com' // L'URL de votre API
 });
 \`\`\`

package/package.json

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

package/src/index.js

@@ -6,7 +6,6 @@ class NCSWidget {
         this.audio = new Audio();
         this.isPlaying = false;
         
-        // Historique et File d'attente (Préchargement)
         this.trackHistory = [];
         this.currentHistoryIndex = -1;
         this.nextTracksQueue = [];
@@ -14,21 +13,25 @@ class NCSWidget {
         
         this.isBrowser = typeof window !== 'undefined';
         if (this.isBrowser) {
-            this.audio.volume = localStorage.getItem('ncs_volume') || 0.5;
+            // Le volume est à 1 (100%) par défaut s'il n'y a rien en cache
+            const savedVol = localStorage.getItem('ncs_volume');
+            this.audio.volume = savedVol !== null ? parseFloat(savedVol) : 1.0;
+            this.lastVolume = this.audio.volume > 0 ? this.audio.volume : 1.0; // Pour le mute/unmute
+            
             this.savedTime = localStorage.getItem('ncs_currentTime') || 0;
             this.savedTrack = localStorage.getItem('ncs_currentTrack') || null;
             this.savedCover = localStorage.getItem('ncs_currentCover') || null;
             this.savedTitle = localStorage.getItem('ncs_currentTitle') || null;
+            this.savedArtists = localStorage.getItem('ncs_currentArtists') || null;
             this.isWidgetOpen = localStorage.getItem('ncs_isOpen') === 'true';
         }
 
         this.initDOM();
         this.attachEvents();
         
-        // Initialisation de la musique
         if (this.savedTrack && this.savedTime > 0) {
             this.restoreTrack();
-            this.fillQueue(this.genreSelect.value); // Lancer le préchargement en fond
+            this.fillQueue(this.genreSelect.value);
         } else {
             this.changeGenre(this.genreSelect.value);
         }
@@ -43,23 +46,18 @@ 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-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; 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; }
@@ -69,11 +67,11 @@ class NCSWidget {
             
             .ncs-track-info { display: flex; align-items: center; margin-bottom: 15px; }
             .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: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
+            .ncs-details { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
+            #ncs-track-name { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
+            #ncs-artists { font-size: 11px; color: #a0a0a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
             #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; }
@@ -89,6 +87,8 @@ class NCSWidget {
             
             .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-mute-btn { cursor: pointer; transition: transform 0.1s; user-select: none; }
+            #ncs-mute-btn:hover { transform: scale(1.1); }
             .ncs-download-btn { color: #b3b3b3; text-decoration: none; font-size: 18px; transition: color 0.2s; }
             .ncs-download-btn:hover { color: #1DB954; }
             
@@ -99,8 +99,7 @@ class NCSWidget {
             <div class="ncs-minimized ${this.isWidgetOpen ? 'hidden' : ''}">🎧</div>
             <div class="ncs-expanded ${this.isWidgetOpen ? 'active' : ''}">
                 <div class="ncs-header">
-                    <strong>
-                        NCS Player
+                    <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>
@@ -112,6 +111,7 @@ class NCSWidget {
                     <img id="ncs-cover" class="ncs-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Cover" />
                     <div class="ncs-details">
                         <div id="ncs-track-name">Chargement...</div>
+                        <div id="ncs-artists">Artiste(s)</div>
                         <select id="ncs-genre">
                             <option value="electronic">⚡ Électronique</option>
                             <option value="house">🏠 House</option>
@@ -135,7 +135,7 @@ class NCSWidget {
 
                 <div class="ncs-bottom-bar">
                     <div class="ncs-volume-container">
-                        <span>🔉</span>
+                        <span id="ncs-mute-btn">${this.audio.volume === 0 ? '🔇' : '🔊'}</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>
@@ -152,9 +152,11 @@ class NCSWidget {
         this.nextBtn = this.container.querySelector('#ncs-next');
         this.prevBtn = this.container.querySelector('#ncs-prev');
         this.downloadBtn = this.container.querySelector('#ncs-download');
+        this.muteBtn = this.container.querySelector('#ncs-mute-btn');
         this.visualizer = this.container.querySelector('#ncs-vis');
         this.genreSelect = this.container.querySelector('#ncs-genre');
         this.trackName = this.container.querySelector('#ncs-track-name');
+        this.artistsName = this.container.querySelector('#ncs-artists');
         this.coverImg = this.container.querySelector('#ncs-cover');
         this.progressBar = this.container.querySelector('#ncs-progress');
         this.volumeBar = this.container.querySelector('#ncs-volume');
@@ -201,10 +203,31 @@ class NCSWidget {
         this.audio.addEventListener('ended', () => this.handleNext());
 
         this.progressBar.addEventListener('input', (e) => { this.audio.currentTime = e.target.value; });
+        
+        // --- NOUVEAU : GESTION DU MUTE ET DU VOLUME ---
         this.volumeBar.addEventListener('input', (e) => {
-            this.audio.volume = e.target.value;
-            localStorage.setItem('ncs_volume', e.target.value);
+            const vol = parseFloat(e.target.value);
+            this.audio.volume = vol;
+            if (vol > 0) this.lastVolume = vol; // On mémorise si c'est > 0
+            this.updateMuteIcon(vol);
+            localStorage.setItem('ncs_volume', vol);
+        });
+
+        this.muteBtn.addEventListener('click', () => {
+            if (this.audio.volume > 0) {
+                // On Mute
+                this.lastVolume = this.audio.volume;
+                this.audio.volume = 0;
+                this.volumeBar.value = 0;
+            } else {
+                // On Unmute
+                this.audio.volume = this.lastVolume || 1.0;
+                this.volumeBar.value = this.audio.volume;
+            }
+            this.updateMuteIcon(this.audio.volume);
+            localStorage.setItem('ncs_volume', this.audio.volume);
         });
+        // ----------------------------------------------
 
         setInterval(() => {
             if (this.isPlaying && this.audio.currentTime > 0) {
@@ -213,6 +236,16 @@ class NCSWidget {
         }, 1000);
     }
 
+    updateMuteIcon(vol) {
+        if (vol === 0) {
+            this.muteBtn.innerText = '🔇';
+        } else if (vol < 0.5) {
+            this.muteBtn.innerText = '🔉';
+        } else {
+            this.muteBtn.innerText = '🔊';
+        }
+    }
+
     toggleState(isOpen) {
         if (isOpen) {
             this.minimized.classList.add('hidden');
@@ -248,10 +281,6 @@ 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}`);
@@ -264,50 +293,47 @@ class NCSWidget {
     }
 
     async fillQueue(genre) {
-        if (this.isPreloading) return; // Éviter de lancer plusieurs recherches en même temps
+        if (this.isPreloading) return;
         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
+                break;
             }
         }
-        
         this.isPreloading = false;
     }
 
     async changeGenre(genre) {
-        this.nextTracksQueue = []; // On vide la file d'attente car le genre a changé
+        this.nextTracksQueue = [];
         this.trackName.innerText = "Recherche...";
+        this.artistsName.innerText = "...";
         
         const track = await this.fetchSingleTrack(genre);
         if (track) {
             this.setTrack(track, true);
-            this.fillQueue(genre); // On lance le préchargement en fond !
+            this.fillQueue(genre);
         } else {
-            this.trackName.innerText = "Aucune piste trouvée.";
+            this.trackName.innerText = "Aucune piste.";
+            this.artistsName.innerText = "";
         }
     }
 
-    // ----------------------------------------------------
-    // GESTION DU LECTEUR ET HISTORIQUE
-    // ----------------------------------------------------
-
     restoreTrack() {
         this.audio.src = this.savedTrack;
         this.trackName.innerText = this.savedTitle;
+        this.artistsName.innerText = this.savedArtists || "NCS Release";
         if (this.savedCover) this.coverImg.src = this.savedCover;
         this.downloadBtn.href = this.savedTrack;
         
         this.trackHistory = [{
             audioUrl: this.savedTrack,
             title: this.savedTitle,
+            artists: this.savedArtists,
             coverUrl: this.savedCover
         }];
         this.currentHistoryIndex = 0;
@@ -316,11 +342,16 @@ class NCSWidget {
     setTrack(track, addToHistory = false) {
         this.audio.src = track.audioUrl;
         this.trackName.innerText = track.title;
+        
+        // Mettre à jour l'affichage des artistes
+        const artistes = track.artists || "NCS Release";
+        this.artistsName.innerText = artistes;
+        this.artistsName.title = artistes; // Bulle info au survol si le texte est long
+        
         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;
@@ -330,6 +361,7 @@ class NCSWidget {
         if (this.isBrowser) {
             localStorage.setItem('ncs_currentTrack', track.audioUrl);
             localStorage.setItem('ncs_currentTitle', track.title);
+            localStorage.setItem('ncs_currentArtists', artistes);
             localStorage.setItem('ncs_currentCover', track.coverUrl);
             localStorage.setItem('ncs_currentTime', 0);
             this.savedTime = 0;
@@ -345,22 +377,19 @@ class NCSWidget {
 
     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
+            const nextTrack = this.nextTracksQueue.shift();
             this.setTrack(nextTrack, true);
-            this.fillQueue(genre); // On refait le plein discrètement
+            this.fillQueue(genre);
         } 
-        // Cas 3 : L'utilisateur clique trop vite et la file d'attente est vide (Secours)
         else {
             this.trackName.innerText = "Recherche...";
+            this.artistsName.innerText = "...";
             const track = await this.fetchSingleTrack(genre);
             if (track) {
                 this.setTrack(track, true);
@@ -374,7 +403,6 @@ class NCSWidget {
             this.currentHistoryIndex--;
             this.setTrack(this.trackHistory[this.currentHistoryIndex], false);
             this.prevBtn.disabled = this.currentHistoryIndex <= 0;
-            
             this.savedTime = 0;
             localStorage.setItem('ncs_currentTime', 0);
         }