hibna
134 lines
4.3 KiB
TypeScript
134 lines
4.3 KiB
TypeScript
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_c7e908aa/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
|