mediasfu-angular 2.1.5 → 2.2.0

package/dist/lib/@types/custom-component.types.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Custom component injection types for MediaSFU Angular
+ * This file defines interfaces and types for custom component injection patterns
+ * similar to React's component injection but adapted for Angular's architecture
+ */
+import { Type, Injector, TemplateRef } from '@angular/core';
+/**
+ * Custom component structure for Angular component injection
+ * Can be either a traditional component with injector or a function that returns an element
+ */
+export interface CustomComponent<T = any> {
+    component: Type<T>;
+    injector?: Injector;
+}
+/**
+ * Function-based custom component
+ */
+export type CustomComponentFunction = () => HTMLElement;
+/**
+ * Union type for all supported custom component types
+ */
+export type CustomComponentType<T = any> = CustomComponent<T> | CustomComponentFunction | HTMLElement;
+/**
+ * Options for PrejoinPage custom component injection
+ */
+export interface PrejoinPageCustomOptions {
+    /** Custom welcome/prejoin page component */
+    customWelcomeComponent?: CustomComponentType;
+    /** Custom form component for room creation/joining */
+    customFormComponent?: CustomComponentType;
+    /** Custom branding/logo component */
+    customBrandingComponent?: CustomComponentType;
+}
+/**
+ * Options for VideoCard custom component injection
+ */
+export interface VideoCardCustomOptions {
+    /** Custom info overlay component */
+    customInfoComponent?: CustomComponentType;
+    /** Custom controls overlay component */
+    customControlsComponent?: CustomComponentType;
+    /** Custom entire video card wrapper */
+    customVideoCardComponent?: CustomComponentType;
+}
+/**
+ * Options for AudioCard custom component injection
+ */
+export interface AudioCardCustomOptions {
+    /** Custom info overlay component */
+    customInfoComponent?: CustomComponentType;
+    /** Custom controls overlay component */
+    customControlsComponent?: CustomComponentType;
+    /** Custom entire audio card wrapper */
+    customAudioCardComponent?: CustomComponentType;
+}
+/**
+ * Options for MiniCard custom component injection
+ */
+export interface MiniCardCustomOptions {
+    /** Custom mini card component */
+    customMiniCardComponent?: CustomComponentType;
+    /** Custom overlay component */
+    customOverlayComponent?: CustomComponentType;
+}
+/**
+ * Options for main UI component customization
+ */
+export interface MainUICustomOptions {
+    /** Custom main container component */
+    customMainContainerComponent?: CustomComponentType;
+    /** Custom main screen component */
+    customMainScreenComponent?: CustomComponentType;
+    /** Custom main aspect component */
+    customMainAspectComponent?: CustomComponentType;
+    /** Custom main grid component */
+    customMainGridComponent?: CustomComponentType;
+    /** Custom control buttons component */
+    customControlButtonsComponent?: CustomComponentType;
+}
+/**
+ * Comprehensive custom component options for MediaSFU
+ */
+export interface MediaSFUCustomComponents {
+    prejoinPage?: PrejoinPageCustomOptions;
+    videoCard?: VideoCardCustomOptions;
+    audioCard?: AudioCardCustomOptions;
+    miniCard?: MiniCardCustomOptions;
+    mainUI?: MainUICustomOptions;
+}
+/**
+ * Component injection configuration
+ */
+export interface ComponentInjectionConfig {
+    /** Enable/disable custom component injection */
+    enabled: boolean;
+    /** Override default components with custom ones */
+    overrideDefaults: boolean;
+    /** Fallback to default if custom component fails */
+    fallbackToDefault: boolean;
+}
+/**
+ * Parameters passed to custom components
+ */
+export interface CustomComponentParameters {
+    /** Component-specific parameters */
+    [key: string]: any;
+}
+/**
+ * Custom component context for dependency injection
+ */
+export interface CustomComponentContext {
+    /** Component parameters */
+    parameters: CustomComponentParameters;
+    /** Injector instance for dependency injection */
+    injector?: Injector;
+    /** Component configuration */
+    config?: ComponentInjectionConfig;
+}
+/**
+ * Angular equivalent of React CustomComponentType for full UI replacement
+ * Component that receives all MediaSFU parameters and replaces the entire interface
+ */
+export type CustomFullUIComponentType = Type<any> | TemplateRef<any>;
+/**
+ * Parameters passed to custom full UI components
+ */
+export interface CustomFullUIParameters {
+    /** All MediaSFU parameters and functions */
+    [key: string]: any;
+}

package/dist/lib/@types/types.d.ts

@@ -476,6 +476,8 @@ export interface CreateRoomOptions {
     safeRoomAction: 'warn' | 'kick' | 'ban';
     dataBuffer: boolean;
     bufferType: 'images' | 'audio' | 'all';
+    directionSIP: 'inbound' | 'outbound' | 'both';
+    preferPCMA: boolean;
 }
 export interface CreateMediaSFURoomOptions {
     action: 'create';
@@ -493,6 +495,8 @@ export interface CreateMediaSFURoomOptions {
     safeRoomAction?: 'warn' | 'kick' | 'ban';
     dataBuffer?: boolean;
     bufferType?: 'images' | 'audio' | 'all';
+    directionSIP?: 'inbound' | 'outbound' | 'both';
+    preferPCMA?: boolean;
 }
 export interface JoinMediaSFURoomOptions {
     action: 'join';
@@ -676,3 +680,4 @@ export type CreateWebRTCTransportResponse = {
     iceParameters: IceParameters;
     error?: string;
 };
+export * from './custom-component.types';

package/dist/lib/components/mediasfu-components/mediasfu-broadcast.component.d.ts

@@ -160,6 +160,10 @@ export type MediasfuBroadcastOptions = {
  * @input {CreateMediaSFURoomOptions | JoinMediaSFURoomOptions} noUIPreJoinOptions - Options for the prejoin page without UI.
  * @input {JoinRoomOnMediaSFUType} joinMediaSFURoom - Function to join a room on MediaSFU.
  * @input {CreateRoomOnMediaSFUType} createMediaSFURoom - Function to create a room on MediaSFU.
+ * @input {any} customVideoCard - Custom component to replace the default VideoCard component.
+ * @input {any} customAudioCard - Custom component to replace the default AudioCard component.
+ * @input {any} customMiniCard - Custom component to replace the default MiniCard component.
+ * @input {any} customMainComponent - Custom component that provides complete control over the main UI, bypassing default MediaSFU styling.
  *
  * @property {string} title - The title of the component, defaults to "MediaSFU-Broadcast".
  *
@@ -183,13 +187,17 @@ export type MediasfuBroadcastOptions = {
  *   [useLocalUIMode]="true"
  *   [seedData]="seedDataObject"
  *   [useSeed]="true"
- *   [imgSrc]="https://example.com/logo.png">
+ *   [imgSrc]="'https://example.com/logo.png'"
  *   [sourceParameters]="{ source: 'camera', width: 640, height: 480 }"
  *   [updateSourceParameters]="updateSourceParameters"
  *   [returnUI]="true"
  *   [noUIPreJoinOptions]="{ roomName: 'room1', userName: 'user1' }"
  *   [joinMediaSFURoom]="joinMediaSFURoom"
- *   [createMediaSFURoom]="createMediaSFURoom">
+ *   [createMediaSFURoom]="createMediaSFURoom"
+ *   [customVideoCard]="CustomVideoCardComponent"
+ *   [customAudioCard]="CustomAudioCardComponent"
+ *   [customMiniCard]="CustomMiniCardComponent"
+ *   [customMainComponent]="CustomMainComponent">
  * </app-mediasfu-broadcast>
  * ```
  */
@@ -312,6 +320,10 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
     noUIPreJoinOptions?: CreateMediaSFURoomOptions | JoinMediaSFURoomOptions;
     joinMediaSFURoom?: JoinRoomOnMediaSFUType;
     createMediaSFURoom?: CreateRoomOnMediaSFUType;
+    customVideoCard: any;
+    customAudioCard: any;
+    customMiniCard: any;
+    customMainComponent: any;
     title: string;
     private mainHeightWidthSubscription;
     private validatedSubscription;
@@ -1719,6 +1731,9 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -2438,6 +2453,9 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -3160,6 +3178,9 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -3879,6 +3900,9 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -4601,6 +4625,9 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -5320,6 +5347,9 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -5445,5 +5475,5 @@ export declare class MediasfuBroadcast implements OnInit, OnDestroy {
     controlBroadcastButtonsArray: ButtonTouch[];
     connect_Socket(apiUserName: string, token: string, skipSockets?: boolean): Promise<Socket | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MediasfuBroadcast, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuBroadcast, "app-mediasfu-broadcast", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuBroadcast, "app-mediasfu-broadcast", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; "customVideoCard": { "alias": "customVideoCard"; "required": false; }; "customAudioCard": { "alias": "customAudioCard"; "required": false; }; "customMiniCard": { "alias": "customMiniCard"; "required": false; }; "customMainComponent": { "alias": "customMainComponent"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/lib/components/mediasfu-components/mediasfu-chat.component.d.ts

@@ -141,6 +141,10 @@ export type MediasfuChatOptions = {
  * @input {CreateMediaSFURoomOptions | JoinMediaSFURoomOptions} noUIPreJoinOptions - Options for the prejoin page without UI.
  * @input {JoinRoomOnMediaSFUType} joinMediaSFURoom - Function to join a room on MediaSFU.
  * @input {CreateRoomOnMediaSFUType} createMediaSFURoom - Function to create a room on MediaSFU.
+ * @input {any} customVideoCard - Custom component to replace the default VideoCard component.
+ * @input {any} customAudioCard - Custom component to replace the default AudioCard component.
+ * @input {any} customMiniCard - Custom component to replace the default MiniCard component.
+ * @input {any} customMainComponent - Custom component that provides complete control over the main UI, bypassing default MediaSFU styling.
  *
  * @property {string} title - The title of the component, defaults to "MediaSFU-Chat".
  *
@@ -166,13 +170,17 @@ export type MediasfuChatOptions = {
  *   [useLocalUIMode]="true"
  *   [seedData]="seedDataObject"
  *   [useSeed]="true"
- *   [imgSrc]="https://example.com/logo.png">
+ *   [imgSrc]="'https://example.com/logo.png'"
  *   [sourceParameters]="{ source: 'camera', width: 640, height: 480 }"
  *   [updateSourceParameters]="updateSourceParameters"
  *   [returnUI]="true"
  *   [noUIPreJoinOptions]="{ roomName: 'room1', userName: 'user1' }"
  *   [joinMediaSFURoom]="joinMediaSFURoom"
- *   [createMediaSFURoom]="createMediaSFURoom">
+ *   [createMediaSFURoom]="createMediaSFURoom"
+ *   [customVideoCard]="CustomVideoCardComponent"
+ *   [customAudioCard]="CustomAudioCardComponent"
+ *   [customMiniCard]="CustomMiniCardComponent"
+ *   [customMainComponent]="CustomMainComponent">
  * </app-mediasfu-chat>
  * ```
  */
@@ -281,6 +289,10 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
     noUIPreJoinOptions?: CreateMediaSFURoomOptions | JoinMediaSFURoomOptions;
     joinMediaSFURoom?: JoinRoomOnMediaSFUType;
     createMediaSFURoom?: CreateRoomOnMediaSFUType;
+    customVideoCard?: any;
+    customAudioCard?: any;
+    customMiniCard?: any;
+    customMainComponent?: any;
     title: string;
     private mainHeightWidthSubscription;
     private validatedSubscription;
@@ -1687,6 +1699,9 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -2406,6 +2421,9 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -3128,6 +3146,9 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -3847,6 +3868,9 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -4569,6 +4593,9 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -5288,6 +5315,9 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -5375,5 +5405,5 @@ export declare class MediasfuChat implements OnInit, OnDestroy {
     updateControlChatButtons(): void;
     connect_Socket(apiUserName: string, token: string, skipSockets?: boolean): Promise<Socket | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MediasfuChat, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuChat, "app-mediasfu-chat", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuChat, "app-mediasfu-chat", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; "customVideoCard": { "alias": "customVideoCard"; "required": false; }; "customAudioCard": { "alias": "customAudioCard"; "required": false; }; "customMiniCard": { "alias": "customMiniCard"; "required": false; }; "customMainComponent": { "alias": "customMainComponent"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/lib/components/mediasfu-components/mediasfu-conference.component.d.ts

@@ -183,6 +183,10 @@ export type MediasfuConferenceOptions = {
  * @input {CreateMediaSFURoomOptions | JoinMediaSFURoomOptions} noUIPreJoinOptions - Options for the prejoin page without UI.
  * @input {JoinRoomOnMediaSFUType} joinMediaSFURoom - Function to join a room on MediaSFU.
  * @input {CreateRoomOnMediaSFUType} createMediaSFURoom - Function to create a room on MediaSFU.
+ * @input {any} customVideoCard - Custom component to replace the default VideoCard component.
+ * @input {any} customAudioCard - Custom component to replace the default AudioCard component.
+ * @input {any} customMiniCard - Custom component to replace the default MiniCard component.
+ * @input {any} customMainComponent - Custom component that provides complete control over the main UI, bypassing default MediaSFU styling.
  *
  * @property {string} title - The title of the component, defaults to "MediaSFU-Conference".
  *
@@ -208,13 +212,17 @@ export type MediasfuConferenceOptions = {
  *   [useLocalUIMode]="true"
  *   [seedData]="seedDataObject"
  *   [useSeed]="true"
- *   [imgSrc]="https://example.com/logo.png">
+ *   [imgSrc]="'https://example.com/logo.png'"
  *   [sourceParameters]="{ source: 'camera', width: 640, height: 480 }"
  *   [updateSourceParameters]="updateSourceParameters"
  *   [returnUI]="true"
  *   [noUIPreJoinOptions]="{ roomName: 'room1', userName: 'user1' }"
  *   [joinMediaSFURoom]="joinMediaSFURoom"
- *   [createMediaSFURoom]="createMediaSFURoom">
+ *   [createMediaSFURoom]="createMediaSFURoom"
+ *   [customVideoCard]="CustomVideoCardComponent"
+ *   [customAudioCard]="CustomAudioCardComponent"
+ *   [customMiniCard]="CustomMiniCardComponent"
+ *   [customMainComponent]="CustomMainComponent">
  * </app-mediasfu-conference>
  * ```
  */
@@ -359,6 +367,10 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
     noUIPreJoinOptions?: CreateMediaSFURoomOptions | JoinMediaSFURoomOptions;
     joinMediaSFURoom?: JoinRoomOnMediaSFUType;
     createMediaSFURoom?: CreateRoomOnMediaSFUType;
+    customVideoCard: any;
+    customAudioCard: any;
+    customMiniCard: any;
+    customMainComponent: any;
     title: string;
     private mainHeightWidthSubscription;
     private validatedSubscription;
@@ -1770,6 +1782,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -2491,6 +2506,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -3215,6 +3233,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -3936,6 +3957,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -4660,6 +4684,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -5381,6 +5408,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -6196,6 +6226,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
                 updateSocket: (value: Socket) => void;
                 updateLocalSocket: (value: Socket | null) => void;
                 updateValidated: (value: boolean) => void;
+                customVideoCard: any;
+                customAudioCard: any;
+                customMiniCard: any;
                 showAlert: ({ message, type, duration, }: {
                     message: string;
                     type: "success" | "danger";
@@ -6917,6 +6950,9 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
                     updateSocket: (value: Socket) => void;
                     updateLocalSocket: (value: Socket | null) => void;
                     updateValidated: (value: boolean) => void;
+                    customVideoCard: any;
+                    customAudioCard: any;
+                    customMiniCard: any;
                     showAlert: ({ message, type, duration, }: {
                         message: string;
                         type: "success" | "danger";
@@ -7021,5 +7057,5 @@ export declare class MediasfuConference implements OnInit, OnDestroy {
     })[];
     connect_Socket(apiUserName: string, token: string, skipSockets?: boolean): Promise<Socket | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MediasfuConference, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuConference, "app-mediasfu-conference", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuConference, "app-mediasfu-conference", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; "customVideoCard": { "alias": "customVideoCard"; "required": false; }; "customAudioCard": { "alias": "customAudioCard"; "required": false; }; "customMiniCard": { "alias": "customMiniCard"; "required": false; }; "customMainComponent": { "alias": "customMainComponent"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/lib/components/mediasfu-components/mediasfu-generic.component.d.ts

@@ -184,6 +184,10 @@ export type MediasfuGenericOptions = {
  * @input {CreateMediaSFURoomOptions | JoinMediaSFURoomOptions} noUIPreJoinOptions - Options for the prejoin page without UI.
  * @input {JoinRoomOnMediaSFUType} joinMediaSFURoom - Function to join a room on MediaSFU.
  * @input {CreateRoomOnMediaSFUType} createMediaSFURoom - Function to create a room on MediaSFU.
+ * @input {any} customVideoCard - Custom component to replace the default VideoCard component.
+ * @input {any} customAudioCard - Custom component to replace the default AudioCard component.
+ * @input {any} customMiniCard - Custom component to replace the default MiniCard component.
+ * @input {any} customMainComponent - Custom component that provides complete control over the main UI, bypassing default MediaSFU styling.
  *
  * @property {string} title - The title of the component, defaults to "MediaSFU-Generic".
  *
@@ -209,13 +213,17 @@ export type MediasfuGenericOptions = {
  *   [useLocalUIMode]="true"
  *   [seedData]="seedDataObject"
  *   [useSeed]="true"
- *   [imgSrc]="https://example.com/logo.png">
+ *   [imgSrc]="'https://example.com/logo.png'"
  *   [sourceParameters]="{ source: 'camera', width: 640, height: 480 }"
  *   [updateSourceParameters]="updateSourceParameters"
  *   [returnUI]="true"
  *   [noUIPreJoinOptions]="{ roomName: 'room1', userName: 'user1' }"
  *   [joinMediaSFURoom]="joinMediaSFURoom"
- *   [createMediaSFURoom]="createMediaSFURoom">
+ *   [createMediaSFURoom]="createMediaSFURoom"
+ *   [customVideoCard]="CustomVideoCardComponent"
+ *   [customAudioCard]="CustomAudioCardComponent"
+ *   [customMiniCard]="CustomMiniCardComponent"
+ *   [customMainComponent]="CustomMainComponent">
  * </app-mediasfu-generic>
  * ```
  */
@@ -361,6 +369,10 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
     noUIPreJoinOptions?: CreateMediaSFURoomOptions | JoinMediaSFURoomOptions;
     joinMediaSFURoom?: JoinRoomOnMediaSFUType;
     createMediaSFURoom?: CreateRoomOnMediaSFUType;
+    customVideoCard?: any;
+    customAudioCard?: any;
+    customMiniCard?: any;
+    customMainComponent?: any;
     title: string;
     private mainHeightWidthSubscription;
     private validatedSubscription;
@@ -1773,6 +1785,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -2495,6 +2510,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -3220,6 +3238,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -3942,6 +3963,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -4667,6 +4691,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
         updateSocket: (value: Socket) => void;
         updateLocalSocket: (value: Socket | null) => void;
         updateValidated: (value: boolean) => void;
+        customVideoCard: any;
+        customAudioCard: any;
+        customMiniCard: any;
         showAlert: ({ message, type, duration, }: {
             message: string;
             type: "success" | "danger";
@@ -5389,6 +5416,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
             updateSocket: (value: Socket) => void;
             updateLocalSocket: (value: Socket | null) => void;
             updateValidated: (value: boolean) => void;
+            customVideoCard: any;
+            customAudioCard: any;
+            customMiniCard: any;
             showAlert: ({ message, type, duration, }: {
                 message: string;
                 type: "success" | "danger";
@@ -6207,6 +6237,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
                 updateSocket: (value: Socket) => void;
                 updateLocalSocket: (value: Socket | null) => void;
                 updateValidated: (value: boolean) => void;
+                customVideoCard: any;
+                customAudioCard: any;
+                customMiniCard: any;
                 showAlert: ({ message, type, duration, }: {
                     message: string;
                     type: "success" | "danger";
@@ -6929,6 +6962,9 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
                     updateSocket: (value: Socket) => void;
                     updateLocalSocket: (value: Socket | null) => void;
                     updateValidated: (value: boolean) => void;
+                    customVideoCard: any;
+                    customAudioCard: any;
+                    customMiniCard: any;
                     showAlert: ({ message, type, duration, }: {
                         message: string;
                         type: "success" | "danger";
@@ -7047,5 +7083,5 @@ export declare class MediasfuGeneric implements OnInit, OnDestroy {
     })[];
     connect_Socket(apiUserName: string, token: string, skipSockets?: boolean): Promise<Socket | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MediasfuGeneric, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuGeneric, "app-mediasfu-generic", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuGeneric, "app-mediasfu-generic", never, { "PrejoinPage": { "alias": "PrejoinPage"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "useLocalUIMode": { "alias": "useLocalUIMode"; "required": false; }; "seedData": { "alias": "seedData"; "required": false; }; "useSeed": { "alias": "useSeed"; "required": false; }; "imgSrc": { "alias": "imgSrc"; "required": false; }; "sourceParameters": { "alias": "sourceParameters"; "required": false; }; "updateSourceParameters": { "alias": "updateSourceParameters"; "required": false; }; "returnUI": { "alias": "returnUI"; "required": false; }; "noUIPreJoinOptions": { "alias": "noUIPreJoinOptions"; "required": false; }; "joinMediaSFURoom": { "alias": "joinMediaSFURoom"; "required": false; }; "createMediaSFURoom": { "alias": "createMediaSFURoom"; "required": false; }; "customVideoCard": { "alias": "customVideoCard"; "required": false; }; "customAudioCard": { "alias": "customAudioCard"; "required": false; }; "customMiniCard": { "alias": "customMiniCard"; "required": false; }; "customMainComponent": { "alias": "customMainComponent"; "required": false; }; }, {}, never, never, true, never>;
 }