react-helios 2.7.5 → 2.8.0

package/dist/styles.css

@@ -562,6 +562,69 @@
   transition: none;
 }
 
+/* ─── Waveform progress bar (audio mode) ────────────────────────────────── */
+
+/*
+ * Sits absolutely inside .progressContainer, aligned to the bottom.
+ * Does not affect container height (position: absolute).
+ */
+.rvp-waveform {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 10px; /* match .progressContainer padding */
+  height: 22px;
+  pointer-events: none;
+}
+
+.rvp-waveform-base,
+.rvp-waveform-filled {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(200, 1fr);
+  gap: 2px;
+  align-items: end;
+}
+
+/* Dot — unplayed portion (short nub at baseline) */
+.rvp-waveform-dot {
+  min-width: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.28);
+  border-radius: 1.5px;
+}
+
+/* Buffered layer — same grid layout, gray bars clipped to buffered range */
+.rvp-waveform-buffered {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(200, 1fr);
+  gap: 2px;
+  align-items: end;
+}
+
+.rvp-waveform-buffered-bar {
+  min-width: 0;
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 2px 2px 0 0;
+}
+
+/* Filled bar — played portion; height set inline as % of container */
+.rvp-waveform-bar {
+  min-width: 0;
+  background: #3b82f6;
+  border-radius: 2px 2px 0 0;
+  /* height set inline as % of container (28px) */
+}
+
+/* clip-path: inset(0 RIGHT% 0 0) — updated imperatively on timeupdate */
+.rvp-waveform-filled {
+  overflow: visible;
+}
+
+
 
 /* ─── Audio Mode Overlay ───────────────────────────────────────────────────── */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-helios",
-  "version": "2.7.5",
+  "version": "2.8.0",
   "description": "Production-grade React video player with HLS, zero-cost audio mode, adaptive quality, live streams, subtitles, and VTT sprite thumbnail preview",
   "main": "dist/index.js",
   "module": "dist/index.mjs",