nocopyrightsounds-widget 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +37 -28
  2. package/package.json +1 -1
  3. package/src/index.js +22 -16
package/README.md CHANGED
@@ -7,18 +7,19 @@ Un lecteur musical flottant, élégant et hautement personnalisable pour intégr
7
7
 
8
8
  Conçu pour les développeurs modernes : léger, persistant entre les changements de pages, et entièrement paramétrable via JavaScript et CSS.
9
9
 
10
- ![NCS Widget Preview](https://raw.githubusercontent.com/floriangobin/nocopyrightsounds-widget/main/preview.png) *(Ajoutez une capture d'écran de votre widget dans votre dépôt GitHub et remplacez ce lien plus tard !)*
10
+ ![NCS Widget Preview](https://raw.githubusercontent.com/floriangobin/nocopyrightsounds-widget/main/preview.png) *(Ajoutez une capture d'écran de votre widget dans votre dépôt GitHub et remplacez ce lien !)*
11
11
 
12
12
  ---
13
13
 
14
14
  ## ✨ Fonctionnalités
15
15
 
16
- * ⚡ **Zéro Latence :** Algorithme de préchargement (buffering) intelligent en arrière-plan pour des transitions instantanées entre les morceaux.
17
- * 💾 **Persistance d'état :** Mémorise la piste en cours, le volume, la progression et l'état d'ouverture du widget d'une page à l'autre via `localStorage`.
18
- * 🎨 **Design Premium :** Support natif des modes clair/sombre, personnalisation des couleurs, et effet **Glassmorphism** (verre dépoli).
19
- * 🎛️ **Contrôles Complets :** Boutons Suivant/Précédent avec historique, contrôle du volume, Mute, et barre de progression cliquable.
16
+ * ⚡ **Zéro Latence :** Algorithme de préchargement (buffering) en arrière-plan pour des transitions instantanées.
17
+ * 💾 **Persistance d'état :** Mémorise la piste en cours, le volume, la progression et l'état du widget d'une page à l'autre via `localStorage`.
18
+ * 🎨 **Design Premium & Glassmorphism :** Support natif des modes clair/sombre, personnalisation des couleurs et effet de verre dépoli.
19
+ * 🎛️ **Contrôles Complets :** Boutons Suivant/Précédent avec historique, contrôle du volume, Mute, et barre de progression.
20
20
  * 🎵 **Catalogue Complet :** Navigation aléatoire intelligente parmi les 60+ genres historiques de NCS.
21
- * 👁️ **UI Modulaire :** Possibilité de masquer des éléments (téléchargement, visualizer) pour un rendu minimaliste.
21
+ * 🔘 **Bouton Réduit Sur Mesure :** Transformez l'icône flottante en cercle, en carré, changez l'émoji ou mettez-y du texte !
22
+ * 🔌 **Prêt à l'emploi (Plug & Play) :** API backend officielle intégrée par défaut. Zéro configuration requise !
22
23
 
23
24
  ---
24
25
 
@@ -40,29 +41,32 @@ npm install nocopyrightsounds-widget
40
41
 
41
42
  ## 🚀 Utilisation Rapide
42
43
 
43
- ### Exemple basique
44
+ ### Exemple basique (Zéro configuration)
44
45
  \`\`\`html
45
46
  <script type="module">
46
47
  import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js';
48
+
49
+ // Le widget s'occupe de tout avec les paramètres par défaut !
47
50
  const player = new NCSWidget();
48
51
  </script>
49
52
  \`\`\`
50
53
 
51
- ### Exemple Avancé (Toutes les options)
54
+ ### Exemple Avancé (Design sur mesure)
52
55
  \`\`\`javascript
53
56
  const widget = new NCSWidget({
54
- position: 'bottom-left', // 'bottom-right', 'top-left', 'top-right'
55
- offset: '30px', // Distance par rapport au bord de l'écran
56
- theme: 'dark', // 'dark' ou 'light'
57
- primaryColor: '#9d4edd', // Couleur principale (ex: Violet)
58
- glassmorphism: true, // Active l'effet de transparence floutée
59
- borderRadius: '12px', // Arrondi de la fenêtre
60
- fontFamily: "'Courier New', monospace", // Police d'écriture personnalisée
57
+ position: 'bottom-left',
58
+ theme: 'dark',
59
+ primaryColor: '#ff0055',
60
+ glassmorphism: true,
61
+ borderRadius: '12px',
61
62
  defaultGenre: '10', // Démarre sur la House (ID: 10)
62
- startVolume: 0.3, // Volume initial à 30%
63
- hideDownload: true, // Cache le bouton de téléchargement
64
- hideVisualizer: false, // Garde l'animation sonore
65
- autoOpen: true // Ouvre le lecteur automatiquement à la 1ère visite
63
+
64
+ // 🔥 Personnalisation du bouton réduit
65
+ minimizedIcon: '🎵 Play', // Texte au lieu d'un émoji
66
+ minimizedSize: '80px', // Bouton plus large
67
+ minimizedRadius: '12px', // Bords arrondis (au lieu d'un cercle parfait)
68
+ minimizedBg: '#222222', // Fond sombre
69
+ minimizedColor: '#ff0055' // Texte coloré
66
70
  });
67
71
  \`\`\`
68
72
 
@@ -72,19 +76,23 @@ const widget = new NCSWidget({
72
76
 
73
77
  | Option | Type | Défaut | Description |
74
78
  | :--- | :--- | :--- | :--- |
75
- | \`position\` | String | \`'bottom-right'\` | Position à l'écran (\`bottom-right\`, \`bottom-left\`, \`top-right\`, \`top-left\`). |
79
+ | \`position\` | String | \`'bottom-right'\` | Position (\`bottom-right\`, \`bottom-left\`, \`top-right\`, \`top-left\`). |
76
80
  | \`offset\` | String | \`'25px'\` | Marge par rapport au bord de l'écran. |
77
81
  | \`theme\` | String | \`'dark'\` | Thème de base de l'interface (\`'dark'\` ou \`'light'\`). |
78
- | \`primaryColor\` | String | \`'#1DB954'\` | Couleur principale (Bouton d'ouverture, slider, visualizer). |
79
- | \`glassmorphism\`| Boolean | \`false\` | Active un fond semi-transparent avec flou d'arrière-plan (backdrop-filter). |
82
+ | \`primaryColor\` | String | \`'#1DB954'\` | Couleur principale (Sliders, visualizer). |
83
+ | \`glassmorphism\`| Boolean | \`false\` | Active un fond semi-transparent avec flou d'arrière-plan. |
80
84
  | \`borderRadius\` | String | \`'16px'\` | Rayon des bordures du lecteur étendu. |
81
85
  | \`fontFamily\` | String | \`'system-ui...'\`| Typographie utilisée dans tout le widget. |
86
+ | \`minimizedIcon\`| String | \`'🎧'\` | Icône ou texte du bouton réduit. |
87
+ | \`minimizedSize\`| String | \`'55px'\` | Largeur/Hauteur du bouton réduit. |
88
+ | \`minimizedRadius\`| String| \`'50%'\` | Arrondi du bouton réduit (\`50%\` = rond, \`8px\` = carré arrondi). |
89
+ | \`minimizedBg\` | String | *primaryColor*| Couleur de fond spécifique au bouton réduit. |
90
+ | \`minimizedColor\`| String| \`'#ffffff'\` | Couleur de l'icône/texte du bouton réduit. |
82
91
  | \`hideDownload\` | Boolean | \`false\` | Masque l'icône de téléchargement direct. |
83
- | \`hideVisualizer\`| Boolean | \`false\` | Masque les 3 barres animées à côté du titre. |
84
- | \`autoOpen\` | Boolean | \`false\` | Déploie le widget automatiquement lors de la première visite. |
92
+ | \`hideVisualizer\`| Boolean | \`false\` | Masque les barres animées à côté du titre. |
93
+ | \`autoOpen\` | Boolean | \`false\` | Déploie le widget automatiquement à la 1ère visite. |
85
94
  | \`defaultGenre\` | String | \`'all'\` | L'ID du genre au démarrage (ex: \`'10'\` pour House). |
86
- | \`startVolume\` | Number | \`0.5\` | Volume initial entre 0.0 et 1.0 (surchargé si l'utilisateur a déjà un cache). |
87
- | \`apiUrl\` | String | *https://www.wordreference.com/definition/interne* | URL de l'API Backend. |
95
+ | \`startVolume\` | Number | \`0.5\` | Volume initial entre 0.0 et 1.0. |
88
96
 
89
97
  ---
90
98
 
@@ -104,7 +112,8 @@ Le widget expose des **Variables CSS** (Custom Properties) rattachées à l'ID `
104
112
 
105
113
  ## 🏗️ Architecture & Backend
106
114
 
107
- En raison des restrictions CORS strictes sur le web moderne, un navigateur web ne peut pas interroger directement le site de NCS. Ce widget s'appuie donc sur une API Backend Node.js qui sert de relais de données (Proxy).
115
+ En raison des restrictions CORS strictes sur le web moderne, un navigateur web ne peut pas interroger directement le site de NCS. Ce widget s'appuie donc sur une API Backend Node.js.
116
+ **Une instance publique hébergée sur Render est configurée par défaut dans le widget pour un usage "Plug & Play".**
108
117
 
109
118
  ---
110
119
 
@@ -112,4 +121,4 @@ En raison des restrictions CORS strictes sur le web moderne, un navigateur web n
112
121
 
113
122
  Distribué sous la licence MIT. Voir `LICENSE` pour plus d'informations.
114
123
 
115
- **Avertissement :** Ce projet n'est pas affilié à NoCopyrightSounds. Toutes les musiques diffusées par ce widget appartiennent à leurs créateurs respectifs et à NCS. Veuillez respecter les conditions d'utilisation de NoCopyrightSounds lors de l'utilisation de leurs œuvres.
124
+ **Avertissement :** Ce projet n'est pas affilié à NoCopyrightSounds. Toutes les musiques diffusées appartiennent à leurs créateurs respectifs et à NCS.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nocopyrightsounds-widget",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "Un widget musical persistant pour site web utilisant l'API NoCopyrightSounds",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/index.js CHANGED
@@ -2,23 +2,28 @@ import { ncsGenres } from './genres.js';
2
2
 
3
3
  class NCSWidget {
4
4
  constructor(userOptions = {}) {
5
- // 🛠️ 1. Les TOUTES NOUVELLES options de personnalisation
6
5
  const defaultOptions = {
7
6
  position: 'bottom-right',
8
- apiUrl: 'https://VOTRE-URL-RENDER.onrender.com', // ⚠️ METTEZ VOTRE URL RENDER ICI
7
+ apiUrl: 'https://ncs-backend-api.onrender.com', // 🔗 Votre API officielle fixée !
9
8
  theme: 'dark',
10
9
  primaryColor: '#1DB954',
11
10
  defaultGenre: 'all',
12
11
  startVolume: 0.5,
13
12
  offset: '25px',
14
13
  zIndex: 99999,
15
- // --- NOUVEAUTÉS V1.2.0 ---
16
- glassmorphism: false, // Active l'effet verre dépoli
17
- borderRadius: '16px', // Arrondi des angles du panneau
14
+ glassmorphism: false,
15
+ borderRadius: '16px',
18
16
  fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
19
- hideDownload: false, // Masquer le bouton de téléchargement
20
- hideVisualizer: false,// Masquer les barres animées
21
- autoOpen: false // Ouvrir le widget par défaut à la 1ère visite
17
+ hideDownload: false,
18
+ hideVisualizer: false,
19
+ autoOpen: false,
20
+
21
+ // --- 🎛️ NOUVEAUTÉS V1.3.0 : Bouton Réduit ---
22
+ minimizedIcon: '🎧', // L'icône par défaut
23
+ minimizedSize: '55px', // Taille du bouton
24
+ minimizedRadius: '50%', // Arrondi (50% = rond, 10px = carré arrondi)
25
+ minimizedBg: null, // Surcharger la couleur de fond (utilise primaryColor sinon)
26
+ minimizedColor: '#ffffff' // Couleur de l'icône
22
27
  };
23
28
 
24
29
  this.options = { ...defaultOptions, ...userOptions };
@@ -43,7 +48,6 @@ class NCSWidget {
43
48
  this.savedTitle = localStorage.getItem('ncs_currentTitle') || null;
44
49
  this.savedArtists = localStorage.getItem('ncs_currentArtists') || null;
45
50
 
46
- // Logique d'auto-ouverture : on priorise le choix sauvegardé, sinon l'option autoOpen
47
51
  const savedState = localStorage.getItem('ncs_isOpen');
48
52
  if (savedState !== null) {
49
53
  this.isWidgetOpen = savedState === 'true';
@@ -71,8 +75,6 @@ class NCSWidget {
71
75
  this.container.id = 'ncs-persistent-widget';
72
76
 
73
77
  const isLight = this.options.theme === 'light';
74
-
75
- // 🎨 Gestion dynamique des couleurs pour le Glassmorphism
76
78
  const baseBgColor = isLight ? '255, 255, 255' : '24, 24, 24';
77
79
  const finalBg = this.options.glassmorphism ? `rgba(${baseBgColor}, 0.75)` : (isLight ? '#ffffff' : '#181818');
78
80
  const backdropFilter = this.options.glassmorphism ? 'blur(12px)' : 'none';
@@ -102,6 +104,12 @@ class NCSWidget {
102
104
  --ncs-radius: ${this.options.borderRadius};
103
105
  --ncs-font: ${this.options.fontFamily};
104
106
 
107
+ /* Variables Bouton Réduit */
108
+ --ncs-min-size: ${this.options.minimizedSize};
109
+ --ncs-min-radius: ${this.options.minimizedRadius};
110
+ --ncs-min-bg: ${this.options.minimizedBg || this.options.primaryColor};
111
+ --ncs-min-color: ${this.options.minimizedColor};
112
+
105
113
  position: fixed;
106
114
  ${this.getPositionStyles()}
107
115
  z-index: ${this.options.zIndex};
@@ -109,8 +117,8 @@ class NCSWidget {
109
117
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
110
118
  }
111
119
 
112
- .ncs-minimized { width: 55px; height: 55px; border-radius: 50%; background: var(--ncs-primary); cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 15px rgba(0,0,0, 0.2); font-size: 24px; transition: transform 0.2s; color: white; }
113
- .ncs-minimized:hover { transform: scale(1.1); }
120
+ .ncs-minimized { width: var(--ncs-min-size); height: var(--ncs-min-size); border-radius: var(--ncs-min-radius); background: var(--ncs-min-bg); cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 15px rgba(0,0,0, 0.2); font-size: calc(var(--ncs-min-size) * 0.45); transition: transform 0.2s; color: var(--ncs-min-color); }
121
+ .ncs-minimized:hover { transform: scale(1.05); }
114
122
  .ncs-minimized.hidden { display: none; }
115
123
 
116
124
  .ncs-expanded { width: 320px; background: var(--ncs-bg); color: var(--ncs-text); border-radius: var(--ncs-radius); padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: none; border: 1px solid var(--ncs-border); backdrop-filter: ${backdropFilter}; -webkit-backdrop-filter: ${backdropFilter}; }
@@ -121,7 +129,6 @@ class NCSWidget {
121
129
  .ncs-close-btn { background: transparent; border: none; color: var(--ncs-text-muted); font-size: 18px; cursor: pointer; padding: 0; transition: color 0.2s; }
122
130
  .ncs-close-btn:hover { color: var(--ncs-text); }
123
131
 
124
- /* Masquage conditionnel du Visualizer */
125
132
  .ncs-visualizer { display: ${this.options.hideVisualizer ? 'none' : 'flex'}; gap: 2px; height: 12px; align-items: flex-end; opacity: 0; transition: opacity 0.3s; }
126
133
  .ncs-visualizer.playing { opacity: 1; }
127
134
  .ncs-bar { width: 3px; background: var(--ncs-primary); border-radius: 2px; animation: bounce 0.5s infinite alternate; }
@@ -154,7 +161,6 @@ class NCSWidget {
154
161
  #ncs-mute-btn { cursor: pointer; transition: transform 0.1s; user-select: none; }
155
162
  #ncs-mute-btn:hover { transform: scale(1.1); }
156
163
 
157
- /* Masquage conditionnel du bouton Téléchargement */
158
164
  .ncs-download-btn { display: ${this.options.hideDownload ? 'none' : 'block'}; color: var(--ncs-text-muted); text-decoration: none; font-size: 18px; transition: color 0.2s; }
159
165
  .ncs-download-btn:hover { color: var(--ncs-primary); }
160
166
 
@@ -166,7 +172,7 @@ class NCSWidget {
166
172
  ).join('');
167
173
 
168
174
  this.container.innerHTML = `
169
- <div class="ncs-minimized ${this.isWidgetOpen ? 'hidden' : ''}">🎧</div>
175
+ <div class="ncs-minimized ${this.isWidgetOpen ? 'hidden' : ''}">${this.options.minimizedIcon}</div>
170
176
  <div class="ncs-expanded ${this.isWidgetOpen ? 'active' : ''}">
171
177
  <div class="ncs-header">
172
178
  <strong>NCS Player