MessagesModal

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

app-messages-modal

./messages-modal.component.html

./messages-modal.component.css

true

[CommonModule, FontAwesomeModule, MessagePanel]

<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

  • 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

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

  • 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
  • Returns {
        marginLeft: string;
        padding: string;
        marginRight: string;
        paddingRight: string;
    }

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

Properties

isMessagesModalVisible: boolean = false
onSendMessagePress: ((options: SendMessageOptions) => Promise<void>)
messages: Message[] = []
position: string = 'topRight'
backgroundColor: string = '#f5f5f5'
activeTabBackgroundColor: string = '#2b7ce5'
eventType: EventType = 'webinar'
member: string = ''
islevel: string = ''
coHostResponsibility: CoHostResponsibility[] = []
coHost: string = ''
startDirectMessage: boolean = false
directMessageDetails: null | Participant = null
showAlert?: ShowAlert
roomName: string = ''
socket: Socket<DefaultEventsMap, DefaultEventsMap> = ...
chatSetting: string = ''
faTimes: IconDefinition = faTimes
directMessages: any[] = []
groupMessages: any[] = []
activeTab: string = 'group'
focusedInput: boolean = false
reRender: boolean = false
modalContainerStyle: any
modalContentStyle: any