Function AudioGrid

AudioGrid - A grid layout component for organizing audio participant components.

This component provides a flexible CSS Grid-based layout system for displaying multiple audio participant components. It offers granular customization of both the grid container and individual items, with support for custom rendering of each element.

Key Features:

• CSS Grid Layout: Modern grid-based layout with configurable gap spacing
• Array-Based Rendering: Accepts array of React components/elements for grid population
• High Z-Index: Positioned above other content (z-index: 9) for visibility
• Item Customization: Individual control over each grid item's appearance
• Container Customization: Full control over grid container styling and attributes
• Render Hooks: Custom rendering for both individual items and entire container
• Display Contents: Items use display: contents to maintain grid flow
• Automatic Keys: Handles React keys automatically for array items
• HTML Attributes: Granular HTML attributes for container and item wrappers
• Class Management: Smart className joining utility for clean class composition
• Flexible Styling: Support for inline styles and CSS classes
• React Element Validation: Proper handling of rendered items with key preservation

import React from 'react';
import { AudioGrid, AudioCard } from 'mediasfu-reactjs';

const AudioParticipantGrid = () => {
  const participants = [
    { id: '1', name: 'Alice', audioLevel: 0.8 },
    { id: '2', name: 'Bob', audioLevel: 0.5 },
    { id: '3', name: 'Charlie', audioLevel: 0.3 }
  ];

  const audioComponents = participants.map(p => (
    <AudioCard
      key={p.id}
      name={p.name}
      barColor={p.audioLevel > 0.5 ? 'green' : 'gray'}
      imageSource={`/avatars/${p.id}.jpg`}
    />
  ));

  return (
    <AudioGrid componentsToRender={audioComponents} />
  );
};
Copy

import React from 'react';
import { AudioGrid, AudioCard } from 'mediasfu-reactjs';

const CustomStyledAudioGrid = () => {
  const participants = Array.from({ length: 6 }, (_, i) => ({
    id: `participant-${i}`,
    name: `User ${i + 1}`,
    muted: i % 2 === 0
  }));

  const audioComponents = participants.map(p => (
    <AudioCard
      key={p.id}
      name={p.name}
      showWaveform={!p.muted}
      imageSource={`/avatar-${p.id}.png`}
      barColor={p.muted ? '#95a5a6' : '#2ecc71'}
    />
  ));

  return (
    <AudioGrid
      componentsToRender={audioComponents}
      containerProps={{
        style: {
          gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
          gap: '20px',
          padding: '20px',
          backgroundColor: '#2c3e50',
          borderRadius: '8px'
        }
      }}
      itemWrapperProps={{
        style: {
          transition: 'transform 0.2s ease',
        },
        className: 'audio-grid-item'
      }}
    />
  );
};
Copy

import React, { useEffect } from 'react';
import { AudioGrid, AudioCard } from 'mediasfu-reactjs';

const AnalyticsAudioGrid = () => {
  const participants = [
    { id: '1', name: 'Alice', speaking: true },
    { id: '2', name: 'Bob', speaking: false },
    { id: '3', name: 'Charlie', speaking: true }
  ];

  const audioComponents = participants.map(p => (
    <AudioCard
      key={p.id}
      name={p.name}
      showWaveform={p.speaking}
      imageSource={`/avatar-${p.id}.jpg`}
    />
  ));

  return (
    <AudioGrid
      componentsToRender={audioComponents}
      renderItem={({ component, index, defaultItem }) => {
        useEffect(() => {
          analytics.track('Audio Grid Item Rendered', {
            index,
            participantId: participants[index].id,
            speaking: participants[index].speaking
          });
        }, [index]);

        return (
          <div 
            className="tracked-audio-item"
            data-participant-id={participants[index].id}
          >
            {defaultItem}
          </div>
        );
      }}
      renderContainer={({ defaultContainer, items }) => {
        useEffect(() => {
          analytics.track('Audio Grid Rendered', {
            participantCount: items.length,
            speakingCount: participants.filter(p => p.speaking).length
          });
        }, [items.length]);

        return (
          <div className="analytics-audio-grid">
            <div className="grid-header">
              <span>{items.length} participants</span>
            </div>
            {defaultContainer}
          </div>
        );
      }}
    />
  );
};
Copy

import React, { useState } from 'react';
import { MediasfuGeneric, AudioGrid } from 'mediasfu-reactjs';

const CustomAudioGridComponent = (props) => (
  <AudioGrid
    {...props}
    containerProps={{
      ...props.containerProps,
      className: 'custom-audio-grid',
      style: {
        ...props.containerProps?.style,
        gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
        gap: '16px',
        padding: '16px',
        backgroundColor: '#1a1a1a',
        borderRadius: '12px'
      }
    }}
    renderContainer={({ defaultContainer, items }) => (
      <div className="enhanced-audio-grid-wrapper">
        <div className="audio-grid-stats">
          <span className="participant-count">
            🎤 {items.length} {items.length === 1 ? 'participant' : 'participants'}
          </span>
        </div>
        <div className="audio-grid-content">
          {defaultContainer}
        </div>
      </div>
    )}
  />
);

const App = () => {
  const [credentials] = useState({
    apiUserName: 'user123',
    apiKey: 'your-api-key'
  });

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        AudioGrid: CustomAudioGridComponent
      }}
    />
  );
};
Copy