feat(youtube-player): Add proxy methods for calling the underlying player

Author: Nathan Tate

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

@@ -84,6 +84,73 @@ describe('YoutubePlayer', () => {
     expect(playerCtorSpy).toHaveBeenCalledWith(
       containerElement, jasmine.objectContaining({videoId: 'otherId2'}));
   });
+
+  it('proxies methods to the player', () => {
+    onPlayerReady();
+
+    testComponent.youtubePlayer.playVideo();
+    expect(playerSpy.playVideo).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.pauseVideo();
+    expect(playerSpy.pauseVideo).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.stopVideo();
+    expect(playerSpy.stopVideo).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.mute();
+    expect(playerSpy.mute).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.unMute();
+    expect(playerSpy.unMute).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.isMuted();
+    expect(playerSpy.isMuted).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.seekTo(5, true);
+    expect(playerSpy.seekTo).toHaveBeenCalledWith(5, true);
+
+    testComponent.youtubePlayer.isMuted();
+    expect(playerSpy.isMuted).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.setVolume(54);
+    expect(playerSpy.setVolume).toHaveBeenCalledWith(54);
+
+    testComponent.youtubePlayer.getVolume();
+    expect(playerSpy.getVolume).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.setPlaybackRate(1.5);
+    expect(playerSpy.setPlaybackRate).toHaveBeenCalledWith(1.5);
+
+    testComponent.youtubePlayer.getPlaybackRate();
+    expect(playerSpy.getPlaybackRate).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getAvailablePlaybackRates();
+    expect(playerSpy.getAvailablePlaybackRates).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getVideoLoadedFraction();
+    expect(playerSpy.getVideoLoadedFraction).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getPlayerState();
+    expect(playerSpy.getPlayerState).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getCurrentTime();
+    expect(playerSpy.getCurrentTime).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getPlaybackQuality();
+    expect(playerSpy.getPlaybackQuality).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getAvailableQualityLevels();
+    expect(playerSpy.getAvailableQualityLevels).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getDuration();
+    expect(playerSpy.getDuration).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getVideoUrl();
+    expect(playerSpy.getVideoUrl).toHaveBeenCalled();
+
+    testComponent.youtubePlayer.getVideoEmbedCode();
+    expect(playerSpy.getVideoEmbedCode).toHaveBeenCalled();
+  });
 });
 
 /** Test component that contains a YouTubePlayer. */
@@ -97,5 +164,5 @@ describe('YoutubePlayer', () => {
 class TestApp {
   videoId: string | undefined = VIDEO_ID;
   visible = true;
-  @ViewChild('player', {static: true}) youtubePlayer: YouTubePlayer;
+  @ViewChild('player', {static: false}) youtubePlayer: YouTubePlayer;
 }

src/youtube-player/youtube-player.ts

@@ -115,6 +115,168 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy {
     this._player.destroy();
     this._destroyed.emit();
   }
+
+  /** Proxied methods. */
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#playVideo */
+  playVideo() {
+    if (!this._player) {
+      return;
+    }
+    this._player.playVideo();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#pauseVideo */
+  pauseVideo() {
+    if (!this._player) {
+      return;
+    }
+    this._player.pauseVideo();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#stopVideo */
+  stopVideo() {
+    if (!this._player) {
+      return;
+    }
+    this._player.stopVideo();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#seekTo */
+  seekTo(seconds: number, allowSeekAhead: boolean) {
+    if (!this._player) {
+      return;
+    }
+    this._player.seekTo(seconds, allowSeekAhead);
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#mute */
+  mute() {
+    if (!this._player) {
+      return;
+    }
+    this._player.mute();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#unMute */
+  unMute() {
+    if (!this._player) {
+      return;
+    }
+    this._player.unMute();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#isMuted */
+  isMuted(): boolean {
+    if (!this._player) {
+      return false;
+    }
+    return this._player.isMuted();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#setVolume */
+  setVolume(volume: number) {
+    if (!this._player) {
+      return;
+    }
+    this._player.setVolume(volume);
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getVolume */
+  getVolume(): number {
+    if (!this._player) {
+      return 0;
+    }
+    return this._player.getVolume();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate */
+  setPlaybackRate(playbackRate: number) {
+    if (!this._player) {
+      return;
+    }
+    return this._player.setPlaybackRate(playbackRate);
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getPlaybackRate */
+  getPlaybackRate(): number {
+    if (!this._player) {
+      return 0;
+    }
+    return this._player.getPlaybackRate();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getAvailablePlaybackRates */
+  getAvailablePlaybackRates(): number[] {
+    if (!this._player) {
+      return [];
+    }
+    return this._player.getAvailablePlaybackRates();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getVideoLoadedFraction */
+  getVideoLoadedFraction(): number {
+    if (!this._player) {
+      return 0;
+    }
+    return this._player.getVideoLoadedFraction();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getPlayerState */
+  getPlayerState(): YT.PlayerState {
+    if (!this._player) {
+      return YT.PlayerState.UNSTARTED;
+    }
+    return this._player.getPlayerState();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getCurrentTime */
+  getCurrentTime(): number {
+    if (!this._player) {
+      return 0;
+    }
+    return this._player.getCurrentTime();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getPlaybackQuality */
+  getPlaybackQuality(): YT.SuggestedVideoQuality {
+    if (!this._player) {
+      return 'default';
+    }
+    return this._player.getPlaybackQuality();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getAvailableQualityLevels */
+  getAvailableQualityLevels(): YT.SuggestedVideoQuality[] {
+    if (!this._player) {
+      return [];
+    }
+    return this._player.getAvailableQualityLevels();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getDuration */
+  getDuration(): number {
+    if (!this._player) {
+      return 0;
+    }
+    return this._player.getDuration();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getVideoUrl */
+  getVideoUrl(): string {
+    if (!this._player) {
+      return '';
+    }
+    return this._player.getVideoUrl();
+  }
+
+  /** See https://developers.google.com/youtube/iframe_api_reference#getVideoEmbedCode */
+  getVideoEmbedCode(): string {
+    if (!this._player) {
+      return '';
+    }
+    return this._player.getVideoEmbedCode();
+  }
 }
 
 /**