strataplayer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StrataPlayer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,158 @@
+# StrataPlayer
+
+<div align="center">
+  <img src="public/logo.png" alt="StrataPlayer Logo" width="128" />
+  
+  <p align="center">
+    <strong>A robust, secure, and production-grade video player built for the modern web.</strong>
+  </p>
+  
+  <p align="center">
+    <a href="https://github.com/dev-AshishRanjan/StrataPlayer/blob/main/LICENSE">
+      <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License" />
+    </a>
+    <a href="https://react.dev">
+      <img src="https://img.shields.io/badge/react-19.0-blue" alt="React" />
+    </a>
+    <a href="https://www.typescriptlang.org/">
+      <img src="https://img.shields.io/badge/typescript-5.0-blue" alt="TypeScript" />
+    </a>
+  </p>
+</div>
+
+## Overview
+
+StrataPlayer is a highly customizable, high-performance HTML5 video player designed for React applications. It features a lightweight core with a plugin architecture, advanced subtitle management, robust error handling, and a sleek, themeable UI powered by Tailwind CSS.
+
+It supports HLS (HTTP Live Streaming) out of the box via `hls.js`, along with standard MP4/WebM formats, making it suitable for VOD, live streaming, and complex media applications.
+
+## ✨ Features
+
+### Core Playback
+
+- **Multi-Format Support:** Seamlessly plays HLS (`.m3u8`), MP4, WebM, and DASH (via plugin extension).
+- **Robust Error Handling:** Exponential backoff retry logic for network failures and stream interruptions.
+- **Adaptive Bitrate:** Automatic quality switching with manual override controls.
+- **Audio Engine:** Built-in Web Audio API integration for **Audio Boost** (up to 300% volume).
+
+### User Interface & Experience
+
+- **Fully Themeable:** Includes 4 built-in themes (Default, Pixel, Game, Hacker) and custom accent color support.
+- **Responsive Controls:** Mobile-friendly touch controls and gesture support (double tap to seek).
+- **Keyboard Shortcuts:** Full accessibility support with standard hotkeys (`Space`, `F`, `M`, Arrows).
+- **Picture-in-Picture:** Native PiP support for multitasking.
+- **Chromecast Support:** Built-in Google Cast integration.
+
+### Advanced Subtitles
+
+- **Custom Rendering:** High-performance canvas/DOM-based subtitle rendering.
+- **Full Customization:** Users can adjust font size, color, background opacity, blur, and offsets.
+- **Synchronization:** Manual subtitle offset adjustment to fix out-of-sync captions.
+- **Local Upload:** Support for drag-and-drop `.vtt` and `.srt` files.
+
+### Developer Experience
+
+- **React 19 Ready:** Built with the latest React patterns (Hooks, `useSyncExternalStore`).
+- **State Management:** Lightweight, external store (`NanoStore`) for high-performance updates without re-renders.
+- **Plugin System:** Easily extend functionality without bloating the core.
+- **TypeScript:** 100% type-safe.
+
+## 🚀 Getting Started
+
+### Installation
+
+```bash
+# Clone the repository
+git clone https://github.com/dev-AshishRanjan/StrataPlayer.git
+
+# Navigate to project directory
+cd StrataPlayer
+
+# Install dependencies
+npm install
+
+# Start the development server
+npm run dev
+```
+
+### Basic Usage
+
+```tsx
+import { StrataPlayer } from "./ui/StrataPlayer";
+
+const App = () => {
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      <StrataPlayer
+        src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
+        autoPlay={false}
+        theme="default"
+        themeColor="#6366f1"
+      />
+    </div>
+  );
+};
+```
+
+### Advanced Usage (Sources & Tracks)
+
+```tsx
+<StrataPlayer
+  sources={[
+    { name: "HLS Master", url: "https://example.com/master.m3u8", type: "hls" },
+    { name: "MP4 Fallback", url: "https://example.com/video.mp4", type: "mp4" },
+  ]}
+  poster="https://example.com/poster.jpg"
+  thumbnails="https://example.com/thumbnails.vtt"
+  textTracks={[
+    {
+      kind: "subtitles",
+      label: "English",
+      src: "/subs/en.vtt",
+      srcLang: "en",
+      default: true,
+    },
+  ]}
+/>
+```
+
+## ⌨️ Keyboard Shortcuts
+
+| Key           | Action            |
+| ------------- | ----------------- |
+| `Space` / `K` | Play / Pause      |
+| `F`           | Toggle Fullscreen |
+| `M`           | Toggle Mute       |
+| `Arrow Right` | Seek Forward 5s   |
+| `Arrow Left`  | Seek Backward 5s  |
+| `Arrow Up`    | Increase Volume   |
+| `Arrow Down`  | Decrease Volume   |
+
+## 🎨 Themes
+
+StrataPlayer comes with preset themes that can be applied via props or changed at runtime by the user:
+
+- **Default:** Modern, clean, and professional (Inter font).
+- **Pixel:** Retro gaming aesthetic (Press Start 2P font).
+- **Game:** Cinematic RPG style (Cinzel font).
+- **Hacker:** Terminal/Cyberpunk aesthetic (JetBrains Mono font).
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1.  Fork the project
+2.  Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3.  Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4.  Push to the branch (`git push origin feature/AmazingFeature`)
+5.  Open a Pull Request
+
+## 📄 License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+---
+
+<div align="center">
+  Built with ❤️ by <a href="https://github.com/dev-AshishRanjan">Ashish Ranjan</a>
+</div>

package/dist/lib.d.ts

@@ -0,0 +1,229 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare class EventBus {
+    private events;
+    constructor();
+    on<T>(event: string, callback: EventCallback<T>): () => void;
+    off<T>(event: string, callback: EventCallback<T>): void;
+    emit<T>(event: string, data?: T): void;
+    destroy(): void;
+}
+
+declare type EventCallback<T = any> = (data: T) => void;
+
+export declare class HlsPlugin implements IPlugin {
+    name: string;
+    private hls;
+    private core;
+    init(core: StrataCore): void;
+    private loadHls;
+    destroy(): void;
+}
+
+declare interface IPlugin {
+    name: string;
+    init(core: StrataCore): void;
+    destroy?(): void;
+}
+
+declare type Listener<T> = (state: T, prevState: T) => void;
+
+export declare const mountStrataPlayer: (container: HTMLElement, props: any) => StrataPlayerInstance;
+
+declare class NanoStore<T> {
+    private state;
+    private listeners;
+    constructor(initialState: T);
+    get(): T;
+    setState(partial: Partial<T> | ((prev: T) => Partial<T>)): void;
+    subscribe(listener: Listener<T>): () => void;
+    destroy(): void;
+}
+
+declare interface Notification_2 {
+    id: string;
+    message: string;
+    type: 'info' | 'success' | 'warning' | 'error' | 'loading';
+    duration?: number;
+    progress?: number;
+}
+
+export declare interface PlayerSource {
+    url: string;
+    type?: 'hls' | 'mp4' | 'webm' | 'dash' | string;
+    name?: string;
+}
+
+export declare interface PlayerState {
+    isPlaying: boolean;
+    isBuffering: boolean;
+    currentTime: number;
+    duration: number;
+    buffered: {
+        start: number;
+        end: number;
+    }[];
+    volume: number;
+    isMuted: boolean;
+    audioGain: number;
+    playbackRate: number;
+    qualityLevels: {
+        height: number;
+        bitrate: number;
+        index: number;
+    }[];
+    currentQuality: number;
+    audioTracks: {
+        label: string;
+        language: string;
+        index: number;
+    }[];
+    currentAudioTrack: number;
+    error: string | null;
+    isFullscreen: boolean;
+    isPip: boolean;
+    subtitleTracks: {
+        label: string;
+        language: string;
+        index: number;
+    }[];
+    currentSubtitle: number;
+    subtitleOffset: number;
+    subtitleSettings: SubtitleSettings;
+    activeCues: string[];
+    viewMode: 'normal' | 'theater' | 'pip';
+    notifications: Notification_2[];
+    iconSize: 'small' | 'medium' | 'large';
+    themeColor: string;
+    theme: PlayerTheme;
+    sources: PlayerSource[];
+    currentSourceIndex: number;
+}
+
+declare type PlayerTheme = 'default' | 'pixel' | 'game' | 'hacker';
+
+export declare interface StrataConfig {
+    volume?: number;
+    muted?: boolean;
+    playbackRate?: number;
+    audioGain?: number;
+    theme?: PlayerTheme;
+    themeColor?: string;
+    iconSize?: 'small' | 'medium' | 'large';
+    subtitleSettings?: Partial<SubtitleSettings>;
+    disablePersistence?: boolean;
+}
+
+export declare class StrataCore {
+    video: HTMLVideoElement;
+    container: HTMLElement | null;
+    events: EventBus;
+    store: NanoStore<PlayerState>;
+    private plugins;
+    private audioEngine;
+    private config;
+    private retryCount;
+    private maxRetries;
+    private retryTimer;
+    private currentSource;
+    private currentSrc;
+    private currentTracks;
+    private castInitialized;
+    private boundCueChange;
+    private boundFullscreenChange;
+    constructor(config?: StrataConfig, videoElement?: HTMLVideoElement);
+    private initVideoListeners;
+    triggerError(message: string, isFatal?: boolean): void;
+    private handleError;
+    private updateBuffer;
+    private updateSubtitles;
+    fetchWithRetry(url: string, retries?: number): Promise<Response>;
+    attach(container: HTMLElement): void;
+    use(plugin: IPlugin): void;
+    setSources(sources: PlayerSource[], tracks?: TextTrackConfig[]): void;
+    switchSource(index: number): void;
+    load(source: PlayerSource | string, tracks?: TextTrackConfig[], isRetry?: boolean): void;
+    addTextTrack(file: File, label: string): void;
+    private addTextTrackInternal;
+    play(): Promise<void>;
+    pause(): void;
+    togglePlay(): void;
+    seek(time: number): void;
+    skip(seconds: number): void;
+    setVolume(vol: number): void;
+    toggleMute(): void;
+    setAudioGain(gain: number): void;
+    setQuality(index: number): void;
+    setAudioTrack(index: number): void;
+    toggleFullscreen(): void;
+    togglePip(): void;
+    private initCast;
+    requestCast(): void;
+    private loadMediaToCast;
+    private handleCueChange;
+    setSubtitle(index: number): void;
+    updateSubtitleSettings(settings: Partial<SubtitleSettings>): void;
+    resetSubtitleSettings(): void;
+    setSubtitleOffset(offset: number): void;
+    download(): Promise<void>;
+    notify(n: Omit<Notification_2, 'id'> & {
+        id?: string;
+    }): string;
+    removeNotification(id: string): void;
+    setAppearance(settings: {
+        iconSize?: 'small' | 'medium' | 'large';
+        themeColor?: string;
+        theme?: PlayerTheme;
+    }): void;
+    destroy(): void;
+}
+
+export declare const StrataPlayer: (props: StrataPlayerProps) => JSX.Element;
+
+export declare interface StrataPlayerInstance {
+    unmount: () => void;
+    update: (props: any) => void;
+}
+
+declare interface StrataPlayerProps extends StrataConfig {
+    src?: string;
+    sources?: PlayerSource[];
+    poster?: string;
+    autoPlay?: boolean;
+    thumbnails?: string;
+    textTracks?: TextTrackConfig[];
+    plugins?: IPlugin[];
+}
+
+declare interface SubtitleSettings {
+    useNative: boolean;
+    fixCapitalization: boolean;
+    backgroundOpacity: number;
+    backgroundBlur: boolean;
+    backgroundBlurAmount: number;
+    textSize: number;
+    textStyle: 'none' | 'outline' | 'raised' | 'depressed' | 'shadow';
+    isBold: boolean;
+    textColor: string;
+    verticalOffset: number;
+}
+
+export declare interface TextTrackConfig {
+    kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+    label: string;
+    src: string;
+    srcLang: string;
+    default?: boolean;
+}
+
+export { }
+
+
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'google-cast-launcher': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+