MainGridComponent class

A stateless widget rendering the main participant video grid with optional timer overlay.

Displays a fixed-size container holding participant video/audio cards in a Stack layout, with an optional MeetingProgressTimer positioned at the top center. Commonly used as the primary display area in video conferencing interfaces.

Rendering Logic:

1. If showAspect=false → returns invisible Container (Visibility.visible=false)
2. Builds Container with width/height from options
3. Creates Stack containing:
   • All children from options.children (participant cards)
   • MeetingProgressTimer (if showTimer=true) positioned at top-center
4. Applies containerBuilder hook if provided
5. Applies childrenBuilder hook if provided

Layout Structure:

Visibility (showAspect)
  └─ Container (containerBuilder)
     ├─ width/height/backgroundColor/decoration
     └─ Stack
        ├─ ...children (VideoCard/AudioCard widgets)
        └─ Positioned (top: 0, left/right: 0) [IF showTimer]
           └─ Align (center)
              └─ MeetingProgressTimer (timerBuilder)

Timer Positioning:

• Positioned at top of Stack (top: 0, left: 0, right: 0)
• Aligned to Alignment.topCenter
• Renders above all participant cards (last child in Stack)
• Shows elapsed meeting time (e.g., "00:45:30")

Builder Hook Priorities:

• containerBuilder: Wraps outer Container; receives context + default container
• childrenBuilder: Wraps Stack children list; receives context + dimensions + defaultChildren
• Both hooks receive MainGridComponentOptions for access to all config

Common Use Cases:

1. Standard Video Grid:

   MainGridComponent(
     options: MainGridComponentOptions(
       width: MediaQuery.of(context).size.width,
       height: MediaQuery.of(context).size.height * 0.7,
       mainSize: 80,
       backgroundColor: Colors.black,
       children: participants.map((p) => VideoCard(options: VideoCardOptions(...))).toList(),
       meetingProgressTime: formatDuration(meetingDuration),
       showTimer: true,
     ),
   )
   

2. Responsive Grid:

   LayoutBuilder(
     builder: (context, constraints) {
       return MainGridComponent(
         options: MainGridComponentOptions(
           width: constraints.maxWidth,
           height: constraints.maxHeight,
           mainSize: 75,
           backgroundColor: Colors.grey[900]!,
           children: buildParticipantCards(participants, constraints),
           meetingProgressTime: meetingTime,
         ),
       );
     },
   )
   

3. Grid with Custom Overlay:

   MainGridComponent(
     options: MainGridComponentOptions(
       width: width,
       height: height,
       mainSize: 100,
       backgroundColor: Colors.black,
       children: videoCards,
       meetingProgressTime: time,
       childrenBuilder: (context, defaultChildren) {
         return [
           ...defaultChildren,
           Positioned(
             bottom: 20,
             left: 20,
             child: Text(
               'Recording in progress',
               style: TextStyle(color: Colors.red, fontSize: 16),
             ),
           ),
         ];
       },
     ),
   )
   

4. Hide Grid Conditionally:

   MainGridComponent(
     options: MainGridComponentOptions(
       width: width,
       height: height,
       mainSize: 80,
       backgroundColor: Colors.black,
       children: participants,
       meetingProgressTime: time,
       showAspect: isGridVisible, // Toggle visibility
     ),
   )
   

Override Integration: Integrates with MediasfuUICustomOverrides for global styling:

overrides: MediasfuUICustomOverrides(
  mainGridOptions: ComponentOverride<MainGridComponentOptions>(
    builder: (existingOptions) => MainGridComponentOptions(
      width: existingOptions.width,
      height: existingOptions.height,
      mainSize: existingOptions.mainSize,
      backgroundColor: Colors.black,
      children: existingOptions.children,
      meetingProgressTime: existingOptions.meetingProgressTime,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.black, Colors.grey[900]!],
        ),
      ),
      timerOptions: MeetingProgressTimerOptions(
        backgroundColor: Colors.blue[700],
        textColor: Colors.white,
        fontSize: 18,
      ),
    ),
  ),
),

Meeting Timer Features:

• Displays elapsed meeting time (format: "HH:MM:SS")
• Updates via meetingProgressTime prop (parent manages timer state)
• Customizable via timerOptions (colors, fonts, padding)
• Can be fully replaced via timerBuilder hook
• Hidden if showTimer=false

Dimension Management:

• Fixed dimensions via width/height props (no automatic sizing)
• Parent responsible for responsive sizing (typically uses LayoutBuilder)
• mainSize prop passed to options but not directly used in rendering (used by parent layouts)

Performance Notes:

• Stateless widget (no internal state)
• Stack renders all children (no virtualization)
• Suitable for typical meeting sizes (2-50 participants)
• For larger meetings, consider implementing pagination or virtualization

Implementation Details:

• Uses Visibility widget for showAspect toggling
• Stack allows overlaying timer on top of participant grid
• Container provides background and dimensions
• Timer positioned absolutely at top-center
• Builder hooks called during build (not cached)