diff --git a/projects/flosportsinc/ng-fullscreen/karma.conf.js b/projects/flosportsinc/ng-fullscreen/karma.conf.js index a4064722..2468cb31 100644 --- 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 index 32610820..88c108f7 100644 --- 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 index fc4237dd..1bc5b6b8 100644 --- 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, 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() @@ -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, 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, 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 index 3b31ce53..67238b7c 100644 --- 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 implem public elmRef: ElementRef, 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 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() - 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))