fix(fullscreen): properly handle Firefox event scope (#163)

flocasts · Jun 23, 2019 · a540195 · a540195
1 parent 772c496
commit a540195
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/projects/flosportsinc/ng-fullscreen/src/toggle/ng-fullscreen.toggle.directive.spec.ts b/projects/flosportsinc/ng-fullscreen/src/toggle/ng-fullscreen.toggle.directive.spec.ts
@@ -1,7 +1,7 @@
-import { Component, NgModule, ViewChild } from '@angular/core'
+import { Component, NgModule } from '@angular/core'
 import { FloFullscreenToggleModule } from './ng-fullscreen.toggle.module'
 import { FloClickToEnterFullscreenDirective, FloClickToExitFullscreenDirective } from './ng-fullscreen.toggle.directive'
-import { TestBed, async, fakeAsync, tick } from '@angular/core/testing'
+import { TestBed, async } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { FloFullscreenService } from '../common/ng-fullscreen.service'
 import { DOCUMENT } from '@angular/common'
@@ -53,7 +53,7 @@ describe(FloFullscreenToggleModule.name, () => {
   })
 
   describe(FloClickToEnterFullscreenDirective.name, () => {
-    it('should enter to fullscreen', fakeAsync(() => {
+    it('should enter to fullscreen', () => {
       const comp = TestBed.createComponent(FloTestComponent)
       const service = TestBed.get(FloFullscreenService) as FloFullscreenService
       const sut = comp.debugElement.query(By.directive(FloClickToEnterFullscreenDirective)).nativeElement as HTMLButtonElement
@@ -62,23 +62,21 @@ describe(FloFullscreenToggleModule.name, () => {
       comp.detectChanges()
 
       sut.click()
-      tick(1)
 
       expect(spy).toHaveBeenCalledWith(container)
-    }))
+    })
 
-    it('should enter to fullscreen', fakeAsync(() => {
+    it('should enter to fullscreen', () => {
       const comp = TestBed.createComponent(FloTestEmptyComponent)
       const service = TestBed.get(FloFullscreenService) as FloFullscreenService
       const sut = comp.debugElement.query(By.directive(FloClickToEnterFullscreenDirective)).nativeElement as HTMLButtonElement
       const spy = spyOn(service, 'goFullscreen').and.callThrough()
       comp.detectChanges()
 
       sut.click()
-      tick(1)
 
       expect(spy).toHaveBeenCalledWith(TestBed.get(DOCUMENT).body)
-    }))
+    })
   })
 })
 
diff --git a/projects/flosportsinc/ng-fullscreen/src/toggle/ng-fullscreen.toggle.directive.ts b/projects/flosportsinc/ng-fullscreen/src/toggle/ng-fullscreen.toggle.directive.ts
@@ -1,6 +1,6 @@
-import { Directive, HostListener, Input, Inject } from '@angular/core'
+import { Directive, HostListener, Input, Inject, ChangeDetectorRef } from '@angular/core'
 import { FloFullscreenService } from '../common/ng-fullscreen.service'
-import { tap, take } from 'rxjs/operators'
+import { take } from 'rxjs/operators'
 import { DOCUMENT } from '@angular/common'
 
 // tslint:disable: no-if-statement
@@ -10,7 +10,7 @@ import { DOCUMENT } from '@angular/common'
   selector: '[floClickToEnterFullscreen]',
 })
 export class FloClickToEnterFullscreenDirective {
-  constructor(private fs: FloFullscreenService, @Inject(DOCUMENT) private doc: any) { }
+  constructor(private fs: FloFullscreenService, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) { }
 
   private _thing: HTMLElement | HTMLDocument
 
@@ -27,11 +27,10 @@ export class FloClickToEnterFullscreenDirective {
   }
 
   @HostListener('click', []) click() {
-    this.fs.isNotFullscreen$.pipe(tap(_ => {
-      setTimeout(() => {
-        this.fs.goFullscreen(this.floClickToEnterFullscreen)
-      })
-    })).pipe(take(1)).subscribe()
+    this.cd.detectChanges()
+    this.fs.isNotFullscreen$.pipe(take(1)).subscribe(_ => {
+      this.fs.goFullscreen(this.floClickToEnterFullscreen)
+    })
   }
 }