Sala de vídeo da Kontato tem 5 áreas de controle. Esse artigo é um glossário visual — passe o olho quando esquecer pra que serve algo.
1. Header (barra superior)
A barra superior fica sempre visível. Da esquerda pra direita:
Lado esquerdo (informações)
Countdown — Encerra em XX:XX
- Tempo até o
hora_fimdo agendamento - Vermelho quando faltam menos de 2 minutos
- Amarelo entre 2 e 5 minutos
- Verde acima de 5 minutos
- (apenas dono — RN-V12)
Tempo decorrido — · 0:42
- Tempo desde que você (dono) entrou na sala
- Formato
m:ssaté 1h,h:mm:ssdepois - (apenas dono)
Badge REC — Indicador pulsante vermelho
- Aparece só durante gravação ativa
- Cliente NÃO vê (privacidade total — RN-V02)
Lado direito (ações)
Lobby — Badge Users (👥)
- Cinza quando vazio (texto: "Lobby")
- Dourado pulsante quando há clientes esperando (texto: "1 esperando", "2 esperando", etc)
- Click abre modal com lista de pendentes + botões Autorizar/Recusar
Fundos — Ícone Image
- Ativo (dourado) quando painel de fundos está aberto
- Click abre seletor com: Sem fundo / Borrar leve / Borrar forte / 12 imagens curadas
Link cliente — Ícone Share2
- Abre modal com link da sala + 2 botões: Copiar (clipboard) e Enviar via WhatsApp (POST direto pelo bot)
Tema (Sol/Lua) — Toggle light/dark da sala
- Ícone Sol quando está em modo escuro (mostra que vai virar claro)
- Ícone Lua quando está em modo claro (mostra que vai virar escuro)
- Persistido em
localStoragepor dispositivo - Cliente NÃO vê esse botão (UI mais limpa)
Encerrar — Botão vermelho (PhoneOff)
- Encerra a chamada do seu lado e dispara
encerrarSessaono servidor - Texto: "Encerrar" (dono) ou "Sair" (cliente)
- Confirmação: dispara automaticamente, sem prompt
2. Control Bar (barra inferior)
A barra inferior tem auto-hide após 3s sem mouse — passa o cursor pela área pra reaparecer. Mobile: aparece sempre.
12 botões da esquerda pra direita:
| Ícone | Função | Atalho | Comportamento |
|---|---|---|---|
| 🎤 Mic + ⌃ chevron | Microfone | M | Toggle on/off; chevron abre seletor de microfone E alto-falante |
| 📹 Câmera + ⌃ chevron | Câmera | V | Toggle on/off; chevron abre seletor de câmera |
| 🖥️ MonitorUp | Compartilhar tela | S | Inicia/para screen share; layout muda automaticamente |
| ⚏ Layout | Layout dropdown | L | Grid / Speaker (escolha do dono) |
| ✋ Hand | Levantar a mão | H | Broadcast pra todos via daily.sendAppMessage |
| 😀 Reactions | Reações | E | Popover com 5 emojis (👍 ❤️ 🎉 👏 😂) |
| ⛶ Maximize | Tela cheia | F | Fullscreen do navegador |
| 🌫️ Blur | Background blur | B | Toggle direto / popover de fundos |
| 💬 Chat | Chat in-call | C | Painel lateral; badge vermelho conta mensagens não lidas |
| ⚙️ Engrenagem | Configurações de mídia | — | Menu: trocar câmera/mic/alto-falante + Reconectar mídia + Recarregar chamada |
| ⏺️ REC | Gravar (só dono) | R | Toggle gravação; badge no header pulsa quando ativo |
| 📞 PhoneOff | Sair | — | Mesma ação do "Encerrar" do header |
⚠️ Atalhos não disparam quando você está digitando em algum input (ex: campo do chat) — pra evitar conflito com texto livre.
3. Self-view PiP
Janela floating com seu próprio vídeo. Visível só pra você (cliente vê o seu próprio).
Comportamento:
- Sempre visível (não há mais botão fechar — desde v0.27.31)
- Arrastar: pegue o drag handle no topo (6 pontinhos brancos numa pílula preta) ou qualquer área da janela; pode mover pra qualquer canto
- Redimensionar: pegue o canto inferior-direito (cursor vira
nwse-resize); arrasta pra mudar tamanho - Posição/tamanho persistidos em
localStorage— na próxima chamada, abre onde você deixou - Default:
right: 16, bottom: 16(canto inferior direito) com 200×150px
Não duplica: desde v0.27.31, o seu tile foi removido da grade principal (Layouts excluirLocal=true). Você só aparece no PiP — sem ficar duas vezes na tela.
4. Banners contextuais
Aparecem em situações específicas, sempre no topo da sala:
Banner "Conexão instável" (laranja)
Quando: auto-recovery silencioso falhou ou network ficou ruim por mais de 5 segundos
Conteúdo: ⚠ "Conexão instável." + botão Reconectar
Ação do botão: tenta startCamera() + toggle mic primeiro (leve); se falhar, faz leave + join completo
Avisos de fim (toasts)
5 minutos antes do hora_fim: toast amarelo top-right "A chamada termina em 5 minutos" + botões inline +5 / +10 / +15 / +30 (apenas dono)
1 minuto antes: toast laranja, mais urgente
15 segundos antes: banner vermelho pulsante no topo, countdown ao vivo
Banner Trial esgotado (apenas dono)
Quando: trial está acabando dentro da chamada
- 1 minuto restante: toast laranja
- 15 segundos: banner vermelho
- Zerou: leave automático e tela
TrialEsgotadoViewcom CTA "Ativar add-on"
5. Atalhos de teclado consolidados
| Tecla | Ação |
|---|---|
| M | Mute/unmute microfone |
| V | Liga/desliga câmera |
| S | Inicia/para compartilhar tela |
| L | Abre dropdown de layout |
| F | Tela cheia |
| R | Gravar (só dono) |
| H | Levantar a mão |
| E | Abre popover de reações |
| C | Abre/fecha painel de chat |
| B | Toggle background blur direto |
| Esc | Sai do fullscreen (nativo navegador) |
6. O que o cliente NÃO vê
Para preservar a privacidade total dele (RN-V02), o cliente não vê os seguintes botões/elementos:
- ❌ Botão REC (gravar)
- ❌ Badge REC pulsante no header
- ❌ Botão e popover de Tema (Sun/Lua)
- ❌ Botão Lobby (visível só dono)
- ❌ Botão Link cliente (cliente JÁ está dentro)
- ❌ Botão Fundos (visível só dono — cliente pode usar blur dele mesmo via daily nativo)
- ❌ Toasts de +5/+10/+15 de extensão (não aparecem pra ele)
- ❌ Painel de avaliações / histórico / insights
O cliente só vê: tiles + mic + câmera + sair + (opcional) chat + hand + reactions.
Próximos artigos
- Layouts da sala — Grid, Speaker, screen-share automático
- Self-view PiP — drag, resize, persistência
- Trocar dispositivos in-call — chevron + engrenagem
- Qualidade da conexão — adaptive bitrate, reconectar