Class MessagesModal

Component

MessagesModal

Description

A modal component for managing chat messages in MediaSFU applications, supporting both group and direct messaging, and providing a customizable user interface.

Selector

app-messages-modal

Template Url

./messages-modal.component.html

Style Urls

./messages-modal.component.css

Standalone

true

Imports

[CommonModule, FontAwesomeModule, MessagePanel]

Example

<app-messages-modal
  [isMessagesModalVisible]="true"
  [onMessagesClose]="closeMessages"
  [messages]="chatMessages"
  [position]="'bottomRight'"
  [backgroundColor]="'#f5f5f5'"
  [eventType]="'webinar'"
  [member]="'JohnDoe'"
  [islevel]="'2'"
  [coHostResponsibility]="coHostRoles"
  [coHost]="'coHost123'"
  [startDirectMessage]="false"
  [directMessageDetails]="selectedParticipant"
  [updateStartDirectMessage]="updateDirectMessageStart"
  [updateDirectMessageDetails]="updateParticipantDetails"
  [showAlert]="displayAlert"
  [roomName]="'RoomName'"
  [socket]="chatSocket"
  [chatSetting]="'enabled'"
></app-messages-modal>

Implements

  • OnInit
  • OnChanges

Accessors

styles

Constructors

constructor

Methods

onMessagesClose updateStartDirectMessage updateDirectMessageDetails ngOnInit ngOnChanges switchToDirectTab switchToGroupTab populateMessages closeMessagesModal updateModalStyles getTabStyle getButtonCloseStyle

Properties

isMessagesModalVisible onSendMessagePress messages position backgroundColor activeTabBackgroundColor eventType member islevel coHostResponsibility coHost startDirectMessage directMessageDetails showAlert? roomName socket chatSetting faTimes directMessages groupMessages activeTab focusedInput reRender modalContainerStyle modalContentStyle

Accessors

styles

  • get styles(): {
        modalContent: {
            borderRadius: string;
            padding: string;
        };
        modalBody: {
            marginTop: string;
        };
        tabText: {
            paddingRight: string;
            paddingLeft: string;
            paddingTop: string;
            paddingBottom: string;
            fontWeight: string;
            marginRight: string;
            marginLeft: string;
        };
        activeTabText: {
            color: string;
            backgroundColor: string;
            borderRadius: string;
        };
        separator: {
            height: string;
            backgroundColor: string;
            marginVertical: string;
        };
        btnCloseMessages: {
            padding: string;
            marginRight: string;
            paddingRight: string;
        };
        icon: {
            fontSize: string;
            color: string;
        };
    }

  • Returns {
        modalContent: {
            borderRadius: string;
            padding: string;
        };
        modalBody: {
            marginTop: string;
        };
        tabText: {
            paddingRight: string;
            paddingLeft: string;
            paddingTop: string;
            paddingBottom: string;
            fontWeight: string;
            marginRight: string;
            marginLeft: string;
        };
        activeTabText: {
            color: string;
            backgroundColor: string;
            borderRadius: string;
        };
        separator: {
            height: string;
            backgroundColor: string;
            marginVertical: string;
        };
        btnCloseMessages: {
            padding: string;
            marginRight: string;
            paddingRight: string;
        };
        icon: {
            fontSize: string;
            color: string;
        };
    }

    • modalContent: {
          borderRadius: string;
          padding: string;
      }
      • borderRadius: string
      • padding: string
    • modalBody: {
          marginTop: string;
      }
      • marginTop: string
    • tabText: {
          paddingRight: string;
          paddingLeft: string;
          paddingTop: string;
          paddingBottom: string;
          fontWeight: string;
          marginRight: string;
          marginLeft: string;
      }
      • paddingRight: string
      • paddingLeft: string
      • paddingTop: string
      • paddingBottom: string
      • fontWeight: string
      • marginRight: string
      • marginLeft: string
    • activeTabText: {
          color: string;
          backgroundColor: string;
          borderRadius: string;
      }
      • color: string
      • backgroundColor: string
      • borderRadius: string
    • separator: {
          height: string;
          backgroundColor: string;
          marginVertical: string;
      }
      • height: string
      • backgroundColor: string
      • marginVertical: string
    • btnCloseMessages: {
          padding: string;
          marginRight: string;
          paddingRight: string;
      }
      • padding: string
      • marginRight: string
      • paddingRight: string
    • icon: {
          fontSize: string;
          color: string;
      }
      • fontSize: string
      • color: string

Constructors

constructor

Methods

onMessagesClose

updateStartDirectMessage

updateDirectMessageDetails

ngOnInit

  • ngOnInit(): void

  • 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

ngOnChanges

  • ngOnChanges(changes): 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

switchToDirectTab

switchToGroupTab

populateMessages

closeMessagesModal

updateModalStyles

getTabStyle

  • getTabStyle(tab): {
        paddingRight: string;
        paddingLeft: string;
        paddingTop: string;
        paddingBottom: string;
        fontWeight: string;
        marginRight: string;
        marginLeft: string;
        color?: string;
        backgroundColor?: string;
        borderRadius?: string;
    }

  • Parameters

    • tab: string

    Returns {
        paddingRight: string;
        paddingLeft: string;
        paddingTop: string;
        paddingBottom: string;
        fontWeight: string;
        marginRight: string;
        marginLeft: string;
        color?: string;
        backgroundColor?: string;
        borderRadius?: string;
    }

    • paddingRight: string
    • paddingLeft: string
    • paddingTop: string
    • paddingBottom: string
    • fontWeight: string
    • marginRight: string
    • marginLeft: string
    • Optionalcolor?: string
    • OptionalbackgroundColor?: string
    • OptionalborderRadius?: string

getButtonCloseStyle

  • getButtonCloseStyle(): {
        marginLeft: string;
        padding: string;
        marginRight: string;
        paddingRight: string;
    }

  • Returns {
        marginLeft: string;
        padding: string;
        marginRight: string;
        paddingRight: string;
    }

    • marginLeft: string
    • padding: string
    • marginRight: string
    • paddingRight: string

Properties

isMessagesModalVisible

isMessagesModalVisible: boolean = false

onSendMessagePress

onSendMessagePress: ((options: SendMessageOptions) => Promise<void>)

messages

messages: Message[] = []

position

position: string = 'topRight'

backgroundColor

backgroundColor: string = '#f5f5f5'

activeTabBackgroundColor

activeTabBackgroundColor: string = '#2b7ce5'

eventType

eventType: EventType = 'webinar'

member

member: string = ''

islevel

islevel: string = ''

coHostResponsibility

coHostResponsibility: CoHostResponsibility[] = []

coHost

coHost: string = ''

startDirectMessage

startDirectMessage: boolean = false

directMessageDetails

directMessageDetails: null | Participant = null

OptionalshowAlert

showAlert?: ShowAlert

roomName

roomName: string = ''

socket

socket: Socket<DefaultEventsMap, DefaultEventsMap> = ...

chatSetting

chatSetting: string = ''

faTimes

faTimes: IconDefinition = faTimes

directMessages

directMessages: any[] = []

groupMessages

groupMessages: any[] = []

activeTab

activeTab: string = 'group'

focusedInput

focusedInput: boolean = false

reRender

reRender: boolean = false

modalContainerStyle

modalContainerStyle: any

modalContentStyle

modalContentStyle: any

Settings

Member Visibility

On This Page

Accessors
Constructors
Methods
Properties