myCustomBroadcastInterface function

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

Complete Custom Broadcast Interface This replaces the entire MediaSFU broadcast interface with a custom design

Implementation

Widget myCustomBroadcastInterface({required MediasfuParameters parameters}) {
  return Scaffold(
    backgroundColor: Colors.red.shade900,
    appBar: AppBar(
      title: Text('🔴 Live Broadcast Studio'),
      backgroundColor: Colors.red.shade800,
      foregroundColor: Colors.white,
      elevation: 0,
    ),
    body: Column(
      children: [
        // Broadcast status header
        Container(
          width: double.infinity,
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.red.shade800, Colors.orange.shade600],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Text(
                      'LIVE',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 12,
                      ),
                    ),
                  ),
                  SizedBox(width: 12),
                  Expanded(
                    child: Text(
                      'Broadcasting: ${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(
                    'Viewers: ${parameters.participants.length}',
                    style: TextStyle(color: Colors.white70, fontSize: 14),
                  ),
                  Spacer(),
                  Icon(Icons.person, color: Colors.white70, size: 16),
                  SizedBox(width: 4),
                  Text(
                    'Host: ${parameters.member}',
                    style: TextStyle(color: Colors.white70, fontSize: 14),
                  ),
                ],
              ),
            ],
          ),
        ),

        // Broadcast 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: [
              _buildBroadcastControlButton(
                onPressed: () => parameters.clickVideo(
                  ClickVideoOptions(parameters: parameters),
                ),
                icon: parameters.videoAction ? Icons.videocam : Icons.videocam_off,
                label: parameters.videoAction ? 'Camera On' : 'Camera Off',
                isActive: parameters.videoAction,
                activeColor: Colors.green,
                inactiveColor: Colors.red,
              ),
              _buildBroadcastControlButton(
                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,
              ),
              _buildBroadcastControlButton(
                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 broadcast area - viewers 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.red.shade700,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(16),
                      topRight: Radius.circular(16),
                    ),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.visibility, color: Colors.white),
                      SizedBox(width: 8),
                      Text(
                        'Live Viewers (${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(
                                'No viewers joined yet',
                                style: TextStyle(
                                  color: Colors.white70,
                                  fontSize: 16,
                                ),
                              ),
                              SizedBox(height: 8),
                              Text(
                                'Share your broadcast link to get viewers!',
                                style: TextStyle(
                                  color: Colors.white54,
                                  fontSize: 14,
                                ),
                              ),
                            ],
                          ),
                        )
                      : ListView.builder(
                          padding: const EdgeInsets.all(16),
                          itemCount: parameters.participants.length,
                          itemBuilder: (context, index) {
                            final participant = parameters.participants[index];
                            return _buildBroadcastViewerCard(participant, Colors.red.shade600);
                          },
                        ),
                ),
              ],
            ),
          ),
        ),

        // Broadcast 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: [
              _buildBroadcastActionButton(
                onPressed: () {
                  // Custom streaming settings
                },
                icon: Icons.settings_input_composite,
                label: 'Stream Settings',
                color: Colors.blue.shade600,
              ),
              _buildBroadcastActionButton(
                onPressed: () {
                  // Custom viewer management
                },
                icon: Icons.group,
                label: 'Manage Viewers',
                color: Colors.green.shade600,
              ),
              _buildBroadcastActionButton(
                onPressed: () {
                  // End broadcast
                },
                icon: Icons.stop_circle,
                label: 'End Broadcast',
                color: Colors.red.shade600,
              ),
            ],
          ),
        ),
      ],
    ),
  );
}