feat: Rediseñar el área central del panel de estudio con controles de layout y barra de herramientas
This commit is contained in:
parent
d3122d64f8
commit
3ed1ac7cc2
@ -326,9 +326,142 @@ const Studio: React.FC<StudioProps> = ({ userName, roomName }) => {
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Área central de video */}
|
||||
<div className="w-full h-full overflow-hidden">
|
||||
<StudioVideoArea isDemoMode={true} layout={layout} mode={mode} />
|
||||
{/* Contenedor central - Área entre paneles laterales */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 transition-all duration-300 ease-in-out"
|
||||
style={{
|
||||
left: showLeftPanel ? '256px' : '0px',
|
||||
right: showRightPanel ? '400px' : '80px'
|
||||
}}
|
||||
>
|
||||
{/* Wrapper interno con padding y espacio para UI adicional */}
|
||||
<div className="w-full h-full flex flex-col p-4 gap-3">
|
||||
{/* Área superior - Controles de layout y calidad */}
|
||||
<div className="flex-none flex items-center justify-between gap-4">
|
||||
{/* Indicador de calidad */}
|
||||
<div className="flex items-center gap-2 bg-gray-800 px-3 py-1.5 rounded-lg">
|
||||
<span className="text-white text-sm font-semibold">720p</span>
|
||||
</div>
|
||||
|
||||
{/* Controles de layout (Grid/Focus) */}
|
||||
<div className="flex items-center gap-2 bg-gray-800 rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setLayout('grid')}
|
||||
className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
|
||||
layout === 'grid'
|
||||
? 'bg-gray-700 text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
title="Vista de cuadrícula"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
<rect x="14" y="14" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setLayout('focus')}
|
||||
className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
|
||||
layout === 'focus'
|
||||
? 'bg-gray-700 text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
title="Vista enfocada"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="18" height="12" strokeWidth="2" rx="1"/>
|
||||
<rect x="4" y="17" width="4" height="4" strokeWidth="2" rx="1"/>
|
||||
<rect x="10" y="17" width="4" height="4" strokeWidth="2" rx="1"/>
|
||||
<rect x="16" y="17" width="4" height="4" strokeWidth="2" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Branding - Logo StreamYard style */}
|
||||
<div className="flex items-center gap-2 text-gray-400 text-xs ml-auto">
|
||||
<span>Producido con</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-6 h-6 bg-gradient-to-br from-pink-500 to-purple-600 rounded flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">A</span>
|
||||
</div>
|
||||
<span className="text-white font-semibold">AvanzaCast</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* StudioVideoArea - Área principal de video (flexible) */}
|
||||
<div className="flex-1 min-h-0 bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden relative">
|
||||
<StudioVideoArea isDemoMode={true} layout={layout} mode={mode} />
|
||||
</div>
|
||||
|
||||
{/* Área inferior - Barra de herramientas estilo StreamYard */}
|
||||
<div className="flex-none flex items-center justify-center gap-3 bg-gray-800/50 backdrop-blur-sm px-4 py-3 rounded-lg">
|
||||
{/* Botones de participantes */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Avatar del presentador */}
|
||||
<div className="relative group">
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center cursor-pointer hover:scale-105 transition-transform">
|
||||
<span className="text-white text-sm font-bold">{userName?.charAt(0)?.toUpperCase() || 'U'}</span>
|
||||
</div>
|
||||
<div className="absolute bottom-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-gray-800"></div>
|
||||
</div>
|
||||
|
||||
{/* Slots de invitados (5 espacios) */}
|
||||
{[1, 2, 3, 4, 5].map((slot) => (
|
||||
<button
|
||||
key={slot}
|
||||
className="w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors group"
|
||||
title={`Invitar participante ${slot}`}
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Separador */}
|
||||
<div className="w-px h-8 bg-gray-600"></div>
|
||||
|
||||
{/* Botón Presentar o Invitar */}
|
||||
<button className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<span className="text-sm">Presentar o invitar</span>
|
||||
</button>
|
||||
|
||||
{/* Separador */}
|
||||
<div className="w-px h-8 bg-gray-600"></div>
|
||||
|
||||
{/* Herramientas adicionales */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Botón editar */}
|
||||
<button className="w-10 h-10 rounded-lg bg-blue-600 hover:bg-blue-700 flex items-center justify-center transition-colors group" title="Editar">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Botón añadir */}
|
||||
<button className="w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors group" title="Añadir elemento">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Botón configuración */}
|
||||
<button className="w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors group" title="Configuración">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Panel derecho - Ajustes (posición absoluta derecha) */}
|
||||
@ -477,9 +610,142 @@ const Studio: React.FC<StudioProps> = ({ userName, roomName }) => {
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Área central de video */}
|
||||
<div className="w-full h-full overflow-hidden">
|
||||
<StudioVideoArea isDemoMode={false} />
|
||||
{/* Contenedor central - Área entre paneles laterales */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 transition-all duration-300 ease-in-out"
|
||||
style={{
|
||||
left: showLeftPanel ? '256px' : '0px',
|
||||
right: showRightPanel ? '400px' : '80px'
|
||||
}}
|
||||
>
|
||||
{/* Wrapper interno con padding y espacio para UI adicional */}
|
||||
<div className="w-full h-full flex flex-col p-4 gap-3">
|
||||
{/* Área superior - Controles de layout y calidad */}
|
||||
<div className="flex-none flex items-center justify-between gap-4">
|
||||
{/* Indicador de calidad */}
|
||||
<div className="flex items-center gap-2 bg-gray-800 px-3 py-1.5 rounded-lg">
|
||||
<span className="text-white text-sm font-semibold">720p</span>
|
||||
</div>
|
||||
|
||||
{/* Controles de layout (Grid/Focus) */}
|
||||
<div className="flex items-center gap-2 bg-gray-800 rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setLayout('grid')}
|
||||
className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
|
||||
layout === 'grid'
|
||||
? 'bg-gray-700 text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
title="Vista de cuadrícula"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
<rect x="14" y="3" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
<rect x="3" y="14" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
<rect x="14" y="14" width="7" height="7" strokeWidth="2" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setLayout('focus')}
|
||||
className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
|
||||
layout === 'focus'
|
||||
? 'bg-gray-700 text-white'
|
||||
: 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
title="Vista enfocada"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="18" height="12" strokeWidth="2" rx="1"/>
|
||||
<rect x="4" y="17" width="4" height="4" strokeWidth="2" rx="1"/>
|
||||
<rect x="10" y="17" width="4" height="4" strokeWidth="2" rx="1"/>
|
||||
<rect x="16" y="17" width="4" height="4" strokeWidth="2" rx="1"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Branding - Logo AvanzaCast */}
|
||||
<div className="flex items-center gap-2 text-gray-400 text-xs ml-auto">
|
||||
<span>Producido con</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-6 h-6 bg-gradient-to-br from-pink-500 to-purple-600 rounded flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">A</span>
|
||||
</div>
|
||||
<span className="text-white font-semibold">AvanzaCast</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* StudioVideoArea - Área principal de video (flexible) */}
|
||||
<div className="flex-1 min-h-0 bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden relative">
|
||||
<StudioVideoArea isDemoMode={false} />
|
||||
</div>
|
||||
|
||||
{/* Área inferior - Barra de herramientas estilo StreamYard */}
|
||||
<div className="flex-none flex items-center justify-center gap-3 bg-gray-800/50 backdrop-blur-sm px-4 py-3 rounded-lg">
|
||||
{/* Botones de participantes */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Avatar del presentador */}
|
||||
<div className="relative group">
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center cursor-pointer hover:scale-105 transition-transform">
|
||||
<span className="text-white text-sm font-bold">{userName?.charAt(0)?.toUpperCase() || 'U'}</span>
|
||||
</div>
|
||||
<div className="absolute bottom-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-gray-800"></div>
|
||||
</div>
|
||||
|
||||
{/* Slots de invitados (5 espacios) */}
|
||||
{[1, 2, 3, 4, 5].map((slot) => (
|
||||
<button
|
||||
key={slot}
|
||||
className="w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors group"
|
||||
title={`Invitar participante ${slot}`}
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Separador */}
|
||||
<div className="w-px h-8 bg-gray-600"></div>
|
||||
|
||||
{/* Botón Presentar o Invitar */}
|
||||
<button className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<span className="text-sm">Presentar o invitar</span>
|
||||
</button>
|
||||
|
||||
{/* Separador */}
|
||||
<div className="w-px h-8 bg-gray-600"></div>
|
||||
|
||||
{/* Herramientas adicionales */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Botón editar */}
|
||||
<button className="w-10 h-10 rounded-lg bg-blue-600 hover:bg-blue-700 flex items-center justify-center transition-colors group" title="Editar">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Botón añadir */}
|
||||
<button className="w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors group" title="Añadir elemento">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Botón configuración */}
|
||||
<button className="w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors group" title="Configuración">
|
||||
<svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user