Adiciona layout mobile responsivo e ícones PWA

---

- Adicionado FABs flutuantes (Refresh e Add) no canto inferior direito para telas abaixo de 640px;
- Ocultados botões de Refresh e Add do header no mobile (hidden sm:flex);
- Cards passam a ocupar largura total no mobile (sm:max-w-[...] com prefixo responsivo em page.tsx e StreamCard.tsx);
- Adicionado overflow-x: hidden no body para eliminar scroll horizontal no mobile;
- Seletor de tamanho de card ocultado no popup de Settings no mobile (hidden sm:flex);
- Adicionados ícones apple-touch-icon.png e apple-touch-icon-dark.png em public/ para instalação como PWA;
- Registrados os ícones no metadata do layout com suporte a light/dark via media query;
- Corrigido estilo do toggle de GPU no StreamForm para transição mais consistente;
- Reduzido shm_size de 2gb para 1gb no exemplo do compose no CHANGELOG.md;
- Atualizada seção de screenshots no README para incluir dashboard-config.png em layout de 3 colunas;

---
This commit is contained in:
2026-04-28 00:48:42 -03:00
parent 4918fa091e
commit 760e71e862
13 changed files with 62 additions and 31 deletions
+4 -2
View File
@@ -10,8 +10,9 @@ Turn any web page into an RTMP/HLS stream. Chromium renders the page, ffmpeg cap
![Dashboard](./screenshots/dashboard.png)
<p align="center">
<img src="./screenshots/stream-config.png" alt="Stream Config" width="49%" />
<img src="./screenshots/login.png" alt="Login Page" width="49%" />
<img src="./screenshots/dashboard-config.png" alt="Dashboard Config" width="32.5%" />
<img src="./screenshots/stream-config.png" alt="Stream Config" width="32.5%" />
<img src="./screenshots/login.png" alt="Login Page" width="32.5" />
</p>
## How it works
@@ -43,6 +44,7 @@ All processes are managed by Supervisord. The web UI is a Next.js app that contr
- **Open in new tab** — global toggle in Settings to open any button in a new tab instead of navigating in place; saved in the browser
- **Chromium auto-reload** — per-stream toggle to reload the Chromium page on a configurable interval via Chrome DevTools Protocol; configured from the card menu and persisted on the server
- **Player client-side auto-reload** — global toggle in Settings to reload the HLS player itself on a configurable interval (in minutes)
- **Mobile-friendly UI** — responsive layout for phones (< 640 px): Add and Refresh become floating action buttons in the bottom-right corner, cards fill the screen width automatically, no horizontal scroll; installable as a PWA with separate light/dark home-screen icons
## Platform Support