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 horário de fim do agendamento
- Vermelho quando faltam menos de 2 minutos
- Amarelo entre 2 e 5 minutos
- Verde acima de 5 minutos
- (apenas dono)
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)
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 (copia pra área de transferência) e Enviar via WhatsApp (envia 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)
- A escolha fica salva no próprio dispositivo
- Cliente NÃO vê esse botão (UI mais limpa)
Encerrar — Botão vermelho (PhoneOff)
- Encerra a chamada do seu lado e finaliza a sessão
- 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 compartilhamento; layout muda automaticamente |
| ⚏ Layout | Layout dropdown | L | Grid / Speaker (escolha do dono) |
| ✋ Hand | Levantar a mão | H | Avisa todos na sala que você levantou a mão |
| 😀 Reactions | Reações | E | Popover com 5 emojis (👍 ❤️ 🎉 👏 😂) |
| ⛶ Maximize | Tela cheia | F | Tela cheia 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 campo (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)
- 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 (o cursor muda de formato); arrasta pra mudar tamanho
- Posição/tamanho ficam salvos no próprio dispositivo — na próxima chamada, abre onde você deixou
- Default: canto inferior direito, com 200×150px
Não duplica: o seu vídeo foi removido da grade principal. 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: a recuperação automática silenciosa falhou ou a internet ficou ruim por mais de 5 segundos
Conteúdo: ⚠ "Conexão instável." + botão Reconectar
Ação do botão: tenta uma reconexão leve primeiro (reativa câmera e microfone); se falhar, faz uma reconexão completa à sala
Avisos de fim (toasts)
5 minutos antes do horário de fim: toast amarelo no canto superior direito "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: a chamada é encerrada automaticamente e aparece a tela de trial esgotado com o botão "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 da tela cheia (nativo do navegador) |
6. O que o cliente NÃO vê
Para preservar a privacidade total dele, 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 (Sol/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 o desfoque dele mesmo, pelo próprio recurso de fundo)
- ❌ 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