fix(youtube-player): Allow playlists without specifying videoId (#27529) (#27588)

* fix(youtube-player): Allow playlists without specifying videoId (#27529)

When using a YouTube Player, it is possible to specify a playlist without specifying a videoId. This is useful when you want to play a playlist and don't have a VideoId.

Previously, the player would not initialise if a VideoId wasn't specified but a Playlist was specified, even though the YouTube API supports this use case.

This commit adds support for this use case.

* refactor(youtube-player): fixed spelling mistake

(cherry picked from commit d41be3d)

Author: jamesikanos

src/dev-app/youtube-player/youtube-player-demo.html

@@ -13,7 +13,8 @@ <h1>Basic Example</h1>
     <div class="demo-video-selection">
       <mat-checkbox [(ngModel)]="disableCookies">Disable cookies</mat-checkbox>
     </div>
-    <youtube-player [videoId]="selectedVideo && selectedVideo.id"
+    <youtube-player [videoId]="selectedVideoId"
+                    [playerVars]="playerVars"
                     [width]="videoWidth" [height]="videoHeight"
                     [disableCookies]="disableCookies"></youtube-player>
   </section>

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

@@ -23,6 +23,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 interface Video {
   id: string;
   name: string;
+  isPlaylist?: boolean;
 }
 
 const VIDEOS: Video[] = [
@@ -38,6 +39,16 @@ const VIDEOS: Video[] = [
     id: 'invalidname',
     name: 'Invalid',
   },
+  {
+    id: 'PLOa5YIicjJ-XCGXwnEmMmpHHCn11gUgvL',
+    name: 'Angular Forms Playlist',
+    isPlaylist: true,
+  },
+  {
+    id: 'PLOa5YIicjJ-VpOOoLczAGTLEEznZ2JEa6',
+    name: 'Angular Router Playlist',
+    isPlaylist: true,
+  },
 ];
 
 @Component({
@@ -49,14 +60,19 @@ const VIDEOS: Video[] = [
 })
 export class YouTubePlayerDemo implements AfterViewInit, OnDestroy {
   @ViewChild('demoYouTubePlayer') demoYouTubePlayer: ElementRef<HTMLDivElement>;
-  selectedVideo: Video | undefined = VIDEOS[0];
+  private _selectedVideo?: Video;
+  private _playerVars?: YT.PlayerVars;
+  private _selectedVideoId?: string;
+
   videos = VIDEOS;
   videoWidth: number | undefined;
   videoHeight: number | undefined;
   disableCookies = false;
 
   constructor(private _changeDetectorRef: ChangeDetectorRef) {
     this._loadApi();
+
+    this.selectedVideo = VIDEOS[0];
   }
 
   ngAfterViewInit(): void {
@@ -75,6 +91,37 @@ export class YouTubePlayerDemo implements AfterViewInit, OnDestroy {
     window.removeEventListener('resize', this.onResize);
   }
 
+  get selectedVideoId() {
+    return this._selectedVideoId;
+  }
+
+  get playerVars() {
+    return this._playerVars;
+  }
+
+  get selectedVideo() {
+    return this._selectedVideo;
+  }
+
+  set selectedVideo(value: Video | undefined) {
+    this._selectedVideo = value;
+
+    // If the video is a playlist, don't send a video id, and prepare playerVars instead
+
+    if (!value?.isPlaylist) {
+      this._playerVars = undefined;
+      this._selectedVideoId = value?.id;
+      return;
+    }
+
+    this._playerVars = {
+      list: this._selectedVideo?.id,
+      listType: 'playlist',
+    };
+
+    this._selectedVideoId = undefined;
+  }
+
   private _loadApi() {
     if (!window.YT) {
       // We don't need to wait for the API to load since the

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

@@ -402,6 +402,43 @@ describe('YoutubePlayer', () => {
         }),
       );
     });
+
+    it('should play with a playlist id instead of a video id', () => {
+      playerCtorSpy.calls.reset();
+
+      const playerVars: YT.PlayerVars = {
+        list: 'some-playlist-id',
+        listType: 'playlist',
+      };
+
+      testComponent.videoId = undefined;
+      testComponent.playerVars = playerVars;
+
+      fixture.detectChanges();
+
+      let calls = playerCtorSpy.calls.all();
+
+      expect(calls.length).toBe(1);
+      expect(calls[0].args[1]).toEqual(jasmine.objectContaining({playerVars, videoId: undefined}));
+
+      playerSpy.destroy.calls.reset();
+      playerCtorSpy.calls.reset();
+
+      // Change the vars so that the list type is undefined
+      // We only support a "list" if there's an accompanying "listType"
+      testComponent.playerVars = {
+        ...playerVars,
+        listType: undefined,
+      };
+
+      fixture.detectChanges();
+
+      // The previous instance should have been destroyed
+      expect(playerSpy.destroy).toHaveBeenCalled();
+
+      // Don't expect it to have been called
+      expect(playerCtorSpy.calls.all().length).toHaveSize(0);
+    });
   });
 
   describe('API loaded asynchronously', () => {

src/youtube-player/youtube-player.ts

@@ -679,7 +679,13 @@ function createPlayerObservable(
     map(([constructorOptions, sizeOptions]) => {
       const [videoId, host, playerVars] = constructorOptions;
       const [width, height] = sizeOptions;
-      return videoId ? {videoId, playerVars, width, height, host} : undefined;
+
+      // If there's no video id or a list isn't supplied, bail out
+      if (!videoId && !(playerVars?.list && playerVars?.listType)) {
+        return undefined;
+      }
+
+      return {videoId, playerVars, width, height, host};
     }),
   );