feat(youtube-player): Add width and height as inputs

Author: Nathan Tate

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

@@ -1,6 +1,6 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
-import {YouTubePlayerModule} from './index';
+import {YouTubePlayerModule, DEFAULT_PLAYER_WIDTH, DEFAULT_PLAYER_HEIGHT} from './index';
 import {YouTubePlayer} from './youtube-player';
 import {createFakeYtNamespace} from './fake-youtube-player';
 
@@ -48,6 +48,8 @@ describe('YoutubePlayer', () => {
     expect(playerCtorSpy).toHaveBeenCalledWith(
       containerElement, jasmine.objectContaining({
         videoId: VIDEO_ID,
+        width: DEFAULT_PLAYER_WIDTH,
+        height: DEFAULT_PLAYER_HEIGHT,
       }));
   });
 
@@ -84,18 +86,65 @@ describe('YoutubePlayer', () => {
     expect(playerCtorSpy).toHaveBeenCalledWith(
       containerElement, jasmine.objectContaining({videoId: 'otherId2'}));
   });
+
+  it('responds to changes in size', () => {
+    testComponent.width = 5;
+    fixture.detectChanges();
+
+    expect(playerSpy.setSize).not.toHaveBeenCalled();
+
+    onPlayerReady();
+
+    expect(playerSpy.setSize).toHaveBeenCalledWith(5, DEFAULT_PLAYER_HEIGHT);
+    expect(testComponent.youtubePlayer.width).toBe(5);
+    expect(testComponent.youtubePlayer.height).toBe(DEFAULT_PLAYER_HEIGHT);
+
+    testComponent.height = 6;
+    fixture.detectChanges();
+
+    expect(playerSpy.setSize).toHaveBeenCalledWith(5, 6);
+    expect(testComponent.youtubePlayer.width).toBe(5);
+    expect(testComponent.youtubePlayer.height).toBe(6);
+
+    testComponent.videoId = undefined;
+    fixture.detectChanges();
+    testComponent.videoId = VIDEO_ID;
+    fixture.detectChanges();
+
+    expect(playerCtorSpy).toHaveBeenCalledWith(
+        jasmine.any(Element), jasmine.objectContaining({width: 5, height: 6}));
+    expect(testComponent.youtubePlayer.width).toBe(5);
+    expect(testComponent.youtubePlayer.height).toBe(6);
+
+    onPlayerReady();
+    testComponent.width = undefined;
+    fixture.detectChanges();
+
+    expect(playerSpy.setSize).toHaveBeenCalledWith(DEFAULT_PLAYER_WIDTH, 6);
+    expect(testComponent.youtubePlayer.width).toBe(DEFAULT_PLAYER_WIDTH);
+    expect(testComponent.youtubePlayer.height).toBe(6);
+
+    testComponent.height = undefined;
+    fixture.detectChanges();
+
+    expect(playerSpy.setSize).toHaveBeenCalledWith(DEFAULT_PLAYER_WIDTH, DEFAULT_PLAYER_HEIGHT);
+    expect(testComponent.youtubePlayer.width).toBe(DEFAULT_PLAYER_WIDTH);
+    expect(testComponent.youtubePlayer.height).toBe(DEFAULT_PLAYER_HEIGHT);
+  });
 });
 
 /** Test component that contains a YouTubePlayer. */
 @Component({
   selector: 'test-app',
   template: `
-    <youtube-player #player [videoId]="videoId" *ngIf="visible">
+    <youtube-player #player [videoId]="videoId" *ngIf="visible" [width]="width" [height]="height">
     </youtube-player>
   `
 })
 class TestApp {
   videoId: string | undefined = VIDEO_ID;
   visible = true;
-  @ViewChild('player', {static: true}) youtubePlayer: YouTubePlayer;
+  width: number | undefined;
+  height: number | undefined;
+  @ViewChild('player', {static: false}) youtubePlayer: YouTubePlayer;
 }

src/youtube-player/youtube-player.ts

@@ -37,6 +37,9 @@ declare global {
   interface Window { YT: typeof YT | undefined; }
 }
 
+export const DEFAULT_PLAYER_WIDTH = 640;
+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 {
@@ -71,6 +74,29 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy {
 
   private _videoId = new EventEmitter<string | undefined>();
 
+  /** Height of video player */
+  get height(): number | undefined {
+    return this._height;
+  }
+
+  @Input() set height(height: number | undefined) {
+    this._height = height || DEFAULT_PLAYER_HEIGHT;
+    this._heightObs.emit(this._height);
+  }
+  private _height = DEFAULT_PLAYER_HEIGHT;
+  private _heightObs = new EventEmitter<number>();
+
+  /** Width of video player */
+  get width(): number | undefined {
+    return this._width;
+  }
+  @Input() set width(width: number | undefined) {
+    this._width = width || DEFAULT_PLAYER_WIDTH;
+    this._widthObs.emit(this._width);
+  }
+  private _width = DEFAULT_PLAYER_WIDTH;
+  private _widthObs = new EventEmitter<number>();
+
   /** The element that will be replaced by the iframe. */
   @ViewChild('youtube_container', {static: false}) youtubeContainer: ElementRef | undefined;
   private _youtubeContainer = new EventEmitter<HTMLElement>();
@@ -84,17 +110,24 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy {
           'Please install the YouTube Player API Reference for iframe Embeds: ' +
           'https://developers.google.com/youtube/iframe_api_reference');
     }
+    // Add initial values to all of the inputs.
+    const widthObs = this._widthObs.pipe(startWith(this._width));
+    const heightObs = this._heightObs.pipe(startWith(this._height));
 
     /** An observable of the currently loaded player. */
     const playerObs =
       createPlayerObservable(
         this._youtubeContainer,
         this._videoId,
+        widthObs,
+        heightObs,
       ).pipe(waitUntilReady(), takeUntil(this._destroyed), publish());
 
     /** Set up side effects to bind inputs to the player. */
     playerObs.subscribe(player => this._player = player);
 
+    bindSizeToPlayer(playerObs, widthObs, heightObs);
+
     bindCueVideoCall(playerObs, this._videoId, this._destroyed);
 
     // After all of the subscriptions are set up, connect the observable.
@@ -117,6 +150,16 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy {
   }
 }
 
+/** Listens to changes to the given width and height and sets it on the player. */
+function bindSizeToPlayer(
+  playerObs: Observable<YT.Player | undefined>,
+  widthObs: Observable<number>,
+  heightObs: Observable<number>
+) {
+  return combineLatest(playerObs, widthObs, heightObs)
+      .subscribe(([player, width, height]) => player && player.setSize(width, height));
+}
+
 /**
  * Returns an observable that emits the loaded player once it's ready. Certain properties/methods
  * won't be available until the iframe finishes loading.
@@ -161,12 +204,15 @@ function fromPlayerOnReady(player: UninitializedPlayer): Observable<Player> {
 function createPlayerObservable(
   youtubeContainer: Observable<HTMLElement>,
   videoIdObs: Observable<string | undefined>,
+  widthObs: Observable<number>,
+  heightObs: Observable<number>,
 ): Observable<UninitializedPlayer | undefined> {
 
   const playerOptions =
     videoIdObs
     .pipe(
-      map((videoId) => videoId ? {videoId} : undefined),
+      withLatestFrom(combineLatest(widthObs, heightObs)),
+      map(([videoId, [width, height]]) => videoId ? ({videoId, width, height}) : undefined),
     );
 
   return combineLatest(youtubeContainer, playerOptions)