qalbplayer

qalbplayer is a custom React / Next.js video player package for long videos, shorts/reels, and live HLS streams.

Install

npm install qalbplayer

Next.js App Router usage

Import the CSS once in src/app/layout.tsx:

import "qalbplayer/style.css";

Use the component in a client component:

"use client";

import { QalbPlayer } from "qalbplayer";

export default function Page() {
  return (
    <QalbPlayer
      url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
      mode="video"
      autoplay={false}
    />
  );
}

Props

export interface QalbPlayerProps {
  url: string;
  mode: "video" | "shorts" | "live";
  poster?: string;
  autoplay?: boolean;
  className?: string;
}

Features

• Raw HTML5 video foundation.
• Dynamic hls.js loading for .m3u8 adaptive streaming.
• MP4/native fallback.
• video mode with 16:9 YouTube-style controls.
• shorts mode with 9:16 vertical layout and tap-to-mute behavior.
• live mode with LIVE badge, connection timer, disabled scrubbing, and offline fallback.
• YouTube-style blue/green gradient progress bar.
• Click, drag, and mobile pointer scrubbing for non-live videos.
• SVG icons for play, pause, volume, mute, settings, PiP, theater, and fullscreen.
• Center play/pause ring animation.
• Double-click left/right skip for long videos.
• Long press 3.0x temporary speed boost for non-live videos.
• Playback speed menu.
• HLS quality selector using available HLS levels.
• Keyboard shortcuts: Space, arrows, M, F, T.
• CSS-only loading spinner.

Publish

npm publish --access public