{"id":50648471,"url":"https://github.com/he4rt/streaming-overlays","last_synced_at":"2026-06-07T15:02:20.470Z","repository":{"id":354273987,"uuid":"1221951123","full_name":"he4rt/streaming-overlays","owner":"he4rt","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-06T13:48:44.000Z","size":2494,"stargazers_count":18,"open_issues_count":0,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-06T15:43:53.173Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/he4rt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-26T22:12:29.000Z","updated_at":"2026-05-02T17:56:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/he4rt/streaming-overlays","commit_stats":null,"previous_names":["he4rt/streaming-overlays"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/he4rt/streaming-overlays","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/he4rt%2Fstreaming-overlays","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/he4rt%2Fstreaming-overlays/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/he4rt%2Fstreaming-overlays/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/he4rt%2Fstreaming-overlays/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/he4rt","download_url":"https://codeload.github.com/he4rt/streaming-overlays/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/he4rt%2Fstreaming-overlays/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34025804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-07T02:00:07.652Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-07T15:02:19.520Z","updated_at":"2026-06-07T15:02:20.458Z","avatar_url":"https://github.com/he4rt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Heart Talks - Streaming Overlay System\n\nSistema de overlays para OBS usado nas lives do Heart Talks (He4rt Developers). Cada cena da live é uma rota React renderizada como Browser Source no OBS a 1920x1080.\n\n## Quick Start\n\n```bash\nnpm install\nnpm run dev\n```\n\nO dev server sobe em `http://localhost:5173`. Abra `/admin` no browser pra gerenciar tudo.\n\n## Cenas\n\n| Rota            | Cena OBS     | Descricao                                                                               |\n| --------------- | ------------ | --------------------------------------------------------------------------------------- |\n| `/preshow`      | Pre-Show     | Host solo antes do convidado entrar                                                     |\n| `/two-cams`     | Two Cams     | Duas cameras lado a lado (layout principal)                                             |\n| `/screen-share` | Screen Share | Tela compartilhada + 2 mini cameras                                                     |\n| `/starting`     | Starting     | Countdown antes da live (4 variantes)                                                   |\n| `/ending`       | Ending       | Mural da comunidade com stats                                                           |\n| `/brb`          | BRB          | Intervalo com timer                                                                     |\n| `/question`     | Question     | Pergunta da audiencia em destaque                                                       |\n| `/poll`         | Poll         | Enquete ao vivo com votos                                                               |\n| `/quote`        | Quote        | Citacao marcante (3 variantes)                                                          |\n| `/admin`        | -            | Painel de controle (nao vai pro OBS)                                                    |\n| `/dev`          | -            | Mostra tela que está indo pro obs, com botões de navegação entre cenas(nao vai pro OBS) |\n| `/`             | -            | Mostra o que está indo para o OBS com base no que está selecionado em /admin ou /dev    |\n\n## Admin Panel\n\nAcesse `http://localhost:5173/admin` no browser. Funciona como um stream manager estilo Twitch:\n\n- **Scene switcher** com botao \"Abrir Scene\" pra preview em janela 1920x1080\n- **Toggles** pra ligar/desligar: chat, top bar, lower third, ticker, particulas, camera placeholders\n- **Config em tempo real** de todos os textos, cores, convidados, episodio\n- **Chat toggle** LIVE/TESTE - alterna entre Restream WebSocket e mensagens de teste\n\nTodas as alteracoes sao sincronizadas via HTTP API (`/api/config`) — funciona tanto no browser quanto nas Browser Sources do OBS.\n\n## OBS Setup\n\n### Importar Scene Collection\n\n1. Copie `obs/he4rt-talks.json` para a pasta de scene collections do OBS:\n   - **Linux (Flatpak):** `~/.var/app/com.obsproject.Studio/config/obs-studio/basic/scenes/`\n   - **Linux (nativo):** `~/.config/obs-studio/basic/scenes/`\n   - **macOS:** `~/Library/Application Support/obs-studio/basic/scenes/`\n   - **Windows:** `%APPDATA%/obs-studio/basic/scenes/`\n2. Reinicie o OBS e selecione \"He4rt Talks\" em Scene Collection\n\n### Setup Manual\n\nPra cada cena, crie uma Browser Source com:\n\n- **URL:** `http://localhost:5173/{rota}`\n- **Width:** 1920\n- **Height:** 1080\n- **CSS:** `body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }`\n\n### Chroma Key (Camera Placeholders)\n\nDesative \"Camera Placeholders\" no admin. As areas de camera ficam verde (`#00FF00`). Adicione um filtro **Chroma Key** na Browser Source e posicione sua webcam como source abaixo da overlay.\n\n## Arquitetura\n\n```\nsrc/\n  features/          # uma pasta por cena/feature\n    admin/           # painel de controle (Tailwind CSS)\n    preshow/         # host solo\n    two-cams/        # duas cameras\n    screen-share/    # compartilhamento de tela\n    starting/        # countdown (v1-v4)\n    ending/          # mural + stats\n    brb/             # intervalo\n    question/        # pergunta da audiencia\n    poll/            # enquete\n    quote/           # citacao (editorial/serif/minimal)\n    overlay/         # chrome compartilhado (TopBar, LowerThird, Ticker)\n    stage/           # viewport 1920x1080 com scaling\n  shared/\n    components/      # CameraFrame, MiniCamera, HeartLogo, ParticleField...\n    chat/            # ChatPanel, BubbleChatStrip, TerminalChat, MarqueeChat...\n  hooks/\n    useOverlayConfig # polling HTTP /api/config (200ms)\n    useRestreamChat  # WebSocket Restream (Twitch + Kick)\n    ChatProvider     # Context de chat com fallback HTTP pra OBS\n    useCountdown     # timer regressivo\n    useStageScale    # scaling responsivo do viewport\n  config/\n    defaults.ts      # valores padrao de todos os campos\n```\n\n### Sync Admin -\u003e OBS\n\nO Vite dev server inclui um plugin com endpoints in-memory:\n\n- `GET/POST /api/config` — configuracao da overlay\n- `GET/POST /api/chat` — mensagens de chat\n- `GET /api/spotify/now-playing` — faixa atual do Spotify\n\nO admin (Chrome) faz POST quando algo muda. As overlays (OBS Browser Sources) fazem GET polling. Isso resolve o problema do browser do OBS ser isolado e nao compartilhar localStorage nem WebSocket com o Chrome.\n\n### Chat (Restream)\n\nO chat integra com Restream via WebSocket, recebendo mensagens de Twitch e Kick com deduplicacao por `eventIdentifier`. Configurar o token em `src/hooks/useRestreamChat.ts`.\n\nNo OBS, o WebSocket pode nao funcionar no browser embarcado. O ChatProvider faz fallback automatico: se o WebSocket nao produz mensagens, ele faz polling de `/api/chat` (alimentado pelo Chrome onde o WebSocket funciona).\n\n### Spotify Now Playing\n\nO pre-show inclui um card de \"Now Playing\" abaixo do chat com:\n\n- disco de vinil animado\n- capa no centro\n- nome da faixa, album e artistas\n\nO card usa o hook `useSpotifyNowPlaying`, que faz polling do endpoint local `/api/spotify/now-playing`.\n\nConfigure as credenciais no `.env` (veja `.env.example`):\n\n```bash\nSPOTIFY_CLIENT_ID=...\nSPOTIFY_CLIENT_SECRET=...\nSPOTIFY_REFRESH_TOKEN=...\n```\n\nO refresh token deve vir de um fluxo Authorization Code com scope `user-read-currently-playing`.\n\n## Tech Stack\n\n- **Vite 6** + **React 18** + **TypeScript** (strict)\n- **Tailwind CSS v4** (apenas no admin panel)\n- **Inline styles** nas overlays (pixel-perfect pra OBS)\n- **React Router v7** (uma rota por cena)\n- **Russo One** + **Inter** (Google Fonts)\n\n## Scripts\n\n```bash\nnpm run dev       # dev server na porta 5173\nnpm run build     # build de producao\nnpm run preview   # servir build local\nnpm run restream  # listener WebSocket do Restream (requer .env com RESTREAM_CHAT_TOKEN)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhe4rt%2Fstreaming-overlays","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhe4rt%2Fstreaming-overlays","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhe4rt%2Fstreaming-overlays/lists"}