mediasfu-angular 2.2.0 → 2.2.2

package/README.md

@@ -4,19 +4,34 @@
 
 <p align="center">
   <a href="https://twitter.com/media_sfu">
-    <img src="https://img.icons8.com/color/48/000000/twitter--v1.png" alt="Twitter" style="margin-right: 10px;">
+    <img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter" />
   </a>
   <a href="https://www.mediasfu.com/forums">
-    <img src="https://img.icons8.com/color/48/000000/communication--v1.png" alt="Community Forum" style="margin-right: 10px;">
+    <img src="https://img.shields.io/badge/Community-Forum-blue?style=for-the-badge&logo=discourse&logoColor=white" alt="Community Forum" />
   </a>
   <a href="https://github.com/MediaSFU">
-    <img src="https://img.icons8.com/fluent/48/000000/github.png" alt="Github" style="margin-right: 10px;">
+    <img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="Github" />
   </a>
   <a href="https://www.mediasfu.com/">
-    <img src="https://img.icons8.com/color/48/000000/domain--v1.png" alt="Website" style="margin-right: 10px;">
+    <img src="https://img.shields.io/badge/Website-4285F4?style=for-the-badge&logo=google-chrome&logoColor=white" alt="Website" />
   </a>
   <a href="https://www.youtube.com/channel/UCELghZRPKMgjih5qrmXLtqw">
-    <img src="https://img.icons8.com/color/48/000000/youtube--v1.png" alt="Youtube" style="margin-right: 10px;">
+    <img src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" alt="Youtube" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://opensource.org/licenses/MIT">
+    <img src="https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square" alt="License: MIT" />
+  </a>
+  <a href="https://mediasfu.com">
+    <img src="https://img.shields.io/badge/Built%20with-MediaSFU-blue?style=flat-square" alt="Built with MediaSFU" />
+  </a>
+  <a href="https://angular.io">
+    <img src="https://img.shields.io/badge/Angular-DD0031?style=flat-square&logo=angular&logoColor=white" alt="Angular" />
+  </a>
+  <a href="https://www.typescriptlang.org">
+    <img src="https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
   </a>
 </p>
 
@@ -59,20 +74,359 @@ MediaSFU offers a cutting-edge streaming experience that empowers users to custo
 
 **[Get started now on GitHub!](https://github.com/MediaSFU/MediaSFUOpen)** 
 
+### ✅ Angular SDK Setup Guide  
+Coming soon! Watch this space for our comprehensive video tutorial on setting up the Angular SDK.
+
 ---
 
 ## Table of Contents
-
+- [Quick Reference: Component Props & UI Overrides](#quick-reference-component-props--ui-overrides)
 - [Features](#features)
 - [Getting Started](#getting-started)
-- [Basic Usage Guide](#basic-usage-guide)
-- [Intermediate Usage Guide](#intermediate-usage-guide)
-- [Advanced Usage Guide](#advanced-usage-guide)
-  - [Custom Component Injection Service](#custom-component-injection-service)
+- [📘 Angular SDK Guide](#angular-sdk-guide)
+  - [Quick Start](#quick-start-5-minutes)
+  - [Understanding the Architecture](#understanding-mediasfu-architecture)
+  - [Core Concepts & Components](#core-concepts--components)
+  - [Working with Methods](#working-with-methods)
+  - [Media Streams & Participants](#media-streams--participants)
+  - [Customization & Styling](#customization--styling)
 - [API Reference](#api-reference)
 - [Troubleshooting](#troubleshooting)
 - [Contributing](#contributing)
 
+
+---
+
+## Quick Reference: Component Props & UI Overrides
+
+> **New:** UI override parity now extends across Webinar and Chat layouts, unifying customization for every MediaSFU interface.
+
+Every primary MediaSFU UI export—`MediasfuGeneric`, `MediasfuBroadcast`, `MediasfuConference`, `MediasfuWebinar`, and `MediasfuChat`—now ships with a consistent prop surface and a powerful `uiOverrides` input, so you can bend the bundled experience to match your product without losing MediaSFU's hardened real-time logic.
+
+### Shared component inputs (applies to every MediaSFU UI component)
+
+| Input | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `PrejoinPage` | `ComponentType` | `WelcomePage` | Swap in a custom pre-join experience. Receives unified pre-join options so you can add branding, legal copy, or warm-up flows. |
+| `localLink` | `string` | `""` | Point the SDK at your self-hosted MediaSFU server. Leave empty when using MediaSFU Cloud. |
+| `connectMediaSFU` | `boolean` | `true` | Toggle automatic socket/WebRTC connections. Set to `false` when you only need the UI shell. |
+| `credentials` | `{ apiUserName: string; apiKey: string }` | `{ apiUserName: "", apiKey: "" }` | Supply cloud credentials without hard-coding them elsewhere. |
+| `useLocalUIMode` | `boolean` | `false` | Run the interface in local/demo mode with no remote signaling. |
+| `seedData`, `useSeed` | `SeedData`, `boolean` | `{}`, `false` | Pre-populate the UI for demos, snapshot tests, or onboarding tours. |
+| `imgSrc` | `string` | `https://mediasfu.com/images/logo192.png` | Default artwork used across pre-join and modal flows. |
+| `sourceParameters` | `Record<string, unknown>` | `undefined` | Shared helper bag (media devices, participant helpers, layout handlers). Pair with `updateSourceParameters` to mirror the SDK's internal utilities. |
+| `updateSourceParameters` | `EventEmitter` | `undefined` | Receive the latest helper bundle so you can bridge MediaSFU logic into your own components. |
+| `returnUI` | `boolean` | `true` | When `false`, mount the logic only—a perfect stepping stone to a fully bespoke interface. |
+| `noUIPreJoinOptions` | `CreateJoinRoomParameters \| JoinLocalEventRoomParameters` | `undefined` | Feed pre-join data when `returnUI` is `false` and you want to bypass the on-screen wizard. |
+| `joinRoom`, `createRoom` | `Function` | `undefined` | Inject your own networking layers for joining or creating rooms. |
+| `customComponent` | `ComponentType` | `undefined` | Replace the entire UI while retaining transports, sockets, and helpers. |
+| `customVideoCard`, `customAudioCard`, `customMiniCard` | `ComponentType` | `undefined` | Override participant card renders to add metadata, CTAs, or badges. |
+| `[customStyles]` | `Record<string, any>` | `undefined` | Apply inline styles to the root wrapper (dashboards, split views, etc.). |
+| `[uiOverrides]` | `MediasfuUICustomOverrides` | `undefined` | Targeted component/function overrides described below. |
+
+> **Power combo:** Set `returnUI="false"` to run MediaSFU logic headless, capture helpers via `updateSourceParameters` output, and selectively bring UI pieces back with `uiOverrides`. That gives you progressive migration with minimal code churn.
+
+```typescript
+import type { MediasfuUICustomOverrides } from 'mediasfu-angular';
+
+const overrides: MediasfuUICustomOverrides = { /* ... */ };
+```
+
+Bring the types into your project to unlock full IntelliSense for every override slot.
+
+### Custom UI Playbook
+
+Use a toggle-driven "playbook" component to experiment with MediaSFU's customization layers. Flip a couple of booleans and you can watch the SDK jump between prebuilt layouts, headless logic, or a fully bespoke workspace driven by `customComponent`.
+
+#### What the playbook demonstrates
+
+- **Connection presets**: toggle `connectionScenario` between `cloud`, `hybrid`, or `ce` to swap credentials, local links, and connection modes in one place.
+- **Experience selector**: the `selectedExperience` switch renders `MediasfuGeneric`, `MediasfuBroadcast`, `MediasfuWebinar`, `MediasfuConference`, or `MediasfuChat` without touching the rest of your stack.
+- **UI strategy flags**: booleans like `showPrebuiltUI`, `enableFullCustomUI`, and `enableNoUIPreJoin` demonstrate how to run the MediaSFU logic with or without the bundled UI.
+- **Layered overrides**: toggles enable the custom video/audio/mini cards, drop-in `uiOverrides` for layout and modal surfaces, container styling, and backend proxy helpers.
+- **Custom workspace demo**: a `customComponent` receives live MediaSFU helpers so you can build dashboards, CRM surfaces, or any bespoke host interface.
+- **Debug panel & helpers**: optional JSON panel exposes the `updateSourceParameters` payload so you can see exactly what to wire into your own components.
+
+#### Try it quickly
+
+```typescript
+@Component({
+  selector: 'app-custom-ui-playbook',
+  template: `
+    <ng-container [ngSwitch]="selectedExperience">
+      <app-mediasfu-generic *ngSwitchCase="'generic'"
+        [credentials]="currentPreset.credentials"
+        [localLink]="currentPreset.localLink"
+        [connectMediaSFU]="currentPreset.connectMediaSFU"
+        [returnUI]="showPrebuiltUI"
+        [uiOverrides]="overrides"
+        [customStyles]="containerStyles">
+      </app-mediasfu-generic>
+      
+      <app-mediasfu-broadcast *ngSwitchCase="'broadcast'"
+        [credentials]="currentPreset.credentials"
+        [localLink]="currentPreset.localLink"
+        [connectMediaSFU]="currentPreset.connectMediaSFU"
+        [returnUI]="showPrebuiltUI"
+        [uiOverrides]="overrides">
+      </app-mediasfu-broadcast>
+      
+      <!-- Similar for webinar, conference, chat -->
+    </ng-container>
+  `
+})
+export class CustomUIPlaybookComponent {
+  connectionScenario: 'cloud' | 'hybrid' | 'ce' = 'cloud';
+  selectedExperience: 'generic' | 'broadcast' | 'webinar' | 'conference' | 'chat' = 'generic';
+  showPrebuiltUI = true;
+  enableFullCustomUI = false;
+
+  connectionPresets = {
+    cloud: { 
+      credentials: { apiUserName: 'demo', apiKey: 'demo' }, 
+      localLink: '', 
+      connectMediaSFU: true 
+    },
+    hybrid: { 
+      credentials: { apiUserName: 'demo', apiKey: 'demo' }, 
+      localLink: 'http://localhost:3000', 
+      connectMediaSFU: true 
+    },
+    ce: { 
+      credentials: undefined, 
+      localLink: 'http://localhost:3000', 
+      connectMediaSFU: false 
+    },
+  };
+
+  get currentPreset() {
+    return this.connectionPresets[this.connectionScenario];
+  }
+
+  overrides: MediasfuUICustomOverrides = {
+    mainContainer: this.enableFullCustomUI ? {
+      component: CustomMainContainerComponent
+    } : undefined,
+  };
+
+  containerStyles = {
+    background: 'linear-gradient(135deg, #0f172a, #1e3a8a)',
+    minHeight: '100vh'
+  };
+}
+```
+
+Toggle the configuration values at the top of the playbook and watch the UI reconfigure instantly. It's the fastest path to understand MediaSFU's override surface before you fold the patterns into your production entrypoint.
+
+#### Passing custom props and UI overrides
+
+Use the same playbook to validate bespoke cards, override bundles, and fully custom workspaces before you move them into production code:
+
+```typescript
+@Component({
+  selector: 'app-advanced-playbook',
+  template: `
+    <app-mediasfu-generic
+      [credentials]="credentials"
+      [customVideoCard]="videoCard"
+      [customAudioCard]="audioCard"
+      [customMiniCard]="miniCard"
+      [customComponent]="enableFullCustomUI ? customWorkspace : undefined"
+      [customStyles]="containerStyles"
+      [uiOverrides]="uiOverrides">
+    </app-mediasfu-generic>
+  `
+})
+export class AdvancedPlaybookComponent {
+  credentials = { apiUserName: 'demo', apiKey: 'demo' };
+  enableFullCustomUI = false;
+
+  // Custom card components with themed styling
+  videoCard = VideoCardComponent; // Pass component class
+  audioCard = AudioCardComponent;
+  miniCard = MiniCardComponent;
+  customWorkspace = CustomWorkspaceComponent;
+
+  containerStyles = {
+    background: '#0f172a',
+    borderRadius: '32px',
+    overflow: 'hidden'
+  };
+
+  uiOverrides: MediasfuUICustomOverrides = {
+    mainContainer: {
+      component: CustomMainContainerComponent
+    },
+    menuModal: {
+      component: CustomMenuModalComponent
+    },
+    consumerResume: {
+      wrap: (original) => async (params) => {
+        const startedAt = performance.now();
+        const result = await original(params);
+        console.log('consumer_resume', {
+          durationMs: performance.now() - startedAt,
+          consumerId: params?.consumer?.id,
+        });
+        return result;
+      },
+    },
+  };
+}
+```
+
+Because the playbook surfaces `updateSourceParameters`, you can also log or snapshot the helper bundle (`getParticipantMedia`, `toggleMenuModal`, `showAlert`, and more) to ensure your custom UI always receives the hooks it expects.
+
+### `uiOverrides` input — override keys at a glance
+
+Each key accepts a `CustomComponentOverride<Props>` or `CustomFunctionOverride<Fn>` object with optional `component` and `wrap` fields. You can fully replace the default implementation or wrap it while forwarding props.
+
+#### Layout & control surfaces
+
+| Key | Default component | Typical use |
+| --- | --- | --- |
+| `mainContainer` | `MainContainerComponent` | Inject theming providers or dashboard layouts. |
+| `mainAspect` | `MainAspectComponent` | Tune how the main region splits space. |
+| `mainScreen` | `MainScreenComponent` | Orchestrate hero video + gallery interplay. |
+| `mainGrid` | `MainGridComponent` | Modify layout or layering of primary participants. |
+| `subAspect` | `SubAspectComponent` | Restyle fixed control strips in webinar/conference modes. |
+| `otherGrid` | `OtherGridComponent` | Change presentation of off-stage attendees. |
+| `flexibleGrid`, `flexibleGridAlt` | `FlexibleGrid` | Implement AI-driven or branded array layouts. |
+| `flexibleVideo` | `FlexibleVideo` | Add captions, watermarks, or overlays to highlighted speakers. |
+| `audioGrid` | `AudioGrid` | Customise audio-only attendee presentation. |
+| `pagination` | `Pagination` | Introduce infinite scroll or auto-cycling carousels. |
+| `controlButtons` | `ControlButtonsComponent` | Rebrand the primary action bar. |
+| `controlButtonsAlt` | `ControlButtonsAltComponent` | Control secondary button clusters. |
+| `controlButtonsTouch` | `ControlButtonsComponentTouch` | Deliver mobile-first controls (used heavily by `MediasfuChat`). |
+
+#### Participant cards & widgets
+
+| Key | Default component | Typical use |
+| --- | --- | --- |
+| `videoCard` | `VideoCard` | Add host badges, reactions, or CRM overlays. |
+| `audioCard` | `AudioCard` | Swap avatars or expose spoken-language info. |
+| `miniCard` | `MiniCard` | Customize thumbnails in picture-in-picture modes. |
+| `miniAudio` | `MiniAudio` | Re-style the audio-only mini indicators. |
+| `meetingProgressTimer` | `MeetingProgressTimer` | Replace the elapsed-time widget with countdowns or milestones. |
+| `miniAudioPlayer` | `MiniAudioPlayer` | Provide alternative UI for recorded clip playback. |
+
+#### Modals, dialogs, and collaboration surfaces
+
+| Key | Default component | Typical use |
+| --- | --- | --- |
+| `loadingModal` | `LoadingModal` | Show branded skeletons while connecting. |
+| `alert` | `AlertComponent` | Route alerts through your notification system. |
+| `menuModal` | `MenuModal` | Redesign quick-action trays. |
+| `eventSettingsModal` | `EventSettingsModal` | Extend host tools with your own settings. |
+| `requestsModal` | `RequestsModal` | Build moderation queues tailored to your workflows. |
+| `waitingRoomModal` | `WaitingRoomModal` | Deliver custom waiting-room experiences. |
+| `coHostModal` | `CoHostModal` | Manage co-hosts with bespoke UX. |
+| `mediaSettingsModal` | `MediaSettingsModal` | Embed device tests or instructions. |
+| `participantsModal` | `ParticipantsModal` | Introduce advanced filters, search, or notes. |
+| `messagesModal` | `MessagesModal` | Drop in your full-featured chat module. |
+| `displaySettingsModal` | `DisplaySettingsModal` | Let users pick layouts, themes, or captions. |
+| `confirmExitModal` | `ConfirmExitModal` | Meet compliance wording requirements. |
+| `confirmHereModal` | `ConfirmHereModal` | Customize attendance confirmations for webinars. |
+| `shareEventModal` | `ShareEventModal` | Add referral codes or QR sharing. |
+| `recordingModal` | `RecordingModal` | Tailor recording confirmation flows. |
+| `pollModal` | `PollModal` | Integrate your polling/quiz engine. |
+| `backgroundModal` | `BackgroundModal` | Hook AI background replacement or brand presets. |
+| `breakoutRoomsModal` | `BreakoutRoomsModal` | Implement drag-and-drop or AI room suggestions. |
+| `configureWhiteboardModal` | `ConfigureWhiteboardModal` | Adjust collaboration permissions before launch. |
+| `whiteboard` | `Whiteboard` | Replace with your whiteboard provider. |
+| `screenboard` | `Screenboard` | Modify shared-screen annotation layers. |
+| `screenboardModal` | `ScreenboardModal` | Reimagine how users enable shared annotations. |
+
+#### Entry flows & custom renderers
+
+| Key | Default component | Typical use |
+| --- | --- | --- |
+| `welcomePage` | `WelcomePage` | Provide a fully branded welcome/marketing splash. |
+| `preJoinPage` | `PrejoinPage` | Override the wizard used before joining live sessions. |
+| `customMenuButtonsRenderer` | `ControlButtonsAltComponent` | Supply a bespoke renderer for menu button groups without overriding each button. |
+
+#### Function overrides
+
+| Key | Default function | Typical use |
+| --- | --- | --- |
+| `consumerResume` | `consumerResume` | Wrap errors, capture analytics, or rate-limit consumer resume behavior. |
+| `addVideosGrid` | `addVideosGrid` | Replace participant ordering or layout heuristics on the fly. |
+| `prepopulateUserMedia` | `prepopulateUserMedia` | Customize initial media setup with custom video/audio/mini cards. |
+
+> Function overrides support `{ implementation, wrap }`. Provide `implementation` for a full replacement, or `wrap` to intercept the default behavior before/after it runs.
+
+### Example: swap the chat modal and theme the controls
+
+```typescript
+import { Component } from '@angular/core';
+import { MediasfuGeneric } from 'mediasfu-angular';
+import { MyChatModalComponent } from './ui/my-chat-modal.component';
+import { MyControlsComponent } from './ui/my-controls.component';
+
+@Component({
+  selector: 'app-my-meeting',
+  template: `
+    <app-mediasfu-generic
+      [credentials]="credentials"
+      [uiOverrides]="uiOverrides">
+    </app-mediasfu-generic>
+  `
+})
+export class MyMeetingComponent {
+  credentials = { apiUserName: 'your-api-user', apiKey: 'your-api-key' };
+
+  uiOverrides = {
+    messagesModal: {
+      component: MyChatModalComponent,
+    },
+    controlButtons: {
+      component: MyControlsComponent,
+    },
+  };
+}
+```
+
+### Example: wrap a MediaSFU helper instead of replacing it
+
+```typescript
+import { Component } from '@angular/core';
+import { MediasfuConference } from 'mediasfu-angular';
+
+@Component({
+  selector: 'app-analytics-meeting',
+  template: `
+    <app-mediasfu-conference
+      [credentials]="credentials"
+      [uiOverrides]="uiOverrides">
+    </app-mediasfu-conference>
+  `
+})
+export class AnalyticsMeetingComponent {
+  credentials = { apiUserName: 'your-api-user', apiKey: 'your-api-key' };
+
+  uiOverrides = {
+    consumerResume: {
+      wrap: (original) => async (params) => {
+        const startedAt = performance.now();
+        const result = await original(params);
+        
+        // Send analytics
+        this.analytics.track('consumer_resume', {
+          durationMs: performance.now() - startedAt,
+          consumerId: params?.consumer?.id,
+        });
+        
+        return result;
+      },
+    },
+  };
+
+  constructor(private analytics: AnalyticsService) {}
+}
+```
+
+---
+
 # Features <a name="features"></a>
 
 MediaSFU's Angular SDK comes with a host of powerful features out of the box:
@@ -88,6 +442,74 @@ MediaSFU's Angular SDK comes with a host of powerful features out of the box:
 9. **Cloud Recording (track-based)**: Customize recordings with track-based options, including watermarks, name tags, background colors, and more.
 10. **Managed Events**: Manage events with features to handle abandoned and inactive participants, as well as enforce time and capacity limits.
 
+## 🆕 **New Advanced Media Access**
+
+The Angular SDK now includes powerful utility methods for fine-grained control over media devices and participant streams:
+
+### **`getMediaDevicesList`** - Device Enumeration
+
+Enumerate available cameras and microphones with automatic permission handling:
+
+```typescript
+// Get all available cameras
+const cameras = await sourceParameters.getMediaDevicesList('videoinput');
+cameras.forEach(camera => {
+  console.log(`Camera: ${camera.label} (${camera.deviceId})`);
+});
+
+// Get all available microphones
+const microphones = await sourceParameters.getMediaDevicesList('audioinput');
+microphones.forEach(mic => {
+  console.log(`Microphone: ${mic.label} (${mic.deviceId})`);
+});
+```
+
+**Use Cases:**
+- Build custom device selection interfaces
+- Detect available media hardware
+- Switch between multiple cameras/microphones
+- Pre-flight device checks before joining
+
+[See full documentation and examples →](#media-device-and-stream-utility-methods)
+
+---
+
+### **`getParticipantMedia`** - Stream Access
+
+Retrieve specific participant's video or audio streams by ID or name:
+
+```typescript
+// Get participant video stream by producer ID
+const videoStream = await sourceParameters.getParticipantMedia({
+  id: 'producer-123',
+  kind: 'video'
+});
+
+// Get participant audio stream by name
+const audioStream = await sourceParameters.getParticipantMedia({
+  name: 'John Doe',
+  kind: 'audio'
+});
+
+// Use the stream (e.g., attach to video element)
+if (videoStream) {
+  videoElement.srcObject = videoStream;
+}
+```
+
+**Use Cases:**
+- Monitor specific participant streams
+- Create custom video layouts with individual control
+- Build stream recording features
+- Implement advanced audio/video processing
+- Create picture-in-picture views for specific users
+
+[See full documentation and examples →](#media-device-and-stream-utility-methods)
+
+---
+
+These utilities enable advanced features like custom device selection interfaces, participant stream monitoring, and dynamic media routing. Both methods are fully integrated with Angular's reactive patterns using RxJS.
+
 # Getting Started <a name="getting-started"></a>
 
 This section will guide users through the initial setup and installation of the npm module.
@@ -180,153 +602,1475 @@ If you plan to self-host MediaSFU or use it without MediaSFU Cloud services, you
 This setup allows full flexibility and customization while bypassing the need for cloud-dependent credentials.  
 
 
-# Basic Usage Guide <a name="basic-usage-guide"></a>
+# 📘 Angular SDK Guide <a name="angular-sdk-guide"></a>
+
+This comprehensive guide will walk you through everything you need to know about building real-time communication apps with MediaSFU's Angular SDK. Whether you're a beginner or an experienced developer, you'll find clear explanations, practical examples, and best practices.
+
+---
+
+## Quick Start (5 Minutes) <a name="quick-start-5-minutes"></a>
+
+Get your first MediaSFU app running in just a few minutes.
+
+### Step 1: Install the Package
+
+```bash
+npm install mediasfu-angular
+```
+
+### Step 2: Import and Use
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { MediasfuGeneric } from 'mediasfu-angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [MediasfuGeneric],
+  template: `<app-mediasfu-generic></app-mediasfu-generic>`,
+})
+export class AppComponent { }
+```
+
+**Alternative with Credentials:**
+
+```typescript
+import { Component } from '@angular/core';
+import { MediasfuGeneric, PreJoinPage } from 'mediasfu-angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [MediasfuGeneric],
+  template: `
+    <app-mediasfu-generic
+      [PrejoinPage]="PreJoinPage"
+      [credentials]="credentials">
+    </app-mediasfu-generic>
+  `,
+})
+export class AppComponent {
+  PreJoinPage = PreJoinPage;
+  credentials = {
+    apiUserName: 'your_username',
+    apiKey: 'your_api_key',
+  };
+}
+```
+
+### Step 3: Run Your App
+
+```bash
+ng serve
+```
+
+**That's it!** You now have a fully functional video conferencing app with:
+- ✅ Video and audio streaming
+- ✅ Screen sharing
+- ✅ Chat messaging
+- ✅ Participant management
+- ✅ Recording capabilities
+- ✅ Breakout rooms
+- ✅ Polls and whiteboards
+
+---
+
+## Understanding MediaSFU Architecture <a name="understanding-mediasfu-architecture"></a>
+
+Before diving deeper, let's understand how MediaSFU is structured.
+
+### The Three-Layer Architecture
+
+```
+┌─────────────────────────────────────────────┐
+│        Your Angular Application             │
+│  (components, services, business logic)     │
+└─────────────────────────────────────────────┘
+                    ↓
+┌─────────────────────────────────────────────┐
+│       MediaSFU Components Layer             │
+│ (MediasfuGeneric, MediasfuBroadcast, etc.)  │
+│        - Pre-built UI components            │
+│        - Event handling                     │
+│        - State management (RxJS)            │
+└─────────────────────────────────────────────┘
+                    ↓
+┌─────────────────────────────────────────────┐
+│       MediaSFU Core Methods Layer           │
+│  (Stream control, room management,          │
+│   WebRTC handling, socket communication)    │
+└─────────────────────────────────────────────┘
+                    ↓
+┌─────────────────────────────────────────────┐
+│       MediaSFU Backend Services             │
+│ (MediaSFU Cloud or Community Edition)       │
+└─────────────────────────────────────────────┘
+```
+
+### Key Concepts
+
+#### 1. **Event Room Types**
+
+MediaSFU provides 5 specialized room types, each optimized for specific use cases:
+
+| Room Type | Best For | Key Features |
+|-----------|----------|--------------|
+| **MediasfuGeneric** | General purpose meetings | Flexible layout, all features enabled |
+| **MediasfuBroadcast** | Live streaming events | Optimized for one-to-many communication |
+| **MediasfuWebinar** | Educational sessions | Presenter focus, Q&A features |
+| **MediasfuConference** | Business meetings | Equal participant layout, collaboration tools |
+| **MediasfuChat** | Interactive discussions | Chat-first interface, quick connections |
+
+```typescript
+// Choose the right room type for your use case
+import { 
+  MediasfuWebinar, 
+  MediasfuBroadcast, 
+  MediasfuConference 
+} from 'mediasfu-angular';
+
+@Component({
+  // For a webinar
+  template: `<app-mediasfu-webinar [credentials]="credentials"></app-mediasfu-webinar>`,
+  // For a broadcast
+  // template: `<app-mediasfu-broadcast [credentials]="credentials"></app-mediasfu-broadcast>`,
+  // For a conference
+  // template: `<app-mediasfu-conference [credentials]="credentials"></app-mediasfu-conference>`,
+})
+```
+
+#### 2. **The Three Usage Modes**
+
+MediaSFU offers three progressive levels of customization:
+
+##### Mode 1: Default UI (Simplest)
+Use MediaSFU's complete pre-built interface - perfect for rapid development.
+
+```typescript
+import { Component } from '@angular/core';
+import { MediasfuGeneric } from 'mediasfu-angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [MediasfuGeneric],
+  template: `<app-mediasfu-generic [credentials]="credentials"></app-mediasfu-generic>`,
+})
+export class AppComponent {
+  credentials = { apiUserName: 'username', apiKey: 'key' };
+}
+```
+
+**When to use:**
+- ✅ Prototyping or MVP development
+- ✅ Need a production-ready UI quickly
+- ✅ Standard video conferencing features are sufficient
+
+##### Mode 2: Custom UI with MediaSFU Backend (Most Flexible)
+Build your own UI while using MediaSFU's powerful backend infrastructure.
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { MediasfuGeneric } from 'mediasfu-angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [MediasfuGeneric, CommonModule],
+  template: `
+    <app-mediasfu-generic
+      [returnUI]="false"
+      [sourceParameters]="sourceParameters"
+      [updateSourceParameters]="updateSourceParameters.bind(this)"
+      [credentials]="credentials"
+      [noUIPreJoinOptions]="preJoinOptions">
+    </app-mediasfu-generic>
+
+    <!-- Your custom UI -->
+    @if (sourceParameters) {
+      <div class="custom-controls">
+        <button (click)="toggleVideo()">
+          {{ sourceParameters.videoAlreadyOn ? 'Stop Video' : 'Start Video' }}
+        </button>
+        <button (click)="toggleAudio()">
+          {{ sourceParameters.audioAlreadyOn ? 'Mute' : 'Unmute' }}
+        </button>
+        <button (click)="toggleScreenShare()">
+          {{ sourceParameters.screenAlreadyOn ? 'Stop Sharing' : 'Share Screen' }}
+        </button>
+      </div>
+    }
+  `,
+})
+export class AppComponent implements OnInit {
+  sourceParameters: any = null;
+  credentials = { apiUserName: 'username', apiKey: 'key' };
+  preJoinOptions = {
+    action: 'create',
+    userName: 'Your Name',
+    capacity: 50,
+    duration: 30,
+    eventType: 'conference'
+  };
+
+  updateSourceParameters(params: any) {
+    this.sourceParameters = params;
+  }
+
+  toggleVideo() {
+    this.sourceParameters?.clickVideo({ parameters: this.sourceParameters });
+  }
+
+  toggleAudio() {
+    this.sourceParameters?.clickAudio({ parameters: this.sourceParameters });
+  }
+
+  toggleScreenShare() {
+    this.sourceParameters?.clickScreenShare({ parameters: this.sourceParameters });
+  }
+}
+```
+
+**When to use:**
+- ✅ Need complete control over UI/UX
+- ✅ Building a custom branded experience
+- ✅ Integrating into existing app design
+
+##### Mode 3: Component Replacement (Balanced)
+Replace specific MediaSFU components while keeping the rest of the infrastructure.
+
+```typescript
+import { Component } from '@angular/core';
+import { 
+  MediasfuGeneric, 
+  FlexibleVideo, 
+  FlexibleGrid 
+} from 'mediasfu-angular';
+
+@Component({
+  selector: 'app-custom-main',
+  standalone: true,
+  imports: [FlexibleVideo, FlexibleGrid, CommonModule],
+  template: `
+    <div class="custom-layout">
+      <!-- Custom header -->
+      <div class="custom-header">
+        <h1>{{ parameters.roomName }}</h1>
+        <span>{{ parameters.participants.length }} participants</span>
+      </div>
+
+      <!-- Use MediaSFU's components in your layout -->
+      <app-flexible-video
+        [customWidth]="windowWidth"
+        [customHeight]="600"
+        [parameters]="parameters">
+      </app-flexible-video>
+
+      <app-flexible-grid
+        [customWidth]="windowWidth"
+        [customHeight]="400"
+        [parameters]="parameters">
+      </app-flexible-grid>
+
+      <!-- Custom footer -->
+      <div class="custom-footer">
+        <button (click)="toggleVideo()">
+          {{ parameters.videoAlreadyOn ? 'Stop Video' : 'Start Video' }}
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .custom-layout { 
+      display: flex; 
+      flex-direction: column; 
+      height: 100vh; 
+    }
+    .custom-header { 
+      padding: 20px; 
+      background: #1976d2; 
+      color: white; 
+    }
+  `]
+})
+export class CustomMainComponent {
+  parameters: any;
+  windowWidth = window.innerWidth;
+
+  toggleVideo() {
+    this.parameters?.clickVideo({ parameters: this.parameters });
+  }
+}
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [MediasfuGeneric],
+  template: `
+    <app-mediasfu-generic
+      [credentials]="credentials"
+      [PrejoinPage]="PreJoinPage"
+      [customComponent]="CustomMainComponent">
+    </app-mediasfu-generic>
+  `,
+})
+export class AppComponent {
+  PreJoinPage = PreJoinPage;
+  CustomMainComponent = CustomMainComponent;
+  credentials = { apiUserName: 'username', apiKey: 'key' };
+}
+```
+
+**When to use:**
+- ✅ Need custom main interface but want to keep MediaSFU's components
+- ✅ Partial customization with minimal effort
+- ✅ Want to maintain MediaSFU's functionality while customizing layout
+
+#### 3. **Parameters: Your Control Center**
+
+The `sourceParameters` object (or `parameters` in custom components) is your gateway to all MediaSFU functionality. It's powered by RxJS BehaviorSubjects for reactive state management:
+
+```typescript
+// Available in sourceParameters or parameters object
+{
+  // Media Controls (Methods)
+  clickVideo: (options) => {},
+  clickAudio: (options) => {},
+  clickScreenShare: (options) => {},
+  
+  // Room State (BehaviorSubject values)
+  roomName: 'meeting-123',
+  participants: [...],
+  allVideoStreams: [...],
+  allAudioStreams: [...],
+  
+  // UI State (BehaviorSubject values)
+  videoAlreadyOn: false,
+  audioAlreadyOn: false,
+  screenAlreadyOn: false,
+  
+  // Update Functions (BehaviorSubject next())
+  updateVideoAlreadyOn: (value) => {},
+  updateAudioAlreadyOn: (value) => {},
+  
+  // And 200+ more properties and methods...
+}
+```
+
+**Access patterns:**
+
+```typescript
+// In Mode 1 (Default UI): Parameters are managed internally
+// You don't need to access them directly
+
+// In Mode 2 (Custom UI): Access via sourceParameters
+sourceParameters?.clickVideo({ parameters: sourceParameters });
+
+// In Mode 3 (Component Replacement): Passed to your custom component
+@Component({
+  template: `<button (click)="toggleVideo()">Toggle</button>`
+})
+export class CustomComponent {
+  @Input() parameters: any;
+  
+  toggleVideo() {
+    this.parameters.clickVideo({ parameters: this.parameters });
+  }
+}
+
+// Subscribing to reactive state changes
+sourceParameters.participants.subscribe((participants) => {
+  console.log('Participants updated:', participants);
+});
+```
+
+---
+
+## Core Concepts & Components <a name="core-concepts--components"></a>
+
+Now that you understand the architecture, let's explore the building blocks.
+
+### 1. Display Components: Building Your Video Layout
+
+MediaSFU provides powerful components for organizing and displaying media streams.
+
+#### Primary Layout Components
+
+**FlexibleVideo** - Main video display area
+
+```typescript
+import { FlexibleVideo } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-flexible-video
+      [customWidth]="windowWidth"
+      [customHeight]="600"
+      [parameters]="parameters">
+    </app-flexible-video>
+  `
+})
+```
+- Automatically handles main presenter or screen share
+- Smooth transitions between different video sources
+- Responsive sizing
+
+**FlexibleGrid** - Participant grid layout
+
+```typescript
+import { FlexibleGrid } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-flexible-grid
+      [customWidth]="windowWidth"
+      [customHeight]="800"
+      [parameters]="parameters">
+    </app-flexible-grid>
+  `
+})
+```
+- Intelligent grid sizing (2x2, 3x3, 4x4, etc.)
+- Pagination for large participant lists
+- Automatic reflow on window resize
+
+**AudioGrid** - Audio-only participants
+
+```typescript
+import { AudioGrid } from 'mediasfu-angular';
+
+@Component({
+  template: `<app-audio-grid [parameters]="parameters"></app-audio-grid>`
+})
+```
+- Displays participants without video
+- Audio level indicators
+- Compact layout for efficiency
+
+#### Container Components
+
+| Component | Purpose | Use Case |
+|-----------|---------|----------|
+| **MainContainerComponent** | Primary content wrapper | Wraps all main content areas |
+| **MainAspectComponent** | Aspect ratio container | Maintains proper video proportions |
+| **MainScreenComponent** | Screen layout manager | Organizes screen regions |
+| **SubAspectComponent** | Secondary content container | For picture-in-picture, sidebars |
+
+**Example: Building a custom layout**
+
+```typescript
+import { Component } from '@angular/core';
+import {
+  MainContainerComponent,
+  FlexibleVideo,
+  FlexibleGrid,
+  AudioGrid
+} from 'mediasfu-angular';
+
+@Component({
+  selector: 'app-custom-layout',
+  standalone: true,
+  imports: [
+    MainContainerComponent,
+    FlexibleVideo,
+    FlexibleGrid,
+    AudioGrid,
+    CommonModule
+  ],
+  template: `
+    <app-main-container-component>
+      <div class="layout-container">
+        <!-- Main video area -->
+        <div class="main-video">
+          <app-flexible-video
+            [customWidth]="windowWidth"
+            [customHeight]="windowHeight * 0.6"
+            [parameters]="parameters">
+          </app-flexible-video>
+        </div>
+        
+        <!-- Participant grid -->
+        <div class="participant-grid">
+          <app-flexible-grid
+            [customWidth]="windowWidth"
+            [customHeight]="windowHeight * 0.3"
+            [parameters]="parameters">
+          </app-flexible-grid>
+        </div>
+        
+        <!-- Audio-only participants -->
+        <div class="audio-participants">
+          <app-audio-grid [parameters]="parameters"></app-audio-grid>
+        </div>
+      </div>
+    </app-main-container-component>
+  `,
+  styles: [`
+    .layout-container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+    .main-video { flex: 3; }
+    .participant-grid { flex: 2; }
+    .audio-participants { height: 80px; }
+  `]
+})
+export class CustomLayoutComponent {
+  @Input() parameters: any;
+  windowWidth = window.innerWidth;
+  windowHeight = window.innerHeight;
+}
+```
+
+### 2. Control Components: User Interactions
+
+**ControlButtonsComponent** - Standard control bar
+
+```typescript
+import { ControlButtonsComponent } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-control-buttons-component
+      [parameters]="parameters"
+      [position]="'bottom'">
+    </app-control-buttons-component>
+  `
+})
+```
+Includes: mute, video, screenshare, participants, chat, settings, etc.
+
+**ControlButtonsAltComponent** - Alternative layout
+
+```typescript
+import { ControlButtonsAltComponent } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-control-buttons-alt-component
+      [parameters]="parameters"
+      [position]="'top'">
+    </app-control-buttons-alt-component>
+  `
+})
+```
+Different button arrangement optimized for specific layouts.
+
+**ControlButtonsComponentTouch** - Touch-optimized controls
+
+```typescript
+import { ControlButtonsComponentTouch } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-control-buttons-component-touch
+      [parameters]="parameters">
+    </app-control-buttons-component-touch>
+  `
+})
+```
+Floating action buttons optimized for mobile/tablet interfaces.
+
+### 3. Modal Components: Feature Interfaces
+
+MediaSFU includes modals for various features:
+
+```typescript
+import {
+  ParticipantsModal,
+  MessagesModal,
+  SettingsModal,
+  DisplaySettingsModal,
+  RecordingModal,
+  PollModal,
+  BreakoutRoomsModal
+} from 'mediasfu-angular';
+
+// These are automatically rendered when enabled
+// Control their visibility via parameters
+parameters.updateIsParticipantsModalVisible.next(true);
+parameters.updateIsMessagesModalVisible.next(true);
+parameters.updateIsSettingsModalVisible.next(true);
+```
+
+Available modals:
+- **ParticipantsModal** - Participant list management
+- **MessagesModal** - Chat interface
+- **SettingsModal** - Event and room settings
+- **DisplaySettingsModal** - Layout and display options
+- **RecordingModal** - Recording controls and settings
+- **PollModal** - Create and manage polls
+- **BreakoutRoomsModal** - Breakout room management
+- **MediaSettingsModal** - Camera/microphone selection
+- **BackgroundModal** - Virtual background settings
+- **ConfigureWhiteboardModal** - Whiteboard configuration
+
+**Example: Programmatically showing modals**
+
+```typescript
+@Component({
+  selector: 'app-custom-toolbar',
+  template: `
+    <div class="custom-toolbar">
+      <button (click)="showParticipants()">
+        Show Participants ({{ participantCount }})
+      </button>
+      
+      <button (click)="openChat()">
+        Open Chat
+      </button>
+      
+      <button (click)="createPoll()">
+        Create Poll
+      </button>
+    </div>
+  `
+})
+export class CustomToolbarComponent {
+  @Input() parameters: any;
+
+  get participantCount() {
+    return this.parameters?.participants?.length || 0;
+  }
+
+  showParticipants() {
+    this.parameters?.updateIsParticipantsModalVisible.next(true);
+  }
+
+  openChat() {
+    this.parameters?.updateIsMessagesModalVisible.next(true);
+  }
+
+  createPoll() {
+    this.parameters?.launchPoll?.launchPoll({ parameters: this.parameters });
+  }
+}
+```
+
+### 4. Video Cards: Individual Participant Display
+
+**VideoCard** - Individual participant video element
+
+```typescript
+import { VideoCard } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-video-card
+      [videoStream]="participantStream"
+      [remoteProducerId]="'producer-id'"
+      [eventType]="'conference'"
+      [forceFullDisplay]="false"
+      [participant]="participantObject"
+      [backgroundColor]="'#000000'"
+      [showControls]="true"
+      [showInfo]="true"
+      [name]="'Participant Name'"
+      [parameters]="parameters">
+    </app-video-card>
+  `
+})
+```
+
+**AudioCard** - Individual audio-only participant
+
+```typescript
+import { AudioCard } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-audio-card
+      [name]="'Participant Name'"
+      [barColor]="'#4CAF50'"
+      [textColor]="'#FFFFFF'"
+      [customStyle]="{ borderRadius: '10px' }"
+      [controlsPosition]="'topLeft'"
+      [infoPosition]="'topRight'"
+      [participant]="participantObject"
+      [parameters]="parameters">
+    </app-audio-card>
+  `
+})
+```
+
+**MiniCard** - Compact participant display (for grids)
+
+```typescript
+import { MiniCard } from 'mediasfu-angular';
+
+@Component({
+  template: `
+    <app-mini-card
+      [participant]="participantObject"
+      [showControls]="false"
+      [parameters]="parameters">
+    </app-mini-card>
+  `
+})
+```
+
+**Example: Custom Video Card**
+
+```typescript
+@Component({
+  selector: 'app-my-custom-video-card',
+  standalone: true,
+  template: `
+    <div class="custom-video-card">
+      <video 
+        #videoElement
+        [srcObject]="stream"
+        autoplay
+        [muted]="true"
+        playsinline>
+      </video>
+      
+      <div class="participant-info">
+        {{ participant.name }} 
+        @if (participant.muted) {
+          <span>🔇</span>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .custom-video-card {
+      border: 3px solid #00ff88;
+      border-radius: 15px;
+      overflow: hidden;
+      position: relative;
+    }
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .participant-info {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0, 255, 136, 0.8);
+      color: black;
+      padding: 8px;
+      font-weight: bold;
+    }
+  `]
+})
+export class MyCustomVideoCardComponent {
+  @Input() stream!: MediaStream;
+  @Input() participant!: any;
+  @Input() parameters!: any;
+}
+
+// Use it in MediasfuGeneric
+@Component({
+  template: `
+    <app-mediasfu-generic 
+      [credentials]="credentials"
+      [customVideoCard]="CustomVideoCard">
+    </app-mediasfu-generic>
+  `
+})
+export class AppComponent {
+  CustomVideoCard = MyCustomVideoCardComponent;
+  credentials = { apiUserName: 'username', apiKey: 'key' };
+}
+```
+
+---
+
+## Working with Methods <a name="working-with-methods"></a>
+
+MediaSFU provides 200+ methods for controlling every aspect of your real-time communication experience. Let's explore the most important categories.
+
+### Media Control Methods
+
+#### Video Control
+
+```typescript
+// Toggle video on/off
+parameters.clickVideo({ parameters });
+
+// Switch camera (front/back on mobile)
+parameters.switchVideoAlt({ parameters });
+
+// Switch to specific camera by ID
+const cameras = await parameters.getMediaDevicesList('videoinput');
+parameters.switchUserVideo({
+  videoPreference: cameras[1].deviceId,
+  parameters
+});
+
+// Get current video state
+const isVideoOn = parameters.videoAlreadyOn;
+
+// Subscribe to video state changes (RxJS)
+parameters.videoAlreadyOn.subscribe((isOn: boolean) => {
+  console.log('Video is now:', isOn ? 'ON' : 'OFF');
+});
+
+// Update video state programmatically
+parameters.updateVideoAlreadyOn.next(true);
+```
+
+#### Audio Control
+
+```typescript
+// Toggle audio on/off
+parameters.clickAudio({ parameters });
+
+// Switch microphone
+const microphones = await parameters.getMediaDevicesList('audioinput');
+parameters.switchUserAudio({
+  audioPreference: microphones[1].deviceId,
+  parameters
+});
+
+// Get current audio state
+const isAudioOn = parameters.audioAlreadyOn;
+const hasHostPermission = parameters.micAction; // Host approval status
+
+// Subscribe to audio state changes
+parameters.audioAlreadyOn.subscribe((isOn: boolean) => {
+  console.log('Audio is now:', isOn ? 'ON' : 'OFF');
+});
+
+// Mute/unmute specific participant (host only)
+parameters.controlMedia({
+  participantId: 'participant-id',
+  participantName: 'John Doe',
+  type: 'audio',
+  socket: parameters.socket,
+  roomName: parameters.roomName
+});
+```
+
+#### Screen Sharing
+
+```typescript
+// Start screen sharing
+parameters.clickScreenShare({ parameters });
+
+// Stop screen sharing
+parameters.stopShareScreen({ parameters });
+
+// Check if screen sharing is available
+const canShare = await parameters.checkScreenShare({ parameters });
+
+// Get screen share state
+const isSharing = parameters.screenAlreadyOn;
+const shareAudio = parameters.shareScreenStarted; // Sharing with audio
+
+// Subscribe to screen share state
+parameters.screenAlreadyOn.subscribe((isSharing: boolean) => {
+  console.log('Screen sharing:', isSharing ? 'ACTIVE' : 'INACTIVE');
+});
+```
+
+### Media Device and Stream Utility Methods
+
+#### Get Available Media Devices
+
+```typescript
+// Get available cameras
+const cameras = await parameters.getMediaDevicesList('videoinput');
+cameras.forEach(camera => {
+  console.log(`Camera: ${camera.label} (${camera.deviceId})`);
+});
+
+// Get available microphones
+const microphones = await parameters.getMediaDevicesList('audioinput');
+microphones.forEach(mic => {
+  console.log(`Microphone: ${mic.label} (${mic.deviceId})`);
+});
+
+// Building a device selector UI
+@Component({
+  selector: 'app-device-selector',
+  template: `
+    <div class="device-selector">
+      <select (change)="onCameraChange($event)">
+        <option value="">Select Camera</option>
+        @for (camera of cameras; track camera.deviceId) {
+          <option [value]="camera.deviceId">
+            {{ camera.label }}
+          </option>
+        }
+      </select>
+
+      <select (change)="onMicrophoneChange($event)">
+        <option value="">Select Microphone</option>
+        @for (mic of microphones; track mic.deviceId) {
+          <option [value]="mic.deviceId">
+            {{ mic.label }}
+          </option>
+        }
+      </select>
+    </div>
+  `
+})
+export class DeviceSelectorComponent implements OnInit {
+  @Input() parameters: any;
+  cameras: MediaDeviceInfo[] = [];
+  microphones: MediaDeviceInfo[] = [];
+
+  async ngOnInit() {
+    await this.loadDevices();
+  }
+
+  async loadDevices() {
+    this.cameras = await this.parameters.getMediaDevicesList('videoinput');
+    this.microphones = await this.parameters.getMediaDevicesList('audioinput');
+  }
+
+  onCameraChange(event: any) {
+    this.parameters.switchUserVideo({
+      videoPreference: event.target.value,
+      parameters: this.parameters
+    });
+  }
+
+  onMicrophoneChange(event: any) {
+    this.parameters.switchUserAudio({
+      audioPreference: event.target.value,
+      parameters: this.parameters
+    });
+  }
+}
+```
+
+#### Get Participant Media Streams
+
+```typescript
+// Get participant video stream by ID
+const videoStream = await parameters.getParticipantMedia({ 
+  id: 'producer-123', 
+  kind: 'video' 
+});
+
+// Get participant audio stream by name
+const audioStream = await parameters.getParticipantMedia({ 
+  name: 'John Doe', 
+  kind: 'audio' 
+});
+
+// Example: Custom participant stream monitor
+@Component({
+  selector: 'app-stream-monitor',
+  template: `
+    <div class="stream-monitor">
+      <h3>Participant Streams</h3>
+      @for (participant of participants; track participant.id) {
+        <div class="participant-item">
+          <span>{{ participant.name }}</span>
+          <button (click)="viewStream(participant)">View Stream</button>
+          <button (click)="monitorAudio(participant)">Monitor Audio</button>
+        </div>
+      }
+
+      @if (selectedStream) {
+        <div class="stream-viewer">
+          <video #streamVideo autoplay playsinline></video>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .stream-monitor { padding: 20px; }
+    .participant-item { 
+      margin: 10px 0; 
+      display: flex; 
+      gap: 10px; 
+      align-items: center; 
+    }
+    .stream-viewer video { 
+      width: 100%; 
+      max-width: 640px; 
+      border: 2px solid #1976d2; 
+    }
+  `]
+})
+export class StreamMonitorComponent {
+  @Input() parameters: any;
+  @ViewChild('streamVideo') videoElement!: ElementRef<HTMLVideoElement>;
+  
+  selectedStream: MediaStream | null = null;
+
+  get participants() {
+    return this.parameters?.participants || [];
+  }
 
-A basic guide on how to use the module for common tasks.
+  async viewStream(participant: any) {
+    const stream = await this.parameters.getParticipantMedia({
+      id: participant.videoID,
+      name: participant.name,
+      kind: 'video'
+    });
 
-This section will guide users through the initial setup and installation of the npm module.
-## Introduction
+    if (stream && this.videoElement) {
+      this.selectedStream = stream;
+      this.videoElement.nativeElement.srcObject = stream;
+    } else {
+      console.log('No video stream found for participant');
+    }
+  }
 
-MediaSFU is a 2-page application consisting of a prejoin/welcome page and the main events room page. This guide will walk you through the basic usage of the module for setting up these pages.
+  async monitorAudio(participant: any) {
+    const stream = await this.parameters.getParticipantMedia({
+      id: participant.audioID,
+      name: participant.name,
+      kind: 'audio'
+    });
 
-### Documentation Reference
+    if (stream) {
+      // Create audio context for analysis
+      const audioContext = new AudioContext();
+      const analyser = audioContext.createAnalyser();
+      const source = audioContext.createMediaStreamSource(stream);
+      source.connect(analyser);
+      
+      console.log('Monitoring audio for:', participant.name);
+      // Add your audio analysis logic here
+    } else {
+      console.log('No audio stream found for participant');
+    }
+  }
+}
+```
 
-For comprehensive documentation on the available methods, components, and functions, please visit [mediasfu.com](https://www.mediasfu.com/angular/). This resource provides detailed information for this guide and additional documentation.
+### Participant Management Methods
 
-## Prebuilt Event Rooms
+```typescript
+// Get all participants
+const participants = parameters.participants;
+const participantCount = parameters.participantsCounter;
+
+// Subscribe to participant changes
+parameters.participants.subscribe((participants: any[]) => {
+  console.log('Participants updated:', participants);
+});
+
+// Filter participants
+const videoParticipants = participants.filter((p: any) => p.videoOn);
+const audioOnlyParticipants = participants.filter((p: any) => !p.videoOn);
+const mutedParticipants = participants.filter((p: any) => p.muted);
+
+// Find specific participant
+const participant = participants.find((p: any) => p.name === 'John Doe');
+
+// Remove participant from room (host only)
+parameters.disconnectUserInitiate({
+  member: participantId,
+  roomName: parameters.roomName,
+  socket: parameters.socket
+});
+
+// Change participant role (host only)
+parameters.updateParticipant({
+  participantId: 'participant-id',
+  islevel: '2', // '2' = host, '1' = co-host, '0' = participant
+  parameters
+});
+
+// Request to unmute participant (sends request)
+parameters.requestScreenShare({ parameters });
+```
 
-MediaSFU provides prebuilt event rooms for various purposes. These rooms are rendered as full pages and can be easily imported and used in your application. Here are the available prebuilt event rooms:
+### Chat & Messaging Methods
 
-1. **MediasfuGeneric**: A generic event room suitable for various types of events.
-2. **MediasfuBroadcast**: A room optimized for broadcasting events.
-3. **MediasfuWebinar**: Specifically designed for hosting webinars.
-4. **MediasfuConference**: Ideal for hosting conferences.
-5. **MediasfuChat**: A room tailored for interactive chat sessions.
+```typescript
+// Send a group message
+parameters.sendMessage({
+  message: 'Hello everyone!',
+  type: 'group',
+  parameters
+});
+
+// Send direct message
+parameters.sendMessage({
+  message: 'Private message',
+  type: 'direct',
+  receivers: ['participant-id'],
+  parameters
+});
+
+// Access message history
+const messages = parameters.messages;
+
+// Subscribe to new messages (RxJS)
+parameters.messages.subscribe((messages: any[]) => {
+  console.log('Messages updated:', messages);
+});
+
+// Example: Custom chat component
+@Component({
+  selector: 'app-custom-chat',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="chat-container">
+      <div class="messages">
+        @for (msg of messages; track msg.timestamp) {
+          <div class="message">
+            <strong>{{ msg.sender }}:</strong> {{ msg.message }}
+          </div>
+        }
+      </div>
+      <div class="input-area">
+        <input
+          [(ngModel)]="message"
+          (keyup.enter)="sendMessage()"
+          placeholder="Type a message..."
+        />
+        <button (click)="sendMessage()">Send</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .chat-container { 
+      display: flex; 
+      flex-direction: column; 
+      height: 400px; 
+    }
+    .messages { 
+      flex: 1; 
+      overflow-y: auto; 
+      padding: 10px; 
+    }
+    .message { 
+      margin: 5px 0; 
+      padding: 8px; 
+      background: #f5f5f5; 
+      border-radius: 4px; 
+    }
+    .input-area { 
+      display: flex; 
+      gap: 10px; 
+      padding: 10px; 
+      border-top: 1px solid #ddd; 
+    }
+    input { 
+      flex: 1; 
+      padding: 8px; 
+      border: 1px solid #ddd; 
+      border-radius: 4px; 
+    }
+    button { 
+      padding: 8px 16px; 
+      background: #1976d2; 
+      color: white; 
+      border: none; 
+      border-radius: 4px; 
+      cursor: pointer; 
+    }
+  `]
+})
+export class CustomChatComponent implements OnInit {
+  @Input() parameters: any;
+  message = '';
+  messages: any[] = [];
 
-Users can easily pick an interface and render it in their app.
+  ngOnInit() {
+    // Subscribe to messages
+    this.parameters?.messages?.subscribe((msgs: any[]) => {
+      this.messages = msgs;
+    });
+  }
 
-If no API credentials are provided, a default home page will be displayed where users can scan or manually enter the event details.
+  sendMessage() {
+    if (this.message.trim()) {
+      this.parameters?.sendMessage({
+        message: this.message,
+        type: 'group',
+        parameters: this.parameters
+      });
+      this.message = '';
+    }
+  }
+}
+```
 
-To use these prebuilt event rooms, simply import them into your application:
+### Recording Methods
 
-```javascript
-## Simplest Usage
+```typescript
+// Start recording
+parameters.startRecording({ parameters });
+
+// Stop recording
+parameters.stopRecording({ parameters });
+
+// Pause recording
+parameters.pauseRecording({ parameters });
+
+// Resume recording
+parameters.resumeRecording({ parameters });
+
+// Configure recording settings
+parameters.updateRecording({
+  recordingMediaOptions: 'video', // or 'audio'
+  recordingAudioOptions: 'all', // or 'host'
+  recordingVideoOptions: 'all', // or 'host'
+  recordingVideoType: 'fullDisplay', // or 'bestDisplay', 'all'
+  recordingDisplayType: 'video', // 'media', 'video', 'all'
+  recordingBackgroundColor: '#000000',
+  recordingNameTagsColor: '#ffffff',
+  recordingOrientationVideo: 'landscape', // or 'portrait'
+  recordingNameTags: true,
+  recordingAddHLS: false,
+  parameters
+});
+
+// Check recording state
+const isRecording = parameters.recordStarted;
+const isPaused = parameters.recordPaused;
+const recordingTime = parameters.recordElapsedTime;
+
+// Subscribe to recording state changes
+parameters.recordStarted.subscribe((isRecording: boolean) => {
+  console.log('Recording:', isRecording ? 'ACTIVE' : 'STOPPED');
+});
+```
 
-The simplest way to use MediaSFU in your Angular application is by directly rendering the prebuilt event room component, such as `MediasfuGeneric`.
+### Polls & Surveys Methods
 
 ```typescript
-// app.component.ts
-import { Component } from '@angular/core';
-import { MediasfuGeneric } from 'mediasfu-angular';
-
+// Create a poll
+parameters.handleCreatePoll({
+  poll: {
+    question: 'What time works best?',
+    type: 'multiple', // or 'single'
+    options: ['10 AM', '2 PM', '5 PM']
+  },
+  parameters
+});
+
+// Vote on a poll
+parameters.handleVotePoll({
+  pollId: 'poll-id',
+  optionIndex: 1,
+  parameters
+});
+
+// End a poll
+parameters.handleEndPoll({
+  pollId: 'poll-id',
+  parameters
+});
+
+// Access poll data
+const polls = parameters.polls;
+
+// Subscribe to polls changes
+parameters.polls.subscribe((polls: any[]) => {
+  const activePoll = polls.find(p => p.status === 'active');
+  console.log('Active poll:', activePoll);
+});
+
+// Example: Custom poll component
 @Component({
-  selector: 'app-root',
+  selector: 'app-custom-poll',
   standalone: true,
-  imports: [MediasfuGeneric],
+  imports: [CommonModule],
   template: `
-    <app-mediasfu-generic></app-mediasfu-generic>
+    @if (activePoll) {
+      <div class="poll-container">
+        <h3>{{ activePoll.question }}</h3>
+        <div class="poll-options">
+          @for (option of activePoll.options; track $index) {
+            <button 
+              class="poll-option"
+              (click)="vote($index)">
+              {{ option }} 
+              <span class="votes">({{ activePoll.votes?.[$index] || 0 }} votes)</span>
+            </button>
+          }
+        </div>
+        @if (isHost) {
+          <button class="end-poll" (click)="endPoll()">
+            End Poll
+          </button>
+        }
+      </div>
+    }
   `,
+  styles: [`
+    .poll-container {
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .poll-options {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin: 20px 0;
+    }
+    .poll-option {
+      padding: 12px;
+      border: 2px solid #1976d2;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s;
+      display: flex;
+      justify-content: space-between;
+    }
+    .poll-option:hover {
+      background: #1976d2;
+      color: white;
+    }
+    .votes {
+      font-size: 0.9em;
+      opacity: 0.7;
+    }
+    .end-poll {
+      padding: 10px 20px;
+      background: #d32f2f;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  `]
 })
-export class AppComponent { }
-```
+export class CustomPollComponent implements OnInit {
+  @Input() parameters: any;
+  activePoll: any = null;
 
-That's it! With just 3 lines of code, you have a fully functional video conferencing application with:
+  ngOnInit() {
+    this.parameters?.polls?.subscribe((polls: any[]) => {
+      this.activePoll = polls.find((p: any) => p.status === 'active');
+    });
+  }
 
-- 🎥 **Video & Audio Streaming** - High-quality real-time communication
-- 🖥️ **Screen Sharing** - Share your screen with annotation support  
-- 💬 **Interactive Chat** - Direct and group messaging
-- 👥 **Participant Management** - Join/leave controls and permissions
-- 🎨 **Customizable UI** - Professional, responsive design out of the box
-- 📱 **Mobile Responsive** - Works seamlessly on all devices
-- 🔧 **Zero Configuration** - No complex setup required
+  get isHost() {
+    return this.parameters?.islevel === '2';
+  }
 
-## Why Choose MediaSFU?
+  vote(optionIndex: number) {
+    if (this.activePoll) {
+      this.parameters?.handleVotePoll({
+        pollId: this.activePoll.id,
+        optionIndex,
+        parameters: this.parameters
+      });
+    }
+  }
 
-### ⚡ **Lightning Fast Setup**
-From `npm install` to a working video conference in under 2 minutes. No WebRTC knowledge required.
+  endPoll() {
+    if (this.activePoll) {
+      this.parameters?.handleEndPoll({
+        pollId: this.activePoll.id,
+        parameters: this.parameters
+      });
+    }
+  }
+}
+```
 
-### 🎯 **Multiple Event Types Ready**
-Choose from pre-built, production-ready templates:
+### Breakout Rooms Methods
 
 ```typescript
-import { 
-  MediasfuGeneric,    // 🌐 All-purpose meetings
-  MediasfuBroadcast,  // 📺 Live streaming events  
-  MediasfuWebinar,    // 🎓 Educational sessions
-  MediasfuConference, // 💼 Professional meetings
-  MediasfuChat        // 💬 Interactive chat rooms
-} from 'mediasfu-angular';
+// Create breakout rooms
+parameters.createBreakoutRooms({
+  numberOfRooms: 3,
+  participants: parameters.participants,
+  parameters
+});
+
+// Assign participant to room
+parameters.assignParticipantToRoom({
+  participantId: 'participant-id',
+  roomIndex: 0,
+  parameters
+});
+
+// Start breakout rooms
+parameters.startBreakoutRooms({ parameters });
+
+// Stop breakout rooms
+parameters.stopBreakoutRooms({ parameters });
+
+// Access breakout room data
+const breakoutRooms = parameters.breakoutRooms;
+const currentRoom = parameters.currentBreakoutRoom;
+
+// Subscribe to breakout room changes
+parameters.breakoutRooms.subscribe((rooms: any[]) => {
+  console.log('Breakout rooms:', rooms);
+});
 ```
 
-### 🛠️ **Infinitely Customizable**
-
-**Replace Any Component:** Don't like our video card? Swap it with yours:
+### Whiteboard Methods
 
 ```typescript
-// Your custom video component
-@Component({
-  selector: 'my-video-card',
-  template: `<div class="my-custom-video">{{ participant.name }}</div>`
-})
-export class MyVideoCard { }
-
-// Use it in MediaSFU
-const customVideoCard = this.customComponentService.createComponentWithInjector(
-  MyVideoCard, { participant: participantData }
-);
+// Show/hide whiteboard
+parameters.updateWhiteboardStarted.next(true);
+parameters.updateWhiteboardEnded.next(false);
 
-// MediaSFU will use your component instead
-this.mediasfuParameters = { customVideoCard };
-```
+// Configure whiteboard
+parameters.launchConfigureWhiteboard?.launchConfigureWhiteboard({ parameters });
 
-**Custom Layouts:** Build your own UI while keeping MediaSFU's powerful backend:
+// Access whiteboard state
+const isWhiteboardActive = parameters.whiteboardStarted;
 
-```typescript
-// Your WhatsApp-style video call UI
-@Component({
-  template: `
-    <div class="whatsapp-style-layout">
-      <header>My Custom Header</header>
-      <main>Your video layout here</main>
-    </div>
-  `
-})
-export class MyCustomLayout { }
+// Subscribe to whiteboard state
+parameters.whiteboardStarted.subscribe((isActive: boolean) => {
+  console.log('Whiteboard:', isActive ? 'ACTIVE' : 'INACTIVE');
+});
 
-// MediaSFU handles all the complex WebRTC, you handle the UI
-this.mediasfuParameters = { 
-  customMainComponent: MyCustomLayout,
-  returnUI: false // Disable default MediaSFU UI
-};
+// Access whiteboard users
+const whiteboardUsers = parameters.whiteboardUsers;
 ```
 
-### 🚀 **Production-Ready Features**
-
-- **Cloud Recording** with custom watermarks and layouts
-- **Breakout Rooms** for team collaboration
-- **Polls & Surveys** for audience engagement  
-- **Waiting Rooms** with host controls
-- **Advanced Permissions** and moderation tools
-- **Real-time Analytics** and monitoring
-- **Enterprise Security** with end-to-end encryption
-
-### 🌍 **Flexible Deployment Options**
+### Utility Methods
 
 ```typescript
-// Option 1: MediaSFU Cloud (Fastest setup)
-const credentials = { apiUserName: 'your-key', apiKey: 'your-secret' };
+// Check permissions
+const hasPermission = await parameters.checkPermission({
+  permissionType: 'video', // or 'audio'
+  parameters
+});
+
+// Format large numbers
+const formatted = parameters.formatNumber(1250000); // Returns "1.25M"
+
+// Sleep/delay
+await parameters.sleep({ ms: 1000 });
+
+// Update display settings
+parameters.updateMainWindow.next(true); // Show/hide main window
+
+// Trigger layout recalculation
+parameters.onScreenChanges({ changed: true, parameters });
+
+// Get room information
+const roomInfo = {
+  name: parameters.roomName,
+  host: parameters.host,
+  capacity: parameters.capacity,
+  eventType: parameters.eventType,
+  participants: parameters.participants,
+  isRecording: parameters.recordStarted
+};
 
-// Option 2: Self-hosted Community Edition (Free)
-const localLink = 'http://your-server.com';
+// Subscribe to room state changes
+parameters.roomName.subscribe((name: string) => {
+  console.log('Room name:', name);
+});
 
-// Option 3: Hybrid (Best of both worlds)
-const config = { 
-  localLink: 'http://your-server.com',
-  connectMediaSFU: true, // Use cloud for advanced features
-  credentials: credentials
-};
+parameters.participantsCounter.subscribe((count: number) => {
+  console.log('Participant count:', count);
+});
 ```
 
+---
+
 ## Programmatically Fetching Tokens
 
 If you prefer to fetch the required tokens programmatically without visiting MediaSFU's website, you can use the `PreJoinPage` component and pass your credentials as inputs.
@@ -2590,335 +4334,504 @@ Once your custom components are built, modify the imports of `prepopulateUserMed
 
 This allows for full flexibility in how media is displayed in both the main and mini grids, giving you the ability to tailor the user experience to your specific needs.
 
-## Custom Component Injection Service
 
-MediaSFU provides a powerful `CustomComponentInjectionService` that enables advanced custom component integration across all MediaSFU components. This service offers a comprehensive set of utilities for managing custom component rendering, validation, and lifecycle management.
 
-### Features
+---
 
-- **Type-safe component validation**: Check if components are Angular components, HTML elements, or function components
-- **Dynamic component injection**: Create components with custom parameters and injectors
-- **Safe rendering utilities**: Handle different component types with proper error handling and fallbacks
-- **Component lifecycle management**: Proper cleanup and destruction of custom components
-- **Template integration helpers**: Utilities for the custom component pattern used throughout MediaSFU
+## UI Component Customization & Override System
 
-### Basic Usage
+MediaSFU provides comprehensive customization capabilities for all UI components through a powerful override system. You can customize styling, inject custom templates, or completely replace components with your own implementations.
 
-First, import the service and types:
+### Overview
 
-```typescript
-import { 
-  CustomComponentInjectionService,
-  CustomComponent,
-  CustomComponentType,
-  CustomComponentParameters,
-  CustomComponentContext
-} from 'mediasfu-angular';
-```
+The customization system operates at three levels:
 
-#### Injecting the Service
+1. **Style Overrides**: Apply custom CSS styles to containers, overlays, and content areas
+2. **Template Injection**: Replace default component templates with custom Angular templates
+3. **Component Replacement**: Completely replace MediaSFU components with your own using the `WithOverrideDirective`
 
-```typescript
-import { Component, inject } from '@angular/core';
+### 1. Style Customization
+
+All display and modal components support style customization through Input properties:
+
+#### Display Components (MainContainer, MainAspect, MainScreen, MainGrid, OtherGrid, SubAspect, FlexibleGrid, AudioGrid)
 
+```typescript
 @Component({
-  selector: 'app-my-component',
-  template: `...`
+  selector: 'app-my-meeting',
+  template: `
+    <app-main-container
+      [containerStyle]="{
+        backgroundColor: '#1a1a1a',
+        border: '2px solid #333',
+        borderRadius: '12px',
+        padding: '20px'
+      }"
+      [backgroundColor]="'transparent'">
+    </app-main-container>
+    
+    <app-flexible-grid
+      [containerStyle]="{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: '16px'
+      }">
+    </app-flexible-grid>
+  `
 })
-export class MyComponent {
-  private customComponentService = inject(CustomComponentInjectionService);
+export class MyMeetingComponent {
+  // Custom styles can also be dynamic
+  mainGridStyle: Partial<CSSStyleDeclaration> = {
+    backgroundColor: '#2a2a2a',
+    maxWidth: '1400px',
+    margin: '0 auto'
+  };
 }
 ```
 
-#### Creating Custom Components with Parameters
+#### Modal Components (All modals support overlayStyle, contentStyle)
 
 ```typescript
-// Create a custom component with injected parameters
-const customVideoCard = this.customComponentService.createComponentWithInjector(
-  MyCustomVideoCard,
-  {
-    participant: participantData,
-    options: videoOptions,
-    callbacks: eventHandlers
+@Component({
+  selector: 'app-custom-modal-example',
+  template: `
+    <!-- Participants Modal with custom styling -->
+    <app-participants-modal
+      [isParticipantsModalVisible]="true"
+      [overlayStyle]="{
+        backgroundColor: 'rgba(0, 0, 0, 0.85)',
+        backdropFilter: 'blur(8px)'
+      }"
+      [contentStyle]="{
+        backgroundColor: '#ffffff',
+        borderRadius: '16px',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+        maxWidth: '600px',
+        padding: '24px'
+      }">
+    </app-participants-modal>
+    
+    <!-- Recording Modal with custom theme -->
+    <app-recording-modal
+      [isRecordingModalVisible]="true"
+      [contentStyle]="{
+        backgroundColor: '#f5f5f5',
+        border: '3px solid #007bff',
+        fontFamily: 'Inter, sans-serif'
+      }">
+    </app-recording-modal>
+  `
+})
+export class CustomModalExample {
+  // Styles can be computed or conditional
+  get modalOverlay(): Partial<CSSStyleDeclaration> {
+    return {
+      backgroundColor: this.isDarkMode ? 'rgba(0,0,0,0.9)' : 'rgba(0,0,0,0.5)'
+    };
   }
-);
-
-// Use in MediaSFU component
-const params = {
-  customVideoCard: customVideoCard,
-  // ... other parameters
-};
-```
-
-#### Component Type Validation
-
-```typescript
-// Check component types
-if (this.customComponentService.isCustomComponent(component)) {
-  // Handle Angular component with injector
-  console.log('Angular component detected');
-} else if (this.customComponentService.isHTMLElement(component)) {
-  // Handle HTML element
-  console.log('HTML element detected');
-} else if (this.customComponentService.isFunctionComponent(component)) {
-  // Handle function component
-  console.log('Function component detected');
 }
 ```
 
-#### Safe HTML Element Access
-
-```typescript
-// Safely get outerHTML from components
-const htmlContent = this.customComponentService.getHtmlElementOuterHTML(component);
-if (htmlContent) {
-  // Use the HTML content
-  element.innerHTML = htmlContent;
-}
-```
+### 2. Template Injection
 
-#### Component Resolution Pattern
+Replace default component templates with custom Angular templates using `TemplateRef`:
 
 ```typescript
-// Resolve between custom and default components
-const resolvedComponent = this.customComponentService.resolveComponent(
-  customComponent, // May be undefined
-  defaultComponent // Fallback component
-);
-
-// Check if custom main component should be used
-const useCustomLayout = this.customComponentService.shouldUseCustomMainComponent(
-  customMainComponent
-);
-```
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 
-### Advanced Usage Examples
-
-#### 1. Dynamic Component Rendering
-
-```typescript
 @Component({
-  selector: 'app-dynamic-renderer',
+  selector: 'app-custom-template-demo',
   template: `
-    <ng-container #dynamicContainer></ng-container>
-  `
-})
-export class DynamicRenderer {
-  @ViewChild('dynamicContainer', { read: ViewContainerRef }) 
-  container!: ViewContainerRef;
-  
-  private customComponentService = inject(CustomComponentInjectionService);
-  
-  renderCustomComponent(customComponent: CustomComponentType<any>) {
-    const context: CustomComponentContext = {
-      parameters: {
-        data: this.componentData,
-        events: this.eventHandlers
-      },
-      injector: this.injector,
-      config: {
-        enabled: true,
-        fallbackToDefault: true
-      }
-    };
+    <!-- Define custom template -->
+    <ng-template #customMainGridTemplate let-components="components">
+      <div class="my-custom-grid">
+        <div class="grid-header">
+          <h3>Active Participants</h3>
+          <span class="count">{{ components?.length || 0 }}</span>
+        </div>
+        <div class="grid-content">
+          <!-- Custom rendering logic -->
+          <div *ngFor="let component of components" class="participant-tile">
+            <ng-container *ngComponentOutlet="component"></ng-container>
+          </div>
+        </div>
+      </div>
+    </ng-template>
     
-    const componentRef = this.customComponentService.renderCustomComponent(
-      customComponent,
-      this.container,
-      context
-    );
+    <!-- Use custom template -->
+    <app-main-grid
+      [customTemplate]="customMainGridTemplate"
+      [mainGridStream]="streams">
+    </app-main-grid>
     
-    // Store reference for cleanup
-    this.activeComponents.push(componentRef);
-  }
+    <!-- Custom modal template -->
+    <ng-template #customAlertTemplate let-message="message" let-type="type">
+      <div class="custom-alert" [class.error]="type === 'error'">
+        <i class="alert-icon"></i>
+        <p>{{ message }}</p>
+        <button (click)="closeAlert()">Dismiss</button>
+      </div>
+    </ng-template>
+    
+    <app-alert-component
+      [customTemplate]="customAlertTemplate"
+      [visible]="showAlert"
+      [message]="alertMessage">
+    </app-alert-component>
+  `,
+  styles: [`
+    .my-custom-grid {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 12px;
+      padding: 20px;
+    }
+    
+    .grid-header {
+      display: flex;
+      justify-content: space-between;
+      color: white;
+      margin-bottom: 16px;
+    }
+    
+    .participant-tile {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      padding: 12px;
+      margin: 8px 0;
+    }
+  `]
+})
+export class CustomTemplateDemo {
+  @ViewChild('customMainGridTemplate') customMainGridTemplate!: TemplateRef<any>;
+  @ViewChild('customAlertTemplate') customAlertTemplate!: TemplateRef<any>;
   
-  ngOnDestroy() {
-    // Clean up all custom components
-    this.activeComponents.forEach(component => {
-      this.customComponentService.destroyCustomComponent(component);
-    });
+  streams: any[] = [];
+  showAlert = false;
+  alertMessage = '';
+  
+  closeAlert() {
+    this.showAlert = false;
   }
 }
 ```
 
-#### 2. Custom Video Card Implementation
+### 3. Component Replacement with UI Overrides
+
+Use the `uiOverrides` system to completely replace MediaSFU components with your own:
 
 ```typescript
-// Define your custom video card component
+import { Component, Type } from '@angular/core';
+import { MediasfuUICustomOverrides } from 'mediasfu-angular';
+
+// Your custom replacement components
 @Component({
-  selector: 'app-custom-video-card',
+  selector: 'app-my-custom-video-card',
   template: `
-    <div class="custom-video-wrapper">
-      <video [srcObject]="videoStream" autoplay playsinline></video>
-      <div class="custom-controls">
-        <button (click)="toggleAudio()">🎤</button>
-        <button (click)="toggleVideo()">📹</button>
+    <div class="premium-video-card">
+      <video [srcObject]="videoStream" autoplay></video>
+      <div class="overlay">
+        <span class="name">{{ participant.name }}</span>
+        <button class="pin-btn" (click)="togglePin()">📌</button>
       </div>
-      <div class="custom-info">{{ participantName }}</div>
     </div>
   `,
-  imports: [CommonModule]
+  styles: [`
+    .premium-video-card {
+      position: relative;
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+    .overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: linear-gradient(transparent, rgba(0,0,0,0.8));
+      padding: 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  `]
 })
-export class CustomVideoCard {
-  @Input() participant!: Participant;
-  @Input() videoStream!: MediaStream;
-  @Input() options!: any;
-  
-  get participantName() {
-    return this.participant?.name || 'Unknown';
-  }
-  
-  toggleAudio() {
-    // Custom audio toggle logic
-  }
-  
-  toggleVideo() {
-    // Custom video toggle logic
-  }
-}
-
-// In your main component
-export class MyMediaComponent {
-  private customComponentService = inject(CustomComponentInjectionService);
-  
-  ngOnInit() {
-    // Create custom video card with parameters
-    const customVideoCard = this.customComponentService.createComponentWithInjector(
-      CustomVideoCard,
-      {
-        participant: this.currentParticipant,
-        options: this.videoOptions
-      }
-    );
-    
-    // Use in MediaSFU parameters
-    this.mediasfuParameters = {
-      customVideoCard: customVideoCard,
-      // ... other parameters
-    };
-  }
+export class MyCustomVideoCard {
+  // Your custom implementation
 }
-```
 
-#### 3. Custom Main Component with Template Restructuring
-
-```typescript
 @Component({
-  selector: 'app-custom-main-layout',
+  selector: 'app-my-custom-control-buttons',
   template: `
-    <div class="custom-main-layout">
-      <header class="custom-header">
-        <h1>My Custom Stream</h1>
-        <div class="custom-controls">
-          <!-- Custom control buttons -->
-        </div>
-      </header>
-      
-      <main class="custom-content">
-        <div class="video-area">
-          <!-- Your custom video layout -->
-        </div>
-        <div class="participant-list">
-          <!-- Custom participant list -->
-        </div>
-      </main>
-      
-      <footer class="custom-footer">
-        <!-- Custom footer content -->
-      </footer>
+    <div class="modern-controls">
+      <button class="control-btn mic" [class.active]="!isMuted" (click)="toggleMic()">
+        <i class="icon-mic"></i>
+      </button>
+      <button class="control-btn camera" [class.active]="!isVideoOff" (click)="toggleVideo()">
+        <i class="icon-camera"></i>
+      </button>
+      <button class="control-btn screen" (click)="toggleScreen()">
+        <i class="icon-screen"></i>
+      </button>
+      <button class="control-btn leave danger" (click)="leaveMeeting()">
+        <i class="icon-leave"></i>
+      </button>
     </div>
   `,
-  imports: [CommonModule]
+  styles: [`
+    .modern-controls {
+      display: flex;
+      gap: 12px;
+      padding: 16px;
+      background: rgba(0, 0, 0, 0.8);
+      border-radius: 24px;
+    }
+    .control-btn {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .control-btn.active {
+      background: #4CAF50;
+      color: white;
+    }
+    .control-btn.danger {
+      background: #f44336;
+      color: white;
+    }
+  `]
 })
-export class CustomMainLayout {
-  @Input() parameters!: any;
-  @Input() credentials!: any;
+export class MyCustomControlButtons {
+  // Your custom implementation
 }
 
-// Usage
-const customMainComponent = this.customComponentService.createComponentWithInjector(
-  CustomMainLayout,
-  {
-    theme: 'dark',
-    layout: 'grid'
-  }
-);
-
-// MediaSFU will use this instead of default layout
-this.mediasfuParameters = {
-  customMainComponent: customMainComponent,
-  // ... other parameters
-};
-```
-
-### Component Validation and Error Handling
-
-```typescript
-// Validate before using
-if (this.customComponentService.validateCustomComponent(customComponent)) {
-  // Component is valid, proceed with rendering
-  this.renderComponent(customComponent);
-} else {
-  // Handle invalid component, use fallback
-  console.warn('Invalid custom component, using default');
-  this.renderComponent(this.defaultComponent);
+@Component({
+  selector: 'app-meeting-room',
+  template: `
+    <app-mediasfu-generic
+      [credentials]="credentials"
+      [uiOverrides]="customUIOverrides"
+      [returnUI]="false">
+    </app-mediasfu-generic>
+  `
+})
+export class MeetingRoomComponent {
+  credentials = { apiUserName: 'user', apiKey: 'key' };
+  
+  // Define your UI overrides
+  customUIOverrides: Partial<MediasfuUICustomOverrides> = {
+    // Replace video cards
+    VideoCard: MyCustomVideoCard as Type<any>,
+    
+    // Replace control buttons
+    ControlButtonsComponent: MyCustomControlButtons as Type<any>,
+    
+    // Replace modals
+    ParticipantsModal: MyCustomParticipantsModal as Type<any>,
+    
+    // Replace other display components
+    MainGrid: MyCustomMainGrid as Type<any>,
+    FlexibleGrid: MyCustomFlexibleGrid as Type<any>,
+    
+    // ... any other components you want to replace
+  };
 }
-
-// Merge options safely
-const mergedOptions = this.customComponentService.mergeComponentOptions(
-  customOptions,
-  defaultOptions
-);
 ```
 
-### TypeScript Types
+### 4. Using WithOverrideDirective
 
-The service works with these main types:
+The `*appWithOverride` directive enables conditional component replacement:
 
 ```typescript
-// Union type for all supported component types
-type CustomComponentType<T = any> = CustomComponent<T> | HTMLElement | CustomComponentFunction;
+import { Component } from '@angular/core';
+import { WithOverrideDirective } from 'mediasfu-angular';
 
-// Angular component with injector
-interface CustomComponent<T = any> {
-  component: Type<T>;
-  injector?: Injector;
+@Component({
+  selector: 'app-conditional-override',
+  imports: [WithOverrideDirective, /* other imports */],
+  template: `
+    <!-- Use default or custom component based on condition -->
+    <app-video-card
+      *appWithOverride="useCustomCard ? MyCustomVideoCard : null"
+      [participant]="currentParticipant">
+    </app-video-card>
+    
+    <!-- Override with custom component when premium feature enabled -->
+    <app-control-buttons
+      *appWithOverride="isPremiumUser ? PremiumControlButtons : null">
+    </app-control-buttons>
+  `
+})
+export class ConditionalOverrideComponent {
+  useCustomCard = false;
+  isPremiumUser = false;
+  
+  MyCustomVideoCard = MyCustomVideoCard;
+  PremiumControlButtons = PremiumControlButtons;
 }
+```
 
-// Function that returns HTMLElement
-type CustomComponentFunction = () => HTMLElement;
+### 5. Complete Example: Themed Meeting Room
 
-// Parameters for component injection
-interface CustomComponentParameters {
-  [key: string]: any;
-}
+Here's a comprehensive example combining all customization approaches:
 
-// Context for component rendering
-interface CustomComponentContext {
-  parameters: CustomComponentParameters;
-  injector?: Injector;
-  config?: ComponentInjectionConfig;
-}
+```typescript
+import { Component, TemplateRef, ViewChild, Type } from '@angular/core';
+import { MediasfuUICustomOverrides } from 'mediasfu-angular';
 
-// Configuration options
-interface ComponentInjectionConfig {
-  enabled: boolean;
-  overrideDefaults: boolean;
-  fallbackToDefault: boolean;
+@Component({
+  selector: 'app-themed-meeting-room',
+  template: `
+    <!-- Custom alert template -->
+    <ng-template #brandedAlertTemplate let-message="message">
+      <div class="branded-alert">
+        <img src="/assets/logo.png" alt="Logo" class="alert-logo">
+        <p>{{ message }}</p>
+      </div>
+    </ng-template>
+    
+    <app-mediasfu-conference
+      [credentials]="credentials"
+      [returnUI]="true"
+      [uiOverrides]="themeOverrides"
+      [containerStyle]="meetingContainerStyle">
+      
+      <!-- Customize individual components -->
+      <app-main-grid
+        [containerStyle]="gridStyle"
+        [customTemplate]="customGridTemplate">
+      </app-main-grid>
+      
+      <app-control-buttons-component
+        [containerStyle]="controlsStyle">
+      </app-control-buttons-component>
+      
+      <app-participants-modal
+        [overlayStyle]="modalOverlayStyle"
+        [contentStyle]="modalContentStyle">
+      </app-participants-modal>
+      
+      <app-alert-component
+        [customTemplate]="brandedAlertTemplate">
+      </app-alert-component>
+    </app-mediasfu-conference>
+  `,
+  styles: [`
+    .branded-alert {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px;
+      background: white;
+      border-left: 4px solid #007bff;
+    }
+  `]
+})
+export class ThemedMeetingRoomComponent {
+  @ViewChild('brandedAlertTemplate') brandedAlertTemplate!: TemplateRef<any>;
+  
+  credentials = {
+    apiUserName: 'your-api-username',
+    apiKey: 'your-api-key'
+  };
+  
+  // Container styling
+  meetingContainerStyle: Partial<CSSStyleDeclaration> = {
+    backgroundColor: '#0f0f0f',
+    fontFamily: 'Inter, system-ui, sans-serif'
+  };
+  
+  // Grid styling
+  gridStyle: Partial<CSSStyleDeclaration> = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+    gap: '16px',
+    padding: '20px'
+  };
+  
+  // Controls styling
+  controlsStyle: Partial<CSSStyleDeclaration> = {
+    position: 'fixed',
+    bottom: '24px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    borderRadius: '32px',
+    padding: '12px 24px'
+  };
+  
+  // Modal styling
+  modalOverlayStyle: Partial<CSSStyleDeclaration> = {
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    backdropFilter: 'blur(10px)'
+  };
+  
+  modalContentStyle: Partial<CSSStyleDeclaration> = {
+    backgroundColor: '#1a1a1a',
+    color: '#ffffff',
+    borderRadius: '16px',
+    border: '1px solid #333'
+  };
+  
+  // Component overrides
+  themeOverrides: Partial<MediasfuUICustomOverrides> = {
+    VideoCard: BrandedVideoCard as Type<any>,
+    ControlButtonsComponent: ModernControls as Type<any>
+  };
 }
 ```
 
-### Best Practices
+### Customizable Components Reference
+
+#### Display Components
+- `MainContainer` - Main viewport container
+- `MainAspect` - Aspect ratio container
+- `MainScreen` - Screen share display
+- `MainGrid` - Primary participant grid
+- `OtherGrid` - Secondary participant grid
+- `SubAspect` - Sub-aspect ratio container
+- `FlexibleGrid` - Flexible layout grid
+- `AudioGrid` - Audio-only participants grid
+
+Each accepts: `containerStyle?: Partial<CSSStyleDeclaration>`, `customTemplate?: TemplateRef<any>`
+
+#### Modal Components
+- `LoadingModal` - Loading indicator
+- `ConfirmExitModal` - Exit confirmation
+- `ConfirmHereModal` - Presence confirmation
+- `ShareEventModal` - Event sharing
+- `AlertComponent` - Alert notifications
+- `MenuModal` - Main menu
+- `ParticipantsModal` - Participants list
+- `RecordingModal` - Recording controls
+- `RequestsModal` - Media requests
+- `WaitingRoomModal` - Waiting room management
+- `CoHostModal` - Co-host management
+- `DisplaySettingsModal` - Display settings
+- `EventSettingsModal` - Event settings
+- `MediaSettingsModal` - Media device settings
+- `MessagesModal` - Chat messages
+- `PollModal` - Polls interface
+- `BackgroundModal` - Background effects
+- `BreakoutRoomsModal` - Breakout rooms
+- `ConfigureWhiteboardModal` - Whiteboard settings
+- `ScreenboardModal` - Screen annotation
+
+Each accepts: `overlayStyle?: Partial<CSSStyleDeclaration>`, `contentStyle?: Partial<CSSStyleDeclaration>`, `customTemplate?: TemplateRef<any>`
 
-1. **Always validate components** before rendering
-2. **Use proper cleanup** to prevent memory leaks
-3. **Leverage type guards** for safe component handling
-4. **Provide fallbacks** for failed component rendering
-5. **Use meaningful parameter names** when creating injectors
-6. **Test custom components** in isolation before integration
+### Best Practices
 
-The `CustomComponentInjectionService` provides a robust foundation for building highly customizable MediaSFU applications while maintaining type safety and proper Angular practices.
+1. **Type Safety**: Always use `Partial<CSSStyleDeclaration>` for style properties
+2. **Template Context**: Ensure your custom templates accept the correct context variables
+3. **Component Lifecycle**: Custom replacement components should implement the same interface as the original
+4. **Performance**: Avoid inline style objects in templates; define them in the component class
+5. **Responsive Design**: Use CSS Grid and Flexbox for responsive layouts
+6. **Accessibility**: Maintain ARIA attributes and keyboard navigation in custom components
+7. **Testing**: Test custom components in isolation before integration
 
+---
 
 # API Reference <a name="api-reference"></a>