Fix various modal issues

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+- Some modals automatically closing right after opening them
+- Some modals being rendered incorrectly
+
 ## [1.13.0]
 
 ### Added

src-ui/app/components/event-log/event-log.component.ts

@@ -70,7 +70,7 @@ export class EventLogComponent implements OnInit, AfterViewInit {
         message: 'comp.event-log.clearLogModal.message',
       })
       .subscribe((data) => {
-        if (data.confirmed) {
+        if (data?.confirmed) {
           this.eventLog.clearLog();
         }
       });

src-ui/app/components/mqtt-config-modal/mqtt-config-modal.component.scss

@@ -1,8 +1,5 @@
-:host {
-  top: 16px;
-}
-
 .pane {
+  margin-top: 16px;
   max-height: calc(100vh - 4em - 32px);
 }
 

src-ui/app/components/osc-script-button/osc-script-button.component.ts

@@ -30,7 +30,7 @@ export class OscScriptButtonComponent implements OnInit {
       })
       .pipe(filter((data) => !!data))
       .subscribe((data) => {
-        this.script = data.script?.commands?.length ? data.script : undefined;
+        this.script = data?.script?.commands?.length ? data.script : undefined;
         this.scriptChange.emit(this.script);
       });
   }

src-ui/app/components/osc-script-modal/osc-script-modal.component.scss

@@ -1,10 +1,7 @@
 @import '@fontsource/fira-code/index.css';
 
-:host {
-  top: 16px;
-}
-
 .modal-inner-wrapper {
+  margin-top: 16px;
   height: 100%;
   width: 100%;
   max-width: min(1280px, calc(100% - 4em));

src-ui/app/components/player-list-preset-modal/player-list-preset-modal.component.scss

@@ -1,8 +1,5 @@
-:host {
-  top: 16px;
-}
-
 .pane {
+  margin-top: 16px;
   max-height: calc(100vh - 4em - 32px);
   display: flex;
   flex-direction: column;

src-ui/app/components/player-list-preset-modal/player-list-preset-modal.component.ts

@@ -87,7 +87,7 @@ export class PlayerListPresetModalComponent
         confirmButtonText: 'comp.player-list-preset-modal.overwrite',
       })
       .subscribe((data) => {
-        if (data.confirmed) {
+        if (data?.confirmed) {
           this.saved = true;
           this.appSettings.updateSettings({
             playerListPresets: this.lists.map((list) => {
@@ -123,7 +123,7 @@ export class PlayerListPresetModalComponent
         confirmButtonText: 'comp.player-list-preset-modal.delete',
       })
       .subscribe((data) => {
-        if (data.confirmed) {
+        if (data?.confirmed) {
           this.appSettings.updateSettings({
             playerListPresets: this.lists.filter((list) => list.id !== preset.id),
           });

src-ui/app/components/player-list/player-list.component.ts

@@ -26,9 +26,11 @@ import { noop, vshrink } from '../../utils/animations';
 export class PlayerListComponent implements OnInit {
   @Input() title: TString = 'comp.player-list.title';
   @Output() playerIdsChange = new EventEmitter<string[]>();
+
   @Input() set playerIds(value: string[]) {
     this.refreshPlayerList(value);
   }
+
   playerList: LimitedUser[] = [];
   loggedIn = false;
 
@@ -107,9 +109,7 @@ export class PlayerListComponent implements OnInit {
         },
       })
       .subscribe(async (data) => {
-        if (data.confirmed) {
-          this.playerIds = [];
-        }
+        if (data?.confirmed) this.playerIds = [];
       });
   }
 

src-ui/app/components/vrc-avatar-select-modal/vrc-avatar-select-modal.component.scss

@@ -1,8 +1,5 @@
-:host {
-  top: 16px;
-}
-
 .pane {
+  margin-top: 16px;
   max-height: calc(100vh - 4em - 32px);
 }
 
@@ -66,6 +63,7 @@
     font-weight: 600;
     overflow: hidden;
     width: 100%;
+
     &,
     span {
       min-width: 0;

src-ui/app/components/vrc-avatar-select-modal/vrc-avatar-select-modal.component.ts

@@ -88,7 +88,7 @@ export class VrcAvatarSelectModalComponent
         confirmButtonText: 'shared.modals.refresh',
       })
       .subscribe(async (data) => {
-        if (data.confirmed) await this.fetchAvatars(true);
+        if (data?.confirmed) await this.fetchAvatars(true);
       });
   }
 

src-ui/app/modules/translation/views/translation-editor-view/translation-editor-view.component.ts

@@ -136,7 +136,7 @@ export class TranslationEditorViewComponent {
           }
         )
       );
-      if (!result.confirmed) return;
+      if (!result?.confirmed) return;
     }
     this.entries = [];
     this.translationEditService.reset();

src-ui/app/services/modal.service.ts

@@ -63,45 +63,50 @@ export class ModalService {
     modalComponent: Type<BaseModalComponent<ModalInput, ModalOutput>>,
     input?: ModalInput,
     customOptions: Partial<ModalOptions> = {}
-  ): Observable<ModalOutput> {
+  ): Observable<ModalOutput | undefined> {
     const options: ModalOptions = { ...DEFAULT_MODAL_OPTIONS, ...(customOptions ?? {}) };
-    // Create component
-    const componentRef = this.componentFactoryResolver
-      .resolveComponentFactory(modalComponent)
-      .create(this.injector);
-    this.appRef.attachView(componentRef.hostView);
-    const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
-    document.body.appendChild(domElem);
-    // Update options
-    Object.assign(options, componentRef.instance?.getOptionsOverride() ?? {});
-    // Add to stack
-    const modalRef = { componentRef, options };
-    this.modalStack.push(modalRef);
-    // Set modal wrapper classes
-    domElem.classList.add(options.wrapperDefaultClass);
-    // Set inputs
-    const instance: any = componentRef.instance;
-    Object.assign(instance, input ?? {});
-    // Apply wrapper class after a tick
     return of(null).pipe(
+      // Create component after a tick
       delay(1),
-      tap(() => domElem.classList.add(options.wrapperClass)),
+      map(() => {
+        // Create component
+        const componentRef = this.componentFactoryResolver
+          .resolveComponentFactory(modalComponent)
+          .create(this.injector);
+        this.appRef.attachView(componentRef.hostView);
+        const element = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+        document.body.appendChild(element);
+        // Update options
+        Object.assign(options, componentRef.instance?.getOptionsOverride() ?? {});
+        // Add to stack
+        const modalRef = { componentRef, options };
+        this.modalStack.push(modalRef);
+        // Set modal wrapper classes
+        element.classList.add(options.wrapperDefaultClass);
+        // Set inputs
+        const instance: any = componentRef.instance;
+        Object.assign(instance, input ?? {});
+        return { element, componentRef, modalRef };
+      }),
+      // Apply wrapper class after a tick
+      delay(1),
+      tap(({ element }) => element.classList.add(options.wrapperClass)),
       delay(options.animationDuration),
       // Wait for close signal
       switchMap(
-        () =>
-          instance.close$.pipe(
+        ({ componentRef, element, modalRef }) =>
+          componentRef.instance.close$.pipe(
             filter(Boolean),
             take(1),
             // Remove modal from stack
             tap(() => {
               this.modalStack = this.modalStack.filter((m) => m !== modalRef);
             }),
             // Get the result
-            map(() => instance.result),
+            map(() => componentRef.instance.result),
             // Remove the wrapper class (for animating out)
             tap(() => {
-              domElem.classList.remove(options.wrapperClass);
+              element.classList.remove(options.wrapperClass);
             }),
             // Wait for animation to complete
             delay(options.animationDuration),
@@ -110,7 +115,7 @@ export class ModalService {
               this.appRef.detachView(componentRef.hostView);
               componentRef.destroy();
             })
-          ) as Observable<ModalOutput>
+          ) as Observable<ModalOutput | undefined>
       )
     );
   }

src-ui/app/views/dashboard-view/views/audio-volume-automations-view/audio-device-picker/audio-device-picker.component.scss

@@ -1,9 +1,14 @@
 .pane {
-  height: calc(100% - 4em);
+  margin-top: 16px;
+  max-height: calc(100vh - 4em - 32px);
   margin-right: 2em;
   width: 24em;
 }
 
+.tab-bar {
+  flex-shrink: 0;
+}
+
 .tab {
   flex: 1;
 

src-ui/app/views/dashboard-view/views/gpu-automations-view/gpu-automations-view.component.ts

@@ -103,7 +103,7 @@ export class GpuAutomationsViewComponent implements OnInit {
           cancelButtonText: 'gpu-automations.elevationSidecarModal.cancel',
         })
         .subscribe((data) => {
-          if (data.confirmed) {
+          if (data?.confirmed) {
             this.settingsService.updateSettings({ askForAdminOnStart: true });
           }
           this.sidecar.start();

src-ui/app/views/dashboard-view/views/settings-advanced-view/settings-advanced-view.component.ts

@@ -177,7 +177,7 @@ export class SettingsAdvancedViewComponent {
         },
       })
       .subscribe(async (data) => {
-        if (!data.confirmed) return;
+        if (!data?.confirmed) return;
         info('[Settings] User triggered clearing of persistent storage');
         let askForRelaunch = false;
         await Promise.all(
@@ -242,7 +242,7 @@ export class SettingsAdvancedViewComponent {
               cancelButtonText: 'settings.advanced.persistentData.relaunchModal.later',
             })
             .subscribe(async (data) => {
-              if (!data.confirmed) return;
+              if (!data?.confirmed) return;
               await relaunch();
             });
         }

src-ui/app/views/dashboard-view/views/shutdown-automations-view/tabs/shutdown-automations-settings-tab/shutdown-automations-settings-tab.component.ts

@@ -89,7 +89,7 @@ export class ShutdownAutomationsSettingsTabComponent implements OnInit {
         title: 'shutdown-automations.confirm-modal.title',
         message: 'shutdown-automations.confirm-modal.message',
       })
-      .pipe(filter((result) => result.confirmed))
+      .pipe(filter((result) => !!result?.confirmed))
       .subscribe(() => this.shutdownAutomations.runSequence('MANUAL'));
   }
 

src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-detection-tab/sleep-detection-detection-tab.component.ts

@@ -193,7 +193,7 @@ export class SleepDetectionDetectionTabComponent
           closeOnEscape: false,
         }
       )
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe(async (data) => {
         await this.automationConfigService.updateAutomationConfig<SleepModeEnableForSleepDetectorAutomationConfig>(
           'SLEEP_MODE_ENABLE_FOR_SLEEP_DETECTOR',

src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-disable-tab/sleep-detection-sleep-disable-tab.component.ts

@@ -36,7 +36,7 @@ export class SleepDetectionSleepDisableTabComponent
       .addModal(TimeDisableSleepModeModalComponent, {
         time: this.automationConfigs.SLEEP_MODE_DISABLE_AT_TIME.time,
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         this.automationConfigService.updateAutomationConfig<SleepModeDisableAtTimeAutomationConfig>(
           'SLEEP_MODE_DISABLE_AT_TIME',
@@ -52,7 +52,7 @@ export class SleepDetectionSleepDisableTabComponent
       .addModal(DurationDisableSleepModeModalComponent, {
         duration: this.automationConfigs.SLEEP_MODE_DISABLE_AFTER_TIME.duration,
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         this.automationConfigService.updateAutomationConfig<SleepModeDisableAfterTimeAutomationConfig>(
           'SLEEP_MODE_DISABLE_AFTER_TIME',
@@ -68,7 +68,7 @@ export class SleepDetectionSleepDisableTabComponent
       .addModal(DevicePowerOnDisableSleepModeModalComponent, {
         triggerClasses: this.automationConfigs.SLEEP_MODE_DISABLE_ON_DEVICE_POWER_ON.triggerClasses,
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         this.automationConfigService.updateAutomationConfig<SleepModeDisableOnDevicePowerOnAutomationConfig>(
           'SLEEP_MODE_DISABLE_ON_DEVICE_POWER_ON',
@@ -84,7 +84,7 @@ export class SleepDetectionSleepDisableTabComponent
       .addModal(UprightPoseDisableSleepModeModalComponent, {
         duration: this.automationConfigs.SLEEP_MODE_DISABLE_ON_UPRIGHT_POSE.duration,
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         this.automationConfigService.updateAutomationConfig<SleepModeDisableOnUprightPoseAutomationConfig>(
           'SLEEP_MODE_DISABLE_ON_UPRIGHT_POSE',
@@ -100,7 +100,7 @@ export class SleepDetectionSleepDisableTabComponent
       .addModal(PlayerJoinLeaveDisableSleepModeModalComponent, {
         config: structuredClone(this.automationConfigs.SLEEP_MODE_DISABLE_ON_PLAYER_JOIN_OR_LEAVE),
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         if (!data.config) return;
         this.automationConfigService.updateAutomationConfig<SleepModeDisableOnPlayerJoinOrLeaveAutomationConfig>(

src-ui/app/views/dashboard-view/views/sleep-detection-view/tabs/sleep-detection-sleep-enable-tab/sleep-detection-sleep-enable-tab.component.ts

@@ -45,7 +45,7 @@ export class SleepDetectionSleepEnableTabComponent
       .addModal(TimeEnableSleepModeModalComponent, {
         time: this.automationConfigs.SLEEP_MODE_ENABLE_AT_TIME.time,
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         this.automationConfigService.updateAutomationConfig<SleepModeEnableAtTimeAutomationConfig>(
           'SLEEP_MODE_ENABLE_AT_TIME',
@@ -63,7 +63,7 @@ export class SleepDetectionSleepEnableTabComponent
           this.automationConfigs.SLEEP_MODE_ENABLE_AT_BATTERY_PERCENTAGE.triggerClasses,
         threshold: this.automationConfigs.SLEEP_MODE_ENABLE_AT_BATTERY_PERCENTAGE.threshold,
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         this.automationConfigService.updateAutomationConfig<SleepModeEnableAtBatteryPercentageAutomationConfig>(
           'SLEEP_MODE_ENABLE_AT_BATTERY_PERCENTAGE',
@@ -82,7 +82,7 @@ export class SleepDetectionSleepEnableTabComponent
         threshold: config.heartRateThreshold,
         duration: config.periodDuration,
       })
-      .pipe(filter((data) => !!data))
+      .pipe(filter(Boolean))
       .subscribe((data) => {
         this.automationConfigService.updateAutomationConfig<SleepModeEnableOnHeartRateCalmPeriodAutomationConfig>(
           'SLEEP_MODE_ENABLE_ON_HEART_RATE_CALM_PERIOD',

src-ui/styles/modals.scss

@@ -43,6 +43,7 @@
   align-items: center;
   justify-content: flex-end;
   backdrop-filter: blur(5px);
+  border-radius: var(--window-border-radius);
 
   &.in {
     opacity: 1;
@@ -66,6 +67,7 @@
   align-items: flex-end;
   justify-content: flex-end;
   pointer-events: none;
+  border-radius: var(--window-border-radius);
 
   &.in {
     opacity: 1;