openvidu-server dashboard improved

openvidu-server/src/angular/frontend/package.json

@@ -27,7 +27,7 @@
     "hammerjs": "^2.0.8",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4",
-    "openvidu-browser": "1.0.3-beta.1"
+    "openvidu-browser": "1.0.5-beta.3"
   },
   "devDependencies": {
     "@angular/cli": "1.0.2",

openvidu-server/src/angular/frontend/src/app/components/dashboard/dashboard.component.css

@@ -34,7 +34,7 @@ md-card-title button.yellow {
 
 md-spinner {
   position: absolute;
-  top: 55%;
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
@@ -44,7 +44,7 @@ md-spinner {
   height: 100px;
   z-index: 1;
   position: absolute;
-  top: 55%;
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
@@ -82,6 +82,10 @@ md-spinner {
   stroke-dashoffset: 0;
 }
 
+#mirrored-video {
+  position: relative;
+}
+
 
 /* Pure CSS loader */
 
@@ -90,7 +94,7 @@ md-spinner {
   height: 100px;
   z-index: 1;
   position: absolute;
-  top: 55%;
+  top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);

openvidu-server/src/angular/frontend/src/app/components/dashboard/dashboard.component.html

@@ -42,6 +42,7 @@
             </svg>
           </div>
         </div>
+        <div id="msg-chain"><p *ngFor="let msg of msgChain">{{msg}}</p></div>
       </md-card-content>
     </md-card>
   </div>

openvidu-server/src/angular/frontend/src/app/components/dashboard/dashboard.component.ts

@@ -28,6 +28,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   testButton = 'Test';
   tickClass = 'trigger';
   showSpinner = false;
+  msgChain = [];
 
   constructor(private infoService: InfoService, public dialog: MdDialog) {
     // Subscription to info updated event raised by InfoService
@@ -78,12 +79,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   connectToSession(mySessionId: string) {
-    let OV = new OpenVidu();
+    this.msgChain = [];
-    this.session = OV.initSession(mySessionId);
 
-    this.session.on('streamCreated', (event) => {
+    const OV = new OpenVidu();
-      this.session.subscribe(event.stream, 'mirrored-video');
+    this.session = OV.initSession(mySessionId);
-    });
 
     this.testStatus = 'CONNECTING';
     this.testButton = 'Testing...';
@@ -99,19 +98,28 @@ export class DashboardComponent implements OnInit, OnDestroy {
           quality: 'MEDIUM'
         });
 
+        publisherRemote.on('accessAllowed', () => {
+          this.msgChain.push('Camera access allowed');
+        });
+
+        publisherRemote.on('accessDenied', () => {
+          this.endTestVideo();
+          this.msgChain.push('Camera access denied');
+        });
+
         publisherRemote.on('videoElementCreated', (video) => {
-
           this.showSpinner = true;
+          this.msgChain.push('Video element created');
+        });
 
-          video.element.addEventListener('playing', () => {
+        publisherRemote.on('remoteVideoPlaying', (video) => {
-            console.warn('PLAYING!!');
+          this.msgChain.push('Remote video playing');
           this.testButton = 'End test';
           this.testStatus = 'PLAYING';
           this.showSpinner = false;
         });
-        });
 
-        publisherRemote.stream.subscribeToMyRemote();
+        publisherRemote.subscribeToRemote();
         this.session.publish(publisherRemote);
       } else {
         if (error.code === 401) { // User unauthorized error. OpenVidu security is active
@@ -139,6 +147,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.testButton = 'Test';
     this.showSpinner = false;
     this.info = [];
+    this.msgChain = [];
   }
 
   scrollToBottom(): void {