react-helios 2.3.3 → 2.5.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/README.md +177 -71
- package/dist/index.d.mts +68 -25
- package/dist/index.d.ts +68 -25
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +135 -0
- package/package.json +5 -3
package/dist/styles.css
CHANGED
|
@@ -48,6 +48,12 @@
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
@keyframes rvp-spin {
|
|
52
|
+
to {
|
|
53
|
+
transform: rotate(360deg);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
51
57
|
.bufferingText {
|
|
52
58
|
font-size: 14px;
|
|
53
59
|
font-weight: 500;
|
|
@@ -555,3 +561,132 @@
|
|
|
555
561
|
transform: translate(-50%, -50%) scale(1.25);
|
|
556
562
|
transition: none;
|
|
557
563
|
}
|
|
564
|
+
|
|
565
|
+
|
|
566
|
+
/* ─── Audio Mode Overlay ───────────────────────────────────────────────────── */
|
|
567
|
+
|
|
568
|
+
.rvp-audio-overlay {
|
|
569
|
+
position: absolute;
|
|
570
|
+
inset: 0;
|
|
571
|
+
background: #121212;
|
|
572
|
+
z-index: 1;
|
|
573
|
+
cursor: pointer;
|
|
574
|
+
overflow: hidden;
|
|
575
|
+
display: flex;
|
|
576
|
+
flex-direction: column;
|
|
577
|
+
align-items: center;
|
|
578
|
+
justify-content: center;
|
|
579
|
+
gap: 14px;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
/* ─── Artwork (smaller, centred) ─────────────────────────────────────────── */
|
|
583
|
+
|
|
584
|
+
.rvp-audio-artwork-container {
|
|
585
|
+
display: flex;
|
|
586
|
+
align-items: center;
|
|
587
|
+
justify-content: center;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.rvp-audio-artwork {
|
|
591
|
+
width: min(480px, 80%);
|
|
592
|
+
aspect-ratio: 16 / 9;
|
|
593
|
+
object-fit: cover;
|
|
594
|
+
border-radius: 8px;
|
|
595
|
+
display: block;
|
|
596
|
+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
/* ─── "Audio Mode" label ──────────────────────────────────────────────────── */
|
|
600
|
+
|
|
601
|
+
.rvp-audio-label {
|
|
602
|
+
font-size: 12px;
|
|
603
|
+
font-weight: 600;
|
|
604
|
+
letter-spacing: 0.08em;
|
|
605
|
+
text-transform: uppercase;
|
|
606
|
+
color: rgba(255, 255, 255, 0.5);
|
|
607
|
+
user-select: none;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
/* ─── Logo fallback ───────────────────────────────────────────────────────── */
|
|
611
|
+
|
|
612
|
+
.rvp-audio-logo {
|
|
613
|
+
max-width: 100px;
|
|
614
|
+
max-height: 48px;
|
|
615
|
+
object-fit: contain;
|
|
616
|
+
filter: brightness(0) invert(1);
|
|
617
|
+
opacity: 0.55;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.rvp-audio-logo-node {
|
|
621
|
+
display: flex;
|
|
622
|
+
align-items: center;
|
|
623
|
+
justify-content: center;
|
|
624
|
+
color: rgba(255, 255, 255, 0.55);
|
|
625
|
+
max-width: 100px;
|
|
626
|
+
max-height: 48px;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
/* ─── Buffering spinner ───────────────────────────────────────────────────── */
|
|
630
|
+
|
|
631
|
+
.rvp-audio-buffering-overlay {
|
|
632
|
+
position: absolute;
|
|
633
|
+
inset: 0;
|
|
634
|
+
display: flex;
|
|
635
|
+
align-items: center;
|
|
636
|
+
justify-content: center;
|
|
637
|
+
z-index: 2;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.rvp-audio-spinner {
|
|
641
|
+
width: 36px;
|
|
642
|
+
height: 36px;
|
|
643
|
+
border: 3px solid rgba(255, 255, 255, 0.18);
|
|
644
|
+
border-top-color: #fff;
|
|
645
|
+
border-radius: 50%;
|
|
646
|
+
animation: rvp-audio-spin 0.75s linear infinite;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
@keyframes rvp-audio-spin {
|
|
650
|
+
to { transform: rotate(360deg); }
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
/* ─── Audio mode toggle button ────────────────────────────────────────────── */
|
|
654
|
+
|
|
655
|
+
.rvp-audio-toggle-btn {
|
|
656
|
+
display: inline-flex;
|
|
657
|
+
align-items: center;
|
|
658
|
+
gap: 6px;
|
|
659
|
+
padding: 5px 12px;
|
|
660
|
+
border: 1.5px solid rgba(255, 255, 255, 0.65);
|
|
661
|
+
border-radius: 20px;
|
|
662
|
+
background: rgba(0, 0, 0, 0.35);
|
|
663
|
+
color: #fff;
|
|
664
|
+
font-size: 12px;
|
|
665
|
+
font-weight: 600;
|
|
666
|
+
letter-spacing: 0.02em;
|
|
667
|
+
cursor: pointer;
|
|
668
|
+
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
|
|
669
|
+
white-space: nowrap;
|
|
670
|
+
backdrop-filter: blur(4px);
|
|
671
|
+
-webkit-backdrop-filter: blur(4px);
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.rvp-audio-toggle-btn:hover {
|
|
675
|
+
background: rgba(255, 255, 255, 0.15);
|
|
676
|
+
border-color: #fff;
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
.rvp-audio-toggle-btn:active {
|
|
680
|
+
transform: scale(0.96);
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
.rvp-audio-toggle-btn[aria-pressed="true"] {
|
|
684
|
+
border-color: rgba(255, 255, 255, 0.65);
|
|
685
|
+
color: #fff;
|
|
686
|
+
background: rgba(255, 255, 255, 0.12);
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
.rvp-audio-toggle-btn[aria-pressed="true"]:hover {
|
|
690
|
+
background: rgba(255, 255, 255, 0.2);
|
|
691
|
+
border-color: #fff;
|
|
692
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-helios",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "Production-grade React video player with HLS,
|
|
3
|
+
"version": "2.5.0",
|
|
4
|
+
"description": "Production-grade React video player with HLS, audio mode, adaptive quality, live streams, subtitles, and VTT sprite thumbnail preview",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -45,7 +45,9 @@
|
|
|
45
45
|
"picture-in-picture",
|
|
46
46
|
"vtt",
|
|
47
47
|
"sprite-sheet",
|
|
48
|
-
"thumbnail-preview"
|
|
48
|
+
"thumbnail-preview",
|
|
49
|
+
"audio-mode",
|
|
50
|
+
"audio-player"
|
|
49
51
|
],
|
|
50
52
|
"author": "Sanish Manandhar <mail.sanishmanandhar@gmail.com>",
|
|
51
53
|
"license": "MIT",
|