+
@@ -26,9 +26,13 @@
-
-
-
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
index e70fefcd..fbd781dc 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
@@ -24,9 +24,7 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser
styleUrls: ['./session.component.css']
})
export class SessionComponent implements OnInit, AfterViewInit {
- @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef;
@ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef;
- @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef;
@Input() tokens: { webcam: string; screen: string };
@Output() _session = new EventEmitter();
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
index a7ee6388..fef79f95 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
@@ -15,83 +15,54 @@
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
+
+
+
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
+
+
+
-
-
+
+
-
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
index e86f6a4a..620b92aa 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
@@ -1,4 +1,5 @@
-import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { StreamDirective } from '../../directives/stream/stream.directive';
@Component({
selector: 'ov-videoconference',
@@ -6,16 +7,38 @@ import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateR
styleUrls: ['./videoconference.component.css']
})
export class VideoconferenceComponent implements OnInit {
- @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef;
- @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef;
- @ContentChild('panel', { read: TemplateRef }) panelTemplate: TemplateRef;
- @ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef;
- @ContentChild('participantsPanel', { read: TemplateRef }) participantsPanelTemplate: TemplateRef;
- @ContentChild('stream', { read: TemplateRef }) streamTemplate: TemplateRef;
+ streamTemplate: TemplateRef;
+
+ // @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef;
+
+ @ContentChild(StreamDirective)
+ set customStream(customStream: StreamDirective) {
+ if (customStream) {
+ this.streamTemplate = customStream.template;
+ }
+ }
@Input() sessionName: string;
@Input() userName: string;
+ @Input()
+ set tokens(tokens: { webcam: string; screen: string }) {
+ if (!tokens || (!tokens.webcam && !tokens.screen)) {
+ //No tokens received
+ // throw new Error('No tokens received');
+ console.warn('No tokens received');
+ } else {
+ if (tokens.webcam || tokens.screen) {
+ this._tokens = {
+ webcam: tokens.webcam,
+ screen: tokens.screen
+ };
+ this.joinSessionClicked = true;
+ this.isSessionAlive = true;
+ }
+ }
+ }
+
// @Input() openviduServerUrl: string;
// @Input() openviduSecret: string;
@@ -33,25 +56,6 @@ export class VideoconferenceComponent implements OnInit {
ngOnInit() {}
- @Input()
- set tokens(tokens: { webcam: string; screen: string }) {
- if (!tokens || (!tokens.webcam && !tokens.screen)) {
- //No tokens received
- // throw new Error('No tokens received');
- console.warn('No tokens received');
-
- } else {
- if (tokens.webcam || tokens.screen) {
- this._tokens = {
- webcam: tokens.webcam,
- screen: tokens.screen
- };
- this.joinSessionClicked = true;
- this.isSessionAlive = true;
- }
- }
- }
-
async _onJoinClicked() {
this.onJoinClicked.emit();
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.spec.ts
new file mode 100644
index 00000000..8908b61a
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.spec.ts
@@ -0,0 +1,8 @@
+import { StreamDirective } from './stream.directive';
+
+describe('StreamDirective', () => {
+ it('should create an instance', () => {
+ const directive = new StreamDirective();
+ expect(directive).toBeTruthy();
+ });
+});
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.ts
new file mode 100644
index 00000000..432e66af
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/stream/stream.directive.ts
@@ -0,0 +1,10 @@
+import { Directive, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+
+@Directive({
+ selector: '[ovStream]'
+})
+export class StreamDirective implements OnInit {
+ constructor(public template: TemplateRef, public container: ViewContainerRef) {}
+
+ ngOnInit() {}
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
index eb66179d..4c0dfecb 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
@@ -58,9 +58,13 @@ import { ParticipantItemComponent } from './components/panel/participants-panel/
import { ParticipantsPanelComponent } from './components/panel/participants-panel/participants-panel/participants-panel.component';
import { VideoconferenceComponent } from './components/videoconference/videoconference.component';
import { PanelComponent } from './components/panel/panel.component';
+import { StreamDirective } from './directives/stream/stream.directive';
+import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
+ StreamDirective,
+
UserSettingsComponent,
VideoComponent,
ToolbarComponent,
@@ -77,7 +81,7 @@ import { PanelComponent } from './components/panel/panel.component';
ParticipantItemComponent,
ParticipantsPanelComponent,
VideoconferenceComponent,
- PanelComponent
+ PanelComponent,
],
imports: [
CommonModule,
@@ -132,7 +136,8 @@ import { PanelComponent } from './components/panel/panel.component';
StreamComponent,
VideoComponent,
ParticipantConnectionsPipe,
- CommonModule
+ CommonModule,
+ StreamDirective
],
entryComponents: [DialogTemplateComponent]
})
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
index d7fef6a0..0a3505b0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
@@ -39,4 +39,7 @@ export * from './lib/models/video-type.model';
export * from './lib/models/notification-options.model';
// Pipes
-export * from './lib/pipes/participant-connections.pipe';
\ No newline at end of file
+export * from './lib/pipes/participant-connections.pipe';
+
+// Directives
+export * from './lib/directives/stream/stream.directive';
\ No newline at end of file
diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html
index b8bc3eb1..2953949b 100644
--- a/openvidu-components-angular/src/app/openvidu-call/call.component.html
+++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html
@@ -1,61 +1,22 @@
-
-
-
+
-
+
+
+
-
-
+
-
+
diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.ts b/openvidu-components-angular/src/app/openvidu-call/call.component.ts
index ac1a55a7..cfa4c3a2 100644
--- a/openvidu-components-angular/src/app/openvidu-call/call.component.ts
+++ b/openvidu-components-angular/src/app/openvidu-call/call.component.ts
@@ -1,13 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ContentChild, OnInit } from '@angular/core';
import { RestService } from '../services/rest.service';
import { Router } from '@angular/router';
-
@Component({
selector: 'app-call',
templateUrl: './call.component.html',
styleUrls: ['./call.component.scss']
})
export class CallComponent implements OnInit {
+
+
sessionId = 'prueba-majestuosa-amable';
tokens: { webcam: string; screen: string };