Layouts da sala

A sala de vídeo da Kontato tem 2 layouts manuais (Grid e Speaker) e 1 layout automático (Screen-share). Você escolhe entre Grid e Speaker pelo dropdown da Control Bar (atalho L). O sistema decide automaticamente quando forçar mudanças.

Modo Grid (default)

Tiles em malha que adaptam ao número de participantes. Mais democrático — ninguém ganha destaque desproporcional.

Comportamento por número de pessoas

1 participante (você sozinho)

• Tile fullscreen ocupa toda a tela
• Mensagem "Aguardando participantes..." se ninguém entrou ainda

2 participantes (você + cliente)

• Desktop: split horizontal 50/50
• Mobile (portrait): empilhado vertical (cliente em cima, você embaixo)

3 participantes

• Desktop: 2 tiles em cima + 1 centralizado embaixo (50% width)
• Mobile: 3 tiles empilhados verticalmente (corrigido em v0.27.31 — antes era apertado)

4 participantes

• Grade 2×2 em ambos desktop e mobile

5 ou mais participantes

• Auto-força Speaker (ver abaixo) — Grid não escala bem com muitos

Modo Speaker

Foco no falante ativo. Tile grande do active speaker + thumbs (miniaturas) dos demais.

Layout:

• Desktop: tile principal grande + coluna lateral à direita com thumbs (180px de largura, scroll vertical se passa de 4 thumbs)
• Mobile: tile principal em cima + linha embaixo com thumbs (scroll horizontal se passa de 2-3)

Quem é o "speaker":

• O activeSpeakerId do Daily (quem está falando agora) — atualiza em tempo real
• Se ninguém está falando, fallback pra primeiro não-local
• Se só você está, fallback pra você

Quando vale a pena escolher manualmente:

• Você quer se concentrar no que o cliente fala (consultas, sessões de terapia)
• Tem 4 pessoas e o Grid 2×2 fica espremido
• Cliente está apresentando algo (sem usar screen share formal)

O active speaker ganha ring azul pulsante ao redor do tile em todos os layouts, não só no Speaker. Visual claro de quem está falando.

Modo Screen-share (automático)

Quando dispara: alguém clica "Compartilhar tela" (atalho S) e seleciona uma janela/aba no prompt do navegador.

O que muda:

• Layout automático ignora a escolha manual (Grid ou Speaker)
• Tile do screen ocupa a área principal (object-contain — não corta o conteúdo da tela)
• Badge "[Nome] compartilhando" no canto superior esquerdo do screen tile
• Outros participantes viram thumbs ao lado:
  • Desktop: coluna direita (180px)
  • Mobile: linha embaixo (scroll horizontal)
• Quando o share termina, layout volta pro modo manual escolhido (Grid ou Speaker)

Quem pode compartilhar:

• Dono e cliente, ambos
• Apenas 1 pessoa por vez (Daily limita)
• Se outra pessoa começar a compartilhar, a anterior é parada automaticamente

Como trocar de layout manualmente

Na Control Bar (barra inferior), botão Layout (ícone de grade):

1. Click ou atalho L abre dropdown
2. Escolhas:
   • Grid — tiles em malha
   • Speaker — foco no falante
3. (Antes existia "Sidebar" mas foi removido em v0.27.31 — era quase redundante com Speaker)

A escolha é local (cada participante decide o que vê) — não sincroniza com os outros.

Modo de cliente vs. dono

O cliente vê os mesmos layouts que você, mas com ressalvas:

• ✅ Vê o resultado do layout (Grid/Speaker/Screen-share)
• ✅ Vê o ring azul do active speaker
• ✅ Pode trocar o layout dele (atalho L na ControlBar dele)
• ❌ Não vê o seu PiP self-view (ele tem o dele próprio)
• ❌ Layout dele independe do seu (cada um tem o seu)

O que acontece em mobile portrait

Mobile portrait (celular em pé) é o caso mais constrangido — pouca largura. Por isso:

• Grid 2 empilha vertical (em vez de split horizontal)
• Grid 3 empilha vertical (em vez de 2+1)
• Speaker e Screen-share: thumbs viram scroll horizontal embaixo

Mobile landscape (celular deitado) usa o layout desktop normal.

Active Speaker Ring (em todos os layouts)

O active speaker (quem está falando) ganha um anel azul pulsante ao redor do tile dele. Funciona em:

• Grid (qualquer N)
• Speaker (no tile principal e nas thumbs)
• Screen-share (nas thumbs)

Útil pra identificar quem fala em chamadas com 3+ pessoas, especialmente em mobile onde os tiles ficam pequenos.

Active speaker e mute

Se o microfone está mutado, o tile não ganha o ring azul mesmo se a pessoa estiver "falando" (Daily não reporta speaker quando track de áudio está off). Útil saber: se o cliente está em mute e fala, ninguém percebe — peça pra ele desmutar.

Próximos artigos

• Self-view PiP — sua janela floating, drag, resize
• Compartilhar tela — como funciona o screen share
• Trocar dispositivos in-call — chevrons + engrenagem