mediasfu-angular 1.0.1 → 1.0.2

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

@@ -40,6 +40,68 @@ export interface VideoCardOptions {
     parameters: VideoCardParameters;
 }
 export type VideoCardType = (options: VideoCardOptions) => HTMLElement;
+/**
+ * VideoCard component represents a customizable video display card with participant controls for toggling audio and video.
+ * It also animates an audio waveform if sound is detected in the participant's audio stream.
+ *
+ * @selector app-video-card
+ * @standalone true
+ * @imports [CommonModule, FontAwesomeModule, CardVideoDisplay]
+ *
+ * @example
+ * ```html
+ * <app-video-card
+ *   [name]="participant.name"
+ *   [videoStream]="videoStream"
+ *   [audioDecibels]="audioDecibels"
+ *   [participant]="participant"
+ *   [parameters]="videoCardParameters"
+ * ></app-video-card>
+ * ```
+ *
+ * @input {Partial<CSSStyleDeclaration>} customStyle - Styles for the card container.
+ * @input {string} name - Name of the participant displayed on the card.
+ * @input {string} barColor - Color of the waveform bars. Default is 'red'.
+ * @input {string} textColor - Color of the name text. Default is 'white'.
+ * @input {string} imageSource - Source URL of the participant's image.
+ * @input {boolean} roundedImage - Whether the image should have rounded corners.
+ * @input {Partial<CSSStyleDeclaration>} imageStyle - Additional styles for the image.
+ * @input {string} remoteProducerId - ID of the remote media producer.
+ * @input {EventType} eventType - Type of event (used for internal logic).
+ * @input {boolean} forceFullDisplay - Forces full display if true.
+ * @input {MediaStream | null} videoStream - Stream of the video to be displayed.
+ * @input {boolean} showControls - Determines if the controls are displayed. Default is true.
+ * @input {boolean} showInfo - Determines if info (e.g., participant name) is shown. Default is true.
+ * @input {HTMLElement | CustomComponent} videoInfoComponent - Custom component for video info display.
+ * @input {HTMLElement | CustomComponent} videoControlsComponent - Custom component for video controls.
+ * @input {'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} controlsPosition - Position of controls overlay.
+ * @input {'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} infoPosition - Position of info overlay.
+ * @input {Participant} participant - Participant data object.
+ * @input {string} backgroundColor - Background color of the video card.
+ * @input {AudioDecibels[]} audioDecibels - Audio decibel data for animating waveform.
+ * @input {boolean} doMirror - If true, mirrors the video display.
+ * @input {VideoCardParameters} parameters - Additional parameters including socket and alert configuration.
+ *
+ * @property {number[]} waveformAnimations - Array representing animation states for waveform bars.
+ * @property {boolean} showWaveform - Flag to toggle waveform animation. Default is true.
+ * @property {any} interval - Interval reference for audio decibel checks.
+ * @property {IconDefinition} faMicrophone - FontAwesome icon for microphone.
+ * @property {IconDefinition} faMicrophoneSlash - FontAwesome icon for muted microphone.
+ * @property {IconDefinition} faVideo - FontAwesome icon for video.
+ * @property {IconDefinition} faVideoSlash - FontAwesome icon for video off.
+ *
+ * @method ngOnInit - Lifecycle hook to initialize audio decibel interval check.
+ * @method ngOnDestroy - Lifecycle hook to clear intervals.
+ * @method animateWaveform - Starts audio waveform animation.
+ * @method resetWaveform - Resets waveform animations.
+ * @method getAnimationDuration - Returns animation duration for given bar index.
+ * @method toggleAudio - Toggles participant's audio status.
+ * @method toggleVideo - Toggles participant's video status.
+ * @method renderControls - Renders the control buttons (audio and video) based on participant status.
+ * @method getOverlayPosition - Returns overlay position styles based on the input position string.
+ * @method isCustomComponent - Checks if a component is a custom component.
+ * @method isFunctionComponent - Checks if a component is a function component.
+ */
 export declare class VideoCard implements OnInit, OnDestroy {
     private controlMediaService;
     customStyle: Partial<CSSStyleDeclaration>;

package/dist/lib/components/display-settings-components/display-settings-modal.component.d.ts

@@ -16,33 +16,44 @@ export interface DisplaySettingsModalOptions {
 }
 export type DisplaySettingsModalType = (options: DisplaySettingsModalOptions) => HTMLElement;
 /**
- * Component for displaying and modifying display settings in a modal.
+ * DisplaySettingsModal component is a modal dialog for managing display settings in a meeting.
  *
+ * @component
  * @selector app-display-settings-modal
  * @standalone true
  * @imports [CommonModule, FontAwesomeModule, FormsModule]
- * @templateUrl ./display-settings-modal.component.html
- * @styleUrls ['./display-settings-modal.component.css']
  *
- * @property {boolean} isDisplaySettingsModalVisible - Determines if the display settings modal is visible.
- * @property {() => void} onDisplaySettingsClose - Callback function to handle closing the display settings modal.
- * @property {(params: any) => void} onModifyDisplaySettings - Callback function to handle modifying display settings.
- * @property {DisplaySettingsModalParameters} parameters - Parameters for the display settings modal.
- * @property {string} position - Position of the modal on the screen. Default is 'topRight'.
- * @property {string} backgroundColor - Background color of the modal. Default is '#83c0e9'.
+ * @example
+ * ```html
+ * <app-display-settings-modal
+ *   [isDisplaySettingsModalVisible]="true"
+ *   [onDisplaySettingsClose]="closeModal"
+ *   [onModifyDisplaySettings]="saveSettings"
+ *   [parameters]="displaySettingsParams"
+ *   position="topRight"
+ *   backgroundColor="#83c0e9"
+ * ></app-display-settings-modal>
+ * ```
  *
- * @property {IconDefinition} faTimes - FontAwesome icon for the close button.
+ * @input {boolean} isDisplaySettingsModalVisible - Determines if the modal is visible.
+ * @input {() => void} onDisplaySettingsClose - Callback to close the modal.
+ * @input {(params: any) => void} onModifyDisplaySettings - Callback to modify display settings.
+ * @input {DisplaySettingsModalParameters} parameters - Input parameters for modal settings.
+ * @input {string} position - Modal's screen position, default is 'topRight'.
+ * @input {string} backgroundColor - Background color of the modal, default is '#83c0e9'.
  *
- * @property {string} meetingDisplayTypeState - State for the meeting display type.
- * @property {boolean} autoWaveState - State for the auto wave setting. Default is false.
- * @property {boolean} forceFullDisplayState - State for the force full display setting. Default is false.
- * @property {boolean} meetingVideoOptimizedState - State for the meeting video optimized setting. Default is false.
+ * @property {IconDefinition} faTimes - FontAwesome icon for closing the modal.
+ *
+ * @property {string} meetingDisplayTypeState - State variable for meeting display type.
+ * @property {boolean} autoWaveState - State variable for auto wave setting.
+ * @property {boolean} forceFullDisplayState - State variable for force full display setting.
+ * @property {boolean} meetingVideoOptimizedState - State variable for video optimized setting.
  *
  * @constructor
- * @param {ModifyDisplaySettings} modifyDisplaySettingsService - Service to modify display settings.
+ * @param {ModifyDisplaySettings} modifyDisplaySettingsService - Service to handle display settings modifications.
  *
- * @method ngOnInit - Initializes the component and sets the initial state based on the input parameters.
- * @method handleSaveSettings - Handles saving the modified display settings.
+ * @method ngOnInit - Initializes component state based on input parameters.
+ * @method handleSaveSettings - Triggers the modification of display settings using `onModifyDisplaySettings`.
  */
 export declare class DisplaySettingsModal {
     private modifyDisplaySettingsService;

package/dist/lib/components/event-settings-components/event-settings-modal/event-settings-modal.component.d.ts

@@ -24,56 +24,65 @@ export interface EventSettingsModalOptions {
 }
 export type EventSettingsModalType = (options: EventSettingsModalOptions) => HTMLElement;
 /**
- * Component for managing event settings modal.
+ * EventSettingsModal component provides a modal interface to manage and update event settings like audio, video, screenshare, and chat settings.
  *
+ * @component
  * @selector app-event-settings-modal
  * @standalone true
- * @imports CommonModule, FontAwesomeModule, FormsModule
- * @templateUrl ./event-settings-modal.component.html
- * @styleUrls ./event-settings-modal.component.css
+ * @imports [CommonModule, FontAwesomeModule, FormsModule]
  *
- * @class EventSettingsModal
- * @implements OnInit, OnChanges
+ * @example
+ * ```html
+ * <app-event-settings-modal
+ *   [isEventSettingsModalVisible]="true"
+ *   [onEventSettingsClose]="closeModal"
+ *   [onModifyEventSettings]="saveSettings"
+ *   [audioSetting]="audio"
+ *   [videoSetting]="video"
+ *   [screenshareSetting]="screenshare"
+ *   [chatSetting]="chat"
+ *   [position]="'topRight'"
+ *   [backgroundColor]="'#83c0e9'"
+ * ></app-event-settings-modal>
+ * ```
  *
- * @property {boolean} isEventSettingsModalVisible - Indicates if the event settings modal is visible.
- * @property {() => void} onEventSettingsClose - Callback function to close the event settings modal.
- * @property {(options: ModifySettingsOptions) => Promise<void>} onModifyEventSettings - Callback function to modify event settings.
- * @property {string} position - Position of the modal on the screen.
- * @property {string} backgroundColor - Background color of the modal.
- * @property {string} audioSetting - Current audio setting.
- * @property {string} videoSetting - Current video setting.
- * @property {string} screenshareSetting - Current screenshare setting.
- * @property {string} chatSetting - Current chat setting.
- * @property {(setting: string) => void} updateAudioSetting - Callback function to update audio setting.
- * @property {(setting: string) => void} updateVideoSetting - Callback function to update video setting.
- * @property {(setting: string) => void} updateScreenshareSetting - Callback function to update screenshare setting.
- * @property {(setting: string) => void} updateChatSetting - Callback function to update chat setting.
- * @property {(isVisible: boolean) => void} updateIsSettingsModalVisible - Callback function to update modal visibility.
- * @property {string} roomName - Name of the room.
- * @property {Socket} socket - Socket instance for communication.
- * @property {ShowAlert} [showAlert] - Optional alert function.
+ * @input {boolean} isEventSettingsModalVisible - Indicates if the event settings modal is visible.
+ * @input {() => void} onEventSettingsClose - Callback to close the modal.
+ * @input {(options: ModifySettingsOptions) => Promise<void>} onModifyEventSettings - Callback to handle event settings modifications.
+ * @input {string} position - Position of the modal on the screen, default is 'topRight'.
+ * @input {string} backgroundColor - Background color of the modal, default is '#83c0e9'.
+ * @input {string} audioSetting - Current audio setting.
+ * @input {string} videoSetting - Current video setting.
+ * @input {string} screenshareSetting - Current screenshare setting.
+ * @input {string} chatSetting - Current chat setting.
+ * @input {(setting: string) => void} updateAudioSetting - Function to update audio setting.
+ * @input {(setting: string) => void} updateVideoSetting - Function to update video setting.
+ * @input {(setting: string) => void} updateScreenshareSetting - Function to update screenshare setting.
+ * @input {(setting: string) => void} updateChatSetting - Function to update chat setting.
+ * @input {(isVisible: boolean) => void} updateIsSettingsModalVisible - Function to update modal visibility.
+ * @input {string} roomName - Room name associated with the settings.
+ * @input {Socket} socket - Socket for real-time communication.
+ * @input {ShowAlert} [showAlert] - Optional alert function.
  *
- * @property {string} audioState - State of the audio setting.
- * @property {string} videoState - State of the video setting.
- * @property {string} screenshareState - State of the screenshare setting.
- * @property {string} chatState - State of the chat setting.
- *
- * @property {IconDefinition} faTimes - FontAwesome icon for close button.
+ * @property {string} audioState - Internal state for audio setting.
+ * @property {string} videoState - Internal state for video setting.
+ * @property {string} screenshareState - Internal state for screenshare setting.
+ * @property {string} chatState - Internal state for chat setting.
+ * @property {IconDefinition} faTimes - FontAwesome icon for the close button.
  *
  * @constructor
  * @param {ModifySettings} modifySettingsService - Service for modifying settings.
  *
- * @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.
- * @param {SimpleChanges} changes - Object of current and previous property values.
- *
- * @method updateStatesFromParameters - Updates the state variables from the input parameters.
+ * @method ngOnInit - Initializes the component and binds the settings modification service.
+ * @method ngOnChanges - Updates internal states when `isEventSettingsModalVisible` changes.
+ * @param {SimpleChanges} changes - Object containing previous and current values of bound properties.
  *
- * @method getModalContentStyle - Returns the style object for the modal content.
- * @returns {Object} Style object for the modal content.
+ * @method updateStatesFromParameters - Sets internal state variables based on input parameters.
+ * @method getModalContentStyle - Returns style object for modal content with dynamic positioning and size.
+ * @returns {Object} Style object for modal content.
  *
- * @method handleSaveSettings - Handles the save settings action.
- * @returns {Promise<void>} Promise that resolves when settings are saved.
+ * @method handleSaveSettings - Invokes the settings modification function with updated values.
+ * @returns {Promise<void>} Promise that resolves after saving settings.
  *
  * @method closeModal - Closes the modal.
  */

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

@@ -16,37 +16,50 @@ export interface ConfirmExitModalOptions {
 }
 export type ConfirmExitModalType = (options: ConfirmExitModalOptions) => HTMLElement;
 /**
- * Component for displaying a confirmation modal when exiting.
+ * ConfirmExitModal component renders a modal view for exit confirmation,
+ * allowing users to confirm or cancel an exit event from a session or room.
  *
+ * @component
  * @selector app-confirm-exit-modal
- * @templateUrl ./confirm-exit-modal.component.html
- * @styleUrls ./confirm-exit-modal.component.css
  * @standalone true
  * @imports [CommonModule, FormsModule, FontAwesomeModule]
  *
- * @class ConfirmExitModal
- * @implements OnInit, OnChanges
+ * @example
+ * ```html
+ * <app-confirm-exit-modal
+ *   [isConfirmExitModalVisible]="true"
+ *   [onConfirmExitClose]="closeModal"
+ *   [exitEventOnConfirm]="confirmExit"
+ *   [member]="memberName"
+ *   [ban]="false"
+ *   [roomName]="currentRoom"
+ *   [socket]="socketInstance"
+ *   [islevel]="userLevel">
+ * </app-confirm-exit-modal>
+ * ```
  *
- * @property {boolean} isConfirmExitModalVisible - Visibility state of the confirmation modal.
- * @property {() => void} onConfirmExitClose - Callback function to close the modal.
- * @property {string} position - Position of the modal on the screen.
- * @property {string} backgroundColor - Background color of the modal.
- * @property {(options: ConfirmExitOptions) => void} exitEventOnConfirm - Event triggered on confirming exit.
- * @property {string} member - Member information.
- * @property {boolean} ban - Ban status.
- * @property {string} roomName - Name of the room.
- * @property {Socket} socket - Socket instance.
- * @property {string} islevel - Level information.
- * @property {IconDefinition} faTimes - FontAwesome icon for close button.
- * @property {any} modalContentStyle - Style object for modal content.
+ * @input {boolean} isConfirmExitModalVisible - Determines the visibility of the modal.
+ * @input {() => void} onConfirmExitClose - Callback to close the modal.
+ * @input {string} position - Position on the screen (default: 'topRight').
+ * @input {string} backgroundColor - Background color of the modal (default: '#83c0e9').
+ * @input {(options: ConfirmExitOptions) => void} exitEventOnConfirm - Callback function to handle exit confirmation.
+ * @input {string} member - Identifies the member for whom the exit is confirmed.
+ * @input {boolean} ban - Indicates if the exit action includes a ban.
+ * @input {string} roomName - Name of the room involved in the exit action.
+ * @input {Socket} socket - Socket instance for real-time interaction.
+ * @input {string} islevel - User level information.
+ *
+ * @property {IconDefinition} faTimes - FontAwesome icon for the close button.
+ * @property {any} modalContentStyle - Object defining the style for modal content.
  *
  * @constructor
- * @param {ConfirmExit} confirmExitService - Service for handling exit confirmation.
+ * @param {ConfirmExit} confirmExitService - Service to handle the exit confirmation.
+ *
+ * @method ngOnInit - Initializes component properties and default styles for the modal content.
+ * @method ngOnChanges - Updates component state upon changes in input properties.
+ * @param {SimpleChanges} changes - Object containing the current and previous property values.
  *
- * @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.
- * @param {SimpleChanges} changes - Object of current and previous property values.
- * @method handleConfirmExit - Handles the exit confirmation event.
+ * @method handleConfirmExit - Handles the exit confirmation event, triggering the provided `exitEventOnConfirm` function and then closing the modal.
  */
 export declare class ConfirmExitModal implements OnInit, OnChanges {
     private confirmExitService;

package/dist/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.d.ts

@@ -24,25 +24,36 @@ export interface MediaSettingsModalOptions {
 }
 export type MediaSettingsModalType = (options: MediaSettingsModalOptions) => HTMLElement;
 /**
- * Component for displaying and managing media settings in a modal.
+ * MediaSettingsModal component renders a modal interface for managing media settings.
+ * Users can switch between different audio and video input devices and adjust other settings.
  *
+ * @component
  * @selector app-media-settings-modal
- * @templateUrl ./media-settings-modal.component.html
- * @styleUrls ./media-settings-modal.component.css
  * @standalone true
  * @imports [CommonModule, FontAwesomeModule, FormsModule]
  *
- * @class MediaSettingsModal
- * @implements OnInit, OnChanges
+ * @example
+ * ```html
+ * <app-media-settings-modal
+ *   [isMediaSettingsModalVisible]="true"
+ *   [onMediaSettingsClose]="closeModal"
+ *   [switchCameraOnPress]="handleCameraSwitch"
+ *   [switchVideoOnPress]="handleVideoSwitch"
+ *   [switchAudioOnPress]="handleAudioSwitch"
+ *   [parameters]="mediaSettingsParams"
+ *   position="topRight"
+ *   backgroundColor="#83c0e9">
+ * </app-media-settings-modal>
+ * ```
  *
- * @property {boolean} isMediaSettingsModalVisible - Determines if the media settings modal is visible.
- * @property {() => void} onMediaSettingsClose - Callback function to close the media settings modal.
- * @property {(params: any) => Promise<void>} switchCameraOnPress - Callback function to switch the camera.
- * @property {(params: any) => Promise<void>} switchVideoOnPress - Callback function to switch the video.
- * @property {(params: any) => Promise<void>} switchAudioOnPress - Callback function to switch the audio.
- * @property {MediaSettingsModalParameters} parameters - Parameters for the media settings modal.
- * @property {string} position - Position of the modal on the screen. Default is 'topRight'.
- * @property {string} backgroundColor - Background color of the modal. Default is '#83c0e9'.
+ * @input {boolean} isMediaSettingsModalVisible - Indicates whether the modal is visible.
+ * @input {() => void} onMediaSettingsClose - Function to close the modal.
+ * @input {(params: SwitchVideoAltOptions) => Promise<void>} switchCameraOnPress - Function to handle camera switching.
+ * @input {(params: SwitchVideoOptions) => Promise<void>} switchVideoOnPress - Function to handle video switching.
+ * @input {(params: SwitchAudioOptions) => Promise<void>} switchAudioOnPress - Function to handle audio switching.
+ * @input {MediaSettingsModalParameters} parameters - Parameters for the modal.
+ * @input {string} position - Position of the modal on the screen (default: 'topRight').
+ * @input {string} backgroundColor - Background color of the modal (default: '#83c0e9').
  *
  * @property {IconDefinition} faTimes - FontAwesome icon for closing the modal.
  * @property {IconDefinition} faSyncAlt - FontAwesome icon for sync.
@@ -60,18 +71,18 @@ export type MediaSettingsModalType = (options: MediaSettingsModalOptions) => HTM
  * @param {SwitchVideo} switchVideoService - Service for switching video.
  * @param {SwitchVideoAlt} switchVideoAltService - Alternative service for switching video.
  *
- * @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 setupDefaultServices - Sets up default services for switching camera, video, and audio if not provided.
- * @method updateParameters - Updates the parameters for the modal.
- * @method ensureDefaultSelections - Ensures that default selections for video and audio inputs are set.
- * @method initializeModalSettings - Initializes settings for the modal.
+ * @method ngOnInit - Initializes the component and sets up default selections and services.
+ * @method ngOnChanges - Updates component state based on input changes.
+ * @method setupDefaultServices - Configures default services for switching camera, video, and audio.
+ * @method updateParameters - Updates the modal parameters.
+ * @method ensureDefaultSelections - Ensures default selections for video and audio inputs.
+ * @method initializeModalSettings - Initializes the modal settings.
  * @method modalContentStyle - Returns the style object for the modal content.
- * @method handleSwitchCamera - Handles the action to switch the camera.
- * @method handleVideoSwitch - Handles the action to switch the video input.
- * @method handleAudioSwitch - Handles the action to switch the audio input.
- * @method handleModalClose - Handles the action to close the modal.
- * @method showVirtual - Toggles the visibility of the virtual background modal.
+ * @method handleSwitchCamera - Initiates camera switching.
+ * @method handleVideoSwitch - Initiates video input switching.
+ * @method handleAudioSwitch - Initiates audio input switching.
+ * @method handleModalClose - Closes the modal.
+ * @method showVirtual - Toggles the virtual background modal.
  */
 export declare class MediaSettingsModal implements OnInit, OnChanges {
     private switchAudioService;