Cesar Mendivil
adbec08f5e
- Redesign PreJoin component and CSS for improved template compatibility and deterministic rendering - Remove mock studio toggle and related runtime logic; update useStudioLauncher to always use real backend - Add README-MOCK.md to document mock studio deprecation - Add mock-studio.html for manual popup emulation - Update environment variable resolution in route.ts for backend API - Add visual regression test scripts (capture, compare, visual_test_prejoin) using Playwright, Puppeteer, pixelmatch, and pngjs - Update package.json scripts and devDependencies for visual testing - Simplify PreJoin.stories.tsx for robust Storybook usage
131 lines
5.0 KiB
HTML
131 lines
5.0 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Mock Studio — AvanzaCast</title>
|
|
<style>
|
|
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:#0f172a;color:#e6eef8}
|
|
.card{width:760px;max-width:95%;background:#0b1220;border-radius:12px;padding:20px;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
|
|
h1{margin:0 0 8px;font-size:18px}
|
|
p{margin:0 0 12px;color:#9fb0d1}
|
|
.row{display:flex;gap:8px;margin-bottom:8px}
|
|
button{background:#0ea5a3;border:none;padding:8px 12px;border-radius:8px;color:#042024;cursor:pointer}
|
|
pre{background:#041025;padding:12px;border-radius:8px;color:#cfe8ff;overflow:auto;max-height:220px}
|
|
input{background:#031423;border:1px solid #103247;color:#cfe8ff;padding:8px;border-radius:6px;flex:1}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>Mock Studio — Emulación popup</h1>
|
|
<p>Esta página simula el popup que responde a mensajes postMessage desde la app (LIVEKIT_PING, LIVEKIT_TOKEN). Úsala en local si el host remoto no es accesible.</p>
|
|
|
|
<div class="row">
|
|
<input id="roomInput" placeholder="room (mock-room)" value="mock-room" />
|
|
<input id="tokenInput" placeholder="token (mock-token-<room>)" value="mock-token-mock-room" />
|
|
<button id="sendToken">Enviar LIVEKIT_TOKEN</button>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<button id="sendPing">Enviar LIVEKIT_PING</button>
|
|
<button id="openOpener" title="intenta comunicarte con window.opener">Ping opener</button>
|
|
<button id="clearLog">Limpiar</button>
|
|
</div>
|
|
|
|
<pre id="log">Log de mensajes:
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<script>
|
|
const logEl = document.getElementById('log');
|
|
function log(...args){
|
|
const text = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
|
|
logEl.textContent = logEl.textContent + '\n' + new Date().toISOString().slice(11,23) + ' ' + text;
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|
}
|
|
|
|
// Mensajes entrantes (desde opener)
|
|
window.addEventListener('message', ev => {
|
|
try {
|
|
const msg = ev.data;
|
|
log('RECV', msg);
|
|
// Normalizar formato: puede ser string o objeto
|
|
if (typeof msg === 'string') {
|
|
if (msg === 'LIVEKIT_PING') {
|
|
// responder inmediatamente
|
|
ev.source.postMessage('LIVEKIT_READY', '*');
|
|
log('SENT', 'LIVEKIT_READY');
|
|
return;
|
|
}
|
|
}
|
|
if (typeof msg === 'object' && msg !== null) {
|
|
if (msg.type === 'LIVEKIT_TOKEN' || msg.type === 'LIVEKIT_GET_TOKEN') {
|
|
const room = msg.room || document.getElementById('roomInput').value || 'mock-room';
|
|
const token = document.getElementById('tokenInput').value || ('mock-token-' + room);
|
|
// enviar ACK con payload
|
|
const ack = { type: 'LIVEKIT_ACK', token, room };
|
|
// simular pequeña latencia
|
|
setTimeout(() => {
|
|
ev.source.postMessage(ack, '*');
|
|
log('SENT', ack);
|
|
// también enviar READY después
|
|
setTimeout(() => {
|
|
ev.source.postMessage('LIVEKIT_READY', '*');
|
|
log('SENT', 'LIVEKIT_READY');
|
|
}, 120);
|
|
}, 120);
|
|
return;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
log('ERR', err && err.message ? err.message : err);
|
|
}
|
|
});
|
|
|
|
// Botones UI para debug / manual
|
|
document.getElementById('sendPing').addEventListener('click', () => {
|
|
if (window.opener && !window.opener.closed) {
|
|
window.opener.postMessage('LIVEKIT_PING', '*');
|
|
log('SENT (opener)', 'LIVEKIT_PING');
|
|
} else {
|
|
log('NOP', 'No hay opener disponible');
|
|
}
|
|
});
|
|
|
|
document.getElementById('sendToken').addEventListener('click', () => {
|
|
if (window.opener && !window.opener.closed) {
|
|
const room = document.getElementById('roomInput').value || 'mock-room';
|
|
const token = document.getElementById('tokenInput').value || ('mock-token-' + room);
|
|
const msg = { type: 'LIVEKIT_TOKEN', token, room };
|
|
window.opener.postMessage(msg, '*');
|
|
log('SENT (opener)', msg);
|
|
} else {
|
|
log('NOP', 'No hay opener disponible');
|
|
}
|
|
});
|
|
|
|
document.getElementById('openOpener').addEventListener('click', () => {
|
|
try {
|
|
if (window.opener && !window.opener.closed) {
|
|
window.opener.postMessage('MOCK_HELLO', '*');
|
|
log('SENT (opener)', 'MOCK_HELLO');
|
|
} else {
|
|
log('NOP', 'Opener no encontrado');
|
|
}
|
|
} catch (e) {
|
|
log('ERR', e.message);
|
|
}
|
|
});
|
|
|
|
document.getElementById('clearLog').addEventListener('click', () => logEl.textContent = 'Log de mensajes:\n');
|
|
|
|
// Si quieres abrir esta página desde la app usando window.open(url) y el popup fue bloqueado,
|
|
// puedes abrir manualmente y usar el botón 'Enviar LIVEKIT_TOKEN' para simular el handshake.
|
|
|
|
log('Mock studio listo');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|