diff --git a/openvidu-testapp/src/app/app.component.css b/openvidu-testapp/src/app/app.component.css index e94a2539..57c7a932 100644 --- a/openvidu-testapp/src/app/app.component.css +++ b/openvidu-testapp/src/app/app.component.css @@ -4,6 +4,5 @@ } main { - padding: 50px; - padding-top: 30px; + padding: 30px 50px 30px 50px; } diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css index df4d8317..018094fe 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css @@ -29,5 +29,9 @@ th { } app-openvidu-instance { - display: inline-block; + display: inline-flex; + margin: 15px 25px 0 0; + background-color: #797979; + padding: 10px; + border-radius: 2px; } \ No newline at end of file diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css index 420fe451..bfff4aab 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css @@ -1,9 +1,14 @@ md-card { - background-color: rgba(77, 77, 77, 0.05); - margin: 20px 0 5px 0; + background-color: #ffffff; + margin: 0; padding: 20px; } +md-card.session-card { + padding: 15px; + margin-left: 10px; +} + .session-form md-form-field { width: 130px; } @@ -27,14 +32,52 @@ md-card { margin-bottom: 0; } -#join-session-btn { +#join-btn { margin: 0 0 4px 4px; } +#leave-btn { + position: absolute; + right: 0; + top: 0; + margin-top: 8px; + margin-right: 8px; +} + md-radio-button { margin-bottom: 8px; } .video-container { min-width: 140px; -} \ No newline at end of file +} + +.session-card-header { + display: flex; +} + +.session-card-inner { + width: 100%; + margin-bottom: 8px; +} + +.session-card-inner .session-title { + float: left; +} + +.session-card-inner .session-actions { + float: right; + margin-top: -5px; +} + +.session-actions button { + outline: 0; + border: none; + background: none; + cursor: pointer; + padding: 0; +} + +.session-actions button:hover { + color: #4d4d4d; +} diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html index 517c0691..9652e74c 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html @@ -1,69 +1,81 @@ -
+
+ -
- - - -
+ + +
- + - + +
-
+
+ + Subscribe + Publish +
-
+
+ +
+
+

Send

-

Send...

-
- Audio - Video -
-
-
-

Enter with
active...

-
- Audio - Video -
+ Audio + Video
- -
- - Video - Screen - +
+

Enter active

+
+ Audio + Video +
-
- - +
+ +
+ Video +
+
+ Screen +
+ + +
- - - +
- -
- -
- - {{sessionName}} - -
-
-
-
- -
+ + + +
+ +
+ +
+
+
{{sessionName}}
+
+ + + +
+
+
+
+
+
+
+
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts index ce61b1b7..0fcc0214 100644 --- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts @@ -1,5 +1,5 @@ import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; -import { OpenVidu, Session, Subscriber, Stream } from 'openvidu-browser'; +import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser'; declare var $: any; @@ -16,12 +16,15 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { @Input() openviduSecret: string; + subscribeTo = true; + publishTo = true; sendAudio = true; sendVideo = true; - optionVideo = 'video'; activeAudio = true; activeVideo = true; + optionVideo = 'video'; sendVideoRadio = true; + subscribeToRemote = false; // Join form clientData: string; @@ -30,6 +33,12 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { // OpenVidu objects OV: OpenVidu; session: Session; + publisher: Publisher; + + audioMuted = false; + videoMuted = false; + audioIcon = 'mic'; + videoIcon = 'videocam'; constructor(private changeDetector: ChangeDetectorRef) { this.generateSessionInfo(); @@ -71,12 +80,14 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { this.changeDetector.detectChanges(); - const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId); - subscriber.on('videoElementCreated', (e) => { - this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection); - }); - subscriber.on('videoPlaying', (e) => { - }); + if (this.subscribeTo) { + const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId); + subscriber.on('videoElementCreated', (e) => { + this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection); + }); + subscriber.on('videoPlaying', (e) => { + }); + } }); this.session.on('streamDestroyed', (event) => { @@ -89,22 +100,32 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { this.session.connect(null, this.clientData, (error) => { if (!error) { + if (this.publishTo) { - const publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, { - audio: true, - video: true, - quality: 'MEDIUM' - }); + this.audioMuted = !this.activeAudio; + this.videoMuted = !this.activeVideo; + this.updateAudioIcon(); + this.updateVideoIcon(); - publisher.on('videoElementCreated', (event) => { - this.appendUserData(event.element, this.clientData, null); - }); + this.publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, { + audio: this.activeAudio, + video: this.activeVideo, + quality: 'MEDIUM' + }); - publisher.on('videoPlaying', (e) => { - }); + this.publisher.on('videoElementCreated', (event) => { + }); - this.session.publish(publisher); + this.publisher.on('videoPlaying', (e) => { + }); + if (this.subscribeToRemote) { + this.publisher.subscribeToRemote(); + } + + this.session.publish(this.publisher); + + } } else { console.log('There was an error connecting to the session:', error.code, error.message); } @@ -118,30 +139,44 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy { } this.session = null; this.OV = null; - this.removeAllUserData(); + } + + private toggleAudio() { + this.publisher.publishAudio(this.audioMuted); + this.audioMuted = !this.audioMuted; + this.updateAudioIcon(); + } + + private updateAudioIcon() { + this.audioMuted ? this.audioIcon = 'mic_off' : this.audioIcon = 'mic'; + } + + private toggleVideo() { + this.publisher.publishVideo(this.videoMuted); + this.videoMuted = !this.videoMuted; + this.updateVideoIcon(); + } + + private updateVideoIcon() { + this.videoMuted ? this.videoIcon = 'videocam_off' : this.videoIcon = 'videocam'; } private appendUserData(videoElement, data, connection): void { - /*const dataNode = document.createElement('div'); + const dataNode = document.createElement('div'); dataNode.className = 'data-node'; dataNode.id = 'data-' + (connection ? connection.connectionId : data); dataNode.innerHTML = '

' + data + '

'; - videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);*/ + videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling); } private removeUserData(connection): void { - /*$('#data-' + connection.connectionId).remove();*/ - } - - private removeAllUserData() { - /*const nicknameElements = $('.data-node'); - while (nicknameElements[0]) { - nicknameElements[0].remove(); - }*/ + $('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove(); } private toggleRadio(): void { - this.sendVideoRadio = !this.sendVideo; + if (this.publishTo && this.sendVideo) { + this.optionVideo = 'video'; + } } } diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css index 22addc6a..20ac28c9 100644 --- a/openvidu-testapp/src/styles.css +++ b/openvidu-testapp/src/styles.css @@ -23,7 +23,6 @@ ul { video { max-width: 125px; - margin-top: -5px; } button { @@ -32,4 +31,29 @@ button { .session-form label { font-size: 12px; -} \ No newline at end of file +} + +.subscribe-remote-check .mat-checkbox-label { + line-height: 15px !important; +} + +.video-container video { + float: left; +} + +.video-container div { + float: left; + position: relative; + margin-left: -46%; + margin-top: -5%; +} + +.video-container p { + background: #ffffff; + padding-left: 5px; + padding-right: 5px; + color: #4d4d4d; + font-weight: 100; + font-size: 14px; + border-bottom-right-radius: 2px; +}