fix: use zone instead of applicationRef (#220)

BREAKING CHANGE: instead of checking app stability, the real solution is to run the rxjs timer/interval code outside of the angular zone.
flocasts · Aug 27, 2019 · a6b2d02 · a6b2d02
1 parent f8007dd
commit a6b2d02
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/projects/flosportsinc/ng-fullscreen/karma.conf.js b/projects/flosportsinc/ng-fullscreen/karma.conf.js
@@ -3,5 +3,5 @@ module.exports = config('../coverage/ng-fullscreen')()({
   statements: 96,
   lines: 96,
   branches: 85,
-  functions: 88
+  functions: 85
 })
diff --git a/projects/flosportsinc/ng-fullscreen/src/common/ng-fullscreen.service.ts b/projects/flosportsinc/ng-fullscreen/src/common/ng-fullscreen.service.ts
@@ -1,11 +1,11 @@
 
 import { isIphone } from './util'
 import { DOCUMENT, isPlatformServer } from '@angular/common'
-import { Injectable, Inject, PLATFORM_ID, ApplicationRef } from '@angular/core'
+import { Injectable, Inject, PLATFORM_ID, NgZone } from '@angular/core'
 import { merge, fromEvent, Observable, throwError, of, interval, BehaviorSubject, EMPTY } from 'rxjs'
 import {
   debounceTime, map, startWith, shareReplay, filter, flatMap, tap,
-  distinctUntilChanged, take, first, switchMap, takeUntil
+  distinctUntilChanged, take, takeUntil
 } from 'rxjs/operators'
 import {
   FS_FULLSCREEN_REQUEST_EVENTS, FS_FULLSCREEN_EXIT_EVENTS, FS_FULLSCREEN_ELEMENT,
@@ -49,7 +49,7 @@ export interface IFloFullscreenService {
 export class FloFullscreenService implements IFloFullscreenService {
   // tslint:disable: readonly-array
   constructor(
-    private appRef: ApplicationRef,
+    private zone: NgZone,
     @Inject(DOCUMENT) private doc: any,
     @Inject(PLATFORM_ID) private platformId: string,
     @Inject(FS_FULLSCREEN_REQUEST_EVENTS) private requestEventKeys: FullscreenRequestEvents[],
@@ -77,16 +77,13 @@ export class FloFullscreenService implements IFloFullscreenService {
 
   private readonly iosPoller = () => !this.iosPollEnabled
     ? EMPTY
-    : this.appRef.isStable.pipe(
-      first(isStable => isStable),
-      switchMap(() =>
-        interval(this.iosPollrate).pipe(
-          map(() => Array.from((this.doc as HTMLDocument).querySelectorAll('video'))),
-          flatMap(videoElements => merge(
-            ...videoElements.map(ve => fromEvent(ve, 'webkitbeginfullscreen').pipe(tap(() => this.iOSVideoState.next(true)), take(1))),
-            ...videoElements.map(ve => fromEvent(ve, 'webkitendfullscreen').pipe(tap(() => this.iOSVideoState.next(false)), take(1)))
-          )), takeUntil(this.iOSVideoState))))
-
+    : this.zone.runOutsideAngular(() =>
+      interval(this.iosPollrate).pipe(
+        map(() => Array.from((this.doc as HTMLDocument).querySelectorAll('video'))),
+        flatMap(videoElements => merge(
+          ...videoElements.map(ve => fromEvent(ve, 'webkitbeginfullscreen').pipe(tap(() => this.iOSVideoState.next(true)), take(1))),
+          ...videoElements.map(ve => fromEvent(ve, 'webkitendfullscreen').pipe(tap(() => this.iOSVideoState.next(false)), take(1)))
+        )), takeUntil(this.iOSVideoState)))
 
   public readonly fullscreen$ = isPlatformServer(this.platformId)
     ? of(false)

diff --git a/projects/flosportsinc/ng-fullscreen/src/switch/ng-fullscreen.switch.directive.ts b/projects/flosportsinc/ng-fullscreen/src/switch/ng-fullscreen.switch.directive.ts
@@ -1,8 +1,8 @@
 import {
   Directive, TemplateRef, ViewContainerRef, OnInit, OnDestroy,
-  SimpleChanges, OnChanges, ChangeDetectorRef, Inject, ApplicationRef
+  SimpleChanges, OnChanges, ChangeDetectorRef, Inject, NgZone
 } from '@angular/core'
-import { takeUntil, flatMap, startWith, delay, tap, distinctUntilChanged, first, switchMap } from 'rxjs/operators'
+import { takeUntil, flatMap, startWith, delay, tap, distinctUntilChanged } from 'rxjs/operators'
 import { Subject, combineLatest, interval } from 'rxjs'
 import { FloFullscreenService } from '../common/ng-fullscreen.service'
 import { isIphone } from '../common/util'
@@ -13,7 +13,7 @@ export abstract class FloFullscreenDirective implements OnDestroy, OnInit, OnCha
   constructor(protected tr: TemplateRef<any>, protected vc: ViewContainerRef, protected fs: FloFullscreenService,
     protected cd: ChangeDetectorRef, @Inject(FS_FULLSCREEN_IOS_POLL_ENABLED) protected iosPollEnabled: boolean,
     @Inject(FS_FULLSCREEN_IOS_POLL_MS) protected iosPollrate: number,
-    protected appRef: ApplicationRef) { }
+    protected zone: NgZone) { }
 
   protected abstract elmInputKey?: string
   private readonly elmSource = new Subject<HTMLElement | undefined>()
@@ -31,12 +31,11 @@ export abstract class FloFullscreenDirective implements OnDestroy, OnInit, OnCha
         startWith(this.elm()),
         delay(0),
         flatMap(elm => this.iosPollEnabled && isIphone()
-          ? this.appRef.isStable.pipe(
-            first(isStable => isStable),
-            switchMap(_ => interval(this.iosPollrate).pipe(
+          ? this.zone.runOutsideAngular(() =>
+            interval(this.iosPollrate).pipe(
               flatMap(() => this.fs.fullscreenIsSupported(elm)),
               distinctUntilChanged(),
-              takeUntil(this.ngOnDestroy$))))
+              takeUntil(this.ngOnDestroy$)))
           : this.fs.fullscreenIsSupported(elm)
         ),
         takeUntil(this.ngOnDestroy$)
@@ -79,8 +78,8 @@ const IF_FS_SELECTOR = 'floIfFullscreen'
 export class FloFullscreenOnDirective extends FloFullscreenDirective {
   constructor(protected tr: TemplateRef<any>, protected vc: ViewContainerRef, protected fs: FloFullscreenService,
     protected cd: ChangeDetectorRef, @Inject(FS_FULLSCREEN_IOS_POLL_ENABLED) protected iosPollEnabled: boolean,
-    @Inject(FS_FULLSCREEN_IOS_POLL_MS) protected iosPollrate: number, protected appRef: ApplicationRef) {
-    super(tr, vc, fs, cd, iosPollEnabled, iosPollrate, appRef)
+    @Inject(FS_FULLSCREEN_IOS_POLL_MS) protected iosPollrate: number, protected zone: NgZone) {
+    super(tr, vc, fs, cd, iosPollEnabled, iosPollrate, zone)
     this.showWhenFullscreen = true
   }
 
@@ -96,8 +95,8 @@ const IF_NOT_FS_SELECTOR = 'floIfNotFullscreen'
 export class FloFullscreenOffDirective extends FloFullscreenDirective {
   constructor(protected tr: TemplateRef<any>, protected vc: ViewContainerRef, protected fs: FloFullscreenService,
     protected cd: ChangeDetectorRef, @Inject(FS_FULLSCREEN_IOS_POLL_ENABLED) protected iosPollEnabled: boolean,
-    @Inject(FS_FULLSCREEN_IOS_POLL_MS) protected iosPollrate: number, protected appRef: ApplicationRef) {
-    super(tr, vc, fs, cd, iosPollEnabled, iosPollrate, appRef)
+    @Inject(FS_FULLSCREEN_IOS_POLL_MS) protected iosPollrate: number, protected zone: NgZone) {
+    super(tr, vc, fs, cd, iosPollEnabled, iosPollrate, zone)
     this.showWhenFullscreen = false
   }
 

diff --git a/projects/flosportsinc/ng-grid-list/common/grid/grid.component.ts b/projects/flosportsinc/ng-grid-list/common/grid/grid.component.ts
@@ -16,7 +16,7 @@ import {
 import {
   Component, ChangeDetectionStrategy, Input, Output, Inject, PLATFORM_ID, ElementRef, ContentChild,
   TemplateRef, ViewChild, ViewChildren, QueryList, OnDestroy, OnInit, ChangeDetectorRef,
-  HostListener, AfterViewInit, TrackByFunction, Renderer2, ApplicationRef
+  HostListener, AfterViewInit, TrackByFunction, Renderer2, NgZone
 } from '@angular/core'
 import {
   FLO_GRID_LIST_COUNT,
@@ -69,7 +69,7 @@ export class FloGridListViewComponent<TItem extends IFloGridListBaseItem> implem
     public elmRef: ElementRef<HTMLElement>,
     private cdRef: ChangeDetectorRef,
     private rd: Renderer2,
-    private appRef: ApplicationRef,
+    private zone: NgZone,
     @Inject(PLATFORM_ID) private _platformId: string,
     @Inject(FLO_GRID_LIST_ITEMS) private _items: any,
     @Inject(FLO_GRID_LIST_COUNT) private _count: number,
@@ -527,10 +527,9 @@ export class FloGridListViewComponent<TItem extends IFloGridListBaseItem> implem
     fromEvent(this.elmRef.nativeElement, 'mouseleave').pipe(mapTo(false))
   ).pipe(startWith(this.overlayStart), distinctUntilChanged())
 
-  private readonly isStable = this.appRef.isStable.pipe(first(stable => stable), shareReplay(1))
   private readonly fadeoutIntervalReset = new Subject<boolean>()
-  private readonly stableFadeoutInterval = this.isStable.pipe(switchMap(() => interval(this.overlayFadeout).pipe(
-    mapTo(false), startWith(this.overlayStart), takeUntil(this.onDestroy))))
+  private readonly stableFadeoutInterval = this.zone.runOutsideAngular(() =>
+    interval(this.overlayFadeout).pipe(mapTo(false), startWith(this.overlayStart), takeUntil(this.onDestroy)))
 
   private readonly fadeoutIntervalWithReset = this.fadeoutIntervalReset.pipe(startWith(false), switchMapTo(this.stableFadeoutInterval))