use jitsi.org as jitsi server

src/app/app.component.html

@@ -4,6 +4,6 @@ <h1 class="app__title">
     </h1>
   <section class="app__chat">
     <app-chat [messages]="messages" (sendMessage)="sendMessage($event)" [disabled]="!chat"></app-chat>
-
   </section>
 </main>
+<app-request-name (setName)="connect($event)" *ngIf="!name"></app-request-name>

src/app/app.component.ts

@@ -7,13 +7,15 @@ import {Message} from './Message';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnDestroy {
   public chat: Conference;
   public self: Track;
+  public name: string;
   public messages: Message[] = [];
 
-  async ngOnInit() {
-    JitsiMeet.setLogLevel(LogLevel.ERROR);
+  async connect(name) {
+    this.name = name;
+    JitsiMeet.setLogLevel(LogLevel.INFO);
 
     JitsiMeet.init({
       disableAudioLevels: true,
@@ -25,51 +27,50 @@ export class AppComponent implements OnInit, OnDestroy {
 
     const connection = JitsiMeet.connection(null, null, {
       hosts: {
-        domain: 'meet.jitsi',
-        muc: `muc.meet.jitsi`,
+        domain: 'meet.jit.si',
+        muc: `conference.meet.jit.si`,
+        focus: `focus.meet.jit.si`,
       },
-      bosh: '/jitsi/http-bind',
+      bosh: 'https://meet.jit.si/http-bind',
       clientNode: 'http://jitsi.org/jitsimeet'
     });
 
     await connection.connect();
 
-    const chat = connection.initConference('chat-lob', {
+    this.chat = connection.initConference('angular-jitsi-chat', {
       openBridgeChannel: 'websocket'
     });
 
-    chat.setDisplayName(`Matheus ${Date.now()}`);
+    this.chat.setDisplayName(name);
 
-    chat.addEventListener(ConferenceEvent.USER_JOINED, (id, participant) => {
+    this.chat.addEventListener(ConferenceEvent.USER_JOINED, (id, participant) => {
       this.messages.push({
         type: 'user_join',
         userName: participant.getDisplayName(),
         time: new Date()
       });
     });
 
-    chat.addEventListener(ConferenceEvent.USER_LEFT, (id, participant) => {
+    this.chat.addEventListener(ConferenceEvent.USER_LEFT, (id, participant) => {
       this.messages.push({
         type: 'user_leave',
         userName: participant.getDisplayName(),
         time: new Date()
       });
     });
 
-    this.self = await chat.join();
+    this.self = await this.chat.join();
 
-    chat.addEventListener(ConferenceEvent.MESSAGE_RECEIVED, (id, message) => {
+    this.chat.addEventListener(ConferenceEvent.MESSAGE_RECEIVED, (id, message) => {
       const msg = JSON.parse(message);
       this.messages.push({
         type: 'message',
         userName: msg.userName,
         time: new Date(),
         text: msg.text,
-        fromMe: msg.userId === this.self.getId()
+        fromMe: msg.userId === this.chat.myUserId()
       });
     });
-
-    this.chat = chat;
   }
 
   ngOnDestroy(): void {
@@ -81,18 +82,12 @@ export class AppComponent implements OnInit, OnDestroy {
     const msg: Message = {
       text,
       type: 'message',
-      userId: this.self.getId(),
-      userName: this.self.getDisplayName(),
+      userId: this.chat.myUserId(),
+      userName: this.name,
       time: new Date(),
     };
 
     this.chat.sendTextMessage(JSON.stringify(msg));
-
-    // this.messages.push({
-    //   ...msg,
-    //   time: new Date(),
-    //   fromMe: true,
-    // });
   }
 
   @HostListener('window:beforeunload', ['$event'])

src/app/app.module.ts

@@ -8,13 +8,15 @@ import { UserListItemComponent } from './components/users/user-list-item/user-li
 import { UsersConnectedListComponent } from './components/users/users-connected-list/users-connected-list.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule} from '@angular/forms';
+import { RequestNameComponent } from './components/request-name/request-name.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     ChatComponent,
     UserListItemComponent,
-    UsersConnectedListComponent
+    UsersConnectedListComponent,
+    RequestNameComponent
   ],
   imports: [
     BrowserModule,

src/app/components/chat/chat.component.html

@@ -18,7 +18,7 @@
 
       <div class="chat__message-user --join" *ngIf="msg.type === 'user_join'">
         <p class="chat__message-user__content">
-          <span>{{ msg.userName }}</span> join to us at {{ msg.time | date:'shortTime' }}
+          <span>{{ msg.userName }}</span> joined at {{ msg.time | date:'shortTime' }}
         </p>
       </div>
 

src/app/components/request-name/request-name.component.html

@@ -0,0 +1,7 @@
+<div class="name">
+  <input class="name__field"
+         [formControl]="fieldControl"
+         type="text"
+         (keyup.enter)="setName.emit(fieldControl.value); fieldControl.reset()"
+         placeholder="Your name">
+</div>

src/app/components/request-name/request-name.component.scss

@@ -0,0 +1,34 @@
+.name {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.58);
+  background-blend-mode: soft-light;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__field {
+    outline: none;
+    margin: 0;
+    padding: 2rem;
+    border: unset;
+    background-color: transparent;
+    width: 100%;
+    display: block;
+    transition: box-shadow 250ms ease-in-out;
+    border-radius: 3px;
+    text-align: center;
+    color: white;
+    font-size: 45px;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.61);
+
+    }
+
+  }
+}

src/app/components/request-name/request-name.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequestNameComponent } from './request-name.component';
+
+describe('RequestNameComponent', () => {
+  let component: RequestNameComponent;
+  let fixture: ComponentFixture<RequestNameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RequestNameComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RequestNameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/request-name/request-name.component.ts

@@ -0,0 +1,19 @@
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+@Component({
+  selector: 'app-request-name',
+  templateUrl: './request-name.component.html',
+  styleUrls: ['./request-name.component.scss']
+})
+export class RequestNameComponent implements OnInit {
+
+  @Output() setName = new EventEmitter<string>();
+  public fieldControl = new FormControl(['']);
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/core/jitsi/Conference.ts

@@ -50,7 +50,10 @@ export class Conference {
         resolve(new Track(selfTrack));
       });
 
-      const joinErrorListener = this.addEventListener(ConferenceEvent.CONFERENCE_FAILED, () => {
+      const joinErrorListener = this.addEventListener(ConferenceEvent.CONFERENCE_FAILED, (err, arg) => {
+        if (err !== ConferenceEvent.CONFERENCE_FAILED) {
+          return;
+        }
         joinListener();
         joinErrorListener();
         reject(new Error('can\'t join'));

src/core/jitsi/JitsiMeet.ts

@@ -26,6 +26,7 @@ export interface ConnectionOptions {
   hosts: {
     domain: string,
     muc?: string,
+    focus?: string,
     anonymousdomain?: string,
   };
   useStunTurn?: boolean;