A Next.js application that allows you to watch up to 9 video streams simultaneously in a 3x3 grid layout. Perfect for watching multiple sports games, live streams, or videos at the same time.
Watch up to 4 video streams simultaneously in a 2x2 grid layout on desktop
Mobile-optimized interface for watching multiple sports streams on the go
- Grid Layout: Watch up to 9 videos simultaneously in equal quadrants
- Multi-Source Support:
- YouTube videos
- Twitch streams
- Direct video URLs (MP4, WebM, OGG)
- HLS streams (.m3u8) for sports streaming sites
- Other video sources supported by react-player
- Click-to-Focus: Click on any quadrant to focus it (green border indicator)
- Expand Mode: Expand any video to fill its quadrant completely
- Persistent State: Your video URLs are saved in localStorage and restored on page reload
- Dark Theme: Optimized for extended viewing sessions
- ESC Key Support: Press ESC to exit expand mode
- Node.js 18.20.8 or higher (20.9.0+ recommended)
- npm or yarn
- Clone the repository
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
- Select a Quadrant: Click on one of the numbered buttons (1-9) at the top to select which quadrant you want to load a video into
- Paste URL: Paste your video URL in the input field
- Load: Click the "Load" button to start playing the video
- Clear: Click "Clear" to remove a video from the selected quadrant
- YouTube:
https://www.youtube.com/watch?v=VIDEO_ID - Twitch:
https://www.twitch.tv/CHANNEL_NAME - Direct Video:
https://example.com/video.mp4 - HLS Stream:
https://example.com/stream.m3u8
- Focus: Click on any quadrant to focus it (shows green border)
- Expand: Click the "⛶ Expand" button on a focused video to maximize it within its quadrant
- Normal View: Click "◱ Normal" or press ESC to return to normal view
- Quadrant Selection: Use the numbered buttons (1-9) to select which quadrant to modify
- Netflix: Netflix content cannot be embedded due to DRM restrictions
- CORS: Some streaming sites may have CORS restrictions that prevent embedding
- Fullscreen: The expand feature maximizes videos within their quadrant, not the entire screen (this is by design)
- Audio: All videos play their own audio - you may want to mute some streams
- Next.js 16: React framework with App Router
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first styling
- react-player: Universal video player component
- hls.js: HLS stream support
The app currently works best on desktop browsers. Future updates will include:
- PWA support for "Add to Home Screen" on iOS
- Touch gesture controls for mobile
- iOS-specific video player handling
- Orientation lock support
- Responsive grid for smaller screens
streamatrix.live/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Main page component
│ └── globals.css # Global styles
├── components/
│ ├── VideoGrid.tsx # 2x2 grid container with state management
│ ├── VideoPlayer.tsx # Individual video player component
│ └── VideoInput.tsx # URL input and quadrant selector
└── package.json
- VideoGrid: Manages the overall grid layout, state for 9 video slots, focus state, and localStorage persistence
- VideoPlayer: Handles individual video playback with multi-source support, error handling, and expand functionality
- VideoInput: Provides URL input, quadrant selection, and load/clear actions
MIT
Contributions are welcome! Please feel free to submit a Pull Request.