LiveGrid logo
LiveGridIDEA & DESIGN BY MONTHER ALEISA
0
πŸ“Ί Channels
β–¦ LiveGrid β€” Guide, Shortcuts & Install

IDEA & DESIGN BY MONTHER ALEISA

LiveGrid is a single‑file live‑TV video wall β€” watch many streams at once. Works offline for the app itself; streams need internet.

✨ Features at a glance

  • Multi‑feed grid β€” 1–4 columns.
  • Formats: M3U8, M3U, YouTube, MP4, WebM.
  • Channels drawer β€” tap the left tab or swipe from the edge.
  • Per‑feed: Play/Pause Β· Refresh Β· Audio Β· PiP Β· Full‑feed Β· Quality.
  • Anti‑freeze engine, All feeds PiP, light/dark theme, live counter.
  • Save / Import / Export JSON, ✎ edit any channel link.
  • Installable app (LG icon) on Windows, macOS, iPhone/iPad.

πŸ“Έ Step‑by‑step (with visuals)

β–¦ LiveGrid CHANNELS
1 Β· Open Channels β€” tap the cyan πŸ“Ί CHANNELS tab, or swipe right from the very left edge (touch). You can also press C.
πŸ“Ί Channels πŸ” Search… Al Jazeera Arabic GREAT! movies BBC News
2 Β· Add channels β€” tap a channel name to drop it into the grid. Use πŸ” Search or βž• All. The drawer auto‑closes after a few idle seconds.
οΌ‹ Add feed https://…/stream.m3u8 Add to grid
3 Β· Add your own link β€” tap οΌ‹ Add feed (or press A), paste any M3U8 / YouTube / MP4 URL, then Add to grid.
⧉ Pause Β· Refresh Β· Audio Β· ⧉ PiP Β· Full feed Β· Quality
4 Β· Per‑feed controls β€” hover/tap a tile for Pause, Refresh, Audio, ⧉ PiP, Full feed and Quality (set Low for weak internet).

πŸ“Ί Channels drawer β€” swipe & click

  • Open: tap the left πŸ“Ί CHANNELS tab Β· swipe right from the left edge (touch) Β· press C Β· or the top‑bar πŸ“Ί Channels button.
  • Use: tap a channel name to add Β· πŸ” Search (or /) Β· βž• All Β· ✎ edit a link.
  • Close: tap βœ• Β· tap outside Β· press C again Β· press Esc Β· or let it auto‑close when idle.

⏱️ Auto‑close timeout β€” customise

The drawer fades shut after 4 seconds of no activity; any move/tap/scroll/search resets it. Edit these settings near the top of the <script> (Drawer section):

  • DRAWER_AUTOCLOSE_MS = 4000 β€” idle ms before closing. Use 6000 for 6s, or 0 to disable auto‑close.
  • EDGE_SWIPE_PX = 28 β€” edge zone width for the swipe.
  • SWIPE_MIN_DX = 45 / SWIPE_MAX_DY = 40 β€” swipe distance / vertical tolerance.

πŸ–₯️ Multi‑screen & orientation

  • Portrait & landscape, rotates live and re‑flows automatically.
  • Safe areas (notch, Dynamic Island, rounded corners, home bar) respected via dvh + insets.
  • Wide screens: drawer pushes the grid aside; phones: it overlays.
  • Landscape phones: the tab moves to the bottom‑left to stay reachable.
  • 1–4 columns (top bar or keys 1–4); caps at 2 on narrow phones.

⌨️ Keyboard shortcuts

AAdd feedCOpen / close Channels/SearchFFull‑screen gridPAll feeds PiPTThemeGGuideSSave1… 4 columnsEscClose / exit

πŸš€ Install as an app (one file)

πŸͺŸ Windows

  1. Save as index.html (Ctrl+S).
  2. Put Start-LiveGrid.bat beside it, double‑click.
  3. Install: Edge/Chrome address‑bar Install βŠ•.

🍎 macOS β€” M1 & Intel

  1. Save as index.html; put Start-LiveGrid.command beside it.
  2. First run: right‑click β†’ Open β†’ Open.
  3. Opens localhost:8080 β†’ Install βŠ• in Chrome/Edge, or Safari File β†’ Add to Dock.

πŸ“± iPhone / iPad

  1. Open in Safari. Tap Share β†’ Add to Home Screen.
  2. HLS plays natively; feeds start muted β€” tap πŸ”Š.
Your grid is ready
Tap the πŸ“Ί CHANNELS tab (or press C), or A to add a link.
Works on Windows, macOS, iPhone/iPad & offline browsers. Streams require internet.
0