next-ucap-messenger/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video-conference.component.html

<div class="event-main bg-accent-dark">
  <div class="event-header">
    <ng-container
      *ngIf="!!message.sentMessageJson && !!message.sentMessageJson.contents"
    >
      <ng-container [ngSwitch]="message.sentMessageJson.contents">
        <ng-container *ngSwitchCase="VideoConferenceContentsType.Now">
          {{ 'conference.videoConferenceTypeNow' | translate }}
        </ng-container>
        <ng-container *ngSwitchCase="VideoConferenceContentsType.New">
          {{ 'conference.videoConferenceTypeNew' | translate }}
        </ng-container>
        <ng-container *ngSwitchCase="VideoConferenceContentsType.Update">
          {{ 'conference.videoConferenceTypeUpdate' | translate }}
        </ng-container>
        <ng-container *ngSwitchCase="VideoConferenceContentsType.Delete">
          {{ 'conference.videoConferenceTypeDelete' | translate }}
        </ng-container>
      </ng-container>
    </ng-container>
  </div>
  <ul class="event-info">
    <li class="event-date bg-accent-brightest">
      <label class="text-accent-darkest">{{
        'conference.videoConferenceRegister' | translate
      }}</label
      ><span>{{ message.sentMessageJson.register }}</span>
    </li>
    <li class="event-time bg-accent-brightest">
      <label class="text-accent-darkest">{{
        'conference.videoConferenceAttendee' | translate
      }}</label
      ><span>{{ message.sentMessageJson.attendee }}</span>
    </li>
    <li class="event-time bg-accent-brightest">
      <label class="text-accent-darkest">{{
        'conference.videoConferenceDate' | translate
      }}</label
      ><span>{{
        message.sentMessageJson.startDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
      }}</span>
    </li>
    <li class="event-content">
      {{ message.sentMessageJson.title }}
    </li>
  </ul>

  <div class="btn-box">
    <ul>
      <li>
        <button mat-button (click)="onClickDetailView()">
          {{ 'conference.detailView' | translate }}
        </button>
      </li>
      <li>
        <button mat-button (click)="onClickEnjoyConference()">
          {{ 'conference.videoConferenceEnjoy' | translate }}
        </button>
      </li>
    </ul>
  </div>
</div>