From 417f3d1111aea817ff82b0b304825c93f811468e Mon Sep 17 00:00:00 2001 From: juancarmore Date: Wed, 31 Jul 2024 19:24:39 +0200 Subject: [PATCH] Refactor Ionic tutorial to ask the user for setting URLs in case they are not set in code and the app is launched in a mobile device Previously there was a settings button that opened a dialog to modify the URLs. Now that button has been removed and when the app starts, it checks if the variables are not configured and app is launched in a mobile device, and if so, it shows a new form to configure them --- .../openvidu-ionic/src/app/app.component.html | 71 ++++++++++++---- .../openvidu-ionic/src/app/app.component.scss | 4 +- .../openvidu-ionic/src/app/app.component.ts | 84 ++++++------------- 3 files changed, 82 insertions(+), 77 deletions(-) diff --git a/application-client/openvidu-ionic/src/app/app.component.html b/application-client/openvidu-ionic/src/app/app.component.html index 587678be..f5b000ae 100644 --- a/application-client/openvidu-ionic/src/app/app.component.html +++ b/application-client/openvidu-ionic/src/app/app.component.html @@ -8,18 +8,57 @@ > - + - @if (!room()) { + @if (settingUrls()) { + +
+

Configure URLs

+ + + + + + + + + + Save + +
+ + } @else if (!room()) { -
+

Join a Video Room

@@ -45,22 +84,18 @@ > - + Join!
- - - - - - } @else { diff --git a/application-client/openvidu-ionic/src/app/app.component.scss b/application-client/openvidu-ionic/src/app/app.component.scss index bfa8f74e..2f36b419 100644 --- a/application-client/openvidu-ionic/src/app/app.component.scss +++ b/application-client/openvidu-ionic/src/app/app.component.scss @@ -2,14 +2,14 @@ font-weight: bold; } -#join-dialog h2 { +.form h2 { font-weight: bold; text-align: center; margin-bottom: 10px; font-size: 2em; } -#join-button { +.form-button { margin-top: 20px; } diff --git a/application-client/openvidu-ionic/src/app/app.component.ts b/application-client/openvidu-ionic/src/app/app.component.ts index 6670cc10..4504ca51 100644 --- a/application-client/openvidu-ionic/src/app/app.component.ts +++ b/application-client/openvidu-ionic/src/app/app.component.ts @@ -39,7 +39,8 @@ type TrackInfo = { }; // For local development launching app in web browser, leave these variables empty -// For production or when launching app in device, configure them with correct URLs +// For production or when launching app in a mobile device, configure them with correct URLs +// If you leave them empty when launching app in a mobile device, the user will be prompted to enter the URLs var APPLICATION_SERVER_URL = ''; var LIVEKIT_URL = ''; @@ -74,10 +75,17 @@ export class AppComponent implements OnDestroy { participantName: new FormControl('Participant' + Math.floor(Math.random() * 100), Validators.required), }); + urlsForm = new FormGroup({ + serverUrl: new FormControl('', Validators.required), + livekitUrl: new FormControl('', Validators.required), + }); + room = signal(undefined); localTrack = signal(undefined); remoteTracksMap = signal>(new Map()); + settingUrls = signal(false); + constructor(private httpClient: HttpClient, private platform: Platform, private alertController: AlertController) { this.configureUrls(); addIcons({ @@ -88,28 +96,28 @@ export class AppComponent implements OnDestroy { } configureUrls() { - const deviceMode = this.platform.is('hybrid'); + const mobileMode = this.platform.is('hybrid'); - // If APPLICATION_SERVER_URL is not configured and app is not launched in device mode, - // use default value from local development - if (!APPLICATION_SERVER_URL) { - if (deviceMode) { - APPLICATION_SERVER_URL = 'https://{YOUR-LAN-IP}.openvidu-local.dev:6443/'; - } else { + // If URLs are not configured and app is launched in a mobile device, + // prompt the user to configure them + if (mobileMode) { + if (!APPLICATION_SERVER_URL || !LIVEKIT_URL) { + this.settingUrls.set(true); + } + } else { + // If APPLICATION_SERVER_URL is not configured and app is not launched in a mobile device, + // use default value from local development + if (!APPLICATION_SERVER_URL) { if (window.location.hostname === 'localhost') { APPLICATION_SERVER_URL = 'http://localhost:6080/'; } else { APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/'; } } - } - // If LIVEKIT_URL is not configured and app is not launched in device mode, - // use default value from local development - if (!LIVEKIT_URL) { - if (deviceMode) { - LIVEKIT_URL = 'wss://{YOUR-LAN-IP}.openvidu-local.dev:7443/'; - } else { + // If LIVEKIT_URL is not configured and app is not launched in a mobile device, + // use default value from local development + if (!LIVEKIT_URL) { if (window.location.hostname === 'localhost') { LIVEKIT_URL = 'ws://localhost:7880/'; } else { @@ -119,48 +127,10 @@ export class AppComponent implements OnDestroy { } } - /** - * This method allows to change the LiveKit URL and the application server URL - * from the application itself. This is useful for development purposes. - */ - async presentSettingsAlert() { - const alert = await this.alertController.create({ - header: 'Configure URLs', - inputs: [ - { - name: 'serverUrl', - type: 'text', - value: APPLICATION_SERVER_URL, - placeholder: 'Application Server URL', - id: 'server-url-input', - }, - { - name: 'livekitUrl', - type: 'text', - value: LIVEKIT_URL, - placeholder: 'LiveKit URL', - id: 'livekit-url-input', - }, - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - id: 'cancel-btn', - cssClass: 'secondary', - }, - { - text: 'Ok', - id: 'ok-btn', - handler: (data) => { - APPLICATION_SERVER_URL = data.serverUrl; - LIVEKIT_URL = data.livekitUrl; - }, - }, - ], - }); - - await alert.present(); + saveUrls() { + APPLICATION_SERVER_URL = this.urlsForm.value.serverUrl!; + LIVEKIT_URL = this.urlsForm.value.livekitUrl!; + this.settingUrls.set(false); } async joinRoom() {