nocopyrightsounds-widget 1.4.1 → 1.4.2

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 (2) hide show
  1. package/README.md +85 -59
  2. package/package.json +5 -10
package/README.md CHANGED
@@ -1,87 +1,113 @@
1
- # 🎧 NoCopyrightSounds (NCS) Web Widget
1
+
2
+ # nocopyrightsounds-widget
2
3
 
3
4
  [![NPM Version](https://img.shields.io/npm/v/nocopyrightsounds-widget.svg?style=flat-square&color=1DB954)](https://www.npmjs.com/package/nocopyrightsounds-widget)
4
5
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
5
6
 
6
- A sleek, floating, and **100% CSS-hackable** music player to easily integrate royalty-free music from **NoCopyrightSounds** into any website.
7
+ A sleek, floating, and **100% CSS-hackable** music player to easily integrate royalty-free music from **NoCopyrightSounds** into any website.
7
8
 
8
- Built for modern developers: lightweight, persistent across page reloads, and infinitely customizable.
9
+ Designed for modern developers: lightweight, persistent across page reloads, and infinitely customizable.
9
10
 
10
11
  ![NCS Widget Preview](https://raw.githubusercontent.com/floriangobin/nocopyrightsounds-widget/main/preview.png)
11
12
 
12
- ---
13
-
14
- ## ✨ Features
13
+ ## Features
15
14
 
16
- * ⚡ **Zero Latency:** Smart background preloading (buffering) for instant track transitions.
17
- * 💾 **State Persistence:** Remembers the current track, volume, and playback progress across page navigation via `localStorage`.
18
- * 🎵 **Full Catalog:** Intelligent random navigation through 60+ historical NCS genres.
19
- * 🛠️ **Limitless Customization (v1.4.0):** The widget is a blank canvas! It exposes the album cover via the `--ncs-cover-img` CSS variable and dynamically injects state classes (`.ncs-is-playing`, `.ncs-is-open`). You can literally reshape the entire player using just CSS.
20
- * 🔌 **Plug & Play:** Official backend API integrated by default. Zero server configuration required.
15
+ * **Zero Latency**: Smart background preloading for instant track transitions.
16
+ * **State Persistence**: Remembers the current track, volume, and playback progress via `localStorage`.
17
+ * **Full Catalog**: Intelligent random navigation through 60+ historical NCS genres.
18
+ * **Limitless Customization**: The widget is a blank canvas. It exposes the album cover via CSS variables and dynamically injects state classes. You can reshape the entire player using just CSS.
19
+ * **Plug & Play**: Official backend proxy API integrated by default. Zero server configuration required.
21
20
 
22
- ---
21
+ ## Installation
23
22
 
24
- ## 📦 Installation
23
+ ### Via NPM (React, Vue, Next.js, etc.)
25
24
 
26
- ### Via NPM (React, Vue, Angular, Next.js...)
27
- \`\`\`bash
25
+ ```bash
28
26
  npm install nocopyrightsounds-widget
29
- \`\`\`
30
27
 
31
- ### Via CDN (HTML / Vanilla JS)
32
- \`\`\`html
28
+ ```
29
+
30
+ ### Via CDN (Vanilla JS / HTML)
31
+
32
+ ```html
33
33
  <script type="module">
34
- import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js';
35
- const player = new NCSWidget();
34
+ import NCSWidget from '[https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js](https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@latest/src/index.js)';
36
35
  </script>
37
- \`\`\`
38
36
 
39
- ---
37
+ ```
38
+
39
+ ## Import
40
+
41
+ ```javascript
42
+ // ES Module (recommended)
43
+ import NCSWidget from 'nocopyrightsounds-widget'
44
+
45
+ ```
46
+
47
+ ## Examples
48
+
49
+ ### Basic Initialization
50
+
51
+ ```javascript
52
+ import NCSWidget from 'nocopyrightsounds-widget'
53
+
54
+ // The widget handles everything with default settings
55
+ const player = new NCSWidget()
40
56
 
41
- ## ⚙️ Configuration (JS Options)
57
+ ```
42
58
 
43
- You can pass an options object to the constructor to tweak the widget's behavior and default look:
59
+ ### Advanced Configuration (Options)
44
60
 
45
- | Option | Type | Default | Description |
46
- | :--- | :--- | :--- | :--- |
47
- | \`position\` | String | \`'bottom-right'\` | Screen position (\`bottom-right\`, \`bottom-left\`, \`top-right\`, \`top-left\`). |
48
- | \`offsetX\` / \`offsetY\` | String | \`'25px'\` | Margin from the screen edges (e.g., \`'0px'\`). |
49
- | \`theme\` | String | \`'dark'\` | Base UI theme (\`'dark'\` or \`'light'\`). |
50
- | \`primaryColor\` | String | \`'#1DB954'\` | Main accent color (sliders, active states). |
51
- | \`glassmorphism\`| Boolean| \`false\` | Enables a semi-transparent blurred background. |
52
- | \`hideDownload\` | Boolean| \`false\` | Hides the direct MP3 download icon. |
53
- | \`autoOpen\` | Boolean| \`false\` | Automatically opens the widget on the user's first visit. |
54
- | \`defaultGenre\` | String | \`'all'\` | Starting genre ID (e.g., \`'10'\` for House). |
55
- | \`minWidth\` / \`minHeight\` | String | \`'55px'\` | Dimensions of the minimized button. |
56
- | \`minimizedIcon\`| String | \`'🎧'\` | Text or emoji inside the minimized button. |
61
+ You can pass an options object to tweak the widget's behavior and default look:
57
62
 
58
- ---
63
+ ```javascript
64
+ import NCSWidget from 'nocopyrightsounds-widget'
59
65
 
60
- ## 🎨 CSS Cookbook: The "Spinning Vinyl" Example
66
+ const widget = new NCSWidget({
67
+ position: 'bottom-right', // 'bottom-left', 'top-right', 'top-left'
68
+ offsetX: '25px', // Margin from X edge
69
+ offsetY: '25px', // Margin from Y edge
70
+ theme: 'dark', // 'dark' or 'light'
71
+ primaryColor: '#1DB954', // Main accent color
72
+ glassmorphism: true, // Enables a blurred semi-transparent background
73
+ defaultGenre: '10', // Start with House music (ID: 10)
74
+ startVolume: 0.3, // Initial volume (0.0 to 1.0)
75
+ hideDownload: true, // Hide the MP3 download button
76
+ autoOpen: false, // Automatically open on first visit
77
+ minWidth: '55px', // Width of the minimized button
78
+ minHeight: '55px', // Height of the minimized button
79
+ minimizedIcon: '🎵' // Emoji or Text for the minimized button
80
+ })
61
81
 
62
- To show you just how far you can push the customization, here is an example of the creative freedom this widget offers. By combining our JS options and a bit of custom CSS, you can completely transform the standard rectangular player into a **spinning interactive vinyl record**!
82
+ ```
83
+
84
+ ## CSS Cookbook: The "Spinning Vinyl"
85
+
86
+ To show you just how far you can push the customization, here is an example. By combining the JS options and custom CSS, you can completely transform the standard rectangular player into a **spinning interactive vinyl record**!
63
87
 
64
88
  ### 1. The JavaScript Setup
89
+
65
90
  First, stick the widget to the corner and make it a square:
66
- \`\`\`html
67
- <script type="module">
68
- import NCSWidget from 'https://cdn.jsdelivr.net/npm/nocopyrightsounds-widget@1.4.0/src/index.js';
69
-
70
- new NCSWidget({
71
- position: 'bottom-right',
72
- offsetX: '0px',
73
- offsetY: '0px',
74
- minWidth: '120px',
75
- minHeight: '120px',
76
- minimizedIcon: '' // Remove the text to leave room for the cover art
77
- });
78
- </script>
79
- \`\`\`
91
+
92
+ ```javascript
93
+ import NCSWidget from 'nocopyrightsounds-widget'
94
+
95
+ new NCSWidget({
96
+ position: 'bottom-right',
97
+ offsetX: '0px',
98
+ offsetY: '0px',
99
+ minWidth: '120px',
100
+ minHeight: '120px',
101
+ minimizedIcon: '' // Remove the text to leave room for the cover art
102
+ });
103
+
104
+ ```
80
105
 
81
106
  ### 2. The CSS Magic
107
+
82
108
  Copy this code into your website's stylesheet. It uses the `--ncs-cover-img` variable and the `.ncs-is-playing` state class to create a spinning vinyl record that pops out into a full-screen player when clicked!
83
109
 
84
- \`\`\`css
110
+ ```css
85
111
  /* --- THE QUARTER VINYL (Minimized State) --- */
86
112
  .ncs-minimized {
87
113
  border-radius: 0 !important;
@@ -146,11 +172,11 @@ Copy this code into your website's stylesheet. It uses the `--ncs-cover-img` var
146
172
  .ncs-btn-circle { width: 60px !important; height: 60px !important; background: white !important; color: black !important; }
147
173
  .ncs-progress-container { width: 80% !important; margin: 0 auto 15px auto !important; }
148
174
  .ncs-bottom-bar { width: 60% !important; margin: 0 auto !important; justify-content: center !important; }
149
- \`\`\`
150
175
 
151
- ---
176
+ ```
177
+
178
+ ## Disclaimer & License
152
179
 
153
- ## 📄 License
180
+ Distributed under the MIT License.
154
181
 
155
- Distributed under the MIT License.
156
- **Disclaimer:** This project is not affiliated with NoCopyrightSounds. All streamed music belongs to their respective creators and NCS.
182
+ This project is not affiliated with NoCopyrightSounds. All streamed music belongs to their respective creators and NCS. Please respect the NCS usage policy when using their tracks.
package/package.json CHANGED
@@ -1,24 +1,19 @@
1
1
  {
2
2
  "name": "nocopyrightsounds-widget",
3
- "version": "1.4.1",
4
- "description": "Un widget musical persistant pour site web utilisant l'API NoCopyrightSounds",
3
+ "version": "1.4.2",
4
+ "description": "A sleek, floating, and 100% CSS-hackable music player for NCS.",
5
5
  "main": "src/index.js",
6
- "type": "module",
7
- "scripts": {
8
- "test": "echo \"Error: no test specified\" && exit 1"
9
- },
10
6
  "repository": {
11
7
  "type": "git",
12
- "url": "https://github.com/floriangobin/nocopyrightsounds-widget.git"
8
+ "url": "git+https://github.com/floriangobin/nocopyrightsounds-widget.git"
13
9
  },
14
10
  "keywords": [
15
11
  "ncs",
16
12
  "music",
17
13
  "widget",
18
- "audio",
19
14
  "player",
20
15
  "nocopyrightsounds"
21
16
  ],
22
- "author": "GOBIN Florian",
17
+ "author": "Florian Gobin",
23
18
  "license": "MIT"
24
- }
19
+ }