openvidu-ionic: settings alert to change OpenVidu Server config

OpenVidu · Jan 24, 2019 · 49313a4 · 49313a4
1 parent fbd96ec
commit 49313a4
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git a/openvidu-ionic/src/app/app.component.html b/openvidu-ionic/src/app/app.component.html
@@ -12,7 +12,7 @@
   </ion-header>
 
   <ion-content padding *ngIf="!session">
-    
+
     <div id="img-div"><img src="assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
     <h1 align="center" id="title">Join a video session</h1>
     <ion-item>
@@ -30,6 +30,13 @@ <h1 align="center" id="title">Join a video session</h1>
       Join
     </ion-button>
 
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button id="settings-button" [disabled]="!mySessionId && !myUserName" (click)="presentSettingsAlert()"
+        mini color="dark">
+        <ion-icon name="settings"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
   </ion-content>
 
   <ion-content [scrollEvents]="true" (ionScroll)="refreshVideos()" *ngIf="session">

diff --git a/openvidu-ionic/src/app/app.component.ts b/openvidu-ionic/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component, HostListener, OnDestroy } from '@angular/core';
 import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
-import { Platform } from '@ionic/angular';
+import { Platform, AlertController } from '@ionic/angular';
 import { OpenVidu, Publisher, Session, StreamEvent, StreamManager, Subscriber } from 'openvidu-browser';
 import { throwError as observableThrowError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -41,6 +41,7 @@ export class AppComponent implements OnDestroy {
         private statusBar: StatusBar,
         private httpClient: HttpClient,
         private androidPermissions: AndroidPermissions,
+        public alertController: AlertController
     ) {
         this.initializeApp();
         this.generateParticipantInfo();
@@ -152,7 +153,7 @@ export class AppComponent implements OnDestroy {
         // --- 6) Publish your stream ---
 
         this.session.publish(publisher).then(() => {
-           // Store our Publisher
+            // Store our Publisher
             this.publisher = publisher;
         });
     }
@@ -251,6 +252,41 @@ export class AppComponent implements OnDestroy {
         }
     }
 
+    async presentSettingsAlert() {
+        const alert = await this.alertController.create({
+            header: 'OpenVidu Server config',
+            inputs: [
+                {
+                    name: 'url',
+                    type: 'text',
+                    value: 'https://demos.openvidu.io:4443/',
+                    placeholder: 'URL'
+                },
+                {
+                    name: 'secret',
+                    type: 'text',
+                    value: 'MY_SECRET',
+                    placeholder: 'Secret'
+                }
+            ],
+            buttons: [
+                {
+                    text: 'Cancel',
+                    role: 'cancel',
+                    cssClass: 'secondary'
+                }, {
+                    text: 'Ok',
+                    handler: data => {
+                        this.OPENVIDU_SERVER_URL = data.url;
+                        this.OPENVIDU_SERVER_SECRET = data.secret;
+                    }
+                }
+            ]
+        });
+
+        await alert.present();
+    }
+
     /*
      * --------------------------
      * SERVER-SIDE RESPONSIBILITY