mediasfu-angular 1.0.0

package/dist/lib/components/display-components/main-container-component/main-container-component.component.d.ts

@@ -0,0 +1,63 @@
+import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface MainContainerComponentOptions {
+    backgroundColor?: string;
+    containerWidthFraction?: number;
+    containerHeightFraction?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    padding?: number;
+}
+export type MainContainerComponentType = (options: MainContainerComponentOptions) => HTMLElement;
+/**
+ * MainContainerComponent is a standalone Angular component that dynamically adjusts its styles
+ * based on the provided input properties and window size changes.
+ *
+ * @selector app-main-container-component
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @template
+ * ```html
+ * <div [ngStyle]="containerStyles">
+ *   <ng-content></ng-content>
+ * </div>
+ * ```
+ *
+ * @class MainContainerComponent
+ * @implements OnInit, OnDestroy, OnChanges
+ *
+ * @property {string} backgroundColor - The background color of the container.
+ * @property {number} containerWidthFraction - The fraction of the window width the container should occupy.
+ * @property {number} containerHeightFraction - The fraction of the window height the container should occupy.
+ * @property {number} marginLeft - The left margin of the container in pixels.
+ * @property {number} marginRight - The right margin of the container in pixels.
+ * @property {number} marginTop - The top margin of the container in pixels.
+ * @property {number} marginBottom - The bottom margin of the container in pixels.
+ *
+ * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized. Sets up event listeners for window resize and orientation change.
+ * @method ngOnChanges - Lifecycle hook that is called when any data-bound property changes. Updates the container styles accordingly.
+ * @method ngOnDestroy - Lifecycle hook that is called just before the component is destroyed. Removes event listeners for window resize and orientation change.
+ * @method updateContainerStyles - Updates the container styles based on the current input properties and window size.
+ */
+export declare class MainContainerComponent implements OnInit, OnDestroy, OnChanges {
+    backgroundColor: string;
+    containerWidthFraction: number;
+    containerHeightFraction: number;
+    marginLeft: number;
+    marginRight: number;
+    marginTop: number;
+    marginBottom: number;
+    padding: number;
+    containerStyles: {
+        [key: string]: any;
+    };
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    updateContainerStyles: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MainContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainContainerComponent, "app-main-container-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "containerWidthFraction": { "alias": "containerWidthFraction"; "required": false; }; "containerHeightFraction": { "alias": "containerHeightFraction"; "required": false; }; "marginLeft": { "alias": "marginLeft"; "required": false; }; "marginRight": { "alias": "marginRight"; "required": false; }; "marginTop": { "alias": "marginTop"; "required": false; }; "marginBottom": { "alias": "marginBottom"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/lib/components/display-components/main-grid-component/main-grid-component.component.d.ts

@@ -0,0 +1,67 @@
+import * as i0 from "@angular/core";
+export interface MainGridComponentOptions {
+    backgroundColor?: string;
+    mainSize?: number;
+    height?: number;
+    width?: number;
+    showAspect?: boolean;
+    timeBackgroundColor?: string;
+    showTimer?: boolean;
+    meetingProgressTime?: string;
+}
+export type MainGridComponentType = (options: MainGridComponentOptions) => HTMLElement;
+/**
+ * MainGridComponent is a standalone Angular component that displays a grid container
+ * with optional meeting progress timer and customizable styles.
+ *
+ * @selector app-main-grid-component
+ * @standalone true
+ * @imports CommonModule, MeetingProgressTimer
+ *
+ * @template
+ * <div [ngStyle]="maingridContainerStyle">
+ *   <app-meeting-progress-timer
+ *     *ngIf="showTimer"
+ *     [meetingProgressTime]="meetingProgressTime"
+ *     [initialBackgroundColor]="timeBackgroundColor"
+ *   ></app-meeting-progress-timer>
+ *   <ng-content></ng-content>
+ * </div>
+ *
+ * @Inputs
+ * @property {string} backgroundColor - The background color of the grid container.
+ * @property {number} mainSize - The main size of the grid container.
+ * @property {number} height - The height of the grid container in pixels.
+ * @property {number} width - The width of the grid container in pixels.
+ * @property {boolean} showAspect - Determines if the grid container should be displayed as flex.
+ * @property {string} timeBackgroundColor - The background color of the meeting progress timer.
+ * @property {boolean} showTimer - Determines if the meeting progress timer should be displayed.
+ * @property {string} meetingProgressTime - The progress time to be displayed in the meeting progress timer.
+ *
+ * @getter maingridContainerStyle - Returns the style object for the grid container.
+ * @returns {Object} The style object for the grid container.
+ */
+export declare class MainGridComponent {
+    backgroundColor: string;
+    mainSize: number;
+    height: number;
+    width: number;
+    showAspect: boolean;
+    timeBackgroundColor: string;
+    showTimer: boolean;
+    meetingProgressTime: string;
+    get maingridContainerStyle(): {
+        display: string;
+        backgroundColor: string;
+        height: string;
+        width: string;
+        flexDirection: string;
+        justifyContent: string;
+        alignItems: string;
+        borderStyle: string;
+        borderColor: string;
+        borderWidth: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<MainGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainGridComponent, "app-main-grid-component", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "mainSize": { "alias": "mainSize"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "showAspect": { "alias": "showAspect"; "required": false; }; "timeBackgroundColor": { "alias": "timeBackgroundColor"; "required": false; }; "showTimer": { "alias": "showTimer"; "required": false; }; "meetingProgressTime": { "alias": "meetingProgressTime"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/dist/lib/components/display-components/main-screen-component/main-screen-component.component.d.ts

@@ -0,0 +1,82 @@
+import { OnInit, OnChanges, SimpleChanges, QueryList, ElementRef, Renderer2, AfterViewInit, OnDestroy } from '@angular/core';
+import { ComponentSizes } from '../../../@types/types';
+import * as i0 from "@angular/core";
+export interface MainScreenComponentOptions {
+    mainSize?: number;
+    doStack?: boolean;
+    containerWidthFraction?: number;
+    containerHeightFraction?: number;
+    defaultFraction?: number;
+    showControls?: boolean;
+    updateComponentSizes: (sizes: ComponentSizes) => void;
+}
+export type MainScreenComponentType = (options: MainScreenComponentOptions) => HTMLElement;
+/**
+ * MainScreenComponent is responsible for displaying a main screen with dynamic dimensions
+ * and layout based on the input properties and screen size.
+ *
+ * @selector app-main-screen-component
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @property {number} mainSize - The size of the main component as a percentage.
+ * @property {boolean} doStack - Determines if the components should be stacked.
+ * @property {number} containerWidthFraction - Fraction of the container width.
+ * @property {number} containerHeightFraction - Fraction of the container height.
+ * @property {number} defaultFraction - Default fraction for height calculation.
+ * @property {boolean} showControls - Flag to show or hide controls.
+ * @property {(sizes: ComponentSizes) => void} updateComponentSizes - Callback to update component sizes.
+ *
+ * @ContentChildren('child') children - Query list of child elements.
+ *
+ * @property {number} parentWidth - The width of the parent container.
+ * @property {number} parentHeight - The height of the parent container.
+ * @property {boolean} isWideScreen - Flag to determine if the screen is wide.
+ *
+ * @method ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.
+ * @method ngOnDestroy - Lifecycle hook that is called when the component is destroyed.
+ * @method ngOnChanges - Lifecycle hook that is called when any data-bound property changes.
+ * @method ngAfterViewInit - Lifecycle hook that is called after the component's view has been fully initialized.
+ * @method computeDimensions - Computes the dimensions of the main and other components based on the input properties.
+ * @method updateDimensions - Updates the dimensions of the parent container and child components.
+ * @method get containerStyle - Returns the style object for the container.
+ * @method applyChildStyles - Applies the computed styles to the child components.
+ */
+export declare class MainScreenComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    private renderer;
+    mainSize: number;
+    doStack: boolean;
+    containerWidthFraction: number;
+    containerHeightFraction: number;
+    defaultFraction: number;
+    showControls: boolean;
+    updateComponentSizes: (sizes: ComponentSizes) => void;
+    children: QueryList<ElementRef>;
+    parentWidth: number;
+    parentHeight: number;
+    isWideScreen: boolean;
+    constructor(renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    computeDimensions(): {
+        mainHeight: number;
+        otherHeight: number;
+        mainWidth: number;
+        otherWidth: number;
+    };
+    updateDimensions: () => void;
+    get containerStyle(): {
+        display: string;
+        flex: number;
+        flexDirection: string;
+        width: string;
+        height: string;
+        padding: number;
+        margin: number;
+    };
+    applyChildStyles(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MainScreenComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainScreenComponent, "app-main-screen-component", never, { "mainSize": { "alias": "mainSize"; "required": false; }; "doStack": { "alias": "doStack"; "required": false; }; "containerWidthFraction": { "alias": "containerWidthFraction"; "required": false; }; "containerHeightFraction": { "alias": "containerHeightFraction"; "required": false; }; "defaultFraction": { "alias": "defaultFraction"; "required": false; }; "showControls": { "alias": "showControls"; "required": false; }; "updateComponentSizes": { "alias": "updateComponentSizes"; "required": false; }; }, {}, ["children"], ["*"], true, never>;
+}

package/dist/lib/components/display-components/meeting-progress-timer/meeting-progress-timer.component.d.ts

@@ -0,0 +1,82 @@
+import { SimpleChanges, OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface MeetingProgressTimerOptions {
+    meetingProgressTime: string;
+    initialBackgroundColor?: string;
+    position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+    textStyle?: {
+        [key: string]: string | number;
+    };
+    showTimer?: boolean;
+}
+export type MeetingProgressTimerType = (options: MeetingProgressTimerOptions) => HTMLElement;
+/**
+ * Component to display a meeting progress timer.
+ *s
+ * @selector app-meeting-progress-timer
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @template
+ * ```html
+ * <div [ngStyle]="positions[position]" class="badge-container">
+ *   <div [ngStyle]="{ backgroundColor: initialBackgroundColor, display: showTimer ? 'block' : 'none' }" class="progress-timer">
+ *     <span [ngStyle]="textStyle" class="progress-timer-text">{{ meetingProgressTime }}</span>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * @styles
+ * ```css
+ * .badge-container {
+ *   padding: 5px;
+ *   position: relative;
+ *   z-index: 1000;
+ * }
+ * .progress-timer {
+ *   background-color: green;
+ *   padding: 5px;
+ *   border-radius: 5px;
+ *   color: white;
+ * }
+ * .progress-timer-text {
+ *   color: black;
+ * }
+ * ```
+ *
+ * @class MeetingProgressTimer
+ * @implements OnInit, OnChanges
+ *
+ * @property {string} meetingProgressTime - The time to be displayed in the timer.
+ * @property {string} [initialBackgroundColor='green'] - The initial background color of the timer.
+ * @property {'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} [position='topLeft'] - The position of the timer on the screen.
+ * @property {{ [key: string]: string | number }} [textStyle={}] - The style to be applied to the timer text.
+ * @property {boolean} [showTimer=true] - Flag to show or hide the timer.
+ *
+ * @property {{ [key: string]: { position: string, top?: string, bottom?: string, left?: string, right?: string } }} positions - The possible positions for the timer.
+ *
+ * @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.
+ * @param {SimpleChanges} changes - The changed properties.
+ */
+export declare class MeetingProgressTimer implements OnChanges {
+    meetingProgressTime: string;
+    initialBackgroundColor: string;
+    position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+    textStyle: {
+        [key: string]: string | number;
+    };
+    showTimer: boolean;
+    positions: {
+        [key: string]: {
+            position: string;
+            top?: string;
+            bottom?: string;
+            left?: string;
+            right?: string;
+        };
+    };
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MeetingProgressTimer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MeetingProgressTimer, "app-meeting-progress-timer", never, { "meetingProgressTime": { "alias": "meetingProgressTime"; "required": false; }; "initialBackgroundColor": { "alias": "initialBackgroundColor"; "required": false; }; "position": { "alias": "position"; "required": false; }; "textStyle": { "alias": "textStyle"; "required": false; }; "showTimer": { "alias": "showTimer"; "required": false; }; }, {}, never, never, true, never>;
+}

package/dist/lib/components/display-components/mini-audio/mini-audio.component.d.ts

@@ -0,0 +1,128 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface MiniAudioOptions {
+    visible?: boolean;
+    customStyle?: any;
+    name?: string;
+    showWaveform?: boolean;
+    overlayPosition?: string;
+    barColor?: string;
+    textColor?: string;
+    nameTextStyling?: any;
+    imageSource?: string;
+    roundedImage?: boolean;
+    imageStyle?: any;
+}
+export type MiniAudioType = (options: MiniAudioOptions) => HTMLElement;
+/**
+ * MiniAudio component is a standalone Angular component that displays a mini audio player with waveform animations.
+ * It supports various customizations including visibility, styles, text, and image properties.
+ * The component can be dragged around the screen.
+ *
+ * @selector app-mini-audio
+ * @standalone true
+ * @imports CommonModule
+ *
+ * @template
+ * The template includes a modal container with a card that displays an optional background image, name text, and waveform animations.
+ *
+ * @styles
+ * The styles define the appearance of the modal container, card, background image, name text, overlay, waveform, and bars.
+ *
+ * @class MiniAudio
+ * @implements OnInit, OnDestroy
+ *
+ * @property {boolean} visible - Determines if the component is visible.
+ * @property {any} customStyle - Custom styles for the component.
+ * @property {string} name - The name text displayed in the component.
+ * @property {boolean} showWaveform - Flag to show or hide the waveform animations.
+ * @property {string} overlayPosition - Position of the overlay.
+ * @property {string} barColor - Color of the waveform bars.
+ * @property {string} textColor - Color of the name text.
+ * @property {any} nameTextStyling - Additional styles for the name text.
+ * @property {string} imageSource - Source URL for the background image.
+ * @property {boolean} roundedImage - Flag to apply rounded corners to the background image.
+ * @property {any} imageStyle - Custom styles for the background image.
+ *
+ * @constructor
+ * The constructor allows optional dependency injection for all input properties.
+ *
+ * @method ngOnInit
+ * Initializes the component and starts waveform animations if enabled.
+ *
+ * @method ngOnDestroy
+ * Cleans up intervals to prevent memory leaks.
+ *
+ * @method animateWaveform
+ * Starts the waveform animations by setting intervals for each bar.
+ *
+ * @method animateBar
+ * Animates a single bar in the waveform.
+ *
+ * @method resetWaveform
+ * Resets the waveform animations to their initial state.
+ *
+ * @method clearIntervals
+ * Clears all animation intervals.
+ *
+ * @method getAnimationDuration
+ * Returns the animation duration for a given bar index.
+ *
+ * @method getImageStyle
+ * Returns the combined styles for the background image, including optional rounded corners.
+ *
+ * @method combineStyles
+ * Combines base styles with additional styles.
+ *
+ * @method handleMouseDown
+ * Handles the mousedown event to start dragging the component.
+ *
+ * @method handleMouseMove
+ * Handles the mousemove event to update the component's position while dragging.
+ *
+ * @method handleMouseUp
+ * Handles the mouseup event to stop dragging the component.
+ *
+ * @method getOverlayPosition
+ * Returns the position styles for the overlay.
+ */
+export declare class MiniAudio implements OnInit, OnDestroy {
+    visible: boolean;
+    customStyle: any;
+    name: string;
+    showWaveform: boolean;
+    overlayPosition: string;
+    barColor: string;
+    textColor: string;
+    nameTextStyling: any;
+    imageSource: string;
+    roundedImage: boolean;
+    imageStyle: any;
+    waveformAnimations: number[];
+    intervals: NodeJS.Timeout[];
+    position: {
+        x: number;
+        y: number;
+    };
+    isDragging: boolean;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
+    constructor(injectedVisible: boolean, injectedCustomStyle: any, injectedName: string, injectedShowWaveform: boolean, injectedOverlayPosition: string, injectedBarColor: string, injectedTextColor: string, injectedNameTextStyling: any, injectedImageSource: string, injectedRoundedImage: boolean, injectedImageStyle: any);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    animateWaveform(): void;
+    animateBar(index: number): void;
+    resetWaveform(): void;
+    clearIntervals(): void;
+    getAnimationDuration(index: number): number;
+    getImageStyle(): any;
+    combineStyles(baseStyle: any, additionalStyles: any): any;
+    handleMouseDown(event: MouseEvent): void;
+    handleMouseMove(event: MouseEvent): void;
+    handleMouseUp(): void;
+    getOverlayPosition(position: string): import("../../../@types/types").OverlayPositionStyle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MiniAudio, [{ optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MiniAudio, "app-mini-audio", never, { "visible": { "alias": "visible"; "required": false; }; "customStyle": { "alias": "customStyle"; "required": false; }; "name": { "alias": "name"; "required": false; }; "showWaveform": { "alias": "showWaveform"; "required": false; }; "overlayPosition": { "alias": "overlayPosition"; "required": false; }; "barColor": { "alias": "barColor"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "nameTextStyling": { "alias": "nameTextStyling"; "required": false; }; "imageSource": { "alias": "imageSource"; "required": false; }; "roundedImage": { "alias": "roundedImage"; "required": false; }; "imageStyle": { "alias": "imageStyle"; "required": false; }; }, {}, never, never, true, never>;
+}