Initial commit: modern React video player library

Add all source files for a feature-rich, reusable video player built with React, TypeScript, and Vite. Includes core components, context, hooks, utilities, styles, demo app, and configuration files.
2025-10-29 07:49:06 +03:00
parent d68df70124
commit b57b24d051
47 changed files with 4414 additions and 0 deletions
@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { VideoPlayer } from '../src/components/VideoPlayer'
+import type { SubtitleTrack } from '../src/types'
+import './App.css'
+
+function App() {
+  const [videoUrl, setVideoUrl] = useState('')
+  const [useDemo, setUseDemo] = useState(true)
+
+  // Demo video URLs (you can replace with your own)
+  const demoVideoUrl = '/Stormy Weather_98515ce9/master.m3u8'
+  const demoPoster = undefined
+
+  const demoSubtitles: SubtitleTrack[] = [
+    // Add your subtitle URLs here
+  ]
+
+  const currentVideoUrl = useDemo ? demoVideoUrl : videoUrl
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>🎬 Modern Video Player</h1>
+        <p>A feature-rich, modern video player built with React</p>
+      </header>
+
+      <main className="app-main">
+        <div className="video-section">
+          <div className="player-wrapper">
+            {currentVideoUrl ? (
+              <VideoPlayer
+                src={currentVideoUrl}
+                poster={useDemo ? demoPoster : undefined}
+                subtitles={demoSubtitles}
+                keyboardShortcuts={true}
+                pictureInPicture={true}
+                theme={{
+                  primaryColor: '#ef4444',
+                  accentColor: '#dc2626',
+                }}
+                onPlay={() => console.log('Playing')}
+                onPause={() => console.log('Paused')}
+                onTimeUpdate={(time) => console.log('Time:', time)}
+              />
+            ) : (
+              <div className="no-video">
+                <p>Enter a video URL or use the demo video</p>
+              </div>
+            )}
+          </div>
+
+          <div className="controls-section">
+            <div className="url-input">
+              <input
+                type="text"
+                placeholder="Enter video URL (MP4, HLS)"
+                value={videoUrl}
+                onChange={(e) => setVideoUrl(e.target.value)}
+                disabled={useDemo}
+              />
+              <button
+                onClick={() => setUseDemo(!useDemo)}
+                className={useDemo ? 'active' : ''}
+              >
+                {useDemo ? 'Using Demo' : 'Use Demo'}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="features-section">
+          <h2>Features</h2>
+          <div className="features-grid">
+            <div className="feature">
+              <h3>⌨️ Keyboard Shortcuts</h3>
+              <ul>
+                <li><kbd>Space</kbd> or <kbd>K</kbd> - Play/Pause</li>
+                <li><kbd>←</kbd> / <kbd>→</kbd> - Seek 5s</li>
+                <li><kbd>J</kbd> / <kbd>L</kbd> - Seek 10s</li>
+                <li><kbd>↑</kbd> / <kbd>↓</kbd> - Volume</li>
+                <li><kbd>M</kbd> - Mute/Unmute</li>
+                <li><kbd>F</kbd> - Fullscreen</li>
+                <li><kbd>P</kbd> - Picture-in-Picture</li>
+                <li><kbd>0-9</kbd> - Jump to %</li>
+              </ul>
+            </div>
+
+            <div className="feature">
+              <h3>📱 Touch Gestures</h3>
+              <ul>
+                <li>Tap - Play/Pause</li>
+                <li>Double tap left - Rewind 10s</li>
+                <li>Double tap right - Forward 10s</li>
+                <li>Swipe left/right - Seek</li>
+                <li>Swipe up/down - Volume</li>
+              </ul>
+            </div>
+
+            <div className="feature">
+              <h3>🎨 Modern UI</h3>
+              <ul>
+                <li>Clean, minimalist design</li>
+                <li>Smooth animations</li>
+                <li>Custom red theme</li>
+                <li>Auto-hiding controls</li>
+                <li>Responsive layout</li>
+              </ul>
+            </div>
+
+            <div className="feature">
+              <h3>🚀 Advanced Features</h3>
+              <ul>
+                <li>HLS streaming support</li>
+                <li>HTTP Range Request (MP4)</li>
+                <li>Subtitles (VTT, SRT)</li>
+                <li>Multiple audio tracks</li>
+                <li>Playback speed control</li>
+                <li>Quality selector</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer className="app-footer">
+        <p>Built with React, TypeScript, and Vite</p>
+        <p>Zero runtime dependencies • ~8KB gzipped</p>
+      </footer>
+    </div>
+  )
+}
+
+export default App