carinha-control-panel/web/src/telas/AoVivo.svelte

<script lang="ts">
  import { Battery, Brain, Camera, Download, Ear, Moon, RefreshCw, ScanFace } from '@lucide/svelte';
  import { onDestroy, onMount } from 'svelte';
  import { postar } from '../lib/api';
  import { salvarApp } from '../lib/ajustes.svelte';
  import { tentar } from '../lib/avisos.svelte';
  import { cor, CORES, hex, recarregarCelular, rgb, rosto } from '../lib/comandos.svelte';
  import Card from '../lib/componentes/Card.svelte';
  import Gestos from '../lib/componentes/Gestos.svelte';
  import RostoPrevia from '../lib/componentes/RostoPrevia.svelte';
  import Selo from '../lib/componentes/Selo.svelte';
  import Toggle from '../lib/componentes/Toggle.svelte';
  import { estado } from '../lib/estado.svelte';
  import { Rastreamento } from '../lib/rastreamento.svelte';
  import { VideoAoVivo } from '../lib/video.svelte';

  let elVideo: HTMLVideoElement;
  let elTela: HTMLCanvasElement;
  let video = $state<VideoAoVivo>();
  let rastreio = $state<Rastreamento>();

  onMount(() => {
    video = new VideoAoVivo(elVideo);
    rastreio = new Rastreamento(elVideo, elTela, video);
  });
  onDestroy(() => {
    rastreio?.destruir();
    video?.destruir();
  });

  // Vídeo e rastreamento seguem o estado do servidor (SSE), sem polling próprio.
  $effect(() => {
    const cfg = estado.appConfig ? { ...estado.appConfig } : null;
    const online = estado.celularOnline;
    video?.atualizar(estado.app, cfg, online);
    const dormindo = !!estado.app?.estado?.dormindo;
    const permitido = !!cfg?.preview && online && cfg.sensorCamera !== false && (!dormindo || !!cfg.cameraSono);
    rastreio?.atualizar(cfg, permitido);
  });

  const sensores = $derived(estado.app?.estado ?? {});
  const bateria = $derived.by(() => {
    const b = sensores.bateria;
    const n = typeof b === 'number' ? b : b?.nivel;
    return typeof n === 'number' ? Math.round(n <= 1 ? n * 100 : n) : null;
  });
  const pct = (v: unknown) => (typeof v === 'number' ? Math.round(Math.min(1, v) * 100) : 0);
  const hora = (t: number) => new Date(t).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });

  async function foto() {
    if (!elVideo.videoWidth) return;
    const c = document.createElement('canvas');
    c.width = elVideo.videoWidth;
    c.height = elVideo.videoHeight;
    c.getContext('2d')!.drawImage(elVideo, 0, 0);
    const a = document.createElement('a');
    a.href = c.toDataURL('image/png');
    a.download = `carinha-${new Date().toISOString().replace(/[:.]/g, '-')}.png`;
    a.click();
  }

  const iaLocal = (ativo: boolean) => tentar(() => postar('/ia/config', { ativo }), ativo ? 'Personalidade local ligada.' : 'Personalidade local desligada.');
</script>

<div class="ao-vivo">
  <section class="palco">
    <div class="quadro camera">
      <!-- svelte-ignore a11y_media_has_caption -->
      <video bind:this={elVideo} muted playsinline autoplay hidden={!video?.exibindo}></video>
      <canvas bind:this={elTela} class="sobreposicao" aria-hidden="true"></canvas>
      {#if !video?.exibindo}
        <div class="vazio">
          <Camera size={32} />
          <p>{video?.mensagem ?? 'Carregando…'}</p>
        </div>
      {/if}
      <div class="rodape">
        <Selo tom={video?.exibindo ? 'ok' : 'neutro'}>Câmera</Selo>
        {#if video?.qualidade && video.exibindo}<span class="mono fraco">{video.qualidade}</span>{/if}
        <span class="espaco"></span>
        {#if video?.exibindo}
          <button class="btn pequeno" onclick={foto}><Download size={14} /> Foto</button>
        {/if}
      </div>
    </div>
    <div class="quadro rosto">
      <RostoPrevia titulo="Rosto ao vivo" />
      <div class="rodape">
        <Selo tom={estado.celularOnline ? 'ok' : 'neutro'}>Rosto {estado.celularOnline ? 'no celular' : '· prévia'}</Selo>
      </div>
    </div>
  </section>

  <div class="controles">
    <div class="transmissao">
      <Toggle
        rotulo="Transmitir câmera do celular"
        ajuda="Vídeo direto do celular para este PC (WebRTC)"
        checked={!!estado.appConfig?.preview}
        disabled={!estado.appConfig}
        onchange={(v) => salvarApp({ preview: v })}
      />
      {#if rastreio && estado.appConfig?.preview}
        <p class="fraco pequeno-texto linha"><ScanFace size={14} /> {rastreio.texto}</p>
      {/if}
    </div>
  </div>

  <div class="grade-cards">
    <Card titulo="Gestos" descricao="Favoritos com atalho de 1 a 9. Fixe outros na tela de Reações ou pelo Ctrl+K.">
      <Gestos />
    </Card>

    <Card titulo="Aparência">
      <div class="campo">
        <span>Rosto</span>
        <div class="segmentado" role="radiogroup" aria-label="Rosto">
          {#each estado.rostos as r (r)}
            <button role="radio" aria-checked={estado.aparencia.rosto === r} onclick={() => rosto(r)}>{r}</button>
          {/each}
        </div>
      </div>
      <div class="campo">
        <span>Cor dos olhos</span>
        <div class="cores">
          {#each CORES as c (c.nome)}
            <button
              class="cor"
              style="--c: {hex(c.rgb)}"
              aria-label={c.nome}
              aria-pressed={hex(estado.aparencia.cor) === hex(c.rgb)}
              onclick={() => cor(c.rgb)}
            ></button>
          {/each}
          <label class="cor livre" style="--c: {hex(estado.aparencia.cor)}" title="Outra cor">
            <input type="color" value={hex(estado.aparencia.cor)} onchange={(e) => cor(rgb(e.currentTarget.value))} />
            <span class="sr-only">Escolher outra cor</span>
          </label>
        </div>
      </div>
    </Card>

    <Card titulo="Celular">
      {#snippet acoes()}
        <button class="btn pequeno" onclick={recarregarCelular} disabled={!estado.celularOnline}>
          <RefreshCw size={14} /> Recarregar tela
        </button>
      {/snippet}
      {#if estado.celularOnline}
        <dl class="sensores">
          <div>
            <dt><Battery size={16} /> Bateria</dt>
            <dd>{bateria !== null ? bateria + '%' : '—'}</dd>
          </div>
          <div>
            <dt><Moon size={16} /> Estado</dt>
            <dd>{sensores.dormindo ? 'Dormindo' : 'Acordado'}</dd>
          </div>
          <div>
            <dt><Ear size={16} /> Som</dt>
            <dd>
              {#if sensores.microfone_ativo}
                <meter min="0" max="100" value={pct(sensores.microfone)} aria-label="Nível de som"></meter>
              {:else}<span class="fraco">desligado</span>{/if}
            </dd>
          </div>
          <div>
            <dt><Camera size={16} /> Movimento</dt>
            <dd>
              {#if sensores.camera_ativa}
                <meter min="0" max="100" value={pct((sensores.movimento as number) * 5)} aria-label="Movimento"></meter>
              {:else}<span class="fraco">desligado</span>{/if}
            </dd>
          </div>
        </dl>
        <p class="fraco pequeno-texto mono">{estado.app?.celular_ip ?? ''}</p>
      {:else}
        <p class="fraco pequeno-texto">
          O celular não está enviando sinais. Abra o app Carinha no aparelho e confira se ele aponta para este servidor.
        </p>
      {/if}
    </Card>

    <Card titulo="Personalidade local" descricao="Qwen escolhe expressões a partir de sons e movimentos.">
      <Toggle
        rotulo="Reagir sozinho com IA local"
        ajuda={estado.ia ? `${estado.ia.modelo} · ${estado.ia.executor}` : ''}
        checked={!!estado.ia?.ativo}
        disabled={!estado.ia}
        onchange={iaLocal}
      />
      {#if estado.ia?.ultima}
        <p class="pequeno-texto linha">
          <Brain size={14} /> Último: {estado.ia.ultima.evento} → <strong>{estado.ia.ultima.gesto}</strong>
          <span class="fraco">({estado.ia.ultima.segundos}s)</span>
        </p>
      {/if}
      {#if estado.ia?.erro}<p class="erro pequeno-texto">{estado.ia.erro}</p>{/if}
    </Card>

    <Card titulo="Acontecimentos" class="feed">
      {#if estado.feed.length}
        <ol>
          {#each estado.feed as item (item.id)}
            <li class={item.tipo}><time class="mono fraco">{hora(item.quando)}</time> {item.texto}</li>
          {/each}
        </ol>
      {:else}
        <p class="fraco pequeno-texto">Gestos, respostas e reações aparecem aqui assim que acontecerem.</p>
      {/if}
    </Card>
  </div>
</div>

<style>
  .ao-vivo {
    display: grid;
    gap: var(--e-4);
  }
  .palco {
    display: grid;
    gap: var(--e-3);
    grid-template-columns: 1fr;
  }
  .quadro {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--raio-lg);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--borda);
  }
  .camera video,
  .sobreposicao {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .sobreposicao {
    pointer-events: none;
  }
  .vazio {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--e-2);
    padding: var(--e-5);
    text-align: center;
    color: #8396ab;
    font-size: var(--t-sm);
  }
  .rodape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
    color: #e8eef6;
    font-size: var(--t-xs);
    pointer-events: none;
  }
  .rodape button {
    pointer-events: auto;
  }
  .espaco {
    flex: 1;
  }
  .controles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
    align-items: center;
  }
  .transmissao {
    display: grid;
    gap: var(--e-1);
    min-width: min(100%, 420px);
  }
  .grade-cards {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  }
  .segmentado {
    display: flex;
    background: var(--fundo-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 3px;
    gap: 3px;
  }
  .segmentado button {
    flex: 1;
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-2);
    font: 500 var(--t-sm) var(--fonte);
    text-transform: capitalize;
    cursor: pointer;
  }
  .segmentado button[aria-checked='true'] {
    background: var(--superficie-3);
    color: var(--texto);
  }
  .cores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
  }
  .cor {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--borda-forte);
    background: var(--c);
    cursor: pointer;
    position: relative;
  }
  .cor[aria-pressed='true'] {
    outline: 2px solid var(--texto);
    outline-offset: 2px;
  }
  .livre {
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  }
  .livre input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }
  .sensores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-3);
    margin: 0;
  }
  .sensores div {
    display: grid;
    gap: 2px;
  }
  dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-xs);
    color: var(--texto-3);
  }
  dd {
    margin: 0;
    font-weight: 500;
  }
  meter {
    width: 100%;
    height: 8px;
  }
  .erro {
    color: var(--perigo);
  }
  :global(.feed) ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--e-2);
    max-height: 260px;
    overflow: auto;
    font-size: var(--t-sm);
  }
  :global(.feed) li.estop {
    color: var(--aviso);
  }
  @media (min-width: 900px) {
    .palco {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>