@therealtinhtute/baroiplayer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Baroi Team
+
+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,384 @@
+# BaroiPlayer
+
+> A modern, accessible, and performant media player component library for React 19
+
+## ✨ Features
+
+- 🎬 **Multiple Formats**: MP4, HLS/m3u8, MOV, and audio support
+- 🎨 **Beautiful Design**: Tailwind CSS v4 with OKLCH colors and modern CSS
+- ♿ **Accessible**: WCAG 2.1 AA compliant with keyboard navigation and screen reader support
+- ⚡ **Performance Optimized**: Bundle splitting, lazy loading, and size monitoring
+- 🔧 **Plugin System**: Extensible architecture with custom plugins
+- 🎯 **React 19 Ready**: Modern concurrent features, suspense boundaries, and optimistic updates
+- 📱 **Responsive**: Mobile-first design with touch gestures
+- 🌙 **Dark Mode**: Built-in dark mode support
+- 🎚️ **Rich Controls**: Volume, speed, quality, subtitles, and picture-in-picture
+- 🎪 **Multiple Variants**: Minimal, enhanced, and custom player styles
+
+## 📦 Installation
+
+```bash
+npm install @rp/baroiplayer
+# or
+bun add @rp/baroiplayer
+# or
+yarn add @rp/baroiplayer
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```jsx
+import { SimpleMinimalPlayer } from '@rp/baroiplayer';
+import '@rp/baroiplayer/globals.css';
+
+function App() {
+  return (
+    <div className="aspect-video max-w-4xl mx-auto">
+      <SimpleMinimalPlayer
+        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+        poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+        className="w-full h-full"
+      />
+    </div>
+  );
+}
+```
+
+### With Subtitles
+
+```jsx
+import { SimpleMinimalPlayer } from '@rp/baroiplayer';
+import '@rp/baroiplayer/globals.css';
+
+const subtitleTracks = [
+  {
+    id: "en",
+    label: "English",
+    language: "en",
+    src: "/subtitles/sample-en.vtt"
+  },
+  {
+    id: "es",
+    label: "Spanish",
+    language: "es",
+    src: "/subtitles/sample-es.vtt"
+  }
+];
+
+function App() {
+  return (
+    <SimpleMinimalPlayer
+      src="your-video.mp4"
+      subtitleTracks={subtitleTracks}
+      crossOrigin="anonymous"
+    />
+  );
+}
+```
+
+### HLS Streaming
+
+```jsx
+import { SimpleMinimalPlayer } from '@rp/baroiplayer';
+
+function App() {
+  return (
+    <SimpleMinimalPlayer
+      src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
+      config={{
+        file: {
+          attributes: {
+            crossOrigin: "anonymous"
+          }
+        }
+      }}
+    />
+  );
+}
+```
+
+## 🎨 Styling
+
+### Global Styles
+
+Import the global styles for the best out-of-box experience:
+
+```css
+@import '@rp/baroiplayer/globals.css';
+```
+
+### Minimal Player Theme
+
+For a sleek, minimal design:
+
+```css
+@import '@rp/baroiplayer/minimal-player.css';
+```
+
+### Custom Styling
+
+The player is built with Tailwind CSS v4 and CSS custom properties for easy customization:
+
+```css
+:root {
+  --media-primary: oklch(62% 0.25 240);
+  --media-bg: oklch(8% 0.02 240);
+  --media-text-primary: oklch(95% 0.005 240);
+}
+
+.player-container {
+  --media-primary: oklch(45% 0.20 30); /* Orange theme */
+}
+```
+
+## 🎛️ Components
+
+### SimpleMinimalPlayer
+
+The easiest way to get started with a beautiful, accessible player:
+
+```jsx
+<SimpleMinimalPlayer
+  src="video.mp4"
+  poster="poster.jpg"
+  autoPlay={false}
+  muted={false}
+  subtitleTracks={subtitleTracks}
+  crossOrigin="anonymous"
+/>
+```
+
+### MediaPlayer
+
+The main player component with full customization:
+
+```jsx
+import { MediaPlayer, MediaPlayerControls } from '@rp/baroiplayer';
+
+<MediaPlayer src="video.mp4">
+  <MediaPlayerControls />
+</MediaPlayer>
+```
+
+### AudioPlayer
+
+For audio-only content:
+
+```jsx
+import { AudioPlayer } from '@rp/baroiplayer';
+
+<AudioPlayer src="audio.mp3" />
+```
+
+## ⚙️ Props
+
+### Common Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | Required | Media source URL |
+| `poster` | `string` | - | Poster image for video |
+| `autoPlay` | `boolean` | `false` | Auto-play media |
+| `muted` | `boolean` | `false` | Start muted |
+| `loop` | `boolean` | `false` | Loop media |
+| `controls` | `boolean` | `true` | Show controls |
+| `subtitleTracks` | `array` | `[]` | Subtitle track objects |
+| `crossOrigin` | `string` | - | CORS setting |
+
+### Subtitle Tracks
+
+```typescript
+interface SubtitleTrack {
+  id: string;
+  label: string;
+  language: string;
+  src: string;
+  default?: boolean;
+}
+```
+
+## 🔧 Advanced Usage
+
+### Custom Controls
+
+```jsx
+import { MediaPlayer, useMediaPlayer } from '@rp/baroiplayer';
+
+function CustomControls() {
+  const { playing, togglePlay, seek, volume } = useMediaPlayer();
+
+  return (
+    <div className="flex items-center gap-4">
+      <button onClick={togglePlay}>
+        {playing ? 'Pause' : 'Play'}
+      </button>
+      <input
+        type="range"
+        min={0}
+        max={100}
+        value={volume * 100}
+        onChange={(e) => setVolume(e.target.value / 100)}
+      />
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <MediaPlayer src="video.mp4">
+      <CustomControls />
+    </MediaPlayer>
+  );
+}
+```
+
+### Plugins
+
+```jsx
+import { MediaPlayer, AnalyticsPlugin } from '@rp/baroiplayer';
+
+const analytics = new AnalyticsPlugin({
+  trackingId: 'your-tracking-id'
+});
+
+<MediaPlayer src="video.mp4" plugins={[analytics]} />
+```
+
+### Custom Themes
+
+```jsx
+import { SimpleMinimalPlayer } from '@rp/baroiplayer';
+
+<SimpleMinimalPlayer
+  src="video.mp4"
+  theme={{
+    primary: 'oklch(70% 0.15 30)', // Orange
+    bg: 'oklch(15% 0.01 30)',    // Dark orange background
+  }}
+/>
+```
+
+## 🎹 Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Space` | Play/Pause |
+| `k` | Play/Pause |
+| `f` | Toggle fullscreen |
+| `m` | Toggle mute |
+| `↑` | Volume up |
+| `↓` | Volume down |
+| `←` | Seek backward 10s |
+| `→` | Seek forward 10s |
+| `j` | Seek backward 10s |
+| `l` | Seek forward 10s |
+| `c` | Toggle captions/subtitles |
+| `?` | Show keyboard shortcuts |
+
+## 📱 Responsive Design
+
+The player is fully responsive and adapts to different screen sizes:
+
+- **Mobile**: < 640px - Compact controls with hidden time display
+- **Tablet**: 640px - 1024px - Standard controls
+- **Desktop**: > 1024px - Full controls with enhanced features
+
+## 🔧 Development
+
+### Project Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/baroiplayer.git
+cd baroiplayer
+
+# Install dependencies
+bun install
+
+# Start development
+bun run dev
+```
+
+### Available Scripts
+
+```bash
+# Development
+bun run dev              # Start development server
+bun run build            # Build for production
+bun run build:analyze   # Build with bundle analysis
+
+# Testing
+bun run test             # Run tests
+bun run test:watch       # Run tests in watch mode
+bun run test:coverage    # Run tests with coverage
+
+# Quality
+bun run lint             # Run linter
+bun run check-types      # Check TypeScript types
+bun run size-limit       # Check bundle size limits
+```
+
+### Building for Production
+
+```bash
+# Build the package
+bun run build
+
+# Run pre-publish checks
+bun run prepublishOnly
+
+# Publish to npm
+npm publish
+```
+
+## 🏗️ Architecture
+
+### Core Components
+
+- **MediaPlayer**: Main player component
+- **MediaPlayerControls**: Control panel component
+- **AudioPlayer**: Audio-specific player
+- **SimpleMinimalPlayer**: Easy-to-use minimal player
+
+### Features
+
+- **Core**: Event system, plugin architecture, performance optimization
+- **Accessibility**: Keyboard navigation, screen reader support, ARIA attributes
+- **Styling**: Tailwind CSS integration, design tokens, responsive design
+- **Media**: HLS support, subtitle handling, format detection
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+### Development Workflow
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests for new functionality
+5. Run the test suite
+6. Submit a pull request
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- [React Player](https://github.com/CookPete/react-player) for media playback
+- [Tailwind CSS](https://tailwindcss.com/) for styling
+- [Radix UI](https://www.radix-ui.com/) for accessible components
+- [Video.js](https://videojs.com/) for advanced media features
+
+## 📞 Support
+
+- 📚 [Documentation](https://github.com/yourusername/baroiplayer/wiki)
+- 🐛 [Issue Tracker](https://github.com/yourusername/baroiplayer/issues)
+- 💬 [Discussions](https://github.com/yourusername/baroiplayer/discussions)
+
+---
+
+Made with ❤️ by the Baroi Team

package/dist/context/media.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");const e=require("../context-DCJ_scmO.cjs");exports.MediaActionTypes=e.MediaActionTypes;exports.MediaContext=e.MediaContext;exports.MediaStoreContext=e.MediaStoreContext;exports.initialMediaState=e.initialMediaState;exports.useMediaContext=e.useMediaContext;exports.useMediaDispatch=e.useMediaDispatch;exports.useMediaEnhancements=e.useMediaEnhancements;exports.useMediaSelector=e.useMediaSelector;exports.useMediaStore=e.useMediaStore;exports.useOptimisticMediaSelector=e.useOptimisticMediaSelector;
+//# sourceMappingURL=media.js.map

package/dist/context/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/context/media.mjs

@@ -0,0 +1,15 @@
+import "react";
+import { M as s, g as t, h as o, k as M, u as d, a as n, i as c, b as r, c as u, e as p } from "../context-BMteAJDN.js";
+export {
+  s as MediaActionTypes,
+  t as MediaContext,
+  o as MediaStoreContext,
+  M as initialMediaState,
+  d as useMediaContext,
+  n as useMediaDispatch,
+  c as useMediaEnhancements,
+  r as useMediaSelector,
+  u as useMediaStore,
+  p as useOptimisticMediaSelector
+};
+//# sourceMappingURL=media.mjs.map

package/dist/context/media.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/context/store.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../context-DCJ_scmO.cjs");exports.createEnhancedMediaStore=e.createEnhancedMediaStore;
+//# sourceMappingURL=store.js.map

package/dist/context/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/context/store.mjs

@@ -0,0 +1,5 @@
+import { f as r } from "../context-BMteAJDN.js";
+export {
+  r as createEnhancedMediaStore
+};
+//# sourceMappingURL=store.mjs.map

package/dist/context/store.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}