MediaSFU Angular
    Preparing search index...

    Class MiniAudio

    MiniAudio component is a draggable, customizable mini audio player with optional waveform animations.

    app-mini-audio

    true

    CommonModule

    <div *ngIf="visible" class="modal-container" [ngStyle]="{ transform: 'translate(' + position.x + 'px, ' + position.y + 'px)' }" (mousedown)="handleMouseDown($event)">
      <div class="card" [ngStyle]="customStyle">
        <ng-container *ngIf="imageSource">
          <img [src]="imageSource" [ngStyle]="getImageStyle()" alt="Background" class="background-image" />
        </ng-container>
        <div class="name-text" [ngStyle]="combineStyles({ color: textColor }, nameTextStyling)">
          {{ name }}
        </div>
        <div [ngStyle]="getOverlayPosition(overlayPosition)" class="overlay-web">
          <div class="waveform-web">
            <div *ngFor="let animation of waveformAnimations; let i = index"
                 [ngStyle]="{ height: animation == 0 ? '1px' : '30px', width: '10px', backgroundColor: barColor }"
                 class="bar">
            </div>
          </div>
        </div>
      </div>
    </div>
    • .modal-container: Positioning and drag area.
    • .card: The main container styling.
    • .background-image: Styling for an optional background image.
    • .name-text: Styling for name text with customizable color.
    • .overlay-web and .waveform-web: Contains and styles the waveform animation bars.
    • visible (boolean): Show/hide the component.
    • customStyle (object): Custom styles for the component.
    • name (string): Text to display as the name.
    • showWaveform (boolean): Show/hide waveform animations.
    • overlayPosition (string): Position of the overlay.
    • barColor (string): Color of waveform bars.
    • textColor (string): Color of name text.
    • nameTextStyling (object): Additional styles for the name text.
    • imageSource (string): URL of the background image.
    • roundedImage (boolean): If true, applies rounded corners to the image.
    • imageStyle (object): Custom styles for the image.
    • ngOnInit(): Starts waveform animations if showWaveform is true.
    • ngOnDestroy(): Clears waveform animation intervals.
    • animateWaveform(): Sets intervals for each bar's animation.
    • handleMouseDown(event: MouseEvent): Starts dragging on mousedown.
    • handleMouseMove(event: MouseEvent): Updates position during drag.
    • handleMouseUp(): Ends dragging on mouseup.
    <app-mini-audio [visible]="true" [name]="'Audio Player'" [barColor]="'blue'" [imageSource]="'/path/to/image.png'"></app-mini-audio>

    Implements

    • OnInit
    • OnDestroy
    • OnChanges
    Index

    Accessors

    hasRenderableImage fallbackInitials

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges ngOnDestroy syncWaveformState animateWaveform animateBar resetWaveform clearIntervals clearTimeouts getAnimationDuration getImageStyle handleImageError combineStyles handleMouseDown handleMouseMove handleMouseUp getOverlayPosition

    Properties

    visible customStyle name showWaveform overlayPosition barColor textColor nameTextStyling imageSource roundedImage imageStyle waveformAnimations intervals timeouts position isDragging dragOffset imageLoadFailed

    Accessors

    Constructors

    • Parameters

      • injectedVisible: boolean
      • injectedCustomStyle: any
      • injectedName: string
      • injectedShowWaveform: boolean
      • injectedOverlayPosition: string
      • injectedBarColor: string
      • injectedTextColor: string
      • injectedNameTextStyling: any
      • injectedImageSource: string
      • injectedRoundedImage: boolean
      • injectedImageStyle: any

      Returns MiniAudio

    Methods

    • 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

    • 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

    Properties

    visible: boolean = true
    customStyle: any
    name: string = ''
    showWaveform: boolean = false
    overlayPosition: string = ''
    barColor: string = 'red'
    textColor: string = 'white'
    nameTextStyling: any = {}
    imageSource: string = ''
    roundedImage: boolean = false
    imageStyle: any = {}
    waveformAnimations: number[] = ...
    intervals: Timeout[] = []
    timeouts: Timeout[] = []
    position: { x: number; y: number } = ...
    isDragging: boolean = false
    dragOffset: { x: number; y: number } = ...
    imageLoadFailed: boolean = false

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties