Skip to content

Jonnysol/StreamGrid

Repository files navigation

🎥 GridStream

A Jonny.sh Project - The Dynamic m3u8 Video Grid Streamer

GridStream Illustration

License: MIT TypeScript React Electron Tailwind CSS Vite

Visit Website · Report Bug · Request Feature


🚀 Overview

GridStream is a high-performance, infinite-canvas media player It is built for power users who need to monitor multiple live streams simultaneously. Whether you're watching sports, monitoring security feeds, or tracking multiple broadcasts, GridStream adapts to your workflow.

Unlike static grid players, GridStream features a topology-aware layout engine that lets you resize, drag, and organize streams on an infinite panning canvas.

✨ Features

🎛 Dynamic Topology

The grid isn't just a list. It's a living canvas.

  • Infinite Canvas: Pan around by dragging the background.
  • Resizable Cells: Drag the corner of any video to expand it across the grid (1x1, 2x2, 4x3, etc).
  • Auto-Flow: Streams automatically arrange themselves to fill gaps.

📹 Advanced Playback

Built for modern streaming protocols.

  • Native HLS Support: Plays .m3u8 playlists and live streams instantly.
  • Smart Parsing: Detects stream URLs hidden inside complex or obfuscated links.
  • Live Recording: One-click 3-minute clip recording saved locally.

💾 Session History

Never lose a stream link again.

  • History Gallery: Sidebar retains your recent streams.
  • Live Previews: Hover over a history item to see a silent live preview before adding it.
  • Session Restore: Crash? Closed by accident? One click restores your entire layout.

🎨 UX & Controls

Designed for speed and usability.

  • Audio Focus: Click any video to unmute it and auto-mute others.
  • Global Shortcuts: Ctrl/Cmd + N to add streams instantly.
  • Fullscreen: Double-click any cell to maximize.

📸 Live Preview

GridStream Hero GridStream Demo

🛠 Installation

Prerequisites

  • Node.js (v16+)
  • npm or yarn

Local Development

  1. Clone the Repository

    git clone https://github.com/Jonnysol/StreamGrid.git
    cd StreamGrid
  2. Install Dependencies

    npm install
  3. Run Development Build

    npm run dev:electron

Building for Production

To create a standalone executable for your OS (Windows .exe, Mac .dmg, Linux .AppImage):

npm run dist

The output file will be located in the dist/ directory.

🎮 Controls

Action Input
Add Stream Ctrl + N (Win) / Cmd + N (Mac)
Pan Canvas Click & Drag Background
Resize Video Drag Bottom-Right Corner
Fullscreen Double-Click Video
Mute/Unmute Click Video
Record Clip Click Icon (Records 3 mins)

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.


Handcrafted by Jonny Sol

About

Infinite-canvas video grid for monitoring multiple live streams and m3u8 feeds.

Topics

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors