playahater v0.1.1

PlayaHater

A beautiful, accessible, and customizable video player component for React. Built with modern UI/UX principles, this video player is designed to be easy to use while providing powerful features.

Features

• 🎨 Beautiful design with Tailwind CSS
• 🧩 Composable components for maximum flexibility
• ♿ Fully accessible with keyboard navigation
• 🎛️ Comprehensive controls (play/pause, volume, progress, fullscreen, etc.)
• 📑 Chapters support for easy navigation
• 🔄 Picture-in-Picture support
• ⏱️ Playback rate control
• 📱 Responsive design
• 🎬 Built on top of react-player for wide format support

Installation

npm install playahater
# or
yarn add playahater

Note for Node.js v23+ Users

If you're using Node.js v23+ (especially on macOS) and encounter permission errors during installation, you can use one of these alternative installation methods:

# Using npx
npx -y npm install playahater

# Or using yarn
yarn add playahater

This is due to a known issue with Node.js v23+ on certain operating systems and is not specific to this package.

Usage

Basic Usage

import { VideoPlayer } from 'playahater';
import 'playahater/dist/index.css';

function App() {
  return (
    <div className="w-full max-w-3xl mx-auto">
      <VideoPlayer 
        url="https://www.example.com/video.mp4" 
        controls={true}
      />
    </div>
  );
}

Advanced Usage with Chapters

import { VideoPlayer } from 'playahater';
import 'playahater/dist/index.css';

function App() {
  const chapters = [
    { title: "Introduction", start: "0:00", end: "0:32" },
    { title: "Main Content", start: "0:32", end: "0:56" },
    { title: "Conclusion", start: "0:56", end: "1:19" },
  ];

  return (
    <div className="w-full max-w-3xl mx-auto">
      <VideoPlayer 
        url="https://www.example.com/video.mp4"
        autoPlay={false}
        loop={true}
        muted={false}
        controls={true}
        volume={0.8}
        playbackRate={1.0}
        width="100%"
        height="auto"
        containerClassName="rounded-2xl shadow-lg"
        chapters={chapters}
        videoTitle="My Video Title"
        showPlayPause={true}
        showVolumeControl={true}
        showProgressBar={true}
        showFullscreenButton={true}
        showPlaybackRateControl={true}
        showPipButton={true}
        showTimeDisplay={true}
        onPlay={() => console.log('Video started playing')}
        onPause={() => console.log('Video paused')}
        onEnded={() => console.log('Video ended')}
        onProgress={(state) => console.log('Progress:', state)}
        onDuration={(duration) => console.log('Duration:', duration)}
      />
    </div>
  );
}

Using Individual Components

import {
  VideoPlayerProvider,
  VideoProgressBar,
  VideoVolumeControl,
  VideoPlaybackRateControl,
  VideoTimeDisplay,
  useVideoPlayer
} from 'playahater';
import 'playahater/dist/index.css';

function CustomControls() {
  const { playing, togglePlay } = useVideoPlayer();
  
  return (
    <div className="flex items-center space-x-4">
      <button onClick={togglePlay}>
        {playing ? 'Pause' : 'Play'}
      </button>
      <VideoProgressBar className="flex-grow" />
      <VideoVolumeControl />
      <VideoTimeDisplay showDuration={true} />
    </div>
  );
}

function App() {
  return (
    <div className="w-full max-w-3xl mx-auto">
      <VideoPlayerProvider>
        <div className="relative">
          {/* Your custom video player implementation */}
          <CustomControls />
        </div>
      </VideoPlayerProvider>
    </div>
  );
}

Props

VideoPlayer Props

License

MIT