import { OnInit, OnDestroy } from '@angular/core'; import { ControlMedia } from '../../../consumers/control-media.service'; import { Participant, AudioDecibels, CoHostResponsibility, ShowAlert, EventType, CustomComponent } from '../../../@types/types'; import { Socket } from 'socket.io-client'; import { LiveSubtitleService } from '../../../services/live-subtitle.service'; import * as i0 from "@angular/core"; export interface VideoCardParameters { socket: Socket; roomName: string; coHostResponsibility: CoHostResponsibility[]; showAlert?: ShowAlert; coHost: string; participants: Participant[]; member: string; islevel: string; audioDecibels: AudioDecibels[]; getUpdatedAllParams: () => VideoCardParameters; } export interface VideoCardOptions { customStyle?: Partial; name: string; barColor?: string; textColor?: string; imageSource: string; roundedImage?: boolean; imageStyle?: Partial; remoteProducerId: string; eventType: EventType; forceFullDisplay?: boolean; videoStream: MediaStream | null; showControls?: boolean; showInfo?: boolean; videoInfoComponent?: HTMLElement | CustomComponent; videoControlsComponent?: HTMLElement | CustomComponent; controlsPosition?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; infoPosition?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; participant: Participant; backgroundColor: string; audioDecibels: AudioDecibels[]; doMirror?: boolean; 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 * * ``` * * @input {Partial} 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} 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; private liveSubtitleService; customStyle: Partial; name: string; barColor: string; textColor: string; imageSource: string; roundedImage: boolean; imageStyle: Partial; remoteProducerId: string; eventType: EventType; forceFullDisplay: boolean; videoStream: MediaStream | null; showControls: boolean; showInfo: boolean; videoInfoComponent?: HTMLElement | CustomComponent; videoControlsComponent?: HTMLElement | CustomComponent; controlsPosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; infoPosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; participant: Participant; backgroundColor: string; audioDecibels: AudioDecibels[]; doMirror: boolean; parameters: VideoCardParameters; waveformAnimations: number[]; showWaveform: boolean; audioLevelInterval: any; waveformInterval: any; isDarkModeEnabled: boolean; faMicrophone: import("@fortawesome/fontawesome-common-types").IconDefinition; faMicrophoneSlash: import("@fortawesome/fontawesome-common-types").IconDefinition; faVideo: import("@fortawesome/fontawesome-common-types").IconDefinition; faVideoSlash: import("@fortawesome/fontawesome-common-types").IconDefinition; constructor(controlMediaService: ControlMedia, liveSubtitleService: LiveSubtitleService, injectedCustomStyle: Partial, injectedName: string, injectedBarColor: string, injectedTextColor: string, injectedImageSource: string, injectedRoundedImage: boolean, injectedImageStyle: Partial, injectedRemoteProducerId: string, injectedEventType: EventType, injectedForceFullDisplay: boolean, injectedVideoStream: MediaStream | null, injectedShowControls: boolean, injectedShowInfo: boolean, injectedVideoInfoComponent: HTMLElement, injectedVideoControlsComponent: HTMLElement, injectedControlsPosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight', injectedInfoPosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight', injectedParticipant: Participant, injectedBackgroundColor: string, injectedAudioDecibels: AudioDecibels[], injectedDoMirror: boolean, injectedParameters: VideoCardParameters); get liveSubtitleText(): string | null; ngOnInit(): void; ngOnDestroy(): void; animateWaveform(): void; resetWaveform(): void; syncThemeMode(params?: any): void; toggleAudio(): Promise; toggleVideo(): Promise; renderControls(): HTMLElement | CustomComponent | "\n
\n \n \n
\n "; getOverlayPosition(position: string): import("../../../@types/types").OverlayPositionStyle; isCustomComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is CustomComponent; isFunctionComponent(comp: HTMLElement | CustomComponent | (() => HTMLElement | CustomComponent)): comp is () => HTMLElement | CustomComponent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }