fix(youtube-player): avoid clobbering api loaded callback (#17850)

The YouTube player component adds a global callback for when the API is loaded, however if one existed already it'll be overwritten. These changes ensure that the previous callback is preserved.

Author: crisbeto

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

@@ -37,6 +37,7 @@ describe('YoutubePlayer', () => {
 
     afterEach(() => {
       delete window.YT;
+      window.onYouTubeIframeAPIReady = undefined;
     });
 
     it('initializes a youtube player', () => {
@@ -281,17 +282,18 @@ describe('YoutubePlayer', () => {
     beforeEach(() => {
       api = window.YT;
       delete window.YT;
-
-      fixture = TestBed.createComponent(TestApp);
-      testComponent = fixture.debugElement.componentInstance;
-      fixture.detectChanges();
     });
 
     afterEach(() => {
       delete window.YT;
+      window.onYouTubeIframeAPIReady = undefined;
     });
 
     it('waits until the api is ready before initializing', () => {
+      fixture = TestBed.createComponent(TestApp);
+      testComponent = fixture.debugElement.componentInstance;
+      fixture.detectChanges();
+
       expect(playerCtorSpy).not.toHaveBeenCalled();
 
       window.YT = api!;
@@ -306,6 +308,22 @@ describe('YoutubePlayer', () => {
           height: DEFAULT_PLAYER_HEIGHT,
         }));
     });
+
+    it('should not override any pre-existing API loaded callbacks', () => {
+      const spy = jasmine.createSpy('other API loaded spy');
+      window.onYouTubeIframeAPIReady = spy;
+
+      fixture = TestBed.createComponent(TestApp);
+      testComponent = fixture.debugElement.componentInstance;
+      fixture.detectChanges();
+
+      expect(playerCtorSpy).not.toHaveBeenCalled();
+
+      window.YT = api!;
+      window.onYouTubeIframeAPIReady!();
+
+      expect(spy).toHaveBeenCalled();
+    });
   });
 
 });

src/youtube-player/youtube-player.ts

@@ -160,6 +160,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
   private _youtubeContainer = new Subject<HTMLElement>();
   private _destroyed = new Subject<void>();
   private _player: Player | undefined;
+  private _existingApiReadyCallback: (() => void) | undefined;
 
   constructor(
     private _ngZone: NgZone,
@@ -189,7 +190,12 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
       }
 
       const iframeApiAvailableSubject = new Subject<boolean>();
+      this._existingApiReadyCallback = window.onYouTubeIframeAPIReady;
+
       window.onYouTubeIframeAPIReady = () => {
+        if (this._existingApiReadyCallback) {
+          this._existingApiReadyCallback();
+        }
         this._ngZone.run(() => iframeApiAvailableSubject.next(true));
       };
       iframeApiAvailableObs = iframeApiAvailableSubject.pipe(take(1), startWith(false));
@@ -262,7 +268,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
   ngOnDestroy() {
     if (this._player) {
       this._player.destroy();
-      window.onYouTubeIframeAPIReady = undefined;
+      window.onYouTubeIframeAPIReady = this._existingApiReadyCallback;
     }
 
     this._videoIdObs.complete();