🌹 Rose Media Player

Immersive video player for your users, supported in React and NextJS. Designed with Apple Human Interface Guidelines in mind.

Features

• Designed with Human in mind
• Timeline previews on the fly
• Seamless seeking with frame updates
• Optimized buffering for no-lag experience
• Useful Keyboard shortcuts
• For Devs: TypeScript support out of the box

Change Log

• Add video play/pause toggle on click.

Installation

# With npm
npm install roseplayer

# With yarn
yarn add roseplayer

# With pnpm
pnpm add roseplayer

Quick Start

"use client";

import { RosePlayer } from "roseplayer";

export default function MoviePlayer() {
  return (
    <RosePlayer
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
      poster="https://images.unsplash.com/photo-1626544827763-d516dce335e2?q=80&w=1000&auto=format&fit=crop"
    />
  );
}

Props

| Prop | Type | Default | Description | | ---------------------- | ------------ | ----------- | --------------------------------- | | src | string | required | URL of the video file | | poster | string | undefined | URL of the poster image | | autoPlay | boolean | false | Whether to autoplay the video | | muted | boolean | false | Whether to mute the video | | loop | boolean | false | Whether to loop the video | | className | string | undefined | Custom class name | | showThumbGenProgress | boolean | false | Show keyframe generation progress | | onPlay | () => void | undefined | Callback when video plays | | onPause | () => void | undefined | Callback when video pauses | | onEnded | () => void | undefined | Callback when video ends |

Keyboard Controls

RosePlayer supports comprehensive keyboard controls:

| Key | Action | | ------- | ----------------- | | Space | Toggle play/pause | | m | Toggle mute | | f | Toggle fullscreen | | → | Forward 5 seconds | | ← | Back 5 seconds | | ↑ | Increase volume | | ↓ | Decrease volume |

Browser Support

RosePlayer supports all major modern browsers including:

• Chrome, Edge (Chromium-based)
• Firefox
• Safari
• Mobile browsers (iOS Safari, Android Chrome)

Requirements

• React 18 or newer

License

CC BY-NC-ND

Contact

Email [email protected]