refactor(youtube-player): avoid build errors

Reworks how we declare globals for the YouTube player so it doesn't break with recent dependency updates.

Author: crisbeto

src/youtube-player/youtube-player.spec.ts

@@ -25,6 +25,11 @@ const TEST_PROVIDERS: (Provider | EnvironmentProviders)[] = [
 ];
 
 describe('YoutubePlayer', () => {
+  const ytWindow = window as Window &
+    typeof globalThis & {
+      YT?: typeof YT | undefined;
+      onYouTubeIframeAPIReady?: (() => void) | undefined;
+    };
   let playerCtorSpy: jasmine.Spy;
   let playerSpy: jasmine.SpyObj<YT.Player>;
   let fixture: ComponentFixture<TestApp>;
@@ -35,7 +40,7 @@ describe('YoutubePlayer', () => {
     const fake = createFakeYtNamespace();
     playerCtorSpy = fake.playerCtorSpy;
     playerSpy = fake.playerSpy;
-    window.YT = fake.namespace;
+    ytWindow.YT = fake.namespace;
     events = fake.events;
   }));
 
@@ -58,8 +63,8 @@ describe('YoutubePlayer', () => {
     });
 
     afterEach(() => {
-      window.YT = undefined;
-      window.onYouTubeIframeAPIReady = undefined;
+      ytWindow.YT = undefined!;
+      ytWindow.onYouTubeIframeAPIReady = undefined;
     });
 
     it('initializes a youtube player when the placeholder is clicked', () => {
@@ -215,7 +220,7 @@ describe('YoutubePlayer', () => {
 
       expect(playerSpy.cueVideoById).not.toHaveBeenCalled();
 
-      playerSpy.getPlayerState.and.returnValue(window.YT!.PlayerState.CUED);
+      playerSpy.getPlayerState.and.returnValue(ytWindow.YT!.PlayerState.CUED);
       events.onReady({target: playerSpy});
 
       expect(playerSpy.cueVideoById).toHaveBeenCalledWith(
@@ -542,17 +547,17 @@ describe('YoutubePlayer', () => {
     let api: typeof YT;
 
     beforeEach(() => {
-      api = window.YT!;
-      window.YT = undefined;
+      api = ytWindow.YT!;
+      ytWindow.YT = undefined!;
     });
 
     afterEach(() => {
-      window.YT = undefined;
-      window.onYouTubeIframeAPIReady = undefined;
+      ytWindow.YT = undefined!;
+      ytWindow.onYouTubeIframeAPIReady = undefined;
     });
 
     it('waits until the api is ready before initializing', () => {
-      window.YT = YT_LOADING_STATE_MOCK;
+      ytWindow.YT = YT_LOADING_STATE_MOCK;
       TestBed.configureTestingModule({providers: TEST_PROVIDERS});
       fixture = TestBed.createComponent(TestApp);
       testComponent = fixture.debugElement.componentInstance;
@@ -562,8 +567,8 @@ describe('YoutubePlayer', () => {
 
       expect(playerCtorSpy).not.toHaveBeenCalled();
 
-      window.YT = api;
-      window.onYouTubeIframeAPIReady!();
+      ytWindow.YT = api;
+      ytWindow.onYouTubeIframeAPIReady!();
 
       expect(playerCtorSpy).toHaveBeenCalledWith(
         getVideoHost(fixture),
@@ -577,7 +582,7 @@ describe('YoutubePlayer', () => {
 
     it('should not override any pre-existing API loaded callbacks', () => {
       const spy = jasmine.createSpy('other API loaded spy');
-      window.onYouTubeIframeAPIReady = spy;
+      ytWindow.onYouTubeIframeAPIReady = spy;
       TestBed.configureTestingModule({providers: TEST_PROVIDERS});
       fixture = TestBed.createComponent(TestApp);
       testComponent = fixture.debugElement.componentInstance;
@@ -587,8 +592,8 @@ describe('YoutubePlayer', () => {
 
       expect(playerCtorSpy).not.toHaveBeenCalled();
 
-      window.YT = api;
-      window.onYouTubeIframeAPIReady!();
+      ytWindow.YT = api;
+      ytWindow.onYouTubeIframeAPIReady!();
 
       expect(spy).toHaveBeenCalled();
     });
@@ -603,7 +608,7 @@ describe('YoutubePlayer', () => {
     });
 
     afterEach(() => {
-      fixture = testComponent = window.YT = window.onYouTubeIframeAPIReady = undefined!;
+      fixture = testComponent = ytWindow.YT = ytWindow.onYouTubeIframeAPIReady = undefined!;
     });
 
     it('should show a placeholder', () => {
@@ -687,7 +692,7 @@ describe('YoutubePlayer', () => {
       fixture.detectChanges();
 
       // Simulate player state being PLAYING (autoplay has started the video)
-      playerSpy.getPlayerState.and.returnValue(window.YT!.PlayerState.PLAYING);
+      playerSpy.getPlayerState.and.returnValue(ytWindow.YT!.PlayerState.PLAYING);
       events.onReady({target: playerSpy});
 
       // Should use seekTo instead of cueVideoById when player is already playing
@@ -724,7 +729,7 @@ describe('YoutubePlayer', () => {
     getPlaceholder(staticSecondsApp).click();
     staticSecondsApp.detectChanges();
 
-    playerSpy.getPlayerState.and.returnValue(window.YT!.PlayerState.CUED);
+    playerSpy.getPlayerState.and.returnValue(ytWindow.YT!.PlayerState.CUED);
     events.onReady({target: playerSpy});
 
     expect(playerSpy.cueVideoById).toHaveBeenCalledWith(

src/youtube-player/youtube-player.ts

@@ -38,12 +38,9 @@ import {Observable, of as observableOf, Subject, BehaviorSubject, fromEventPatte
 import {takeUntil, switchMap} from 'rxjs/operators';
 import {PlaceholderImageQuality, YouTubePlayerPlaceholder} from './youtube-player-placeholder';
 
-declare global {
-  interface Window {
-    YT: typeof YT | undefined;
-    onYouTubeIframeAPIReady: (() => void) | undefined;
-  }
-}
+type YoutubeWindow = {
+  onYouTubeIframeAPIReady?: (() => void) | undefined;
+};
 
 /** Injection token used to configure the `YouTubePlayer`. */
 export const YOUTUBE_PLAYER_CONFIG = new InjectionToken<YouTubePlayerConfig>(
@@ -292,7 +289,7 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
 
     if (this._player) {
       this._player.destroy();
-      window.onYouTubeIframeAPIReady = this._existingApiReadyCallback;
+      (window as YoutubeWindow).onYouTubeIframeAPIReady = this._existingApiReadyCallback;
     }
 
     this._playerChanges.complete();
@@ -513,9 +510,9 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
         );
       }
 
-      this._existingApiReadyCallback = window.onYouTubeIframeAPIReady;
+      this._existingApiReadyCallback = (window as YoutubeWindow).onYouTubeIframeAPIReady;
 
-      window.onYouTubeIframeAPIReady = () => {
+      (window as YoutubeWindow).onYouTubeIframeAPIReady = () => {
         this._existingApiReadyCallback?.();
         this._ngZone.run(() => this._createPlayer(playVideo));
       };