feat: add PreJoin page and components with studio controls, microphone meter, platform utils, and design tokens; update styles for prejoin template compatibility
This commit is contained in:
parent
d162014030
commit
c408c28185
BIN
docs/img_5.png
Normal file
BIN
docs/img_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
docs/img_6.png
Normal file
BIN
docs/img_6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
docs/img_7.png
Normal file
BIN
docs/img_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
docs/img_8.png
Normal file
BIN
docs/img_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
533
docs/prejoin_template.html
Normal file
533
docs/prejoin_template.html
Normal file
@ -0,0 +1,533 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Configura tu estudio</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 628px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.video-preview {
|
||||
flex: 1;
|
||||
background-color: #0a0a1a;
|
||||
border-radius: 12px;
|
||||
aspect-ratio: 16/9;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-badge {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
background-color: rgba(99, 102, 241, 0.9);
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mic-status {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.mic-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mic-icon::before {
|
||||
content: '🎤';
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.mic-meter {
|
||||
width: 32px;
|
||||
height: 80px;
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mic-level {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20%;
|
||||
background: linear-gradient(to top, #22c55e, #86efac);
|
||||
border-radius: 16px;
|
||||
transition: height 0.1s ease-out;
|
||||
}
|
||||
|
||||
.mic-status-text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #22c55e;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mic-device {
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.controls-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #666666;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
color: #1a1a1a;
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
.control-btn.disabled {
|
||||
color: #dc2626;
|
||||
background-color: #fecaca;
|
||||
}
|
||||
|
||||
.control-btn.disabled:hover {
|
||||
color: #b91c1c;
|
||||
background-color: #fca5a5;
|
||||
}
|
||||
|
||||
.control-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
background-color: #dc2626;
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.control-btn.disabled .control-icon::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.control-hint {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.control-hint::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control-btn:hover .control-hint {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.kbd {
|
||||
background-color: #374151;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-label .optional {
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1.5px solid #3b82f6;
|
||||
border-radius: 50%;
|
||||
color: #3b82f6;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: 4px;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Configura tu estudio</h1>
|
||||
<p>Entrar al estudio no iniciará automáticamente<br>la transmisión.</p>
|
||||
</div>
|
||||
|
||||
<div class="video-container">
|
||||
<div class="video-preview">
|
||||
<div class="user-badge">Cesar Mendivil</div>
|
||||
</div>
|
||||
|
||||
<div class="mic-status">
|
||||
<div class="mic-icon"></div>
|
||||
<div class="mic-meter">
|
||||
<div class="mic-level"></div>
|
||||
</div>
|
||||
<div class="mic-status-text">El micrófono<br>está<br>funcionando</div>
|
||||
<div class="mic-device">Microphone Array (R...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls-wrapper">
|
||||
<div class="controls">
|
||||
<button class="control-btn" id="audioBtn">
|
||||
<span class="control-hint">Presiona <span class="kbd">CTRL</span> + <span class="kbd">D</span></span>
|
||||
<div class="control-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
||||
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
||||
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||
<line x1="8" y1="23" x2="16" y2="23"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>Desactivar audio</span>
|
||||
</button>
|
||||
|
||||
<button class="control-btn" id="cameraBtn">
|
||||
<span class="control-hint">Presiona <span class="kbd">CTRL</span> + <span class="kbd">E</span></span>
|
||||
<div class="control-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
|
||||
<circle cx="12" cy="13" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>Detener cámara</span>
|
||||
</button>
|
||||
|
||||
<button class="control-btn">
|
||||
<div class="control-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M12 1v6m0 6v6m-9-9h6m6 0h6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>Configuración</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="display-name">Nombre para mostrar</label>
|
||||
<input
|
||||
type="text"
|
||||
id="display-name"
|
||||
class="form-input"
|
||||
value="Cesar Mendivil"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="title">
|
||||
Título <span class="optional">(opcional)</span>
|
||||
<span class="info-icon">?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
class="form-input"
|
||||
placeholder="p. ej.: Founder of Creativity Inc"
|
||||
>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Entrar al estudio</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Estado de los controles
|
||||
let audioEnabled = true;
|
||||
let cameraEnabled = true;
|
||||
let audioContext;
|
||||
let analyser;
|
||||
let microphone;
|
||||
let animationId;
|
||||
|
||||
const audioBtn = document.getElementById('audioBtn');
|
||||
const cameraBtn = document.getElementById('cameraBtn');
|
||||
const micLevel = document.querySelector('.mic-level');
|
||||
|
||||
// Toggle audio
|
||||
function toggleAudio() {
|
||||
audioEnabled = !audioEnabled;
|
||||
if (audioEnabled) {
|
||||
audioBtn.classList.remove('disabled');
|
||||
audioBtn.querySelector('span:last-child').textContent = 'Desactivar audio';
|
||||
startAudioDetection();
|
||||
} else {
|
||||
audioBtn.classList.add('disabled');
|
||||
audioBtn.querySelector('span:last-child').textContent = 'Activar audio';
|
||||
stopAudioDetection();
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle cámara
|
||||
function toggleCamera() {
|
||||
cameraEnabled = !cameraEnabled;
|
||||
if (cameraEnabled) {
|
||||
cameraBtn.classList.remove('disabled');
|
||||
cameraBtn.querySelector('span:last-child').textContent = 'Detener cámara';
|
||||
} else {
|
||||
cameraBtn.classList.add('disabled');
|
||||
cameraBtn.querySelector('span:last-child').textContent = 'Activar cámara';
|
||||
}
|
||||
}
|
||||
|
||||
// Eventos de click
|
||||
audioBtn.addEventListener('click', toggleAudio);
|
||||
cameraBtn.addEventListener('click', toggleCamera);
|
||||
|
||||
// Atajos de teclado
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.key.toLowerCase() === 'd') {
|
||||
e.preventDefault();
|
||||
toggleAudio();
|
||||
}
|
||||
if (e.ctrlKey && e.key.toLowerCase() === 'e') {
|
||||
e.preventDefault();
|
||||
toggleCamera();
|
||||
}
|
||||
});
|
||||
|
||||
// Iniciar detección de audio
|
||||
async function startAudioDetection() {
|
||||
try {
|
||||
if (!audioContext) {
|
||||
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
analyser = audioContext.createAnalyser();
|
||||
analyser.fftSize = 256;
|
||||
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
microphone = audioContext.createMediaStreamSource(stream);
|
||||
microphone.connect(analyser);
|
||||
}
|
||||
|
||||
const dataArray = new Uint8Array(analyser.frequencyBinCount);
|
||||
|
||||
function updateMeter() {
|
||||
if (!audioEnabled) return;
|
||||
|
||||
analyser.getByteFrequencyData(dataArray);
|
||||
const average = dataArray.reduce((a, b) => a + b) / dataArray.length;
|
||||
const percentage = Math.min(100, (average / 128) * 100);
|
||||
|
||||
micLevel.style.height = percentage + '%';
|
||||
|
||||
animationId = requestAnimationFrame(updateMeter);
|
||||
}
|
||||
|
||||
updateMeter();
|
||||
} catch (err) {
|
||||
console.error('Error al acceder al micrófono:', err);
|
||||
// Simulación si no hay acceso al micrófono
|
||||
simulateAudioMeter();
|
||||
}
|
||||
}
|
||||
|
||||
// Detener detección de audio
|
||||
function stopAudioDetection() {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId);
|
||||
}
|
||||
micLevel.style.height = '20%';
|
||||
}
|
||||
|
||||
// Simulación de audio (fallback)
|
||||
function simulateAudioMeter() {
|
||||
function animate() {
|
||||
if (!audioEnabled) {
|
||||
micLevel.style.height = '20%';
|
||||
return;
|
||||
}
|
||||
|
||||
const randomLevel = 20 + Math.random() * 60;
|
||||
micLevel.style.height = randomLevel + '%';
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
animate();
|
||||
}
|
||||
|
||||
// Iniciar animación al cargar
|
||||
startAudioDetection();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
863
docs/prejoin_ui.md
Normal file
863
docs/prejoin_ui.md
Normal file
@ -0,0 +1,863 @@
|
||||
¡Excelente pregunta! Como experto en UX/UI, mi enfoque al construir esta interfaz con **HTML5** y **CSS3** se centraría no solo en replicar el diseño visual, sino en asegurar la **accesibilidad**, la **responsividad**, y el **dinamismo** para crear una experiencia de usuario fluida y atractiva.
|
||||
|
||||
Aquí detallo cómo lo construiría y las opciones para el dinamismo.
|
||||
|
||||
---
|
||||
|
||||
## 1. 📐 Estructura HTML5 Semántica
|
||||
|
||||
Usaría etiquetas semánticas modernas para estructurar el contenido, lo cual es fundamental para la accesibilidad (SEO, lectores de pantalla).
|
||||
|
||||
* **Contenedor Principal:** Usaría un `<section>` o un `<main>` con un rol de `dialog` o `aria-modal` si se trata de un modal o ventana superpuesta.
|
||||
* **Encabezado:** El título principal "Configura tu estudio" debe ser un `<h1>` o `<h2>` (dependiendo de la jerarquía de la página) para estructura.
|
||||
* **Controles y Previsualización:**
|
||||
* La sección de medios (Video y Audio Meter) y los botones de control los agruparía en un `<div>` o `<section>` específico.
|
||||
* Los botones de control deben ser `<button>` reales para accesibilidad y manejo de eventos.
|
||||
* **Formulario:**
|
||||
* Usaría la etiqueta `<form>` para encapsular los campos de entrada (`Nombre`, `Título`) y el botón principal.
|
||||
* Cada campo de entrada debe tener su `<label>` asociado usando el atributo `for`, lo que mejora la usabilidad al hacer clic en la etiqueta para enfocar el campo.
|
||||
* **Botón de Acción:** El botón "Entrar al estudio" debe ser un `<button type="submit">` dentro del formulario.
|
||||
|
||||
## 2. ✨ Diseño CSS3 con Responsividad y Atractivo
|
||||
|
||||
Utilizaría técnicas modernas de CSS para lograr la flexibilidad y el diseño visual exacto:
|
||||
|
||||
### A. Diseño de Layout (Grid & Flexbox)
|
||||
|
||||
* **Layout Principal:** Usaría **CSS Grid** para el contenedor (`.studio-config-container`) para asegurar que el contenido se centre y tenga un `max-width` adecuado para la legibilidad.
|
||||
* **Sección de Medios:** Usaría **Flexbox** (`.media-preview-section`) con la propiedad `gap` para la separación y **Flex Grow** para que la vista de video ocupe más espacio que el medidor de audio.
|
||||
* **Responsividad Clave:** Utilizaría **Media Queries** para apilar la vista previa de video y el medidor de audio verticalmente en pantallas pequeñas (móviles), en lugar de tenerlos uno al lado del otro.
|
||||
|
||||
### B. Estilos Visuales Clave
|
||||
|
||||
| Elemento | Propiedad CSS | Detalle de Estilo |
|
||||
| :--- | :--- | :--- |
|
||||
| **Bordes Redondeados** | `border-radius` | Aplicado consistentemente a contenedores de previsualización, botones y campos de entrada. |
|
||||
| **Sombras (Shadows)** | `box-shadow` | **Sutil y suave**, especialmente en los botones de control (Audio/Video/Configuración) para dar profundidad sin ser intrusivo. `0 2px 8px rgba(0, 0, 0, 0.1)` es un buen punto de partida. |
|
||||
| **Colores Consistentes**| Variables CSS (`--color-primary`, `--color-red-error`) | Usaría **Variables CSS** para gestionar el azul principal, el rojo de error y el verde de éxito, facilitando el mantenimiento y la consistencia. |
|
||||
| **Botón Principal** | `background-color`, `padding` | Azul intenso (`--color-primary`), `font-weight: bold`, y un `padding` generoso para que el área de clic sea grande y clara. |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 3. Opciones de Dinamismo y Atractivo (UX/UI Avanzado)
|
||||
|
||||
El dinamismo no es solo animación; es cómo la interfaz responde al usuario y al estado del sistema.
|
||||
|
||||
### A. Animaciones e Interacciones
|
||||
|
||||
| Elemento | Técnica de Dinamismo | Beneficio UX |
|
||||
| :--- | :--- | :--- |
|
||||
| **Botones de Control** | **Transiciones CSS** | Suavizar el cambio de color (Gris a Rojo/Rosa y viceversa) al alternar `class="has-error"`. Esto le da una sensación de "respuesta" profesional. |
|
||||
| **Medidor de Audio** | **Keyframes CSS / JavaScript** | Usar **animaciones CSS Keyframes** o actualizar el `height` de una barra con JavaScript para simular la **oscilación en tiempo real** del volumen del micrófono. Esto proporciona una retroalimentación visual inmediata de que el dispositivo funciona. |
|
||||
| **Estado del Botón** | **Pseudo-clases** | Usar `:hover` en los botones para un ligero cambio de `box-shadow` o `background-color`, y `:focus` para un anillo visible (accesibilidad). |
|
||||
|
||||
### B. Feedback y Validación (JavaScript/UX)
|
||||
|
||||
* **Validación de Campos:** Usar JavaScript para **validación en línea** (mostrar un mensaje de error *junto* al campo, no en un *pop-up*) si el usuario intenta ingresar un nombre vacío, por ejemplo.
|
||||
* **Spinner/Carga:** Mostrar un pequeño *spinner* o cambiar el texto del botón "Entrar al estudio" a "Conectando..." mientras se establece la conexión LiveKit, proporcionando *feedback* de que el sistema está trabajando.
|
||||
|
||||
### C. Dinamismo de LiveKit (Estado de Pistas)
|
||||
|
||||
* **Vista Previa Dinámica:** En lugar de un círculo estático, la vista de video debe mostrar el *feed* real del usuario. Esto se logra usando el SDK de LiveKit para adjuntar la pista de video a un elemento `<video>` en el `.video-placeholder`.
|
||||
* **Etiquetas de Estado:** Los textos **"El micrófono está funcionando"** deben ser actualizados dinámicamente por JavaScript basado en el estado real del dispositivo (`audio está mutado` o `audio está activo`), lo que asegura la precisión y guía al usuario.
|
||||
|
||||
**En resumen:** El diseño se apoya en **Flexbox y Grid** para responsividad, **Variables CSS** para una estética limpia, y **Transiciones/Keyframes** para una interacción que se sienta "viva" y profesional.
|
||||
|
||||
¡Absolutamente\! Aquí tienes el código **HTML** y **CSS** completo para construir la interfaz de **"Configura tu estudio"** siguiendo los principios de **UX/UI** y con los elementos dinámicos que discutimos.
|
||||
|
||||
-----
|
||||
|
||||
## 💻 Código HTML5 Semántico
|
||||
|
||||
Este código define la estructura, usa etiquetas semánticas (`<header>`, `<form>`, `<label>`, `<button>`) y reutiliza la estructura de los botones de control.
|
||||
|
||||
```html
|
||||
<section class="studio-config-modal" aria-modal="true" role="dialog">
|
||||
<header class="config-header">
|
||||
<h1>Configura tu estudio</h1>
|
||||
<p class="subtitle">Entrar al estudio no iniciará automáticamente la transmisión.</p>
|
||||
</header>
|
||||
|
||||
<div class="media-preview-section">
|
||||
<div class="video-preview-box">
|
||||
<div class="video-placeholder">
|
||||
<button class="edit-avatar-button">Editar avatar</button>
|
||||
<div class="avatar-circle" aria-label="Vista previa de avatar">
|
||||
👤
|
||||
</div>
|
||||
<div class="name-tag">
|
||||
🎤 Cesar Mendivil
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-meter-box">
|
||||
<div class="mic-meter">
|
||||
<div id="mic-level-bar" class="level-bar"></div>
|
||||
</div>
|
||||
<p id="mic-status" class="status-text is-working">El micrófono está funcionando</p>
|
||||
<p class="device-name">Microphone Array (R...)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-controls-container" aria-label="Controles de medios">
|
||||
<button id="toggle-audio" class="control-button is-active has-error" data-action="audio">
|
||||
<span class="icon">🔇</span>
|
||||
<span class="text">Activar audio</span>
|
||||
</button>
|
||||
<button id="toggle-video" class="control-button is-active has-error" data-action="video">
|
||||
<span class="icon">📸</span>
|
||||
<span class="text">Iniciar cámara</span>
|
||||
</button>
|
||||
<button class="control-button is-settings" data-action="settings">
|
||||
<span class="icon">⚙️</span>
|
||||
<span class="text">Configuración</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="config-form" onsubmit="return false;">
|
||||
<label for="display-name">Nombre para mostrar</label>
|
||||
<input type="text" id="display-name" value="Cesar Mendivil" required>
|
||||
|
||||
<label for="title">Título (opcional) <span class="help-icon" title="Este título se mostrará debajo de tu nombre durante la transmisión.">?</span></label>
|
||||
<input type="text" id="title" placeholder="p. ej.: Founder of Creativity Inc">
|
||||
|
||||
<button type="submit" id="enter-studio-btn" class="enter-studio-button">
|
||||
Entrar al estudio
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## 🎨 Código CSS3 Detallado (Sass-like structure)
|
||||
|
||||
Este CSS incluye las variables, el diseño con Flexbox/Grid, el sombreado sutil y las transiciones para el dinamismo.
|
||||
|
||||
```css
|
||||
/* ====================================
|
||||
1. VARIABLES Y BASE
|
||||
==================================== */
|
||||
:root {
|
||||
--color-primary: #0066ff; /* Azul principal */
|
||||
--color-primary-hover: #0055e6;
|
||||
--color-text-main: #333;
|
||||
--color-text-sub: #666;
|
||||
--color-red-error: #cc0000;
|
||||
--color-bg-error: #fff5f5; /* Rosa claro */
|
||||
--color-green-success: #17a960;
|
||||
--color-preview-bg: #1a1a1a;
|
||||
--color-gray-light: #f7f7f7;
|
||||
--border-radius-base: 8px;
|
||||
--button-height: 80px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f4f4f4; /* Fondo de la página */
|
||||
font-family: 'Inter', 'Arial', sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.studio-config-modal {
|
||||
max-width: 650px;
|
||||
width: 90%;
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra principal sutil */
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
2. ENCABEZADO Y TEXTO
|
||||
==================================== */
|
||||
.config-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.config-header h1 {
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-main);
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.config-header .subtitle {
|
||||
font-size: 0.95em;
|
||||
color: var(--color-text-sub);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
3. SECCIÓN DE MEDIOS
|
||||
==================================== */
|
||||
.media-preview-section {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* Vista de Video */
|
||||
.video-preview-box {
|
||||
flex: 2;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
min-height: 180px;
|
||||
aspect-ratio: 16 / 9;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.video-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-preview-bg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* Efecto de degradado sutil en el fondo para profundidad, opcional */
|
||||
background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
|
||||
}
|
||||
|
||||
.edit-avatar-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
padding: 5px 12px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.edit-avatar-button:hover { background-color: rgba(0, 0, 0, 0.8); }
|
||||
|
||||
.avatar-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(255, 255, 255, 0.5); /* Borde claro */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 40px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.name-tag {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
background-color: #8a2be2; /* Púrpura */
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 0.85em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Medidor de Audio */
|
||||
.audio-meter-box {
|
||||
flex: 1;
|
||||
background-color: var(--color-gray-light);
|
||||
border-radius: var(--border-radius-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.mic-meter {
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background-color: #eee;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.level-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* Altura inicial para simular un nivel de volumen: 50% */
|
||||
height: 50%;
|
||||
background-color: var(--color-green-success);
|
||||
transition: height 0.1s ease-out; /* Dinamismo: Rápida transición de nivel */
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
margin: 5px 0 2px 0;
|
||||
}
|
||||
|
||||
.status-text.is-working {
|
||||
color: var(--color-green-success);
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 0.8em;
|
||||
color: var(--color-text-sub);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
4. CONTROLES DE MEDIOS
|
||||
==================================== */
|
||||
.media-controls-container {
|
||||
margin-bottom: 30px;
|
||||
/* Sombra tenue y limpia al grupo de botones */
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--border-radius-base);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
flex-basis: 33.33%;
|
||||
height: var(--button-height);
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: white;
|
||||
color: var(--color-text-sub);
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease; /* Transición suave para el dinamismo de color */
|
||||
}
|
||||
|
||||
.control-button:hover:not(.is-settings) {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.control-button .icon {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin-bottom: 5px;
|
||||
color: var(--color-text-sub);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.control-button .text {
|
||||
font-size: 0.85em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Estados de Activación/Desactivación (Rojo) */
|
||||
.control-button.is-active.has-error {
|
||||
background-color: var(--color-bg-error); /* Fondo rosa claro */
|
||||
}
|
||||
|
||||
.control-button.is-active.has-error .icon {
|
||||
color: var(--color-red-error); /* Icono rojo */
|
||||
}
|
||||
|
||||
/* Estado de Configuración */
|
||||
.control-button.is-settings {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
5. FORMULARIO Y ENTRADAS
|
||||
==================================== */
|
||||
.config-form label {
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
color: var(--color-text-main);
|
||||
margin: 15px 0 5px 0;
|
||||
}
|
||||
|
||||
.config-form input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 1em;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.config-form input[type="text"]:focus {
|
||||
border-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.config-form input[type="text"]::placeholder {
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--color-text-sub);
|
||||
border-radius: 50%;
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
color: var(--color-text-sub);
|
||||
cursor: help;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.enter-studio-button {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-top: 30px;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.enter-studio-button:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
6. RESPONSIVIDAD (UX Mobile)
|
||||
==================================== */
|
||||
@media (max-width: 600px) {
|
||||
.studio-config-modal {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
/* Apilamos las vistas de medios en vertical */
|
||||
.media-preview-section {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.video-preview-box {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.audio-meter-box {
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
¡Excelente idea\! Construir un "paquete" de estilos personalizados similar a **Tailwind CSS** (un **Utility-First CSS Framework**), pero adaptado a la identidad y necesidades de tu iniciativa privada, es una estrategia de diseño muy inteligente.
|
||||
|
||||
Esto asegura **consistencia**, **velocidad de desarrollo** y **escalabilidad**. Llamaremos a este sistema **MiKit** (por ejemplo).
|
||||
|
||||
-----
|
||||
|
||||
## 🏗️ 1. Filosofía y Estructura del Proyecto
|
||||
|
||||
Tu sistema privado de diseño debe seguir la filosofía de **Utility-First** de Tailwind, pero con una capa de **Componentes**.
|
||||
|
||||
### A. La Capa de Utilidades (Utility-First)
|
||||
|
||||
Esta capa es el corazón del sistema, donde defines clases atómicas para propiedades CSS individuales, **restringiendo los valores a tu sistema de diseño**.
|
||||
|
||||
### B. La Capa de Componentes (Component Classes)
|
||||
|
||||
Aquí creas clases que agrupan utilidades para elementos complejos y recurrentes, como `btn-primary` o `card-shadowed`. Esto mejora la **legibilidad** del HTML final.
|
||||
|
||||
-----
|
||||
|
||||
## 🎨 2. Personalización del Sistema de Diseño
|
||||
|
||||
Antes de escribir CSS, define las bases de tu diseño.
|
||||
|
||||
| Variable CSS | Propósito | Ejemplo de MiKit |
|
||||
| :--- | :--- | :--- |
|
||||
| **Colores** | Paleta principal (Primario, Secundario, Éxito, Error). | `--mk-blue-500`, `--mk-red-600` |
|
||||
| **Espaciado** | Escala de espaciado uniforme (para `margin` y `padding`). | `--mk-space-xs`, `--mk-space-2xl` |
|
||||
| **Tipografía** | Familias, tamaños y pesos predefinidos. | `--mk-font-heading`, `--mk-text-sm` |
|
||||
| **Sombras** | Sombras predefinidas (Sutil, Media, Elevada). | `--mk-shadow-default` |
|
||||
| **Bordes** | Radios de borde (Pequeño, Medio, Grande, Círculo). | `--mk-radius-md` |
|
||||
|
||||
**Implementación:** Define todas estas variables dentro de `:root` en la parte superior de tu archivo CSS principal (ej. `mikit.css`).
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Colores */
|
||||
--mk-color-primary: #0066ff;
|
||||
--mk-color-error: #cc0000;
|
||||
--mk-color-bg-error: #fff5f5;
|
||||
|
||||
/* Espaciado (Escala 4px) */
|
||||
--mk-space-1: 4px;
|
||||
--mk-space-4: 16px;
|
||||
--mk-space-8: 32px;
|
||||
|
||||
/* Sombras */
|
||||
--mk-shadow-default: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## 🧱 3. Desarrollo de Clases de Utilidad (Utility Classes)
|
||||
|
||||
Genera clases que solo realizan una tarea, mapeando las variables definidas.
|
||||
|
||||
### A. Espaciado y Flexbox
|
||||
|
||||
| Utilidad | CSS Generado | Uso en HTML |
|
||||
| :--- | :--- | :--- |
|
||||
| `.m-4` | `margin: var(--mk-space-4);` | `<div class="m-4">` |
|
||||
| `.py-2` | `padding-top/bottom: var(--mk-space-2);` | `<div class="py-2">` |
|
||||
| `.flex-col` | `flex-direction: column;` | `<div class="flex flex-col">` |
|
||||
|
||||
### B. Colores y Fondos
|
||||
|
||||
| Utilidad | CSS Generado | Uso en HTML |
|
||||
| :--- | :--- | :--- |
|
||||
| `.text-primary` | `color: var(--mk-color-primary);` | `<p class="text-primary">` |
|
||||
| `.bg-error` | `background-color: var(--mk-color-bg-error);` | `<div class="bg-error">` |
|
||||
| `.border-error` | `border-color: var(--mk-color-error);` | `<input class="border-error">` |
|
||||
|
||||
### C. Transiciones y Sombras
|
||||
|
||||
```css
|
||||
/* Sombreado */
|
||||
.shadow-base {
|
||||
box-shadow: var(--mk-shadow-default);
|
||||
}
|
||||
|
||||
/* Transiciones para dinamismo */
|
||||
.transition-colors {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## 🧩 4. Creación de Clases de Componentes
|
||||
|
||||
Ahora usamos las utilidades para construir bloques complejos, como los botones de control de tu interfaz.
|
||||
|
||||
### A. Botón Principal (Primary Button)
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
/* Fondo y texto basados en variables */
|
||||
background-color: var(--mk-color-primary);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
padding: var(--mk-space-4) var(--mk-space-6);
|
||||
border-radius: var(--mk-radius-md, 5px);
|
||||
width: 100%;
|
||||
/* Utilidades */
|
||||
@extend .transition-colors;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--mk-color-primary-hover);
|
||||
}
|
||||
```
|
||||
|
||||
### B. Botones de Control de Medios
|
||||
|
||||
Este ejemplo combina estilos de componente base con utilidades de estado:
|
||||
|
||||
```css
|
||||
/* Clase base para el botón de control */
|
||||
.ctrl-media-base {
|
||||
/* Utilidades internas */
|
||||
@extend .transition-colors;
|
||||
@extend .flex;
|
||||
@extend .flex-col;
|
||||
@extend .items-center;
|
||||
/* Estilos fijos */
|
||||
height: var(--button-height, 80px);
|
||||
font-weight: 500;
|
||||
font-size: 0.85em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Utilidad de Estado para Error */
|
||||
.is-media-error {
|
||||
background-color: var(--mk-color-bg-error);
|
||||
}
|
||||
|
||||
/* Utilidad de Estado para Icono */
|
||||
.is-media-error .ctrl-icon {
|
||||
color: var(--mk-color-error);
|
||||
}
|
||||
```
|
||||
|
||||
### Uso en HTML (Ejemplo de Botones de Control)
|
||||
|
||||
En lugar de aplicar 10 clases de utilidad, aplicas solo 3:
|
||||
|
||||
```html
|
||||
<button class="ctrl-media-base is-media-error">
|
||||
<span class="ctrl-icon">🔇</span>
|
||||
<span class="ctrl-text">Activar audio</span>
|
||||
</button>
|
||||
```
|
||||
|
||||
## 🚀 5. Herramientas para Escalabilidad
|
||||
|
||||
Para que tu sistema sea realmente parecido a Tailwind, te recomiendo usar un **Preprocesador CSS** o un **Postprocesador**:
|
||||
|
||||
* **Preprocesador (SASS/LESS):** Permite usar `@mixin` para agrupar utilidades y `@extend` para heredar estilos, haciendo que la creación de componentes sea mucho más limpia (como se muestra arriba).
|
||||
* **Postprocesador (PostCSS):** Similar a como funciona Tailwind. Puedes usar plugins como `postcss-nesting` para escribir CSS anidado y generar utilidades automáticamente a partir de tus variables.
|
||||
|
||||
Este enfoque de **MiKit** te da la flexibilidad de las utilidades (velocidad) con la estructura y la legibilidad de los componentes (mantenimiento) en un sistema totalmente alineado con tu marca y estilo.
|
||||
|
||||
¡Entendido\! Basándonos en la interfaz de **StreamYard** que se muestra en la imagen, podemos definir un sistema de diseño privado, tipo **Utility-First** (como Tailwind), pero capturando la estética específica de esta aplicación.
|
||||
|
||||
Llamaremos a este sistema de diseño **StreamKit** (SK) para fines de referencia.
|
||||
|
||||
-----
|
||||
|
||||
## 🎨 1. Variables de Diseño (SK Variables)
|
||||
|
||||
La clave para replicar el estilo es capturar la paleta de colores y el espaciado exactos.
|
||||
|
||||
```css
|
||||
/* ====================================
|
||||
VARIABLES DE ROOT (SK: StreamKit)
|
||||
==================================== */
|
||||
:root {
|
||||
/* Colores */
|
||||
--sk-color-primary: #1976d2; /* Azul principal de botones y enlaces */
|
||||
--sk-color-secondary: #f4f6f9; /* Fondo de paneles laterales (Gris claro) */
|
||||
--sk-color-accent: #ff4545; /* Rojo de acción principal (Botón "Grabar") */
|
||||
--sk-color-text-dark: #3c4043; /* Texto principal oscuro */
|
||||
--sk-color-text-sub: #70757a; /* Texto secundario/sutil */
|
||||
--sk-color-border-light: #dadce0; /* Borde ligero de separadores */
|
||||
--sk-color-bg-white: #ffffff;
|
||||
|
||||
/* Sombras (Limpias y definidas) */
|
||||
--sk-shadow-panel: 0 1px 3px 0 rgba(60, 64, 67, 0.1), 0 1px 2px 0 rgba(60, 64, 67, 0.15); /* Sombra de botones/paneles */
|
||||
--sk-shadow-float: 0 4px 12px rgba(60, 64, 67, 0.15); /* Sombra de elementos emergentes */
|
||||
|
||||
/* Espaciado (Escala Modular, aquí usando múltiplos de 8px) */
|
||||
--sk-space-xs: 4px;
|
||||
--sk-space-sm: 8px;
|
||||
--sk-space-md: 16px;
|
||||
--sk-space-lg: 24px;
|
||||
--sk-space-xl: 32px;
|
||||
|
||||
/* Tipografía */
|
||||
--sk-font-base: 'Roboto', 'Arial', sans-serif;
|
||||
--sk-font-size-base: 14px;
|
||||
|
||||
/* Bordes */
|
||||
--sk-radius-sm: 4px;
|
||||
--sk-radius-md: 6px;
|
||||
}
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## 🧱 2. Estilos de Utilidad (SK Utilities)
|
||||
|
||||
Estas clases atómicas replicarán las propiedades de espaciado, tipografía y color de la interfaz.
|
||||
|
||||
### A. Espaciado y Display
|
||||
|
||||
| Utilidad | CSS Generado | Descripción |
|
||||
| :--- | :--- | :--- |
|
||||
| `.p-md` | `padding: var(--sk-space-md);` | Padding de 16px. |
|
||||
| `.my-lg` | `margin-top/bottom: var(--sk-space-lg);` | Margen vertical de 24px. |
|
||||
| `.flex-y-center` | `align-items: center;` | Alineación vertical común. |
|
||||
| `.flex-col-gap-sm` | `flex-direction: column; gap: var(--sk-space-sm);` | Columna con espaciado de 8px. |
|
||||
|
||||
```css
|
||||
/* Utilidades de Espaciado */
|
||||
.p-md { padding: var(--sk-space-md); }
|
||||
.py-sm { padding-top: var(--sk-space-sm); padding-bottom: var(--sk-space-sm); }
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* Utilidades de Flexbox */
|
||||
.flex { display: flex; }
|
||||
.flex-col { flex-direction: column; }
|
||||
.justify-between { justify-content: space-between; }
|
||||
.items-center { align-items: center; }
|
||||
|
||||
/* Utilidades de Borde/Sombra */
|
||||
.border-light { border: 1px solid var(--sk-color-border-light); }
|
||||
.shadow-panel { box-shadow: var(--sk-shadow-panel); }
|
||||
.rounded-md { border-radius: var(--sk-radius-md); }
|
||||
```
|
||||
|
||||
### B. Colores y Texto
|
||||
|
||||
```css
|
||||
/* Colores de Fondo */
|
||||
.bg-white { background-color: var(--sk-color-bg-white); }
|
||||
.bg-secondary { background-color: var(--sk-color-secondary); }
|
||||
|
||||
/* Colores de Texto */
|
||||
.text-dark { color: var(--sk-color-text-dark); }
|
||||
.text-sub { color: var(--sk-color-text-sub); }
|
||||
.text-primary { color: var(--sk-color-primary); }
|
||||
|
||||
/* Estilos de Texto */
|
||||
.text-sm { font-size: 0.9em; }
|
||||
.text-lg { font-size: 1.1em; }
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-medium { font-weight: 500; }
|
||||
```
|
||||
|
||||
-----
|
||||
|
||||
## 🧩 3. Clases de Componentes Específicos (SK Components)
|
||||
|
||||
Estos estilos agrupan utilidades y estilos fijos para los elementos recurrentes de la interfaz de StreamYard.
|
||||
|
||||
### A. Barra de Navegación Lateral (Side Nav / Sidebar)
|
||||
|
||||
La barra de la izquierda y la derecha tienen un fondo gris muy claro o blanco, con líneas de división sutiles y texto denso.
|
||||
|
||||
```css
|
||||
.sk-panel-left {
|
||||
width: 200px; /* Ancho fijo para el panel izquierdo */
|
||||
background-color: var(--sk-color-bg-white);
|
||||
border-right: 1px solid var(--sk-color-border-light);
|
||||
height: 100vh;
|
||||
padding-top: var(--sk-space-md);
|
||||
}
|
||||
|
||||
.sk-panel-right {
|
||||
width: 250px; /* Ancho fijo para el panel derecho */
|
||||
background-color: var(--sk-color-bg-white);
|
||||
border-left: 1px solid var(--sk-color-border-light);
|
||||
padding: var(--sk-space-md);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Estilo para los elementos de navegación (Mis Escenas, Comentarios, etc.) */
|
||||
.sk-nav-item {
|
||||
@extend .py-sm;
|
||||
@extend .px-md;
|
||||
@extend .text-sm;
|
||||
color: var(--sk-color-text-dark);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sk-nav-item:hover {
|
||||
background-color: var(--sk-color-secondary); /* Resaltado muy ligero al pasar el mouse */
|
||||
}
|
||||
|
||||
/* Estado Activo (Demo Scene 2) */
|
||||
.sk-nav-item.is-active {
|
||||
background-color: var(--sk-color-primary);
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
```
|
||||
|
||||
### B. Botones de Acción Global
|
||||
|
||||
Hay dos tipos de botones principales: Azul (Primario) y Rojo (Accento/Grabar).
|
||||
|
||||
```css
|
||||
/* Botón Primario: "Agregar destino" / "Presentar o invitar" */
|
||||
.sk-btn-primary {
|
||||
background-color: var(--sk-color-primary);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--sk-radius-md);
|
||||
font-size: var(--sk-font-size-base);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--sk-shadow-panel);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sk-btn-primary:hover {
|
||||
background-color: #1565c0; /* Azul ligeramente más oscuro */
|
||||
}
|
||||
|
||||
/* Botón de Énfasis: "Grabar" / Botón de Salir (Rojo) */
|
||||
.sk-btn-accent {
|
||||
background-color: var(--sk-color-accent);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: var(--sk-radius-md);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sk-btn-accent:hover {
|
||||
background-color: #d83c3c; /* Rojo ligeramente más oscuro */
|
||||
}
|
||||
```
|
||||
|
||||
### C. Contenedor de Previsualización de Escena
|
||||
|
||||
El área central negra debe tener un borde y una sombra suaves.
|
||||
|
||||
```css
|
||||
.sk-preview-main {
|
||||
background-color: black;
|
||||
color: white;
|
||||
aspect-ratio: 16 / 9; /* Mantener la proporción de video */
|
||||
width: 100%;
|
||||
margin-bottom: var(--sk-space-md);
|
||||
border-radius: var(--sk-radius-md);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* El elemento del borde/fondo blanco bajo el video */
|
||||
.sk-bottom-controls-bar {
|
||||
background-color: var(--sk-color-bg-white);
|
||||
padding: var(--sk-space-md);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: var(--sk-radius-md);
|
||||
box-shadow: var(--sk-shadow-panel);
|
||||
}
|
||||
```
|
||||
|
||||
## 📝 4. Ejemplo de Uso en HTML
|
||||
|
||||
Así usarías las clases de **StreamKit** para construir la interfaz (simulando los botones de la derecha):
|
||||
|
||||
```html
|
||||
<aside class="sk-panel-right flex-col-gap-sm">
|
||||
<div class="sk-comment-panel p-md shadow-panel rounded-md bg-secondary">
|
||||
<p class="font-bold text-dark">StreamYard</p>
|
||||
<p class="text-sub text-sm">Los comentarios de los espectadores...</p>
|
||||
</div>
|
||||
|
||||
<nav class="flex-col-gap-sm">
|
||||
<button class="sk-tool-btn items-center flex-y-center p-md">
|
||||
<span class="sk-tool-icon">💬</span> Comentarios
|
||||
</button>
|
||||
<button class="sk-tool-btn items-center flex-y-center p-md">
|
||||
<span class="sk-tool-icon">🖼️</span> Banners
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
```
|
||||
979
docs/streamyard_interface (1).html
Normal file
979
docs/streamyard_interface (1).html
Normal file
@ -0,0 +1,979 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Transmisión - StreamYard Clone</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: white;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-destination-btn {
|
||||
padding: 8px 16px;
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
border: 1px solid #90caf9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-destination-btn:hover {
|
||||
background: #bbdefb;
|
||||
}
|
||||
|
||||
.record-btn {
|
||||
padding: 10px 24px;
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.record-btn:hover {
|
||||
background: #1565c0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Main Layout */
|
||||
.main-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 60px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Left Sidebar */
|
||||
.left-sidebar {
|
||||
width: 200px;
|
||||
background: white;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.left-sidebar.collapsed {
|
||||
width: 0;
|
||||
margin-left: 0;
|
||||
border-right: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.beta-badge {
|
||||
background: #7b61ff;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scene-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.scene-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.scene-item:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.scene-item.active {
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.scene-preview {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #424242;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scene-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-scene-btn {
|
||||
padding: 12px;
|
||||
background: transparent;
|
||||
border: 2px dashed #bdbdbd;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-scene-btn:hover {
|
||||
border-color: #1976d2;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
/* Center Stage */
|
||||
.center-stage {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #e0e0e0;
|
||||
position: relative;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
background: white;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-stage {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
aspect-ratio: 16/9;
|
||||
background: #000;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.quality-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.streamyard-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.hide-panel-btn {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: -12px;
|
||||
transform: translateY(50%);
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 8px 4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: all 0.2s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hide-panel-btn:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Controls Bar */
|
||||
.controls-bar {
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.layout-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #e0e0e0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-btn:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.layout-btn.active {
|
||||
background: #1976d2;
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.layout-btn.dropdown {
|
||||
background: #1976d2;
|
||||
}
|
||||
|
||||
.participants-section {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.participant-card {
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
min-width: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.participant-avatar {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #9e9e9e;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.invite-card {
|
||||
background: white;
|
||||
border: 2px dashed #bdbdbd;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.invite-card:hover {
|
||||
border-color: #1976d2;
|
||||
background: #f5f9ff;
|
||||
}
|
||||
|
||||
/* Bottom Toolbar */
|
||||
.bottom-toolbar {
|
||||
background: white;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toolbar-btn.leave {
|
||||
background: #ef5350;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toolbar-btn.leave:hover {
|
||||
background: #e53935;
|
||||
}
|
||||
|
||||
/* Right Sidebar */
|
||||
.right-sidebar {
|
||||
width: 360px;
|
||||
background: white;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.right-sidebar.collapsed {
|
||||
width: 0;
|
||||
margin-right: 0;
|
||||
border-left: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-sidebar-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 12px 8px;
|
||||
background: #fafafa;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.right-sidebar.collapsed .right-sidebar-tabs {
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
transition: all 0.2s;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: #e3f2fd;
|
||||
border-color: #1976d2;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.right-sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.brand-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
background: #7b61ff;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 6px 16px;
|
||||
background: white;
|
||||
border: 1px solid #1976d2;
|
||||
color: #1976d2;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.package-info {
|
||||
background: #f5f5f5;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.preset-item {
|
||||
aspect-ratio: 1;
|
||||
background: #f5f5f5;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preset-item:hover {
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.preset-item.active {
|
||||
border-color: #1976d2;
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.color-picker-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.color-input-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #7b61ff;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-code {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.theme-item:hover {
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
/* Toggle Buttons */
|
||||
.toggle-left {
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 80px;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.toggle-left:hover {
|
||||
background: #f5f5f5;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.toggle-left.hidden {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.left-sidebar.collapsed ~ .center-stage .toggle-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #bdbdbd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #9e9e9e;
|
||||
}
|
||||
|
||||
/* Icons (usando caracteres Unicode y estilos) */
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
transition: all 0.2s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.help-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<div class="logo-icon">🎥</div>
|
||||
<span>Transmisión</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="add-destination-btn">
|
||||
Agregar destino 📺🔴
|
||||
</button>
|
||||
<button class="record-btn">Grabar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="main-container">
|
||||
<!-- Left Sidebar -->
|
||||
<div class="left-sidebar" id="leftSidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-title">
|
||||
← Mis Escenas
|
||||
</div>
|
||||
<button style="background: none; border: none; cursor: pointer; font-size: 20px;">⋮</button>
|
||||
</div>
|
||||
<div class="scene-list">
|
||||
<div class="scene-item">
|
||||
<div class="scene-preview">👤 👥</div>
|
||||
<div class="scene-name">Demo scene 1</div>
|
||||
</div>
|
||||
<div class="scene-item active">
|
||||
<div class="scene-preview">➕</div>
|
||||
<div class="scene-name">Demo scene 2</div>
|
||||
</div>
|
||||
<div class="scene-item">
|
||||
<div class="scene-preview">👤 👥</div>
|
||||
<div class="scene-name">Demo scene 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 8px;">
|
||||
<button class="add-scene-btn">
|
||||
<span style="font-size: 18px;">+</span>
|
||||
Nueva escena
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center Stage -->
|
||||
<div class="center-stage">
|
||||
<!-- Toggle Left -->
|
||||
<div class="toggle-left" id="toggleLeft" onclick="toggleLeftSidebar()">
|
||||
<span id="toggleLeftIcon">◀</span>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<div class="video-stage">
|
||||
<div class="quality-badge">720p</div>
|
||||
<div class="streamyard-badge">
|
||||
<span style="font-size: 9px;">Producido con</span>
|
||||
<strong>StreamYard</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hide-panel-btn" onclick="toggleRightSidebar()">
|
||||
<span id="hideIcon">▶</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls Bar -->
|
||||
<div class="controls-bar">
|
||||
<div class="layout-controls">
|
||||
<button class="layout-btn">👤</button>
|
||||
<button class="layout-btn">👥</button>
|
||||
<button class="layout-btn">👤👥</button>
|
||||
<button class="layout-btn">👥👥</button>
|
||||
<button class="layout-btn dropdown active">✓</button>
|
||||
<button class="layout-btn">✏️</button>
|
||||
<button class="layout-btn">➕</button>
|
||||
<button class="layout-btn">⚙️</button>
|
||||
</div>
|
||||
|
||||
<div class="participants-section">
|
||||
<div class="participant-card">
|
||||
<div class="participant-avatar">👤</div>
|
||||
<div class="participant-name">
|
||||
🎤 Cesar Mendivil
|
||||
</div>
|
||||
</div>
|
||||
<div class="invite-card">
|
||||
<span style="font-size: 24px;">👤➕</span>
|
||||
<span style="font-size: 14px; color: #666;">Presentar o invitar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Toolbar -->
|
||||
<div class="bottom-toolbar">
|
||||
<button class="toolbar-btn">🎤</button>
|
||||
<button class="toolbar-btn">📹</button>
|
||||
<button class="toolbar-btn">🖥️</button>
|
||||
<button class="toolbar-btn">👥</button>
|
||||
<button class="toolbar-btn">⚙️</button>
|
||||
<button class="toolbar-btn leave">🚪</button>
|
||||
<button class="help-btn" style="position: static; width: 48px; height: 48px; margin-left: auto;">❓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar -->
|
||||
<div class="right-sidebar" id="rightSidebar">
|
||||
<div class="right-sidebar-tabs">
|
||||
<button class="tab-btn" onclick="switchTab('comments')">
|
||||
💬
|
||||
<span>Comentarios</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('banners')">
|
||||
🖼️
|
||||
<span>Banners</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('multimedia')">
|
||||
🎬
|
||||
<span>Activos multimedia</span>
|
||||
</button>
|
||||
<button class="tab-btn active" onclick="switchTab('style')">
|
||||
🎨
|
||||
<span>Estilo</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('notes')">
|
||||
📝
|
||||
<span>Notas</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('people')">
|
||||
👥
|
||||
<span>Personas</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="right-sidebar-content animate-in">
|
||||
<div class="brand-header">
|
||||
<div class="brand-title">
|
||||
🎨 Marca 1 ▼
|
||||
</div>
|
||||
<button style="background: none; border: none; cursor: pointer; font-size: 20px;">⋮</button>
|
||||
</div>
|
||||
|
||||
<div class="package-info">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-size: 13px;">Paquete de Acción de Gracias 🎁</span>
|
||||
<span class="new-badge">NUEV<br>O</span>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #666; margin-top: 4px;">
|
||||
4 overlays, 6 fondos
|
||||
</div>
|
||||
<button class="add-btn" style="margin-top: 8px;">Añadir</button>
|
||||
</div>
|
||||
|
||||
<div class="section-title">
|
||||
Ajustes preestablecidos ℹ️
|
||||
</div>
|
||||
|
||||
<div class="preset-grid">
|
||||
<div class="preset-item">
|
||||
<span style="background: #1976d2; color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px;">You</span>
|
||||
</div>
|
||||
<div class="preset-item active">
|
||||
<span style="background: #7b61ff; color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px;">Hola</span>
|
||||
</div>
|
||||
<div class="preset-item">
|
||||
<span style="background: #ff9800; color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px;">You</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-picker-section">
|
||||
<div class="section-title">Color de la marca ℹ️</div>
|
||||
<div class="color-input-group">
|
||||
<div class="color-preview"></div>
|
||||
<input type="text" class="color-code" value="#7b61ff">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="section-title">Tema ℹ️</div>
|
||||
<div class="theme-grid">
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleLeftSidebar() {
|
||||
const sidebar = document.getElementById('leftSidebar');
|
||||
const icon = document.getElementById('toggleLeftIcon');
|
||||
|
||||
sidebar.classList.toggle('collapsed');
|
||||
icon.textContent = sidebar.classList.contains('collapsed') ? '▶' : '◀';
|
||||
}
|
||||
|
||||
function toggleRightSidebar() {
|
||||
const sidebar = document.getElementById('rightSidebar');
|
||||
const icon = document.getElementById('hideIcon');
|
||||
|
||||
sidebar.classList.toggle('collapsed');
|
||||
icon.textContent = sidebar.classList.contains('collapsed') ? '◀' : '▶';
|
||||
|
||||
// Remover estado activo de todas las tabs cuando se colapsa
|
||||
if (sidebar.classList.contains('collapsed')) {
|
||||
document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('active'));
|
||||
}
|
||||
}
|
||||
|
||||
function switchTab(tab) {
|
||||
const tabs = document.querySelectorAll('.tab-btn');
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
event.target.closest('.tab-btn').classList.add('active');
|
||||
|
||||
const sidebar = document.getElementById('rightSidebar');
|
||||
if (sidebar.classList.contains('collapsed')) {
|
||||
sidebar.classList.remove('collapsed');
|
||||
document.getElementById('hideIcon').textContent = '▶';
|
||||
}
|
||||
|
||||
// Añadir animación al contenido
|
||||
const content = document.querySelector('.right-sidebar-content');
|
||||
content.classList.remove('animate-in');
|
||||
setTimeout(() => content.classList.add('animate-in'), 10);
|
||||
}
|
||||
|
||||
// Animación de hover para botones
|
||||
document.querySelectorAll('.toolbar-btn, .layout-btn, .tab-btn').forEach(btn => {
|
||||
btn.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
});
|
||||
btn.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Cerrar sidebar derecho cuando no hay tab activa
|
||||
let lastActiveTab = null;
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
if (lastActiveTab === this && !document.getElementById('rightSidebar').classList.contains('collapsed')) {
|
||||
document.getElementById('rightSidebar').classList.add('collapsed');
|
||||
this.classList.remove('active');
|
||||
lastActiveTab = null;
|
||||
} else {
|
||||
lastActiveTab = this;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1000
docs/streamyard_interface (2).html
Normal file
1000
docs/streamyard_interface (2).html
Normal file
File diff suppressed because it is too large
Load Diff
1187
docs/streamyard_interface (3).html
Normal file
1187
docs/streamyard_interface (3).html
Normal file
File diff suppressed because it is too large
Load Diff
963
docs/streamyard_interface.html
Normal file
963
docs/streamyard_interface.html
Normal file
@ -0,0 +1,963 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Transmisión - StreamYard Clone</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: white;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-destination-btn {
|
||||
padding: 8px 16px;
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
border: 1px solid #90caf9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-destination-btn:hover {
|
||||
background: #bbdefb;
|
||||
}
|
||||
|
||||
.record-btn {
|
||||
padding: 10px 24px;
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.record-btn:hover {
|
||||
background: #1565c0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Main Layout */
|
||||
.main-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 60px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Left Sidebar */
|
||||
.left-sidebar {
|
||||
width: 200px;
|
||||
background: white;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.left-sidebar.collapsed {
|
||||
transform: translateX(-200px);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.beta-badge {
|
||||
background: #7b61ff;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scene-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.scene-item {
|
||||
padding: 12px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.scene-item:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.scene-item.active {
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.scene-preview {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #424242;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.scene-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.add-scene-btn {
|
||||
padding: 12px;
|
||||
background: transparent;
|
||||
border: 2px dashed #bdbdbd;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-scene-btn:hover {
|
||||
border-color: #1976d2;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
/* Center Stage */
|
||||
.center-stage {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #e0e0e0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
background: white;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-stage {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
aspect-ratio: 16/9;
|
||||
background: #000;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.quality-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.streamyard-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.hide-panel-btn {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: -12px;
|
||||
transform: translateY(50%);
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 8px 4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: all 0.2s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hide-panel-btn:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Controls Bar */
|
||||
.controls-bar {
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.layout-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layout-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #e0e0e0;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-btn:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.layout-btn.active {
|
||||
background: #1976d2;
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.layout-btn.dropdown {
|
||||
background: #1976d2;
|
||||
}
|
||||
|
||||
.participants-section {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.participant-card {
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
min-width: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.participant-avatar {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #9e9e9e;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.invite-card {
|
||||
background: white;
|
||||
border: 2px dashed #bdbdbd;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.invite-card:hover {
|
||||
border-color: #1976d2;
|
||||
background: #f5f9ff;
|
||||
}
|
||||
|
||||
/* Bottom Toolbar */
|
||||
.bottom-toolbar {
|
||||
background: white;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toolbar-btn.leave {
|
||||
background: #ef5350;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toolbar-btn.leave:hover {
|
||||
background: #e53935;
|
||||
}
|
||||
|
||||
/* Right Sidebar */
|
||||
.right-sidebar {
|
||||
width: 360px;
|
||||
background: white;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.right-sidebar.collapsed {
|
||||
transform: translateX(360px);
|
||||
}
|
||||
|
||||
.right-sidebar-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 12px 8px;
|
||||
background: #fafafa;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
transition: all 0.2s;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: #e3f2fd;
|
||||
border-color: #1976d2;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.right-sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.brand-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
background: #7b61ff;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
padding: 6px 16px;
|
||||
background: white;
|
||||
border: 1px solid #1976d2;
|
||||
color: #1976d2;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.package-info {
|
||||
background: #f5f5f5;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.preset-item {
|
||||
aspect-ratio: 1;
|
||||
background: #f5f5f5;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preset-item:hover {
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.preset-item.active {
|
||||
border-color: #1976d2;
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.color-picker-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.color-input-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-preview {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #7b61ff;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-code {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.theme-item:hover {
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
/* Toggle Buttons */
|
||||
.toggle-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 80px;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.toggle-left:hover {
|
||||
background: #f5f5f5;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.toggle-left.hidden {
|
||||
left: -24px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #bdbdbd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #9e9e9e;
|
||||
}
|
||||
|
||||
/* Icons (usando caracteres Unicode y estilos) */
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
transition: all 0.2s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.help-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<div class="logo-icon">🎥</div>
|
||||
<span>Transmisión</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="add-destination-btn">
|
||||
Agregar destino 📺🔴
|
||||
</button>
|
||||
<button class="record-btn">Grabar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="main-container">
|
||||
<!-- Toggle Left -->
|
||||
<div class="toggle-left" id="toggleLeft" onclick="toggleLeftSidebar()">
|
||||
<span id="toggleLeftIcon">◀</span>
|
||||
</div>
|
||||
|
||||
<!-- Left Sidebar -->
|
||||
<div class="left-sidebar" id="leftSidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-title">
|
||||
← Mis Escenas
|
||||
</div>
|
||||
<button style="background: none; border: none; cursor: pointer; font-size: 20px;">⋮</button>
|
||||
</div>
|
||||
<div class="scene-list">
|
||||
<div class="scene-item">
|
||||
<div class="scene-preview">👤 👥</div>
|
||||
<div class="scene-name">Demo scene 1</div>
|
||||
</div>
|
||||
<div class="scene-item active">
|
||||
<div class="scene-preview">➕</div>
|
||||
<div class="scene-name">Demo scene 2</div>
|
||||
</div>
|
||||
<div class="scene-item">
|
||||
<div class="scene-preview">👤 👥</div>
|
||||
<div class="scene-name">Demo scene 3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 8px;">
|
||||
<button class="add-scene-btn">
|
||||
<span style="font-size: 18px;">+</span>
|
||||
Nueva escena
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center Stage -->
|
||||
<div class="center-stage">
|
||||
<div class="video-container">
|
||||
<div class="video-stage">
|
||||
<div class="quality-badge">720p</div>
|
||||
<div class="streamyard-badge">
|
||||
<span style="font-size: 9px;">Producido con</span>
|
||||
<strong>StreamYard</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hide-panel-btn" onclick="toggleRightSidebar()">
|
||||
<span id="hideIcon">▶</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls Bar -->
|
||||
<div class="controls-bar">
|
||||
<div class="layout-controls">
|
||||
<button class="layout-btn">👤</button>
|
||||
<button class="layout-btn">👥</button>
|
||||
<button class="layout-btn">👤👥</button>
|
||||
<button class="layout-btn">👥👥</button>
|
||||
<button class="layout-btn dropdown active">✓</button>
|
||||
<button class="layout-btn">✏️</button>
|
||||
<button class="layout-btn">➕</button>
|
||||
<button class="layout-btn">⚙️</button>
|
||||
</div>
|
||||
|
||||
<div class="participants-section">
|
||||
<div class="participant-card">
|
||||
<div class="participant-avatar">👤</div>
|
||||
<div class="participant-name">
|
||||
🎤 Cesar Mendivil
|
||||
</div>
|
||||
</div>
|
||||
<div class="invite-card">
|
||||
<span style="font-size: 24px;">👤➕</span>
|
||||
<span style="font-size: 14px; color: #666;">Presentar o invitar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Toolbar -->
|
||||
<div class="bottom-toolbar">
|
||||
<button class="toolbar-btn">🎤</button>
|
||||
<button class="toolbar-btn">📹</button>
|
||||
<button class="toolbar-btn">🖥️</button>
|
||||
<button class="toolbar-btn">👥</button>
|
||||
<button class="toolbar-btn">⚙️</button>
|
||||
<button class="toolbar-btn leave">🚪</button>
|
||||
<button class="help-btn" style="position: static; width: 48px; height: 48px; margin-left: auto;">❓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar -->
|
||||
<div class="right-sidebar" id="rightSidebar">
|
||||
<div class="right-sidebar-tabs">
|
||||
<button class="tab-btn" onclick="switchTab('comments')">
|
||||
💬
|
||||
<span>Comentarios</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('banners')">
|
||||
🖼️
|
||||
<span>Banners</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('multimedia')">
|
||||
🎬
|
||||
<span>Activos multimedia</span>
|
||||
</button>
|
||||
<button class="tab-btn active" onclick="switchTab('style')">
|
||||
🎨
|
||||
<span>Estilo</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('notes')">
|
||||
📝
|
||||
<span>Notas</span>
|
||||
</button>
|
||||
<button class="tab-btn" onclick="switchTab('people')">
|
||||
👥
|
||||
<span>Personas</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="right-sidebar-content animate-in">
|
||||
<div class="brand-header">
|
||||
<div class="brand-title">
|
||||
🎨 Marca 1 ▼
|
||||
</div>
|
||||
<button style="background: none; border: none; cursor: pointer; font-size: 20px;">⋮</button>
|
||||
</div>
|
||||
|
||||
<div class="package-info">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-size: 13px;">Paquete de Acción de Gracias 🎁</span>
|
||||
<span class="new-badge">NUEV<br>O</span>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #666; margin-top: 4px;">
|
||||
4 overlays, 6 fondos
|
||||
</div>
|
||||
<button class="add-btn" style="margin-top: 8px;">Añadir</button>
|
||||
</div>
|
||||
|
||||
<div class="section-title">
|
||||
Ajustes preestablecidos ℹ️
|
||||
</div>
|
||||
|
||||
<div class="preset-grid">
|
||||
<div class="preset-item">
|
||||
<span style="background: #1976d2; color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px;">You</span>
|
||||
</div>
|
||||
<div class="preset-item active">
|
||||
<span style="background: #7b61ff; color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px;">Hola</span>
|
||||
</div>
|
||||
<div class="preset-item">
|
||||
<span style="background: #ff9800; color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px;">You</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-picker-section">
|
||||
<div class="section-title">Color de la marca ℹ️</div>
|
||||
<div class="color-input-group">
|
||||
<div class="color-preview"></div>
|
||||
<input type="text" class="color-code" value="#7b61ff">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="section-title">Tema ℹ️</div>
|
||||
<div class="theme-grid">
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
|
||||
<div class="theme-item" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleLeftSidebar() {
|
||||
const sidebar = document.getElementById('leftSidebar');
|
||||
const toggle = document.getElementById('toggleLeft');
|
||||
const icon = document.getElementById('toggleLeftIcon');
|
||||
|
||||
sidebar.classList.toggle('collapsed');
|
||||
|
||||
if (sidebar.classList.contains('collapsed')) {
|
||||
toggle.classList.add('hidden');
|
||||
icon.textContent = '▶';
|
||||
} else {
|
||||
toggle.classList.remove('hidden');
|
||||
icon.textContent = '◀';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleRightSidebar() {
|
||||
const sidebar = document.getElementById('rightSidebar');
|
||||
const icon = document.getElementById('hideIcon');
|
||||
|
||||
sidebar.classList.toggle('collapsed');
|
||||
icon.textContent = sidebar.classList.contains('collapsed') ? '◀' : '▶';
|
||||
}
|
||||
|
||||
function switchTab(tab) {
|
||||
const tabs = document.querySelectorAll('.tab-btn');
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
event.target.closest('.tab-btn').classList.add('active');
|
||||
|
||||
const sidebar = document.getElementById('rightSidebar');
|
||||
if (sidebar.classList.contains('collapsed')) {
|
||||
sidebar.classList.remove('collapsed');
|
||||
document.getElementById('hideIcon').textContent = '▶';
|
||||
}
|
||||
|
||||
// Añadir animación al contenido
|
||||
const content = document.querySelector('.right-sidebar-content');
|
||||
content.classList.remove('animate-in');
|
||||
setTimeout(() => content.classList.add('animate-in'), 10);
|
||||
}
|
||||
|
||||
// Animación de hover para botones
|
||||
document.querySelectorAll('.toolbar-btn, .layout-btn, .tab-btn').forEach(btn => {
|
||||
btn.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'scale(1.05)';
|
||||
});
|
||||
btn.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
});
|
||||
});
|
||||
|
||||
// Cerrar sidebar derecho cuando no hay tab activa
|
||||
let lastActiveTab = null;
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
if (lastActiveTab === this && !document.getElementById('rightSidebar').classList.contains('collapsed')) {
|
||||
document.getElementById('rightSidebar').classList.add('collapsed');
|
||||
this.classList.remove('active');
|
||||
lastActiveTab = null;
|
||||
} else {
|
||||
lastActiveTab = this;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,80 +1,170 @@
|
||||
/* stylelint-disable */
|
||||
|
||||
.controlButton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, var(--au-gray-700) 0%, var(--au-gray-800) 100%);
|
||||
border: 2px solid var(--au-border-dark);
|
||||
gap: 0.5rem;
|
||||
width: auto;
|
||||
min-width: 7.5rem;
|
||||
height: 2.75rem;
|
||||
background: linear-gradient(135deg, var(--au-gray-700), var(--au-gray-800));
|
||||
border: 0.125rem solid rgba(255,255,255,0.06);
|
||||
color: var(--au-text-primary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--au-radius-full);
|
||||
transition: all var(--au-transition-fast);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 0.625rem;
|
||||
transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease, background 160ms ease;
|
||||
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
font-size: 24px;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
padding: 0 0.875rem;
|
||||
}
|
||||
|
||||
.controlButton span:first-child {
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
width:1.5rem;
|
||||
height:1.5rem;
|
||||
}
|
||||
|
||||
/* layout column: icon above label */
|
||||
.column{
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
.column span:first-child{ width:24px; height:24px }
|
||||
|
||||
/* studio variant: light background, subtle border & shadow to match PreJoin */
|
||||
.studio{
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e5e5;
|
||||
color: #666666;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* studio hover / disabled to match prejoin template */
|
||||
.studio:hover:not(:disabled){
|
||||
background: #fee2e2;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.studio[data-active="false"],
|
||||
.studio:where([data-active="false"]) {
|
||||
background: #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
.studio[data-active="false"] span:first-child svg{ fill: #b91c1c !important; color: #b91c1c !important }
|
||||
|
||||
/* internal hint (tooltip-like) used by studio variant */
|
||||
.controlHint{
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events:none;
|
||||
transition: opacity 0.2s;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.studio:hover .controlHint{ opacity:1 }
|
||||
|
||||
/* slash mark over icon when disabled (like template control-icon::after) */
|
||||
.studio span:first-child{ position: relative }
|
||||
.studio[data-active="false"] span:first-child::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 28px;
|
||||
background-color: #dc2626;
|
||||
transform: rotate(-45deg);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform-origin: center;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.controlButton:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, var(--au-gray-600) 0%, var(--au-gray-700) 100%);
|
||||
border-color: var(--au-primary);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
|
||||
transform: translateY(-0.125rem) scale(1.01);
|
||||
box-shadow: 0 0.5rem 1.25rem rgba(2,6,23,0.12);
|
||||
}
|
||||
|
||||
.controlButton:focus-visible {
|
||||
box-shadow: 0 0.5rem 1.25rem rgba(79,70,229,0.18);
|
||||
transform: translateY(-0.0625rem);
|
||||
}
|
||||
|
||||
.controlButton:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
transform: translateY(0) scale(0.995);
|
||||
}
|
||||
|
||||
.controlButton:disabled {
|
||||
opacity: 0.5;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.controlButton.active {
|
||||
background: linear-gradient(135deg, var(--au-primary) 0%, var(--au-primary-hover) 100%);
|
||||
background: linear-gradient(135deg, var(--au-primary), var(--au-primary-hover));
|
||||
border-color: var(--au-primary);
|
||||
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
|
||||
box-shadow: 0 0.375rem 1.25rem rgba(79, 70, 229, 0.28);
|
||||
}
|
||||
|
||||
.controlButton.danger {
|
||||
background: linear-gradient(135deg, var(--au-danger-600) 0%, var(--au-danger-700) 100%);
|
||||
border-color: var(--au-danger-600);
|
||||
background: linear-gradient(135deg, var(--au-danger-200), var(--au-danger-300));
|
||||
border-color: var(--au-danger-300);
|
||||
}
|
||||
|
||||
.controlButton.danger:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, var(--au-danger-500) 0%, var(--au-danger-600) 100%);
|
||||
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
|
||||
background: linear-gradient(135deg, var(--au-danger-600), var(--au-danger-500));
|
||||
box-shadow: 0 0.375rem 1.25rem rgba(239,68,68,0.18);
|
||||
}
|
||||
|
||||
.controlButton[data-active="false"] {
|
||||
background: linear-gradient(180deg, var(--au-danger-100), var(--au-danger-200));
|
||||
border-color: var(--au-danger-400);
|
||||
}
|
||||
|
||||
.controlButton[data-active="false"] span:first-child svg,
|
||||
.controlButton.danger span:first-child svg {
|
||||
fill: var(--au-danger-700) !important;
|
||||
color: var(--au-danger-700) !important;
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.sm {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
min-width: 5.75rem;
|
||||
height: 2.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.md {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 24px;
|
||||
min-width: 7.5rem;
|
||||
height: 2.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.lg {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
min-width: 10rem;
|
||||
height: 3.25rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.controlButtonLabel {
|
||||
font-size: 10px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--au-font-medium);
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.tooltip { display: inline-block; }
|
||||
|
||||
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { cn } from '../utils/helpers';
|
||||
import type { ComponentBaseProps } from '../types';
|
||||
import styles from './ControlButton.module.css';
|
||||
import { Tooltip } from './Tooltip';
|
||||
|
||||
export interface ControlButtonProps extends ComponentBaseProps {
|
||||
icon?: React.ReactNode;
|
||||
@ -12,6 +13,10 @@ export interface ControlButtonProps extends ComponentBaseProps {
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
title?: string;
|
||||
hint?: string;
|
||||
hintPosition?: 'top' | 'bottom' | 'left' | 'right';
|
||||
layout?: 'row' | 'column';
|
||||
variant?: 'default' | 'studio';
|
||||
}
|
||||
|
||||
export const ControlButton: React.FC<ControlButtonProps> = (props) => {
|
||||
@ -27,13 +32,19 @@ export const ControlButton: React.FC<ControlButtonProps> = (props) => {
|
||||
className,
|
||||
style,
|
||||
id,
|
||||
hint,
|
||||
hintPosition = 'top',
|
||||
layout = 'row',
|
||||
variant = 'default',
|
||||
} = props;
|
||||
|
||||
return (
|
||||
const button = (
|
||||
<button
|
||||
className={cn(
|
||||
styles.controlButton,
|
||||
styles[size],
|
||||
layout === 'column' && styles.column,
|
||||
variant && styles[variant],
|
||||
active && styles.active,
|
||||
danger && styles.danger,
|
||||
className
|
||||
@ -43,13 +54,26 @@ export const ControlButton: React.FC<ControlButtonProps> = (props) => {
|
||||
title={title}
|
||||
style={style}
|
||||
id={id}
|
||||
data-active={active}
|
||||
type="button"
|
||||
>
|
||||
{/* internal hint for studio variant to match template */}
|
||||
{variant === 'studio' && hint ? <span className={styles.controlHint}>{hint}</span> : null}
|
||||
{icon && <span>{icon}</span>}
|
||||
{label && <span className={styles.controlButtonLabel}>{label}</span>}
|
||||
</button>
|
||||
);
|
||||
|
||||
// For studio variant we render the hint inside the button (template behavior).
|
||||
if (variant === 'studio' && hint) return button
|
||||
|
||||
return hint ? (
|
||||
<Tooltip content={hint} position={hintPosition}>
|
||||
{button}
|
||||
</Tooltip>
|
||||
) : (
|
||||
button
|
||||
);
|
||||
};
|
||||
|
||||
ControlButton.displayName = 'ControlButton';
|
||||
|
||||
|
||||
31
packages/avanza-ui/src/components/MicrophoneMeter.module.css
Normal file
31
packages/avanza-ui/src/components/MicrophoneMeter.module.css
Normal file
@ -0,0 +1,31 @@
|
||||
:root{
|
||||
--au-meter-bg: rgba(15,23,42,0.06);
|
||||
--au-meter-fill: #10b981;
|
||||
}
|
||||
|
||||
.meter{
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.track{
|
||||
width:18px;
|
||||
background: rgba(0,0,0,0.04);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.fill{
|
||||
width:100%;
|
||||
background: linear-gradient(180deg, #34d399, #10b981);
|
||||
transition: height 140ms ease;
|
||||
height:4%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light){
|
||||
.track{ background: #f3f4f6 }
|
||||
}
|
||||
82
packages/avanza-ui/src/components/MicrophoneMeter.tsx
Normal file
82
packages/avanza-ui/src/components/MicrophoneMeter.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import styles from './MicrophoneMeter.module.css';
|
||||
|
||||
export interface MicrophoneMeterProps {
|
||||
stream?: MediaStream | null;
|
||||
className?: string;
|
||||
// altura del medidor en px opcional
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export const MicrophoneMeter: React.FC<MicrophoneMeterProps> = ({ stream = null, className, height = 80 }) => {
|
||||
const audioCtxRef = useRef<AudioContext | null>(null);
|
||||
const analyserRef = useRef<AnalyserNode | null>(null);
|
||||
const dataRef = useRef<Uint8Array | null>(null);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
const [level, setLevel] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!stream) return;
|
||||
let mounted = true;
|
||||
|
||||
try {
|
||||
const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
|
||||
const audioCtx = new AudioCtx();
|
||||
audioCtxRef.current = audioCtx;
|
||||
const analyser = audioCtx.createAnalyser();
|
||||
analyser.fftSize = 256;
|
||||
analyserRef.current = analyser;
|
||||
const source = audioCtx.createMediaStreamSource(stream);
|
||||
source.connect(analyser);
|
||||
const bufferLength = analyser.frequencyBinCount;
|
||||
const data = new Uint8Array(bufferLength);
|
||||
dataRef.current = data;
|
||||
|
||||
const tick = () => {
|
||||
if (!mounted) return;
|
||||
try {
|
||||
analyser.getByteTimeDomainData(data);
|
||||
let sum = 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const v = (data[i] - 128) / 128;
|
||||
sum += v * v;
|
||||
}
|
||||
const rms = Math.sqrt(sum / data.length);
|
||||
// scale to 0..1, clamp
|
||||
const lvl = Math.min(1, Math.max(0, (rms - 0.01) * 3));
|
||||
setLevel(lvl);
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
};
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
} catch (e) {
|
||||
// ignore if audio not possible
|
||||
}
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
if (rafRef.current) cancelAnimationFrame(rafRef.current);
|
||||
try {
|
||||
analyserRef.current && analyserRef.current.disconnect();
|
||||
audioCtxRef.current && audioCtxRef.current.close();
|
||||
} catch (e) {}
|
||||
audioCtxRef.current = null;
|
||||
analyserRef.current = null;
|
||||
dataRef.current = null;
|
||||
};
|
||||
}, [stream]);
|
||||
|
||||
const fillPercent = Math.round(level * 100);
|
||||
|
||||
return (
|
||||
<div className={`${styles.meter} ${className || ''}`} style={{ height }} aria-hidden>
|
||||
<div className={styles.track}>
|
||||
<div className={styles.fill} style={{ height: `${fillPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MicrophoneMeter;
|
||||
20
packages/avanza-ui/src/components/PrejoinControlButton.tsx
Normal file
20
packages/avanza-ui/src/components/PrejoinControlButton.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
// filepath: packages/avanza-ui/src/components/PrejoinControlButton.tsx
|
||||
import React from 'react';
|
||||
import { ControlButton, type ControlButtonProps } from './ControlButton';
|
||||
import { cn } from '../utils/helpers';
|
||||
|
||||
/**
|
||||
* Thin wrapper that forces `variant="studio"` and exposes avz classes for prejoin template compatibility.
|
||||
*/
|
||||
export const PrejoinControlButton: React.FC<ControlButtonProps> = ({ className, ...props }) => {
|
||||
return (
|
||||
<ControlButton
|
||||
{...props}
|
||||
variant="studio"
|
||||
className={cn('avz-control-btn', className)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
PrejoinControlButton.displayName = 'PrejoinControlButton';
|
||||
|
||||
16
packages/avanza-ui/src/components/PrejoinControls.tsx
Normal file
16
packages/avanza-ui/src/components/PrejoinControls.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
// filepath: packages/avanza-ui/src/components/PrejoinControls.tsx
|
||||
import React from 'react';
|
||||
import { cn } from '../utils/helpers';
|
||||
|
||||
export interface PrejoinControlsProps extends React.HTMLAttributes<HTMLDivElement> {}
|
||||
|
||||
export const PrejoinControls: React.FC<PrejoinControlsProps> = ({ children, className, ...rest }) => {
|
||||
return (
|
||||
<div className={cn('avz-controls', className)} {...rest}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PrejoinControls.displayName = 'PrejoinControls';
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
// Styles
|
||||
import './styles/globals.css';
|
||||
import './styles/controls.css';
|
||||
import './tokens.css';
|
||||
import './styles/prejoin.css';
|
||||
|
||||
// Components
|
||||
export { Button } from './components/Button';
|
||||
@ -85,8 +87,20 @@ export type { SceneCardProps } from './components/SceneCard';
|
||||
export { VideoTile } from './components/VideoTile';
|
||||
export type { VideoTileProps, ConnectionQuality } from './components/VideoTile';
|
||||
|
||||
export { MicrophoneMeter } from './components/MicrophoneMeter';
|
||||
export type { MicrophoneMeterProps } from './components/MicrophoneMeter';
|
||||
|
||||
export { PrejoinControls } from './components/PrejoinControls';
|
||||
export { PrejoinControlButton } from './components/PrejoinControlButton';
|
||||
export type { PrejoinControlsProps } from './components/PrejoinControls';
|
||||
|
||||
// Tokens
|
||||
export { tokens } from './tokens';
|
||||
export type { Tokens } from './tokens';
|
||||
|
||||
// Types
|
||||
export type { ButtonVariant, ButtonSize, Theme, ComponentBaseProps } from './types';
|
||||
|
||||
// Utils
|
||||
export { cn, formatDate, generateId, debounce, throttle } from './utils/helpers';
|
||||
export { modifierKeyLabel, isMacPlatform, isWindowsPlatform, isLinuxPlatform } from './utils/platform';
|
||||
|
||||
@ -12,7 +12,17 @@
|
||||
--au-primary-hover: #4338ca;
|
||||
--au-success-500: #10b981;
|
||||
--au-warning-500: #f59e0b;
|
||||
/* danger color moved to danger palette below */
|
||||
|
||||
/* Danger palette (shades) */
|
||||
--au-danger-100: #fff5f5;
|
||||
--au-danger-200: #fee2e2;
|
||||
--au-danger-300: #fed7d7;
|
||||
--au-danger-400: #fca5a5;
|
||||
--au-danger-500: #ef4444;
|
||||
--au-danger-600: #fb7185;
|
||||
--au-danger-700: #c53030;
|
||||
--au-danger-800: #9b1f1f;
|
||||
|
||||
--au-text-primary: #f1f5f9;
|
||||
--au-text-secondary: #cbd5e1;
|
||||
@ -107,6 +117,13 @@ button { font-family: inherit }
|
||||
--studio-success: var(--au-success-500);
|
||||
--studio-warning: var(--au-warning-500);
|
||||
--studio-danger: var(--au-danger-500);
|
||||
--studio-danger-100: var(--au-danger-100);
|
||||
--studio-danger-200: var(--au-danger-200);
|
||||
--studio-danger-300: var(--au-danger-300);
|
||||
--studio-danger-400: var(--au-danger-400);
|
||||
--studio-danger-500: var(--au-danger-500);
|
||||
--studio-danger-600: var(--au-danger-600);
|
||||
--studio-danger-700: var(--au-danger-700);
|
||||
|
||||
--studio-recording: var(--au-danger-500);
|
||||
--studio-recording-pulse: rgba(239, 68, 68, 0.12);
|
||||
|
||||
26
packages/avanza-ui/src/styles/prejoin.css
Normal file
26
packages/avanza-ui/src/styles/prejoin.css
Normal file
@ -0,0 +1,26 @@
|
||||
/* filepath: packages/avanza-ui/src/styles/prejoin.css */
|
||||
@import './studio-theme.css';
|
||||
|
||||
:root{
|
||||
--au-prejoin-badge: rgba(99,102,241,0.9);
|
||||
--au-prejoin-danger: var(--studio-danger, #ef4444);
|
||||
}
|
||||
|
||||
/* Reusable PreJoin tokens and classes for avanza-ui */
|
||||
.avz-prejoin-container{ max-width: 628px; margin: 0 auto; padding: 20px }
|
||||
.avz-prejoin-card{ background: var(--studio-bg-elevated); border-radius: 12px; padding: 0 }
|
||||
.avz-prejoin-header{ text-align:center; margin-bottom:24px }
|
||||
.avz-prejoin-title{ font-size:28px; font-weight:600; color:var(--studio-text-primary) }
|
||||
.avz-prejoin-note{ font-size:14px; color:var(--studio-text-secondary) }
|
||||
|
||||
.avz-video-preview{ border-radius:12px; overflow:hidden; background:var(--studio-bg-tertiary); position:relative; aspect-ratio:16/9 }
|
||||
.avz-badge{ position:absolute; bottom:16px; left:16px; background:var(--au-prejoin-badge); color:#fff; padding:8px 20px; border-radius:20px; font-weight:500 }
|
||||
|
||||
.avz-controls{ display:inline-flex; justify-content:center; gap:8px; padding:12px; background:var(--studio-bg-elevated); border:1px solid var(--studio-border); border-radius:12px }
|
||||
.avz-control-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 20px; border-radius:8px; cursor:pointer; color:var(--studio-text-secondary) }
|
||||
.avz-control-btn:hover{ background:var(--studio-bg-hover); color:var(--studio-text-primary) }
|
||||
.avz-control-btn--danger{ color:var(--au-prejoin-danger); background:rgba(254,202,202,1) }
|
||||
|
||||
.avz-input{ width:100%; padding:12px 16px; border-radius:8px; border:1px solid var(--studio-border) }
|
||||
.avz-submit{ width:100%; padding:14px; background:var(--studio-accent); color:#fff; border-radius:8px }
|
||||
|
||||
83
packages/avanza-ui/src/tokens.css
Normal file
83
packages/avanza-ui/src/tokens.css
Normal file
@ -0,0 +1,83 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-bg: #ffffff;
|
||||
--color-text: #1a1a1a;
|
||||
--color-muted: #666666;
|
||||
--color-video-bg: #0a0a1a;
|
||||
--color-badge-bg: rgba(99, 102, 241, 0.9); /* #6366f1 @ 0.9 */
|
||||
|
||||
--color-mic-bg: #f8f9fa;
|
||||
--color-muted-light: #e8e8e8;
|
||||
--color-mic-from: #22c55e;
|
||||
--color-mic-to: #86efac;
|
||||
|
||||
--color-control-border: #e5e5e5;
|
||||
--color-control-hover-bg: #fee2e2;
|
||||
--color-control-disabled-bg: #fecaca;
|
||||
--color-control-disabled-text: #dc2626;
|
||||
|
||||
--color-kbd-bg: #374151;
|
||||
--color-info: #3b82f6;
|
||||
|
||||
--color-input-border: #d1d5db;
|
||||
--color-input-placeholder: #9ca3af;
|
||||
|
||||
--color-submit: #2563eb;
|
||||
--color-submit-hover: #1d4ed8;
|
||||
--color-submit-active: #1e40af;
|
||||
|
||||
/* Typography */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--fs-h1: 1.75rem; /* 28px */
|
||||
--fs-body: 0.875rem; /* 14px */
|
||||
--fs-small: 0.6875rem; /* 11px */
|
||||
--fs-btn: 0.8125rem; /* 13px */
|
||||
--fs-submit: 0.9375rem; /* 15px */
|
||||
|
||||
/* Radii */
|
||||
--radius-lg: 12px;
|
||||
--radius-md: 8px;
|
||||
--radius-pill: 20px;
|
||||
--radius-meter: 16px;
|
||||
|
||||
/* Layout */
|
||||
--container-max-width: 628px;
|
||||
--gap-default: 16px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-controls: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* Misc */
|
||||
--kbd-padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* Small helper utilities used by avanza-ui components when not using Tailwind */
|
||||
.avz-kbd {
|
||||
background-color: var(--color-kbd-bg);
|
||||
padding: var(--kbd-padding);
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
font-size: var(--fs-small);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.avz-badge {
|
||||
background: var(--color-badge-bg);
|
||||
color: #fff;
|
||||
padding: 8px 20px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.avz-preview {
|
||||
background: var(--color-video-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avz-control-shadow {
|
||||
box-shadow: var(--shadow-controls);
|
||||
}
|
||||
|
||||
46
packages/avanza-ui/src/tokens.ts
Normal file
46
packages/avanza-ui/src/tokens.ts
Normal file
@ -0,0 +1,46 @@
|
||||
export const tokens = {
|
||||
colors: {
|
||||
bg: '#ffffff',
|
||||
text: '#1a1a1a',
|
||||
muted: '#666666',
|
||||
videoBg: '#0a0a1a',
|
||||
badgeBg: 'rgba(99,102,241,0.9)',
|
||||
micFrom: '#22c55e',
|
||||
micTo: '#86efac',
|
||||
controlBorder: '#e5e5e5',
|
||||
controlHoverBg: '#fee2e2',
|
||||
controlDisabledBg: '#fecaca',
|
||||
controlDisabledText: '#dc2626',
|
||||
kbdBg: '#374151',
|
||||
info: '#3b82f6',
|
||||
inputBorder: '#d1d5db',
|
||||
inputPlaceholder: '#9ca3af',
|
||||
submit: '#2563eb',
|
||||
submitHover: '#1d4ed8',
|
||||
submitActive: '#1e40af',
|
||||
},
|
||||
radii: {
|
||||
lg: '12px',
|
||||
md: '8px',
|
||||
pill: '20px',
|
||||
meter: '16px',
|
||||
},
|
||||
sizes: {
|
||||
containerMaxWidth: '628px',
|
||||
gapDefault: '16px',
|
||||
},
|
||||
typography: {
|
||||
fontSans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
||||
fsH1: '1.75rem',
|
||||
fsBody: '0.875rem',
|
||||
fsSmall: '0.6875rem',
|
||||
fsBtn: '0.8125rem',
|
||||
fsSubmit: '0.9375rem',
|
||||
},
|
||||
shadows: {
|
||||
controls: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
|
||||
},
|
||||
} as const;
|
||||
|
||||
export type Tokens = typeof tokens;
|
||||
|
||||
33
packages/avanza-ui/src/utils/platform.ts
Normal file
33
packages/avanza-ui/src/utils/platform.ts
Normal file
@ -0,0 +1,33 @@
|
||||
// Utility to detect platform and provide modifier key label
|
||||
export const isBrowser = typeof window !== 'undefined' && typeof navigator !== 'undefined';
|
||||
|
||||
export function isMacPlatform(): boolean {
|
||||
if (!isBrowser) return false;
|
||||
const platform = navigator.platform || '';
|
||||
const ua = navigator.userAgent || '';
|
||||
return /Mac|iPhone|iPad|iPod/i.test(platform) || /Macintosh/i.test(ua);
|
||||
}
|
||||
|
||||
export function isWindowsPlatform(): boolean {
|
||||
if (!isBrowser) return false;
|
||||
const platform = navigator.platform || '';
|
||||
return /Win(dows)?/i.test(platform);
|
||||
}
|
||||
|
||||
export function isLinuxPlatform(): boolean {
|
||||
if (!isBrowser) return false;
|
||||
const platform = navigator.platform || '';
|
||||
return /Linux|X11/i.test(platform) && !/Android/i.test(navigator.userAgent || '');
|
||||
}
|
||||
|
||||
export function modifierKeyLabel(): { key: 'Meta' | 'Ctrl'; display: string } {
|
||||
return isMacPlatform() ? { key: 'Meta', display: '⌘' } : { key: 'Ctrl', display: 'CTRL' };
|
||||
}
|
||||
|
||||
export default {
|
||||
isMacPlatform,
|
||||
isWindowsPlatform,
|
||||
isLinuxPlatform,
|
||||
modifierKeyLabel,
|
||||
};
|
||||
|
||||
0
packages/broadcast-panel/e2e/visual-prejoin.spec.ts
Normal file
0
packages/broadcast-panel/e2e/visual-prejoin.spec.ts
Normal file
259
packages/broadcast-panel/src/features/studio/PreJoin.module.css
Normal file
259
packages/broadcast-panel/src/features/studio/PreJoin.module.css
Normal file
@ -0,0 +1,259 @@
|
||||
/* filepath: /home/xesar/Documentos/Nextream/AvanzaCast/packages/broadcast-panel/src/features/studio/PreJoin.module.css */
|
||||
:root{
|
||||
--card-bg: var(--studio-bg-elevated, #ffffff);
|
||||
--muted: var(--studio-text-secondary, #6b7280);
|
||||
--accent: var(--studio-accent, #4f46e5);
|
||||
--badge-bg: rgba(99,102,241,0.9); /* keep template purple */
|
||||
--danger: var(--studio-danger, #ef4444);
|
||||
--danger-700: #b91c1c;
|
||||
}
|
||||
|
||||
.prejoinContainer{
|
||||
max-width: 628px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card{
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.header > div:first-child{
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--studio-text-primary, #1a1a1a);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.note{
|
||||
font-size: 14px;
|
||||
color: var(--studio-text-secondary, #666666);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* layout: video + mic-status side panel like template */
|
||||
.contentRow{
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.previewColumn{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.previewCard{
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: var(--studio-bg-tertiary, #0a0a1a);
|
||||
position: relative;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.videoEl{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: #0b0b0b;
|
||||
}
|
||||
|
||||
.badge{
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
background: var(--badge-bg);
|
||||
color: #fff;
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 20px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.micPanel{
|
||||
background-color: var(--studio-bg-secondary, #f8f9fa);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
min-width: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mic-icon{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.mic-meter{
|
||||
width: 32px;
|
||||
height: 80px;
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mic-level{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20%;
|
||||
background: linear-gradient(to top, #22c55e, #86efac);
|
||||
border-radius: 16px;
|
||||
transition: height 0.1s ease-out;
|
||||
}
|
||||
|
||||
.micStatus{
|
||||
color: #22c55e;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mic-device{
|
||||
font-size: 11px;
|
||||
color: var(--studio-text-disabled, #999999);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Controls wrapper (segmented) - copiar exactamente del template */
|
||||
.controlsRow{
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--studio-border, #e5e5e5);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 24px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.controlButtonLocal{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* hover and active states like template */
|
||||
.controlButtonLocal:hover{
|
||||
color: var(--studio-text-primary, #1a1a1a);
|
||||
background-color: rgba(254,226,226,1); /* template fee2e2 */
|
||||
}
|
||||
|
||||
/* disabled / error */
|
||||
.controlsRow > button[data-active="false"],
|
||||
.controlButtonLocal.disabled{
|
||||
color: var(--danger, #dc2626);
|
||||
background-color: rgba(254,202,202,1);
|
||||
}
|
||||
.controlButtonLocal.disabled:hover,
|
||||
.controlsRow > button[data-active="false"]:hover{
|
||||
color: var(--danger-700, #b91c1c);
|
||||
background-color: rgba(252,165,165,1);
|
||||
}
|
||||
|
||||
.controlButtonLocal > span:first-child{
|
||||
width:24px;
|
||||
height:24px;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.controlButtonLocal > span:first-child svg{
|
||||
width:24px;
|
||||
height:24px;
|
||||
}
|
||||
|
||||
.controlButtonLocal .controlButtonLabel{
|
||||
font-size:13px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* hints (tooltip) */
|
||||
.control-hint{
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--studio-text-primary, #1a1a1a);
|
||||
color: white;
|
||||
padding:6px 12px;
|
||||
border-radius:6px;
|
||||
font-size:12px;
|
||||
white-space:nowrap;
|
||||
opacity:0;
|
||||
pointer-events:none;
|
||||
transition: opacity 0.2s;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.controlButtonLocal:hover .control-hint{ opacity:1 }
|
||||
|
||||
/* Form elements */
|
||||
.roomTitle{
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-weight:500;
|
||||
color: var(--studio-text-primary, #1a1a1a);
|
||||
}
|
||||
|
||||
.input{
|
||||
width:100%;
|
||||
padding:12px 16px;
|
||||
border-radius:8px;
|
||||
border:1px solid var(--studio-border, #d1d5db);
|
||||
font-size:14px;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.input:focus{ outline:none; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); border-color:var(--studio-accent, #3b82f6) }
|
||||
|
||||
.actions{ display:flex; gap:12px; margin-top:8px }
|
||||
|
||||
.cancelBtn{ background:transparent; border: none; padding:10px 14px; border-radius:8px }
|
||||
.primaryBtn{ background:var(--studio-accent, #2563eb); color:#fff; padding:12px 18px; border-radius:8px; border:none }
|
||||
|
||||
.shortcutsLegend{ text-align:center; color: var(--studio-text-muted, #9ca3af); margin-top: 8px }
|
||||
.kbd{ background-color: #374151; padding: 2px 6px; border-radius:3px; font-family: monospace; font-size:11px; margin: 0 2px }
|
||||
|
||||
@media (max-width: 768px){
|
||||
.contentRow{ flex-direction: column; }
|
||||
.controlsRow{ display:flex; flex-direction: column; gap:8px; padding:0; background:transparent; box-shadow:none; border:none }
|
||||
.controlButtonLocal{ width:100%; padding:12px 16px }
|
||||
.previewCard{ aspect-ratio: 16/9; }
|
||||
.micPanel{ min-width: auto; width: 100%; }
|
||||
}
|
||||
215
packages/broadcast-panel/src/features/studio/PreJoin.tsx
Normal file
215
packages/broadcast-panel/src/features/studio/PreJoin.tsx
Normal file
@ -0,0 +1,215 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import styles from './PreJoin.module.css'
|
||||
import { ControlBar, ControlButton, MicrophoneMeter, modifierKeyLabel, isMacPlatform } from 'avanza-ui'
|
||||
import { FiMic, FiVideo, FiSettings } from 'react-icons/fi'
|
||||
|
||||
type Props = {
|
||||
roomName?: string
|
||||
onProceed: () => void
|
||||
onCancel?: () => void
|
||||
serverUrl?: string
|
||||
token?: string
|
||||
}
|
||||
|
||||
export default function PreJoin({ roomName, onProceed, onCancel }: Props) {
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null)
|
||||
const [name, setName] = useState(() => {
|
||||
try { return localStorage.getItem('avanzacast_user') || '' } catch { return '' }
|
||||
})
|
||||
const [micEnabled, setMicEnabled] = useState(true)
|
||||
const [camEnabled, setCamEnabled] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [isChecking, setIsChecking] = useState(false)
|
||||
// checkbox state is local only; do NOT persist skip preference so PreJoin always appears
|
||||
const [skipNextTime, setSkipNextTime] = useState<boolean>(false)
|
||||
// keep preview stream active for meter and preview
|
||||
const [previewStream, setPreviewStream] = useState<MediaStream | null>(null)
|
||||
|
||||
// Use shared platform utils
|
||||
const isMac = isMacPlatform()
|
||||
const modLabel = modifierKeyLabel()
|
||||
const micHint = `${modLabel.display} + D`
|
||||
const camHint = `${modLabel.display} + E`
|
||||
|
||||
useEffect(() => {
|
||||
// ensure any old skip flag does not affect behavior: remove legacy key
|
||||
try { localStorage.removeItem('broadcast:skipPrejoin') } catch (e) {}
|
||||
// request preview stream whenever toggles change
|
||||
let mounted = true
|
||||
let localStream: MediaStream | null = null
|
||||
;(async () => {
|
||||
try {
|
||||
if (!navigator?.mediaDevices?.getUserMedia) return
|
||||
localStream = await navigator.mediaDevices.getUserMedia({ audio: micEnabled, video: camEnabled })
|
||||
if (!mounted) {
|
||||
try { localStream.getTracks().forEach(t => t.stop()) } catch (e) {}
|
||||
return
|
||||
}
|
||||
setPreviewStream(localStream)
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = localStream
|
||||
videoRef.current.play().catch(() => {})
|
||||
}
|
||||
} catch (e: any) {
|
||||
// ignore permission errors
|
||||
}
|
||||
})()
|
||||
|
||||
// Keyboard shortcuts: toggle mic/camera. Support Ctrl on Windows/Linux and Meta (⌘) on macOS.
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
// ignore when focused on input/textarea or when modifier keys conflict with browser shortcuts
|
||||
const active = document.activeElement;
|
||||
const tag = active && (active as HTMLElement).tagName;
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA' || (active as HTMLElement)?.isContentEditable) return;
|
||||
|
||||
const mod = isMac ? e.metaKey : e.ctrlKey
|
||||
|
||||
// Mod + D -> toggle mic
|
||||
if (mod && !e.shiftKey && (e.key === 'd' || e.key === 'D')) {
|
||||
e.preventDefault()
|
||||
setMicEnabled(v => !v)
|
||||
}
|
||||
|
||||
// Mod + E -> toggle camera (requested)
|
||||
if (mod && !e.shiftKey && (e.key === 'e' || e.key === 'E')) {
|
||||
e.preventDefault()
|
||||
setCamEnabled(v => !v)
|
||||
}
|
||||
|
||||
// Mod + Shift + C -> alternate camera shortcut (also supported)
|
||||
if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'c' || e.key === 'C')) {
|
||||
e.preventDefault()
|
||||
setCamEnabled(v => !v)
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKeyDown)
|
||||
|
||||
return () => {
|
||||
mounted = false
|
||||
if (localStream) {
|
||||
try { localStream.getTracks().forEach(t => t.stop()) } catch (e) {}
|
||||
}
|
||||
// clear previewStream state
|
||||
setPreviewStream(null)
|
||||
window.removeEventListener('keydown', onKeyDown)
|
||||
}
|
||||
}, [micEnabled, camEnabled])
|
||||
|
||||
const handleProceed = async () => {
|
||||
setError(null)
|
||||
setIsChecking(true)
|
||||
try {
|
||||
// request permissions explicitly
|
||||
await navigator.mediaDevices.getUserMedia({ audio: micEnabled, video: camEnabled })
|
||||
// save name
|
||||
try { if (name) localStorage.setItem('avanzacast_user', name) } catch (e) {}
|
||||
// proceed to connect
|
||||
onProceed()
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'No se pudo acceder a la cámara/micrófono')
|
||||
} finally {
|
||||
setIsChecking(false)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMic = async () => {
|
||||
setMicEnabled(v => !v)
|
||||
}
|
||||
|
||||
const toggleCam = async () => {
|
||||
setCamEnabled(v => !v)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.prejoinContainer}>
|
||||
<div className={styles.card}>
|
||||
<div className={styles.header}>
|
||||
<div>Configura tu estudio</div>
|
||||
<div className={styles.note}>Entrar al estudio no iniciará automáticamente la transmisión.</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.contentRow}>
|
||||
<div className={styles.previewColumn}>
|
||||
<div className={styles.previewCard}>
|
||||
<video ref={videoRef} className={styles.videoEl} playsInline muted />
|
||||
<div className={styles.badge}>{name || 'Invitado'}</div>
|
||||
<div className={styles.micPanel}>
|
||||
<div className={styles.micPanelInner}>
|
||||
<MicrophoneMeter level={previewStream ? 1 : 0} />
|
||||
<div className={styles.micStatus}>{micEnabled ? 'El micrófono está funcionando' : 'Micrófono desactivado'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.controlsRow}>
|
||||
<ControlButton
|
||||
className={styles.controlButtonLocal}
|
||||
icon={<FiMic />}
|
||||
label={micEnabled ? 'Desactivar audio' : 'Activar audio'}
|
||||
active={micEnabled}
|
||||
danger={!micEnabled}
|
||||
layout="column"
|
||||
variant="studio"
|
||||
onClick={toggleMic}
|
||||
hint={micHint}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
<ControlButton
|
||||
className={styles.controlButtonLocal}
|
||||
icon={<FiVideo />}
|
||||
label={camEnabled ? 'Detener cámara' : 'Iniciar cámara'}
|
||||
active={camEnabled}
|
||||
danger={!camEnabled}
|
||||
layout="column"
|
||||
variant="studio"
|
||||
onClick={toggleCam}
|
||||
hint={camHint}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
<ControlButton
|
||||
className={styles.controlButtonLocal}
|
||||
icon={<FiSettings />}
|
||||
label={'Configuración'}
|
||||
active={true}
|
||||
layout="column"
|
||||
variant="studio"
|
||||
onClick={() => { /* abrir modal de settings si aplica */ }}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Leyenda de atajos: muestra las combinaciones detectadas (ej: ⌘ + D) */}
|
||||
<div className={styles.shortcutsLegend} aria-hidden="true">
|
||||
Atajos: <span className={styles.kbd}>{micHint}</span> mic · <span className={styles.kbd}>{camHint}</span> cámara
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles.sideColumn}>
|
||||
{error && <div className={styles.error}>{error}</div>}
|
||||
|
||||
<div className={styles.roomTitle}>Nombre para mostrar</div>
|
||||
<input className={styles.input} value={name} onChange={e => setName(e.target.value)} placeholder="Tu nombre" />
|
||||
|
||||
<div className={styles.roomTitle}>Título (opcional)</div>
|
||||
<input className={styles.input} placeholder="p. ej.: Founder of Creativity Inc" />
|
||||
|
||||
<div className={styles.checkboxRow}>
|
||||
<input id="skipNext" type="checkbox" checked={skipNextTime} onChange={e => setSkipNextTime(e.target.checked)} />
|
||||
<label htmlFor="skipNext">Omitir PreJoin la próxima vez</label>
|
||||
</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
<button className={styles.cancelBtn} onClick={() => { onCancel?.() }}>Cancelar</button>
|
||||
<button className={styles.primaryBtn} onClick={handleProceed} disabled={isChecking}>{isChecking ? 'Comprobando...' : 'Entrar al estudio'}</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -2,7 +2,8 @@ import React, { useState, useEffect, useRef } from "react";
|
||||
import StudioRoom from "./StudioRoom";
|
||||
import "./StudioPortal.css";
|
||||
import { Room } from "livekit-client";
|
||||
import AutoRequestAndInject from "./AutoRequestAndInject";
|
||||
import AutoRequestAndInject from './AutoRequestAndInject'
|
||||
import PreJoin from './PreJoin'
|
||||
|
||||
export interface StudioPortalProps {
|
||||
serverUrl: string;
|
||||
@ -47,6 +48,8 @@ export default function StudioPortal({
|
||||
// New: tokenFromMessage state and connectError
|
||||
const [tokenFromMessage, setTokenFromMessage] = useState<string | null>(null);
|
||||
const [connectError, setConnectError] = useState<string | null>(null);
|
||||
// Always show PreJoin at startup (rendered as a separate page)
|
||||
const [showPreJoin, setShowPreJoin] = useState<boolean>(true);
|
||||
|
||||
// Connect function used by UI or auto when token arrives
|
||||
const connectWithToken = async (useToken?: string, useServer?: string) => {
|
||||
@ -81,6 +84,26 @@ export default function StudioPortal({
|
||||
}
|
||||
};
|
||||
|
||||
// If we have a token and we're not connected, show PreJoin as a separate page
|
||||
if (!isExternalRoom && (tokenFromMessage || token) && (tokenFromMessage || token).trim() && !isConnected && showPreJoin) {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f3f4f6', padding: 20 }}>
|
||||
<PreJoin
|
||||
roomName={roomName}
|
||||
onProceed={() => {
|
||||
// hide prejoin and connect
|
||||
setShowPreJoin(false);
|
||||
setTimeout(() => connectWithToken(), 50);
|
||||
}}
|
||||
onCancel={() => {
|
||||
// user cancelled prejoin: hide it so portal UI appears (no auto-connect)
|
||||
setShowPreJoin(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const disconnectLocalRoom = () => {
|
||||
try {
|
||||
if (localRoomRef.current) {
|
||||
@ -103,10 +126,11 @@ export default function StudioPortal({
|
||||
!isConnected &&
|
||||
!isConnecting
|
||||
) {
|
||||
connectWithToken();
|
||||
// If prejoin shown, wait for user to confirm; otherwise auto-connect
|
||||
if (!showPreJoin) connectWithToken();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token, tokenFromMessage, serverUrl]);
|
||||
}, [token, tokenFromMessage, serverUrl, showPreJoin]);
|
||||
|
||||
// Listen for postMessage tokens from Broadcast Panel (or parent)
|
||||
useEffect(() => {
|
||||
@ -280,15 +304,27 @@ export default function StudioPortal({
|
||||
</div>
|
||||
|
||||
<div className={`preview-wrapper ${activeLayout}`}>
|
||||
<StudioRoom
|
||||
serverUrl={serverUrl}
|
||||
token={tokenFromMessage || token}
|
||||
roomName={roomName}
|
||||
onConnected={onRoomConnected}
|
||||
onDisconnected={onRoomDisconnected}
|
||||
room={effectiveRoom}
|
||||
/>
|
||||
</div>
|
||||
{(!isExternalRoom && (tokenFromMessage || token) && !isConnected && showPreJoin) ? (
|
||||
<PreJoin
|
||||
roomName={roomName}
|
||||
onProceed={() => {
|
||||
setShowPreJoin(false)
|
||||
// allow effect to pick up and connect
|
||||
setTimeout(() => connectWithToken(), 50)
|
||||
}}
|
||||
onCancel={() => { setShowPreJoin(false) }}
|
||||
/>
|
||||
) : (
|
||||
<StudioRoom
|
||||
serverUrl={serverUrl}
|
||||
token={tokenFromMessage || token}
|
||||
roomName={roomName}
|
||||
onConnected={onRoomConnected}
|
||||
onDisconnected={onRoomDisconnected}
|
||||
room={effectiveRoom}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="controls-bar">
|
||||
<div className="layout-presets">
|
||||
|
||||
@ -57,12 +57,37 @@ module.exports = {
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
},
|
||||
/* Prejoin-specific tokens */
|
||||
video: '#0a0a1a',
|
||||
badge: '#6366f1',
|
||||
'badge-alpha': 'rgba(99,102,241,0.9)',
|
||||
mic: {
|
||||
from: '#22c55e',
|
||||
to: '#86efac',
|
||||
},
|
||||
control: {
|
||||
border: '#e5e5e5',
|
||||
hover: '#fee2e2',
|
||||
disabledBg: '#fecaca',
|
||||
disabledText: '#dc2626',
|
||||
},
|
||||
kbd: '#374151',
|
||||
input: {
|
||||
border: '#d1d5db',
|
||||
placeholder: '#9ca3af',
|
||||
},
|
||||
submit: {
|
||||
DEFAULT: '#2563eb',
|
||||
hover: '#1d4ed8',
|
||||
active: '#1e40af',
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
sm: '0 2px 4px 0 rgb(60 72 88 / 0.15)',
|
||||
DEFAULT: '0 0 3px rgb(60 72 88 / 0.15)',
|
||||
md: '0 5px 13px rgb(60 72 88 / 0.20)',
|
||||
lg: '0 10px 25px -3px rgb(60 72 88 / 0.15)',
|
||||
controls: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
|
||||
},
|
||||
spacing: {
|
||||
0.75: '0.1875rem',
|
||||
@ -72,6 +97,18 @@ module.exports = {
|
||||
'1200': '71.25rem',
|
||||
'992': '60rem',
|
||||
'768': '45rem',
|
||||
'prejoin-container': '628px',
|
||||
},
|
||||
borderRadius: {
|
||||
panel: '12px',
|
||||
btn: '8px',
|
||||
pill: '20px',
|
||||
meter: '16px',
|
||||
},
|
||||
fontSize: {
|
||||
'h1-prejoin': '28px',
|
||||
'btn-sm': '13px',
|
||||
'btn-lg': '15px',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user