MediaSFU Angular
    Preparing search index...

    Class ControlButtonsAltComponent

    ControlButtonsAltComponent provides configurable button controls with custom icons, colors, and positioning options.

    app-control-buttons-alt-component

    true

    CommonModule, FontAwesomeModule

    • buttons (AltButton[]): Array of button configurations with options for icon, color, state, and actions.
    • position ('left' | 'right' | 'middle'): Horizontal alignment of buttons. Default is 'left'.
    • location ('top' | 'bottom' | 'center'): Vertical alignment of buttons. Default is 'top'.
    • direction ('horizontal' | 'vertical'): Layout direction for buttons. Default is 'horizontal'.
    • buttonsContainerStyle (Partial): Custom styles for the container of buttons.
    • showAspect (boolean): Controls the visibility of the button container. Default is false.
    • getAlignmentStyle(): Returns alignment styles based on position, location, and direction.
    • getContainerStyle(): Combines container styles, alignment styles, and visibility settings.
    • getButtonStyle(button: AltButton): Applies style to each button based on its properties.
    • getTextStyle(button: AltButton): Sets text styles for button labels.
    • isCustomComponent(comp): Type guard to identify custom component objects.
    • isFunctionComponent(comp): Type guard to identify function components.
    <app-control-buttons-alt-component
     [buttons]="[
       { name: 'Pause', icon: faPause, onPress: pauseAction, activeColor: 'blue' },
       { name: 'Play', icon: faPlay, onPress: playAction, color: 'green' }
     ]"
    [position]="'middle'"
    [location]="'bottom'"
    [direction]="'vertical'"
    [buttonsContainerStyle]="{ backgroundColor: '#333' }"
    [showAspect]="true">
    </app-control-buttons-alt-component>
    Index

    Constructors

    constructor

    Methods

    getAlignmentStyle getContainerStyle getButtonStyle getTextStyle isCustomComponent isFunctionComponent

    Properties

    buttons position location direction buttonsContainerStyle showAspect styles

    Constructors

    Methods

    • Parameters

      Returns {
          backgroundColor: string;
          display: string;
          alignItems: string;
          padding: string;
          borderRadius: string;
          marginLeft: string;
          marginRight: string;
          cursor: string;
          flexDirection?: string;
      }

    Properties

    buttons: AltButton[] = []
    position: "left" | "right" | "middle" = 'left'
    location: "bottom" | "top" | "center" = 'top'
    direction: "horizontal" | "vertical" = 'horizontal'
    buttonsContainerStyle: any = {}
    showAspect: boolean = false
    styles: {
        container: { marginTop: string; marginBottom: string; zIndex: number };
        buttonContainer: {
            display: string;
            alignItems: string;
            padding: string;
            borderRadius: string;
            marginLeft: string;
            marginRight: string;
            cursor: string;
        };
        verticalButton: { flexDirection: string };
        buttonText: { fontSize: string; marginTop: string };
    } = ...

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties