StreamX - Mobile-First Motion Video Player

A mobile-first custom video player inspired by the YouTube mobile experience, built with React 19, TypeScript, Motion, and Tailwind CSS.

StreamX focuses on smooth playback, gesture-driven UX, and high-performance rendering across mobile and desktop.

Live Demo: [Add your deployed URL]

✨ Key Features

🏠 Home Feed

• Category-grouped scrollable video feed
• Rich video cards (thumbnail, title, duration, category badge)
• Smooth list ↔ player transitions
• IntersectionObserver-based incremental loading
• Fully responsive grid (mobile → desktop)

▶️ Full-Page Player

• Auto-play on open
• Custom controls (Play/Pause, ±10s, seek bar, volume)
• Seekable progress bar with buffered indicator
• Current time / total duration
• Keyboard shortcuts support
• Fullscreen API support
• Mobile + desktop responsive behavior

Streaming support:

• MP4 via native <video>
• HLS via hls.js fallback

🔄 In-Player Related Videos

• Swipe/scroll to reveal related videos
• Auto-filtered by category
• Instant switch with autoplay
• Virtualized list for performance
• Smooth animated panel

📱 Drag-to-Minimize (Picture-in-App)

• Drag down to minimize player
• Docked bottom mini-player
• Persistent playback while browsing
• Tap mini-player to restore
• Mini-player controls (Play/Pause, PiP, Maximize, Close)

🚀 Bonus Enhancements

• Auto-play next with 2s countdown + cancel
• Browser Picture-in-Picture (HTML5 video)
• Visual feedback for ±10s skips
• Hardware-accelerated 60fps animations
• First-use gesture hints (localStorage)

🧠 Assignment Coverage

All core requirements from the assignment are implemented:

• ✅ Home Page - Video Feed
• ✅ Full-Page Video Player
• ✅ In-Player Video List
• ✅ Drag-to-Minimize Player
• ✅ HLS support (bonus)
• ✅ Virtualization / incremental loading (bonus)
• ✅ PiP support (HTML5 video)

⚠️ Known Limitations (YouTube Integration)

These are platform constraints, not implementation gaps:

1. Buffered range parity
   YouTube IFrame API does not expose native buffered ranges like <video>.

2. Seek preview thumbnails
   Not available for YouTube iframe playback.

3. Browser PiP
   requestPictureInPicture() is only supported for HTML5 video.

4. Duration resolution
   YouTube durations are fetched lazily and cached.
   First render may briefly show cards without duration.

🏗 Architecture

Feature-based modular structure:

src/
├── app/          # App shell, entry, global styles
├── pages/        # Route-level components
├── features/     # Feed + Player modules
└── shared/       # Types, utils, data

Data flow philosophy:

• Player shell orchestrates state
• Feature modules remain isolated
• Shared layer is framework-agnostic

🛠 Tech Stack

• React 19 + Vite 7
• TypeScript (strict)
• Tailwind CSS v4
• Motion v12
• hls.js
• clsx + tailwind-merge

🚀 Run Locally

npm install
npm run dev

Open http://localhost:5173

📦 Build

npm run build
npm run preview

Production output → dist/

📱 Responsive Behavior

Device	Layout
Mobile	Single-column feed, touch gestures
Tablet	2-column feed
Desktop	3-column feed, hover enhancements

⌨ Keyboard Shortcuts

Key	Action
Space	Play / Pause
←	Skip back 10s
→	Skip forward 10s

📝 License

MIT