baroiplayer

A customizable, feature-rich media player component library for React applications with a simple, minimal Doodstream-style UI.

Features

• 🎥 Video & Audio Support: Play various media formats including HLS streaming
• 🎬 Doodstream-Style Minimal UI: Clean, unobtrusive interface with auto-hiding controls
• 🎛️ Customizable Controls: Build your own player interface or use pre-built variants
• 🎨 Custom Icon System: Beautiful SVG icons matching Doodstream aesthetic
• ⌨️ Keyboard Controls: Standard media keyboard shortcuts
• 📱 Responsive Design: Container queries for adaptive layouts
• 🌙 Multiple Themes: Dark, Light, and Transparent themes
• 🚀 React 19 Optimized: Using latest React features for best performance
• ⚡ Advanced Features: Quality selector, playback speed, preview thumbnails
• 🔧 TypeScript: Full type safety and IntelliSense
• ♿ Accessible: ARIA compliant controls
• 🎭 HLS Support: Built-in support for HLS streaming via react-player

Installation

Install the package and its peer dependencies:

# Using npm
npm install baroiplayer react-player

# Using bun
bun add baroiplayer react-player

# Using yarn
yarn add baroiplayer react-player

# Using pnpm
pnpm add baroiplayer react-player

Required Dependencies

Baroiplayer requires the following dependencies to work properly:

# Install all required dependencies
npm install @radix-ui/react-progress @radix-ui/react-slider @radix-ui/react-tooltip @radix-ui/react-dropdown-menu @radix-ui/react-slot lucide-react clsx tailwind-merge

Complete Installation (one command):

# Install everything at once
npm install baroiplayer react-player @radix-ui/react-progress @radix-ui/react-slider @radix-ui/react-tooltip @radix-ui/react-dropdown-menu @radix-ui/react-slot lucide-react clsx tailwind-merge

Peer Dependencies

Make sure you have the following peer dependencies installed:

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "react-player": ">=2.0.0"
}

Quick Start

BaroiPlayer - Simple Implementation

The easiest way to get started with a beautiful, minimal media player:

import { BaroiPlayer } from 'baroiplayer';

function App() {
  return (
    <div style={{ maxWidth: '960px', margin: '0 auto' }}>
      <BaroiPlayer 
        src="https://example.com/video.mp4"
        poster="https://example.com/poster.jpg"
      />
    </div>
  );
}

BaroiPlayer Props

Basic Video Player

import { VideoPlayer } from 'baroiplayer';

function App() {
  return (
    <VideoPlayer
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
      width="100%"
      height="auto"
    />
  );
}

Basic Audio Player

import { AudioPlayer } from 'baroiplayer';

function App() {
  return (
    <AudioPlayer
      src="https://example.com/audio.mp3"
    />
  );
}

Minimal Doodstream-Style Player

import { MinimalMediaPlayer } from 'baroiplayer';

function DoodstreamPlayer() {
  return (
    <MinimalMediaPlayer
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
      theme="dark" // or "light", "transparent"
      autoHideControls={true}
      hideDelay={2500}
      showCenterPlayButton={true}
      qualities={[
        { src: "video_1080p.mp4", quality: "1080p", default: true },
        { src: "video_720p.mp4", quality: "720p" },
        { src: "video_480p.mp4", quality: "480p" },
      ]}
      showQualitySelector={true}
      showSpeedControl={true}
      watermark={{
        src: "/logo.png",
        position: "top-right",
        opacity: 0.5,
        size: "small"
      }}
    />
  );
}

Custom Controls

import { 
  MediaPlayer, 
  PlayButton, 
  VolumeControl, 
  SeekBar, 
  TimeDisplay 
} from 'baroiplayer';

function CustomPlayer() {
  return (
    <MediaPlayer src="https://example.com/video.mp4" customControls>
      {({ state, controls }) => (
        <div className="custom-controls">
          <PlayButton 
            isPlaying={state.isPlaying} 
            onToggle={controls.toggle} 
          />
          <SeekBar
            currentTime={state.currentTime}
            duration={state.duration}
            onSeek={controls.seek}
          />
          <TimeDisplay
            currentTime={state.currentTime}
            duration={state.duration}
          />
          <VolumeControl
            volume={state.volume}
            isMuted={state.isMuted}
            onVolumeChange={controls.setVolume}
            onToggleMute={controls.toggleMute}
          />
        </div>
      )}
    </MediaPlayer>
  );
}

API Reference

Core Components

• MediaPlayer - Core media player component
• VideoPlayer - Video-specific player with aspect ratio support
• AudioPlayer - Audio-specific player
• PlayButton - Play/pause toggle button
• VolumeControl - Volume slider and mute button
• SeekBar - Progress bar with seeking capability
• TimeDisplay - Current time and duration display
• FullscreenButton - Fullscreen toggle button

Minimal (Doodstream-style) Components

• MinimalMediaPlayer - Complete minimal player with auto-hiding controls
• MinimalControls - Minimal control bar with smooth transitions
• MinimalPlayButton - Custom play/pause button with minimal design
• MinimalSeekBar - Sleek seek bar with hover effects
• MinimalVolumeControl - Expandable volume control
• MinimalOverlay - Overlay container for controls
• MinimalLoading - Minimal loading spinner

Advanced Components

• QualitySelector - Video quality selection dropdown
• PlaybackSpeedSelector - Playback speed control
• ChaptersPanel - Chapter navigation panel
• SubtitleSelector - Subtitle track selector
• PictureInPictureButton - PiP mode toggle

Custom Icons

• MinimalPlayIcon - Custom play icon
• MinimalPauseIcon - Custom pause icon
• MinimalVolumeIcon - Custom volume icon
• MinimalFullscreenIcon - Custom fullscreen icon
• MinimalSettingsIcon - Custom settings icon
• And more...

Hooks

• useMediaPlayer - Core media player logic
• useMediaState - Media state management
• useKeyboardControls - Keyboard shortcut handling

Utilities

• formatTime - Format seconds to MM:SS or HH:MM:SS
• cn - Utility for conditional class names

Supported Formats

Video

• MP4 (H.264, H.265)
• WebM (VP8, VP9, AV1)
• OGV (Theora)

Audio

• MP3
• AAC
• OGG (Vorbis)
• WAV
• FLAC (where supported)

Keyboard Controls

When keyboardControls is enabled (default):

• Space / K - Play/pause
• M - Toggle mute
• F - Toggle fullscreen
• ← / → - Seek backward/forward 10 seconds
• ↑ / ↓ - Volume up/down
• 0-9 - Seek to percentage (0% to 90%)

Styling

The components use Tailwind CSS classes and can be customized via the className prop. Default styles follow a modern, accessible design pattern.

Styling

CSS Import

Import the required CSS files in your app:

// For minimal player styles (Doodstream-like UI)
import 'baroiplayer/styles/minimal-player.css';

// For VideoJS player styles (if using VideoJS adapter)
import 'baroiplayer/styles/videojs.css';

// For pixel art themed UI (optional)
import 'baroiplayer/styles/pixel-art.css';

Development

# Install dependencies
bun install

# Build the library
bun run build

# Watch mode for development
bun run dev

# Run type checking
bun run check-types

# Run linting
bun run lint

# Run tests
bun run test

Publishing

# Build and prepare for publishing
bun run build

# Publish to npm
npm publish

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

MIT © [Your Name]

See LICENSE file for details.