refactor(youtube-player): switch placeholder to signals

Switches the internal placeholder component to use signals.

Author: crisbeto

src/youtube-player/youtube-player-placeholder.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {Component, ViewEncapsulation, computed, input} from '@angular/core';
 
 /**  Quality of the placeholder image.  */
 export type PlaceholderImageQuality = 'high' | 'standard' | 'low';
@@ -15,7 +15,7 @@ export type PlaceholderImageQuality = 'high' | 'standard' | 'low';
   selector: 'youtube-player-placeholder',
   encapsulation: ViewEncapsulation.None,
   template: `
-    <button type="button" class="youtube-player-placeholder-button" [attr.aria-label]="buttonLabel">
+    <button type="button" class="youtube-player-placeholder-button" [attr.aria-label]="buttonLabel()">
       <svg
         height="100%"
         version="1.1"
@@ -30,43 +30,45 @@ export type PlaceholderImageQuality = 'high' | 'standard' | 'low';
   styleUrl: 'youtube-player-placeholder.css',
   host: {
     'class': 'youtube-player-placeholder',
-    '[class.youtube-player-placeholder-loading]': 'isLoading',
-    '[style.background-image]': '_getBackgroundImage()',
-    '[style.width.px]': 'width',
-    '[style.height.px]': 'height',
+    '[class.youtube-player-placeholder-loading]': 'isLoading()',
+    '[style.background-image]': '_backgroundImage()',
+    '[style.width.px]': 'width()',
+    '[style.height.px]': 'height()',
   },
 })
 export class YouTubePlayerPlaceholder {
   /** ID of the video for which to show the placeholder. */
-  @Input() videoId!: string;
+  readonly videoId = input.required<string>();
 
   /** Width of the video for which to show the placeholder. */
-  @Input() width!: number;
+  readonly width = input.required<number>();
 
   /** Height of the video for which to show the placeholder. */
-  @Input() height!: number;
+  readonly height = input.required<number>();
 
   /** Whether the video is currently being loaded. */
-  @Input() isLoading: boolean = false;
+  readonly isLoading = input.required<boolean>();
 
   /** Accessible label for the play button. */
-  @Input() buttonLabel!: string;
+  readonly buttonLabel = input.required<string>();
 
   /** Quality of the placeholder image. */
-  @Input() quality!: PlaceholderImageQuality;
+  readonly quality = input.required<PlaceholderImageQuality>();
 
   /** Gets the background image showing the placeholder. */
-  protected _getBackgroundImage(): string | undefined {
+  protected _backgroundImage = computed(() => {
+    const quality = this.quality();
+    const videoId = this.videoId();
     let url: string;
 
-    if (this.quality === 'low') {
-      url = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
-    } else if (this.quality === 'high') {
-      url = `https://i.ytimg.com/vi/${this.videoId}/maxresdefault.jpg`;
+    if (quality === 'low') {
+      url = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
+    } else if (quality === 'high') {
+      url = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;
     } else {
-      url = `https://i.ytimg.com/vi_webp/${this.videoId}/sddefault.webp`;
+      url = `https://i.ytimg.com/vi_webp/${videoId}/sddefault.webp`;
     }
 
     return `url(${url})`;
-  }
+  });
 }