Implement code changes to enhance functionality and improve performance

This commit is contained in:
Cesar Mendivil 2025-11-08 00:01:25 -07:00
parent 78e83b46dd
commit eb26ef7835
2 changed files with 35 additions and 28 deletions

BIN
docs/text40.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

View File

@ -167,15 +167,21 @@ function Studio() {
>
<SceneProvider>
<div className="flex flex-col h-screen bg-gray-900 overflow-hidden">
<div className="flex-none">
{/* Header */}
<div className="flex-none z-40">
<StudioHeader roomName={roomName} userName={userName} />
</div>
{/* Contenedor principal entre header y footer */}
<div className="flex-1 overflow-hidden relative min-h-0">
{/* Panel izquierdo */}
<div
className={`absolute left-0 top-0 bottom-0 z-20 transition-transform duration-300 ${showLeftPanel ? "translate-x-0" : "-translate-x-full"}`}
>
<StudioLeftSidebar />
</div>
{/* Botón toggle panel izquierdo */}
<button
onClick={() => setShowLeftPanel(!showLeftPanel)}
className="absolute top-1/2 -translate-y-1/2 z-30 transition-all duration-300"
@ -211,12 +217,12 @@ function Studio() {
/>
</svg>
</button>
{/* Contenedor del estudio (StreamView + ControlPanel) */}
<div
className="absolute top-0 transition-all duration-300 flex flex-col overflow-hidden"
className="absolute top-0 bottom-0 transition-all duration-300 flex flex-col overflow-hidden"
style={{
left: showLeftPanel ? "256px" : "0px",
right: showRightPanel ? "480px" : "80px", // 480px = panel (384px) + tabs (80px + 16px gap)
bottom: "80px", // Espacio para el ControlBar
right: showRightPanel ? "480px" : "80px",
}}
>
<div className="flex-1 flex items-center justify-center px-4 pt-4 overflow-hidden min-h-0">
@ -268,31 +274,32 @@ function Studio() {
isCollapsed={!showRightPanel}
/>
</div>
{/* ControlBar de LiveKit centrado en el footer */}
<div
className="absolute bottom-0 h-20 z-20 transition-all duration-300 bg-gray-900/95 backdrop-blur-sm border-t border-gray-800"
style={{
left: showLeftPanel ? "256px" : "0px",
right: showRightPanel ? "480px" : "80px",
</div>
{/* ControlBar como footer fijo */}
<div
className="flex-none h-20 z-40 transition-all duration-300 bg-gray-900/95 backdrop-blur-sm border-t border-gray-800"
style={{
marginLeft: showLeftPanel ? "256px" : "0px",
marginRight: showRightPanel ? "480px" : "80px",
}}
>
<ControlBar
variation="verbose"
controls={{
microphone: true,
camera: true,
screenShare: true,
leave: true,
}}
>
<ControlBar
variation="verbose"
controls={{
microphone: true,
camera: true,
screenShare: true,
leave: true,
}}
style={{
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0 1rem',
}}
/>
</div>
style={{
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0 1rem',
}}
/>
</div>
</div>
</SceneProvider>