MediaSFU Angular
    Preparing search index...

    Class DisplaySettingsModal

    DisplaySettingsModal - Modal for configuring video grid layout and display preferences

    Provides controls for customizing the meeting video display layout and behavior. Includes display type (video, media, all), auto-wave, force full display, and video optimization settings.

    Supports three levels of customization:

    1. Basic Usage: Use default modal UI with layout toggles and checkboxes
    2. Style Customization: Override modal appearance with overlayStyle and contentStyle
    3. Full Override: Provide a custom template via customTemplate for complete control

    Key Features:

    • Display type selection (video, media, all)
    • Auto-wave toggle (show waveform on audio detection)
    • Force full display toggle
    • Video optimization toggle
    • Real-time layout updates

    Basic Usage:

    <app-display-settings-modal
      [isDisplaySettingsModalVisible]="showDisplaySettings"
      [parameters]="displayParams"
      [onModifyDisplaySettings]="saveDisplaySettings"
      [onDisplaySettingsClose]="closeDisplaySettings">
    </app-display-settings-modal>

    Style Customization:

    <app-display-settings-modal
      [isDisplaySettingsModalVisible]="showDisplaySettings"
      [parameters]="displayParams"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.7)'
      }"
      [contentStyle]="{
        backgroundColor: '#ffffff',
        borderRadius: '12px',
        padding: '25px',
        boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
      }"
      [position]="'center'"
      [backgroundColor]="'#f0f0f0'"
      [onDisplaySettingsClose]="closeDisplaySettings">
    </app-display-settings-modal>

    Custom Template Override:

    <app-display-settings-modal
      [isDisplaySettingsModalVisible]="showDisplaySettings"
      [customTemplate]="customDisplayTemplate"
      [onDisplaySettingsClose]="closeDisplaySettings">
    </app-display-settings-modal>

    <ng-template #customDisplayTemplate let-displayType="meetingDisplayType" let-autoWave="autoWave" let-onSave="onSave">
      <div class="custom-display-settings">
        <h3>Layout Settings</h3>
        <label>
          Display Type:
          <select [(ngModel)]="displayType">
            <option value="video">Video Only</option>
            <option value="media">Media Only</option>
            <option value="all">All Participants</option>
          </select>
        </label>
        <label>
          <input type="checkbox" [(ngModel)]="autoWave">
          Show audio waveforms
        </label>
        <button (click)="onSave()">Apply Settings</button>
      </div>
    </ng-template>

    app-display-settings-modal

    true

    CommonModule, FontAwesomeModule, FormsModule

    isDisplaySettingsModalVisible - Whether the modal is currently visible. Default: false

    onDisplaySettingsClose - Callback function to close the modal. Default: () => {}

    onModifyDisplaySettings - Callback to save modified display settings. Default: modifyDisplaySettingsService.modifyDisplaySettings

    parameters - Object containing current display settings (meetingDisplayType, autoWave, forceFullDisplay, meetingVideoOptimized). Default: {}

    position - Modal position on screen ('topRight', 'center', etc.). Default: 'topRight'

    backgroundColor - Background color of the modal content. Default: '#83c0e9'

    overlayStyle - Custom CSS styles for the modal overlay backdrop. Default: undefined

    contentStyle - Custom CSS styles for the modal content container. Default: undefined

    customTemplate - Custom TemplateRef to completely replace default modal template. Default: undefined

    ngOnInit - Initializes component and synchronizes state with parameters

    handleSaveSettings - Saves modified display settings and closes modal

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    Index

    Constructors

    constructor

    Methods

    ngOnInit handleSaveSettings getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isDisplaySettingsModalVisible onDisplaySettingsClose onModifyDisplaySettings parameters position backgroundColor overlayStyle? contentStyle? customTemplate? faTimes meetingDisplayTypeState autoWaveState forceFullDisplayState showSubtitlesOnCardsState meetingVideoOptimizedState

    Constructors

    Methods

    Properties

    isDisplaySettingsModalVisible: boolean = false
    onDisplaySettingsClose: () => void
    onModifyDisplaySettings: (params: any) => void
    parameters: DisplaySettingsModalParameters
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    faTimes: IconDefinition = faTimes
    meetingDisplayTypeState: string
    autoWaveState: boolean = false
    forceFullDisplayState: boolean = false
    showSubtitlesOnCardsState: boolean = true
    meetingVideoOptimizedState: boolean = false

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties