react-helios 2.8.0 → 2.9.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 (9) hide show
  1. package/README.md +106 -4
  2. package/dist/index.d.mts +30 -1
  3. package/dist/index.d.ts +30 -1
  4. package/dist/index.js +2 -2
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +2 -2
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +92 -38
  9. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -283,69 +283,115 @@
283
283
  position: absolute;
284
284
  bottom: calc(100% + 8px);
285
285
  right: 0;
286
- background-color: rgba(15, 15, 15, 0.95);
287
- border-radius: 6px;
288
- padding: 6px;
289
- min-width: 150px;
286
+ background-color: rgba(20, 20, 20, 0.97);
287
+ border-radius: 8px;
288
+ padding: 4px;
289
+ min-width: 220px;
290
290
  z-index: 30;
291
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
292
- backdrop-filter: blur(8px);
291
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
292
+ backdrop-filter: blur(12px);
293
+ overflow: hidden;
293
294
  }
294
295
 
295
- /* Tabs (Speed / Quality) */
296
- .settingsTabs {
296
+ /* ── Main panel rows ── */
297
+ .settingsMainPanel {
297
298
  display: flex;
298
- border-bottom: 1px solid rgba(255, 255, 255, 0.12);
299
- margin-bottom: 4px;
299
+ flex-direction: column;
300
300
  }
301
301
 
302
- .settingsTab {
303
- flex: 1;
302
+ .settingsRow {
303
+ display: flex;
304
+ align-items: center;
305
+ gap: 10px;
306
+ width: 100%;
307
+ padding: 10px 12px;
304
308
  background: none;
305
309
  border: none;
306
- color: rgba(255, 255, 255, 0.6);
310
+ color: rgba(255, 255, 255, 0.9);
307
311
  cursor: pointer;
308
- font-size: 12px;
309
- font-weight: 600;
310
- padding: 6px 0;
311
- letter-spacing: 0.04em;
312
- border-bottom: 2px solid transparent;
313
- transition: color 0.15s, border-color 0.15s;
314
- text-transform: uppercase;
312
+ text-align: left;
313
+ border-radius: 6px;
314
+ font-size: 13px;
315
+ transition: background-color 0.15s;
315
316
  }
316
317
 
317
- .settingsTab.active {
318
+ .settingsRow:hover {
319
+ background-color: rgba(255, 255, 255, 0.1);
318
320
  color: #fff;
319
- border-bottom-color: #3b82f6;
320
321
  }
321
322
 
322
- .settingsTab:hover:not(.active) {
323
- color: rgba(255, 255, 255, 0.9);
323
+ .settingsRowIcon {
324
+ display: flex;
325
+ align-items: center;
326
+ color: rgba(255, 255, 255, 0.6);
327
+ flex-shrink: 0;
328
+ }
329
+
330
+ .settingsRowLabel {
331
+ flex: 1;
332
+ font-size: 13px;
333
+ white-space: nowrap;
324
334
  }
325
335
 
326
- /* Panel section label */
327
- .settingsPanelLabel {
336
+ .settingsRowValue {
337
+ font-size: 12px;
328
338
  color: rgba(255, 255, 255, 0.5);
329
- font-size: 10px;
330
- font-weight: 700;
331
- letter-spacing: 0.08em;
332
- text-transform: uppercase;
333
- padding: 4px 8px 2px;
339
+ flex-shrink: 0;
340
+ }
341
+
342
+ .settingsRowChevron {
343
+ display: flex;
344
+ align-items: center;
345
+ color: rgba(255, 255, 255, 0.4);
346
+ flex-shrink: 0;
347
+ }
348
+
349
+ /* ── Sub-panel ── */
350
+ .settingsSubPanel {
351
+ display: flex;
352
+ flex-direction: column;
353
+ }
354
+
355
+ .settingsBackRow {
356
+ display: flex;
357
+ align-items: center;
358
+ gap: 6px;
359
+ width: 100%;
360
+ padding: 10px 12px;
361
+ background: none;
362
+ border: none;
363
+ color: #fff;
364
+ cursor: pointer;
365
+ text-align: left;
366
+ border-radius: 6px;
367
+ font-size: 13px;
368
+ font-weight: 600;
369
+ transition: background-color 0.15s;
334
370
  }
335
371
 
336
- /* Option rows */
372
+ .settingsBackRow:hover {
373
+ background-color: rgba(255, 255, 255, 0.1);
374
+ }
375
+
376
+ .settingsDivider {
377
+ height: 1px;
378
+ background: rgba(255, 255, 255, 0.1);
379
+ margin: 2px 4px;
380
+ }
381
+
382
+ /* ── Option rows (inside sub-panels) ── */
337
383
  .settingsOption {
338
384
  display: flex;
339
385
  align-items: center;
340
- justify-content: space-between;
386
+ gap: 8px;
341
387
  width: 100%;
342
- padding: 7px 10px;
388
+ padding: 8px 12px;
343
389
  background: none;
344
390
  border: none;
345
- color: rgba(255, 255, 255, 0.85);
391
+ color: rgba(255, 255, 255, 0.8);
346
392
  cursor: pointer;
347
393
  text-align: left;
348
- border-radius: 4px;
394
+ border-radius: 6px;
349
395
  font-size: 13px;
350
396
  transition: background-color 0.15s;
351
397
  }
@@ -360,10 +406,18 @@
360
406
  font-weight: 600;
361
407
  }
362
408
 
409
+ .settingsOptionCheck {
410
+ display: flex;
411
+ align-items: center;
412
+ justify-content: center;
413
+ width: 16px;
414
+ flex-shrink: 0;
415
+ color: #60a5fa;
416
+ }
417
+
363
418
  .settingsOptionBadge {
364
- font-size: 10px;
419
+ font-size: 11px;
365
420
  color: rgba(255, 255, 255, 0.4);
366
- margin-left: 8px;
367
421
  flex-shrink: 0;
368
422
  }
369
423
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-helios",
3
- "version": "2.8.0",
3
+ "version": "2.9.2",
4
4
  "description": "Production-grade React video player with HLS, zero-cost audio mode, adaptive quality, live streams, subtitles, and VTT sprite thumbnail preview",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",