myCustomConferenceInterface function

Widget myCustomConferenceInterface({
  1. required MediasfuParameters parameters,
})

Complete Custom Conference Interface This replaces the entire MediaSFU conference interface with a custom design

Implementation

Widget myCustomConferenceInterface({required MediasfuParameters parameters}) {
  return Scaffold(
    backgroundColor: Colors.blue.shade900,
    appBar: AppBar(
      title: Text('🎥 Conference Room'),
      backgroundColor: Colors.blue.shade800,
      foregroundColor: Colors.white,
      elevation: 0,
    ),
    body: Column(
      children: [
        // Conference status header
        Container(
          width: double.infinity,
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.blue.shade800, Colors.teal.shade600],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Icon(Icons.meeting_room, color: Colors.white, size: 24),
                  SizedBox(width: 8),
                  Expanded(
                    child: Text(
                      'Conference: ${parameters.roomName}',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 8),
              Row(
                children: [
                  Icon(Icons.people, color: Colors.white70, size: 16),
                  SizedBox(width: 4),
                  Text(
                    'Participants: ${parameters.participants.length}',
                    style: TextStyle(color: Colors.white70, fontSize: 14),
                  ),
                  Spacer(),
                  Icon(Icons.person, color: Colors.white70, size: 16),
                  SizedBox(width: 4),
                  Text(
                    'You: ${parameters.member}',
                    style: TextStyle(color: Colors.white70, fontSize: 14),
                  ),
                ],
              ),
            ],
          ),
        ),

        // Conference controls
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.grey.shade800,
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 4,
                offset: Offset(0, 2),
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildConferenceControlButton(
                onPressed: () => parameters.clickVideo(
                  ClickVideoOptions(parameters: parameters),
                ),
                icon: parameters.videoAction ? Icons.videocam : Icons.videocam_off,
                label: parameters.videoAction ? 'Video On' : 'Video Off',
                isActive: parameters.videoAction,
                activeColor: Colors.green,
                inactiveColor: Colors.red,
              ),
              _buildConferenceControlButton(
                onPressed: () => parameters.clickAudio(
                  ClickAudioOptions(parameters: parameters),
                ),
                icon: parameters.micAction ? Icons.mic : Icons.mic_off,
                label: parameters.micAction ? 'Mic On' : 'Mic Off',
                isActive: parameters.micAction,
                activeColor: Colors.green,
                inactiveColor: Colors.red,
              ),
              _buildConferenceControlButton(
                onPressed: () => parameters.clickScreenShare(
                  ClickScreenShareOptions(parameters: parameters),
                ),
                icon: parameters.screenAction
                    ? Icons.stop_screen_share
                    : Icons.screen_share,
                label: parameters.screenAction ? 'Stop Share' : 'Share Screen',
                isActive: parameters.screenAction,
                activeColor: Colors.orange,
                inactiveColor: Colors.blue,
              ),
            ],
          ),
        ),

        // Main conference area - participants list
        Expanded(
          child: Container(
            margin: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.grey.shade800,
              borderRadius: BorderRadius.circular(16),
            ),
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: Colors.blue.shade700,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(16),
                      topRight: Radius.circular(16),
                    ),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.group, color: Colors.white),
                      SizedBox(width: 8),
                      Text(
                        'Conference Participants (${parameters.participants.length})',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: parameters.participants.isEmpty
                      ? Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Icon(
                                Icons.people_outline,
                                size: 64,
                                color: Colors.white54,
                              ),
                              SizedBox(height: 16),
                              Text(
                                'Waiting for participants to join...',
                                style: TextStyle(
                                  color: Colors.white70,
                                  fontSize: 16,
                                ),
                              ),
                            ],
                          ),
                        )
                      : ListView.builder(
                          padding: const EdgeInsets.all(16),
                          itemCount: parameters.participants.length,
                          itemBuilder: (context, index) {
                            final participant = parameters.participants[index];
                            return _buildConferenceParticipantCard(participant, Colors.blue.shade600);
                          },
                        ),
                ),
              ],
            ),
          ),
        ),

        // Conference action bar
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.grey.shade800,
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 4,
                offset: Offset(0, -2),
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildConferenceActionButton(
                onPressed: () {
                  // Custom chat functionality
                },
                icon: Icons.chat_bubble,
                label: 'Chat',
                color: Colors.blue.shade600,
              ),
              _buildConferenceActionButton(
                onPressed: () {
                  // Custom recording
                },
                icon: Icons.fiber_manual_record,
                label: 'Record',
                color: Colors.red.shade600,
              ),
              _buildConferenceActionButton(
                onPressed: () {
                  // Leave conference
                },
                icon: Icons.exit_to_app,
                label: 'Leave',
                color: Colors.grey.shade600,
              ),
            ],
          ),
        ),
      ],
    ),
  );
}