dialect WIP

packages/client/src/app/actions/settings.actions.ts

@@ -1,5 +1,5 @@
 import { createAction, props } from "@ngrx/store";
-import { AppTheme, FontFamily, Language, LineHeight, SettingsState, TextFlow, TextSize, TranscriptionSettings } from "../modules/settings/models/settings.model";
+import { AppTheme, FontFamily, InterfaceLanguage, LineHeight, RecognitionDialect, SettingsState, TextFlow, TextSize, TranscriptionSettings } from "../modules/settings/models/settings.model";
 
 
 export const initSettings = createAction('[Settings] Init');
@@ -9,9 +9,13 @@ export const initSettingsComplete = createAction('[Settings] Init Complete', pro
 export const setTheme = createAction('[Settings] Set Theme', props<{theme: AppTheme}>());
 export const setThemeComplete = createAction('[Settings] Set Theme Complete');
 
-export const setLanguage = createAction('[Settings] Set Language', props<{language: Language}>());
+export const setLanguage = createAction('[Settings] Set Language', props<{language: InterfaceLanguage}>());
 export const setLanguageComplete = createAction('[Settings] Set Language Complete');
 
+export const setDialect = createAction('[Settings] Set Dialect', props<{dialect: RecognitionDialect}>());
+export const setDefaultDialect = createAction('[Settings] Set Dialect', props<{dialect: RecognitionDialect}>());
+export const setDialectComplete = createAction('[Settings] Set Dialect Complete');
+
 export const updateWakeLockEnabled = createAction('[Settings] Update WakeLock Enabled', props<{enabled: boolean}>());
 export const updateWakeLockEnabledSuccess = createAction('[Settings] Update WakeLock Enabled Success');
 export const updateWakeLockEnabledFailure = createAction('[Settings] Update WakeLock Enabled Failure', props<{error: string}>());

packages/client/src/app/app.component.ts

@@ -4,13 +4,14 @@ import { SwUpdate } from '@angular/service-worker';
 import { Store, select } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { AppActions, AppState } from './models/app.model';
-import { AppTheme, AvailableLanguages, Language } from './modules/settings/models/settings.model';
+import { AppTheme, AvailableLanguages, InterfaceLanguage, RecognitionDialect, SupportedDialects } from './modules/settings/models/settings.model';
 import { windowControlsOverlaySelector } from './selectors/app.selector';
 import { languageSelector, selectTranscriptionEnabled, themeSelector } from './selectors/settings.selector';
 import { AuthActions } from './actions/auth.actions';
 import { selectUserId } from './selectors/user.selector';
 import { RecognitionActions } from './actions/recogntion.actions';
 import { selectUserLoggedIn } from './selectors/auth.selectors';
+import { setDefaultDialect } from './actions/settings.actions';
 
 @Component({
   selector: 'app-root',
@@ -22,20 +23,37 @@ export class AppComponent {
   public renderSwUpdateNotice: WritableSignal<boolean> = signal(false);
   public theme$: Signal<AppTheme>;
   public windowControlsOverlay: Signal<boolean | undefined>;
-  
+
   constructor(private store: Store<AppState>,
               private renderer: Renderer2,
               private updates: SwUpdate,
               private translate: TranslateService) {
 
-    AvailableLanguages.forEach((lang) => this.translate.reloadLang(lang))
-    this.translate.setDefaultLang('en');
+    AvailableLanguages.forEach((lang) => this.translate.reloadLang(lang));
+
+		if ('languages' in navigator) {
+			const defaultLanguage = navigator.languages.find((l) => AvailableLanguages.some((al) => al === l));
+
+			if (defaultLanguage) {
+				this.translate.setDefaultLang('en');
+			} else {
+				this.translate.setDefaultLang('en');
+			}
+			const defaultDialect = navigator.languages.find((l) => SupportedDialects.some((sd) => sd === l)) as RecognitionDialect | undefined;
+			if (defaultDialect) {
+
+				this.store.dispatch(setDefaultDialect({dialect: defaultDialect}))
+			}
+		} else {
+			this.translate.setDefaultLang('en');
+		}
+
 
     this.theme$ = toSignal(this.store.select(themeSelector)) as Signal<AppTheme>;
-    const languageChanged = toSignal(this.store.pipe(select(languageSelector))) as Signal<Language>;
+    const languageChanged = toSignal(this.store.pipe(select(languageSelector))) as Signal<InterfaceLanguage>;
     effect(() => this.translate.use(languageChanged()))
     effect(() => this.renderer.setAttribute(document.documentElement, 'data-theme', this.theme$()));
-    
+
     this.store.dispatch(AppActions.initAppearance());
     this.store.dispatch(AppActions.checkUserAgent());
     this.store.dispatch(AuthActions.validate());
@@ -45,7 +63,7 @@ export class AppComponent {
     if ('windowControlsOverlay' in navigator) {
       // @ts-expect-error navigator.windowControlsOverlay is of type unknown
       this.store.dispatch(AppActions.updateWindowsOverlayState({visible: navigator.windowControlsOverlay.visible}));
-      
+
       // @ts-expect-error navigator.windowControlsOverlay is of type unknown
       navigator.windowControlsOverlay.addEventListener('geometrychange', (event: { isTrusted: boolean; type: 'geometrychange', visible: boolean}) => {
         this.store.dispatch(AppActions.updateWindowsOverlayState({visible: event.visible}));
@@ -58,7 +76,7 @@ export class AppComponent {
         if (relatedApps.length) {
           console.log('relatedApps', relatedApps);
         }
-      }) 
+      })
     }
 
     let transcriptDbInitialized = false;

packages/client/src/app/effects/recognition.effects.ts

@@ -1,20 +1,18 @@
 import { Inject, Injectable } from "@angular/core";
 import { Actions, createEffect, ofType } from "@ngrx/effects";
-import { Store } from "@ngrx/store";
 import { catchError, from, map, of, switchMap } from "rxjs";
-import { AppActions, AppState } from "../models/app.model";
+import { RecognitionActions } from '../actions/recogntion.actions';
+import { AppActions } from "../models/app.model";
 import { RecognitionService } from "../modules/media/services/recognition.service";
 import { TranscriptionService } from "../modules/media/services/transcription.service";
-import { RecognitionActions } from '../actions/recogntion.actions';
 
 @Injectable()
 export class RecognitionEffects {
   constructor(private actions$: Actions,
-              private store: Store<AppState>,
               @Inject(RecognitionService) private recognitionService: RecognitionService,
               @Inject(TranscriptionService) private transcription: TranscriptionService) {}
 
-  connectRecognition$ = createEffect(() => 
+  connectRecognition$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RecognitionActions.connect),
       map((props) => this.recognitionService.connectToStream(props.id)),
@@ -23,7 +21,7 @@ export class RecognitionEffects {
     )
   )
 
-  disconnectRecognition$ = createEffect(() => 
+  disconnectRecognition$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RecognitionActions.disconnect),
       map((props) => this.recognitionService.disconnectFromStream(props.id)),
@@ -32,15 +30,15 @@ export class RecognitionEffects {
     )
   )
 
-  pauseRecognition$ = createEffect(() => 
+  pauseRecognition$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RecognitionActions.pause),
       map(() => this.recognitionService.pauseRecognition()),
       map(() => RecognitionActions.pauseSuccess())
     )
   )
 
-  pauseRecognitionOnError$ = createEffect(() => 
+  pauseRecognitionOnError$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RecognitionActions.error),
       map(() => this.recognitionService.pauseRecognition()),
@@ -96,7 +94,7 @@ export class RecognitionEffects {
     )
   )
 
-  finalizeTranscript$ = createEffect(() => 
+  finalizeTranscript$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RecognitionActions.finalizeTranscript),
       switchMap(() => this.transcription.finalizeTranscript()

packages/client/src/app/effects/settings.effects.ts

@@ -1,14 +1,13 @@
 import { Injectable } from "@angular/core";
 import { Actions, createEffect, ofType } from "@ngrx/effects";
+import { Store } from "@ngrx/store";
+import { TranslateService } from '@ngx-translate/core';
 import { catchError, map, of, switchMap, tap, withLatestFrom } from "rxjs";
+import { AppState } from "../models/app.model";
 import { SettingsActions, SettingsState } from "../modules/settings/models/settings.model";
-import { StorageService } from "../services/storage.service";
-import { TranslateService } from '@ngx-translate/core'
 import { defaultSettingsState } from "../reducers/settings.reducer";
-import { AppState } from "../models/app.model";
-import { Store } from "@ngrx/store";
 import { selectTranscriptionSettings } from "../selectors/settings.selector";
-import { RecognitionActions } from '../actions/recogntion.actions';
+import { StorageService } from "../services/storage.service";
 
 @Injectable()
 export class SettingsEffects {
@@ -39,23 +38,31 @@ export class SettingsEffects {
     )
   )
 
-  applyTheme$ = createEffect(() => 
+  applyTheme$ = createEffect(() =>
     this.actions$.pipe(
       ofType(SettingsActions.setTheme),
       map(({theme}) => this.storage.update('settings', 'theme', theme)),
       map(() => SettingsActions.setThemeComplete())
     )
   )
 
-  applyLanguage$ = createEffect(() => 
+  applyLanguage$ = createEffect(() =>
     this.actions$.pipe(
       ofType(SettingsActions.setLanguage),
-      tap(({language}) => this.storage.update('settings', 'lang',  language)),
+      tap(({language}) => this.storage.update('settings', 'lang', language)),
       switchMap(({language}) => this.translate.use(language)),
       map(() => SettingsActions.setLanguageComplete())
     )
   )
 
+	applyDialect$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(SettingsActions.setDialect),
+      tap(({dialect}) => this.storage.update('settings', 'dialect', dialect)),
+      map(() => SettingsActions.setDialectComplete())
+    )
+  )
+
   applyWakeLock$ = createEffect(() =>
     this.actions$.pipe(
       ofType(SettingsActions.updateWakeLockEnabled),
@@ -83,7 +90,7 @@ export class SettingsEffects {
     )
   )
 
-  saveTextFlow$ = createEffect(() => 
+  saveTextFlow$ = createEffect(() =>
     this.actions$.pipe(
       ofType(SettingsActions.setTextFlow),
       map(({flow}) => this.storage.update('settings', 'textFlow', flow)),
@@ -110,7 +117,7 @@ export class SettingsEffects {
     )
   )
 
-  saveTranscriptionSettings$ = createEffect(() => 
+  saveTranscriptionSettings$ = createEffect(() =>
     this.actions$.pipe(
       ofType(SettingsActions.saveTranscriptionSettings),
       withLatestFrom(this.store.select(selectTranscriptionSettings)),
@@ -138,5 +145,5 @@ export class SettingsEffects {
     }
     return defaults;
   }
-  
+
 }

packages/client/src/app/modules/media/components/recognition-render/recognition-render.component.ts

@@ -59,9 +59,9 @@ export class RecognitionRenderComponent implements OnInit, OnDestroy {
       return this.state()?.status != RecognitionStatus.uninitialized;
     });
     this.error = toSignal(this.store.select(recognitionErrorSelector));
-    
+
     this.textFlowDown = toSignal(this.store.pipe(
-      select(selectTextFlow), 
+      select(selectTextFlow),
       map((flow: TextFlow) => (flow === 'top-down'))));
 
     if (this.fullScreen.isAvailable) {