feat(youtube-player): support passing in the playerVars parameter (#19746)

We tried doing this before in #17672, but we never managed to wrap it up. These changes add support for passing in the `playerVars` parameter to the YouTube API which has some settings like autoplay and hiding the video controls.

Fixes #19267.

Author: crisbeto

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

@@ -49,6 +49,7 @@ describe('YoutubePlayer', () => {
           videoId: VIDEO_ID,
           width: DEFAULT_PLAYER_WIDTH,
           height: DEFAULT_PLAYER_HEIGHT,
+          playerVars: undefined
         }));
     });
 
@@ -131,6 +132,21 @@ describe('YoutubePlayer', () => {
       expect(testComponent.youtubePlayer.height).toBe(DEFAULT_PLAYER_HEIGHT);
     });
 
+    it('passes the configured playerVars to the player', () => {
+      const playerVars: YT.PlayerVars = { modestbranding: YT.ModestBranding.Modest };
+      fixture.componentInstance.playerVars = playerVars;
+      fixture.detectChanges();
+
+      events.onReady({target: playerSpy});
+      const calls = playerCtorSpy.calls.all();
+
+      // We expect 2 calls since the first one is run on init and the
+      // second one happens after the `playerVars` have changed.
+      expect(calls.length).toBe(2);
+      expect(calls[0].args[1]).toEqual(jasmine.objectContaining({playerVars: undefined}));
+      expect(calls[1].args[1]).toEqual(jasmine.objectContaining({playerVars}));
+    });
+
     it('initializes the player with start and end seconds', () => {
       testComponent.startSeconds = 5;
       testComponent.endSeconds = 6;
@@ -462,6 +478,7 @@ describe('YoutubePlayer', () => {
   template: `
     <youtube-player #player [videoId]="videoId" *ngIf="visible" [width]="width" [height]="height"
       [startSeconds]="startSeconds" [endSeconds]="endSeconds" [suggestedQuality]="suggestedQuality"
+      [playerVars]="playerVars"
       (ready)="onReady($event)"
       (stateChange)="onStateChange($event)"
       (playbackQualityChange)="onPlaybackQualityChange($event)"
@@ -479,6 +496,7 @@ class TestApp {
   startSeconds: number | undefined;
   endSeconds: number | undefined;
   suggestedQuality: YT.SuggestedVideoQuality | undefined;
+  playerVars: YT.PlayerVars | undefined;
   onReady = jasmine.createSpy('onReady');
   onStateChange = jasmine.createSpy('onStateChange');
   onPlaybackQualityChange = jasmine.createSpy('onPlaybackQualityChange');

src/youtube-player/youtube-player.ts

@@ -71,12 +71,13 @@ export const DEFAULT_PLAYER_HEIGHT = 390;
 // The native YT.Player doesn't expose the set videoId, but we need it for
 // convenience.
 interface Player extends YT.Player {
-  videoId?: string | undefined;
+  videoId?: string;
+  playerVars?: YT.PlayerVars;
 }
 
 // The player isn't fully initialized when it's constructed.
 // The only field available is destroy and addEventListener.
-type UninitializedPlayer = Pick<Player, 'videoId' | 'destroy' | 'addEventListener'>;
+type UninitializedPlayer = Pick<Player, 'videoId' | 'playerVars' | 'destroy' | 'addEventListener'>;
 
 /**
  * Object used to store the state of the player if the
@@ -157,6 +158,17 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
   }
   private _suggestedQuality = new BehaviorSubject<YT.SuggestedVideoQuality | undefined>(undefined);
 
+  /**
+   * Extra parameters used to configure the player. See:
+   * https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5#Parameters
+   */
+  @Input()
+  get playerVars(): YT.PlayerVars | undefined { return this._playerVars.value; }
+  set playerVars(playerVars: YT.PlayerVars | undefined) {
+    this._playerVars.next(playerVars);
+  }
+  private _playerVars = new BehaviorSubject<YT.PlayerVars | undefined>(undefined);
+
   /**
    * Whether the iframe will attempt to load regardless of the status of the api on the
    * page. Set this to true if you don't want the `onYouTubeIframeAPIReady` field to be
@@ -225,6 +237,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
         iframeApiAvailableObs,
         this._width,
         this._height,
+        this._playerVars,
         this._ngZone
       ).pipe(tap(player => {
         // Emit this before the `waitUntilReady` call so that we can bind to
@@ -290,6 +303,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
     this._endSeconds.complete();
     this._suggestedQuality.complete();
     this._youtubeContainer.complete();
+    this._playerVars.complete();
     this._destroyed.next();
     this._destroyed.complete();
   }
@@ -614,15 +628,18 @@ function createPlayerObservable(
   iframeApiAvailableObs: Observable<boolean>,
   widthObs: Observable<number>,
   heightObs: Observable<number>,
+  playerVarsObs: Observable<YT.PlayerVars | undefined>,
   ngZone: NgZone
 ): Observable<UninitializedPlayer | undefined> {
 
-  const playerOptions =
-    videoIdObs
-    .pipe(
-      withLatestFrom(combineLatest([widthObs, heightObs])),
-      map(([videoId, [width, height]]) => videoId ? ({videoId, width, height}) : undefined),
-    );
+  const playerOptions = combineLatest([videoIdObs, playerVarsObs]).pipe(
+    withLatestFrom(combineLatest([widthObs, heightObs])),
+    map(([constructorOptions, sizeOptions]) => {
+      const [videoId, playerVars] = constructorOptions;
+      const [width, height] = sizeOptions;
+      return videoId ? ({ videoId, playerVars, width, height }) : undefined;
+    }),
+  );
 
   return combineLatest([youtubeContainer, playerOptions, of(ngZone)])
       .pipe(
@@ -644,22 +661,25 @@ function syncPlayerState(
   player: UninitializedPlayer | undefined,
   [container, videoOptions, ngZone]: [HTMLElement, YT.PlayerOptions | undefined, NgZone],
 ): UninitializedPlayer | undefined {
-  if (!videoOptions) {
+  if (player && videoOptions && player.playerVars !== videoOptions.playerVars) {
+    // The player needs to be recreated if the playerVars are different.
+    player.destroy();
+  } else if (!videoOptions) {
     if (player) {
+      // Destroy the player if the videoId was removed.
       player.destroy();
     }
     return;
-  }
-  if (player) {
+  } else if (player) {
     return player;
   }
 
   // Important! We need to create the Player object outside of the `NgZone`, because it kicks
   // off a 250ms setInterval which will continually trigger change detection if we don't.
   const newPlayer: UninitializedPlayer =
       ngZone.runOutsideAngular(() => new YT.Player(container, videoOptions));
-  // Bind videoId for future use.
   newPlayer.videoId = videoOptions.videoId;
+  newPlayer.playerVars = videoOptions.playerVars;
   return newPlayer;
 }
 

tools/public_api_guard/youtube-player/youtube-player.d.ts

@@ -6,6 +6,8 @@ export declare class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
     set height(height: number | undefined);
     playbackQualityChange: Observable<YT.OnPlaybackQualityChangeEvent>;
     playbackRateChange: Observable<YT.OnPlaybackRateChangeEvent>;
+    get playerVars(): YT.PlayerVars | undefined;
+    set playerVars(playerVars: YT.PlayerVars | undefined);
     ready: Observable<YT.PlayerEvent>;
     showBeforeIframeApiLoads: boolean | undefined;
     set startSeconds(startSeconds: number | undefined);
@@ -41,7 +43,7 @@ export declare class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
     setVolume(volume: number): void;
     stopVideo(): void;
     unMute(): void;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<YouTubePlayer, "youtube-player", never, { "videoId": "videoId"; "height": "height"; "width": "width"; "startSeconds": "startSeconds"; "endSeconds": "endSeconds"; "suggestedQuality": "suggestedQuality"; "showBeforeIframeApiLoads": "showBeforeIframeApiLoads"; }, { "ready": "ready"; "stateChange": "stateChange"; "error": "error"; "apiChange": "apiChange"; "playbackQualityChange": "playbackQualityChange"; "playbackRateChange": "playbackRateChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<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>;
     static ɵfac: i0.ɵɵFactoryDef<YouTubePlayer, never>;
 }