@scarlett-player/embed 0.1.1 → 0.2.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.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Hackney Enterprises Inc.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -15,12 +15,25 @@ Standalone, CDN-ready embed package for Scarlett Player. Drop in a single `<scri
15
15
 
16
16
  ### CDN Usage (Recommended for Embeds)
17
17
 
18
+ **Video Player:**
18
19
  ```html
19
- <!-- UMD Bundle (works everywhere) -->
20
- <script src="https://cdn.example.com/scarlett-player/embed.umd.cjs"></script>
20
+ <!-- Standard video player -->
21
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.umd.cjs"></script>
21
22
 
22
- <!-- ES Module (for modern browsers) -->
23
- <script type="module" src="https://cdn.example.com/scarlett-player/embed.js"></script>
23
+ <!-- Light build (~30% smaller, no subtitles/DRM/ID3) -->
24
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.light.umd.cjs"></script>
25
+
26
+ <!-- Full build (includes analytics, playlist, media-session) -->
27
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.full.umd.cjs"></script>
28
+ ```
29
+
30
+ **Audio Player:**
31
+ ```html
32
+ <!-- Audio player (compact UI, lock screen controls, playlists) -->
33
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.audio.umd.cjs"></script>
34
+
35
+ <!-- Light audio (~30% smaller) -->
36
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.audio.light.umd.cjs"></script>
24
37
  ```
25
38
 
26
39
  ### NPM Installation
@@ -41,7 +54,7 @@ The simplest way to embed a player. Just add the script and use data attributes:
41
54
  <!DOCTYPE html>
42
55
  <html>
43
56
  <head>
44
- <script src="https://cdn.example.com/scarlett-player/embed.umd.cjs"></script>
57
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.umd.cjs"></script>
45
58
  </head>
46
59
  <body>
47
60
  <!-- Basic player -->
@@ -91,7 +104,7 @@ The simplest way to embed a player. Just add the script and use data attributes:
91
104
  For dynamic player creation:
92
105
 
93
106
  ```html
94
- <script src="https://cdn.example.com/scarlett-player/embed.umd.cjs"></script>
107
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.umd.cjs"></script>
95
108
 
96
109
  <div id="my-player"></div>
97
110
 
@@ -133,7 +146,7 @@ For secure, sandboxed embeds:
133
146
  ```html
134
147
  <!-- Basic iframe embed -->
135
148
  <iframe
136
- src="https://cdn.example.com/scarlett-player/iframe.html?src=https://example.com/stream.m3u8"
149
+ src="https://assets.thestreamplatform.com/scarlett-player/latest/iframe.html?src=https://example.com/stream.m3u8"
137
150
  width="640"
138
151
  height="360"
139
152
  frameborder="0"
@@ -143,7 +156,7 @@ For secure, sandboxed embeds:
143
156
 
144
157
  <!-- With customization -->
145
158
  <iframe
146
- src="https://cdn.example.com/scarlett-player/iframe.html?src=https://example.com/stream.m3u8&autoplay=true&muted=true&brand-color=%23e50914"
159
+ src="https://assets.thestreamplatform.com/scarlett-player/latest/iframe.html?src=https://example.com/stream.m3u8&autoplay=true&muted=true&brand-color=%23e50914"
147
160
  width="100%"
148
161
  height="100%"
149
162
  frameborder="0"
@@ -159,8 +172,64 @@ All data attributes work as URL parameters (use kebab-case):
159
172
  - `autoplay`, `muted`, `loop`
160
173
  - `poster`
161
174
  - `brand-color`, `primary-color`, `background-color`
162
- - `hide-delay`, `playback-rate`, `start-time`
163
- - `controls` (set to `false` to hide)
175
+
176
+ ### 4. Audio Player
177
+
178
+ For audio streaming (podcasts, music, live audio):
179
+
180
+ ```html
181
+ <script src="https://assets.thestreamplatform.com/scarlett-player/latest/embed.audio.umd.cjs"></script>
182
+
183
+ <!-- Basic audio player -->
184
+ <div
185
+ data-scarlett-audio
186
+ data-src="https://example.com/podcast.m3u8"
187
+ data-title="Episode 1: Introduction"
188
+ data-artist="My Podcast"
189
+ ></div>
190
+
191
+ <!-- Compact audio player -->
192
+ <div
193
+ data-scarlett-audio
194
+ data-src="https://example.com/music.m3u8"
195
+ data-compact
196
+ data-title="Song Title"
197
+ data-artist="Artist Name"
198
+ data-artwork="https://example.com/album-art.jpg"
199
+ ></div>
200
+ ```
201
+
202
+ #### Audio Programmatic API
203
+
204
+ ```javascript
205
+ // Audio uses ScarlettAudio global
206
+ const player = await ScarlettAudio.create({
207
+ container: '#audio-player',
208
+ src: 'https://example.com/stream.m3u8',
209
+ title: 'Track Title',
210
+ artist: 'Artist Name',
211
+ artwork: 'https://example.com/artwork.jpg',
212
+ compact: true,
213
+ // Playlist support
214
+ playlist: [
215
+ { src: 'track1.m3u8', title: 'Track 1', artist: 'Artist' },
216
+ { src: 'track2.m3u8', title: 'Track 2', artist: 'Artist' },
217
+ ],
218
+ });
219
+ ```
220
+
221
+ #### Audio Data Attributes
222
+
223
+ | Attribute | Type | Description |
224
+ |-----------|------|-------------|
225
+ | `data-src` | string | Audio source URL (HLS .m3u8) |
226
+ | `data-title` | string | Track/episode title |
227
+ | `data-artist` | string | Artist/creator name |
228
+ | `data-album` | string | Album name |
229
+ | `data-artwork` | string | Album art / cover image URL |
230
+ | `data-compact` | boolean | Use compact layout |
231
+ | `data-brand-color` | string | Accent color |
232
+ | `data-playlist` | JSON | Playlist as JSON array |
164
233
 
165
234
  ## Multi-Tenant Branding
166
235
 
@@ -190,13 +259,38 @@ After building, you'll get:
190
259
 
191
260
  ```
192
261
  dist/
193
- ├── embed.js # ES module
194
- ├── embed.umd.cjs # UMD bundle (for script tags)
195
- ├── embed.d.ts # TypeScript definitions
196
- ├── embed.js.map # Source map
197
- └── embed.umd.cjs.map # Source map for UMD
262
+ ├── embed.js # ES module - standard video
263
+ ├── embed.umd.cjs # UMD - standard video (~177KB gzip)
264
+ ├── embed.light.js # ES module - light video
265
+ ├── embed.light.umd.cjs # UMD - light video (~124KB gzip)
266
+ ├── embed.full.js # ES module - all plugins
267
+ ├── embed.full.umd.cjs # UMD - all plugins (~183KB gzip)
268
+ ├── embed.audio.js # ES module - audio player
269
+ ├── embed.audio.umd.cjs # UMD - audio player (~175KB gzip)
270
+ ├── embed.audio.light.js # ES module - light audio
271
+ ├── embed.audio.light.umd.cjs # UMD - light audio (~122KB gzip)
272
+ ├── hls-*.js # HLS.js chunk (ESM only)
273
+ ├── hls.light-*.js # HLS.js light chunk (ESM only)
274
+ └── *.map # Source maps
198
275
  ```
199
276
 
277
+ ### Bundle Variants
278
+
279
+ **Video Players:**
280
+ | Variant | Size (gzip) | Features |
281
+ |---------|-------------|----------|
282
+ | `embed.umd.cjs` | ~177KB | Standard: core + HLS + UI |
283
+ | `embed.light.umd.cjs` | ~124KB | Light: HLS light (no subtitles/DRM/ID3) |
284
+ | `embed.full.umd.cjs` | ~183KB | Full: + analytics, playlist, media-session |
285
+
286
+ **Audio Players:**
287
+ | Variant | Size (gzip) | Features |
288
+ |---------|-------------|----------|
289
+ | `embed.audio.umd.cjs` | ~175KB | Audio: core + HLS + audio-ui + media-session + playlist |
290
+ | `embed.audio.light.umd.cjs` | ~122KB | Light Audio: with HLS light |
291
+
292
+ Use light variants for most streaming use cases to reduce load time by ~30%.
293
+
200
294
  ## Development
201
295
 
202
296
  ```bash