eb-player 2.0.0 → 2.0.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 (37) hide show
  1. package/dist/build/eb-player.css +661 -5
  2. package/dist/build/ebplayer.bundle.js +95 -33
  3. package/dist/build/ebplayer.bundle.js.map +1 -1
  4. package/dist/build/theme-forja.css +1 -1
  5. package/dist/build/theme-lequipe.css +655 -0
  6. package/dist/build/theme-modern.css +1 -1
  7. package/dist/build/theme-v2.css +1 -1
  8. package/dist/build/types/core/config.d.ts +14 -2
  9. package/dist/build/types/core/config.d.ts.map +1 -1
  10. package/dist/build/types/core/index.d.ts +1 -1
  11. package/dist/build/types/core/index.d.ts.map +1 -1
  12. package/dist/build/types/core/lifecycle.d.ts.map +1 -1
  13. package/dist/build/types/eb-player.d.ts.map +1 -1
  14. package/dist/build/types/engines/hls.d.ts +1 -0
  15. package/dist/build/types/engines/hls.d.ts.map +1 -1
  16. package/dist/build/types/engines/snapshot/hls.d.ts +6 -2
  17. package/dist/build/types/engines/snapshot/hls.d.ts.map +1 -1
  18. package/dist/build/types/integrations/p2p-manager.d.ts.map +1 -1
  19. package/dist/build/types/skin/controls/seekbar.d.ts.map +1 -1
  20. package/dist/dev/default.js +734 -508
  21. package/dist/dev/default.js.map +1 -1
  22. package/dist/dev/easybroadcast.js +103 -38
  23. package/dist/dev/easybroadcast.js.map +1 -1
  24. package/dist/dev/equipe.js +6683 -0
  25. package/dist/dev/equipe.js.map +1 -0
  26. package/dist/eb-player.css +661 -5
  27. package/dist/players/easybroadcast/easybroadcast.js +397 -0
  28. package/dist/players/easybroadcast/index.html +1 -0
  29. package/dist/players/equipe/equipe.js +397 -0
  30. package/dist/players/equipe/index.html +1 -0
  31. package/dist/players/forja/forja.js +198 -111
  32. package/dist/players/forja/index.html +1 -1
  33. package/dist/theme-forja.css +1 -1
  34. package/dist/theme-lequipe.css +655 -0
  35. package/dist/theme-modern.css +1 -1
  36. package/dist/theme-v2.css +1 -1
  37. package/package.json +8 -73
@@ -6,5 +6,5 @@
6
6
  */
7
7
 
8
8
  [data-theme="forja"] .eb-player {
9
- --eb-color-primary: #E63946;
9
+ --eb-color-primary: #FC013B;
10
10
  }
@@ -0,0 +1,655 @@
1
+ /**
2
+ * L'Equipe theme — v2 layout with L'Equipe red (#d61e00) accent
3
+ *
4
+ * Applied when the container has [data-theme="lequipe"].
5
+ * Dark UI with red accent, Inter font, rounded container,
6
+ * backdrop-blur panels, expandable volume, single-row bottom bar,
7
+ * gradient overlays, centered frosted-glass transport circles,
8
+ * and refined slide/fade animations.
9
+ */
10
+
11
+ /* ============================================================
12
+ Google Fonts (Inter 300-700)
13
+ ============================================================ */
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ /* ============================================================
17
+ Root vars & container
18
+ ============================================================ */
19
+ [data-theme="lequipe"] .eb-player {
20
+ --eb-color-primary: #d61e00;
21
+ --eb-color-progress: #d61e00;
22
+ --eb-color-background: rgba(10, 10, 20, 0.85);
23
+ --eb-accent: #d61e00;
24
+ --eb-color-text: #fff;
25
+ --eb-font-family: 'Inter', -apple-system, sans-serif;
26
+ --eb-font-size-base: 14px;
27
+ --eb-radius-control: 8px;
28
+ --eb-duration-transition: 200ms;
29
+ font-family: 'Inter', -apple-system, sans-serif;
30
+ border-radius: 14px;
31
+ box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
32
+ color: #fff;
33
+ }
34
+
35
+ /* ============================================================
36
+ Icons: bolder stroke weight to match filled-style target
37
+ ============================================================ */
38
+ [data-theme="lequipe"] .eb-player .eb-icon {
39
+ stroke-width: 2.5;
40
+ }
41
+
42
+ /* Fullscreen: fill viewport, drop card styling */
43
+ [data-theme="lequipe"] .eb-player:fullscreen,
44
+ [data-theme="lequipe"] .eb-player:-webkit-full-screen {
45
+ border-radius: 0;
46
+ box-shadow: none;
47
+ }
48
+
49
+ /* ============================================================
50
+ Gradients (top & bottom)
51
+ ============================================================ */
52
+ [data-theme="lequipe"] .eb-player .eb-top-bar {
53
+ background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
54
+ height: 110px;
55
+ padding: 14px 16px;
56
+ gap: 6px;
57
+ }
58
+
59
+ [data-theme="lequipe"] .eb-player .eb-bottom-bar__gradient {
60
+ height: 150px;
61
+ background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
62
+ }
63
+
64
+ /* ============================================================
65
+ Top bar: slide-in from above
66
+ ============================================================ */
67
+ [data-theme="lequipe"] .eb-player.eb-controls-visible .eb-top-bar {
68
+ opacity: 1;
69
+ transform: translateY(0);
70
+ transition: opacity .3s, transform .3s;
71
+ }
72
+
73
+ [data-theme="lequipe"] .eb-player.eb-controls-hidden .eb-top-bar {
74
+ opacity: 0;
75
+ transform: translateY(-6px);
76
+ transition: opacity .3s, transform .3s;
77
+ }
78
+
79
+ [data-theme="lequipe"] .eb-player .eb-top-bar__actions {
80
+ gap: 6px;
81
+ }
82
+
83
+ /* Logo */
84
+ [data-theme="lequipe"] .eb-player .eb-top-bar__logo {
85
+ max-height: 32px;
86
+ max-width: 120px;
87
+ opacity: .85;
88
+ }
89
+
90
+ /* ============================================================
91
+ Bottom bar: slide-up animation + spacing
92
+ ============================================================ */
93
+ [data-theme="lequipe"] .eb-player .eb-bottom-bar__controls-row {
94
+ padding: 0 14px 12px;
95
+ gap: 8px;
96
+ }
97
+
98
+ [data-theme="lequipe"] .eb-player.eb-controls-visible .eb-bottom-bar {
99
+ opacity: 1;
100
+ transform: translateY(0);
101
+ transition: opacity .3s, transform .3s;
102
+ }
103
+
104
+ [data-theme="lequipe"] .eb-player.eb-controls-hidden .eb-bottom-bar {
105
+ opacity: 0;
106
+ transform: translateY(8px);
107
+ transition: opacity .3s, transform .3s;
108
+ }
109
+
110
+ /* ============================================================
111
+ Middle bar: glassmorphism transport circles
112
+ ============================================================ */
113
+ [data-theme="lequipe"] .eb-player .eb-middle-bar {
114
+ gap: 28px;
115
+ }
116
+
117
+ [data-theme="lequipe"] .eb-player.eb-controls-visible .eb-middle-bar {
118
+ opacity: 1;
119
+ transition: opacity .3s;
120
+ }
121
+
122
+ [data-theme="lequipe"] .eb-player.eb-controls-hidden .eb-middle-bar {
123
+ opacity: 0;
124
+ transition: opacity .3s;
125
+ }
126
+
127
+ /* Central play/pause — large frosted circle */
128
+ [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn {
129
+ width: 80px;
130
+ height: 80px;
131
+ border-radius: 50%;
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: center;
135
+ background: rgba(255,255,255,.15);
136
+ backdrop-filter: blur(8px);
137
+ -webkit-backdrop-filter: blur(8px);
138
+ border: 2px solid rgba(255,255,255,.25);
139
+ color: #fff;
140
+ padding: 0;
141
+ transition: background .15s, transform .25s, opacity .25s;
142
+ }
143
+
144
+ [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn:hover {
145
+ background: rgba(255,255,255,.25);
146
+ }
147
+
148
+ [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn:active {
149
+ transform: scale(.92);
150
+ }
151
+
152
+ [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn .eb-icon {
153
+ width: 32px;
154
+ height: 32px;
155
+ stroke-width: 2.5;
156
+ }
157
+
158
+ /* Seek buttons — smaller frosted circles */
159
+ [data-theme="lequipe"] .eb-player .eb-middle-bar__seek-btn {
160
+ width: 56px;
161
+ height: 56px;
162
+ border-radius: 50%;
163
+ display: flex;
164
+ flex-direction: column;
165
+ align-items: center;
166
+ justify-content: center;
167
+ background: rgba(255,255,255,.15);
168
+ backdrop-filter: blur(8px);
169
+ -webkit-backdrop-filter: blur(8px);
170
+ border: 2px solid rgba(255,255,255,.25);
171
+ color: #fff;
172
+ gap: 1px;
173
+ padding: 0;
174
+ transition: background .15s;
175
+ }
176
+
177
+ [data-theme="lequipe"] .eb-player .eb-middle-bar__seek-btn:hover {
178
+ background: rgba(255,255,255,.25);
179
+ }
180
+
181
+ [data-theme="lequipe"] .eb-player .eb-seek-circle {
182
+ width: 24px;
183
+ height: 24px;
184
+ color: rgba(255,255,255,.85);
185
+ fill: currentColor;
186
+ stroke: none;
187
+ }
188
+
189
+ [data-theme="lequipe"] .eb-player .eb-seek-label {
190
+ font-size: .75em;
191
+ font-weight: 700;
192
+ color: rgba(255,255,255,.9);
193
+ line-height: 1;
194
+ }
195
+
196
+ /* ============================================================
197
+ Buttons: rounded, soft color, scale on press
198
+ ============================================================ */
199
+ [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn),
200
+ [data-theme="lequipe"] .eb-player .eb-play-pause,
201
+ [data-theme="lequipe"] .eb-player .eb-fullscreen,
202
+ [data-theme="lequipe"] .eb-player .eb-pip,
203
+ [data-theme="lequipe"] .eb-player .eb-cast,
204
+ [data-theme="lequipe"] .eb-player .eb-volume-mute,
205
+ [data-theme="lequipe"] .eb-player .eb-live-sync {
206
+ color: rgba(255,255,255,.82);
207
+ border-radius: 8px;
208
+ width: 38px;
209
+ height: 38px;
210
+ transition: background .15s, color .15s, transform .1s;
211
+ flex-shrink: 0;
212
+ }
213
+
214
+ [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):hover,
215
+ [data-theme="lequipe"] .eb-player .eb-play-pause:hover,
216
+ [data-theme="lequipe"] .eb-player .eb-fullscreen:hover,
217
+ [data-theme="lequipe"] .eb-player .eb-pip:hover,
218
+ [data-theme="lequipe"] .eb-player .eb-cast:hover,
219
+ [data-theme="lequipe"] .eb-player .eb-volume-mute:hover,
220
+ [data-theme="lequipe"] .eb-player .eb-live-sync:hover {
221
+ background: rgba(255,255,255,.12);
222
+ color: #fff;
223
+ }
224
+
225
+ [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn):active,
226
+ [data-theme="lequipe"] .eb-player .eb-play-pause:active,
227
+ [data-theme="lequipe"] .eb-player .eb-fullscreen:active,
228
+ [data-theme="lequipe"] .eb-player .eb-pip:active,
229
+ [data-theme="lequipe"] .eb-player .eb-cast:active,
230
+ [data-theme="lequipe"] .eb-player .eb-volume-mute:active,
231
+ [data-theme="lequipe"] .eb-player .eb-live-sync:active {
232
+ transform: scale(.88);
233
+ }
234
+
235
+ /* Icon size inside buttons (not middle bar transport) */
236
+ [data-theme="lequipe"] .eb-player .eb-button:not(.eb-middle-bar__seek-btn):not(.eb-middle-bar__play-btn) .eb-icon,
237
+ [data-theme="lequipe"] .eb-player .eb-play-pause .eb-icon,
238
+ [data-theme="lequipe"] .eb-player .eb-fullscreen .eb-icon,
239
+ [data-theme="lequipe"] .eb-player .eb-pip .eb-icon,
240
+ [data-theme="lequipe"] .eb-player .eb-cast .eb-icon,
241
+ [data-theme="lequipe"] .eb-player .eb-volume-mute .eb-icon {
242
+ width: 22px;
243
+ height: 22px;
244
+ }
245
+
246
+ /* Top bar icons slightly larger */
247
+ [data-theme="lequipe"] .eb-player .eb-top-bar .eb-icon {
248
+ width: 24px;
249
+ height: 24px;
250
+ }
251
+
252
+ /* Play/pause icons should be filled (solid), not stroke outlines */
253
+ [data-theme="lequipe"] .eb-player .eb-play-pause .eb-icon,
254
+ [data-theme="lequipe"] .eb-player .eb-middle-bar__play-btn .eb-icon {
255
+ fill: currentColor;
256
+ stroke: none;
257
+ }
258
+
259
+ /* Volume icon: fill the speaker body, keep stroke for sound waves */
260
+ [data-theme="lequipe"] .eb-player .eb-volume-mute .eb-icon path:first-child {
261
+ fill: currentColor;
262
+ }
263
+
264
+ /* Cast button active state */
265
+ [data-theme="lequipe"] .eb-player .eb-cast-active {
266
+ color: #1eb6d4 !important;
267
+ background: rgba(30, 182, 212, .15) !important;
268
+ }
269
+
270
+ [data-theme="lequipe"] .eb-player .eb-cast-active .eb-icon {
271
+ filter: drop-shadow(0 0 4px rgba(30, 182, 212, .6));
272
+ }
273
+
274
+ /* ============================================================
275
+ Seekbar
276
+ ============================================================ */
277
+ [data-theme="lequipe"] .eb-player .eb-seekbar-track {
278
+ height: 3px;
279
+ background: rgba(255,255,255,.22);
280
+ border-radius: 3px;
281
+ transition: height .15s;
282
+ }
283
+
284
+ [data-theme="lequipe"] .eb-player .eb-seekbar:hover .eb-seekbar-track {
285
+ height: 5px;
286
+ }
287
+
288
+ [data-theme="lequipe"] .eb-player .eb-seekbar-buffered {
289
+ background: rgba(255,255,255,.28);
290
+ border-radius: 3px;
291
+ transition: height .15s;
292
+ }
293
+
294
+ /* Red gradient fill */
295
+ [data-theme="lequipe"] .eb-player .eb-seekbar-progress {
296
+ background: linear-gradient(90deg, #d61e00, color-mix(in srgb, #d61e00 70%, #fff));
297
+ border-radius: 3px;
298
+ transition: height .15s;
299
+ }
300
+
301
+ [data-theme="lequipe"] .eb-player .eb-seekbar-thumb {
302
+ width: 14px;
303
+ height: 14px;
304
+ right: -7px;
305
+ background: #fff;
306
+ box-shadow: 0 0 0 3px rgba(214,30,0,.45);
307
+ }
308
+
309
+ /* ============================================================
310
+ Seekbar tooltip & preview
311
+ ============================================================ */
312
+ [data-theme="lequipe"] .eb-player .eb-seekbar-tooltip {
313
+ bottom: 28px;
314
+ background: rgba(0,0,0,.88);
315
+ border: 1px solid rgba(255,255,255,.12);
316
+ border-radius: 7px;
317
+ font-size: 11px;
318
+ font-weight: 500;
319
+ padding: 0;
320
+ overflow: hidden;
321
+ box-shadow: 0 4px 16px rgba(0,0,0,.5);
322
+ display: flex;
323
+ flex-direction: column;
324
+ align-items: center;
325
+ }
326
+
327
+ [data-theme="lequipe"] .eb-player .eb-seekbar-preview {
328
+ width: 160px;
329
+ height: 90px;
330
+ background: #111;
331
+ border: none;
332
+ border-radius: 0;
333
+ margin: 0;
334
+ }
335
+
336
+ /* ============================================================
337
+ Chapter markers
338
+ ============================================================ */
339
+ [data-theme="lequipe"] .eb-player .eb-chapter-marker {
340
+ width: 2px;
341
+ height: 7px;
342
+ background: rgba(0,0,0,.45);
343
+ border-radius: 1px;
344
+ top: 50%;
345
+ transform: translate(-50%, -50%);
346
+ }
347
+
348
+ /* ============================================================
349
+ Volume: expandable slider, white fill
350
+ ============================================================ */
351
+ [data-theme="lequipe"] .eb-player .eb-volume-control {
352
+ flex-direction: row;
353
+ gap: 0;
354
+ margin-right: 0;
355
+ }
356
+
357
+ [data-theme="lequipe"] .eb-player .eb-volume-track {
358
+ width: 0;
359
+ height: 3px;
360
+ background: rgba(255,255,255,.22);
361
+ border-radius: 3px;
362
+ overflow: hidden;
363
+ transition: width .25s ease, margin .25s ease;
364
+ margin: 0;
365
+ }
366
+
367
+ [data-theme="lequipe"] .eb-player .eb-volume-control:hover .eb-volume-track,
368
+ [data-theme="lequipe"] .eb-player .eb-volume-control:focus-within .eb-volume-track {
369
+ width: 66px;
370
+ margin: 0 6px 0 2px;
371
+ }
372
+
373
+ [data-theme="lequipe"] .eb-player .eb-volume-fill {
374
+ background: var(--eb-color-primary, #d61e00);
375
+ }
376
+
377
+ [data-theme="lequipe"] .eb-player .eb-volume-thumb {
378
+ width: 11px;
379
+ height: 11px;
380
+ background: #fff;
381
+ box-shadow: 0 0 0 2px rgba(255,255,255,.35);
382
+ transform: translate(-50%, -50%) scale(0);
383
+ transition: transform .15s;
384
+ }
385
+
386
+ [data-theme="lequipe"] .eb-player .eb-volume-control:hover .eb-volume-thumb {
387
+ transform: translate(-50%, -50%) scale(1);
388
+ }
389
+
390
+ /* ============================================================
391
+ Time display
392
+ ============================================================ */
393
+ [data-theme="lequipe"] .eb-player .eb-time-display {
394
+ font-size: 13px;
395
+ color: rgba(255,255,255,.85);
396
+ font-weight: 500;
397
+ letter-spacing: .02em;
398
+ }
399
+
400
+ /* ============================================================
401
+ Live badge — text badge with blinking dot (not icon)
402
+ ============================================================ */
403
+ [data-theme="lequipe"] .eb-player .eb-live-sync {
404
+ width: auto;
405
+ height: auto;
406
+ padding: 4px 10px;
407
+ border-radius: 6px;
408
+ font-size: 11px;
409
+ font-weight: 700;
410
+ letter-spacing: .08em;
411
+ text-transform: uppercase;
412
+ gap: 5px;
413
+ }
414
+
415
+ /* Hide icon, show dot + label */
416
+ [data-theme="lequipe"] .eb-player .eb-live-sync__icon {
417
+ display: none;
418
+ }
419
+
420
+ [data-theme="lequipe"] .eb-player .eb-live-sync__dot {
421
+ display: block;
422
+ width: 6px;
423
+ height: 6px;
424
+ border-radius: 50%;
425
+ background: #fff;
426
+ flex-shrink: 0;
427
+ }
428
+
429
+ [data-theme="lequipe"] .eb-player .eb-live-sync__label {
430
+ display: block;
431
+ }
432
+
433
+ /* Synced state — red background with blinking dot */
434
+ [data-theme="lequipe"] .eb-player .eb-live-synced {
435
+ background: rgba(214,30,0,.9);
436
+ color: #fff;
437
+ box-shadow: 0 2px 8px rgba(214,30,0,.4);
438
+ }
439
+
440
+ [data-theme="lequipe"] .eb-player .eb-live-synced .eb-live-sync__dot {
441
+ animation: eb-lequipe-blink 1.2s ease infinite;
442
+ }
443
+
444
+ /* Delayed / not-at-live-edge */
445
+ [data-theme="lequipe"] .eb-player .eb-live-sync:not(.eb-live-synced) {
446
+ background: rgba(60,60,80,.75);
447
+ color: rgba(255,255,255,.7);
448
+ box-shadow: none;
449
+ }
450
+
451
+ [data-theme="lequipe"] .eb-player .eb-live-sync:not(.eb-live-synced) .eb-live-sync__dot {
452
+ background: rgba(255,255,255,.5);
453
+ animation: none;
454
+ }
455
+
456
+ [data-theme="lequipe"] .eb-player .eb-live-sync:not(.eb-live-synced):hover {
457
+ background: rgba(214,30,0,.7);
458
+ color: #fff;
459
+ }
460
+
461
+ @keyframes eb-lequipe-blink {
462
+ 0%, 100% { opacity: 1; }
463
+ 50% { opacity: .15; }
464
+ }
465
+
466
+ /* ============================================================
467
+ Settings panel: glassmorphism dropdown
468
+ ============================================================ */
469
+ [data-theme="lequipe"] .eb-player .eb-settings-panel {
470
+ background: rgba(10,10,20,.55);
471
+ backdrop-filter: blur(18px) saturate(160%);
472
+ -webkit-backdrop-filter: blur(18px) saturate(160%);
473
+ border-radius: 12px;
474
+ min-width: 300px;
475
+ box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
476
+ }
477
+
478
+ [data-theme="lequipe"] .eb-player .eb-settings-menu {
479
+ padding: 0;
480
+ }
481
+
482
+ [data-theme="lequipe"] .eb-player .eb-settings-category,
483
+ [data-theme="lequipe"] .eb-player .eb-settings-item,
484
+ [data-theme="lequipe"] .eb-player .eb-settings-back {
485
+ padding: 15px 20px;
486
+ font-size: 13px;
487
+ color: rgba(255,255,255,.9);
488
+ border-bottom: 1px solid rgba(255,255,255,.06);
489
+ transition: background .12s;
490
+ }
491
+
492
+ [data-theme="lequipe"] .eb-player .eb-settings-category:last-child,
493
+ [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {
494
+ border-bottom: none;
495
+ }
496
+
497
+ [data-theme="lequipe"] .eb-player .eb-settings-category:hover,
498
+ [data-theme="lequipe"] .eb-player .eb-settings-item:hover,
499
+ [data-theme="lequipe"] .eb-player .eb-settings-back:hover {
500
+ background: rgba(255,255,255,.05);
501
+ }
502
+
503
+ /* Selected item text */
504
+ [data-theme="lequipe"] .eb-player .eb-settings-item--selected {
505
+ color: #fff;
506
+ font-weight: 500;
507
+ }
508
+
509
+ /* Active selection dot (filled red) */
510
+ [data-theme="lequipe"] .eb-player .eb-settings-item--selected::after {
511
+ content: '';
512
+ width: 10px;
513
+ height: 10px;
514
+ border-radius: 50%;
515
+ background: var(--eb-accent, #d61e00);
516
+ box-shadow: 0 0 0 3px rgba(214,30,0,.25);
517
+ flex-shrink: 0;
518
+ }
519
+
520
+ /* Non-selected items: hollow dot */
521
+ [data-theme="lequipe"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
522
+ content: '';
523
+ width: 10px;
524
+ height: 10px;
525
+ border-radius: 50%;
526
+ border: 2px solid rgba(255,255,255,.2);
527
+ flex-shrink: 0;
528
+ }
529
+
530
+ /* Back button */
531
+ [data-theme="lequipe"] .eb-player .eb-settings-back {
532
+ gap: 14px;
533
+ font-weight: 600;
534
+ }
535
+
536
+ /* ============================================================
537
+ Loading spinner
538
+ ============================================================ */
539
+ [data-theme="lequipe"] .eb-player .eb-loading .eb-icon {
540
+ width: 52px;
541
+ height: 52px;
542
+ color: rgba(255,255,255,.7);
543
+ filter: drop-shadow(0 1px 6px rgba(0,0,0,.5));
544
+ animation: eb-spin .75s linear infinite;
545
+ }
546
+
547
+ /* ============================================================
548
+ Error overlay
549
+ ============================================================ */
550
+ [data-theme="lequipe"] .eb-player .eb-error {
551
+ background: rgba(10,10,20,.85);
552
+ backdrop-filter: blur(12px);
553
+ -webkit-backdrop-filter: blur(12px);
554
+ }
555
+
556
+ [data-theme="lequipe"] .eb-player .eb-error-message {
557
+ font-weight: 400;
558
+ letter-spacing: .01em;
559
+ }
560
+
561
+ [data-theme="lequipe"] .eb-player .eb-error-retry {
562
+ border-radius: 8px;
563
+ background: rgba(255,255,255,.1);
564
+ border-color: rgba(255,255,255,.15);
565
+ transition: background .2s, color .2s;
566
+ }
567
+
568
+ [data-theme="lequipe"] .eb-player .eb-error-retry:hover {
569
+ background: rgba(255,255,255,.18);
570
+ }
571
+
572
+ /* ============================================================
573
+ Toast (keyboard hints, status messages)
574
+ ============================================================ */
575
+ [data-theme="lequipe"] .eb-player .eb-toast {
576
+ background: rgba(0,0,0,.72);
577
+ backdrop-filter: blur(10px);
578
+ -webkit-backdrop-filter: blur(10px);
579
+ border-radius: 10px;
580
+ font-size: 13px;
581
+ padding: 8px 16px;
582
+ }
583
+
584
+ /* ============================================================
585
+ Info & socials overlays
586
+ ============================================================ */
587
+ [data-theme="lequipe"] .eb-player .eb-info-overlay,
588
+ [data-theme="lequipe"] .eb-player .eb-socials-overlay {
589
+ background: rgba(10,10,20,.85);
590
+ backdrop-filter: blur(12px);
591
+ -webkit-backdrop-filter: blur(12px);
592
+ }
593
+
594
+ [data-theme="lequipe"] .eb-player .eb-info-close,
595
+ [data-theme="lequipe"] .eb-player .eb-socials-close {
596
+ border-radius: 8px;
597
+ background: rgba(255,255,255,.07);
598
+ border-color: rgba(255,255,255,.08);
599
+ transition: background .2s, color .2s;
600
+ }
601
+
602
+ [data-theme="lequipe"] .eb-player .eb-info-close:hover,
603
+ [data-theme="lequipe"] .eb-player .eb-socials-close:hover {
604
+ background: rgba(255,255,255,.13);
605
+ color: #fff;
606
+ }
607
+
608
+ [data-theme="lequipe"] .eb-player .eb-socials-link {
609
+ background: rgba(255,255,255,.07);
610
+ border: 1px solid rgba(255,255,255,.08);
611
+ border-radius: 8px;
612
+ transition: background .2s, color .2s, border-color .2s;
613
+ }
614
+
615
+ [data-theme="lequipe"] .eb-player .eb-socials-link:hover {
616
+ background: rgba(214,30,0,.15);
617
+ border-color: rgba(214,30,0,.35);
618
+ color: #ff8a75;
619
+ }
620
+
621
+ /* ============================================================
622
+ Poster
623
+ ============================================================ */
624
+ [data-theme="lequipe"] .eb-player .eb-poster {
625
+ background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
626
+ }
627
+
628
+ /* ============================================================
629
+ Radio overlay
630
+ ============================================================ */
631
+ [data-theme="lequipe"] .eb-player .eb-radio-overlay {
632
+ background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
633
+ }
634
+
635
+ [data-theme="lequipe"] .eb-player .eb-radio-bar {
636
+ background: rgba(214,30,0,.8);
637
+ }
638
+
639
+ /* ============================================================
640
+ Chapter skip button
641
+ ============================================================ */
642
+ [data-theme="lequipe"] .eb-player .eb-chapter-skip {
643
+ background: rgba(10,10,20,.55);
644
+ backdrop-filter: blur(12px);
645
+ -webkit-backdrop-filter: blur(12px);
646
+ border: 1px solid rgba(255,255,255,.15);
647
+ border-radius: 8px;
648
+ font-size: 12px;
649
+ font-weight: 500;
650
+ transition: background .15s;
651
+ }
652
+
653
+ [data-theme="lequipe"] .eb-player .eb-chapter-skip:hover {
654
+ background: rgba(255,255,255,.12);
655
+ }
@@ -292,7 +292,7 @@
292
292
  }
293
293
 
294
294
  [data-theme="modern"] .eb-player .eb-volume-fill {
295
- background: #fff;
295
+ background: var(--eb-color-primary, #7c3aed);
296
296
  }
297
297
 
298
298
  [data-theme="modern"] .eb-player .eb-volume-thumb {
@@ -377,7 +377,7 @@
377
377
  }
378
378
 
379
379
  [data-theme="v2"] .eb-player .eb-volume-fill {
380
- background: #fff;
380
+ background: var(--eb-color-primary, #ff841f);
381
381
  }
382
382
 
383
383
  [data-theme="v2"] .eb-player .eb-volume-thumb {
@@ -20,6 +20,12 @@ export interface EngineSettings {
20
20
  licenseUrl?: string;
21
21
  [key: string]: unknown;
22
22
  }>;
23
+ extraParamsCallback?: ((status?: number | string) => Promise<Record<string, unknown>> | Record<string, unknown>) | null | undefined;
24
+ onCDNTokenError?: ((error: {
25
+ status: number | string;
26
+ errorCode: string;
27
+ errorType: string;
28
+ }) => void) | null;
23
29
  [key: string]: unknown;
24
30
  }
25
31
  export interface ChromecastMetadata {
@@ -58,9 +64,15 @@ export interface LayoutConfig {
58
64
  */
59
65
  export declare const DEFAULT_LAYOUT: LayoutConfig;
60
66
  /**
61
- * Theme-specific default layouts.
62
- * Used when config.layout is not explicitly provided but a theme is set.
67
+ * Available themes — single source of truth for all theme names and labels.
68
+ * The test player reads this to populate the skin selector dynamically.
69
+ * Add new entries here when creating a new theme-*.css file.
63
70
  */
71
+ export declare const AVAILABLE_THEMES: {
72
+ value: string;
73
+ label: string;
74
+ primaryColor?: string;
75
+ }[];
64
76
  export declare const THEME_LAYOUTS: Record<string, LayoutConfig>;
65
77
  /**
66
78
  * Returns the effective layout for a given config.