mediasfu-angular 1.0.1 → 2.0.0

package/dist/lib/components/menu-components/custom-buttons/custom-buttons.component.d.ts

@@ -21,58 +21,56 @@ export interface CustomButtonsOptions {
     buttons: CustomButton[];
 }
 export type CustomButtonsType = (options: CustomButtonsOptions) => HTMLElement;
+/**
+ * CustomButtons component renders a list of customizable buttons.
+ *
+ * @selector app-custom-buttons
+ * @standalone true
+ * @imports [CommonModule, FormsModule, FontAwesomeModule]
+ *
+ * @input {CustomButton[]} buttons - Array of button configurations.
+ * Each button configuration includes properties such as:
+ * - **action**: Function executed on button click.
+ * - **show**: Boolean or function determining button visibility.
+ * - **backgroundColor**: Background color of the button.
+ * - **disabled**: Boolean to disable button if set to true.
+ * - **icon**: Optional FontAwesome icon displayed on the button.
+ * - **iconStyle**: Style applied to the icon.
+ * - **text**: Text displayed on the button.
+ * - **textStyle**: Style applied to the text.
+ * - **customComponent**: A custom Angular component or HTML element rendered within the button.
+ * - **injector**: Injector used for providing dependencies to the custom component.
+ *
+ * @example
+ * ```html
+ * <app-custom-buttons [buttons]="buttonsArray"></app-custom-buttons>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * const buttonsArray: CustomButton[] = [
+ *   {
+ *     action: () => console.log('Button 1 clicked'),
+ *     show: true,
+ *     backgroundColor: 'blue',
+ *     disabled: false,
+ *     icon: faCoffee,
+ *     iconStyle: { color: 'white' },
+ *     text: 'Button 1',
+ *     textStyle: { color: 'white' },
+ *     customComponent: <CustomComponent />,
+ *     injector: Injector.create({
+ *       providers: [{ provide: 'customProp', useValue: 'customValue' }]
+ *     }),
+ *   },
+ * ];
+ * ```
+ *
+ * @class CustomButtons
+ * @method mergeStyles - Merges default styles with user-provided custom styles.
+ * @method isCustomComponentConfig - Type guard to check if an object is of type CustomComponent.
+ */
 export declare class CustomButtons {
-    /**
-     * CustomButtons component renders a list of customizable buttons.
-     *
-     * @component
-     * @param {CustomButtonsOptions} props - The properties for the CustomButtons component.
-     * @param {Array} props.buttons - An array of button configurations.
-     * @param {Object} props.buttons[].action - The function to be called when the button is clicked.
-     * @param {boolean} props.buttons[].show - Determines if the button should be displayed.
-     * @param {string} props.buttons[].backgroundColor - The background color of the button.
-     * @param {boolean} props.buttons[].disabled - Determines if the button should be disabled.
-     * @param {Object} [props.buttons[].icon] - The icon to be displayed on the button.
-     * @param {Object} [props.buttons[].iconStyle] - The style to be applied to the icon.
-     * @param {string} [props.buttons[].text] - The text to be displayed on the button.
-     * @param {Object} [props.buttons[].textStyle] - The style to be applied to the text.
-     * @param {React.ReactNode} [props.buttons[].customComponent] - A custom component to be rendered inside the button.
-     * @param {Injector} [props.buttons[].injector] - The injector to be used for the custom component.
-     * @returns {HTMLElement} The CustomButtons component.
-     * @example
-     * ```html
-     * <app-custom-buttons [buttons]="buttons"></app-custom-buttons>
-     * ```
-     * @example
-     * ```typescript
-     * const buttons = [
-     *  {
-     *   action: () => console.log('Button 1 clicked'),
-     *  show: true,
-     * backgroundColor: 'blue',
-     * disabled: false,
-     * icon: faCoffee,
-     * iconStyle: { color: 'white' },
-     * text: 'Button 1',
-     * textStyle: { color: 'white' },
-     * customComponent: <CustomComponent />,
-     * injector: Injector.create({ providers: [{ provide: 'customProp', useValue: 'customValue' }] }),
-     * },
-     * {
-     *  action: () => console.log('Button 2 clicked'),
-     * show: true,
-     * backgroundColor: 'red',
-     * disabled: false,
-     * icon: faCoffee,
-     * iconStyle: { color: 'white' },
-     * text: 'Button 2',
-     * textStyle: { color: 'white' },
-     * customComponent: <CustomComponent />,
-     * injector: Injector.create({ providers: [{ provide: 'customProp', useValue: 'customValue' }] }),
-     * },
-     * ];
-     * ```
-     */
     buttons: CustomButton[];
     faSpinner: IconDefinition;
     mergeStyles(defaultStyle: any, customStyle: any): any;

package/dist/lib/components/menu-components/meeting-id-component/meeting-id-component.component.d.ts

@@ -7,9 +7,14 @@ export type MeetingIdComponentType = (options: MeetingIdComponentOptions) => HTM
  * Component representing a meeting ID.
  *
  * @selector app-meeting-id-component
+ * @standalone true
  * @templateUrl ./meeting-id-component.component.html
  * @styleUrls ./meeting-id-component.component.css
- * @standalone true
+ *
+ * @example
+ * ```html
+ * <app-meeting-id-component [meetingID]="'123-456-789'"></app-meeting-id-component>
+ * ```
  */
 export declare class MeetingIdComponent {
     meetingID: string;

package/dist/lib/components/menu-components/meeting-passcode-component/meeting-passcode-component.component.d.ts

@@ -10,6 +10,11 @@ export type MeetingPasscodeComponentType = (options: MeetingPasscodeComponentOpt
  * @standalone true
  * @templateUrl ./meeting-passcode-component.component.html
  * @styleUrls ./meeting-passcode-component.component.css
+ *
+ * @example
+ * ```html
+ * <app-meeting-passcode-component [meetingPasscode]="'ABC123'"></app-meeting-passcode-component>
+ * ```
  */
 export declare class MeetingPasscodeComponent {
     meetingPasscode: string;

package/dist/lib/components/menu-components/menu-modal/menu-modal.component.d.ts

@@ -11,44 +11,41 @@ export interface MenuModalOptions {
     adminPasscode: string;
     islevel: string;
     eventType: EventType;
+    localLink?: string;
     onClose: () => void;
 }
 export type MenuModalType = (options: MenuModalOptions) => HTMLElement;
 /**
- * @component MenuModal
- *
- * @description
- * The MenuModal component is a standalone Angular component that displays a modal dialog.
- * It includes various customizable properties and imports necessary modules and components.
+ * Component for displaying a customizable menu modal with various options.
  *
  * @selector app-menu-modal
+ * @standalone true
  * @templateUrl ./menu-modal.component.html
  * @styleUrls ./menu-modal.component.css
  *
- * @inputs
- * @input {string} backgroundColor - The background color of the modal content. Default is '#83c0e9'.
- * @input {boolean} isVisible - Determines whether the modal is visible.
- * @input {CustomButton[]} customButtons - An array of custom buttons to be displayed in the modal.
- * @input {boolean} shareButtons - Determines whether share buttons are displayed. Default is true.
- * @input {string} position - The position of the modal on the screen. Default is 'bottomRight'.
- * @input {string} roomName - The name of the room.
- * @input {string} adminPasscode - The admin passcode for the room.
- * @input {string} islevel - The level of the user.
- * @input {() => void} onClose - A function to be called when the modal is closed.
- *
- * @methods
- * @method modalContainerStyle - Returns the style object for the modal container.
- * @method modalContentStyle - Returns the style object for the modal content.
- * @method handleClose - Calls the onClose function to handle closing the modal.
+ * @example
+ * ```html
+ * <app-menu-modal
+ *   [isVisible]="true"
+ *   backgroundColor="#83c0e9"
+ *   roomName="Room 123"
+ *   adminPasscode="AdminPass"
+ *   [customButtons]="customButtons"
+ *   [shareButtons]="true"
+ *   position="bottomRight"
+ *   islevel="2"
+ *   eventType="meeting"
+ *   localLink="https://www.google.com"
+ *   (onClose)="closeMenu()"
+ * ></app-menu-modal>
+ * ```
  *
- * @dependencies
- * - CommonModule
- * - FontAwesomeModule
- * - FormsModule
- * - CustomButtons
- * - MeetingIdComponent
- * - MeetingPasscodeComponent
- * - ShareButtonsComponent
+ * ```typescript
+ * const customButtons = [
+ *   { action: () => console.log('Clicked'), show: true, text: 'Button' },
+ * ];
+ * closeMenu() { console.log('Menu closed'); }
+ * ```
  */
 export declare class MenuModal {
     backgroundColor: string;
@@ -60,6 +57,7 @@ export declare class MenuModal {
     adminPasscode: string;
     islevel: string;
     eventType: EventType;
+    localLink: string;
     onClose: () => void;
     faBars: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -87,5 +85,5 @@ export declare class MenuModal {
     };
     handleClose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuModal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuModal, "app-menu-modal", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "customButtons": { "alias": "customButtons"; "required": false; }; "shareButtons": { "alias": "shareButtons"; "required": false; }; "position": { "alias": "position"; "required": false; }; "roomName": { "alias": "roomName"; "required": false; }; "adminPasscode": { "alias": "adminPasscode"; "required": false; }; "islevel": { "alias": "islevel"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; "onClose": { "alias": "onClose"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuModal, "app-menu-modal", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "customButtons": { "alias": "customButtons"; "required": false; }; "shareButtons": { "alias": "shareButtons"; "required": false; }; "position": { "alias": "position"; "required": false; }; "roomName": { "alias": "roomName"; "required": false; }; "adminPasscode": { "alias": "adminPasscode"; "required": false; }; "islevel": { "alias": "islevel"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "onClose": { "alias": "onClose"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/lib/components/menu-components/share-buttons-component/share-buttons-component.component.d.ts

@@ -12,35 +12,40 @@ export interface ShareButtonsComponentOptions {
     meetingID: string;
     shareButtons?: ShareButton[];
     eventType: EventType;
+    localLink?: string;
 }
 export type ShareButtonsComponentType = (options: ShareButtonsComponentOptions) => HTMLElement;
 /**
  * @component ShareButtonsComponent
- * @description This component provides a set of share buttons for different social media platforms and email.
- * It allows users to share a meeting link via various channels.
- *
  * @selector app-share-buttons-component
- * @templateUrl ./share-buttons-component.component.html
- * @styleUrls ./share-buttons-component.component.css
- * @standalone true
- * @imports [CommonModule, FontAwesomeModule]
- *
- * @input {string} meetingID - The ID of the meeting to be shared.
- * @input {ShareButton[]} shareButtons - An array of custom share buttons.
- * @input {string} eventType - The type of event (e.g., 'chat', 'broadcast', 'webinar').
+ * @description Displays a set of share buttons for sharing a meeting link on social media and email.
  *
- * @property {ShareButton[]} defaultShareButtons - The default set of share buttons.
+ * @example
+ * ```html
+ * <app-share-buttons-component
+ *   [meetingID]="'12345'"
+ *   [eventType]="'broadcast'"
+ *   [shareButtons]="customShareButtons"
+ *   [localLink]="'https://www.google.com'"
+ * ></app-share-buttons-component>
+ * ```
  *
- * @getter {string} shareName - Determines the share name based on the event type.
- * @getter {ShareButton[]} filteredShareButtons - Returns the filtered share buttons based on visibility.
+ * ```typescript
+ * const customShareButtons = [
+ *   { icon: faEnvelope, action: () => console.log('Email'), show: true },
+ *   { icon: faFacebook, action: () => console.log('Facebook'), show: true },
+ * ];
+ * ```
  */
 export declare class ShareButtonsComponent {
     meetingID: string;
     shareButtons: ShareButton[];
     eventType: EventType;
+    localLink?: string;
     defaultShareButtons: ShareButton[];
     get shareName(): "chat" | "broadcast" | "meeting";
+    getShareUrl(): string;
     get filteredShareButtons(): ShareButton[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ShareButtonsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ShareButtonsComponent, "app-share-buttons-component", never, { "meetingID": { "alias": "meetingID"; "required": false; }; "shareButtons": { "alias": "shareButtons"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ShareButtonsComponent, "app-share-buttons-component", never, { "meetingID": { "alias": "meetingID"; "required": false; }; "shareButtons": { "alias": "shareButtons"; "required": false; }; "eventType": { "alias": "eventType"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/lib/components/message-components/message-panel/message-panel.component.d.ts

@@ -73,6 +73,30 @@ export type MessagePanelType = (options: MessagePanelOptions) => HTMLElement;
  * @method handleTextInputChange - Handles changes in the text input field.
  * @method openReplyInput - Opens the reply input for a specific sender.
  * @method handleSendButton - Handles the send button click event.
+ *
+ * @example
+ * ```html
+ * <app-message-panel
+ *   [messages]="chatMessages"
+ *   [messagesLength]="chatMessages.length"
+ *   [type]="'group'"
+ *   [username]="'JohnDoe'"
+ *   [onSendMessagePress]="sendMessage"
+ *   [focusedInput]="true"
+ *   [eventType]="'webinar'"
+ *   [member]="'JohnDoe'"
+ *   [islevel]="'2'"
+ *   [startDirectMessage]="false"
+ *   [updateStartDirectMessage]="updateDirectMessageStart"
+ *   [directMessageDetails]="selectedParticipant"
+ *   [updateDirectMessageDetails]="updateParticipantDetails"
+ *   [coHostResponsibility]="coHostRoles"
+ *   [coHost]="'coHost123'"
+ *   [roomName]="'RoomName'"
+ *   [socket]="chatSocket"
+ *   [chatSetting]="'enabled'"
+ * ></app-message-panel>
+ * ```
  */
 export declare class MessagePanel implements OnInit, OnChanges {
     messages: Array<any>;

package/dist/lib/components/message-components/messages-modal/messages-modal.component.d.ts

@@ -26,6 +26,40 @@ export interface MessagesModalOptions {
     chatSetting: string;
 }
 export type MessagesModalType = (options: MessagesModalOptions) => void;
+/**
+ * @component MessagesModal
+ * @description A modal component for managing chat messages in MediaSFU applications, supporting both group and direct messaging, and providing a customizable user interface.
+ *
+ * @selector app-messages-modal
+ * @templateUrl ./messages-modal.component.html
+ * @styleUrls ./messages-modal.component.css
+ * @standalone true
+ * @imports [CommonModule, FontAwesomeModule, MessagePanel]
+ *
+ * @example
+ * ```html
+ * <app-messages-modal
+ *   [isMessagesModalVisible]="true"
+ *   [onMessagesClose]="closeMessages"
+ *   [messages]="chatMessages"
+ *   [position]="'bottomRight'"
+ *   [backgroundColor]="'#f5f5f5'"
+ *   [eventType]="'webinar'"
+ *   [member]="'JohnDoe'"
+ *   [islevel]="'2'"
+ *   [coHostResponsibility]="coHostRoles"
+ *   [coHost]="'coHost123'"
+ *   [startDirectMessage]="false"
+ *   [directMessageDetails]="selectedParticipant"
+ *   [updateStartDirectMessage]="updateDirectMessageStart"
+ *   [updateDirectMessageDetails]="updateParticipantDetails"
+ *   [showAlert]="displayAlert"
+ *   [roomName]="'RoomName'"
+ *   [socket]="chatSocket"
+ *   [chatSetting]="'enabled'"
+ * ></app-messages-modal>
+ * ```
+ */
 export declare class MessagesModal implements OnInit, OnChanges {
     private SendMessageService;
     constructor(SendMessageService: SendMessage);

package/dist/lib/components/misc-components/confirm-here-modal/confirm-here-modal.component.d.ts

@@ -8,52 +8,36 @@ export interface ConfirmHereModalOptions {
     displayColor: string;
     onConfirmHereClose: () => void;
     socket: Socket;
+    localSocket?: Socket;
     roomName: string;
     member: string;
     countdownDuration?: number;
 }
 export type ConfirmHereModalType = (options: ConfirmHereModalOptions) => void;
 /**
- * Component representing a confirmation modal with a countdown timer.
+ * @component ConfirmHereModal
+ * @description Displays a confirmation modal with a countdown timer, allowing users to confirm their presence or be automatically disconnected after the timer expires.
  *
  * @selector app-confirm-here-modal
  * @templateUrl ./confirm-here-modal.component.html
  * @styleUrls ./confirm-here-modal.component.css
- * @standalone true
  * @imports [CommonModule, FontAwesomeModule]
  *
- * @styles
- * - .spinner: Styles for the loading spinner.
- * - @keyframes spin: Keyframes for spinner animation.
- * - .modal-content: Styles for the modal content container.
- * - .loading-text: Styles for the loading text.
- *
- * @class ConfirmHereModal
- * @implements OnInit, OnDestroy
- *
- * @property {boolean} isConfirmHereModalVisible - Determines if the modal is visible.
- * @property {string} position - Position of the modal.
- * @property {string} backgroundColor - Background color of the modal.
- * @property {string} displayColor - Display color of the modal.
- * @property {Function} onConfirmHereClose - Callback function to execute when the modal is closed.
- * @property {number} [countdownDuration=120] - Duration of the countdown in seconds.
- * @property {Socket} socket - Socket instance for communication.
- * @property {string} roomName - Name of the room for socket communication.
- * @property {string} member - Member identifier for socket communication.
- * @property {IconDefinition} faSpinner - FontAwesome spinner icon.
- * @property {number} counter - Countdown counter.
- * @property {any} countdownInterval - Interval ID for the countdown timer.
- *
- * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.
- * @method ngOnChanges - Lifecycle hook that is called when any data-bound property changes.
- * @method ngOnDestroy - Lifecycle hook that is called just before the component is destroyed.
- * @method startCountdown - Starts the countdown timer.
- * @method clearCountdown - Clears the countdown timer.
- * @method handleConfirmHere - Handles the confirmation action and closes the modal.
- *
- * @getter spinnerContainerStyle - Returns the style object for the spinner container.
- * @getter modalContainerStyle - Returns the style object for the modal container.
- * @getter modalContentStyle - Returns the style object for the modal content.
+ * @example
+ * ```html
+ * <app-confirm-here-modal
+ *   [isConfirmHereModalVisible]="true"
+ *   [position]="'center'"
+ *   [backgroundColor]="'#83c0e9'"
+ *   [displayColor]="'#000000'"
+ *   [onConfirmHereClose]="closeConfirmModal"
+ *   [countdownDuration]="120"
+ *   [socket]="socketInstance"
+ *   [localSocket]="localSocketInstance"
+ *   [roomName]="'exampleRoom'"
+ *   [member]="'exampleMember'"
+ * ></app-confirm-here-modal>
+ * ```
  */
 export declare class ConfirmHereModal implements OnInit, OnDestroy {
     isConfirmHereModalVisible: boolean;
@@ -63,6 +47,7 @@ export declare class ConfirmHereModal implements OnInit, OnDestroy {
     onConfirmHereClose: () => void;
     countdownDuration?: number;
     socket: Socket;
+    localSocket?: Socket;
     roomName: string;
     member: string;
     faSpinner: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -88,5 +73,5 @@ export declare class ConfirmHereModal implements OnInit, OnDestroy {
         transform: string;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmHereModal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmHereModal, "app-confirm-here-modal", never, { "isConfirmHereModalVisible": { "alias": "isConfirmHereModalVisible"; "required": false; }; "position": { "alias": "position"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "displayColor": { "alias": "displayColor"; "required": false; }; "onConfirmHereClose": { "alias": "onConfirmHereClose"; "required": false; }; "countdownDuration": { "alias": "countdownDuration"; "required": false; }; "socket": { "alias": "socket"; "required": false; }; "roomName": { "alias": "roomName"; "required": false; }; "member": { "alias": "member"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmHereModal, "app-confirm-here-modal", never, { "isConfirmHereModalVisible": { "alias": "isConfirmHereModalVisible"; "required": false; }; "position": { "alias": "position"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "displayColor": { "alias": "displayColor"; "required": false; }; "onConfirmHereClose": { "alias": "onConfirmHereClose"; "required": false; }; "countdownDuration": { "alias": "countdownDuration"; "required": false; }; "socket": { "alias": "socket"; "required": false; }; "localSocket": { "alias": "localSocket"; "required": false; }; "roomName": { "alias": "roomName"; "required": false; }; "member": { "alias": "member"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/lib/components/misc-components/pre-join-page/pre-join-page.component.d.ts

@@ -1,16 +1,56 @@
-import { HttpClient } from '@angular/common/http';
+import { OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { CookieService } from 'ngx-cookie-service';
 import { Socket } from 'socket.io-client';
-import { ConnectSocketType } from '../../../sockets/socket-manager.service';
-import { ShowAlert } from '../../../@types/types';
+import { ConnectSocketType, ShowAlert, ConnectLocalSocketType, ResponseLocalConnectionData, RecordingParams, MeetingRoomParams } from '../../../@types/types';
+import { CheckLimitsAndMakeRequest } from '../../../methods/utils/check-limits-and-make-request.service';
+import { CreateRoomOnMediaSFU } from '../../../methods/utils/create-room-on-media-sfu.service';
+import { JoinRoomOnMediaSFU } from '../../../methods/utils/join-room-on-media-sfu.service';
 import * as i0 from "@angular/core";
+export interface JoinLocalEventRoomParameters {
+    eventID: string;
+    userName: string;
+    secureCode?: string;
+    videoPreference?: string | null;
+    audioPreference?: string | null;
+    audioOutputPreference?: string | null;
+}
+export interface JoinLocalEventRoomOptions {
+    joinData: JoinLocalEventRoomParameters;
+    link?: string;
+}
+export interface CreateLocalRoomParameters {
+    eventID: string;
+    duration: number;
+    capacity: number;
+    userName: string;
+    scheduledDate: Date;
+    secureCode: string;
+    waitRoom?: boolean;
+    recordingParams?: RecordingParams;
+    eventRoomParams?: MeetingRoomParams;
+    videoPreference?: string | null;
+    audioPreference?: string | null;
+    audioOutputPreference?: string | null;
+    mediasfuURL?: string;
+}
+export interface CreateLocalRoomOptions {
+    createData: CreateLocalRoomParameters;
+    link?: string;
+}
+export interface CreateJoinLocalRoomResponse {
+    success: boolean;
+    secret: string;
+    reason?: string;
+    url?: string;
+}
 export interface PreJoinPageParameters {
     imgSrc?: string;
     showAlert?: ShowAlert;
     updateIsLoadingModalVisible: (visible: boolean) => void;
     connectSocket: ConnectSocketType;
+    connectLocalSocket?: ConnectLocalSocketType;
     updateSocket: (socket: Socket) => void;
+    updateLocalSocket?: (socket: Socket) => void;
     updateValidated: (validated: boolean) => void;
     updateApiUserName: (userName: string) => void;
     updateApiToken: (token: string) => void;
@@ -23,39 +63,12 @@ export interface Credentials {
     apiKey: string;
 }
 export interface PreJoinPageOptions {
+    localLink?: string;
+    connectMediaSFU?: boolean;
     parameters: PreJoinPageParameters;
     credentials?: Credentials;
 }
-export interface CreateJoinRoomResponse {
-    message: string;
-    roomName: string;
-    secureCode?: string;
-    publicURL: string;
-    link: string;
-    secret: string;
-    success: boolean;
-}
-export interface CreateJoinRoomError {
-    error: string;
-    success?: boolean;
-}
-export type CreateJoinRoomType = (options: {
-    payload: any;
-    apiUserName: string;
-    apiKey: string;
-}) => Promise<{
-    data: CreateJoinRoomResponse | CreateJoinRoomError | null;
-    success: boolean;
-}>;
-export type CreateRoomOnMediaSFUType = (options: {
-    payload: any;
-    apiUserName: string;
-    apiKey: string;
-}) => Promise<{
-    data: CreateJoinRoomResponse | CreateJoinRoomError | null;
-    success: boolean;
-}>;
-export type PreJoinPageType = (options: PreJoinPageOptions) => void;
+export type PreJoinPageType = (options: PreJoinPageOptions) => HTMLElement;
 /**
  * @fileoverview PreJoinPage component for handling room creation and joining on MediaSFU.
  *
@@ -113,47 +126,47 @@ export type PreJoinPageType = (options: PreJoinPageOptions) => void;
  * @param {string} params.apiUserName - API username.
  * @param {string} params.apiKey - API key.
  * @returns {Promise<{ data: CreateJoinRoomResponse | CreateJoinRoomError | null; success: boolean }>} Response from the API.
+ *
+ * @example
+ * ```html
+ * <app-pre-join-page
+ *   [parameters]="preJoinPageParameters"
+ *   [credentials]="{ apiUserName: 'username', apiKey: 'apiKey' }"
+ *   [localLink]="'http://localhost:3000'"
+ *   [connectMediaSFU]="false"
+ * ></app-pre-join-page>
+ * ```
  */
-export declare class PreJoinPage {
+export declare class PreJoinPage implements OnInit {
     private fb;
-    private http;
-    private cookieService;
+    private checkLimitsService;
+    private createRoomService;
+    private joinRoomService;
     parameters: PreJoinPageParameters;
-    credentials: {
-        apiUserName: string;
-        apiKey: string;
-    };
+    credentials: Credentials;
+    localLink: string | undefined;
+    connectMediaSFU: boolean | undefined;
     isCreateMode: boolean;
     preJoinForm: FormGroup;
     error: string;
     imgSrc: string;
-    constructor(fb: FormBuilder, http: HttpClient, cookieService: CookieService, injectedParameters: PreJoinPageParameters, injectedCredentials: Credentials);
+    localConnected: boolean;
+    localData: ResponseLocalConnectionData | undefined;
+    initSocket: Socket | undefined;
+    constructor(fb: FormBuilder, injectedParameters: PreJoinPageParameters, injectedCredentials: Credentials, injectedLocalLink: string, injectedConnectMediaSFU: boolean, checkLimitsService: CheckLimitsAndMakeRequest, createRoomService: CreateRoomOnMediaSFU, joinRoomService: JoinRoomOnMediaSFU);
+    ngOnInit(): void;
+    private connectLocalSocket;
     toggleMode(): void;
-    handleCreateRoom(): Promise<void>;
-    handleJoinRoom(): Promise<void>;
-    checkLimitsAndMakeRequest({ apiUserName, apiToken, link, apiKey, userName, }: {
-        apiUserName: string;
-        apiToken: string;
-        link: string;
-        apiKey?: string;
-        userName: string;
-    }): Promise<void>;
-    createRoomOnMediaSFU({ payload, apiUserName, apiKey, }: {
+    joinLocalRoom(options: JoinLocalEventRoomOptions): Promise<void>;
+    createLocalRoom(options: CreateLocalRoomOptions): Promise<void>;
+    roomCreator(options: {
         payload: any;
         apiUserName: string;
         apiKey: string;
-    }): Promise<{
-        data: CreateJoinRoomResponse | CreateJoinRoomError | null;
-        success: boolean;
-    }>;
-    joinRoomOnMediaSFU({ payload, apiUserName, apiKey, }: {
-        payload: any;
-        apiUserName: string;
-        apiKey: string;
-    }): Promise<{
-        data: CreateJoinRoomResponse | CreateJoinRoomError | null;
-        success: boolean;
-    }>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PreJoinPage, [null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PreJoinPage, "app-pre-join-page", never, { "parameters": { "alias": "parameters"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; }, {}, never, never, true, never>;
+        validate?: boolean;
+    }): Promise<any>;
+    handleCreateRoom(): Promise<void>;
+    handleJoinRoom(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PreJoinPage, [null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PreJoinPage, "app-pre-join-page", never, { "parameters": { "alias": "parameters"; "required": false; }; "credentials": { "alias": "credentials"; "required": false; }; "localLink": { "alias": "localLink"; "required": false; }; "connectMediaSFU": { "alias": "connectMediaSFU"; "required": false; }; }, {}, never, never, true, never>;
 }