neoris/AvanzaCast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement code changes to enhance functionality and improve performance

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/text40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

63
packages/studio-panel/src/components/Studio.tsx
View File

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