demo(youtube-player): add auto video resizing (angular#17648)

- automatically resize the video to fit the screen
  - this was noticeable on mobile where the video would just get cut off
- rename video to selectedVideo for clarity
- fix TypeScript path mappings so that IDEs don't complain about module
- use classes to style Material components as recommended

Author: Splaktar

src/dev-app/tsconfig.json

@@ -16,7 +16,8 @@
       "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
       "@angular/google-maps": ["../google-maps"],
       "@angular/components-examples": ["../components-examples"],
-      "@angular/components-examples/*": ["../components-examples/*"]
+      "@angular/components-examples/*": ["../components-examples/*"],
+      "@angular/youtube-player": ["../youtube-player"]
     }
   },
   "include": ["./**/*.ts"]

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

@@ -1,15 +1,16 @@
-<div>
+<div #demoYouTubePlayer class="demo-youtube-player">
   <h1>Basic Example</h1>
   <section>
     <div class="demo-video-selection">
       <label>Pick the video:</label>
-      <mat-radio-group aria-label="Select a video" [(ngModel)]="video">
+      <mat-radio-group aria-label="Select a video" [(ngModel)]="selectedVideo">
         <mat-radio-button *ngFor="let video of videos" [value]="video">
           {{video.name}}
         </mat-radio-button>
         <mat-radio-button [value]="undefined">Unset</mat-radio-button>
       </mat-radio-group>
     </div>
-    <youtube-player [videoId]="video && video.id"></youtube-player>
+    <youtube-player [videoId]="selectedVideo && selectedVideo.id"
+                    [width]="videoWidth" [height]="videoHeight"></youtube-player>
   </section>
 </div>

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

@@ -1,7 +1,7 @@
 .demo-video-selection {
   margin-bottom: 20px;
 
-  mat-radio-button {
+  .mat-radio-button {
     margin: 8px;
   }
 }

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

@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
- import {Component} from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  ViewChild
+} from '@angular/core';
 
 interface Video {
   id: string;
@@ -33,8 +40,28 @@ const VIDEOS: Video[] = [
   templateUrl: 'youtube-player-demo.html',
   styleUrls: ['youtube-player-demo.css'],
 })
-export class YouTubePlayerDemo {
-  video: Video | undefined = VIDEOS[0];
+export class YouTubePlayerDemo implements AfterViewInit, OnDestroy {
+  @ViewChild('demoYouTubePlayer') demoYouTubePlayer: ElementRef<HTMLDivElement>;
+  selectedVideo: Video | undefined = VIDEOS[0];
   videos = VIDEOS;
-  apiLoaded = false;
+  videoWidth: number | undefined;
+  videoHeight: number | undefined;
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    this.onResize();
+    window.addEventListener('resize', this.onResize);
+  }
+
+  onResize = (): void => {
+    // Automatically expand the video to fit the page up to 1200px x 720px
+    this.videoWidth = Math.min(this.demoYouTubePlayer.nativeElement.clientWidth, 1200);
+    this.videoHeight = this.videoWidth * 0.6;
+    this._changeDetectorRef.detectChanges();
+  }
+
+  ngOnDestroy(): void {
+    window.removeEventListener('resize', this.onResize);
+  }
 }