ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Added directive examples and clean testapp 

- Clean test components
- Avoid using backend in development
pull/713/head
csantosm 2022-04-05 15:58:12 +02:00
parent aa0c78b882
commit 4fc878f796
40 changed files with 565 additions and 576 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
openvidu-components-angular/README.md
View File

@ -1,7 +1,12 @@
# Openvidu Angular
The easier way to build powerfull OpenVidu videoconference frontend applications.
The easier way to build powerful OpenVidu videoconference frontend applications.
How to install:
```
npm install openvidu-angular
```
![OpenVidu application](app.gif)

52
openvidu-components-angular/src/app/app.module.ts
View File

@ -5,51 +5,57 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { environment } from 'src/environments/environment';
// openvidu-angular
import { CallComponent } from './openvidu-call/call.component';
import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ChatTestComponent } from './components/chat-test/chat-test.component';
import { LayoutTestComponent } from './components/layout-test/layout-test.component';
import { StreamTestComponent } from './components/stream-test/stream-test.component';
import {
OpenViduAngularModule,
ChatPanelComponent,
ToolbarComponent,
SessionComponent,
LayoutComponent,
VideoconferenceComponent
} from 'openvidu-angular';
import { MatButtonModule } from '@angular/material/button';
import { TestingComponent } from './testing-app/testing.component';
import { MatIconModule } from '@angular/material/icon';
import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component';
import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component';
import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component';
import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component';
import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component';
import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component';
import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
// openvidu-angular
import { OpenViduAngularModule } from 'openvidu-angular';
import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
CallComponent,
ToolbarTestComponent,
ChatTestComponent,
LayoutTestComponent,
StreamTestComponent,
TestingComponent
TestingComponent,
ExamplesDashboardComponent,
ToolbarDirectiveComponent,
ToolbarAdditionalButtonsDirectiveComponent,
LayoutDirectiveComponent,
StreamDirectiveComponent,
PanelDirectiveComponent,
ParticipantsPanelDirectiveComponent,
ChatPanelDirectiveComponent,
ParticipantPanelItemDirectiveComponent,
ParticipantPanelItemElementsDirectiveComponent
],
imports: [
BrowserModule,
MatCheckboxModule,
MatButtonModule,
MatIconModule,
MatMenuModule,
BrowserAnimationsModule,
OpenViduAngularModule.forRoot(environment),
AppRoutingModule // Order is important, AppRoutingModule must be the last import for useHash working
],
providers: [VideoconferenceComponent, ToolbarComponent, ChatPanelComponent, SessionComponent, LayoutComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

32
openvidu-components-angular/src/app/app.routing.module.ts
View File

@ -2,20 +2,34 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CallComponent } from './openvidu-call/call.component';
import { ToolbarTestComponent } from './components/toolbar-test/toolbar-test.component';
import { ChatTestComponent } from './components/chat-test/chat-test.component';
import { LayoutTestComponent } from './components/layout-test/layout-test.component';
import { StreamTestComponent } from './components/stream-test/stream-test.component';
import { TestingComponent } from './testing-app/testing.component';
import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
import { ToolbarDirectiveComponent } from './examples/toolbar-directive/toolbar-directive.component';
import { ToolbarAdditionalButtonsDirectiveComponent } from './examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component';
import { LayoutDirectiveComponent } from './examples/layout-directive/layout-directive.component';
import { StreamDirectiveComponent } from './examples/stream-directive/stream-directive.component';
import { PanelDirectiveComponent } from './examples/panel-directive/panel-directive.component';
import { ParticipantsPanelDirectiveComponent } from './examples/participantsPanel-directive/participantsPanel-directive.component';
import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'call', component: CallComponent },
{ path: 'toolbar', component: ToolbarTestComponent },
{ path: 'chat', component: ChatTestComponent },
{ path: 'layout', component: LayoutTestComponent },
{ path: 'stream', component: StreamTestComponent },
{ path: 'testing', component: TestingComponent }
{ path: 'testing', component: TestingComponent },
{ path: 'examples', component: ExamplesDashboardComponent},
{ path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },
{ path: 'examples/toolbarAdditionalButtonsDirective', component: ToolbarAdditionalButtonsDirectiveComponent },
{ path: 'examples/layoutDirective', component: LayoutDirectiveComponent },
{ path: 'examples/streamDirective', component: StreamDirectiveComponent },
{ path: 'examples/panelDirective', component: PanelDirectiveComponent },
{ path: 'examples/participantsPanelDirective', component: ParticipantsPanelDirectiveComponent },
{ path: 'examples/chatPanelDirective', component: ChatPanelDirectiveComponent },
{ path: 'examples/participantPanelItemDirective', component: ParticipantPanelItemDirectiveComponent },
{ path: 'examples/participantPanelItemElementsDirective', component: ParticipantPanelItemElementsDirectiveComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],

41
openvidu-components-angular/src/app/components/chat-test/chat-test.component.html
View File

@ -1,41 +0,0 @@
<p>chat-test works!</p>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
<span>openvidu-components-angular</span>
<div class="spacer"></div>
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none" />
<path
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
fill="#fff"
/>
</svg>
</a>
</div>
<div class="back-button" >
<a routerLink="/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</a>
<a routerLink="/">
Go back to Dashboard page
</a>
</div>
<div id="chat-test-container">
<!-- OPENVIDU CHAT -->
<ov-chat-panel></ov-chat-panel>
<span>WARNING: Like chat component need an active room, this page only allow check and test the UI</span>
</div>

26
openvidu-components-angular/src/app/components/chat-test/chat-test.component.scss
View File

@ -1,26 +0,0 @@
#chat-test-container{
background: #d1d1d1;
position: absolute;
left: 50px;
right: 50px;
top: 150px;
border: solid 2px;
height: 500px;
text-align: center;
span {
position: relative;
top: 50%;
font-size: medium;
width: 50px;
font-weight: bold;
}
}
::ng-deep #chat-container {
width: 400px !important;
right: 0;
}

25
openvidu-components-angular/src/app/components/chat-test/chat-test.component.spec.ts
View File

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

15
openvidu-components-angular/src/app/components/chat-test/chat-test.component.ts
View File

@ -1,15 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-chat-test',
templateUrl: './chat-test.component.html',
styleUrls: ['./chat-test.component.scss']
})
export class ChatTestComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

44
openvidu-components-angular/src/app/components/layout-test/layout-test.component.html
View File

@ -1,44 +0,0 @@
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
<span>openvidu-components-angular</span>
<div class="spacer"></div>
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none" />
<path
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
fill="#fff"
/>
</svg>
</a>
</div>
<div class="back-button">
<a routerLink="/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</a>
<a routerLink="/">Go back to Dashboard page</a>
</div>
<div id="buttons">
<button mat-raised-button (click)="addParticipant()">Add participant</button>
<button mat-raised-button color="warn" (click)="deleteParticipant()">Delete participant</button>
<button mat-raised-button color="primary" (click)="toggleMenu()">Toggle Chat</button>
</div>
<div id="layout-test-container">
<!-- OPENVIDU LAYOUT -->
<ov-layout></ov-layout>
</div>

29
openvidu-components-angular/src/app/components/layout-test/layout-test.component.scss
View File

@ -1,29 +0,0 @@
#layout-test-container{
background: #d1d1d1;
position: absolute;
left: 50px;
right: 50px;
top: 150px;
border: solid 2px;
height: calc(100% - 250px);
text-align: center;
span {
position: relative;
top: 50%;
font-size: medium;
font-weight: bold;
}
}
#buttons {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
text-align: center;
button {
margin: 15px;
}
}

25
openvidu-components-angular/src/app/components/layout-test/layout-test.component.spec.ts
View File

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

33
openvidu-components-angular/src/app/components/layout-test/layout-test.component.ts
View File

@ -1,33 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { ParticipantService, SidenavMenuService } from 'openvidu-angular';
@Component({
selector: 'app-layout-test',
templateUrl: './layout-test.component.html',
styleUrls: ['./layout-test.component.scss']
})
export class LayoutTestComponent implements OnInit {
connectionIds: string[] = [];
constructor(private menuService: SidenavMenuService, private participantService: ParticipantService) {}
ngOnInit(): void {}
addParticipant() {
const id = `test${Math.random()}`;
const event: any = { connection: { connectionId: id } };
this.connectionIds.push(id);
//TODO
// this.remoteUserService.add(event, null);
}
deleteParticipant() {
if (this.connectionIds.length > 0) {
//TODO:
// this.remoteUserService.removeUserByConnectionId(this.connectionIds.pop());
}
}
toggleMenu() {
// this.menuService.toggleMenu();
}
}

37
openvidu-components-angular/src/app/components/stream-test/stream-test.component.html
View File

@ -1,37 +0,0 @@
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
<span>openvidu-components-angular</span>
<div class="spacer"></div>
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none" />
<path
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
fill="#fff"
/>
</svg>
</a>
</div>
<div class="back-button">
<a routerLink="/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</a>
<a routerLink="/">Go back to Dashboard page</a>
</div>
<div id="stream-test-container">
<ov-stream [stream]="stream"></ov-stream>
</div>

17
openvidu-components-angular/src/app/components/stream-test/stream-test.component.scss
View File

@ -1,17 +0,0 @@
#stream-test-container{
background: #d1d1d1;
position: absolute;
left: 50px;
right: 50px;
top: 150px;
border: solid 2px;
height: calc(100% - 250px);
text-align: center;
span {
position: relative;
top: 50%;
font-size: medium;
font-weight: bold;
}
}

25
openvidu-components-angular/src/app/components/stream-test/stream-test.component.spec.ts
View File

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

18
openvidu-components-angular/src/app/components/stream-test/stream-test.component.ts
View File

@ -1,18 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { ParticipantModel } from 'openvidu-angular';
@Component({
selector: 'app-stream-test',
templateUrl: './stream-test.component.html',
styleUrls: ['./stream-test.component.scss']
})
export class StreamTestComponent implements OnInit {
stream: ParticipantModel;
constructor() { }
ngOnInit(): void {
// this.stream = new ParticipantModel();
}
}

32
openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.html
View File

@ -1,32 +0,0 @@
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img width="40" alt="Openvidu Logo" src="assets/images/openvidu_globe.png" />
<span>openvidu-components-angular</span>
<div class="spacer"></div>
<a aria-label="OpenVidu on twitter" target="_blank" rel="noopener" href="https://twitter.com/openvidu" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none" />
<path
d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
fill="#fff"
/>
</svg>
</a>
</div>
<div class="back-button">
<a routerLink="/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</a>
<a routerLink="/">Go back to Dashboard page</a>
</div>
<div id="toolbar-test-container">
<!-- OPENVIDU TOOLBAR -->
<ov-toolbar></ov-toolbar>
<span>WARNING: Like toolbar component need a active room, this page only allow check and test the UI</span>
</div>

18
openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.scss
View File

@ -1,18 +0,0 @@
#toolbar-test-container{
background: #d1d1d1;
position: absolute;
left: 50px;
right: 50px;
top: 150px;
border: solid 2px;
height: 300px;
text-align: center;
span {
position: relative;
top: 50%;
font-size: medium;
font-weight: bold;
}
}

25
openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.spec.ts
View File

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

15
openvidu-components-angular/src/app/components/toolbar-test/toolbar-test.component.ts
View File

@ -1,15 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-toolbar-test',
templateUrl: './toolbar-test.component.html',
styleUrls: ['./toolbar-test.component.scss',]
})
export class ToolbarTestComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

0
openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.scss
View File

70
openvidu-components-angular/src/app/examples/chatPanel-directive/chatPanel-directive.component.ts
View File

@ -1,12 +1,70 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { TokenModel, Signal } from 'openvidu-angular';
import { Session, SignalOptions } from 'openvidu-browser';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-chatPanel-directive',
template: ` <p>toolbar-directive works!</p> `,
styleUrls: ['./chatPanel-directive.component.scss']
template: `
<ov-videoconference
(onJoinButtonClicked)="onJoinButtonClicked()"
(onSessionCreated)="onSessionCreated($event)"
[tokens]="tokens"
[toolbarDisplaySessionName]="false"
>
<div *ovChatPanel id="my-panel">
<h3>Chat</h3>
<div>
<ul>
<li *ngFor="let msg of messages">{{ msg }}</li>
</ul>
</div>
<input value="Hello" #input />
<button (click)="send(input.value)">Send</button>
</div>
</ov-videoconference>
`,
styles: [
`
#my-panel {
background: #aafffc;
height: 100%;
overflow: hidden;
text-align: center;
}
`
]
})
export class ChatPanelDirectiveComponent implements OnInit {
constructor() {}
export class ChatPanelDirectiveComponent {
tokens: TokenModel;
sessionId = 'chat-panel-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
session: Session;
messages: string[] = [];
constructor(private restService: RestService) {}
ngOnInit(): void {}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
onSessionCreated(session: Session) {
this.session = session;
this.session.on(`signal:${Signal.CHAT}`, (event: any) => {
const msg = JSON.parse(event.data).message;
this.messages.push(msg);
});
}
send(message: string): void {
const signalOptions: SignalOptions = {
data: JSON.stringify({ message }),
type: Signal.CHAT,
to: undefined
};
this.session.signal(signalOptions);
}
}

2
openvidu-components-angular/src/app/examples/examples-dashboard/examples-dashboard.component.ts
View File

@ -13,7 +13,7 @@ export class ExamplesDashboardComponent implements OnInit {
ngOnInit(): void {}
goTo(path: string) {
this.router.navigate([`/${path}`]);
this.router.navigate([`examples/${path}`]);
}
}

76
openvidu-components-angular/src/app/examples/layout-directive/layout-directive.component.ts
View File

@ -1,11 +1,75 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
import { Subscription } from 'rxjs';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-layout-directive',
template: ` <p>layout-directive works!</p> `,
})
export class LayoutDirectiveComponent implements OnInit {
constructor() {}
styles: [
`
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ngOnInit(): void {}
.item {
flex: 0 50%;
height: 250px;
margin-bottom: 2%;
}
`
],
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
<div *ovLayout>
<div class="container">
<div class="item" *ngFor="let stream of localParticipant | streams">
<ov-stream [stream]="stream"></ov-stream>
</div>
<div class="item" *ngFor="let stream of remoteParticipants | streams">
<ov-stream [stream]="stream"></ov-stream>
</div>
</div>
</div>
</ov-videoconference>
`
})
export class LayoutDirectiveComponent implements OnInit, OnDestroy {
tokens: TokenModel;
sessionId = 'layout-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
localParticipant: ParticipantAbstractModel;
remoteParticipants: ParticipantAbstractModel[];
localParticipantSubs: Subscription;
remoteParticipantsSubs: Subscription;
constructor(private restService: RestService, private participantService: ParticipantService) {}
ngOnInit(): void {
this.subscribeToParticipants();
}
ngOnDestroy() {
this.localParticipantSubs.unsubscribe();
this.remoteParticipantsSubs.unsubscribe();
}
subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
});
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
this.remoteParticipants = participants;
});
}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
}

0
openvidu-components-angular/src/app/examples/layout-directive/toolbar-directive.component.scss
View File

0
openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.scss
View File

27
openvidu-components-angular/src/app/examples/panel-directive/panel-directive.component.ts
View File

@ -1,12 +1,33 @@
import { Component, OnInit } from '@angular/core';
import { TokenModel } from 'openvidu-angular';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-panel-directive',
template: ` <p>toolbar-directive works!</p> `,
styleUrls: ['./panel-directive.component.scss']
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
<div *ovPanel>
<div>HOLA?</div>
<div *ovChatPanel>
<ov-chat-panel></ov-chat-panel>
</div>
</div>
</ov-videoconference>
`
})
export class PanelDirectiveComponent implements OnInit {
constructor() {}
tokens: TokenModel;
sessionId = 'panel-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
constructor(private restService: RestService) {}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
ngOnInit(): void {}
}

60
openvidu-components-angular/src/app/examples/participantPanelItem-directive/participantPanelItem-directive.component.ts Normal file
View File

@ -0,0 +1,60 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
import { Subscription } from 'rxjs';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-participantPanelItem-directive',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantPanelItem="let participant">
<ov-participant-panel-item [participant]="participant"></ov-participant-panel-item>
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
</ov-videoconference>
`,
styles: [``]
})
export class ParticipantPanelItemDirectiveComponent implements OnInit, OnDestroy {
tokens: TokenModel;
sessionId = 'participants-panel-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
localParticipant: ParticipantAbstractModel;
remoteParticipants: ParticipantAbstractModel[];
localParticipantSubs: Subscription;
remoteParticipantsSubs: Subscription;
constructor(private restService: RestService, private participantService: ParticipantService) {}
ngOnInit(): void {
this.subscribeToParticipants();
}
ngOnDestroy() {
this.localParticipantSubs.unsubscribe();
this.remoteParticipantsSubs.unsubscribe();
}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
});
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
this.remoteParticipants = participants;
});
}
}

40
openvidu-components-angular/src/app/examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component.ts Normal file
View File

@ -0,0 +1,40 @@
import { Component } from '@angular/core';
import { ParticipantService, TokenModel } from 'openvidu-angular';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-participantPanelItemElements-directive',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantsPanel id="my-panel">
<ul id="local">
<li>{{ localParticipant.nickname }}</li>
</ul>
<ul id="remote">
<li *ngFor="let p of remoteParticipants">{{ p.nickname }}</li>
</ul>
</div>
</ov-videoconference>
`,
styles: [``]
})
export class ParticipantPanelItemElementsDirectiveComponent {
tokens: TokenModel;
sessionId = 'participants-panel-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
constructor(private restService: RestService, private participantService: ParticipantService) {}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
}

0
openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.scss
View File

79
openvidu-components-angular/src/app/examples/participantsPanel-directive/participantsPanel-directive.component.ts
View File

@ -1,12 +1,77 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, } from '@angular/core';
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
import { Subscription } from 'rxjs';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-participantsPanel-directive',
template: ` <p>participantsPanel-directive works!</p> `,
styleUrls: ['./participantsPanel-directive.component.scss']
})
export class ParticipantsPanelDirectiveComponent implements OnInit {
constructor() {}
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantsPanel id="my-panel">
<ul id="local">
<li>{{localParticipant.nickname}}</li>
</ul>
ngOnInit(): void {}
<ul id="remote">
<li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
</ul>
</div>
</ov-videoconference>
`,
styles: [
`
#my-panel {
background: #faff7f;
height: 100%;
overflow: hidden;
}
#my-panel > #local {
background: #a184ff;
}
#my-panel > #remote {
background: #7fb8ff;
}
`
]
})
export class ParticipantsPanelDirectiveComponent implements OnInit, OnDestroy {
tokens: TokenModel;
sessionId = 'participants-panel-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
localParticipant: ParticipantAbstractModel;
remoteParticipants: ParticipantAbstractModel[];
localParticipantSubs: Subscription;
remoteParticipantsSubs: Subscription;
constructor(
private restService: RestService,
private participantService: ParticipantService
) {}
ngOnInit(): void {
this.subscribeToParticipants();
}
ngOnDestroy() {
this.localParticipantSubs.unsubscribe();
this.remoteParticipantsSubs.unsubscribe();
}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
});
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
this.remoteParticipants = participants;
});
}
}

39
openvidu-components-angular/src/app/examples/stream-directive/stream-directive.component.ts
View File

@ -1,11 +1,40 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { TokenModel } from 'openvidu-angular';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-stream-directive',
template: ` <p>stream-directive works!</p> `,
styles: [
`
p {
position: absolute;
bottom: 0;
border: 2px solid;
background: #000000;
}
`
],
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
<div *ovStream="let stream">
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
<p>{{ stream.participant.nickname }}</p>
</div>
</ov-videoconference>
`
})
export class StreamDirectiveComponent implements OnInit {
constructor() {}
export class StreamDirectiveComponent {
tokens: TokenModel;
sessionId = 'toolbar-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
ngOnInit(): void {}
constructor(private restService: RestService) {}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
}

0
openvidu-components-angular/src/app/examples/stream-directive/toolbar-directive.component.scss
View File

0
openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.scss
View File

23
openvidu-components-angular/src/app/examples/toolbar-directive/toolbar-directive.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular';
import { OpenViduService, TokenModel } from 'openvidu-angular';
import { RestService } from 'src/app/services/rest.service';
@Component({
@ -7,8 +7,8 @@ import { RestService } from 'src/app/services/rest.service';
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
<div *ovToolbar style="text-align: center;">
<button (click)="toggleVideo()">Mute Video</button>
<button>Mute Audio</button>
<button (click)="toggleVideo()">Toggle Video</button>
<button (click)="toggleAudio()">Toggle Audio</button>
</div>
</ov-videoconference>
`
@ -18,11 +18,9 @@ export class ToolbarDirectiveComponent implements OnInit {
sessionId = 'toolbar-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
constructor(
private restService: RestService,
private participantService: ParticipantService,
private openviduService: OpenViduService
) {}
publishVideo = true;
publishAudio = true;
constructor(private restService: RestService, private openviduService: OpenViduService) {}
ngOnInit(): void {}
@ -34,7 +32,12 @@ export class ToolbarDirectiveComponent implements OnInit {
}
toggleVideo() {
const publishVideo = !this.participantService.hasCameraVideoActive();
// this.openviduService.publishVideo(this.participantService.getMyCameraPublisher(), publishVideo);
this.publishVideo = !this.publishVideo;
this.openviduService.publishVideo(this.publishVideo);
}
toggleAudio() {
this.publishAudio = !this.publishAudio;
this.openviduService.publishAudio(this.publishAudio);
}
}

0
openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.scss
View File

11
openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbar-directive.component.ts
View File

@ -1,11 +0,0 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-toolbarAdditionalButtons-directive',
template: ` <p>toolbar-directive works!</p> `,
})
export class ToolbarAdditionalButtonsDirectiveComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

43
openvidu-components-angular/src/app/examples/toolbarAdditionalButtons-directive/toolbarAdditionalButtons-directive.component.ts Normal file
View File

@ -0,0 +1,43 @@
import { Component } from '@angular/core';
import { OpenViduService, ParticipantService, TokenModel } from 'openvidu-angular';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-toolbarAdditionalButtons-directive',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalButtons style="text-align: center;">
<button (click)="toggleVideo()">Toggle Video</button>
<button (click)="toggleAudio()">Toggle Audio</button>
</div>
</ov-videoconference>
`
})
export class ToolbarAdditionalButtonsDirectiveComponent {
tokens: TokenModel;
sessionId = 'toolbar-additionalbtn-directive-example';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
constructor(
private restService: RestService,
private openviduService: OpenViduService,
private participantService: ParticipantService
) {}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
toggleVideo() {
const publishVideo = !this.participantService.isMyVideoActive();
this.openviduService.publishVideo(publishVideo);
}
toggleAudio() {
const publishAudio = !this.participantService.isMyAudioActive();
this.openviduService.publishAudio(publishAudio);
}
}

4
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -8,9 +8,11 @@
(onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()"
(onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()"
(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
[prejoin]="false"
[minimal]="false"
>
<!-- <div *ovParticipantPanelItemElements>
<p>EXTRA INFO</p>
</div> -->

20
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -8,7 +8,9 @@ import { Router } from '@angular/router';
})
export class CallComponent implements OnInit {
value = true;
sessionId = 'qqqq';
sessionId = 'daily-call';
OPENVIDU_URL = 'https://localhost:4443';
OPENVIDU_SECRET = 'MY_SECRET';
tokens: { webcam: string; screen: string };
joinSessionClicked: boolean = false;
@ -19,18 +21,22 @@ export class CallComponent implements OnInit {
async ngOnInit() {
this.tokens = {
webcam: await this.restService.getToken(this.sessionId),
screen: await this.restService.getToken(this.sessionId)
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
};
}
async onJoinClicked() {
console.warn('VC JOIN BUTTON CLICKED');
this.tokens = {
webcam: await this.restService.getToken(this.sessionId),
screen: await this.restService.getToken(this.sessionId)
};
// this.tokens = {
// webcam: await this.restService.getToken(this.sessionId),
// screen: await this.restService.getToken(this.sessionId)
// };
console.log(await this.restService.getToken(this.sessionId))
// setInterval(() => {
// this.value = !this.value;

129
openvidu-components-angular/src/app/services/rest.service.ts
View File

@ -13,68 +13,77 @@ export class RestService {
this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
}
async getToken(sessionId: string, openviduServerUrl?: string, openviduSecret?: string): Promise<string> {
// if (!!openviduServerUrl && !!openviduSecret) {
// const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
// return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
// }
try {
return lastValueFrom(this.http.post<any>(this.baseHref + 'call', { sessionId }));
} catch (error) {
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
if (!!openviduServerUrl && !!openviduSecret) {
const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
}
// try {
// return lastValueFrom(this.http.post<any>(this.baseHref + 'call', { sessionId }));
// } catch (error) {
// if (error.status === 404) {
// throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
// }
// throw error;
// }
}
// private createSession(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise<string> {
// return new Promise((resolve, reject) => {
// const body = JSON.stringify({ customSessionId: sessionId });
// const options = {
// headers: new HttpHeaders({
// Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
// 'Content-Type': 'application/json'
// })
// };
// return this.http
// .post<any>(openviduServerUrl + '/openvidu/api/sessions', body, options)
// .pipe(
// catchError((error) => {
// if (error.status === 409) {
// resolve(sessionId);
// }
// if (error.statusText === 'Unknown Error') {
// reject({ status: 401, message: 'ERR_CERT_AUTHORITY_INVALID' });
// }
// return observableThrowError(error);
// })
// )
// .subscribe((response) => {
// resolve(response.id);
// });
// });
// }
/**
*
* * WARNING: This is why this tutorial is an insecure application.
* * We need to ask OpenVidu Server for a user token in order to connect to our session.
* * This process should entirely take place in our server-side
*/
private createSession(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
'Content-Type': 'application/json'
})
};
return this.http
.post<any>(openviduServerUrl + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
}
if (error.statusText === 'Unknown Error') {
reject({ status: 401, message: 'ERR_CERT_AUTHORITY_INVALID' });
}
return observableThrowError(error);
})
)
.subscribe((response) => {
resolve(response.id);
});
});
}
// private createToken(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise<string> {
// return new Promise((resolve, reject) => {
// const body = JSON.stringify({});
// const options = {
// headers: new HttpHeaders({
// Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
// 'Content-Type': 'application/json'
// })
// };
// return this.http
// .post<any>(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
// .pipe(
// catchError((error) => {
// reject(error);
// return observableThrowError(error);
// })
// )
// .subscribe((response) => {
// resolve(response.token);
// });
// });
// }
private createToken(sessionId: string, openviduServerUrl: string, openviduSecret: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({});
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + openviduSecret),
'Content-Type': 'application/json'
})
};
return this.http
.post<any>(openviduServerUrl + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response) => {
console.warn(response);
resolve(response.token);
});
});
}
}