From 3ed1ac7cc2227c07b04a538dabd1e8f174f2256e Mon Sep 17 00:00:00 2001
From: Cesar Mendivil <mendivilrubioc@gmail.com>
Date: Fri, 7 Nov 2025 17:44:04 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20Redise=C3=B1ar=20el=20=C3=A1rea=20centr?=
 =?UTF-8?q?al=20del=20panel=20de=20estudio=20con=20controles=20de=20layout?=
 =?UTF-8?q?=20y=20barra=20de=20herramientas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../studio-panel/src/components/Studio.tsx    | 278 +++++++++++++++++-
 1 file changed, 272 insertions(+), 6 deletions(-)

diff --git a/packages/studio-panel/src/components/Studio.tsx b/packages/studio-panel/src/components/Studio.tsx
index 30ced5e..827f567 100644
--- a/packages/studio-panel/src/components/Studio.tsx
+++ b/packages/studio-panel/src/components/Studio.tsx
@@ -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>