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
This commit is contained in:
juancarmore
parent
3e0a31e8bc
commit
417f3d1111
@ -8,18 +8,57 @@
|
||||
>
|
||||
<ion-icon slot="icon-only" name="logo-github"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button
|
||||
href="https://livekit-tutorials.openvidu.io/tutorials/application-client/ionic/"
|
||||
>
|
||||
<ion-button href="https://livekit-tutorials.openvidu.io/tutorials/application-client/ionic/">
|
||||
<ion-icon slot="icon-only" name="book"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
@if (!room()) {
|
||||
@if (settingUrls()) {
|
||||
<ion-content [fullscreen]="true" class="ion-padding" id="settingUrls">
|
||||
<div id="settings-dialog" class="form">
|
||||
<h2>Configure URLs</h2>
|
||||
<ion-list [formGroup]="urlsForm">
|
||||
<ion-item>
|
||||
<ion-input
|
||||
formControlName="serverUrl"
|
||||
label="Application Server URL"
|
||||
labelPlacement="floating"
|
||||
id="server-url"
|
||||
placeholder="Application Server URL"
|
||||
type="url"
|
||||
required
|
||||
></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-input
|
||||
formControlName="livekitUrl"
|
||||
label="LiveKit URL"
|
||||
labelPlacement="floating"
|
||||
id="livekit-url"
|
||||
placeholder="LiveKit URL"
|
||||
type="url"
|
||||
required
|
||||
></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-button
|
||||
id="save-button"
|
||||
class="form-button"
|
||||
(click)="saveUrls()"
|
||||
[disabled]="!urlsForm.valid"
|
||||
expand="block"
|
||||
shape="round"
|
||||
color="primary"
|
||||
>
|
||||
Save
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
} @else if (!room()) {
|
||||
<ion-content [fullscreen]="true" class="ion-padding" id="join">
|
||||
<div id="join-dialog">
|
||||
<div id="join-dialog" class="form">
|
||||
<h2>Join a Video Room</h2>
|
||||
<ion-list [formGroup]="roomForm">
|
||||
<ion-item>
|
||||
@ -45,22 +84,18 @@
|
||||
></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-button id="join-button" (click)="joinRoom()" [disabled]="!roomForm.valid" expand="block" shape="round" color="primary">
|
||||
<ion-button
|
||||
id="join-button"
|
||||
class="form-button"
|
||||
(click)="joinRoom()"
|
||||
[disabled]="!roomForm.valid"
|
||||
expand="block"
|
||||
shape="round"
|
||||
color="primary"
|
||||
>
|
||||
Join!
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
||||
<ion-fab-button
|
||||
id="settings-button"
|
||||
[disabled]="!roomForm.valid"
|
||||
(click)="presentSettingsAlert()"
|
||||
size="small"
|
||||
color="dark"
|
||||
>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
} @else {
|
||||
<ion-content [scrollEvents]="true" class="ion-padding" id="room">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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<Room | undefined>(undefined);
|
||||
localTrack = signal<LocalVideoTrack | undefined>(undefined);
|
||||
remoteTracksMap = signal<Map<string, TrackInfo>>(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() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user