Always show language selection modal if the user has not picked a lan…

…guage

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Separated sleeping animations into its own navigation item.
 - Remote images now fade in smoothly upon load.
+- Language selection modal now always shows if the user has not picked a language.
 - Updated splash screen.
 - Updated to Angular 16.
 - Updated to Tauri 1.3.
@@ -30,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Stopped brightness automations from triggering when there is no headset available.
+- Prevent the update service from being initialised until after language selection.
 
 ## [1.6.0]
 

src/app/app.module.ts

@@ -54,7 +54,7 @@ import { UpdateModalComponent } from './components/update-modal/update-modal.com
 import { TelemetryService } from './services/telemetry.service';
 import { LanguageSelectModalComponent } from './components/language-select-modal/language-select-modal.component';
 import { AppSettingsService } from './services/app-settings.service';
-import { filter, firstValueFrom } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { VRChatService } from './services/vrchat.service';
 import { SettingsGeneralTabComponent } from './views/dashboard-view/views/settings-view/settings-general-tab/settings-general-tab.component';
 import { SettingsUpdatesTabComponent } from './views/dashboard-view/views/settings-view/settings-updates-tab/settings-updates-tab.component';
@@ -249,8 +249,8 @@ export class AppModule {
         await this.preloadAssets();
         // Initialize app settings and event log
         await Promise.all([this.appSettingsService.init(), this.eventLog.init()]);
-        // Initialize telemetry and updates
-        await Promise.all([this.updateService.init(), this.telemetryService.init()]);
+        // Initialize telemetry
+        await Promise.all([this.telemetryService.init()]);
         // Initialize general utility services
         await Promise.all([
           this.openvrService.init(),
@@ -298,17 +298,19 @@ export class AppModule {
       })(),
       SPLASH_MIN_DURATION
     );
+    // Close the splash screen after initialization
     await invoke('close_splashscreen');
-    // Language selection modal
-    this.appSettingsService.loadedDefaults
-      .pipe(filter((loadedDefaults) => loadedDefaults))
-      .subscribe(() => {
-        this.modalService
-          .addModal(LanguageSelectModalComponent, void 0, {
-            closeOnEscape: false,
-          })
-          .subscribe();
-      });
+    // Show language selection modal if user hasn't picked a language yet
+    const settings = await firstValueFrom(this.appSettingsService.settings);
+    if (!settings.userLanguagePicked) {
+      await firstValueFrom(
+        this.modalService.addModal(LanguageSelectModalComponent, void 0, {
+          closeOnEscape: false,
+        })
+      );
+    }
+    // Only initialize update service after language selection
+    await this.updateService.init();
   }
 
   async preloadAssets() {

src/app/components/friend-selection-modal/friend-selection-modal.component.html

@@ -14,7 +14,7 @@
     </div>
     <div class="pills">
       <span class="none-selected" @fade *ngIf="!selection.length" translate
-      >comp.friend-selection-modal.noFriendsSelected</span
+        >comp.friend-selection-modal.noFriendsSelected</span
       >
       <div class="pill" *ngFor="let item of selection" (click)="removeItem(item)" @hshrink>
         <div class="pill-label">{{ item.type === 'player' ? item.playerName : 'GROUP' }}</div>
@@ -33,10 +33,10 @@
         </div>
         <div class="friend-label">{{ result.displayName }}</div>
         <button class="btn" *ngIf="!isSelected(result)" (click)="addFriend(result)" @hshrink
-        ><i class="material-icons-round">add</i></button
+          ><i class="material-icons-round">add</i></button
         >
         <button class="btn" *ngIf="isSelected(result)" disabled @hshrink
-        ><i class="material-icons-round">check</i></button
+          ><i class="material-icons-round">check</i></button
         >
       </div>
     </div>

src/app/components/language-select-modal/language-select-modal.component.ts

@@ -18,7 +18,7 @@ export class LanguageSelectModalComponent extends BaseModalComponent<void, void>
   }
 
   async selectLanguage(language: { code: string; label: string; flag?: string }) {
-    this.settingsService.updateSettings({ userLanguage: language.code });
+    this.settingsService.updateSettings({ userLanguage: language.code, userLanguagePicked: true });
     await this.close();
   }
 }

src/app/migrations/app-settings.migrations.ts

@@ -7,6 +7,7 @@ const migrations: { [v: number]: (data: any) => any } = {
   2: from1to2,
   3: from2to3,
   4: from3to4,
+  5: from4to5,
 };
 
 export function migrateAppSettings(data: any): AppSettings {
@@ -34,6 +35,12 @@ function toLatest(data: any): any {
   return data;
 }
 
+function from4to5(data: any): any {
+  data.version = 5;
+  data.userLanguagePicked = APP_SETTINGS_DEFAULT.userLanguagePicked;
+  return data;
+}
+
 function from3to4(data: any): any {
   data.version = 4;
   if (data.userLanguage === 'jp') {

src/app/models/settings.ts

@@ -1,6 +1,7 @@
 export interface AppSettings {
-  version: 4;
+  version: 5;
   userLanguage: string;
+  userLanguagePicked: boolean;
   lighthouseConsolePath: string;
   askForAdminOnStart: boolean;
   oscSendingHost: string;
@@ -12,8 +13,9 @@ export interface AppSettings {
 }
 
 export const APP_SETTINGS_DEFAULT: AppSettings = {
-  version: 4,
+  version: 5,
   userLanguage: 'en',
+  userLanguagePicked: false,
   askForAdminOnStart: false,
   lighthouseConsolePath:
     'C:\\Program Files (x86)\\Steam\\steamapps\\common\\SteamVR\\tools\\lighthouse\\bin\\win64\\lighthouse_console.exe',

src/app/services/app-settings.service.ts

@@ -16,8 +16,10 @@ export class AppSettingsService {
     APP_SETTINGS_DEFAULT
   );
   settings: Observable<AppSettings> = this._settings.asObservable();
-  private _loadedDefaults: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  loadedDefaults: Observable<boolean> = this._loadedDefaults.asObservable();
+  private _loadedDefaults: BehaviorSubject<boolean | undefined> = new BehaviorSubject<
+    boolean | undefined
+  >(undefined);
+  loadedDefaults: Observable<boolean | undefined> = this._loadedDefaults.asObservable();
 
   constructor(private translateService: TranslateService) {}
 
@@ -47,7 +49,7 @@ export class AppSettingsService {
     }
     this._settings.next(settings);
     await this.saveSettings();
-    if (loadedDefaults) this._loadedDefaults.next(true);
+    this._loadedDefaults.next(loadedDefaults);
   }
 
   async saveSettings() {

src/app/views/dashboard-view/dashboard-view.component.html

@@ -1,5 +1,5 @@
 <div class="bg" *ngFor="let img of [backgroundImage]" @fade>
-  <img [imgSmoothLoader]="img">
+  <img [imgSmoothLoader]="img" />
 </div>
 <div class="main-pane">
   <app-dashboard-navbar></app-dashboard-navbar>

src/app/views/dashboard-view/views/auto-invite-request-accept-view/auto-invite-request-accept-view.component.html

@@ -82,10 +82,10 @@
 <div class="player-list-wrapper" *ngIf="config.listMode !== 'DISABLED'" @hshrink>
   <div class="pane player-list">
     <div class="pane-title" *ngIf="config.listMode === 'WHITELIST'" translate
-    >auto-invite-request-accept.whitelist
+      >auto-invite-request-accept.whitelist
     </div>
     <div class="pane-title" *ngIf="config.listMode === 'BLACKLIST'" translate
-    >auto-invite-request-accept.blacklist
+      >auto-invite-request-accept.blacklist
     </div>
     <div class="pane-content">
       <div class="players-list" @noop>

src/app/views/dashboard-view/views/osc-automations-view/osc-automations-view.component.html

@@ -32,6 +32,5 @@
         </div>
       </div>
     </div>
-
   </div>
 </div>