roseplayer

🌹 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 [e-mail]