Class AudioCard

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): 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): 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

<app-audio-card
 [controlUserMedia]="controlMediaFunction"
[name]="participantName"
[barColor]="'blue'"
[textColor]="'black'"
[imageSource]="participantImageURL"
[roundedImage]="true"
[showControls]="true"
[participant]="participant"
[parameters]="audioCardParameters">
</app-audio-card>

Implements

  • OnInit
  • OnDestroy

Constructors

constructor

Methods

ngOnInit ngOnDestroy animateBar animateWaveform resetWaveform getAnimationDuration toggleAudio toggleVideo renderControls combineStyles getOverlayPosition isCustomComponent isFunctionComponent

Properties

controlUserMedia? customStyle name barColor textColor imageSource roundedImage imageStyle showControls showInfo videoInfoComponent? videoControlsComponent? controlsPosition infoPosition participant backgroundColor audioDecibels parameters faVideo faVideoSlash faMicrophone faMicrophoneSlash waveformAnimations showWaveform interval

Constructors

constructor

  • new AudioCard(ngZone, controlMediaService, injectedControlUserMedia, injectedCustomStyle, injectedName, injectedBarColor, injectedTextColor, injectedImageSource, injectedRoundedImage, injectedImageStyle, injectedShowControls, injectedShowInfo, injectedVideoInfoComponent, injectedVideoControlsComponent, injectedControlsPosition, injectedInfoPosition, injectedParticipant, injectedBackgroundColor, injectedAudioDecibels, injectedParameters): AudioCard

  • Parameters

    • ngZone: NgZone
    • controlMediaService: ControlMedia
    • injectedControlUserMedia: ((options: ControlMediaOptions) => Promise<void>)
    • injectedCustomStyle: Partial<CSSStyleDeclaration>
    • injectedName: string
    • injectedBarColor: string
    • injectedTextColor: string
    • injectedImageSource: string
    • injectedRoundedImage: boolean
    • injectedImageStyle: Partial<CSSStyleDeclaration>
    • injectedShowControls: boolean
    • injectedShowInfo: boolean
    • injectedVideoInfoComponent: HTMLElement | CustomComponent
    • injectedVideoControlsComponent: HTMLElement | CustomComponent
    • injectedControlsPosition: ControlsPosition
    • injectedInfoPosition: InfoPosition
    • injectedParticipant: null | Participant
    • injectedBackgroundColor: string
    • injectedAudioDecibels: AudioDecibels
    • injectedParameters: AudioCardParameters

    Returns AudioCard

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

ngOnDestroy

animateBar

animateWaveform

resetWaveform

getAnimationDuration

toggleAudio

toggleVideo

renderControls

combineStyles

getOverlayPosition

isCustomComponent

isFunctionComponent

Properties

OptionalcontrolUserMedia

controlUserMedia?: ((options: ControlMediaOptions) => Promise<void>)

customStyle

customStyle: Partial<CSSStyleDeclaration> = {}

name

name: string = ''

barColor

barColor: string = 'red'

textColor

textColor: string = 'white'

imageSource

imageSource: string = ''

roundedImage

roundedImage: boolean = false

imageStyle

imageStyle: Partial<CSSStyleDeclaration> = {}

showControls

showControls: boolean = true

showInfo

showInfo: boolean = true

OptionalvideoInfoComponent

videoInfoComponent?: HTMLElement | CustomComponent

OptionalvideoControlsComponent

videoControlsComponent?: HTMLElement | CustomComponent

controlsPosition

controlsPosition: string = 'topLeft'

infoPosition

infoPosition: string = 'topRight'

participant

participant: null | Participant = null

backgroundColor

backgroundColor: string = ''

audioDecibels

audioDecibels: any

parameters

parameters: AudioCardParameters

faVideo

faVideo: IconDefinition = faVideo

faVideoSlash

faVideoSlash: IconDefinition = faVideoSlash

faMicrophone

faMicrophone: IconDefinition = faMicrophone

faMicrophoneSlash

faMicrophoneSlash: IconDefinition = faMicrophoneSlash

waveformAnimations

waveformAnimations: number[] = ...

showWaveform

showWaveform: boolean = true

interval

interval: any

Settings

Member Visibility

On This Page

Constructors
Methods
Properties