MediaSFU Angular
    Preparing search index...

    Class EventSettingsModal

    EventSettingsModal - Modal for configuring room-wide event permissions (host only)

    Provides host/admin controls for managing participant permissions: audio, video, screenshare, and chat. Settings are saved to the room and enforced for all participants.

    Supports three levels of customization:

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

    Key Features:

    • Audio permission control (allow/disallow, allow but muted)
    • Video permission control (allow/disallow, allow but off)
    • Screenshare permission control (allow/disallow, allow certain roles)
    • Chat permission control (allow/disallow, allow only host)
    • Socket-based setting persistence

    Basic Usage:

    <app-event-settings-modal
      [isEventSettingsModalVisible]="showEventSettings"
      [audioSetting]="currentAudioSetting"
      [videoSetting]="currentVideoSetting"
      [screenshareSetting]="currentScreenshareSetting"
      [chatSetting]="currentChatSetting"
      [roomName]="currentRoom"
      [socket]="socketInstance"
      [updateAudioSetting]="setAudioSetting"
      [updateVideoSetting]="setVideoSetting"
      [updateScreenshareSetting]="setScreenshareSetting"
      [updateChatSetting]="setChatSetting"
      [onEventSettingsClose]="closeEventSettings">
    </app-event-settings-modal>

    Style Customization:

    <app-event-settings-modal
      [isEventSettingsModalVisible]="showEventSettings"
      [audioSetting]="currentAudioSetting"
      [videoSetting]="currentVideoSetting"
      [screenshareSetting]="currentScreenshareSetting"
      [chatSetting]="currentChatSetting"
      [roomName]="currentRoom"
      [socket]="socketInstance"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.8)'
      }"
      [contentStyle]="{
        backgroundColor: '#1e1e1e',
        borderRadius: '12px',
        padding: '25px'
      }"
      [backgroundColor]="'#2c3e50'"
      [position]="'center'"
      [onEventSettingsClose]="closeEventSettings">
    </app-event-settings-modal>

    Custom Template Override:

    <app-event-settings-modal
      [isEventSettingsModalVisible]="showEventSettings"
      [customTemplate]="customSettingsTemplate"
      [onEventSettingsClose]="closeEventSettings">
    </app-event-settings-modal>

    <ng-template #customSettingsTemplate let-audioSetting="audioSetting" let-videoSetting="videoSetting" let-onSave="onSave">
      <div class="custom-settings">
        <h3>Room Permissions</h3>
        <label>
          Audio:
          <select [(ngModel)]="audioSetting">
            <option value="allow">Allow</option>
            <option value="disallow">Disallow</option>
          </select>
        </label>
        <label>
          Video:
          <select [(ngModel)]="videoSetting">
            <option value="allow">Allow</option>
            <option value="disallow">Disallow</option>
          </select>
        </label>
        <button (click)="onSave()">Save Settings</button>
      </div>
    </ng-template>

    app-event-settings-modal

    true

    CommonModule, FontAwesomeModule, FormsModule

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

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

    onModifyEventSettings - Callback to save modified settings. Default: modifySettingsService.modifySettings

    position - Modal position on screen ('topLeft', 'topRight', 'bottomLeft', 'bottomRight'). Default: 'topRight'

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

    audioSetting - Current audio permission setting. Default: ''

    videoSetting - Current video permission setting. Default: ''

    screenshareSetting - Current screenshare permission setting. Default: ''

    chatSetting - Current chat permission setting. Default: ''

    updateAudioSetting - Function to update audio setting state. Default: () => {}

    updateVideoSetting - Function to update video setting state. Default: () => {}

    updateScreenshareSetting - Function to update screenshare setting state. Default: () => {}

    updateChatSetting - Function to update chat setting state. Default: () => {}

    updateIsSettingsModalVisible - Function to update modal visibility. Default: () => {}

    roomName - Name of the room/session. Default: ''

    socket - Socket.io client instance for real-time communication. Default: undefined

    showAlert - Optional alert function for displaying success/error messages. Default: undefined

    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 sets up default modify settings handler

    ngOnChanges - Updates internal setting states when modal visibility changes

    updateStatesFromParameters - Synchronizes internal states with input props

    handleSaveSettings - Saves modified settings via socket and closes modal

    closeModal - Closes the modal via onEventSettingsClose callback

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    getModalContentStyle - Returns computed content styles with positioning

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges updateStatesFromParameters getModalContentStyle handleSaveSettings closeModal getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isEventSettingsModalVisible onEventSettingsClose onModifyEventSettings position backgroundColor audioSetting videoSetting screenshareSetting chatSetting updateAudioSetting updateVideoSetting updateScreenshareSetting updateChatSetting updateIsSettingsModalVisible roomName socket showAlert? overlayStyle? contentStyle? customTemplate? audioState videoState screenshareState chatState faTimes

    Constructors

    Methods

    • Returns {
          backgroundColor: string;
          borderRadius: string;
          padding: string;
          width: string;
          maxHeight: string;
          overflowY: string;
          top: string;
          bottom: string;
          left: string;
          right: string;
      }

    Properties

    isEventSettingsModalVisible: boolean = false
    onEventSettingsClose: () => void
    onModifyEventSettings: (options: ModifySettingsOptions) => Promise<void>
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    audioSetting: string = ''
    videoSetting: string = ''
    screenshareSetting: string = ''
    chatSetting: string = ''
    updateAudioSetting: (setting: string) => void
    updateVideoSetting: (setting: string) => void
    updateScreenshareSetting: (setting: string) => void
    updateChatSetting: (setting: string) => void
    updateIsSettingsModalVisible: (isVisible: boolean) => void
    roomName: string = ''
    socket: Socket = ...
    showAlert?: ShowAlert
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    audioState: string
    videoState: string
    screenshareState: string
    chatState: string
    faTimes: IconDefinition = faTimes

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties