player/examples/App.tsx

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