mediasfu-angular 1.0.0 → 1.0.2

package/dist/lib/components/participants-components/participant-list-others-item/participant-list-others-item.component.d.ts

@@ -6,6 +6,23 @@ export interface ParticipantListOthersItemOptions {
     coHost: string;
 }
 export type ParticipantListOthersItemType = (options: ParticipantListOthersItemOptions) => HTMLElement;
+/**
+ * Component for displaying an individual participant item in the "others" participant list.
+ * Provides a display name with conditional labels for roles such as host, co-host, or self.
+ *
+ * @component
+ * @selector app-participant-list-others-item
+ * @standalone true
+ * @templateUrl ./participant-list-others-item.component.html
+ * @styleUrls ['./participant-list-others-item.component.css']
+ * @imports [CommonModule, FontAwesomeModule]
+ *
+ * @example
+ * ```html
+ * <app-participant-list-others-item [participant]="participant" [member]="currentMember" [coHost]="coHostID">
+ * </app-participant-list-others-item>
+ * ```
+ */
 export declare class ParticipantListOthersItem {
     participant: Participant;
     member: string;

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

@@ -40,6 +40,30 @@ export interface ParticipantsModalOptions {
     position?: string;
 }
 export type ParticipantsModalType = (options: ParticipantsModalOptions) => HTMLElement;
+/**
+ * Component for displaying a modal containing a list of participants with options to mute, message, or remove participants.
+ * Supports both regular participants and a subset of "other" participants.
+ *
+ * @component
+ * @selector app-participants-modal
+ * @standalone true
+ * @templateUrl ./participants-modal.component.html
+ * @styleUrls ['./participants-modal.component.css']
+ * @imports [CommonModule, FontAwesomeModule, ParticipantList, ParticipantListOthers]
+ *
+ * @example
+ * ```html
+ * <app-participants-modal
+ *   [isParticipantsModalVisible]="true"
+ *   [onParticipantsClose]="closeModalFunction"
+ *   [onParticipantsFilterChange]="filterFunction"
+ *   [participantsCounter]="5"
+ *   [parameters]="participantsModalParameters"
+ *   [position]="'topRight'"
+ *   [backgroundColor]="'#83c0e9'"
+ * ></app-participants-modal>
+ * ```
+ */
 export declare class ParticipantsModal implements OnInit, OnChanges {
     private muteParticipantsService;
     private messageParticipantsService;

package/dist/lib/components/polls-components/poll-modal/poll-modal.component.d.ts

@@ -20,6 +20,33 @@ export interface PollModalOptions {
     handleVotePoll: HandleVotePollType;
 }
 export type PollModalType = (options: PollModalOptions) => HTMLElement;
+/**
+ * Component for displaying a poll modal, allowing users to create, vote, and end polls within a session.
+ *
+ * @component
+ * @selector app-poll-modal
+ * @standalone true
+ * @templateUrl ./poll-modal.component.html
+ * @styleUrls ['./poll-modal.component.css']
+ * @imports [CommonModule, FontAwesomeModule, FormsModule]
+ *
+ * @example
+ * ```html
+ * <app-poll-modal
+ *   [isPollModalVisible]="true"
+ *   [onClose]="closeModalFunction"
+ *   [member]="currentMember"
+ *   [islevel]="'2'"
+ *   [polls]="pollList"
+ *   [poll]="selectedPoll"
+ *   [socket]="socketInstance"
+ *   [roomName]="'exampleRoom'"
+ *   [handleCreatePoll]="createPollFunction"
+ *   [handleEndPoll]="endPollFunction"
+ *   [handleVotePoll]="votePollFunction"
+ * ></app-poll-modal>
+ * ```
+ */
 export declare class PollModal implements OnInit, OnChanges {
     isPollModalVisible: boolean;
     onClose: () => void;

package/dist/lib/components/recording-components/advanced-panel-component/advanced-panel-components.component.d.ts

@@ -25,6 +25,21 @@ export interface AdvancedPanelParameters {
     eventType: EventType;
 }
 export type AdvancedPanelType = (options: AdvancedPanelParameters) => HTMLElement;
+/**
+ * Component for configuring advanced recording options in a MediaSFU session.
+ *
+ * @component
+ * @selector app-advanced-panel-component
+ * @standalone true
+ * @templateUrl ./advanced-panel-component.component.html
+ * @styleUrls ['./advanced-panel-component.component.css']
+ * @imports [CommonModule, FormsModule]
+ *
+ * @example
+ * ```html
+ * <app-advanced-panel-component [parameters]="advancedPanelOptions"></app-advanced-panel-component>
+ * ```
+ */
 export declare class AdvancedPanelComponent implements OnInit, OnChanges {
     parameters: AdvancedPanelParameters;
     selectedOrientationVideo: string;

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

@@ -74,6 +74,18 @@ export type RecordingModalType = (options: RecordingModalOptions) => HTMLElement
  * @method ngOnChanges - Lifecycle hook that is called when any data-bound property of a directive changes.
  * @method confirm - Calls the confirmRecording callback with the current parameters.
  * @method start - Calls the startRecording callback with the current parameters.
+ * @example
+ * ```html
+ * <app-recording-modal
+ *   [isRecordingModalVisible]="true"
+ *   [onClose]="closeRecordingModal"
+ *   [backgroundColor]="'#83c0e9'"
+ *   [position]="'bottomRight'"
+ *   [confirmRecording]="confirmRecording"
+ *   [startRecording]="startRecording"
+ *   [parameters]="recordingModalParams"
+ * ></app-recording-modal>
+ * ```
  */
 export declare class RecordingModal implements OnChanges {
     isRecordingModalVisible: boolean;

package/dist/lib/components/recording-components/standard-panel-component/standard-panel-component.component.d.ts

@@ -40,6 +40,11 @@ export type StandardPanelType = (options: StandardPanelParameters) => HTMLElemen
  *
  * @param {SimpleChanges} changes - The changes to the input properties.
  * @param {any} event - The event object from the change event.
+ *
+ * @example
+ * ```html
+ * <app-standard-panel-component [parameters]="standardPanelParameters"></app-standard-panel-component>
+ * ```
  */
 export declare class StandardPanelComponent implements OnInit, OnChanges {
     parameters: StandardPanelParameters;

package/dist/lib/components/requests-components/render-request-component/render-request-component.component.d.ts

@@ -11,6 +11,28 @@ export interface RenderRequestComponentOptions {
     socket: Socket;
 }
 export type RenderRequestComponentType = (options: RenderRequestComponentOptions) => HTMLElement;
+/**
+ * @component RenderRequestComponent
+ * @description Component to render and manage individual requests in a list. Each request can be responded to with specified actions (e.g., approve, deny).
+ *
+ * @selector app-render-request-component
+ * @standalone true
+ * @imports [CommonModule, FontAwesomeModule]
+ * @templateUrl ./render-request-component.component.html
+ * @styleUrls ./render-request-component.component.css
+ *
+ * @example
+ * ```html
+ * <app-render-request-component
+ *   [request]="request"
+ *   [requestList]="requestList"
+ *   [roomName]="roomName"
+ *   [socket]="socket"
+ *   [onRequestItemPress]="handleRequestPress"
+ *   [updateRequestList]="updateRequestList">
+ * </app-render-request-component>
+ * ```
+ */
 export declare class RenderRequestComponent {
     request: Request;
     requestList: Request[];

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

@@ -64,6 +64,23 @@ export type RequestsModalType = (options: RenderRequestComponentOptions) => HTML
  * @method handleModalClose - Handles the modal close action.
  * @method handleFilterChange - Handles the filter change event.
  * @param {Event} event - The filter change event.
+ * @example
+ * ```html
+ * <app-requests-modal
+ *   [isRequestsModalVisible]="isModalVisible"
+ *   [requestCounter]="requestCounter"
+ *   [requestList]="requests"
+ *   [roomName]="roomName"
+ *   [socket]="socket"
+ *   [backgroundColor]="'#83c0e9'"
+ *   [position]="'topRight'"
+ *   [parameters]="requestParams"
+ *   (onRequestClose)="handleModalClose()"
+ *   (onRequestFilterChange)="handleFilterChange($event)"
+ *   (onRequestItemPress)="handleRequestPress($event)"
+ *   [updateRequestList]="updateRequestList">
+ * </app-requests-modal>
+ * ```
  */
 export declare class RequestsModal implements OnInit, OnChanges {
     private respondToRequestsService;

package/dist/lib/components/screenboard-components/screenboard/screenboard.component.d.ts

@@ -118,6 +118,16 @@ export type ScreenboardType = (options: ScreenboardOptions) => void;
  * @method isPointNearLine - Checks if a point is near a line.
  * @method toggleToolbar - Toggles the visibility of the toolbar.
  * @method toggleAnnotate - Toggles the annotation mode.
+ *
+ * @example
+ * ```html
+ * <app-screenboard
+ *  [customWidth]="customWidth"
+ * [customHeight]="customHeight"
+ * [parameters]="screenboardParameters"
+ * [showAspect]="showAspect"
+ * ></app-screenboard>
+ * ```
  */
 export declare class Screenboard implements OnInit, AfterViewInit, OnDestroy, OnChanges {
     customWidth: number;

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

@@ -74,6 +74,17 @@ export type ScreenboardModalType = (options: ScreenboardModalOptions) => HTMLEle
  * @method handleScreenTransport - Method to handle screen transport logic.
  * @method stopAnnotation - Method to stop the screen annotation.
  * @method stopAllTracks - Method to stop all media tracks.
+ * @returns {HTMLElement} The screenboard modal component.
+ * @example
+ * ```html
+ * <app-screenboard-modal
+ *  [parameters]="screenboardModalParams"
+ * [isVisible]="isModalVisible"
+ * [onClose]="closeModal"
+ * [position]="'topRight'"
+ * [backgroundColor]="'#83c0e9'">
+ * </app-screenboard-modal>
+ * ```
  */
 export declare class ScreenboardModal implements OnInit, OnDestroy, OnChanges, AfterViewInit {
     parameters: ScreenboardModalParameters;

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

@@ -23,6 +23,65 @@ export interface WaitingRoomModalOptions {
     onWaitingRoomItemPress?: RespondToWaitingType;
 }
 export type WaitingRoomModalType = (options: WaitingRoomModalOptions) => HTMLElement;
+/**
+ * Component representing a modal for managing participants in a waiting room.
+ *
+ * @component
+ * @selector app-waiting-room-modal
+ * @standalone true
+ * @imports CommonModule, FontAwesomeModule, FormsModule
+ * @templateUrl ./waiting-room-modal.component.html
+ * @styleUrls ['./waiting-room-modal.component.css']
+ *
+ * @property {boolean} isWaitingModalVisible - Visibility state of the modal.
+ * @property {number} waitingRoomCounter - Counter for the number of participants in the waiting room.
+ * @property {WaitingRoomParticipant[]} waitingRoomList - List of participants in the waiting room.
+ * @property {string} roomName - Name of the room.
+ * @property {Socket} socket - Socket instance for communication.
+ * @property {string} position - Position of the modal on the screen.
+ * @property {string} backgroundColor - Background color of the modal.
+ * @property {WaitingRoomModalParameters} parameters - Parameters for the waiting room modal.
+ * @property {function} onWaitingRoomClose - Function to call when the modal is closed.
+ * @property {function} onWaitingRoomFilterChange - Function to call when the filter value changes.
+ * @property {function} updateWaitingList - Function to update the waiting list.
+ * @property {function} onWaitingRoomItemPress - Function to call when an item in the waiting room is pressed.
+ *
+ * @property {IconDefinition} faTimes - FontAwesome icon for the close button.
+ * @property {IconDefinition} faCheck - FontAwesome icon for the check button.
+ * @property {WaitingRoomParticipant[]} waitingRoomList_s - Filtered list of participants in the waiting room.
+ * @property {number} waitingRoomCounter_s - Counter for the filtered list of participants in the waiting room.
+ * @property {boolean} reRender - Flag to trigger re-rendering of the component.
+ *
+ * @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 of a directive changes.
+ * @method updateParameters - Updates the parameters for the waiting room modal.
+ * @method handleModalClose - Handles the closing of the modal.
+ * @method handleFilterChange - Handles the change in the filter input.
+ * @method handleItemPress - Handles the pressing of an item in the waiting room.
+ *
+ * @getter modalContainerStyle - Returns the style object for the modal container.
+ * @getter modalContentStyle - Returns the style object for the modal content.
+ * @getter inputStyle - Returns the style object for the input field.
+ *
+ * @example
+ * ```html
+ * <app-waiting-room-modal
+ *  [isWaitingModalVisible]="true"
+ * [waitingRoomCounter]="waitingRoomCounter"
+ * [waitingRoomList]="waitingRoomList"
+ * [roomName]="roomName"
+ * [socket]="socket"
+ * [position]="'topRight'"
+ * [backgroundColor]="'#83c0e9'"
+ * [parameters]="waitingRoomModalParams"
+ * [onWaitingRoomClose]="closeWaitingRoomModal"
+ * [onWaitingRoomFilterChange]="filterWaitingRoom"
+ * [updateWaitingList]="updateWaitingList"
+ * [onWaitingRoomItemPress]="handleWaitingRoomItemPress"
+ * ></app-waiting-room-modal>
+ * ```
+ *
+ */
 export declare class WaitingRoomModal implements OnChanges, OnInit {
     private respondToWaitingService;
     constructor(respondToWaitingService: RespondToWaiting);

package/dist/lib/components/whiteboard-components/configure-whiteboard-modal/configure-whiteboard-modal.component.d.ts

@@ -43,6 +43,27 @@ export interface ConfigureWhiteboardModalOptions {
     parameters: ConfigureWhiteboardModalParameters;
 }
 export type ConfigureWhiteboardModalType = (options: ConfigureWhiteboardModalOptions) => HTMLElement;
+/**
+ * @component ConfigureWhiteboardModal
+ * @description A modal component to configure and manage whiteboard settings and participants.
+ *
+ * @selector app-configure-whiteboard-modal
+ * @standalone true
+ * @imports [CommonModule, FontAwesomeModule]
+ * @templateUrl ./configure-whiteboard-modal.component.html
+ * @styleUrls ./configure-whiteboard-modal.component.css
+ *
+ * @example
+ * ```html
+ * <app-configure-whiteboard-modal
+ *   [isVisible]="isWhiteboardModalVisible"
+ *   [parameters]="whiteboardParameters"
+ *   [backgroundColor]="'#83c0e9'"
+ *   [position]="'topRight'"
+ *   (onConfigureWhiteboardClose)="handleCloseModal()">
+ * </app-configure-whiteboard-modal>
+ * ```
+ */
 export declare class ConfigureWhiteboardModal implements OnInit, OnChanges {
     isVisible: boolean;
     parameters: ConfigureWhiteboardModalParameters;

package/dist/lib/components/whiteboard-components/whiteboard/whiteboard.component.d.ts

@@ -200,6 +200,55 @@
  * @param {number} y1 - Y coordinate of the polygon start.
  * @param {number} x2 - X coordinate of the polygon end.
  * @param {number} y2 - Y coordinate of the polygon end.
+ *
+ * @example
+ * ```html
+ * <app-whiteboard
+ *  [customWidth]="1280"
+ * [customHeight]="720"
+ * [parameters]="{
+ *  socket: socket,
+ * showAlert: showAlert,
+ * islevel: islevel,
+ * roomName: roomName,
+ * shapes: shapes,
+ * useImageBackground: useImageBackground,
+ * redoStack: redoStack,
+ * undoStack: undoStack,
+ * whiteboardStarted: whiteboardStarted,
+ * whiteboardEnded: whiteboardEnded,
+ * whiteboardUsers: whiteboardUsers,
+ * participants: participants,
+ * participantsAll: participantsAll,
+ * screenId: screenId,
+ * recordStarted: recordStarted,
+ * recordStopped: recordStopped,
+ * recordPaused: recordPaused,
+ * recordResumed: recordResumed,
+ * recordingMediaOptions: recordingMediaOptions,
+ * member: member,
+ * shareScreenStarted: shareScreenStarted,
+ * canvasWhiteboard: canvasWhiteboard,
+ * targetResolution: targetResolution,
+ * targetResolutionHost: targetResolutionHost,
+ * updateShapes: updateShapes,
+ * updateUseImageBackground: updateUseImageBackground,
+ * updateRedoStack: updateRedoStack,
+ * updateUndoStack: updateUndoStack,
+ * updateWhiteboardStarted: updateWhiteboardStarted,
+ * updateWhiteboardEnded: updateWhiteboardEnded,
+ * updateWhiteboardUsers: updateWhiteboardUsers,
+ * updateParticipants: updateParticipants,
+ * updateScreenId: updateScreenId,
+ * updateShareScreenStarted: updateShareScreenStarted,
+ * updateCanvasWhiteboard: updateCanvasWhiteboard,
+ * onScreenChanges: onScreenChanges,
+ * captureCanvasStream: captureCanvasStream,
+ * getUpdatedAllParams: getUpdatedAllParams
+ * }"
+ * [showAspect]="true"
+ * ></app-whiteboard>
+ * ```
  */
 import { ElementRef, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Socket } from 'socket.io-client';

package/dist/lib/consumers/add-videos-grid.service.d.ts

@@ -28,6 +28,55 @@ export interface AddVideosGridOptions {
     parameters: AddVideosGridParameters;
 }
 export type AddVideosGridType = (options: AddVideosGridOptions) => Promise<void>;
+/**
+ * @service AddVideosGrid
+ * @description Service to manage and update video and audio components on a grid in the user interface. This service helps organize and configure participants and streams into different grid layouts.
+ *
+ * @method addVideosGrid
+ * Adds video and audio cards to the main and alternate grids based on the parameters and configuration options provided.
+ *
+ * @param {AddVideosGridOptions} options - Configuration options for setting up the grid.
+ * @param {(Stream | Participant)[]} options.mainGridStreams - Streams or participants to display on the main grid.
+ * @param {(Stream | Participant)[]} options.altGridStreams - Streams or participants to display on the alternate grid.
+ * @param {number} options.numtoadd - The number of items to add to the grid.
+ * @param {number} options.numRows - The number of rows for the main grid.
+ * @param {number} options.numCols - The number of columns for the main grid.
+ * @param {number} options.actualRows - The actual rows currently displayed.
+ * @param {number} options.lastrowcols - The number of columns in the last row of the grid.
+ * @param {boolean} options.removeAltGrid - Whether to remove the alternate grid layout.
+ * @param {AddVideosGridParameters} options.parameters - Additional parameters for updating the grid, controlling appearance, and handling events.
+ *
+ * @returns {Promise<void>} A promise that resolves once the grid layout is updated.
+ *
+ * @example
+ * ```typescript
+ * await addVideosGridService.addVideosGrid({
+ *   mainGridStreams: [...],
+ *   altGridStreams: [...],
+ *   numtoadd: 4,
+ *   numRows: 2,
+ *   numCols: 2,
+ *   actualRows: 2,
+ *   lastrowcols: 2,
+ *   removeAltGrid: false,
+ *   parameters: {
+ *     eventType: 'webinar',
+ *     updateAddAltGrid: (value) => {},
+ *     ref_participants: participantsList,
+ *     islevel: '1',
+ *     videoAlreadyOn: true,
+ *     localStreamVideo: localStream,
+ *     keepBackground: true,
+ *     virtualStream: virtualStream,
+ *     forceFullDisplay: false,
+ *     otherGridStreams: otherStreamsArray,
+ *     updateOtherGridStreams: (newStreams) => {},
+ *     updateMiniCardsGrid: (params) => {},
+ *     getUpdatedAllParams: () => ({ /* updated parameters * / }),
+ *   },
+ * });
+ * ```
+ */
 export declare class AddVideosGrid {
     addVideosGrid: ({ mainGridStreams, altGridStreams, numtoadd, numRows, numCols, actualRows, lastrowcols, removeAltGrid, parameters, }: AddVideosGridOptions) => Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AddVideosGrid, never>;

package/dist/lib/consumers/auto-adjust.service.d.ts

@@ -7,6 +7,32 @@ export interface AutoAdjustOptions {
     shared: boolean;
 }
 export type AutoAdjustType = (options: AutoAdjustOptions) => Promise<number[]>;
+/**
+ * @service AutoAdjust
+ * @description Service to auto-adjust layout values based on the event type, number of participants, and sharing conditions. Useful for dynamically adjusting UI elements in different event settings.
+ *
+ * @method autoAdjust
+ * Dynamically calculates and adjusts layout values (e.g., grid columns) based on conditions such as event type, participant count, and sharing status.
+ *
+ * @param {AutoAdjustOptions} options - Configuration options for the auto-adjustment.
+ * @param {number} options.n - Number of participants in the event.
+ * @param {EventType} options.eventType - Type of event (e.g., 'broadcast', 'chat', 'conference').
+ * @param {boolean} options.shareScreenStarted - Indicates whether screen sharing is active.
+ * @param {boolean} options.shared - Indicates if another resource is currently shared.
+ *
+ * @returns {Promise<number[]>} A promise resolving to an array of two adjusted layout values.
+ *
+ * @example
+ * ```typescript
+ * const [primaryLayout, secondaryLayout] = await autoAdjustService.autoAdjust({
+ *   n: 5,
+ *   eventType: 'conference',
+ *   shareScreenStarted: false,
+ *   shared: false,
+ * });
+ * console.log(primaryLayout, secondaryLayout); // Adjusted layout values based on inputs
+ * ```
+ */
 export declare class AutoAdjust {
     /**
      * Adjusts values based on the provided options.

package/dist/lib/consumers/calculate-rows-and-columns.service.d.ts

@@ -3,6 +3,24 @@ export interface CalculateRowsAndColumnsOptions {
     n: number;
 }
 export type CalculateRowsAndColumnsType = (options: CalculateRowsAndColumnsOptions) => [number, number];
+/**
+ * @service CalculateRowsAndColumns
+ * @description Service to calculate the optimal number of rows and columns needed to display a given number of items in a grid. Useful for dynamically determining grid layout in responsive designs.
+ *
+ * @method calculateRowsAndColumns
+ * Calculates the optimal number of rows and columns to display a specified number of items in a compact grid format.
+ *
+ * @param {CalculateRowsAndColumnsOptions} options - Configuration options for row and column calculation.
+ * @param {number} options.n - The number of items to display in the grid.
+ *
+ * @returns {[number, number]} A tuple where the first value is the number of rows and the second is the number of columns.
+ *
+ * @example
+ * ```typescript
+ * const [rows, cols] = calculateRowsAndColumnsService.calculateRowsAndColumns({ n: 10 });
+ * console.log(rows, cols); // Outputs optimized rows and columns for displaying 10 items
+ * ```
+ */
 export declare class CalculateRowsAndColumns {
     /**
      * Calculates the number of rows and columns needed to display a given number of items in a grid.