Adicionou WebRTC para espelhamento
X-Lovable-Edit-ID: edt-295b2d59-76b3-4f08-ad43-cba59525418b Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
@@ -0,0 +1,3 @@
|
||||
VITE_SUPABASE_PROJECT_ID="mebgazuntzkcnkifftbe"
|
||||
VITE_SUPABASE_PUBLISHABLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1lYmdhenVudHprY25raWZmdGJlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzg3Mzg3NTMsImV4cCI6MjA5NDMxNDc1M30.lf3sYc11q9Rl7yk77rIOkacHytG_VKcOBu5kqw0CgcY"
|
||||
VITE_SUPABASE_URL="https://mebgazuntzkcnkifftbe.supabase.co"
|
||||
+100
-78
@@ -1,96 +1,118 @@
|
||||
## Objetivo
|
||||
# Plano — Compartilhar tela do Quest 3 via link público
|
||||
|
||||
Adicionar um botão **"Escala"** com presets de redução (1:2, 1:4, 1:8, 1:10, 1:20, 1:33, 1:50, 1:100, 1:200) e ampliação (2:1, 4:1, 10:1), disponível tanto no Viewer 2D quanto no XR. Ao mudar a escala, o app ajusta automaticamente as ferramentas que dependem de tamanho real (medições, sensibilidade do ajuste fino, snap, hover auto-detect), mantendo todos os números exibidos em **mm reais da peça**.
|
||||
Permitir que o inspetor no Quest gere um link tipo `tracksteelxr.lovable.app/watch/AB12CD`, mande no WhatsApp/email, e até 3 espectadores assistam ao vivo (vídeo + áudio do Quest) em qualquer celular ou PC.
|
||||
|
||||
## Conceito chave
|
||||
## Como vai funcionar para o usuário
|
||||
|
||||
- "1:N" significa: o modelo é renderizado **N vezes menor** que o real (renderScale = 1/N).
|
||||
- "N:1" significa: renderizado N vezes maior (renderScale = N).
|
||||
- Os dados do modelo continuam em mm reais. Só o `scale` aplicado ao `<group>` muda.
|
||||
- **Medições, sensibilidades, indicadores e relatório PDF continuam exibindo mm REAIS** — o app multiplica/divide pelo fator quando necessário.
|
||||
**No Quest (broadcaster):**
|
||||
1. No HUD do `/xr` aparece novo botão **"Compartilhar"** (ícone Share/Cast)
|
||||
2. Ao clicar: app gera código de 6 caracteres, mostra QR + link encurtado
|
||||
3. Botões "Copiar link" e "Compartilhar" (Web Share API → abre WhatsApp/email do sistema)
|
||||
4. Indicador vermelho 🔴 LIVE fica visível enquanto transmite, com contador de viewers
|
||||
5. Botão "Encerrar" para parar
|
||||
|
||||
## Mudanças
|
||||
**No celular/PC (viewer):**
|
||||
1. Abre o link → tela cheia com vídeo da sessão XR
|
||||
2. Sem login, sem instalar nada
|
||||
3. Mostra "Aguardando inspetor…" se a sala não estiver ativa
|
||||
4. Read-only: só assiste
|
||||
|
||||
### 1. Store (`useModelStore.ts`)
|
||||
|
||||
Adicionar:
|
||||
```ts
|
||||
scaleRatio: { label: '1:1', factor: 1 } // factor = renderScale
|
||||
setScaleRatio: (r) => void
|
||||
```
|
||||
Lista de presets exportada (label + factor).
|
||||
|
||||
`fineTuning.scale` continua existindo para o gesto two-hand do XR; o novo `scaleRatio` é aplicado **por cima** (multiplicado) no grupo do modelo.
|
||||
|
||||
### 2. Cálculo de medições (`addMeasurePoint`)
|
||||
|
||||
Pontos A/B vêm em coordenadas world já escaladas. Para reportar mm reais:
|
||||
```
|
||||
distanceMM_real = distanciaWorld_mm / scaleRatio.factor
|
||||
```
|
||||
Atualizar a função `addMeasurePoint` para dividir pela escala atual antes de salvar `distanceMM`. Tooltips e PDF continuam usando o valor salvo (sem mudança).
|
||||
|
||||
### 3. Ajuste fino (`FineTuningControls` + XRHud joystick)
|
||||
|
||||
`POSITION_STEP` deve representar **1 mm real**. Aplicar:
|
||||
```
|
||||
worldStep = POSITION_STEP * scaleRatio.factor
|
||||
```
|
||||
Isso garante que clicar "+" desloca visualmente proporcional à escala (em escala 1:100, mexer "1 mm real" desloca 0,01 mm na cena — coerente).
|
||||
|
||||
Mesmo tratamento para o joystick no XR (incremento por frame multiplicado por `scaleRatio.factor`).
|
||||
|
||||
### 4. Auto-detect (hover hole/edge) e snap
|
||||
|
||||
Os limiares de detecção de furo/aresta e raio de snap são em metros world. Multiplicar pelo `scaleRatio.factor` para que continuem capturando os mesmos elementos físicos da peça.
|
||||
|
||||
### 5. ModelViewer
|
||||
|
||||
No `<group>` do modelo, multiplicar o scale final:
|
||||
```
|
||||
finalScale = fineTuning.scale * scaleRatio.factor
|
||||
```
|
||||
|
||||
### 6. UI — novo componente `ScaleSelector`
|
||||
|
||||
Botão com ícone de régua + label atual ("1:1", "1:50"…). Ao clicar abre um Popover/Sheet com grid:
|
||||
## Arquitetura técnica
|
||||
|
||||
```text
|
||||
Reduzir Ampliar
|
||||
[1:1*] [1:2] [1:4] [1:8] [2:1]
|
||||
[1:10] [1:20] [1:33] [1:50] [4:1]
|
||||
[1:100] [1:200] [10:1]
|
||||
Quest 3 (broadcaster) Lovable Cloud Viewers (celular/PC)
|
||||
┌──────────────────┐ ┌─────────────────────┐ ┌──────────────────┐
|
||||
│ /xr │ │ Supabase Realtime │ │ /watch/AB12CD │
|
||||
│ - canvas WebXR │ ──SDP──▶│ (signaling channel) │◀──SDP── │ - <video> tag │
|
||||
│ - getDisplayMedia│ │ rooms table │ │ - peer connection│
|
||||
│ - RTCPeerConn x3 │◀════════ ICE candidates ═════════════▶ │ │
|
||||
└──────────────────┘ │ viewers count │ └──────────────────┘
|
||||
║ └─────────────────────┘ ▲
|
||||
╚════════ WebRTC P2P media stream (vídeo H264) ════════════════╝
|
||||
```
|
||||
|
||||
Toast ao trocar: *"Escala 1:50 — medições e controles ajustados para mm reais"*.
|
||||
**Stack:**
|
||||
- **Lovable Cloud** (precisa habilitar): tabela `share_rooms` + canal Realtime para signaling
|
||||
- **WebRTC nativo do browser** (`RTCPeerConnection`) — sem libs pesadas
|
||||
- **Captura no Quest:** `navigator.mediaDevices.getDisplayMedia()` no browser do Quest captura a janela atual (inclui o canvas 3D). Em sessão XR imersiva, alternativa é usar `canvas.captureStream(30)` direto do canvas WebGL — funciona melhor e não precisa de prompt
|
||||
- **Sem servidor de mídia (SFU):** P2P 1→3 viewers, banda do Quest aguenta tranquilo (~2 Mbps por viewer)
|
||||
|
||||
Inserir o componente em:
|
||||
- **`ViewerControls`** (canto dos controles flutuantes do Viewer 2D)
|
||||
- **`XRHud`** (linha de ferramentas, próximo ao toggle "Escala ON/OFF" two-hand)
|
||||
## Estrutura de arquivos
|
||||
|
||||
### 7. MeasurementsList & FineTuningControls
|
||||
**Novos:**
|
||||
- `src/pages/Watch.tsx` — página pública do viewer (rota `/watch/:code`)
|
||||
- `src/components/ShareButton.tsx` — botão + dialog com QR/link no HUD
|
||||
- `src/lib/webrtc/broadcaster.ts` — lógica do lado Quest (cria offer, gerencia múltiplos peers)
|
||||
- `src/lib/webrtc/viewer.ts` — lógica do lado viewer (recebe offer, monta `<video>`)
|
||||
- `src/lib/webrtc/signaling.ts` — wrapper sobre Supabase Realtime para troca SDP/ICE
|
||||
|
||||
Adicionar pequeno badge "Escala atual: 1:50" no topo dos painéis de Medições e Ajuste Fino para o usuário lembrar que os valores exibidos são mm reais.
|
||||
**Editados:**
|
||||
- `src/App.tsx` — adicionar rota `/watch/:code` (pública, fora do layout XR)
|
||||
- `src/components/XRHud.tsx` — adicionar `<ShareButton />` na toolbar
|
||||
- `src/pages/XRSession.tsx` — botão também visível fora do HUD
|
||||
- `src/stores/useModelStore.ts` — estado `shareRoom: { code, viewerCount, isLive }`
|
||||
|
||||
## O que NÃO muda
|
||||
## Schema do banco (Lovable Cloud)
|
||||
|
||||
- Gesto two-hand de escala (`allowScale`) continua funcionando para ajuste livre — mas se o usuário usar o preset, o gesto reseta para 1.0 e o preset assume.
|
||||
- Relatório PDF: registra a escala atual no cabeçalho.
|
||||
- Grid e checklist: sem alteração.
|
||||
```sql
|
||||
create table public.share_rooms (
|
||||
code text primary key, -- 6 chars, ex: 'AB12CD'
|
||||
created_at timestamptz default now(),
|
||||
expires_at timestamptz default now() + interval '4 hours',
|
||||
is_active boolean default true,
|
||||
viewer_count int default 0
|
||||
);
|
||||
|
||||
## Arquivos tocados
|
||||
-- RLS: leitura pública (viewers precisam saber se sala existe), escrita só anon controlada
|
||||
alter table public.share_rooms enable row level security;
|
||||
create policy "anyone reads active rooms" on public.share_rooms
|
||||
for select using (is_active and expires_at > now());
|
||||
create policy "anyone creates room" on public.share_rooms
|
||||
for insert with check (true);
|
||||
create policy "anyone updates count" on public.share_rooms
|
||||
for update using (true);
|
||||
```
|
||||
|
||||
- `src/stores/useModelStore.ts` — novo estado + ajuste em `addMeasurePoint`
|
||||
- `src/components/ScaleSelector.tsx` — novo (popover com presets)
|
||||
- `src/components/ViewerControls.tsx` — incluir `<ScaleSelector />`
|
||||
- `src/components/XRHud.tsx` — incluir `<ScaleSelector />` + multiplicar passos do joystick
|
||||
- `src/components/FineTuningControls.tsx` — multiplicar passos pela escala + badge
|
||||
- `src/components/MeasurementsList.tsx` — badge da escala
|
||||
- `src/components/three/ModelViewer.tsx` — aplicar `scaleRatio.factor` no group + ajustar threshold de snap/hover
|
||||
- `src/lib/generateReport.ts` — incluir escala no cabeçalho do PDF
|
||||
Signaling propriamente dito (SDP offers/answers, ICE candidates) acontece via **Supabase Realtime broadcast channel** `room:${code}` — não persiste em tabela, é efêmero.
|
||||
|
||||
## Validação
|
||||
## STUN/TURN
|
||||
|
||||
- Carregar viga demo, medir uma aresta conhecida em 1:1 → trocar para 1:10 → remedir mesma aresta → valor em mm deve permanecer igual.
|
||||
- Em 1:50, clicar "+" no ajuste fino X uma vez → modelo desloca visualmente pouquíssimo (esperado), mas valor exibido sobe 1 mm.
|
||||
- No XR, joystick em 1:100 não "voa" o modelo a metros de distância.
|
||||
- **STUN público do Google** (`stun:stun.l.google.com:19302`) — grátis, resolve ~80% dos casos (NAT comum)
|
||||
- **TURN:** se inspetor estiver atrás de NAT simétrico (raro em fábrica), conexão falha. Para v1 deixamos só STUN. Se precisar TURN depois, integramos Twilio TURN (~$0,40/GB) ou Metered.ca (free tier 50GB/mês)
|
||||
|
||||
## Captura no Quest — detalhes importantes
|
||||
|
||||
Tem dois cenários:
|
||||
1. **Fora da sessão XR** (modo viewer 2D): `canvas.captureStream(30)` — fácil, funciona já
|
||||
2. **Dentro da sessão XR imersiva** (passthrough AR): aqui o canvas é renderizado para o display do headset, não para a tela visível. Solução: usar `XRWebGLLayer.framebuffer` e renderizar uma view extra "spectator" para um canvas offscreen que vira o stream. **Esta parte tem risco** — pode precisar fallback para `getDisplayMedia()` que pede permissão do usuário no Quest
|
||||
|
||||
Plano: começar com cenário 1 (já cobre uso fora do AR imersivo), e cenário 2 numa segunda iteração se necessário.
|
||||
|
||||
## Limitações honestas
|
||||
|
||||
- **Latência:** 200-500ms (não é instantâneo, mas serve para acompanhamento)
|
||||
- **Sem áudio do microfone do Quest** na v1 (adicionar depois com `getUserMedia({audio:true})`)
|
||||
- **Sala expira em 4h** — geração de novo código se sessão durar mais
|
||||
- **Link público:** qualquer um com a URL vê. Se vazar, código pode ser revogado pelo inspetor
|
||||
- **Não grava** — só transmissão ao vivo. Gravação seria feature separada
|
||||
|
||||
## Pré-requisito
|
||||
|
||||
Precisa **habilitar Lovable Cloud** (atualmente o projeto não tem). Vou pedir confirmação antes de habilitar, pois cria infraestrutura backend.
|
||||
|
||||
## Escopo desta implementação
|
||||
|
||||
✅ Botão "Compartilhar" no HUD do XR + tela inicial
|
||||
✅ Geração de código + QR + link curto + Web Share API
|
||||
✅ Página `/watch/:code` pública com vídeo
|
||||
✅ Signaling via Supabase Realtime
|
||||
✅ WebRTC P2P 1→3 viewers
|
||||
✅ Contador de viewers em tempo real para o broadcaster
|
||||
✅ Captura via `canvas.captureStream` (cenário fora do XR imersivo)
|
||||
❌ Captura dentro da sessão XR imersiva (segunda iteração)
|
||||
❌ Áudio do mic (segunda iteração)
|
||||
❌ Chat / interação (você optou por read-only)
|
||||
❌ TURN server (só se aparecer problema de NAT)
|
||||
❌ Gravação
|
||||
|
||||
Aprovando o plano, eu habilito o Lovable Cloud e implemento.
|
||||
|
||||
@@ -44,6 +44,7 @@
|
||||
"@react-three/drei": "^9.122.0",
|
||||
"@react-three/fiber": "^8.18.0",
|
||||
"@react-three/xr": "^6.6.29",
|
||||
"@supabase/supabase-js": "^2.105.4",
|
||||
"@tanstack/react-query": "^5.83.0",
|
||||
"@types/three": "^0.160.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
@@ -55,6 +56,7 @@
|
||||
"jspdf": "^4.2.0",
|
||||
"lucide-react": "^0.462.0",
|
||||
"next-themes": "^0.3.0",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "^18.3.1",
|
||||
"react-day-picker": "^8.10.1",
|
||||
"react-dom": "^18.3.1",
|
||||
|
||||
@@ -6,6 +6,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Index from "./pages/Index";
|
||||
import Viewer from "./pages/Viewer";
|
||||
import XRSession from "./pages/XRSession";
|
||||
import Watch from "./pages/Watch";
|
||||
import NotFound from "./pages/NotFound";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
@@ -20,6 +21,7 @@ const App = () => (
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/viewer" element={<Viewer />} />
|
||||
<Route path="/xr" element={<XRSession />} />
|
||||
<Route path="/watch/:code" element={<Watch />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Share2, Copy, Users, X, Loader2 } from 'lucide-react';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { startBroadcast, type BroadcasterHandle } from '@/lib/webrtc/broadcaster';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface ShareButtonProps {
|
||||
variant?: 'default' | 'compact';
|
||||
}
|
||||
|
||||
export function ShareButton({ variant = 'default' }: ShareButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [starting, setStarting] = useState(false);
|
||||
const [handle, setHandle] = useState<BroadcasterHandle | null>(null);
|
||||
const [viewerCount, setViewerCount] = useState(0);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
|
||||
const link = handle ? `${window.location.origin}/watch/${handle.code}` : '';
|
||||
|
||||
const start = async () => {
|
||||
setStarting(true);
|
||||
try {
|
||||
// Try canvas.captureStream first (works inside the page, no permission prompt)
|
||||
const canvas = document.querySelector('canvas') as HTMLCanvasElement | null;
|
||||
let stream: MediaStream | null = null;
|
||||
|
||||
if (canvas && typeof canvas.captureStream === 'function') {
|
||||
stream = canvas.captureStream(30);
|
||||
}
|
||||
|
||||
// Fallback: getDisplayMedia (asks user permission, captures the browser tab)
|
||||
if (!stream || stream.getVideoTracks().length === 0) {
|
||||
stream = await navigator.mediaDevices.getDisplayMedia({
|
||||
video: { frameRate: 30 },
|
||||
audio: false,
|
||||
});
|
||||
}
|
||||
|
||||
streamRef.current = stream;
|
||||
const h = await startBroadcast(stream);
|
||||
setHandle(h);
|
||||
h.onViewerCountChange(setViewerCount);
|
||||
toast.success(`Sala criada: ${h.code}`);
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
toast.error(`Falha ao iniciar transmissão: ${msg}`);
|
||||
} finally {
|
||||
setStarting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const stop = async () => {
|
||||
if (handle) await handle.stop();
|
||||
if (streamRef.current) streamRef.current.getTracks().forEach((t) => t.stop());
|
||||
streamRef.current = null;
|
||||
setHandle(null);
|
||||
setViewerCount(0);
|
||||
toast.info('Transmissão encerrada');
|
||||
};
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (handle) handle.stop();
|
||||
if (streamRef.current) streamRef.current.getTracks().forEach((t) => t.stop());
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const copyLink = async () => {
|
||||
await navigator.clipboard.writeText(link);
|
||||
toast.success('Link copiado');
|
||||
};
|
||||
|
||||
const shareLink = async () => {
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: 'TrackSteelXR — Sessão ao vivo',
|
||||
text: 'Acompanhe a inspeção ao vivo:',
|
||||
url: link,
|
||||
});
|
||||
} catch {/* user cancelled */}
|
||||
} else {
|
||||
copyLink();
|
||||
}
|
||||
};
|
||||
|
||||
const isCompact = variant === 'compact';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant={handle ? 'default' : 'outline'}
|
||||
size={isCompact ? 'sm' : 'sm'}
|
||||
className={isCompact ? 'h-8 gap-1.5 text-[10px] font-mono' : 'gap-2'}
|
||||
onClick={() => setOpen(true)}
|
||||
title="Compartilhar tela ao vivo"
|
||||
>
|
||||
<Share2 className={isCompact ? 'h-3.5 w-3.5' : 'h-4 w-4'} />
|
||||
{handle ? (
|
||||
<>
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
|
||||
</span>
|
||||
LIVE {viewerCount > 0 && `· ${viewerCount}`}
|
||||
</>
|
||||
) : (
|
||||
'Compartilhar'
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 font-mono text-sm">
|
||||
<Share2 className="h-4 w-4 text-primary" />
|
||||
Compartilhar tela ao vivo
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{!handle ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
Gere um link público para que até 5 pessoas acompanhem sua sessão ao vivo
|
||||
pelo celular ou PC. Não precisa de login. A sala expira em 4h.
|
||||
</p>
|
||||
<Button onClick={start} disabled={starting} className="w-full gap-2">
|
||||
{starting ? (
|
||||
<><Loader2 className="h-4 w-4 animate-spin" /> Iniciando…</>
|
||||
) : (
|
||||
<><Share2 className="h-4 w-4" /> Gerar link de acesso</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-center">
|
||||
<div className="rounded-lg bg-white p-3">
|
||||
<QRCodeSVG value={link} size={160} level="M" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border bg-muted/30 p-3 space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-[10px] text-muted-foreground">CÓDIGO</span>
|
||||
<span className="font-mono text-lg font-bold tracking-widest text-primary">
|
||||
{handle.code}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 rounded bg-background px-2 py-1.5 border">
|
||||
<input
|
||||
readOnly
|
||||
value={link}
|
||||
className="flex-1 bg-transparent text-[10px] font-mono outline-none"
|
||||
/>
|
||||
<Button size="icon" variant="ghost" className="h-6 w-6" onClick={copyLink}>
|
||||
<Copy className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between rounded-lg border bg-muted/30 px-3 py-2">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Users className="h-3.5 w-3.5 text-primary" />
|
||||
<span className="font-mono text-[11px]">
|
||||
{viewerCount} {viewerCount === 1 ? 'espectador' : 'espectadores'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-red-500">LIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button onClick={shareLink} className="gap-2">
|
||||
<Share2 className="h-4 w-4" /> Enviar
|
||||
</Button>
|
||||
<Button onClick={stop} variant="destructive" className="gap-2">
|
||||
<X className="h-4 w-4" /> Encerrar
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import { useModelStore } from '@/stores/useModelStore';
|
||||
import { InspectionChecklist } from '@/components/InspectionChecklist';
|
||||
import { ScaleSelector } from '@/components/ScaleSelector';
|
||||
import { CloudLoader } from '@/components/CloudLoader';
|
||||
import { ShareButton } from '@/components/ShareButton';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const POSITION_STEP = 0.001;
|
||||
@@ -318,6 +319,9 @@ export function XRHud({ freeMove, onToggleFreeMove, placementMode = false, onTog
|
||||
{/* Cloud loader (acessível também no AR) */}
|
||||
<CloudLoader compact />
|
||||
|
||||
{/* Share live screen */}
|
||||
<ShareButton variant="compact" />
|
||||
|
||||
<Button
|
||||
variant={freeMove ? 'default' : 'outline'}
|
||||
size="sm" className="h-8 gap-1.5 text-[10px] font-mono"
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
// This file is automatically generated. Do not edit it directly.
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
import type { Database } from './types';
|
||||
|
||||
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
|
||||
const SUPABASE_PUBLISHABLE_KEY = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;
|
||||
|
||||
// Import the supabase client like this:
|
||||
// import { supabase } from "@/integrations/supabase/client";
|
||||
|
||||
export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, {
|
||||
auth: {
|
||||
storage: localStorage,
|
||||
persistSession: true,
|
||||
autoRefreshToken: true,
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,178 @@
|
||||
export type Json =
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| null
|
||||
| { [key: string]: Json | undefined }
|
||||
| Json[]
|
||||
|
||||
export type Database = {
|
||||
// Allows to automatically instantiate createClient with right options
|
||||
// instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
|
||||
__InternalSupabase: {
|
||||
PostgrestVersion: "14.5"
|
||||
}
|
||||
public: {
|
||||
Tables: {
|
||||
share_rooms: {
|
||||
Row: {
|
||||
code: string
|
||||
created_at: string
|
||||
expires_at: string
|
||||
is_active: boolean
|
||||
viewer_count: number
|
||||
}
|
||||
Insert: {
|
||||
code: string
|
||||
created_at?: string
|
||||
expires_at?: string
|
||||
is_active?: boolean
|
||||
viewer_count?: number
|
||||
}
|
||||
Update: {
|
||||
code?: string
|
||||
created_at?: string
|
||||
expires_at?: string
|
||||
is_active?: boolean
|
||||
viewer_count?: number
|
||||
}
|
||||
Relationships: []
|
||||
}
|
||||
}
|
||||
Views: {
|
||||
[_ in never]: never
|
||||
}
|
||||
Functions: {
|
||||
[_ in never]: never
|
||||
}
|
||||
Enums: {
|
||||
[_ in never]: never
|
||||
}
|
||||
CompositeTypes: {
|
||||
[_ in never]: never
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
|
||||
|
||||
type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
|
||||
|
||||
export type Tables<
|
||||
DefaultSchemaTableNameOrOptions extends
|
||||
| keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
TableName extends DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
|
||||
DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
|
||||
: never = never,
|
||||
> = DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
|
||||
DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
|
||||
Row: infer R
|
||||
}
|
||||
? R
|
||||
: never
|
||||
: DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
|
||||
DefaultSchema["Views"])
|
||||
? (DefaultSchema["Tables"] &
|
||||
DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
|
||||
Row: infer R
|
||||
}
|
||||
? R
|
||||
: never
|
||||
: never
|
||||
|
||||
export type TablesInsert<
|
||||
DefaultSchemaTableNameOrOptions extends
|
||||
| keyof DefaultSchema["Tables"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
TableName extends DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
|
||||
: never = never,
|
||||
> = DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
|
||||
Insert: infer I
|
||||
}
|
||||
? I
|
||||
: never
|
||||
: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
|
||||
? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
|
||||
Insert: infer I
|
||||
}
|
||||
? I
|
||||
: never
|
||||
: never
|
||||
|
||||
export type TablesUpdate<
|
||||
DefaultSchemaTableNameOrOptions extends
|
||||
| keyof DefaultSchema["Tables"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
TableName extends DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
|
||||
: never = never,
|
||||
> = DefaultSchemaTableNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
|
||||
Update: infer U
|
||||
}
|
||||
? U
|
||||
: never
|
||||
: DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
|
||||
? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
|
||||
Update: infer U
|
||||
}
|
||||
? U
|
||||
: never
|
||||
: never
|
||||
|
||||
export type Enums<
|
||||
DefaultSchemaEnumNameOrOptions extends
|
||||
| keyof DefaultSchema["Enums"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
EnumName extends DefaultSchemaEnumNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
|
||||
: never = never,
|
||||
> = DefaultSchemaEnumNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
|
||||
: DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
|
||||
? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
|
||||
: never
|
||||
|
||||
export type CompositeTypes<
|
||||
PublicCompositeTypeNameOrOptions extends
|
||||
| keyof DefaultSchema["CompositeTypes"]
|
||||
| { schema: keyof DatabaseWithoutInternals },
|
||||
CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
|
||||
: never = never,
|
||||
> = PublicCompositeTypeNameOrOptions extends {
|
||||
schema: keyof DatabaseWithoutInternals
|
||||
}
|
||||
? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
|
||||
: PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
|
||||
? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
|
||||
: never
|
||||
|
||||
export const Constants = {
|
||||
public: {
|
||||
Enums: {},
|
||||
},
|
||||
} as const
|
||||
@@ -0,0 +1,127 @@
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import {
|
||||
generateRoomCode,
|
||||
joinSignalingChannel,
|
||||
sendSignal,
|
||||
ICE_SERVERS,
|
||||
type SignalMessage,
|
||||
} from './signaling';
|
||||
import type { RealtimeChannel } from '@supabase/supabase-js';
|
||||
|
||||
export interface BroadcasterHandle {
|
||||
code: string;
|
||||
stop: () => Promise<void>;
|
||||
onViewerCountChange: (cb: (n: number) => void) => () => void;
|
||||
}
|
||||
|
||||
const MAX_VIEWERS = 5;
|
||||
|
||||
/**
|
||||
* Starts broadcasting a MediaStream under a fresh room code.
|
||||
* Returns a handle exposing the code and a stop() to teardown.
|
||||
*/
|
||||
export async function startBroadcast(stream: MediaStream): Promise<BroadcasterHandle> {
|
||||
const code = generateRoomCode();
|
||||
|
||||
// Insert room
|
||||
const { error: insErr } = await supabase.from('share_rooms').insert({ code, is_active: true });
|
||||
if (insErr) throw new Error(`Falha ao criar sala: ${insErr.message}`);
|
||||
|
||||
const peers = new Map<string, RTCPeerConnection>();
|
||||
const listeners = new Set<(n: number) => void>();
|
||||
const notify = () => listeners.forEach((cb) => cb(peers.size));
|
||||
|
||||
let channel: RealtimeChannel | null = null;
|
||||
|
||||
const handleMessage = async (msg: SignalMessage) => {
|
||||
if (msg.type === 'viewer-join') {
|
||||
if (peers.size >= MAX_VIEWERS) return;
|
||||
const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
peers.set(msg.viewerId, pc);
|
||||
|
||||
stream.getTracks().forEach((t) => pc.addTrack(t, stream));
|
||||
|
||||
pc.onicecandidate = (ev) => {
|
||||
if (ev.candidate && channel) {
|
||||
sendSignal(channel, {
|
||||
type: 'ice',
|
||||
viewerId: msg.viewerId,
|
||||
from: 'broadcaster',
|
||||
candidate: ev.candidate.toJSON(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
if (['failed', 'closed', 'disconnected'].includes(pc.connectionState)) {
|
||||
peers.delete(msg.viewerId);
|
||||
pc.close();
|
||||
notify();
|
||||
updateViewerCount(code, peers.size);
|
||||
}
|
||||
};
|
||||
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
if (channel) {
|
||||
sendSignal(channel, { type: 'offer', viewerId: msg.viewerId, sdp: offer });
|
||||
}
|
||||
notify();
|
||||
updateViewerCount(code, peers.size);
|
||||
} else if (msg.type === 'answer') {
|
||||
const pc = peers.get(msg.viewerId);
|
||||
if (pc && pc.signalingState !== 'stable') {
|
||||
await pc.setRemoteDescription(msg.sdp);
|
||||
}
|
||||
} else if (msg.type === 'ice' && msg.from === 'viewer') {
|
||||
const pc = peers.get(msg.viewerId);
|
||||
if (pc) {
|
||||
try {
|
||||
await pc.addIceCandidate(msg.candidate);
|
||||
} catch (e) {
|
||||
console.warn('[broadcaster] addIceCandidate failed', e);
|
||||
}
|
||||
}
|
||||
} else if (msg.type === 'viewer-leave') {
|
||||
const pc = peers.get(msg.viewerId);
|
||||
if (pc) {
|
||||
pc.close();
|
||||
peers.delete(msg.viewerId);
|
||||
notify();
|
||||
updateViewerCount(code, peers.size);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
channel = joinSignalingChannel(code, handleMessage);
|
||||
|
||||
// Stop when the underlying stream ends
|
||||
stream.getTracks().forEach((t) => {
|
||||
t.addEventListener('ended', () => stop());
|
||||
});
|
||||
|
||||
let stopped = false;
|
||||
const stop = async () => {
|
||||
if (stopped) return;
|
||||
stopped = true;
|
||||
peers.forEach((pc) => pc.close());
|
||||
peers.clear();
|
||||
notify();
|
||||
if (channel) await supabase.removeChannel(channel);
|
||||
await supabase.from('share_rooms').update({ is_active: false, viewer_count: 0 }).eq('code', code);
|
||||
};
|
||||
|
||||
return {
|
||||
code,
|
||||
stop,
|
||||
onViewerCountChange: (cb) => {
|
||||
listeners.add(cb);
|
||||
cb(peers.size);
|
||||
return () => listeners.delete(cb);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async function updateViewerCount(code: string, n: number) {
|
||||
await supabase.from('share_rooms').update({ viewer_count: n }).eq('code', code);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import type { RealtimeChannel } from '@supabase/supabase-js';
|
||||
|
||||
export type SignalMessage =
|
||||
| { type: 'viewer-join'; viewerId: string }
|
||||
| { type: 'viewer-leave'; viewerId: string }
|
||||
| { type: 'offer'; viewerId: string; sdp: RTCSessionDescriptionInit }
|
||||
| { type: 'answer'; viewerId: string; sdp: RTCSessionDescriptionInit }
|
||||
| { type: 'ice'; viewerId: string; from: 'broadcaster' | 'viewer'; candidate: RTCIceCandidateInit };
|
||||
|
||||
export function joinSignalingChannel(
|
||||
code: string,
|
||||
onMessage: (msg: SignalMessage) => void,
|
||||
): RealtimeChannel {
|
||||
const channel = supabase.channel(`share:${code}`, {
|
||||
config: { broadcast: { self: false, ack: false } },
|
||||
});
|
||||
|
||||
channel
|
||||
.on('broadcast', { event: 'signal' }, ({ payload }) => onMessage(payload as SignalMessage))
|
||||
.subscribe();
|
||||
|
||||
return channel;
|
||||
}
|
||||
|
||||
export function sendSignal(channel: RealtimeChannel, msg: SignalMessage) {
|
||||
return channel.send({ type: 'broadcast', event: 'signal', payload: msg });
|
||||
}
|
||||
|
||||
export function generateRoomCode(): string {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // unambiguous
|
||||
let out = '';
|
||||
for (let i = 0; i < 6; i++) out += chars[Math.floor(Math.random() * chars.length)];
|
||||
return out;
|
||||
}
|
||||
|
||||
export const ICE_SERVERS: RTCIceServer[] = [
|
||||
{ urls: 'stun:stun.l.google.com:19302' },
|
||||
{ urls: 'stun:stun1.l.google.com:19302' },
|
||||
];
|
||||
@@ -0,0 +1,89 @@
|
||||
import {
|
||||
joinSignalingChannel,
|
||||
sendSignal,
|
||||
ICE_SERVERS,
|
||||
type SignalMessage,
|
||||
} from './signaling';
|
||||
import type { RealtimeChannel } from '@supabase/supabase-js';
|
||||
|
||||
export interface ViewerHandle {
|
||||
stop: () => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Connects to a broadcaster's room and renders the incoming stream into the given <video>.
|
||||
*/
|
||||
export async function joinAsViewer(
|
||||
code: string,
|
||||
videoEl: HTMLVideoElement,
|
||||
onState: (s: 'connecting' | 'waiting' | 'live' | 'error', detail?: string) => void,
|
||||
): Promise<ViewerHandle> {
|
||||
const viewerId = crypto.randomUUID();
|
||||
let pc: RTCPeerConnection | null = null;
|
||||
let channel: RealtimeChannel | null = null;
|
||||
|
||||
onState('connecting');
|
||||
|
||||
const handleMessage = async (msg: SignalMessage) => {
|
||||
if (msg.type === 'offer' && msg.viewerId === viewerId) {
|
||||
pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
|
||||
pc.ontrack = (ev) => {
|
||||
videoEl.srcObject = ev.streams[0];
|
||||
videoEl.play().catch(() => {/* autoplay may need user gesture */});
|
||||
onState('live');
|
||||
};
|
||||
|
||||
pc.onicecandidate = (ev) => {
|
||||
if (ev.candidate && channel) {
|
||||
sendSignal(channel, {
|
||||
type: 'ice',
|
||||
viewerId,
|
||||
from: 'viewer',
|
||||
candidate: ev.candidate.toJSON(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
if (pc && ['failed', 'disconnected'].includes(pc.connectionState)) {
|
||||
onState('error', 'Conexão perdida');
|
||||
}
|
||||
};
|
||||
|
||||
await pc.setRemoteDescription(msg.sdp);
|
||||
const answer = await pc.createAnswer();
|
||||
await pc.setLocalDescription(answer);
|
||||
if (channel) sendSignal(channel, { type: 'answer', viewerId, sdp: answer });
|
||||
} else if (msg.type === 'ice' && msg.viewerId === viewerId && msg.from === 'broadcaster') {
|
||||
if (pc) {
|
||||
try {
|
||||
await pc.addIceCandidate(msg.candidate);
|
||||
} catch (e) {
|
||||
console.warn('[viewer] addIceCandidate failed', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
channel = joinSignalingChannel(code, handleMessage);
|
||||
|
||||
// Wait a tick for subscribe, then announce join
|
||||
setTimeout(() => {
|
||||
if (channel) {
|
||||
sendSignal(channel, { type: 'viewer-join', viewerId });
|
||||
onState('waiting');
|
||||
}
|
||||
}, 600);
|
||||
|
||||
const stop = async () => {
|
||||
if (channel) {
|
||||
try { sendSignal(channel, { type: 'viewer-leave', viewerId }); } catch {}
|
||||
const { supabase } = await import('@/integrations/supabase/client');
|
||||
await supabase.removeChannel(channel);
|
||||
}
|
||||
if (pc) pc.close();
|
||||
};
|
||||
|
||||
return { stop };
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import { InspectionChecklist } from "@/components/InspectionChecklist";
|
||||
import { FineTuningControls } from "@/components/FineTuningControls";
|
||||
import { MeasurementsList } from "@/components/MeasurementsList";
|
||||
import { ScreenshotGallery } from "@/components/ScreenshotGallery";
|
||||
import { ShareButton } from "@/components/ShareButton";
|
||||
import { useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
@@ -49,10 +50,13 @@ const Viewer = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="gap-2 glow-primary" disabled={!xrSupported} onClick={handleEnterXR}>
|
||||
<Glasses className="h-4 w-4" />
|
||||
Entrar em Modo XR
|
||||
</Button>
|
||||
<div className="flex items-center gap-2">
|
||||
<ShareButton />
|
||||
<Button className="gap-2 glow-primary" disabled={!xrSupported} onClick={handleEnterXR}>
|
||||
<Glasses className="h-4 w-4" />
|
||||
Entrar em Modo XR
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { Loader2, Maximize, Minimize, AlertCircle, Eye } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { joinAsViewer, type ViewerHandle } from '@/lib/webrtc/viewer';
|
||||
|
||||
type ConnState = 'checking' | 'connecting' | 'waiting' | 'live' | 'error' | 'not-found';
|
||||
|
||||
export default function Watch() {
|
||||
const { code = '' } = useParams();
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const handleRef = useRef<ViewerHandle | null>(null);
|
||||
const [state, setState] = useState<ConnState>('checking');
|
||||
const [error, setError] = useState<string>('');
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
(async () => {
|
||||
const { data, error: dbErr } = await supabase
|
||||
.from('share_rooms')
|
||||
.select('code, is_active, expires_at')
|
||||
.eq('code', code.toUpperCase())
|
||||
.maybeSingle();
|
||||
|
||||
if (cancelled) return;
|
||||
|
||||
if (dbErr) {
|
||||
setError(dbErr.message);
|
||||
setState('error');
|
||||
return;
|
||||
}
|
||||
if (!data) {
|
||||
setState('not-found');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!videoRef.current) return;
|
||||
try {
|
||||
const handle = await joinAsViewer(code.toUpperCase(), videoRef.current, (s, detail) => {
|
||||
setState(s as ConnState);
|
||||
if (detail) setError(detail);
|
||||
});
|
||||
handleRef.current = handle;
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : String(e));
|
||||
setState('error');
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (handleRef.current) handleRef.current.stop();
|
||||
};
|
||||
}, [code]);
|
||||
|
||||
const toggleFullscreen = async () => {
|
||||
const el = videoRef.current;
|
||||
if (!el) return;
|
||||
if (document.fullscreenElement) {
|
||||
await document.exitFullscreen();
|
||||
setFullscreen(false);
|
||||
} else {
|
||||
await el.requestFullscreen();
|
||||
setFullscreen(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex flex-col">
|
||||
<header className="border-b bg-card/50 backdrop-blur px-4 py-3 flex items-center justify-between">
|
||||
<Link to="/" className="font-mono text-sm font-bold text-foreground">
|
||||
TrackSteel<span className="text-primary">XR</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-mono text-[10px] text-muted-foreground">SALA</span>
|
||||
<span className="font-mono text-sm font-bold tracking-widest text-primary">
|
||||
{code.toUpperCase()}
|
||||
</span>
|
||||
{state === 'live' && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-red-500">AO VIVO</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 relative bg-black flex items-center justify-center">
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
|
||||
{(state === 'checking' || state === 'connecting' || state === 'waiting') && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/80">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<p className="font-mono text-xs text-muted-foreground">
|
||||
{state === 'checking' && 'Verificando sala…'}
|
||||
{state === 'connecting' && 'Conectando…'}
|
||||
{state === 'waiting' && 'Aguardando o inspetor iniciar…'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === 'not-found' && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/90 px-6 text-center">
|
||||
<AlertCircle className="h-10 w-10 text-destructive" />
|
||||
<h2 className="font-mono text-base font-bold">Sala não encontrada</h2>
|
||||
<p className="font-mono text-xs text-muted-foreground max-w-sm">
|
||||
A sala <span className="text-primary">{code.toUpperCase()}</span> não existe,
|
||||
expirou ou foi encerrada pelo inspetor.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === 'error' && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/90 px-6 text-center">
|
||||
<AlertCircle className="h-10 w-10 text-destructive" />
|
||||
<h2 className="font-mono text-base font-bold">Erro de conexão</h2>
|
||||
<p className="font-mono text-xs text-muted-foreground max-w-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state === 'live' && (
|
||||
<Button
|
||||
onClick={toggleFullscreen}
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="absolute bottom-4 right-4 h-9 w-9 bg-card/80 backdrop-blur"
|
||||
>
|
||||
{fullscreen ? <Minimize className="h-4 w-4" /> : <Maximize className="h-4 w-4" />}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<footer className="border-t bg-card/50 backdrop-blur px-4 py-2 flex items-center justify-center gap-2">
|
||||
<Eye className="h-3 w-3 text-muted-foreground" />
|
||||
<span className="font-mono text-[10px] text-muted-foreground">
|
||||
Modo somente visualização · TrackSteelXR
|
||||
</span>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
project_id = "mebgazuntzkcnkifftbe"
|
||||
@@ -0,0 +1,21 @@
|
||||
create table public.share_rooms (
|
||||
code text primary key,
|
||||
created_at timestamptz not null default now(),
|
||||
expires_at timestamptz not null default (now() + interval '4 hours'),
|
||||
is_active boolean not null default true,
|
||||
viewer_count int not null default 0
|
||||
);
|
||||
|
||||
alter table public.share_rooms enable row level security;
|
||||
|
||||
create policy "anyone can read active rooms"
|
||||
on public.share_rooms for select
|
||||
using (is_active = true and expires_at > now());
|
||||
|
||||
create policy "anyone can create rooms"
|
||||
on public.share_rooms for insert
|
||||
with check (true);
|
||||
|
||||
create policy "anyone can update rooms"
|
||||
on public.share_rooms for update
|
||||
using (true);
|
||||
Reference in New Issue
Block a user