feat(youtube-player): add config option to automatically load the YouTube API

src/dev-app/index.html

@@ -22,7 +22,6 @@
   <script src="zone.js/dist/zone.js"></script>
   <script src="systemjs/dist/system.js"></script>
   <script src="system-config.js"></script>
-  <script src="https://www.youtube.com/iframe_api"></script>
   <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
   <script>
     (function loadGoogleMaps(key) {

src/dev-app/youtube-player/youtube-player-demo-module.ts

@@ -11,7 +11,11 @@ import {FormsModule} from '@angular/forms';
 import {MatRadioModule} from '@angular/material/radio';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {YouTubePlayerModule} from '@angular/youtube-player';
+import {
+  YouTubePlayerModule,
+  YOUTUBE_PLAYER_CONFIG,
+  YouTubePlayerConfig,
+} from '@angular/youtube-player';
 import {YouTubePlayerDemo} from './youtube-player-demo';
 
 @NgModule({
@@ -23,6 +27,12 @@ import {YouTubePlayerDemo} from './youtube-player-demo';
     RouterModule.forChild([{path: '', component: YouTubePlayerDemo}]),
   ],
   declarations: [YouTubePlayerDemo],
+  providers: [{
+    provide: YOUTUBE_PLAYER_CONFIG,
+    useValue: {
+      loadApi: true
+    } as YouTubePlayerConfig
+  }]
 })
 export class YouTubePlayerDemoModule {
 }

src/youtube-player/README.md

@@ -20,36 +20,34 @@ If your video is found at https://www.youtube.com/watch?v=PRQCAL_RMVo, then your
 
 ```typescript
 // example-module.ts
-import {NgModule, Component, OnInit} from '@angular/core';
-import {YouTubePlayerModule} from '@angular/youtube-player';
+import {NgModule, Component} from '@angular/core';
+import {
+  YouTubePlayerModule,
+  YOUTUBE_PLAYER_CONFIG,
+  YouTubePlayerConfig,
+} from '@angular/youtube-player';
 
 @NgModule({
   imports: [YouTubePlayerModule],
+  // Optionally tells the `youtube-player` component to automatically load
+  // the YouTube iframe API. Omit this if you plan to load the API yourself.
+  providers: [{
+    provide: YOUTUBE_PLAYER_CONFIG,
+    useValue: {
+      loadApi: true
+    } as YouTubePlayerConfig
+  }]
   declarations: [YoutubePlayerExample],
 })
 export class YoutubePlayerExampleModule {
 }
 
-let apiLoaded = false;
-
 // example-component.ts
 @Component({
   template: '<youtube-player videoId="PRQCAL_RMVo"></youtube-player>',
   selector: 'youtube-player-example',
 })
-class YoutubePlayerExample implements OnInit {
-  ngOnInit() {
-    if (!apiLoaded) {
-      // This code loads the IFrame Player API code asynchronously, according to the instructions at
-      // https://developers.google.com/youtube/iframe_api_reference#Getting_Started
-      const tag = document.createElement('script');
-      tag.src = 'https://www.youtube.com/iframe_api';
-      document.body.appendChild(tag);
-      apiLoaded = true;
-    }
-  }
-}
-
+class YoutubePlayerExample {}
 ```
 
 ## API

src/youtube-player/public-api.ts

@@ -7,4 +7,4 @@
  */
 
 export * from './youtube-module';
-export {YouTubePlayer} from './youtube-player';
+export {YouTubePlayer, YouTubePlayerConfig, YOUTUBE_PLAYER_CONFIG} from './youtube-player';

src/youtube-player/youtube-player.ts

@@ -23,6 +23,8 @@ import {
   ViewEncapsulation,
   Inject,
   PLATFORM_ID,
+  InjectionToken,
+  Optional,
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
 
@@ -91,6 +93,25 @@ interface PendingPlayerState {
   seek?: {seconds: number, allowSeekAhead: boolean};
 }
 
+/** Injection token used to configure the `YouTubePlayer`. */
+export const YOUTUBE_PLAYER_CONFIG =
+    new InjectionToken<YouTubePlayerConfig>('YOUTUBE_PLAYER_CONFIG');
+
+/** Object that can be used to configure the `YouTubePlayer`. */
+export interface YouTubePlayerConfig {
+  /**
+   * Whether the component should automatically load YouTube Iframe API.
+   * Otherwise it assumes that the API will be loaded by the consumer.
+   */
+  loadApi?: boolean;
+
+  /**
+   * URL from which to load the API, if `loadApi` is enabled.
+   * Otherwise falls back to `https://www.youtube.com/iframe_api`.
+   */
+  apiUrl?: string;
+}
+
 /**
  * Angular component that renders a YouTube player via the YouTube player
  * iframe API.
@@ -200,7 +221,10 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
   @ViewChild('youtubeContainer')
   youtubeContainer: ElementRef<HTMLElement>;
 
-  constructor(private _ngZone: NgZone, @Inject(PLATFORM_ID) platformId: Object) {
+  constructor(
+    private _ngZone: NgZone,
+    @Inject(PLATFORM_ID) platformId: Object,
+    @Optional() @Inject(YOUTUBE_PLAYER_CONFIG) private _config?: YouTubePlayerConfig) {
     this._isBrowser = isPlatformBrowser(platformId);
   }
 
@@ -216,6 +240,8 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
         throw new Error('Namespace YT not found, cannot construct embedded youtube player. ' +
             'Please install the YouTube Player API Reference for iframe Embeds: ' +
             'https://developers.google.com/youtube/iframe_api_reference');
+      } else if (this._config?.loadApi) {
+        loadApi(this._config?.apiUrl || 'https://www.youtube.com/iframe_api');
       }
 
       const iframeApiAvailableSubject = new Subject<boolean>();
@@ -756,3 +782,35 @@ function filterOnOther<R, T>(
     map(([value]) => value),
   );
 }
+
+let apiLoaded = false;
+
+/** Loads the YouTube API from a specified URL only once. */
+function loadApi(url: string): void {
+  if (apiLoaded) {
+    return;
+  }
+
+  // We can use `document` directly here, because this logic doesn't run outside the browser.
+  const script = document.createElement('script');
+  const callback = (event: Event) => {
+    script.removeEventListener('load', callback);
+    script.removeEventListener('error', callback);
+
+    if (event.type === 'error') {
+      apiLoaded = false;
+
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        console.error(`Failed to load YouTube API from ${url}`);
+      }
+    }
+  };
+  script.addEventListener('load', callback);
+  script.addEventListener('error', callback);
+  script.src = url;
+
+  // Set this immediately to true so we don't start loading another script
+  // while this one is pending. If loading fails, we'll flip it back to false.
+  apiLoaded = true;
+  document.body.appendChild(script);
+}

tools/public_api_guard/youtube-player/youtube-player.md

@@ -9,6 +9,7 @@
 import { AfterViewInit } from '@angular/core';
 import { ElementRef } from '@angular/core';
 import * as i0 from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
@@ -20,9 +21,12 @@ const DEFAULT_PLAYER_HEIGHT = 390;
 // @public (undocumented)
 const DEFAULT_PLAYER_WIDTH = 640;
 
+// @public
+export const YOUTUBE_PLAYER_CONFIG: InjectionToken<YouTubePlayerConfig>;
+
 // @public
 export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
-    constructor(_ngZone: NgZone, platformId: Object);
+    constructor(_ngZone: NgZone, platformId: Object, _config?: YouTubePlayerConfig | undefined);
     // (undocumented)
     readonly apiChange: Observable<YT.PlayerEvent>;
     // @deprecated (undocumented)
@@ -78,7 +82,13 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<YouTubePlayer, "youtube-player", never, { "videoId": "videoId"; "height": "height"; "width": "width"; "startSeconds": "startSeconds"; "endSeconds": "endSeconds"; "suggestedQuality": "suggestedQuality"; "playerVars": "playerVars"; "showBeforeIframeApiLoads": "showBeforeIframeApiLoads"; }, { "ready": "ready"; "stateChange": "stateChange"; "error": "error"; "apiChange": "apiChange"; "playbackQualityChange": "playbackQualityChange"; "playbackRateChange": "playbackRateChange"; }, never, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<YouTubePlayer, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<YouTubePlayer, [null, null, { optional: true; }]>;
+}
+
+// @public
+export interface YouTubePlayerConfig {
+    apiUrl?: string;
+    loadApi?: boolean;
 }
 
 // @public (undocumented)