@diesanromerollc/videoplayer

A cross-platform video player component for React Native with web support. Built with TypeScript and designed to be highly customizable.

Features

• 🎥 Cross-platform: Works on iOS, Android, and Web
• 🎨 Customizable: Theme, icons, and components can be customized
• 📱 Responsive: Adapts to different screen sizes
• ⚡ Performance: Optimized for smooth playback
• 🔧 TypeScript: Full TypeScript support
• 🎛️ Controls: YouTube-style controls with volume, playback speed, and more
• 📦 Lightweight: Minimal dependencies

Installation

npm install @diesanromerollc/videoplayer
# or
yarn add @diesanromerollc/videoplayer
# or
pnpm add @diesanromerollc/videoplayer

Peer Dependencies

This package requires the following peer dependencies:

• react >= 18.0.0
• react-native >= 0.70.0
• react-native-video >= 6.0.0 (for native platforms)

Install Peer Dependencies

npm install react-native-video
# For iOS, you may need to run:
cd ios && pod install

Basic Usage

import { VideoPlayer } from '@diesanromerollc/videoplayer';

function MyComponent() {
  return (
    <VideoPlayer
      uri="https://example.com/video.mp4"
      posterUri="https://example.com/poster.jpg"
      title="My Video"
      onPlay={() => console.log('Playing')}
      onPause={() => console.log('Paused')}
      onEnd={() => console.log('Ended')}
    />
  );
}

Advanced Usage

Custom Theme

import { VideoPlayer, defaultTheme } from '@diesanromerollc/videoplayer';

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#00ff00',
    progressBar: '#00ff00',
  },
};

<VideoPlayer
  uri="https://example.com/video.mp4"
  theme={customTheme}
/>

Custom Icons

import { VideoPlayer } from '@diesanromerollc/videoplayer';
import { CustomPlayIcon, CustomPauseIcon } from './icons';

<VideoPlayer
  uri="https://example.com/video.mp4"
  icons={{
    Play: CustomPlayIcon,
    Pause: CustomPauseIcon,
  }}
/>

Custom Text Component

import { VideoPlayer } from '@diesanromerollc/videoplayer';
import { MyCustomText } from './components';

<VideoPlayer
  uri="https://example.com/video.mp4"
  TextComponent={MyCustomText}
/>

Custom Preferences

import { VideoPlayer } from '@diesanromerollc/videoplayer';

<VideoPlayer
  uri="https://example.com/video.mp4"
  preferences={{
    autoPlay: true,
    playbackSpeed: 1.5,
  }}
/>

Safe Area Insets

import { VideoPlayer } from '@diesanromerollc/videoplayer';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function MyComponent() {
  const insets = useSafeAreaInsets();
  
  return (
    <VideoPlayer
      uri="https://example.com/video.mp4"
      safeAreaInsets={insets}
    />
  );
}

API Reference

VideoPlayer Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | uri | string | required | Video source URI | | posterUri | string | undefined | Poster/thumbnail image URI | | title | string | undefined | Video title to display | | onClose | () => void | undefined | Callback when close button is pressed | | autoPlay | boolean | false | Auto-play video on load | | showControls | boolean | true | Show controls overlay | | onPlay | () => void | undefined | Callback when video starts playing | | onPause | () => void | undefined | Callback when video is paused | | onEnd | () => void | undefined | Callback when video ends | | onError | (error: Error) => void | undefined | Callback when video encounters an error | | onProgress | (currentTime: number, duration: number) => void | undefined | Callback when video position changes | | resizeMode | "contain" \| "cover" \| "stretch" | "contain" | Custom resize mode | | fullscreen | boolean | false | Enable fullscreen mode | | muted | boolean | false | Mute video by default | | rate | number | 1.0 | Playback rate (1.0 = normal speed) | | volume | number | 1.0 | Volume (0.0 to 1.0) | | style | ViewStyle | undefined | Custom styles | | testID | string | undefined | Test ID for testing | | theme | Partial<VideoPlayerTheme> | defaultTheme | Custom theme | | TextComponent | ComponentType<TextProps> | Text | Custom Text component | | icons | VideoPlayerIcons | undefined | Custom icons | | preferences | VideoPreferences | undefined | Video preferences | | safeAreaInsets | EdgeInsets | undefined | Safe area insets |

VideoPlayerState

interface VideoPlayerState {
  isPlaying: boolean;
  isLoading: boolean;
  isInitialLoad: boolean;
  position: number; // milliseconds
  duration: number; // milliseconds
  showControls: boolean;
  error: string | null;
  isBuffering: boolean;
  isReady: boolean;
  rate: number;
  volume: number;
  muted: boolean;
  fullscreen: boolean;
}

VideoPlayerControls

interface VideoPlayerControls {
  play: () => Promise<void>;
  pause: () => Promise<void>;
  togglePlayPause: () => Promise<void>;
  seek: (position: number) => Promise<void>;
  replay: () => Promise<void>;
  setRate: (rate: number) => void;
  setVolume: (volume: number) => void;
  toggleMute: () => void;
  enterFullscreen: () => void;
  exitFullscreen: () => void;
  showControls: () => void;
  hideControls: () => void;
  toggleControls: () => void;
}

Hooks

useVideoPlayer

Custom hook for managing video player state and controls.

import { useVideoPlayer } from '@diesanromerollc/videoplayer';

const { state, controls, videoRef } = useVideoPlayer({
  uri: 'https://example.com/video.mp4',
  autoPlay: false,
  onPlay: () => console.log('Playing'),
  onPause: () => console.log('Paused'),
});

useVideoPreferences

Hook for managing video preferences (optional).

import { useVideoPreferences } from '@diesanromerollc/videoplayer';

const { autoPlay, playbackSpeed } = useVideoPreferences();

Utilities

formatTime

Format milliseconds to time string (MM:SS).

import { formatTime } from '@diesanromerollc/videoplayer';

const timeString = formatTime(125000); // "2:05"

Platform Support

• ✅ iOS
• ✅ Android
• ✅ Web (HTML5 video)

Development

Building

npm run build

Testing

npm test

License

MIT

Repository

https://github.com/Diesan-Romero-LLC/videoplayer

Support

For issues and feature requests, please use the GitHub issue tracker.