Move voice selection to seperate page.

src/app/settings/index.ts

@@ -4,4 +4,5 @@ export * from './about.page';
 export * from './logging.page';
 export * from './licenses.page';
 export * from './connection.page';
-export * from './notifications.page';
+export * from './notifications.page';
+export * from './voice.page';

src/app/settings/settings.module.ts

@@ -14,6 +14,7 @@ import { LoggingMenu } from './logging.menu';
 import { LoggingPage } from './logging.page';
 import { NotificationsPage } from './notifications.page';
 import { SettingsPage } from './settings.page';
+import { VoicePage } from './voice.page';
 
 const routes: Routes = [
   {
@@ -39,6 +40,10 @@ const routes: Routes = [
   {
     path: 'notifications',
     component: NotificationsPage
+  },
+  {
+    path: 'voice',
+    component: VoicePage
   }
 ];
 
@@ -50,6 +55,7 @@ const routes: Routes = [
     LoggingMenu,
     LoggingPage,
     NotificationsPage,
+    VoicePage,
     SettingsPage
   ],
   exports: [

src/app/settings/settings.page.html

@@ -12,7 +12,7 @@
 <ion-content>
   <ion-list lines="full">
     <ion-item>
-      <ion-select label="{{'Language' | translate}}" [(ngModel)]="options.language" (ionChange)="update()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
+      <ion-select label="{{'Language' | translate}}" [(ngModel)]="options.language" (ionChange)="updateLanguage()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
         <!-- ion-option seems to require translate attribute value; see
              https://github.com/ionic-team/ionic/issues/8561#issuecomment-391079689
           -->
@@ -25,11 +25,8 @@
         <ion-select-option value="sk">Slovak</ion-select-option>
       </ion-select>
     </ion-item>
-    <ion-item>
-      <ion-select label="{{'Voice' | translate}}" [disabled]="!options.language || voices.length < 2" [(ngModel)]="options.voice" (ionChange)="updateAndGreet()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
-        <ion-select-option translate value="">Default</ion-select-option>
-        <ion-select-option *ngFor="let v of voices" value="{{v.identifier}}">{{v.name}}</ion-select-option>
-      </ion-select>
+    <ion-item routerLink="/settings/voice">
+      <ion-label translate>Voice</ion-label>
     </ion-item>
     <ion-item routerLink="/settings/connection">
       <ion-label translate>Connection</ion-label>

src/app/settings/settings.page.ts

@@ -1,7 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
-import { TranslateService } from '@ngx-translate/core';
-
 import { AboutPage } from './about.page';
 import { ConnectionPage } from './connection.page';
 import { LicensesPage } from './licenses.page';
@@ -15,24 +13,16 @@ import { I18nAlertService, SpeechService } from '../services';
   templateUrl: 'settings.page.html'
 })
 export class SettingsPage implements OnDestroy, OnInit {
-  aboutPage = AboutPage;
-  connectionPage = ConnectionPage;
-  licensesPage = LicensesPage;
-  loggingPage = LoggingPage;
-  notificationsPage = NotificationsPage;
 
   options = new Options();
 
-  voices = [];
-
   private subscription: any;
 
-  constructor(private alert: I18nAlertService, private settings: AppSettings, private speech: SpeechService, private translate: TranslateService) {}
+  constructor(private alert: I18nAlertService, private settings: AppSettings, private speech: SpeechService) {}
 
   ngOnInit() {
     this.subscription = this.settings.getOptions().subscribe(options => {
       this.options = options;
-      this.updateVoices();
     });
   }
 
@@ -53,27 +43,15 @@ export class SettingsPage implements OnDestroy, OnInit {
     });
   }
 
-  async update() {
-    await this.updateVoices();
-    return this.settings.setOptions(this.options);
-  }
-
-  async updateVoices() {
+  async updateLanguage() {
     if (this.options.language) {
-      this.voices = await this.speech.getVoices(this.options.language);
-      if (!this.voices.find(v => v.identifier == this.options.voice)) {
+      let voices = await this.speech.getVoices(this.options.language);
+      if (!voices.find(v => v.identifier == this.options.voice)) {
         this.options.voice = "";
       }
     } else {
-      this.voices = [];
       this.options.voice = "";
     }
-  }
-
-  async updateAndGreet() {
-    await this.update();
-    // TODO: trigger when voice is selected
-    const greeting = this.translate.instant("notifications.greeting");
-    this.speech.speak(greeting);
+    return this.settings.setOptions(this.options);
   }
 }

src/app/settings/voice.page.html

@@ -0,0 +1,24 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      <span translate>Voice</span>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-select label="{{'Voice' | translate}}" [disabled]="!options.language || voices.length < 2" [(ngModel)]="options.voice" (ionChange)="update()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
+        <ion-select-option translate value="">Default</ion-select-option>
+        <ion-select-option *ngFor="let v of voices" value="{{v.identifier}}">{{v.name}}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-button (click)="test()">Test</ion-button>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/settings/voice.page.ts

@@ -0,0 +1,40 @@
+import { Component, OnDestroy } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { AppSettings, Options } from '../app-settings';
+import { SpeechService } from '../services';
+
+
+@Component({
+  templateUrl: 'voice.page.html'
+})
+export class VoicePage implements OnDestroy {
+
+  options = new Options();
+
+  voices = [];
+
+  private subscription: any;
+
+  constructor(private settings: AppSettings, private speech: SpeechService, private translate: TranslateService) {}
+
+  ngOnInit() {
+    this.subscription = this.settings.getOptions().subscribe(options => {
+      this.options = options;
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  async update() {
+    return this.settings.setOptions(this.options);
+  }
+
+  async test() {
+    const greeting = this.translate.instant("notifications.greeting");
+    this.speech.speak(greeting);
+  }
+}