MediaSFU Angular
    Preparing search index...

    Class ShareEventModal

    ShareEventModal - Modal for sharing room/event access details

    Displays a modal with meeting ID, passcode, and share options for inviting participants. Includes social sharing buttons and copy-to-clipboard functionality.

    Supports three levels of customization:

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

    Key Features:

    • Meeting ID display with copy functionality
    • Admin passcode display (for hosts)
    • Social media share buttons (optional)
    • Support for custom/local server links
    • Event type-specific sharing

    Basic Usage:

    <app-share-event-modal
      [isShareEventModalVisible]="showShareModal"
      [roomName]="currentRoom"
      [adminPasscode]="hostPasscode"
      [islevel]="'0'"
      [eventType]="'webinar'"
      [shareButtons]="true"
      [onShareEventClose]="closeShareModal">
    </app-share-event-modal>

    Style Customization:

    <app-share-event-modal
      [isShareEventModalVisible]="showShareModal"
      [roomName]="currentRoom"
      [adminPasscode]="hostPasscode"
      [eventType]="'conference'"
      [overlayStyle]="{
        backgroundColor: 'rgba(0, 0, 0, 0.75)'
      }"
      [contentStyle]="{
        backgroundColor: '#ffffff',
        borderRadius: '16px',
        padding: '30px',
        maxWidth: '500px'
      }"
      [position]="'center'"
      [shareButtons]="true"
      [onShareEventClose]="closeShareModal">
    </app-share-event-modal>

    Custom Template Override:

    <app-share-event-modal
      [isShareEventModalVisible]="showShareModal"
      [customTemplate]="customShareTemplate"
      [onShareEventClose]="closeShareModal">
    </app-share-event-modal>

    <ng-template #customShareTemplate let-roomName="roomName" let-adminPasscode="adminPasscode">
      <div class="custom-share-dialog">
        <h3>Invite Participants</h3>
        <div class="share-item">
          <label>Meeting ID:</label>
          <code>{{ roomName }}</code>
          <button (click)="copyToClipboard(roomName)">Copy</button>
        </div>
        <div class="share-item" *ngIf="adminPasscode">
          <label>Host Code:</label>
          <code>{{ adminPasscode }}</code>
          <button (click)="copyToClipboard(adminPasscode)">Copy</button>
        </div>
      </div>
    </ng-template>

    app-share-event-modal

    true

    CommonModule, FontAwesomeModule, MeetingIdComponent, MeetingPasscodeComponent, ShareButtonsComponent

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

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

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

    shareButtons - Whether to display social media share buttons. Default: true

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

    roomName - Room/meeting ID to be shared. Default: ''

    adminPasscode - Admin/host passcode (shown only to hosts). Default: undefined

    islevel - User level/role ('0' for host, '2' for participant). Default: '2'

    eventType - Type of event ('chat', 'broadcast', 'webinar', 'conference'). Default: 'webinar'

    localLink - Custom server link for community edition deployments. 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

    handleClose - Closes the modal by invoking onShareEventClose callback

    getCombinedOverlayStyle - Merges default and custom overlay styles

    getCombinedContentStyle - Merges default and custom content styles

    modalContainerStyle - Returns computed overlay styles

    modalContentStyle - Returns computed content styles

    Index

    Accessors

    modalContainerStyle modalContentStyle

    Constructors

    constructor

    Methods

    handleClose getCombinedOverlayStyle getCombinedContentStyle

    Properties

    backgroundColor isShareEventModalVisible onShareEventClose roomName adminPasscode islevel position shareButtons eventType localLink overlayStyle? contentStyle? customTemplate? faTimes

    Accessors

    • get modalContainerStyle(): {
          position: string;
          top: number;
          left: number;
          width: string;
          height: string;
          backgroundColor: string;
          display: string;
          zIndex: number;
      }

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

    • get modalContentStyle(): {
          position: string;
          backgroundColor: string;
          borderRadius: string;
          padding: string;
          width: string;
          maxHeight: string;
          overflowY: string;
          top: string;
          bottom: string;
          left: string;
          right: string;
      }

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

    Constructors

    Methods

    Properties

    backgroundColor: string = 'rgba(255, 255, 255, 0.25)'
    isShareEventModalVisible: boolean = false
    onShareEventClose: () => void
    roomName: string
    adminPasscode: string
    islevel: string
    position: string = 'topRight'
    shareButtons: boolean = true
    eventType: EventType
    localLink: string = ''
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>
    faTimes: IconDefinition = faTimes

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties