mediasfu-angular 2.1.5 → 2.2.0

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

@@ -182,6 +182,10 @@ export type MediasfuWebinarOptions = {
  * @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-Webinar".
  *
@@ -206,13 +210,17 @@ export type MediasfuWebinarOptions = {
  *   [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-webinar>
  * ```
  */
@@ -357,6 +365,10 @@ export declare class MediasfuWebinar implements OnInit, OnDestroy {
     noUIPreJoinOptions?: CreateMediaSFURoomOptions | JoinMediaSFURoomOptions;
     joinMediaSFURoom?: JoinRoomOnMediaSFUType;
     createMediaSFURoom?: CreateRoomOnMediaSFUType;
+    customVideoCard: any;
+    customAudioCard: any;
+    customMiniCard: any;
+    customMainComponent: any;
     title: string;
     private mainHeightWidthSubscription;
     private validatedSubscription;
@@ -1768,6 +1780,9 @@ export declare class MediasfuWebinar 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";
@@ -2489,6 +2504,9 @@ export declare class MediasfuWebinar 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";
@@ -3213,6 +3231,9 @@ export declare class MediasfuWebinar 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";
@@ -3934,6 +3955,9 @@ export declare class MediasfuWebinar 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";
@@ -4658,6 +4682,9 @@ export declare class MediasfuWebinar 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";
@@ -5379,6 +5406,9 @@ export declare class MediasfuWebinar 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";
@@ -6194,6 +6224,9 @@ export declare class MediasfuWebinar 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";
@@ -6915,6 +6948,9 @@ export declare class MediasfuWebinar 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";
@@ -7019,5 +7055,5 @@ export declare class MediasfuWebinar implements OnInit, OnDestroy {
     })[];
     connect_Socket(apiUserName: string, token: string, skipSockets?: boolean): Promise<Socket | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MediasfuWebinar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MediasfuWebinar, "app-mediasfu-webinar", 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<MediasfuWebinar, "app-mediasfu-webinar", 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/consumers/add-videos-grid.service.d.ts

@@ -12,6 +12,9 @@ export interface AddVideosGridParameters extends UpdateMiniCardsGridParameters,
     forceFullDisplay: boolean;
     otherGridStreams: CustomMediaComponent[][];
     updateOtherGridStreams: (otherGridStreams: CustomMediaComponent[][]) => void;
+    customVideoCard?: any;
+    customAudioCard?: any;
+    customMiniCard?: any;
     updateMiniCardsGrid: UpdateMiniCardsGridType;
     getUpdatedAllParams: () => AddVideosGridParameters;
     [key: string]: any;

package/dist/lib/consumers/prepopulate-user-media.service.d.ts

@@ -37,6 +37,9 @@ export interface PrepopulateUserMediaParameters extends AudioCardParameters {
     updateScreenForceFullDisplay: (force: boolean) => void;
     updateUpdateMainWindow: (update: boolean) => void;
     updateMainGridStream: (components: CustomMediaComponent[]) => void;
+    customVideoCard?: any;
+    customAudioCard?: any;
+    customMiniCard?: any;
     getUpdatedAllParams: () => PrepopulateUserMediaParameters;
     [key: string]: any;
 }

package/dist/lib/consumers/stream-success-video.service.d.ts

@@ -30,6 +30,7 @@ export interface StreamSuccessVideoParameters extends CreateSendTransportParamet
     keepBackground: boolean;
     appliedBackground: boolean;
     videoProducer: Producer | null;
+    updateTransportCreated: (created: boolean) => void;
     updateTransportCreatedVideo: (created: boolean) => void;
     updateVideoAlreadyOn: (videoOn: boolean) => void;
     updateVideoAction: (videoAction: boolean) => void;
@@ -87,6 +88,7 @@ export type StreamSuccessVideoType = (options: StreamSuccessVideoOptions) => Pro
  * @param {boolean} options.parameters.videoAlreadyOn - Indicates if the video is already on.
  * @param {Function} options.parameters.showAlert - Function to show alert messages.
  * @param {Function} options.parameters.updateParticipants - Function to update the participants list.
+ * @param {Function} options.parameters.updateTransportCreated - Function to update the transport creation state.
  * @param {Function} options.parameters.updateTransportCreatedVideo - Function to update the transport creation state.
  * @param {Function} options.parameters.updateVideoAlreadyOn - Function to update the video status.
  * @param {Function} options.parameters.updateVideoAction - Function to update the video action state.

package/dist/lib/methods/utils/create-room-on-media-sfu.service.d.ts

@@ -5,7 +5,8 @@ import * as i0 from "@angular/core";
  *
  * This method sends a POST request to the MediaSFU API to create a new room.
  * It validates the provided credentials and dynamically constructs the API endpoint,
- * supporting the Community Edition via a custom `localLink`.
+ * supporting the Community Edition via a custom `localLink`. The method includes
+ * a 30-second protection mechanism to prevent duplicate room creation requests.
  *
  * @param {object} options - Configuration options for creating the room.
  * @param {CreateMediaSFURoomOptions | JoinMediaSFURoomOptions} options.payload -
@@ -28,12 +29,12 @@ import * as i0 from "@angular/core";
 * const response = await createRoomOnMediaSFU.createRoomOnMediaSFU({
 *   payload: {
 *     action: 'create',
-*     duration: 120, // Duration in minutes
-*     capacity: 20, // Max participants
+*     duration: 60, // Duration in minutes
+*     capacity: 10, // Max participants
 *     userName: 'hostUser',
 *     scheduledDate: Date.now() + 3600000, // One hour from now
 *     secureCode: 'secure123', // Optional
-*     eventType: 'webinar', // Optional
+*     eventType: 'conference', // Optional
 *   },
 *   apiUserName: 'yourAPIUSERNAME',
 *   apiKey: 'yourAPIKEY',
@@ -53,7 +54,8 @@ export declare class CreateRoomOnMediaSFU {
    *
    * This method sends a POST request to the MediaSFU API to create a new room.
    * It validates the provided credentials and dynamically constructs the API endpoint,
-   * supporting the Community Edition via a custom `localLink`.
+   * supporting the Community Edition via a custom `localLink`. The method includes
+   * a 30-second protection mechanism to prevent duplicate room creation requests.
    *
    * @param {object} options - Configuration options for creating the room.
    * @param {CreateMediaSFURoomOptions | JoinMediaSFURoomOptions} options.payload -
@@ -76,12 +78,12 @@ export declare class CreateRoomOnMediaSFU {
     * const response = await createRoomOnMediaSFU.createRoomOnMediaSFU({
     *   payload: {
     *     action: 'create',
-    *     duration: 120, // Duration in minutes
-    *     capacity: 20, // Max participants
+    *     duration: 60, // Duration in minutes
+    *     capacity: 10, // Max participants
     *     userName: 'hostUser',
     *     scheduledDate: Date.now() + 3600000, // One hour from now
     *     secureCode: 'secure123', // Optional
-    *     eventType: 'webinar', // Optional
+    *     eventType: 'conference', // Optional
     *   },
     *   apiUserName: 'yourAPIUSERNAME',
     *   apiKey: 'yourAPIKEY',

package/dist/lib/services/custom-component-injection.service.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Custom Component Injection Service
+ * Manages custom component injection and rendering for MediaSFU Angular components
+ */
+import { Injector, ComponentRef, ViewContainerRef, Type } from '@angular/core';
+import { CustomComponent, CustomComponentType, CustomComponentFunction, CustomComponentParameters, CustomComponentContext } from '../@types/custom-component.types';
+import * as i0 from "@angular/core";
+export declare class CustomComponentInjectionService {
+    private defaultConfig;
+    constructor();
+    /**
+     * Creates an injector with custom parameters for component injection
+     * @param parameters Custom parameters to inject
+     * @param parentInjector Parent injector to inherit from
+     * @returns New injector with custom parameters
+     */
+    createCustomInjector(parameters: CustomComponentParameters, parentInjector?: Injector): Injector;
+    /**
+     * Checks if a component is a custom Angular component
+     */
+    isCustomComponent<T>(comp: CustomComponentType<T>): comp is CustomComponent<T>;
+    /**
+     * Checks if a component is a function-based component
+     */
+    isFunctionComponent(comp: CustomComponentType): comp is CustomComponentFunction;
+    /**
+     * Checks if a component is an HTML element
+     */
+    isHTMLElement(comp: CustomComponentType): comp is HTMLElement;
+    /**
+     * Safely gets the outerHTML of an HTMLElement component
+     * @param comp Component that could be HTMLElement or CustomComponent
+     * @returns outerHTML string or empty string if not HTMLElement
+     */
+    getHtmlElementOuterHTML<T>(comp: CustomComponentType<T>): string;
+    /**
+     * Renders a custom component in the specified container
+     * @param customComponent The custom component to render
+     * @param container ViewContainerRef where the component should be rendered
+     * @param context Component context with parameters and configuration
+     * @returns ComponentRef or HTMLElement reference
+     */
+    renderCustomComponent<T>(customComponent: CustomComponentType<T>, container: ViewContainerRef, context: CustomComponentContext): ComponentRef<T> | HTMLElement | null;
+    /**
+     * Creates a component object with injector for dynamic component rendering
+     * @param componentType Component type
+     * @param parameters Parameters to inject
+     * @param parentInjector Parent injector
+     * @returns Component object with injector
+     */
+    createComponentWithInjector<T>(componentType: Type<T>, parameters?: CustomComponentParameters, parentInjector?: Injector): CustomComponent<T>;
+    /**
+     * Validates if a custom component can be rendered
+     * @param customComponent Component to validate
+     * @returns boolean indicating if component is valid
+     */
+    validateCustomComponent<T>(customComponent: CustomComponentType<T>): boolean;
+    /**
+     * Merges custom component options with defaults
+     * @param customOptions Custom component options
+     * @param defaultOptions Default component options
+     * @returns Merged options
+     */
+    mergeComponentOptions<T>(customOptions: Partial<T>, defaultOptions: T): T;
+    /**
+     * Destroys a custom component and cleans up resources
+     * @param componentRef Component reference to destroy
+     */
+    destroyCustomComponent<T>(componentRef: ComponentRef<T> | HTMLElement | null): void;
+    /**
+     * Helper method to resolve component from custom or default
+     * This is useful for the pattern: customComponent || defaultComponent
+     * @param customComponent Custom component (can be undefined)
+     * @param defaultComponent Default fallback component
+     * @returns The resolved component
+     */
+    resolveComponent<T>(customComponent: CustomComponentType<T> | undefined, defaultComponent: CustomComponentType<T>): CustomComponentType<T>;
+    /**
+     * Checks if we should use custom main component (for template restructuring)
+     * @param customMainComponent Custom main component
+     * @returns boolean indicating if custom main component should be used
+     */
+    shouldUseCustomMainComponent<T>(customMainComponent: CustomComponentType<T> | undefined): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomComponentInjectionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CustomComponentInjectionService>;
+}

package/dist/public-api.d.ts

@@ -51,6 +51,7 @@ export * from './lib/methods/polls-methods/launch-poll.service';
 export * from './lib/methods/background-methods/launch-background.service';
 export * from './lib/methods/breakout-room-methods/launch-breakout-rooms.service';
 export * from './lib/methods/whiteboard-methods/launch-configure-whiteboard.service';
+export * from './lib/services/custom-component-injection.service';
 export * from './lib/sockets/socket-manager.service';
 export * from './lib/producer-client/producer-client-emits/join-room-client.service';
 export * from './lib/producer-client/producer-client-emits/update-room-parameters-client.service';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediasfu-angular",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "author": "MediaSFU",
   "license": "MIT",
   "description": "MediaSFU Prebuilt Angular SDK",
@@ -14,26 +14,26 @@
     "email": "info@mediasfu.com"
   },
   "peerDependencies": {
-    "@angular/animations": "^19.0.1",
-    "@angular/common": "^19.0.1",
-    "@angular/compiler": "^19.0.1",
-    "@angular/core": "^19.0.1",
-    "@angular/forms": "^19.0.1",
-    "@angular/platform-browser": "^19.0.1",
-    "@angular/platform-browser-dynamic": "^19.0.1",
-    "@angular/router": "^19.0.1",
+    "@angular/animations": "^19.2.15",
+    "@angular/common": "^19.2.15",
+    "@angular/compiler": "^19.2.15",
+    "@angular/core": "^19.2.15",
+    "@angular/forms": "^19.2.15",
+    "@angular/platform-browser": "^19.2.15",
+    "@angular/platform-browser-dynamic": "^19.2.15",
+    "@angular/router": "^19.2.15",
     "@fortawesome/angular-fontawesome": "^1.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.1",
-    "@fortawesome/free-brands-svg-icons": "^6.7.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@mediapipe/selfie_segmentation": "^0.1.1675465747",
     "@zxing/ngx-scanner": "^19.0.0",
-    "bootstrap": "^5.3.3",
-    "ngx-cookie-service": "^19.0.0",
+    "bootstrap": "^5.3.8",
+    "ngx-cookie-service": "^19.1.2",
     "rxjs": "~7.8.0",
     "zone.js": "~0.15.0",
     "mediasoup-client": "3.7.17",
-    "socket.io-client": "^4.3.2"
+    "socket.io-client": "^4.8.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"