Class AudioGrid

Description

AudioGrid provides three levels of customization to display audio-only participants:

1. Basic Usage: Use the default vertical stacked layout for audio participants
2. Style Customization: Apply custom styles via containerStyle to modify grid appearance
3. Full Template Override: Provide a custom ng-template via customTemplate for complete control

Key Features:

• Dynamic rendering of audio-only participant components
• Efficient injector caching for performance optimization
• Automatic cache clearing on component changes to prevent memory leaks
• Customizable container styling
• Full template override support for custom layouts

<app-audio-grid 
  [componentsToRender]="[
    { component: AudioCard, inputs: { name: 'John Doe', audioLevel: 0.8 } },
    { component: AudioCard, inputs: { name: 'Jane Smith', audioLevel: 0.5 } }
  ]">
</app-audio-grid>
Copy

<app-audio-grid 
  [componentsToRender]="audioParticipants"
  [containerStyle]="{
    display: 'flex',
    flexWrap: 'wrap',
    gap: '12px',
    padding: '20px',
    backgroundColor: '#f5f5f5',
    borderRadius: '8px'
  }">
</app-audio-grid>
Copy

// In your component
@Component({
  template: `
    <app-audio-grid
      [componentsToRender]="audioParticipants"
      [customTemplate]="customAudioLayout">
    </app-audio-grid>
    
    <ng-template #customAudioLayout let-gridData>
      <div class="custom-audio-grid">
        <h3>Audio Participants ({{ gridData.componentsToRender.length }})</h3>
        <div class="audio-list">
          <div *ngFor="let item of gridData.componentsToRender; let i = index"
               class="audio-item"
               [class.active]="i === activeIndex">
            <span class="index">{{ i + 1 }}</span>
            <ng-container *ngComponentOutlet="item.component; injector: createInjector(item.inputs)"></ng-container>
          </div>
        </div>
      </div>
    </ng-template>
  `
})
Copy