Class MediaSettingsModal

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

Standalone

true

Imports

[CommonModule, FontAwesomeModule, FormsModule]

Example

<app-media-settings-modal
  [isMediaSettingsModalVisible]="true"
  [onMediaSettingsClose]="closeModal"
  [switchCameraOnPress]="handleCameraSwitch"
  [switchVideoOnPress]="handleVideoSwitch"
  [switchAudioOnPress]="handleAudioSwitch"
  [parameters]="mediaSettingsParams"
  position="topRight"
  backgroundColor="#83c0e9">
</app-media-settings-modal>

Input

isMediaSettingsModalVisible - Indicates whether the modal is visible.

Input

onMediaSettingsClose - Function to close the modal.

Input

switchCameraOnPress - Function to handle camera switching.

Input

switchVideoOnPress - Function to handle video switching.

Input

switchAudioOnPress - Function to handle audio switching.

Input

parameters - Parameters for the modal.

Input

position - Position of the modal on the screen (default: 'topRight').

Input

backgroundColor - Background color of the modal (default: '#83c0e9').

Param: switchAudioService

Service for switching audio.

Param: switchVideoService

Service for switching video.

Param: switchVideoAltService

Alternative service for switching video.

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 - 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.

Implements

OnInit
OnChanges

Constructors

constructor

new MediaSettingsModal(switchAudioService, switchVideoService, switchVideoAltService): MediaSettingsModal
Parameters
- switchAudioService: SwitchAudio
- switchVideoService: SwitchVideo
- switchVideoAltService: SwitchVideoAlt
Returns MediaSettingsModal
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:145

Methods

ngOnInit

ngOnInit(): void
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

Returns void
Implementation of OnInit.ngOnInit
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:151

ngOnChanges

ngOnChanges(changes): void
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
- changes: SimpleChanges
  The changed properties.
Returns void
Implementation of OnChanges.ngOnChanges
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:160

modalContentStyle

modalContentStyle(): {
    backgroundColor: string;
    borderRadius: string;
    padding: string;
    width: string;
    maxHeight: string;
    overflowY: string;
    top: string;
    bottom: string;
    left: string;
    right: string;
}
Returns {
    backgroundColor: string;
    borderRadius: string;
    padding: string;
    width: string;
    maxHeight: string;
    overflowY: string;
    top: string;
    bottom: string;
    left: string;
    right: string;
}
- backgroundColor: string
- borderRadius: string
- padding: string
- width: string
- maxHeight: string
- overflowY: string
- top: string
- bottom: string
- left: string
- right: string
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:215

handleSwitchCamera

handleSwitchCamera(): Promise<void>
Returns Promise<void>
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:236

handleVideoSwitch

handleVideoSwitch(event): Promise<void>
Parameters
- event: Event
Returns Promise<void>
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:240

handleAudioSwitch

handleAudioSwitch(event): Promise<void>
Parameters
- event: Event
Returns Promise<void>
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:249

handleModalClose

handleModalClose(): void
Returns void
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:258

showVirtual

showVirtual(): void
Returns void
- Defined in src/lib/components/media-settings-components/media-settings-modal/media-settings-modal.component.ts:262

Properties

isMediaSettingsModalVisible

isMediaSettingsModalVisible: boolean = false

onMediaSettingsClose

onMediaSettingsClose: (() => void)

switchCameraOnPress

switchCameraOnPress: ((params: any) => Promise<void>)

switchVideoOnPress

switchVideoOnPress: ((params: any) => Promise<void>)

switchAudioOnPress

switchAudioOnPress: ((params: any) => Promise<void>)

parameters

parameters: MediaSettingsModalParameters

position

position: string = 'topRight'

backgroundColor

backgroundColor: string = '#83c0e9'

faTimes

faTimes: IconDefinition = faTimes

FontAwesome icon for closing the modal.

faSyncAlt

faSyncAlt: IconDefinition = faSyncAlt

FontAwesome icon for sync.

faCamera

faCamera: IconDefinition = faCamera

FontAwesome icon for camera.

faMicrophone

faMicrophone: IconDefinition = faMicrophone

FontAwesome icon for microphone.

faPhotoFilm

faPhotoFilm: IconDefinition = faPhotoFilm

FontAwesome icon for photo film.

selectedVideoInput

selectedVideoInput: string

Currently selected video input device ID.

selectedAudioInput

selectedAudioInput: string

Currently selected audio input device ID.

prevSelectedVideoInput

prevSelectedVideoInput: string

Previously selected video input device ID.

prevSelectedAudioInput

prevSelectedAudioInput: string

Previously selected audio input device ID.

Class MediaSettingsModal

Component

Selector

Standalone

Imports

Example

Input

Input

Input

Input

Input

Input

Input

Input

Param: switchAudioService

Param: switchVideoService

Param: switchVideoAltService

Method

Method

Method

Method

Method

Method

Method

Method

Method

Method

Method

Method

Implements

Index

Constructors

Methods

Properties

Constructors

constructor

Parameters

Returns MediaSettingsModal

Methods

ngOnInit

Returns void

ngOnChanges

Parameters

Returns void

setupDefaultServices

Returns void

updateParameters

Returns void

ensureDefaultSelections

Returns void

initializeModalSettings

Returns void

modalContentStyle

Returns { backgroundColor: string; borderRadius: string; padding: string; width: string; maxHeight: string; overflowY: string; top: string; bottom: string; left: string; right: string; }

backgroundColor: string

borderRadius: string

padding: string

width: string

maxHeight: string

overflowY: string

top: string

bottom: string

left: string

right: string

handleSwitchCamera

Returns Promise<void>

handleVideoSwitch

Parameters

Returns Promise<void>

handleAudioSwitch

Parameters

Returns Promise<void>

handleModalClose

Returns void

showVirtual

Returns void

Properties

isMediaSettingsModalVisible

onMediaSettingsClose

switchCameraOnPress

Returns {
backgroundColor: string;
borderRadius: string;
padding: string;
width: string;
maxHeight: string;
overflowY: string;
top: string;
bottom: string;
left: string;
right: string;
}