diff --git a/openvidu-getaroom/web/app.js b/openvidu-getaroom/web/app.js index 8e47cade..5b5f8c0e 100644 --- a/openvidu-getaroom/web/app.js +++ b/openvidu-getaroom/web/app.js @@ -21,18 +21,19 @@ window.addEventListener('load', function () { }); // Disconnect participant on browser's window closed -window.onbeforeunload = function () { - session.disconnect() -}; +window.addEventListener('beforeunload', function () { + session.disconnect(); +}); function joinRoom(sessionId) { - // If the user is joining to a new room + if (!sessionId) { + // If the user is joining to a new room var sessionId = '#' + randomString(); } - // As insecure OpenVidu, the user's token will be a random id + // As insecure OpenVidu, the user's token can be a random string var userId = randomString(); // --- 1) Get an OpenVidu object and init a session with a sessionId --- @@ -105,10 +106,10 @@ function joinRoom(sessionId) { function leaveRoom() { - // 6) Leave the session by calling 'disconnect' method over the Session object + // --- 6) Leave the session by calling 'disconnect' method over the Session object --- session.disconnect(); + showJoinHideSession(); - window.location.href = window.location.origin; } diff --git a/openvidu-insecure-angular/src/app/app.component.css b/openvidu-insecure-angular/src/app/app.component.css index 251d4786..92b6e6b3 100644 --- a/openvidu-insecure-angular/src/app/app.component.css +++ b/openvidu-insecure-angular/src/app/app.component.css @@ -1,11 +1,23 @@ -#publisher { - float: left; - width: 20%; - margin: 10px; +.stream-container { + padding: 0; } -#subscriber { - float: left; - width: 20%; - margin: 10px; +#session { + padding-top: 70px; + height: 100vh; + height: 100%; + width: 100%; +} + +#session-header { + margin-bottom: 20px; +} + +#session-title { + display: inline-block; +} + +#buttonLeaveSession { + float: right; + margin-top: 20px; } \ No newline at end of file diff --git a/openvidu-insecure-angular/src/app/app.component.html b/openvidu-insecure-angular/src/app/app.component.html index 21461de9..72f9d964 100644 --- a/openvidu-insecure-angular/src/app/app.component.html +++ b/openvidu-insecure-angular/src/app/app.component.html @@ -1,31 +1,36 @@ -
-

Join a video session

-
-

- - -

-

- - -

-

- -

-
-
- -
-

{{sessionId}}

- -
-
- -
+
+
+

Join a video session

+
+

+ + +

+

+ + +

+

+ +

+
-
-
- + +
+
+

{{sessionId}}

+ +
+
+ +
+
+
+ +
+
+ +
\ No newline at end of file diff --git a/openvidu-insecure-angular/src/app/app.component.ts b/openvidu-insecure-angular/src/app/app.component.ts index 40ab1942..246dfd73 100644 --- a/openvidu-insecure-angular/src/app/app.component.ts +++ b/openvidu-insecure-angular/src/app/app.component.ts @@ -1,5 +1,5 @@ import { OpenVidu, Session, Stream } from 'openvidu-browser'; -import { Component, HostListener } from '@angular/core'; +import { Component, HostListener, Input } from '@angular/core'; @Component({ selector: 'app-root', @@ -20,6 +20,9 @@ export class AppComponent { sessionId: string; token: string; + @Input() + mainVideoStream: Stream; + constructor() { this.generateParticipantInfo(); } @@ -63,6 +66,7 @@ export class AppComponent { }); this.localStream = publisher.stream; + this.mainVideoStream = this.localStream; // 5) Publish your stream this.session.publish(publisher); @@ -99,4 +103,8 @@ export class AppComponent { } } + private getMainVideoStream(stream: Stream) { + this.mainVideoStream = stream; + } + } diff --git a/openvidu-insecure-angular/src/app/stream.component.ts b/openvidu-insecure-angular/src/app/stream.component.ts index 099c8b62..51e23dad 100644 --- a/openvidu-insecure-angular/src/app/stream.component.ts +++ b/openvidu-insecure-angular/src/app/stream.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, DoCheck } from '@angular/core'; +import { Component, Input, Output, DoCheck, EventEmitter } from '@angular/core'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { Stream } from 'openvidu-browser'; @@ -9,11 +9,26 @@ import { Stream } from 'openvidu-browser'; video { width: 100%; height: auto; + float: left; + cursor: pointer; + } + div div { + position: absolute; + background: #f8f8f8; + padding-left: 5px; + padding-right: 5px; + color: #777777; + font-weight: bold; + border-bottom-right-radius: 4px; + } + p{ + margin: 0; }`], template: `
- -

{{this.getNicknameTag()}}

+ +

{{this.getNicknameTag()}}

` }) export class StreamComponent implements DoCheck { @@ -21,6 +36,9 @@ export class StreamComponent implements DoCheck { @Input() stream: Stream; + @Output() + mainVideoStream = new EventEmitter(); + videoSrc: SafeUrl = ''; videSrcUnsafe = ''; @@ -37,7 +55,11 @@ export class StreamComponent implements DoCheck { } getNicknameTag() { - return 'Nickname: ' + JSON.parse(this.stream.connection.data).clientData; + return JSON.parse(this.stream.connection.data).clientData; + } + + videoClicked() { + this.mainVideoStream.next(this.stream); } } diff --git a/openvidu-insecure-angular/src/index.html b/openvidu-insecure-angular/src/index.html index 08101d16..dfd40c03 100644 --- a/openvidu-insecure-angular/src/index.html +++ b/openvidu-insecure-angular/src/index.html @@ -1,14 +1,43 @@ - + - OpenviduNg2Example + openvidu-insecure-angular - + + + + + + + + + + + Loading... + + + - + + \ No newline at end of file diff --git a/openvidu-insecure-angular/src/styles.css b/openvidu-insecure-angular/src/styles.css index e50a47e7..a66c0d77 100644 --- a/openvidu-insecure-angular/src/styles.css +++ b/openvidu-insecure-angular/src/styles.css @@ -1 +1,61 @@ -/* You can add global styles to this file, and also import other style files */ \ No newline at end of file +html { + position: relative; + min-height: 100%; +} + +nav { + height: 50px; + position: absolute !important; + width: 100%; +} + +.navbar-header { + width: 100%; +} + +.nav-icon { + padding: 5px 15px 5px 15px; + float: right; +} + +nav i.fa { + font-size: 40px; +} + +.vertical-center { + min-height: 80%; + min-height: 80vh; + display: flex; + align-items: center; +} + +.horizontal-center { + margin: 0 auto; +} + +.footer { + position: absolute; + bottom: 0; + width: 100%; + height: 60px; + background-color: #f8f8f8; +} + +.footer .text-muted { + margin: 20px 0; + float: left; +} + +.footer img { + height: 50px; + float: right; + margin: 5px 0; +} + +#main-video video { + cursor: auto; +} + +#main-video p { + font-size: 22px; +} \ No newline at end of file