feat(youtube-player): support no cookie mode (angular#25165)

Adds a `disableCookies` input that puts the player into "no cookie" mode.

Fixes angular#19681.

Author: crisbeto

src/dev-app/youtube-player/BUILD.bazel

@@ -10,6 +10,7 @@ ng_module(
         ":youtube_player_demo_scss",
     ],
     deps = [
+        "//src/material/legacy-checkbox",
         "//src/material/legacy-radio",
         "//src/youtube-player",
         "@npm//@angular/forms",

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

@@ -10,7 +10,11 @@ <h1>Basic Example</h1>
         <mat-radio-button [value]="undefined">Unset</mat-radio-button>
       </mat-radio-group>
     </div>
+    <div class="demo-video-selection">
+      <mat-checkbox [(ngModel)]="disableCookies">Disable cookies</mat-checkbox>
+    </div>
     <youtube-player [videoId]="selectedVideo && selectedVideo.id"
-                    [width]="videoWidth" [height]="videoHeight"></youtube-player>
+                    [width]="videoWidth" [height]="videoHeight"
+                    [disableCookies]="disableCookies"></youtube-player>
   </section>
 </div>

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

@@ -18,6 +18,7 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
 import {YouTubePlayerModule} from '@angular/youtube-player';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 
 interface Video {
   id: string;
@@ -44,14 +45,21 @@ const VIDEOS: Video[] = [
   templateUrl: 'youtube-player-demo.html',
   styleUrls: ['youtube-player-demo.css'],
   standalone: true,
-  imports: [CommonModule, FormsModule, MatLegacyRadioModule, YouTubePlayerModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatLegacyRadioModule,
+    MatLegacyCheckboxModule,
+    YouTubePlayerModule,
+  ],
 })
 export class YouTubePlayerDemo implements AfterViewInit, OnDestroy {
   @ViewChild('demoYouTubePlayer') demoYouTubePlayer: ElementRef<HTMLDivElement>;
   selectedVideo: Video | undefined = VIDEOS[0];
   videos = VIDEOS;
   videoWidth: number | undefined;
   videoHeight: number | undefined;
+  disableCookies = false;
 
   constructor(private _changeDetectorRef: ChangeDetectorRef) {
     this._loadApi();

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

@@ -380,6 +380,28 @@ describe('YoutubePlayer', () => {
 
       expect(playerSpy.seekTo).toHaveBeenCalledWith(1337, true);
     });
+
+    it('should be able to disable cookies', () => {
+      const containerElement = fixture.nativeElement.querySelector('div');
+
+      expect(playerCtorSpy).toHaveBeenCalledWith(
+        containerElement,
+        jasmine.objectContaining({
+          host: undefined,
+        }),
+      );
+
+      playerCtorSpy.calls.reset();
+      fixture.componentInstance.disableCookies = true;
+      fixture.detectChanges();
+
+      expect(playerCtorSpy).toHaveBeenCalledWith(
+        containerElement,
+        jasmine.objectContaining({
+          host: 'https://www.youtube-nocookie.com',
+        }),
+      );
+    });
   });
 
   describe('API loaded asynchronously', () => {
@@ -498,6 +520,7 @@ describe('YoutubePlayer', () => {
     <youtube-player #player [videoId]="videoId" *ngIf="visible" [width]="width" [height]="height"
       [startSeconds]="startSeconds" [endSeconds]="endSeconds" [suggestedQuality]="suggestedQuality"
       [playerVars]="playerVars"
+      [disableCookies]="disableCookies"
       (ready)="onReady($event)"
       (stateChange)="onStateChange($event)"
       (playbackQualityChange)="onPlaybackQualityChange($event)"
@@ -509,6 +532,7 @@ describe('YoutubePlayer', () => {
 })
 class TestApp {
   videoId: string | undefined = VIDEO_ID;
+  disableCookies = false;
   visible = true;
   width: number | undefined;
   height: number | undefined;

src/youtube-player/youtube-player.ts

@@ -73,11 +73,15 @@ export const DEFAULT_PLAYER_HEIGHT = 390;
 interface Player extends YT.Player {
   videoId?: string;
   playerVars?: YT.PlayerVars;
+  host?: string;
 }
 
 // The player isn't fully initialized when it's constructed.
 // The only field available is destroy and addEventListener.
-type UninitializedPlayer = Pick<Player, 'videoId' | 'playerVars' | 'destroy' | 'addEventListener'>;
+type UninitializedPlayer = Pick<
+  Player,
+  'videoId' | 'playerVars' | 'destroy' | 'addEventListener' | 'host'
+>;
 
 /**
  * Object used to store the state of the player if the
@@ -179,6 +183,16 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
   }
   private _playerVars = new BehaviorSubject<YT.PlayerVars | undefined>(undefined);
 
+  /** Whether cookies inside the player have been disabled. */
+  @Input()
+  get disableCookies(): boolean {
+    return this._disableCookies.value;
+  }
+  set disableCookies(value: unknown) {
+    this._disableCookies.next(!!value);
+  }
+  private readonly _disableCookies = new BehaviorSubject<boolean>(false);
+
   /**
    * 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
@@ -241,10 +255,15 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
       iframeApiAvailableObs = iframeApiAvailableSubject.pipe(take(1), startWith(false));
     }
 
+    const hostObservable = this._disableCookies.pipe(
+      map(cookiesDisabled => (cookiesDisabled ? 'https://www.youtube-nocookie.com' : undefined)),
+    );
+
     // An observable of the currently loaded player.
     const playerObs = createPlayerObservable(
       this._youtubeContainer,
       this._videoId,
+      hostObservable,
       iframeApiAvailableObs,
       this._width,
       this._height,
@@ -648,18 +667,19 @@ function waitUntilReady(
 function createPlayerObservable(
   youtubeContainer: Observable<HTMLElement>,
   videoIdObs: Observable<string | undefined>,
+  hostObs: Observable<string | undefined>,
   iframeApiAvailableObs: Observable<boolean>,
   widthObs: Observable<number>,
   heightObs: Observable<number>,
   playerVarsObs: Observable<YT.PlayerVars | undefined>,
   ngZone: NgZone,
 ): Observable<UninitializedPlayer | undefined> {
-  const playerOptions = combineLatest([videoIdObs, playerVarsObs]).pipe(
+  const playerOptions = combineLatest([videoIdObs, hostObs, playerVarsObs]).pipe(
     withLatestFrom(combineLatest([widthObs, heightObs])),
     map(([constructorOptions, sizeOptions]) => {
-      const [videoId, playerVars] = constructorOptions;
+      const [videoId, host, playerVars] = constructorOptions;
       const [width, height] = sizeOptions;
-      return videoId ? {videoId, playerVars, width, height} : undefined;
+      return videoId ? {videoId, playerVars, width, height, host} : undefined;
     }),
   );
 
@@ -684,7 +704,11 @@ function syncPlayerState(
   player: UninitializedPlayer | undefined,
   [container, videoOptions, ngZone]: [HTMLElement, YT.PlayerOptions | undefined, NgZone],
 ): UninitializedPlayer | undefined {
-  if (player && videoOptions && player.playerVars !== videoOptions.playerVars) {
+  if (
+    player &&
+    videoOptions &&
+    (player.playerVars !== videoOptions.playerVars || player.host !== videoOptions.host)
+  ) {
     // The player needs to be recreated if the playerVars are different.
     player.destroy();
   } else if (!videoOptions) {
@@ -704,6 +728,7 @@ function syncPlayerState(
   );
   newPlayer.videoId = videoOptions.videoId;
   newPlayer.playerVars = videoOptions.playerVars;
+  newPlayer.host = videoOptions.host;
   return newPlayer;
 }
 

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

@@ -25,6 +25,8 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
     constructor(_ngZone: NgZone, platformId: Object);
     // (undocumented)
     readonly apiChange: Observable<YT.PlayerEvent>;
+    get disableCookies(): boolean;
+    set disableCookies(value: unknown);
     set endSeconds(endSeconds: number | undefined);
     // (undocumented)
     readonly error: Observable<YT.OnErrorEvent>;
@@ -74,7 +76,7 @@ export class YouTubePlayer implements AfterViewInit, OnDestroy, OnInit {
     set width(width: number | undefined);
     youtubeContainer: ElementRef<HTMLElement>;
     // (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, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YouTubePlayer, "youtube-player", never, { "videoId": "videoId"; "height": "height"; "width": "width"; "startSeconds": "startSeconds"; "endSeconds": "endSeconds"; "suggestedQuality": "suggestedQuality"; "playerVars": "playerVars"; "disableCookies": "disableCookies"; "showBeforeIframeApiLoads": "showBeforeIframeApiLoads"; }, { "ready": "ready"; "stateChange": "stateChange"; "error": "error"; "apiChange": "apiChange"; "playbackQualityChange": "playbackQualityChange"; "playbackRateChange": "playbackRateChange"; }, never, never, false>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<YouTubePlayer, never>;
 }