diff --git a/src/client/src/app/components/app/menu/menu.component.ts b/src/client/src/app/components/app/menu/menu.component.ts index 13bd204..f9afa13 100644 --- a/src/client/src/app/components/app/menu/menu.component.ts +++ b/src/client/src/app/components/app/menu/menu.component.ts @@ -10,12 +10,13 @@ import { MenuModule } from 'primeng/menu'; import { MenubarModule } from 'primeng/menubar'; import { OverlayPanelModule } from 'primeng/overlaypanel'; import { TooltipModule } from 'primeng/tooltip'; -import { filter, fromEvent, map, merge } from 'rxjs'; +import { filter, map, merge } from 'rxjs'; import { selectAppTitle } from '../../../+state/app'; import { AuthService } from '../../../services/auth.service'; import { RealtimeEventsService } from '../../../services/realtime-events.service'; import { TranslateService, TranslationKey } from '../../../services/translate.service'; +import { onDocumentVisibilityChange$ } from '../../../utils/event.utils'; import { chainSignals } from '../../../utils/signal.utils'; @Component({ @@ -102,13 +103,14 @@ export class MenuComponent { constructor() { if (this._swUpdate.isEnabled) { - merge(fromEvent(document, 'visibilitychange'), this._realtimeEventsService.onReconnected$) + merge( + onDocumentVisibilityChange$().pipe(filter(isVisible => isVisible)), + this._realtimeEventsService.onReconnected$ + ) .pipe(takeUntilDestroyed()) .subscribe(() => { - if (!document.hidden) { - console.info('Checking for updates...'); - this._swUpdate.checkForUpdate().then(x => console.info('Update check result:', x)); - } + console.info('Checking for updates...'); + this._swUpdate.checkForUpdate().then(x => console.info('Update check result:', x)); }); } } diff --git a/src/client/src/app/services/auth.service.ts b/src/client/src/app/services/auth.service.ts index 8ef70c7..3809be5 100644 --- a/src/client/src/app/services/auth.service.ts +++ b/src/client/src/app/services/auth.service.ts @@ -9,7 +9,7 @@ import { } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { Router } from '@angular/router'; -import { fromEvent } from 'rxjs'; +import { filter } from 'rxjs'; import { AuthTokenInfo, @@ -20,6 +20,7 @@ import { } from './storage'; import { AuthenticationService } from '../api/services'; import { environment } from '../environments/environment'; +import { onDocumentVisibilityChange$ } from '../utils/event.utils'; import { assertBody } from '../utils/http.utils'; export type SignInResult = 'success' | 'invalid-token' | 'error'; @@ -50,12 +51,13 @@ export class AuthService implements OnDestroy { } }); - fromEvent(document, 'visibilitychange') - .pipe(takeUntilDestroyed()) + onDocumentVisibilityChange$() + .pipe( + takeUntilDestroyed(), + filter(isVisible => isVisible) + ) .subscribe(() => { - if (!document.hidden) { - this.ensureTokenNotExpired(); - } + this.ensureTokenNotExpired(); }); } diff --git a/src/client/src/app/utils/event.utils.ts b/src/client/src/app/utils/event.utils.ts new file mode 100644 index 0000000..7cdc5c5 --- /dev/null +++ b/src/client/src/app/utils/event.utils.ts @@ -0,0 +1,20 @@ +import { EMPTY, fromEvent, map } from 'rxjs'; + +export function onDocumentVisibilityChange$() { + let hidden: string; + let visibilityChange: string; + if ('hidden' in document) { + hidden = 'hidden'; + visibilityChange = 'visibilitychange'; + } else if ('msHidden' in document) { + hidden = 'msHidden'; + visibilityChange = 'msvisibilitychange'; + } else if ('webkitHidden' in document) { + hidden = 'webkitHidden'; + visibilityChange = 'webkitvisibilitychange'; + } else { + return EMPTY; + } + + return fromEvent(document, visibilityChange).pipe(map(() => !(document as any)[hidden])); +}