react-helios 2.0.0

package/dist/styles.css

@@ -0,0 +1,501 @@
+.container {
+  position: relative;
+  width: 100%;
+  background-color: #000;
+  aspect-ratio: 16 / 9;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.videoWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.bufferingIndicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: white;
+  z-index: 10;
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.bufferingText {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.errorOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 20;
+}
+
+.errorContent {
+  text-align: center;
+  color: white;
+  padding: 24px;
+  max-width: 400px;
+}
+
+.errorTitle {
+  margin: 0 0 12px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.errorMessage {
+  margin: 0;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+@media (max-width: 640px) {
+  .container {
+    border-radius: 0;
+  }
+}
+
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+  padding: 48px 16px 16px;
+  transition: opacity 0.3s ease;
+  z-index: 5;
+}
+
+.controls.visible {
+  opacity: 1;
+}
+
+.controls.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.controls:hover {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.controlsBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.controlsLeft {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.controlsRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.timeDisplay {
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.currentTime,
+.duration {
+  font-variant-numeric: tabular-nums;
+}
+
+.separator {
+  opacity: 0.7;
+}
+
+@media (max-width: 640px) {
+  .controlsBar {
+    gap: 4px;
+  }
+
+  .timeDisplay {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .controlButton {
+    padding: 6px;
+  }
+}
+
+
+/* ─── Control button base ────────────────────────────────────────────────── */
+.controlButton {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 10px;
+  min-width: 40px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: opacity 0.15s, background-color 0.15s, transform 0.1s;
+  flex-shrink: 0;
+}
+
+.controlButton:hover {
+  background-color: rgba(255, 255, 255, 0.12);
+  opacity: 1;
+}
+
+.controlButton:active {
+  transform: scale(0.92);
+}
+
+.controlButton svg {
+  width: 20px;
+  height: 20px;
+  pointer-events: none;
+}
+
+@media (max-width: 480px) {
+  .controlButton {
+    padding: 8px;
+    min-width: 36px;
+    min-height: 36px;
+  }
+}
+
+/* ─── Volume control ─────────────────────────────────────────────────────── */
+.volumeContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.volumeSlider {
+  width: 80px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  height: 4px;
+  outline: none;
+  transition: width 0.15s;
+  flex-shrink: 0;
+}
+
+.volumeSlider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
+.volumeSlider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
+/* ─── Time display ───────────────────────────────────────────────────────── */
+.timeDisplay {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  user-select: none;
+  white-space: nowrap;
+  padding: 0 4px;
+  letter-spacing: 0.01em;
+}
+
+/* ─── Settings menu ──────────────────────────────────────────────────────── */
+.settingsContainer {
+  position: relative;
+}
+
+.settingsDropdown {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  background-color: rgba(15, 15, 15, 0.95);
+  border-radius: 6px;
+  padding: 6px;
+  min-width: 150px;
+  z-index: 30;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+}
+
+/* Tabs (Speed / Quality) */
+.settingsTabs {
+  display: flex;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  margin-bottom: 4px;
+}
+
+.settingsTab {
+  flex: 1;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 0;
+  letter-spacing: 0.04em;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+  text-transform: uppercase;
+}
+
+.settingsTab.active {
+  color: #fff;
+  border-bottom-color: #3b82f6;
+}
+
+.settingsTab:hover:not(.active) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Panel section label */
+.settingsPanelLabel {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 4px 8px 2px;
+}
+
+/* Option rows */
+.settingsOption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 7px 10px;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  text-align: left;
+  border-radius: 4px;
+  font-size: 13px;
+  transition: background-color 0.15s;
+}
+
+.settingsOption:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.settingsOption.active {
+  color: #60a5fa;
+  font-weight: 600;
+}
+
+.settingsOptionBadge {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.4);
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+
+/* ─── Progress bar container ─────────────────────────────────────────────── */
+.progressContainer {
+  position: relative;
+  width: 100%;
+  /* Tall hit area so scrub feels easy to grab on touch and mouse */
+  padding: 10px 0;
+  cursor: pointer;
+  /* Expand the clickable zone without affecting layout neighbours */
+  box-sizing: content-box;
+}
+
+.progressContainer:focus {
+  outline: none;
+}
+
+.progressContainer:focus-visible {
+  outline: 2px solid #60a5fa;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ─── Hidden preview video ───────────────────────────────────────────────── */
+.previewVideo {
+  display: none;
+}
+
+/* ─── Thumbnail tooltip ──────────────────────────────────────────────────── */
+.previewTooltip {
+  position: absolute;
+  /* Sits above the container; bottom 100% + a small gap */
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%);
+  pointer-events: none;
+  z-index: 20;
+  background-color: #000;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+}
+
+.previewCanvas {
+  display: block;
+  width: 160px;
+  height: 90px;
+}
+
+.previewTime {
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+/* ─── Track background ───────────────────────────────────────────────────── */
+.progressBackground {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background-color: rgba(255, 255, 255, 0.25);
+  border-radius: 2px;
+  /* Keep overflow:hidden for buffered / filled bars ONLY.
+     The scrub handle must live OUTSIDE this element. */
+  overflow: hidden;
+  transition: height 0.15s;
+  will-change: height;
+}
+
+/* Grow the track on hover for a "YouTube-style" feel */
+.progressContainer:hover .progressBackground {
+  height: 6px;
+}
+
+/* ─── Buffered range indicator ───────────────────────────────────────────── */
+.bufferedSegment {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.45);
+  border-radius: 2px;
+}
+
+/* ─── Played progress fill ───────────────────────────────────────────────── */
+.progressFilled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: #3b82f6;
+  border-radius: 2px;
+  will-change: width;
+}
+
+/* ─── Hover position indicator (thin white line) ────────────────────────── */
+.hoverIndicator {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  pointer-events: none;
+}
+
+/* ─── Scrub handle ───────────────────────────────────────────────────────── */
+/*
+ * The handle is a SIBLING of .progressBackground (outside overflow:hidden).
+ * It is positioned absolutely within .progressContainer, which provides
+ * the full padded height. `top: 50%` centers it on the container mid-line,
+ * which aligns with the track regardless of the container's padding.
+ *
+ * Fix: previously the handle was inside overflow:hidden and only a tiny
+ * sliver was visible on the 4px-tall track.
+ */
+.scrubHandle {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 14px;
+  height: 14px;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  transition: transform 0.12s, opacity 0.12s;
+  /* Hidden by default; shown on container hover */
+  opacity: 0;
+  z-index: 2;
+  will-change: transform, opacity;
+}
+
+.progressContainer:hover .scrubHandle,
+.scrubHandle.dragging {
+  opacity: 1;
+}
+
+.scrubHandle.dragging {
+  transform: translate(-50%, -50%) scale(1.25);
+  transition: none;
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "react-helios",
+  "version": "2.0.0",
+  "description": "Production-grade React video player with HLS, quality selection, live streams, subtitles, and thumbnail preview",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "video",
+    "player",
+    "video-player",
+    "hls",
+    "hls.js",
+    "live-stream",
+    "thumbnail",
+    "preview",
+    "quality",
+    "subtitles",
+    "captions",
+    "typescript",
+    "nextjs",
+    "picture-in-picture"
+  ],
+  "author": "Sanish Manandhar <mail.sanishmanandhar@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sanishmdhr96/react-video-player"
+  },
+  "bugs": {
+    "url": "https://github.com/sanishmdhr96/react-video-player/issues"
+  },
+  "homepage": "https://github.com/sanishmdhr96/react-video-player#readme",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "hls.js": "^1.6.15"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "tsup": "^8.0.0"
+  }
+}