mediasfu-angular 1.0.1 → 2.0.0

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

@@ -18,6 +18,7 @@ export type { CloseAndResizeOptions, CloseAndResizeType, CloseAndResizeParameter
 export type { CompareActiveNamesOptions, CompareActiveNamesType, CompareActiveNamesParameters, } from '../consumers/compare-active-names.service';
 export type { CompareScreenStatesOptions, CompareScreenStatesType, CompareScreenStatesParameters, } from '../consumers/compare-screen-states.service';
 export type { ConnectIpsOptions, ConnectIpsType, ConnectIpsParameters, } from '../consumers/connect-ips.service';
+export type { ConnectLocalIpsOptions, ConnectLocalIpsType, ConnectLocalIpsParameters } from '../consumers/connect-local-ips.service';
 export type { ConnectRecvTransportOptions, ConnectRecvTransportType, ConnectRecvTransportParameters, } from '../consumers/connect-recv-transport.service';
 export type { ConnectSendTransportOptions, ConnectSendTransportType, ConnectSendTransportParameters, } from '../consumers/connect-send-transport.service';
 export type { ConnectSendTransportAudioOptions, ConnectSendTransportAudioType, ConnectSendTransportAudioParameters, } from '../consumers/connect-send-transport-audio.service';
@@ -131,6 +132,7 @@ export type { JoinRoomClientOptions, JoinRoomClientType, } from '../producer-cli
 export type { UpdateRoomParametersClientOptions, UpdateRoomParametersClientType, UpdateRoomParametersClientParameters, } from '../producer-client/producer-client-emits/update-room-parameters-client.service';
 export type { JoinConRoomOptions, JoinConRoomType, } from '../producers/producer-emits/join-con-room.service';
 export type { JoinRoomOptions, JoinRoomType } from '../producers/producer-emits/join-room.service';
+export type { JoinLocalRoomOptions, JoinLocalRoomType } from '../producers/producer-emits/join-local-room.service';
 export type { AllMembersOptions, AllMembersType, AllMembersParameters, } from '../producers/socket-receive-methods/all-members.service';
 export type { AllMembersRestOptions, AllMembersRestType, AllMembersRestParameters, } from '../producers/socket-receive-methods/all-members-rest.service';
 export type { AllWaitingRoomMembersOptions, AllWaitingRoomMembersType, } from '../producers/socket-receive-methods/all-waiting-room-members.service';
@@ -160,7 +162,7 @@ export type { UpdateConsumingDomainsOptions, UpdateConsumingDomainsType, UpdateC
 export type { UpdateMediaSettingsOptions, UpdateMediaSettingsType, } from '../producers/socket-receive-methods/update-media-settings.service';
 export type { UpdatedCoHostOptions, UpdatedCoHostType, } from '../producers/socket-receive-methods/updated-co-host.service';
 export type { UserWaitingOptions, UserWaitingType, } from '../producers/socket-receive-methods/user-waiting.service';
-export type { ConnectSocketOptions, ConnectSocketType, DisconnectSocketType, DisconnectSocketOptions, } from '../sockets/socket-manager.service';
+export type { ConnectSocketOptions, ConnectSocketType, DisconnectSocketType, DisconnectSocketOptions, ConnectLocalSocketOptions, ConnectLocalSocketType, ResponseLocalConnection, ResponseLocalConnectionData } from '../sockets/socket-manager.service';
 export type { BackgroundModalOptions, BackgroundModalType, BackgroundModalParameters, } from '../components/background-components/background-modal/background-modal.component';
 export type { BreakoutRoomsModalOptions, BreakoutRoomsModalType, BreakoutRoomsModalParameters, } from '../components/breakout-components/breakout-rooms-modal.component';
 export type { CoHostModalOptions, CoHostModalType, } from '../components/co-host-components/co-host-modal/co-host-modal.component';
@@ -206,6 +208,7 @@ export type { WaitingRoomModalOptions, WaitingRoomModalType, WaitingRoomModalPar
 export type { ConfigureWhiteboardModalOptions, ConfigureWhiteboardModalType, } from '../components/whiteboard-components/configure-whiteboard-modal/configure-whiteboard-modal.component';
 export type { WhiteboardOptions, WhiteboardType, WhiteboardParameters, Shape, } from '../components/whiteboard-components/whiteboard/whiteboard.component';
 export type { CustomButton } from '../components/menu-components/custom-buttons/custom-buttons.component';
+export type { CreateJoinRoomType, CreateRoomOnMediaSFUType, CreateJoinRoomResponse, CreateJoinRoomError } from '../methods/utils/join-room-on-media-sfu.service';
 export interface Participant {
     id?: string;
     audioID: string;
@@ -214,6 +217,7 @@ export interface Participant {
     ScreenOn?: boolean;
     islevel?: string;
     isAdmin?: boolean;
+    isHost?: boolean;
     name: string;
     muted?: boolean;
     isBanned?: boolean;
@@ -472,6 +476,20 @@ export interface CreateRoomOptions {
     dataBuffer: boolean;
     bufferType: 'images' | 'audio' | 'all';
 }
+export interface ResponseJoinLocalRoom {
+    rtpCapabilities?: RtpCapabilities | null;
+    isHost: boolean;
+    eventStarted: boolean;
+    isBanned: boolean;
+    hostNotJoined: boolean;
+    eventRoomParams: MeetingRoomParams;
+    recordingParams: RecordingParams;
+    secureCode: string;
+    mediasfuURL: string;
+    apiKey: string;
+    apiUserName: string;
+    allowRecord: boolean;
+}
 export interface ResponseJoinRoom {
     rtpCapabilities?: RtpCapabilities | null;
     success: boolean;
@@ -486,6 +504,9 @@ export interface ResponseJoinRoom {
     safeRoomStarted: boolean;
     safeRoomEnded: boolean;
     reason?: string;
+    banned?: boolean;
+    suspended?: boolean;
+    noAdmin?: boolean;
 }
 export interface AllMembersData {
     members: Participant[];

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

@@ -63,6 +63,42 @@ export interface BackgroundModalOptions {
     onClose: () => void;
 }
 export type BackgroundModalType = (options: BackgroundModalOptions) => HTMLElement;
+/**
+ * BackgroundModal - Component to manage background selection and manipulation in media streams.
+ *
+ * This component allows users to choose, apply, and manipulate virtual backgrounds for media streams, leveraging MediaPipe’s Selfie Segmentation and MediaSoup functionalities.
+ *
+ * @component
+ * @name BackgroundModal
+ * @example
+ * ```typescript
+ * <app-background-modal
+ *   [isVisible]="isModalVisible"
+ *   [parameters]="modalParameters"
+ *   position="topLeft"
+ *   backgroundColor="#f5f5f5"
+ *   (onClose)="handleModalClose()"
+ * ></app-background-modal>
+ * ```
+ *
+ * @param {boolean} isVisible - Visibility state of the modal.
+ * @param {BackgroundModalParameters} parameters - Parameters including settings and methods for media and background management.
+ * @param {string} position - The position of the modal, e.g., 'topLeft'.
+ * @param {string} backgroundColor - Background color of the modal.
+ * @param {Function} onClose - Callback function when the modal is closed.
+ *
+ * @property {faTimes} faTimes - Icon used for closing the modal.
+ * @property {string} customImage - Custom image URL for background.
+ * @property {string} selectedImage - Selected image URL for background.
+ * @property {MediaStream | null} segmentVideo - Media stream for video segmentation.
+ * @property {SelfieSegmentation | null} selfieSegmentation - SelfieSegmentation instance.
+ * @property {boolean} pauseSegmentation - Pause state for segmentation.
+ * @property {MediaStream | null} processedStream - Processed media stream with applied background.
+ * @property {boolean} keepBackground - State to keep or reset background.
+ *
+ * @method
+ * ngOnInit - Initializes the modal component by updating properties based on parameters.
+ */
 export declare class BackgroundModal implements OnChanges, OnInit {
     isVisible: boolean;
     parameters: BackgroundModalParameters;

package/dist/lib/components/breakout-components/breakout-rooms-modal.component.d.ts

@@ -6,6 +6,7 @@ export interface BreakoutRoomsModalParameters {
     participants: Participant[];
     showAlert?: ShowAlert;
     socket: Socket;
+    localSocket?: Socket;
     itemPageLimit: number;
     meetingDisplayType: string;
     prevMeetingDisplayType: string;
@@ -35,6 +36,56 @@ export interface BreakoutRoomsModalOptions {
     backgroundColor?: string;
     onBreakoutRoomsClose: () => void;
 }
+/**
+ * BreakoutRoomsModal component manages the creation, modification, and assignment of breakout rooms.
+ *
+ * @selector app-breakout-rooms-modal
+ * @inputs
+ * - `isVisible` (boolean): Controls the visibility of the breakout rooms modal. Default is false.
+ * - `parameters` (BreakoutRoomsModalParameters): Parameters for managing breakout room settings and behavior.
+ * - `position` (string): Position of the modal on the screen. Default is 'topRight'.
+ * - `backgroundColor` (string): Background color of the modal. Default is '#83c0e9'.
+ * - `onBreakoutRoomsClose` (function): Callback function triggered when the modal is closed.
+ *
+ * @methods
+ * - `ngOnInit()`: Lifecycle hook to initialize modal width and breakout rooms.
+ * - `ngOnChanges(changes: SimpleChanges)`: Lifecycle hook called when any data-bound input properties change.
+ * - `calculateModalWidth()`: Dynamically calculates and sets modal width based on screen width.
+ * - `modalContainerStyle()`: Returns style object for modal container.
+ * - `modalContentStyle()`: Returns style object for modal content.
+ * - `initializeBreakoutRooms()`: Initializes the breakout rooms based on the current participants and parameters.
+ * - `handleRandomAssign()`: Randomly assigns participants to breakout rooms.
+ * - `handleManualAssign()`: Initializes manual room assignment by setting empty breakout rooms.
+ * - `handleAddRoom()`: Adds a new breakout room.
+ * - `handleSaveRooms()`: Validates and saves breakout room configurations.
+ * - `validateRooms()`: Validates room configurations and participants' uniqueness and quantity.
+ * - `checkCanStartBreakout()`: Checks conditions to enable the start of breakout rooms.
+ * - `handleStartBreakout()`: Starts the breakout session if conditions are met.
+ * - `handleStopBreakout()`: Stops the breakout session and reverts to the initial meeting display type.
+ * - `handleEditRoom(roomIndex: number)`: Opens the modal to edit the specified breakout room.
+ * - `handleDeleteRoom(roomIndex: number)`: Deletes a breakout room and updates participants' room assignments.
+ * - `handleAddParticipant(event)`: Adds a participant to a specified breakout room.
+ * - `handleRemoveParticipant(event)`: Removes a participant from a specified breakout room.
+ *
+ * @dependencies
+ * - `CommonModule`: Angular's common directives.
+ * - `FormsModule`: Angular's forms module for form handling.
+ * - `FontAwesomeModule`: Font Awesome icons for UI elements.
+ * - `RoomListComponent`: Component for listing rooms.
+ * - `EditRoomModalComponent`: Component for editing room participants.
+ *
+ * @example
+ * ```html
+ * <app-breakout-rooms-modal
+ *  [isVisible]="isBreakoutRoomsModalVisible"
+ * [parameters]="breakoutRoomsParams"
+ * [position]="modalPosition"
+ * [backgroundColor]="modalBgColor"
+ * [onBreakoutRoomsClose]="onCloseBreakoutRooms">
+ * </app-breakout-rooms-modal>
+ * ```
+ *
+ **/
 export declare class BreakoutRoomsModal implements OnChanges, OnInit {
     isVisible: boolean;
     parameters: BreakoutRoomsModalParameters;

package/dist/lib/components/breakout-components/edit-room-modal/edit-room-modal.component.d.ts

@@ -1,6 +1,54 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { BreakoutParticipant, Participant } from '../../../@types/types';
 import * as i0 from "@angular/core";
+/**
+ * EditRoomModalComponent allows managing participants within a breakout room for an event.
+ *
+ * @selector app-edit-room-modal
+ * @inputs
+ * - `editRoomModalVisible` (boolean): Controls the visibility of the edit room modal. Default is false.
+ * - `currentRoom` (BreakoutParticipant[]): List of participants currently assigned to the room.
+ * - `participantsRef` (Participant[]): Reference list of all participants.
+ * - `currentRoomIndex` (number): Index of the room being edited.
+ * - `position` (string): Position of the modal on the screen. Default is 'center'.
+ * - `backgroundColor` (string): Background color of the modal. Default is '#fff'.
+ *
+ * @outputs
+ * - `setEditRoomModalVisible` (EventEmitter<boolean>): Emits a boolean to toggle the visibility of the modal.
+ * - `addParticipant` (EventEmitter<{ roomIndex: number; participant: Participant | BreakoutParticipant; }>): Emits data for adding a participant to the room.
+ * - `removeParticipant` (EventEmitter<{ roomIndex: number; participant: Participant | BreakoutParticipant; }>): Emits data for removing a participant from the room.
+ *
+ * @methods
+ * - `ngOnInit()`: Lifecycle hook to initialize modal width and attach resize event listener.
+ * - `ngOnDestroy()`: Lifecycle hook to remove the resize event listener.
+ * - `calculateModalWidth()`: Dynamically calculates and sets modal width based on screen width.
+ * - `modalContainerStyle()`: Returns style object for modal container.
+ * - `modalContentStyle()`: Returns style object for modal content.
+ * - `handleAddParticipant(roomIndex: number, participant: BreakoutParticipant)`: Emits event to add participant to specified room.
+ * - `handleRemoveParticipant(roomIndex: number, participant: BreakoutParticipant)`: Emits event to remove participant from specified room.
+ * - `closeModal()`: Closes the modal by emitting a visibility change.
+ * - `unassignedParticipants()`: Filters and returns a list of unassigned participants.
+ *
+ * @dependencies
+ * - `CommonModule`: Provides Angular's common directives.
+ * - `FontAwesomeModule`: Allows usage of Font Awesome icons.
+ *
+ * @example
+ * ```html
+ * <app-edit-room-modal
+ *  [editRoomModalVisible]="editRoomModalVisible"
+ * [currentRoom]="currentRoom"
+ * [participantsRef]="participantsRef"
+ * [currentRoomIndex]="currentRoomIndex"
+ * [position]="position"
+ * [backgroundColor]="backgroundColor"
+ * (setEditRoomModalVisible)="setEditRoomModalVisible($event)"
+ * (addParticipant)="addParticipant($event)"
+ * (removeParticipant)="removeParticipant($event)">
+ * </app-edit-room-modal>
+ * ```
+ *
+ **/
 export declare class EditRoomModalComponent implements OnInit {
     editRoomModalVisible: boolean;
     currentRoom: BreakoutParticipant[];

package/dist/lib/components/co-host-components/co-host-modal/co-host-modal.component.d.ts

@@ -20,6 +20,68 @@ export interface CoHostModalOptions {
     onModifyEventSettings?: (settings: ModifyCoHostSettingsOptions) => void;
 }
 export type CoHostModalType = (options: CoHostModalOptions) => HTMLElement;
+/**
+ * CoHostModal component allows managing co-host settings for an event.
+ *
+ * @selector app-co-host-modal
+ * @inputs
+ * - `isCoHostModalVisible` (boolean): A boolean value that determines whether the modal is visible. Default is false.
+ * - `currentCohost` (string): The current co-host for the event. Default is 'No coHost'.
+ * - `participants` (Participant[]): An array of participants in the event.
+ * - `coHostResponsibility` (CoHostResponsibility[]): An array of co-host responsibilities.
+ * - `position` (string): The position of the modal. Default is 'topRight'.
+ * - `backgroundColor` (string): The background color of the modal. Default is '#83c0e9'.
+ * - `roomName` (string): The name of the room.
+ * - `showAlert` (ShowAlert): A function to show alerts.
+ *
+ * @outputs
+ * - `updateCoHostResponsibility` (coHostResponsibility: CoHostResponsibility[]): A function to update co-host responsibilities.
+ * - `updateCoHost` (coHost: string): A function to update the co-host.
+ * - `updateIsCoHostModalVisible` (isCoHostModalVisible: boolean): A function to update the visibility of the modal.
+ * - `socket` (Socket): The socket object.
+ *
+ * @methods
+ * - `ngOnInit()`: Lifecycle hook that is called after the component is initialized. It sets the default value for `onModifyCoHost` if not provided.
+ * - `ngOnChanges(changes: SimpleChanges)`: Lifecycle hook that is called when any data-bound property of the component changes. It initializes the responsibilities and calculates the modal width.
+ * - `initializeResponsibilities()`: Initializes the responsibilities.
+ * - `get filteredParticipants()`: Returns the filtered participants.
+ * - `handleToggleSwitch(key: string)`: Handles the toggle switch for the given key.
+ * - `handleSave()`: Handles the save action.
+ * - `handleClose()`: Handles the close action.
+ * - `calculateModalWidth()`: Calculates the modal width.
+ * - `modalContainerStyle()`: Returns the modal container style.
+ * - `modalContentStyle()`: Returns the modal content style.
+ *
+ * @dependencies
+ * - `CommonModule`: Angular's common module is imported for common directives.
+ * - `FontAwesomeModule`: Angular's font awesome module is imported for icons.
+ * - `FormsModule`: Angular's forms module is imported for form-related directives.
+ * - `ModifyCoHostSettings`: The ModifyCoHostSettings service is used to modify co-host settings.
+ *
+ * @styles
+ * - `.container`: The container style.
+ *
+ * @example
+ * ```html
+ * <app-co-host-modal
+ *  [isCoHostModalVisible]="isCoHostModalVisible"
+ * [currentCohost]="currentCohost"
+ * [participants]="participants"
+ * [coHostResponsibility]="coHostResponsibility"
+ * [position]="position"
+ * [backgroundColor]="backgroundColor"
+ * [roomName]="roomName"
+ * [showAlert]="showAlert"
+ * [updateCoHostResponsibility]="updateCoHostResponsibility"
+ * [updateCoHost]="updateCoHost"
+ * [updateIsCoHostModalVisible]="updateIsCoHostModalVisible"
+ * [socket]="socket"
+ * [onCoHostClose]="onCoHostClose"
+ * [onModifyCoHost]="onModifyCoHost">
+ * </app-co-host-modal>
+ * ```
+ *
+ **/
 export declare class CoHostModal implements OnChanges, OnInit {
     private modifyCoHostSettingsService;
     isCoHostModalVisible: boolean;

package/dist/lib/components/display-components/alert-component/alert.component.component.d.ts

@@ -10,31 +10,37 @@ export interface AlertComponentOptions {
 }
 export type AlertComponentType = (options: AlertComponentOptions) => HTMLElement;
 /**
- * AlertComponent is a standalone Angular component that displays an alert message.
- * It supports different types of alerts such as 'success' and 'danger', and can be configured
- * to automatically hide after a specified duration.
+ * AlertComponent displays an alert message of type 'success' or 'danger' with customizable options.
+ * It can automatically hide after a set duration and includes a manual dismiss option.
  *
  * @selector app-alert-component
  * @standalone true
  * @imports CommonModule
- * @templateUrl ./alert.component.html
- * @styleUrls ./alert.component.css
  *
- * @class AlertComponent
- * @implements OnChanges
+ * @inputs
+ * - `visible` (boolean): Determines if the alert is visible. Default is false.
+ * - `message` (string): The message displayed in the alert.
+ * - `type` ('success' | 'danger'): Type of alert, either 'success' or 'danger'. Default is 'success'.
+ * - `duration` (number): Duration in milliseconds for the alert to remain visible before hiding. Default is 4000 ms.
+ * - `textColor` (string): Optional color for alert text. Default is 'black'.
+ * - `onHide` (function): Optional callback invoked when the alert is hidden.
  *
- * @property {boolean} visible - Determines if the alert is visible.
- * @property {string} message - The message to be displayed in the alert.
- * @property {'success' | 'danger'} type - The type of alert, either 'success' or 'danger'.
- * @property {number} duration - The duration (in milliseconds) for which the alert is visible before hiding.
- * @property {string} textColor - The color of the text in the alert.
- * @property {() => void} onHide - A callback function that is called when the alert is hidden.
+ * @methods
+ * - `ngOnChanges(changes: SimpleChanges)`: Lifecycle hook invoked on input changes; initiates auto-hide based on duration if `visible` is true.
+ * - `handlePress()`: Manually hides the alert by invoking the `onHide` callback.
  *
- * @method ngOnChanges - Lifecycle hook that is called when any data-bound property of a directive changes.
- * @param {SimpleChanges} changes - An object of changes to the data-bound properties.
- *
- * @method handlePress - Manually hides the alert by calling the onHide callback.
- */
+ * @example
+ * ```html
+ * <app-alert-component
+ *  [visible]="showAlert"
+ * [message]="alertMessage"
+ * [type]="alertType"
+ * [duration]="5000"
+ * [textColor]="alertTextColor"
+ * [onHide]="onAlertHide">
+ * </app-alert-component>
+ * ```
+ **/
 export declare class AlertComponent implements OnChanges {
     visible: boolean;
     message: string;

package/dist/lib/components/display-components/audio-card/audio-card.component.d.ts

@@ -37,6 +37,65 @@ export interface AudioCardOptions {
     parameters: AudioCardParameters;
 }
 export type AudioCardType = (options: AudioCardOptions) => HTMLElement;
+/**
+ * AudioCard component renders an audio card for participants with customizable options and media controls.
+ * It shows audio waveform animations, video/audio toggle buttons, and additional info based on injected or passed properties.
+ *
+ * @selector app-audio-card
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule, MiniCard
+ *
+ * @inputs
+ * - `controlUserMedia` (function): Optional function to control media actions for a participant.
+ * - `customStyle` (Partial<CSSStyleDeclaration>): Custom CSS styles for the audio card.
+ * - `name` (string): Name of the participant.
+ * - `barColor` (string): Color for the audio bar. Default is 'red'.
+ * - `textColor` (string): Text color. Default is 'white'.
+ * - `imageSource` (string): Image source URL for participant.
+ * - `roundedImage` (boolean): Toggle for rounded image style.
+ * - `imageStyle` (Partial<CSSStyleDeclaration>): Custom styles for the image.
+ * - `showControls` (boolean): Toggle for displaying media controls. Default is true.
+ * - `showInfo` (boolean): Toggle for displaying info section. Default is true.
+ * - `videoInfoComponent` (HTMLElement | CustomComponent): Custom component for participant info.
+ * - `videoControlsComponent` (HTMLElement | CustomComponent): Custom component for video controls.
+ * - `controlsPosition` (ControlsPosition): Position for controls on the card. Default is 'topLeft'.
+ * - `infoPosition` (InfoPosition): Position for the info section. Default is 'topRight'.
+ * - `participant` (Participant | null): Participant object reference.
+ * - `backgroundColor` (string): Background color for the card.
+ * - `audioDecibels` (AudioDecibels): Optional audio decibel levels for the participant.
+ * - `parameters` (AudioCardParameters): Required object with configuration parameters.
+ *
+ * @methods
+ * - `ngOnInit()`: Initializes the component, sets default media control behavior, and activates audio waveform animations.
+ * - `ngOnDestroy()`: Clears the animation interval.
+ * - `animateBar(index: number)`: Animates the audio bar at a specified index.
+ * - `animateWaveform()`: Triggers animations across the waveform bars.
+ * - `resetWaveform()`: Resets waveform animations to default.
+ * - `getAnimationDuration(index: number)`: Retrieves the animation duration for a bar by index.
+ * - `toggleAudio()`: Toggles audio for the participant if media control function is defined.
+ * - `toggleVideo()`: Toggles video for the participant if media control function is defined.
+ * - `renderControls()`: Returns `showControls` to render or hide media controls.
+ * - `combineStyles(baseStyle: any, additionalStyles: any)`: Combines base and additional styles for inline styling.
+ * - `getOverlayPosition(position: string)`: Retrieves calculated overlay position for elements.
+ * - `isCustomComponent(comp: HTMLElement | CustomComponent)`: Type guard for identifying custom components.
+ * - `isFunctionComponent(comp: HTMLElement | CustomComponent)`: Type guard for identifying function components.
+ *
+ * @example
+ * ```html
+ * <app-audio-card
+ *  [controlUserMedia]="controlMediaFunction"
+ * [name]="participantName"
+ * [barColor]="'blue'"
+ * [textColor]="'black'"
+ * [imageSource]="participantImageURL"
+ * [roundedImage]="true"
+ * [showControls]="true"
+ * [participant]="participant"
+ * [parameters]="audioCardParameters">
+ * </app-audio-card>
+ * ```
+ *
+ **/
 export declare class AudioCard implements OnInit, OnDestroy {
     private ngZone;
     private controlMediaService;

package/dist/lib/components/display-components/audio-grid/audio-grid.component.d.ts

@@ -7,6 +7,26 @@ export interface AudioGridOptions {
     }[];
 }
 export type AudioGridType = (options: AudioGridOptions) => HTMLElement;
+/**
+ * AudioGrid component renders a dynamic grid of components with individually provided inputs.
+ *
+ * @selector app-audio-grid
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @inputs
+ * - `componentsToRender` ({ component: any; inputs?: any }[]): Array of components with optional inputs to render in the grid.
+ *
+ * @methods
+ * - `ngOnChanges(changes: SimpleChanges)`: Clears the injector cache on changes to `componentsToRender`.
+ * - `createInjector(inputs: any)`: Creates and caches an injector with specific inputs for each component.
+ * - `clearInjectorCache()`: Clears the cache to avoid memory leaks and ensure updated injectors.
+ *
+ * @example
+ * ```html
+ * <app-audio-grid [componentsToRender]="[{ component: AudioCard, inputs: { name: 'Participant 1' } }]"></app-audio-grid>
+ * ```
+ **/
 export declare class AudioGrid implements OnChanges {
     private injector;
     componentsToRender: {

package/dist/lib/components/display-components/card-video-display/card-video-display.component.d.ts

@@ -10,6 +10,41 @@ export interface CardVideoDisplayOptions {
     doMirror?: boolean;
 }
 export type CardVideoDisplayType = (options: CardVideoDisplayOptions) => HTMLElement;
+/**
+ * CardVideoDisplay component displays a video stream with options for full display, mirroring, and background color customization.
+ *
+ * @selector app-card-video-display
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @inputs
+ * - `remoteProducerId` (string): Identifier for the remote producer.
+ * - `eventType` (EventType): Type of event, such as 'webinar'. Default is 'webinar'.
+ * - `forceFullDisplay` (boolean): Forces full video display if true. Default is false.
+ * - `videoStream` (MediaStream | null): The media stream to display in the video element.
+ * - `backgroundColor` (string): Background color for the video container. Default is 'transparent'.
+ * - `doMirror` (boolean): Mirrors the video if true. Default is false.
+ *
+ * @methods
+ * - `ngOnInit()`: Initializes the video stream and sets the container style on component load.
+ * - `ngOnChanges(changes: SimpleChanges)`: Updates the video stream or container style when inputs change.
+ * - `updateVideoStream()`: Assigns the video stream to the video element if it differs from the current stream.
+ * - `setVideoContainerStyle()`: Sets the style of the video container based on the provided background color.
+ * - `getBaseVideoContainerStyle()`: Returns base styles for the video container.
+ * - `getVideoStyle()`: Returns styles for the video element, including optional mirroring and sizing.
+ *
+ * @example
+ * ```html
+ * <app-card-video-display
+ *  [remoteProducerId]="producerId"
+ * [eventType]="'conference'"
+ * [forceFullDisplay]="true"
+ * [videoStream]="stream"
+ * [backgroundColor]="'black'"
+ * [doMirror]="true">
+ * </app-card-video-display>
+ * ```
+ **/
 export declare class CardVideoDisplay implements OnInit, OnChanges {
     remoteProducerId: string;
     eventType: EventType;

package/dist/lib/components/display-components/control-buttons-alt-component/control-buttons-alt-component.component.d.ts

@@ -33,6 +33,44 @@ export interface ControlButtonsAltComponentOptions {
     showAspect?: boolean;
 }
 export type ControlButtonsAltComponentType = (options: ControlButtonsAltComponentOptions) => HTMLElement;
+/**
+ * ControlButtonsAltComponent provides configurable button controls with custom icons, colors, and positioning options.
+ *
+ * @selector app-control-buttons-alt-component
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule
+ *
+ * @inputs
+ * - `buttons` (AltButton[]): Array of button configurations with options for icon, color, state, and actions.
+ * - `position` ('left' | 'right' | 'middle'): Horizontal alignment of buttons. Default is 'left'.
+ * - `location` ('top' | 'bottom' | 'center'): Vertical alignment of buttons. Default is 'top'.
+ * - `direction` ('horizontal' | 'vertical'): Layout direction for buttons. Default is 'horizontal'.
+ * - `buttonsContainerStyle` (Partial<CSSStyleDeclaration>): Custom styles for the container of buttons.
+ * - `showAspect` (boolean): Controls the visibility of the button container. Default is false.
+ *
+ * @methods
+ * - `getAlignmentStyle()`: Returns alignment styles based on `position`, `location`, and `direction`.
+ * - `getContainerStyle()`: Combines container styles, alignment styles, and visibility settings.
+ * - `getButtonStyle(button: AltButton)`: Applies style to each button based on its properties.
+ * - `getTextStyle(button: AltButton)`: Sets text styles for button labels.
+ * - `isCustomComponent(comp)`: Type guard to identify custom component objects.
+ * - `isFunctionComponent(comp)`: Type guard to identify function components.
+ *
+ * @example
+ * ```html
+ * <app-control-buttons-alt-component
+ *  [buttons]="[
+ *    { name: 'Pause', icon: faPause, onPress: pauseAction, activeColor: 'blue' },
+ *    { name: 'Play', icon: faPlay, onPress: playAction, color: 'green' }
+ *  ]"
+ * [position]="'middle'"
+ * [location]="'bottom'"
+ * [direction]="'vertical'"
+ * [buttonsContainerStyle]="{ backgroundColor: '#333' }"
+ * [showAspect]="true">
+ * </app-control-buttons-alt-component>
+ * ```
+ **/
 export declare class ControlButtonsAltComponent {
     buttons: AltButton[];
     position: 'left' | 'right' | 'middle';

package/dist/lib/components/display-components/control-buttons-component-touch/control-buttons-component-touch.component.d.ts

@@ -33,57 +33,41 @@ export interface ControlButtonsComponentTouchOptions {
 }
 export type ControlButtonsComponentTouchType = (options: ControlButtonsComponentTouchOptions) => HTMLElement;
 /**
- * ControlButtonsComponentTouch is an Angular component that displays a set of control buttons.
- * The buttons can be customized with various styles, icons, and actions.
+ * ControlButtonsComponentTouch provides customizable touch controls with various icons, colors, and alignment options.
  *
- * @component
  * @selector app-control-buttons-component-touch
  * @standalone true
- * @imports [CommonModule, FontAwesomeModule]
+ * @imports CommonModule, FontAwesomeModule
  *
- * @template
- * The template includes a container div that holds the buttons. Each button can display an icon,
- * a custom component, or a name. The styles and visibility of the buttons are controlled by the
- * component's inputs.
+ * @inputs
+ * - `buttons` (ButtonTouch[]): Array of button configurations with properties for icon, color, action, and visibility.
+ * - `position` ('left' | 'right' | 'middle'): Horizontal alignment of the buttons container. Default is 'left'.
+ * - `location` ('top' | 'bottom' | 'center'): Vertical alignment of the buttons container. Default is 'top'.
+ * - `direction` ('horizontal' | 'vertical'): Layout direction of buttons. Default is 'horizontal'.
+ * - `buttonsContainerStyle` (Partial<CSSStyleDeclaration>): Custom styles for the buttons container.
+ * - `showAspect` (boolean): Controls the visibility of the buttons container. Default is false.
  *
- * @styles
- * The host element is styled to be a flex container centered both horizontally and vertically.
- *
- * @class ControlButtonsComponentTouch
- *
- * @property {any[]} buttons - An array of button configurations. Each button can have properties like
- * `show`, `backgroundColor`, `onPress`, `icon`, `alternateIcon`, `active`, `activeColor`, `inActiveColor`,
- * `customComponent`, and `name`.
- *
- * @property {string} position - The horizontal alignment of the buttons container. Can be 'left', 'right', or 'middle'.
- * Default is 'left'.
- *
- * @property {string} location - The vertical alignment of the buttons container. Can be 'top', 'bottom', or 'center'.
- * Default is 'top'.
- *
- * @property {string} direction - The direction of the buttons layout. Can be 'horizontal' or 'vertical'.
- * Default is 'horizontal'.
- *
- * @property {any} buttonsContainerStyle - Additional styles for the buttons container.
- *
- * @property {boolean} showAspect - A flag to control the visibility of the buttons container.
- *
- * @method getAlignmentStyle
- * Returns the alignment styles based on the `position`, `location`, and `direction` inputs.
- *
- * @method mergeStyles
- * Merges multiple style objects into one.
+ * @methods
+ * - `getAlignmentStyle()`: Returns alignment styles based on `position`, `location`, and `direction` inputs.
+ * - `mergeStyles(...styles: any[])`: Merges multiple style objects into one for flexible styling.
+ * - `isCustomComponent(comp)`: Type guard for identifying custom component objects.
+ * - `isFunctionComponent(comp)`: Type guard for identifying function components.
  *
  * @example
+ * ```html
  * <app-control-buttons-component-touch
- *   [buttons]="buttonsArray"
+ *   [buttons]="[
+ *     { name: 'Mute', icon: faMicrophoneSlash, onPress: muteAction, activeColor: 'red' },
+ *     { name: 'Unmute', icon: faMicrophone, onPress: unmuteAction, activeColor: 'green' }
+ *   ]"
  *   position="right"
  *   location="bottom"
  *   direction="vertical"
- *   [buttonsContainerStyle]="customStyles"
- *   [showAspect]="true">
- * </app-control-buttons-component-touch>
- */
+ *   [buttonsContainerStyle]="{ backgroundColor: '#333' }"
+ *   [showAspect]="true"
+ * ></app-control-buttons-component-touch>
+ * ```
+ **/
 export declare class ControlButtonsComponentTouch {
     buttons: ButtonTouch[];
     position: string;

package/dist/lib/components/display-components/control-widgets/menu-participants-widget.component.d.ts

@@ -1,5 +1,26 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import * as i0 from "@angular/core";
+/**
+ * MenuParticipantsWidget displays an icon and a counter for participants in a compact, customizable widget.
+ *
+ * @selector app-menu-participants-widget
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule
+ *
+ * @inputs
+ * - `icon` (IconDefinition): The FontAwesome icon to display.
+ * - `iconColor` (string): The color of the icon. Default is 'black'.
+ * - `participantsCounter` (number): The number of participants displayed next to the icon.
+ *
+ * @example
+ * ```html
+ * <app-menu-participants-widget
+ *   [icon]="faUsers"
+ *   iconColor="blue"
+ *   [participantsCounter]="10"
+ * ></app-menu-participants-widget>
+ * ```
+ **/
 export declare class MenuParticipantsWidget {
     icon: IconDefinition;
     iconColor: string;