Cesar Mendivil
f57ce90c11
- Added props for handling presentation and screen sharing actions. - Implemented buttons for opening presentation panel and changing layouts (grid/focus) and modes (video/audio). - Updated UI to reflect active presentations and added functionality to clear presentations. fix: Adjust StudioLeftSidebar and StudioRightPanel for full height - Modified styles to ensure both sidebars occupy full height of the container. feat: Introduce ParticipantsPanel for managing participants in the conference - Created ParticipantsPanel component to display connected and invited participants. - Integrated API calls to fetch invited participants and handle connection status. feat: Implement PresentationPanel for sharing presentations - Developed PresentationPanel component to handle file uploads and screen sharing. refactor: Update StudioVideoArea to support layout and mode changes - Refactored StudioVideoArea to accept layout and mode props, rendering appropriate conference views. feat: Add AudioConference and VideoConference prefabs for audio and video handling - Created AudioConference and VideoConference components to manage respective media streams. feat: Introduce Chat component for real-time messaging - Developed Chat component to facilitate messaging between participants. feat: Implement ControlBar for user controls in the conference - Created ControlBar component for managing participant actions like leaving the conference and toggling audio/video. feat: Add PreJoin component for pre-conference setup - Developed PreJoin component to allow users to preview video before joining the conference. chore: Update Vite configuration for better module resolution - Enhanced Vite config to include path aliases for easier imports across the project. chore: Add TypeScript definitions for environment variables - Created env.d.ts to define types for environment variables used in the project.
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import { DEMO_PARTICIPANTS } from '../config/demo'
|
|
import VideoConference from '../prefabs/VideoConference'
|
|
import AudioConference from '../prefabs/AudioConference'
|
|
|
|
interface StudioVideoAreaProps {
|
|
isDemoMode?: boolean
|
|
layout?: 'grid' | 'focus'
|
|
mode?: 'video' | 'audio'
|
|
}
|
|
|
|
const DemoModeView: React.FC = () => {
|
|
return (
|
|
<div className="flex-1 flex flex-col bg-gray-950">
|
|
<div className="flex-1 p-4 grid grid-cols-2 gap-2">
|
|
{DEMO_PARTICIPANTS.map((p) => (
|
|
<div key={p.id} className="bg-gray-800 rounded-lg p-3 flex flex-col items-center justify-center">
|
|
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center text-white text-2xl font-bold mb-2">
|
|
{p.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
<div className="text-white text-sm font-medium">{p.name}</div>
|
|
<div className="text-gray-400 text-xs">{p.isMicrophoneEnabled ? 'Mic encendido' : 'Mic apagado'}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="bg-gray-900 border-t border-gray-800 p-4">
|
|
<div className="flex items-center gap-3">
|
|
<h4 className="text-white text-sm font-medium">Participantes en Studio</h4>
|
|
<span className="text-gray-400 text-xs">({DEMO_PARTICIPANTS.length})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const LiveKitModeView: React.FC<{ layout: 'grid' | 'focus'; mode: 'video' | 'audio' }> = ({ layout, mode }) => {
|
|
if (mode === 'audio') return <AudioConference />
|
|
return <VideoConference layout={layout} />
|
|
}
|
|
|
|
const StudioVideoArea: React.FC<StudioVideoAreaProps> = ({ isDemoMode = false, layout = 'grid', mode = 'video' }) => {
|
|
return isDemoMode ? <DemoModeView /> : <LiveKitModeView layout={layout} mode={mode} />
|
|
}
|
|
|
|
export default StudioVideoArea
|