@frameset/plex-player 1.0.5 → 2.0.0

package/README.md

@@ -1,601 +1,406 @@
-<p align="center">
-  <img src="https://frameset.dev/favicon.svg" alt="FRAMESET" width="180" />
-</p>
-
-<h1 align="center">@frameset/plex-player</h1>
+# Plex Player
 
 <p align="center">
-  <strong>🎬 Professional HTML5 Video Player for Modern Web Applications</strong>
+  <img src="https://img.shields.io/npm/v/@frameset/plex-player" alt="npm version" />
+  <img src="https://img.shields.io/npm/dm/@frameset/plex-player" alt="npm downloads" />
+  <img src="https://img.shields.io/bundlephobia/minzip/@frameset/plex-player" alt="bundle size" />
+  <img src="https://img.shields.io/npm/l/@frameset/plex-player" alt="license" />
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@frameset/plex-player">
-    <img src="https://img.shields.io/npm/v/@frameset/plex-player.svg?style=flat-square" alt="npm version" />
-  </a>
-  <a href="https://www.npmjs.com/package/@frameset/plex-player">
-    <img src="https://img.shields.io/npm/dm/@frameset/plex-player.svg?style=flat-square" alt="npm downloads" />
-  </a>
-  <a href="https://github.com/deadseti/plex-player/blob/main/LICENSE">
-    <img src="https://img.shields.io/npm/l/@frameset/plex-player.svg?style=flat-square" alt="license" />
-  </a>
-  <a href="https://bundlephobia.com/package/@frameset/plex-player">
-    <img src="https://img.shields.io/bundlephobia/minzip/@frameset/plex-player?style=flat-square" alt="bundle size" />
-  </a>
+  <strong>Ultra-performant React video player with VAST ads support, Picture-in-Picture, and advanced controls.</strong>
 </p>
 
 <p align="center">
-  <a href="#features">Features</a> •
-  <a href="#installation">Installation</a> •
-  <a href="#quick-start">Quick Start</a> •
-  <a href="#api">API</a> •
-  <a href="#frameworks">Frameworks</a> •
-  <a href="#ads">Ads</a> •
-  <a href="#chromecast">Chromecast</a> •
-  <a href="#license">License</a>
+  Built with ❤️ by <a href="https://frameset.dev">FRAMESET STUDIO</a>
 </p>
 
 ---
 
 ## ✨ Features
 
-- 🎥 **Full-Featured Player** — Play, pause, seek, volume, playback rate, and more
-- 📺 **Chromecast Support** — Cast videos to any Chromecast-enabled device
-- 📋 **Playlist Management** — Queue management with thumbnail preview
-- 🎨 **Customizable UI** — Fully themeable with CSS variables
-- 📱 **Responsive Design** — Works perfectly on desktop, tablet, and mobile
-- ⌨️ **Keyboard Shortcuts** — Full keyboard navigation support
-- 👆 **Touch Gestures** — Swipe to seek, double-tap to skip
-- 🖼️ **Picture-in-Picture** — Native PiP support
-- 📺 **Fullscreen Mode** — True fullscreen with controls
-- 📝 **Subtitles/Captions** — Multi-track subtitle support
-- 💰 **VAST Ads** — VAST 2.0/3.0/4.0 video advertising
-- 🔌 **Framework Support** — React, Vue 3, and Vanilla JS
-- 📦 **TypeScript** — Full type definitions included
-- 🌍 **i18n Ready** — Easy localization support
-
----
+- 🚀 **Ultra Performant** - Optimized rendering with minimal re-renders
+- 🎬 **VAST Ads Support** - Pre-roll, mid-roll, and post-roll video ads
+- 📺 **Picture-in-Picture** - Native PiP support for multitasking
+- 🎛️ **Advanced Controls** - Customizable playback speed, quality selector, and more
+- ⌨️ **Keyboard Shortcuts** - Full keyboard navigation support
+- 📱 **Mobile Friendly** - Touch-optimized controls and gestures
+- 🎨 **Themeable** - Dark/Light themes with custom accent colors
+- ♿ **Accessible** - ARIA labels and keyboard navigation
+- 📝 **Subtitles/Captions** - Multiple text track support
+- 🖼️ **Thumbnail Preview** - Hover preview on progress bar
+- 💪 **TypeScript** - Full TypeScript support with type definitions
+- 📦 **Tree Shakeable** - Import only what you need
 
 ## 📦 Installation
 
-### NPM / Yarn / PNPM
-
 ```bash
-# npm
 npm install @frameset/plex-player
+```
 
-# yarn
+```bash
 yarn add @frameset/plex-player
-
-# pnpm
-pnpm add @frameset/plex-player
 ```
 
-### CDN
-
-```html
-<!-- CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@frameset/plex-player/dist/plex-player.min.css">
-
-<!-- JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/@frameset/plex-player/dist/plex-player.min.js"></script>
+```bash
+pnpm add @frameset/plex-player
 ```
 
----
-
 ## 🚀 Quick Start
 
-### Vanilla JavaScript
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" href="@frameset/plex-player/dist/plex-player.css">
-</head>
-<body>
-  <div id="player"></div>
-
-  <script src="@frameset/plex-player/dist/plex-player.min.js"></script>
-  <script>
-    const player = new PlexPlayer({
-      container: '#player',
-      autoplay: false,
-      muted: false,
-    });
-
-    player.load('https://example.com/video.mp4');
-  </script>
-</body>
-</html>
-```
-
-### ES Modules
-
-```javascript
-import PlexPlayer from '@frameset/plex-player';
-import '@frameset/plex-player/css';
-
-const player = new PlexPlayer({
-  container: '#player',
-  autoplay: true,
-});
-
-player.load('https://example.com/video.mp4');
-```
-
----
-
-## ⚛️ React
-
-```bash
-npm install @frameset/plex-player react
-```
-
-```jsx
-import { PlexPlayerReact, usePlexPlayer } from '@frameset/plex-player/react';
-import '@frameset/plex-player/css';
+```tsx
+import { PlexVideoPlayer } from '@frameset/plex-player';
+import '@frameset/plex-player/styles.css';
 
 function App() {
-  const playerRef = useRef(null);
-
-  const handlePlay = () => {
-    console.log('Video started playing');
-  };
-
-  const handleTimeUpdate = (currentTime) => {
-    console.log('Current time:', currentTime);
-  };
-
   return (
-    <PlexPlayerReact
-      ref={playerRef}
+    <PlexVideoPlayer
       src="https://example.com/video.mp4"
-      autoplay={false}
-      onPlay={handlePlay}
-      onTimeUpdate={handleTimeUpdate}
+      poster="https://example.com/poster.jpg"
+      width="100%"
+      height="auto"
     />
   );
 }
 ```
 
-### Hooks
+## 📖 Documentation
 
-```jsx
-import { 
-  PlexPlayerReact, 
-  PlexPlayerProvider,
-  usePlexPlayer,
-  usePlexPlayerState,
-  usePlexPlayerTime 
-} from '@frameset/plex-player/react';
+### Basic Usage
 
-function Controls() {
-  const player = usePlexPlayer();
-  const state = usePlexPlayerState();
-  const { current, duration } = usePlexPlayerTime();
+```tsx
+import { PlexVideoPlayer } from '@frameset/plex-player';
+import '@frameset/plex-player/styles.css';
 
+function VideoPlayer() {
   return (
-    <div>
-      <button onClick={() => player?.togglePlay()}>
-        {state?.isPlaying ? 'Pause' : 'Play'}
-      </button>
-      <span>{current}s / {duration}s</span>
-    </div>
-  );
-}
-
-function App() {
-  return (
-    <PlexPlayerProvider>
-      <PlexPlayerReact src="video.mp4" />
-      <Controls />
-    </PlexPlayerProvider>
+    <PlexVideoPlayer
+      src="https://example.com/video.mp4"
+      poster="https://example.com/poster.jpg"
+      autoPlay={false}
+      muted={false}
+      controls={true}
+    />
   );
 }
 ```
 
----
-
-## 💚 Vue 3
-
-```bash
-npm install @frameset/plex-player vue
-```
-
-```vue
-<template>
-  <PlexPlayerVue
-    ref="player"
-    src="https://example.com/video.mp4"
-    :autoplay="false"
-    @play="onPlay"
-    @timeupdate="onTimeUpdate"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { PlexPlayerVue } from '@frameset/plex-player/vue';
-import '@frameset/plex-player/css';
-
-const player = ref(null);
-
-const onPlay = () => {
-  console.log('Video started playing');
-};
-
-const onTimeUpdate = (currentTime) => {
-  console.log('Current time:', currentTime);
-};
-
-// Control player
-const togglePlay = () => {
-  player.value?.togglePlay();
-};
-</script>
+### Multiple Quality Sources
+
+```tsx
+<PlexVideoPlayer
+  src={[
+    { src: 'video-1080p.mp4', quality: '1080p', label: '1080p HD' },
+    { src: 'video-720p.mp4', quality: '720p', label: '720p' },
+    { src: 'video-480p.mp4', quality: '480p', label: '480p' },
+    { src: 'video-360p.mp4', quality: '360p', label: '360p' },
+  ]}
+  qualitySelector={true}
+/>
 ```
 
-### Composables
-
-```vue
-<script setup>
-import { PlexPlayerVue, usePlexPlayer, usePlexPlayerTime } from '@frameset/plex-player/vue';
-
-const player = usePlexPlayer();
-const time = usePlexPlayerTime();
-</script>
-
-<template>
-  <PlexPlayerVue src="video.mp4" />
-  <div>{{ time.current }} / {{ time.duration }}</div>
-</template>
+### With VAST Ads
+
+```tsx
+<PlexVideoPlayer
+  src="https://example.com/video.mp4"
+  vast={{
+    url: 'https://example.com/vast.xml',
+    skipDelay: 5,
+    position: 'preroll',
+  }}
+  onAdStart={(ad) => console.log('Ad started:', ad)}
+  onAdEnd={() => console.log('Ad ended')}
+  onAdSkip={() => console.log('Ad skipped')}
+/>
 ```
 
----
-
-## 📖 API Reference
-
-### Constructor Options
-
-```typescript
-interface PlexPlayerOptions {
-  container: string | HTMLElement;  // Required: container selector or element
-  autoplay?: boolean;               // Auto-play video (default: false)
-  muted?: boolean;                  // Start muted (default: false)
-  loop?: boolean;                   // Loop video (default: false)
-  volume?: number;                  // Initial volume 0-1 (default: 1)
-  poster?: string;                  // Poster image URL
-  preload?: 'none' | 'metadata' | 'auto'; // Preload behavior (default: 'metadata')
-  keyboard?: boolean;               // Enable keyboard shortcuts (default: true)
-  touch?: boolean;                  // Enable touch gestures (default: true)
-  pip?: boolean;                    // Enable PiP button (default: true)
-  cast?: boolean;                   // Enable Chromecast (default: true)
-  fullscreen?: boolean;             // Enable fullscreen (default: true)
-  controlsHideDelay?: number;       // Hide controls after ms (default: 3000)
-  theme?: ThemeOptions;             // Custom theme colors
-  subtitles?: SubtitleOptions;      // Subtitle configuration
-  ads?: AdsOptions;                 // VAST ads configuration
-  i18n?: I18nOptions;               // Localization strings
-}
+### Multiple Ads (Pre-roll, Mid-roll, Post-roll)
+
+```tsx
+<PlexVideoPlayer
+  src="https://example.com/video.mp4"
+  vast={[
+    { url: 'https://example.com/preroll.xml', position: 'preroll' },
+    { url: 'https://example.com/midroll.xml', position: 'midroll', midrollTime: 60 },
+    { url: 'https://example.com/postroll.xml', position: 'postroll' },
+  ]}
+/>
 ```
 
-### Methods
-
-| Method | Description | Returns |
-|--------|-------------|---------|
-| `load(src)` | Load a video URL | `void` |
-| `loadPlaylist(items)` | Load a playlist | `void` |
-| `play()` | Start playback | `Promise<void>` |
-| `pause()` | Pause playback | `void` |
-| `togglePlay()` | Toggle play/pause | `void` |
-| `seek(time)` | Seek to time in seconds | `void` |
-| `seekPercent(percent)` | Seek to percentage (0-100) | `void` |
-| `setVolume(level)` | Set volume (0-1) | `void` |
-| `getVolume()` | Get current volume | `number` |
-| `mute()` | Mute audio | `void` |
-| `unmute()` | Unmute audio | `void` |
-| `toggleMute()` | Toggle mute | `void` |
-| `setPlaybackRate(rate)` | Set playback speed | `void` |
-| `enterFullscreen()` | Enter fullscreen | `Promise<void>` |
-| `exitFullscreen()` | Exit fullscreen | `Promise<void>` |
-| `toggleFullscreen()` | Toggle fullscreen | `void` |
-| `enterPiP()` | Enter Picture-in-Picture | `Promise<void>` |
-| `exitPiP()` | Exit Picture-in-Picture | `Promise<void>` |
-| `togglePiP()` | Toggle PiP | `void` |
-| `cast()` | Start Chromecast | `void` |
-| `next()` | Play next in playlist | `void` |
-| `previous()` | Play previous in playlist | `void` |
-| `playAt(index)` | Play specific playlist item | `void` |
-| `getState()` | Get current player state | `PlayerState` |
-| `destroy()` | Destroy player instance | `void` |
-
-### Events
-
-```javascript
-player.on('play', () => { /* Video started */ });
-player.on('pause', () => { /* Video paused */ });
-player.on('ended', () => { /* Video ended */ });
-player.on('timeupdate', ({ currentTime, duration }) => { /* Time changed */ });
-player.on('progress', ({ buffered }) => { /* Buffer progress */ });
-player.on('volumechange', ({ volume, muted }) => { /* Volume changed */ });
-player.on('fullscreenchange', ({ isFullscreen }) => { /* Fullscreen toggled */ });
-player.on('error', (error) => { /* Error occurred */ });
-player.on('ready', () => { /* Player ready */ });
-player.on('trackchange', ({ index, item }) => { /* Playlist track changed */ });
+### With Subtitles
+
+```tsx
+<PlexVideoPlayer
+  src="https://example.com/video.mp4"
+  textTracks={[
+    { src: 'subtitles-en.vtt', kind: 'subtitles', srclang: 'en', label: 'English' },
+    { src: 'subtitles-es.vtt', kind: 'subtitles', srclang: 'es', label: 'Spanish' },
+    { src: 'subtitles-fr.vtt', kind: 'subtitles', srclang: 'fr', label: 'French' },
+  ]}
+/>
 ```
 
----
+### Custom Styling
 
-## 💰 VAST Ads
-
-Plex Player supports VAST 2.0, 3.0, and 4.0 video advertising standards.
-
-```javascript
-const player = new PlexPlayer({
-  container: '#player',
-  ads: {
-    enabled: true,
-    tagUrl: 'https://your-ad-server.com/vast.xml',
-    skipOffset: 5, // Allow skip after 5 seconds
-    timeout: 10000, // Ad request timeout in ms
-  },
-});
-
-// Listen to ad events
-player.on('adstart', (ad) => {
-  console.log('Ad started:', ad);
-});
-
-player.on('adend', () => {
-  console.log('Ad finished');
-});
-
-player.on('adskip', () => {
-  console.log('Ad skipped');
-});
-
-player.on('aderror', (error) => {
-  console.log('Ad error:', error);
-});
+```tsx
+<PlexVideoPlayer
+  src="https://example.com/video.mp4"
+  accentColor="#ff5722"
+  theme="dark"
+  className="my-custom-player"
+  style={{ borderRadius: '12px', overflow: 'hidden' }}
+/>
 ```
 
-### Ad Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `enabled` | `boolean` | `false` | Enable ads |
-| `tagUrl` | `string` | — | VAST tag URL |
-| `skipOffset` | `number` | `5` | Seconds before skip allowed |
-| `timeout` | `number` | `10000` | Request timeout in ms |
-| `maxRedirects` | `number` | `5` | Maximum VAST redirects |
+### Using Ref for Programmatic Control
 
----
+```tsx
+import { useRef } from 'react';
+import { PlexVideoPlayer, PlexVideoPlayerRef } from '@frameset/plex-player';
 
-## 📺 Chromecast
+function VideoPlayer() {
+  const playerRef = useRef<PlexVideoPlayerRef>(null);
 
-Chromecast is enabled by default. The cast button appears automatically when a Chromecast device is available on the network.
-
-```javascript
-const player = new PlexPlayer({
-  container: '#player',
-  cast: true, // Enable Chromecast (default)
-});
-
-// Manual cast
-player.cast();
+  const handlePlayPause = () => {
+    if (playerRef.current?.isPlaying()) {
+      playerRef.current.pause();
+    } else {
+      playerRef.current?.play();
+    }
+  };
 
-// Listen to cast events
-player.on('castconnected', ({ deviceName }) => {
-  console.log('Connected to:', deviceName);
-});
+  const handleSeek = () => {
+    playerRef.current?.seek(30); // Seek to 30 seconds
+  };
 
-player.on('castdisconnected', () => {
-  console.log('Disconnected from Chromecast');
-});
+  const handleFullscreen = () => {
+    playerRef.current?.toggleFullscreen();
+  };
 
-player.on('caststatechange', ({ state }) => {
-  console.log('Cast state:', state);
-});
+  return (
+    <>
+      <PlexVideoPlayer
+        ref={playerRef}
+        src="https://example.com/video.mp4"
+      />
+      <div>
+        <button onClick={handlePlayPause}>Play/Pause</button>
+        <button onClick={handleSeek}>Skip to 0:30</button>
+        <button onClick={handleFullscreen}>Fullscreen</button>
+      </div>
+    </>
+  );
+}
 ```
 
-### Requirements
+### Using the usePlayer Hook
+
+```tsx
+import { usePlayer } from '@frameset/plex-player';
+
+function CustomPlayer() {
+  const {
+    state,
+    videoRef,
+    containerRef,
+    play,
+    pause,
+    togglePlay,
+    seek,
+    setVolume,
+    toggleMute,
+    setPlaybackRate,
+    toggleFullscreen,
+    togglePip,
+  } = usePlayer({ autoPlay: false, muted: false });
 
-- Chromecast requires HTTPS in production
-- Works in Chrome and Edge browsers
-- Cast SDK is loaded automatically
-
----
-
-## 🎨 Theming
-
-Customize the player appearance using CSS variables:
-
-```css
-:root {
-  --plex-primary: #e5a00d;           /* Primary accent color */
-  --plex-bg: rgba(0, 0, 0, 0.8);     /* Background color */
-  --plex-text: #ffffff;               /* Text color */
-  --plex-progress-bg: #3a3a3a;        /* Progress bar background */
-  --plex-progress: #e5a00d;           /* Progress bar fill */
-  --plex-buffered: #6a6a6a;           /* Buffered area color */
-  --plex-control-size: 40px;          /* Control button size */
-  --plex-border-radius: 4px;          /* Border radius */
+  return (
+    <div ref={containerRef}>
+      <video ref={videoRef} src="https://example.com/video.mp4" />
+      <div>
+        <button onClick={togglePlay}>
+          {state.isPlaying ? 'Pause' : 'Play'}
+        </button>
+        <span>{state.currentTime} / {state.duration}</span>
+      </div>
+    </div>
+  );
 }
 ```
 
-Or via JavaScript:
-
-```javascript
-const player = new PlexPlayer({
-  container: '#player',
-  theme: {
-    primary: '#e5a00d',
-    background: 'rgba(0, 0, 0, 0.8)',
-    text: '#ffffff',
-    borderRadius: '8px',
-  },
-});
-```
-
----
+## ⚙️ Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string \| VideoSource[]` | required | Video source URL or array of sources |
+| `poster` | `string` | - | Poster image URL |
+| `autoPlay` | `boolean` | `false` | Auto-play video on load |
+| `muted` | `boolean` | `false` | Mute video on load |
+| `loop` | `boolean` | `false` | Loop video playback |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | Preload behavior |
+| `width` | `number \| string` | `'100%'` | Player width |
+| `height` | `number \| string` | `'auto'` | Player height |
+| `controls` | `boolean` | `true` | Show controls |
+| `pip` | `boolean` | `true` | Enable Picture-in-Picture |
+| `fullscreen` | `boolean` | `true` | Enable fullscreen |
+| `playbackSpeed` | `boolean` | `true` | Enable playback speed control |
+| `playbackSpeeds` | `number[]` | `[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]` | Available speeds |
+| `volume` | `boolean` | `true` | Enable volume control |
+| `initialVolume` | `number` | `1` | Initial volume (0-1) |
+| `progressBar` | `boolean` | `true` | Show progress bar |
+| `timeDisplay` | `boolean` | `true` | Show time display |
+| `qualitySelector` | `boolean` | `true` | Enable quality selector |
+| `textTracks` | `TextTrack[]` | - | Subtitle tracks |
+| `vast` | `VastConfig \| VastConfig[]` | - | VAST ads config |
+| `keyboard` | `boolean` | `true` | Enable keyboard shortcuts |
+| `hotkeys` | `HotkeyConfig` | - | Custom hotkey mappings |
+| `className` | `string` | - | Custom CSS class |
+| `style` | `CSSProperties` | - | Inline styles |
+| `accentColor` | `string` | - | Custom accent color |
+| `theme` | `'dark' \| 'light' \| 'auto'` | `'dark'` | Color theme |
+| `controlsTimeout` | `number` | `3000` | Controls hide timeout (ms) |
+| `doubleClickFullscreen` | `boolean` | `true` | Double-click for fullscreen |
+| `clickToPlay` | `boolean` | `true` | Click to play/pause |
+| `thumbnailPreview` | `ThumbnailConfig` | - | Thumbnail preview config |
+
+## 🎯 Event Handlers
+
+| Event | Parameters | Description |
+|-------|------------|-------------|
+| `onPlay` | - | Fired when playback starts |
+| `onPause` | - | Fired when playback pauses |
+| `onEnded` | - | Fired when video ends |
+| `onTimeUpdate` | `time: number` | Fired on time update |
+| `onProgress` | `buffered: number` | Fired on buffer progress |
+| `onVolumeChange` | `volume: number, muted: boolean` | Fired on volume change |
+| `onSeeking` | `time: number` | Fired when seeking |
+| `onSeeked` | `time: number` | Fired after seek completes |
+| `onRateChange` | `rate: number` | Fired on playback rate change |
+| `onQualityChange` | `quality: string` | Fired on quality change |
+| `onFullscreenChange` | `isFullscreen: boolean` | Fired on fullscreen toggle |
+| `onPipChange` | `isPip: boolean` | Fired on PiP toggle |
+| `onError` | `error: MediaError` | Fired on error |
+| `onReady` | - | Fired when player is ready |
+| `onAdStart` | `ad: VastAdInfo` | Fired when ad starts |
+| `onAdEnd` | - | Fired when ad ends |
+| `onAdSkip` | - | Fired when ad is skipped |
+| `onAdError` | `error: Error` | Fired on ad error |
 
 ## ⌨️ Keyboard Shortcuts
 
 | Key | Action |
 |-----|--------|
-| `Space` / `K` | Toggle play/pause |
-| `←` | Rewind 10 seconds |
-| `→` | Forward 10 seconds |
+| `Space` | Play/Pause |
+| `M` | Mute/Unmute |
+| `F` | Toggle Fullscreen |
+| `P` | Toggle Picture-in-Picture |
+| `←` | Seek backward 10s |
+| `→` | Seek forward 10s |
+| `Shift + ←` | Seek backward 30s |
+| `Shift + →` | Seek forward 30s |
 | `↑` | Volume up |
 | `↓` | Volume down |
-| `M` | Toggle mute |
-| `F` | Toggle fullscreen |
-| `P` | Toggle Picture-in-Picture |
-| `C` | Toggle captions |
-| `N` | Next track |
-| `Shift + N` | Previous track |
-| `0-9` | Seek to 0%-90% |
-| `Home` | Go to beginning |
-| `End` | Go to end |
-
----
-
-## 🌍 Localization (i18n)
-
-```javascript
-const player = new PlexPlayer({
-  container: '#player',
-  i18n: {
-    play: 'Play',
-    pause: 'Pause',
-    mute: 'Mute',
-    unmute: 'Unmute',
-    fullscreen: 'Fullscreen',
-    exitFullscreen: 'Exit Fullscreen',
-    pip: 'Picture-in-Picture',
-    cast: 'Cast',
-    settings: 'Settings',
-    speed: 'Speed',
-    quality: 'Quality',
-    subtitles: 'Subtitles',
-    off: 'Off',
-  },
-});
-```
-
----
 
-## 📋 Playlist
-
-```javascript
-const player = new PlexPlayer({
-  container: '#player',
-});
-
-// Load playlist
-player.loadPlaylist([
-  {
-    src: 'video1.mp4',
-    title: 'Episode 1',
-    poster: 'thumb1.jpg',
-    duration: 3600,
-  },
-  {
-    src: 'video2.mp4',
-    title: 'Episode 2',
-    poster: 'thumb2.jpg',
-    duration: 3540,
-  },
-]);
-
-// Navigation
-player.next();
-player.previous();
-player.playAt(2);
-```
+## 🎨 Theming
 
----
+### CSS Custom Properties
 
-## 📝 Subtitles
-
-```javascript
-const player = new PlexPlayer({
-  container: '#player',
-  subtitles: {
-    default: 'en',
-    tracks: [
-      { label: 'English', srclang: 'en', src: 'subs/en.vtt' },
-      { label: 'Spanish', srclang: 'es', src: 'subs/es.vtt' },
-      { label: 'French', srclang: 'fr', src: 'subs/fr.vtt' },
-    ],
-    style: {
-      fontSize: '20px',
-      color: '#ffffff',
-      background: 'rgba(0, 0, 0, 0.75)',
-    },
-  },
-});
+```css
+:root {
+  --plex-primary: #e50914;
+  --plex-secondary: #ffffff;
+  --plex-bg: rgba(0, 0, 0, 0.8);
+  --plex-control-bg: rgba(0, 0, 0, 0.7);
+  --plex-progress-bg: rgba(255, 255, 255, 0.3);
+  --plex-buffered-bg: rgba(255, 255, 255, 0.5);
+  --plex-hover: rgba(255, 255, 255, 0.1);
+  --plex-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  --plex-transition: all 0.2s ease;
+}
 ```
 
----
-
-## 📊 Browser Support
+### Custom Styling Example
 
-| Browser | Version |
-|---------|---------|
-| Chrome | 60+ |
-| Firefox | 55+ |
-| Safari | 11+ |
-| Edge | 79+ |
-| Opera | 47+ |
-| iOS Safari | 11+ |
-| Chrome Android | 60+ |
-
----
-
-## 🔧 Development
+```css
+.my-custom-player {
+  --plex-primary: #00bcd4;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
 
-```bash
-# Clone repository
-git clone https://github.com/frameset-studio/plex-player.git
-cd plex-player
+.my-custom-player .plex-video-player__btn:hover {
+  background-color: rgba(0, 188, 212, 0.2);
+}
+```
 
-# Install dependencies
-npm install
+## 📋 Types
 
-# Start development server
-npm run dev
+```typescript
+interface VideoSource {
+  src: string;
+  type?: string;
+  quality?: string;
+  label?: string;
+}
 
-# Build for production
-npm run build
+interface TextTrack {
+  src: string;
+  kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+  srclang: string;
+  label: string;
+  default?: boolean;
+}
 
-# Run tests
-npm test
+interface VastConfig {
+  url: string;
+  skipDelay?: number;
+  position?: 'preroll' | 'midroll' | 'postroll';
+  midrollTime?: number;
+}
 
-# Lint code
-npm run lint
+interface PlexVideoPlayerRef {
+  play: () => Promise<void>;
+  pause: () => void;
+  stop: () => void;
+  seek: (time: number) => void;
+  setVolume: (volume: number) => void;
+  mute: () => void;
+  unmute: () => void;
+  toggleMute: () => void;
+  enterFullscreen: () => Promise<void>;
+  exitFullscreen: () => Promise<void>;
+  toggleFullscreen: () => Promise<void>;
+  enterPip: () => Promise<void>;
+  exitPip: () => Promise<void>;
+  togglePip: () => Promise<void>;
+  setPlaybackRate: (rate: number) => void;
+  setQuality: (quality: string) => void;
+  getCurrentTime: () => number;
+  getDuration: () => number;
+  getVolume: () => number;
+  isMuted: () => boolean;
+  isPlaying: () => boolean;
+  isFullscreen: () => boolean;
+  isPip: () => boolean;
+  getVideoElement: () => HTMLVideoElement | null;
+}
 ```
 
----
+## 🌐 Browser Support
+
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
 
 ## 📄 License
 
-MIT © [FRAMESET Studio](https://frameset.dev)
+MIT © [FRAMESET STUDIO](https://frameset.dev)
 
 ---
 
 <p align="center">
-  <a href="https://frameset.dev">
-    <img src="https://frameset.dev/favicon.svg" alt="FRAMESET" width="120" />
-  </a>
-</p>
-
-<p align="center">
-  Made with ❤️ by <a href="https://frameset.dev">FRAMESET Studio</a>
-</p>
-
-<p align="center">
-  <a href="https://www.linkedin.com/company/framesetdev/">LinkedIn</a> •
-  <a href="https://github.com/deadseti">GitHub</a> •
-  <a href="https://frameset.dev">Website</a>
+  Made with ❤️ by <a href="https://frameset.dev">FRAMESET STUDIO</a>
 </p>