A random idea that turned into an Electron MVP for a multi-viewer and sync controller desktop app. Built primarily to play multiple videos simultaneously and synchronize their playback, while also letting you arrange them in a flexible grid layout.
Might try integrating TikTok and Instagram API in the future to fetch videos and play them in the grid. For the people who loves watching reels for 2 hours (like me) and forgot about whatever they're planning to do.
Also planning to rewrite this using Tauri, since it's more lightweight and efficient than Electron.
- Multi-Media Grid: Load multiple videos, audio files, and even images. Drag them around and resize from any corner.
- Master Sync Controller: A single master player bar at the bottom to play, pause, and scrub through the timeline of all loaded videos at once.
- Per-Media Controls: Every individual media card also has its own native controls for tweaking volume, seeking separately, or entering full screen.
- Audio Extraction: Built-in ability to quickly extract MP3 audio streams from loaded videos, powered by FFmpeg. Just because, i need it i guess.
- Dark UI: Sleek, minimal dark mode interface with native dark titlebars.
- Electron (Desktop environment)
- Vite (Dev server and bundler)
- React & TypeScript (UI)
- Zustand (State management)
- react-grid-layout (Draggable & resizable cards)
- fluent-ffmpeg (Local audio extraction)
This project uses a standard Electron + Vite setup.
- Clone the repository
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Build the application for production:
npm run build
This was just a quick initial build, prioritizing core layout and sync functionality (using standard HTML5 video elements for easy MVP testing). Future updates might handle tighter sync bounds or explicit performance optimizations if needed.
MIT License