Some fixes

This commit is contained in:
hibna
2026-02-12 17:54:16 +03:00
parent f57ee77c56
commit 8a32c5c1b3
18 changed files with 997 additions and 135 deletions
+20 -18
View File
@@ -1,19 +1,19 @@
# 🎬 Modern Video Player
[![npm version](https://img.shields.io/npm/v/@alper/video-player.svg?style=flat-square)](https://www.npmjs.com/package/@alper/video-player)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@alper/video-player?style=flat-square)](https://bundlephobia.com/package/@alper/video-player)
[![npm version](https://img.shields.io/npm/v/@source/player.svg?style=flat-square)](https://www.npmjs.com/package/@source/player)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@source/player?style=flat-square)](https://bundlephobia.com/package/@source/player)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
**The smallest React video player with the most features.** Only **~15KB gzipped** with zero runtime dependencies!
**A compact, feature-rich React video player** with zero runtime dependencies.
A feature-rich, modern video player library built with React, TypeScript, and Vite. Designed for reusability across multiple projects.
## 🏆 Why Choose This Player?
| Feature | @alper/video-player | video.js | react-player | plyr |
| Feature | @source/player | video.js | react-player | plyr |
|---------|---------------------|----------|--------------|------|
| **Bundle Size (gzipped)** | **15KB** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
| **Bundle Size (gzipped)** | **~18KB JS + ~3.5KB CSS** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
| **Runtime Dependencies** | **0** ✅ | Many ❌ | Few ⚠️ | Few ⚠️ |
| **React Native** | **Yes** ✅ | Wrapper ⚠️ | **Yes** ✅ | Wrapper ⚠️ |
| **TypeScript Native** | **Yes** ✅ | Types ⚠️ | Partial ⚠️ | Types ⚠️ |
@@ -25,7 +25,7 @@ A feature-rich, modern video player library built with React, TypeScript, and Vi
### Key Advantages
- 📦 **97% smaller than video.js** - Only 15KB vs 500KB
- 📦 **Compact bundle** - Core player ships around ~18KB gzipped JS (+ ~3.5KB CSS)
-**Blazing fast** - Zero runtime dependencies means faster load times
- 🎯 **React-first** - Built specifically for React, not a wrapper
- 🔧 **Full TypeScript** - Complete type safety out of the box
@@ -105,7 +105,7 @@ npm run build:lib
npm link
# In your other project
npm link @alper/video-player
npm link @source/player
```
## 🚀 Usage
@@ -113,8 +113,8 @@ npm link @alper/video-player
### Basic Example
```tsx
import { VideoPlayer } from '@alper/video-player'
import '@alper/video-player/styles.css'
import { VideoPlayer } from '@source/player'
import '@source/player/styles.css'
function App() {
return (
@@ -205,7 +205,7 @@ function App() {
### Feature Detection & Polyfills
```tsx
import { features, initializePolyfills } from '@alper/video-player'
import { features, initializePolyfills } from '@source/player'
// Initialize polyfills manually (optional - auto-initialized on VideoPlayer mount)
initializePolyfills()
@@ -227,7 +227,7 @@ console.log('Has volume control:', features.hasVolumeControl())
### CORS Error Handling
```tsx
import { validateVideoURL, checkVideoCORS } from '@alper/video-player'
import { validateVideoURL, checkVideoCORS } from '@source/player'
// Validate URL before loading
const validation = validateVideoURL(videoUrl)
@@ -360,8 +360,10 @@ interface PlayerTheme {
## 📊 Bundle Size
- Core library: **~8KB** (gzipped)
- Core player JS bundle: **~18KB** (gzipped)
- Core player CSS bundle: **~3.5KB** (gzipped)
- HLS.js (optional, lazy-loaded): **~200KB** (only when using HLS streams)
- MPEGTS.js (optional, lazy-loaded): **~72KB** (gzipped, only for `.ts` streams)
- Zero runtime dependencies (React is peer dependency)
## 🔧 Technical Details
@@ -370,8 +372,8 @@ interface PlayerTheme {
- HTML5 Video API
- Fullscreen API
- Picture-in-Picture API
- Media Session API
- Fetch API (Range Requests)
- TextTrack API (subtitles)
- Touch Events API
- Keyboard Events API
@@ -408,10 +410,10 @@ interface PlayerTheme {
## 🚧 TODO / Future Enhancements
- [ ] Multiple audio track UI and switching
- [ ] Quality selector for HLS streams
- [ ] Playback speed menu
- [ ] Settings panel
- [x] Multiple audio track UI and switching
- [x] Quality selector for HLS streams
- [x] Playback speed menu
- [x] Settings panel
- [ ] Chapters/markers support
- [ ] Thumbnail preview on hover
- [ ] Playlist support
@@ -419,7 +421,7 @@ interface PlayerTheme {
- [ ] AirPlay support
- [ ] DASH streaming support
- [ ] Accessibility improvements (ARIA labels)
- [ ] Unit tests
- [x] Unit tests
- [ ] E2E tests
- [ ] Storybook documentation