MediaSFU Angular
    Preparing search index...

    Class CoHostModal

    CoHostModal - Modal for designating and configuring co-host permissions

    Allows host to select a co-host and configure their specific permissions/responsibilities. Co-hosts can assist with managing the session with delegated authority.

    Supports three levels of customization:

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

    Key Features:

    • Select co-host from participant list
    • Configure co-host responsibilities (manage participants, media, chat, etc.)
    • Save co-host settings to room
    • Remove co-host designation
    • Socket-based permission sync

    app-co-host-modal

    true

    CommonModule, FontAwesomeModule, FormsModule

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

    currentCohost - Name/ID of current co-host. Default: 'No coHost'

    participants - Array of participant objects. Default: []

    coHostResponsibility - Array of co-host responsibility objects with toggles. Default: []

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

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

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

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

    updateCoHostResponsibility - Function to update co-host responsibilities. Default: () => {}

    updateCoHost - Function to update co-host selection. Default: () => {}

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

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

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

    onModifyCoHost - Callback to save co-host settings. Default: modifyCoHostSettingsService.modifyCoHostSettings

    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 default co-host modification handler

    ngOnChanges - Updates responsibilities and modal width when inputs change

    initializeResponsibilities - Sets up initial responsibility toggles

    handleToggleSwitch - Toggles specific co-host responsibility

    handleSave - Saves co-host selection and responsibilities

    handleClose - Closes modal via onCoHostClose callback

    calculateModalWidth - Dynamically sets modal width based on screen size

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    modalContainerStyle - Returns computed overlay styles

    modalContentStyle - Returns computed content styles

    filteredParticipants - Returns participants excluding current co-host

    Implements

    • OnChanges
    • OnInit
    Index

    Accessors

    filteredParticipants

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges initializeResponsibilities handleToggleSwitch handleSave handleClose calculateModalWidth modalContainerStyle modalContentStyle getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isCoHostModalVisible currentCohost participants coHostResponsibility position backgroundColor roomName showAlert updateCoHostResponsibility updateCoHost updateIsCoHostModalVisible socket onCoHostClose onModifyCoHost overlayStyle? contentStyle? customTemplate? faTimes selectedCohost CoHostResponsibilityCopy CoHostResponsibilityCopyAlt responsibilities responsibilityKeys modalWidth

    Accessors

    Constructors

    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

    • Returns {
          display: string;
          position: string;
          top: string;
          left: string;
          width: string;
          height: string;
          backgroundColor: string;
          zIndex: string;
      }

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

    Properties

    isCoHostModalVisible: boolean = false
    currentCohost: string = 'No coHost'
    participants: Participant[] = []
    coHostResponsibility: CoHostResponsibility[] = []
    position: string = 'topRight'
    backgroundColor: string = '#83c0e9'
    roomName: string = ''
    showAlert: ShowAlert = ...
    updateCoHostResponsibility: (
        coHostResponsibility: CoHostResponsibility[],
    ) => void = ...
    updateCoHost: (coHost: string) => void = ...
    updateIsCoHostModalVisible: (isCoHostModalVisible: boolean) => void = ...
    socket: Socket = ...
    onCoHostClose: () => void
    onModifyCoHost: (settings: ModifyCoHostSettingsOptions) => void
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    faTimes: IconDefinition = faTimes
    selectedCohost: string = ...
    CoHostResponsibilityCopy: any[] = []
    CoHostResponsibilityCopyAlt: any[] = []
    responsibilities: { [key: string]: boolean } = {}
    responsibilityKeys: { manageKey: string; dedicateKey: string }[] = []
    modalWidth: number

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties