fix(youtube-player): update to latest typings and fix error (#33387)

Updates to the latest typings for YouTube and fix a build failure that showed up.

Author: crisbeto

goldens/youtube-player/index.api.md

@@ -14,7 +14,6 @@ import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
-import * as YT_2 from 'youtube';
 
 // @public
 export type PlaceholderImageQuality = 'high' | 'standard' | 'low';
@@ -25,18 +24,18 @@ export const YOUTUBE_PLAYER_CONFIG: InjectionToken<YouTubePlayerConfig>;
 // @public
 export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
     constructor();
-    readonly apiChange: Observable<YT_2.PlayerEvent>;
+    readonly apiChange: Observable<YT.PlayerEvent>;
     disableCookies: boolean;
     disablePlaceholder: boolean;
     endSeconds: number | undefined;
-    readonly error: Observable<YT_2.OnErrorEvent>;
+    readonly error: Observable<YT.OnErrorEvent>;
     getAvailablePlaybackRates(): number[];
-    getAvailableQualityLevels(): YT_2.SuggestedVideoQuality[];
+    getAvailableQualityLevels(): YT.SuggestedVideoQuality[];
     getCurrentTime(): number;
     getDuration(): number;
-    getPlaybackQuality(): YT_2.SuggestedVideoQuality;
+    getPlaybackQuality(): YT.SuggestedVideoQuality;
     getPlaybackRate(): number;
-    getPlayerState(): YT_2.PlayerState | undefined;
+    getPlayerState(): YT.PlayerState | undefined;
     getVideoEmbedCode(): string;
     getVideoLoadedFraction(): number;
     getVideoUrl(): string;
@@ -76,21 +75,21 @@ export class YouTubePlayer implements AfterViewInit, OnChanges, OnDestroy {
     pauseVideo(): void;
     placeholderButtonLabel: string;
     placeholderImageQuality: PlaceholderImageQuality;
-    readonly playbackQualityChange: Observable<YT_2.OnPlaybackQualityChangeEvent>;
-    readonly playbackRateChange: Observable<YT_2.OnPlaybackRateChangeEvent>;
-    playerVars: YT_2.PlayerVars | undefined;
+    readonly playbackQualityChange: Observable<YT.OnPlaybackQualityChangeEvent>;
+    readonly playbackRateChange: Observable<YT.OnPlaybackRateChangeEvent>;
+    playerVars: YT.PlayerVars | undefined;
     playVideo(): void;
-    readonly ready: Observable<YT_2.PlayerEvent>;
+    readonly ready: Observable<YT.PlayerEvent>;
     requestFullscreen(options?: FullscreenOptions): Promise<void>;
     seekTo(seconds: number, allowSeekAhead: boolean): void;
     setPlaybackRate(playbackRate: number): void;
     setVolume(volume: number): void;
     protected _shouldShowPlaceholder(): boolean;
     showBeforeIframeApiLoads: boolean;
     startSeconds: number | undefined;
-    readonly stateChange: Observable<YT_2.OnStateChangeEvent>;
+    readonly stateChange: Observable<YT.OnStateChangeEvent>;
     stopVideo(): void;
-    suggestedQuality: YT_2.SuggestedVideoQuality | undefined;
+    suggestedQuality: YT.SuggestedVideoQuality | undefined;
     unMute(): void;
     videoId: string | undefined;
     get width(): number;

package.json

@@ -64,7 +64,7 @@
     "@angular/forms": "catalog:",
     "@angular/platform-browser": "catalog:",
     "@types/google.maps": "^3.54.10",
-    "@types/youtube": "0.2.0",
+    "@types/youtube": "0.3.0",
     "date-fns": "^4.1.0",
     "luxon": "^3.7.2",
     "moment": "^2.29.1",

pnpm-lock.yaml

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import type * as YT from 'youtube';
-
 // A re-creation of YT.PlayerState since enum values cannot be bound to the window object.
 const playerState = {
   UNSTARTED: -1,

src/youtube-player/fake-youtube-player.ts

@@ -17,7 +17,7 @@
   },
   "homepage": "https://github.com/angular/components/tree/main/src/youtube-player#readme",
   "dependencies": {
-    "@types/youtube": "0.2.0",
+    "@types/youtube": "0.3.0",
     "tslib": "^2.3.0",
     "safevalues": "^1.2.0"
   },

src/youtube-player/package.json

@@ -15,7 +15,6 @@ import {
   YouTubePlayer,
 } from './youtube-player';
 import {PlaceholderImageQuality} from './youtube-player-placeholder';
-import type * as YT from 'youtube';
 
 declare var window: Window;
 

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

@@ -9,8 +9,6 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="youtube" preserve="true" />
 
-import type * as YT from 'youtube';
-
 import {
   Component,
   ElementRef,