feat(youtube-player) Add a demo to the dev-app (#16858)

.github/CODEOWNERS

@@ -186,6 +186,7 @@
 /src/dev-app/tree/**                               @jelbourn
 /src/dev-app/typography/**                         @crisbeto
 /src/dev-app/virtual-scroll/**                     @mmalerba
+/src/dev-app/youtube-player/**                     @nathantate
 
 # E2E app
 /src/e2e-app/*                                     @jelbourn

src/dev-app/BUILD.bazel

@@ -72,6 +72,7 @@ ng_module(
         "//src/dev-app/tree",
         "//src/dev-app/typography",
         "//src/dev-app/virtual-scroll",
+        "//src/dev-app/youtube-player",
         "//src/material/core",
         "@npm//@angular/router",
     ],

src/dev-app/dev-app/dev-app-layout.ts

@@ -70,6 +70,7 @@ export class DevAppLayout {
     {name: 'Tree', route: '/tree'},
     {name: 'Typography', route: '/typography'},
     {name: 'Virtual Scrolling', route: '/virtual-scroll'},
+    {name: 'YouTube Player', route: '/youtube-player'},
     {name: 'MDC Button', route: '/mdc-button'},
     {name: 'MDC Card', route: '/mdc-card'},
     {name: 'MDC Checkbox', route: '/mdc-checkbox'},

src/dev-app/dev-app/routes.ts

@@ -105,6 +105,10 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'virtual-scroll',
     loadChildren: 'virtual-scroll/virtual-scroll-demo-module#VirtualScrollDemoModule'
   },
+  {
+    path: 'youtube-player',
+    loadChildren: 'youtube-player/youtube-player-demo-module#YouTubePlayerDemoModule',
+  },
   {path: 'examples', loadChildren: 'examples-page/examples-page-module#ExamplesPageModule'},
   {path: '**', component: DevApp404},
 ];

src/dev-app/index.html

@@ -30,6 +30,7 @@
 
 <script src="systemjs/dist/system.js"></script>
 <script src="system-config.js"></script>
+<script src="https://www.youtube.com/iframe_api"></script>
 <script>
   // Workaround until https://github.com/angular/components/issues/13883 has been addressed.
   var module = {id: ''};

src/dev-app/system-config.js

@@ -105,6 +105,7 @@ MATERIAL_PACKAGES.forEach(function(pkgName) {
 GOOGLE_MAPS_PACKAGES.forEach(function(pkgName) {
   configureEntryPoint('google-maps', pkgName);
 });
+configureEntryPoint('youtube-player');
 
 /** Configures the specified package and its entry-point. */
 function configureEntryPoint(pkgName, entryPoint) {

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

@@ -0,0 +1,24 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "youtube-player",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "youtube-player-demo.html",
+        ":youtube_player_demo_scss",
+    ],
+    deps = [
+        "//src/material/radio",
+        "//src/youtube-player",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "youtube_player_demo_scss",
+    src = "youtube-player-demo.scss",
+)

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

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {MatRadioModule} from '@angular/material/radio';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {YouTubePlayerModule} from '@angular/youtube-player';
+import {YouTubePlayerDemo} from './youtube-player-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatRadioModule,
+    YouTubePlayerModule,
+    RouterModule.forChild([{path: '', component: YouTubePlayerDemo}]),
+  ],
+  declarations: [YouTubePlayerDemo],
+})
+export class YouTubePlayerDemoModule {
+}

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

@@ -0,0 +1,16 @@
+<div>
+  <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-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>
+    <p *ngIf="!apiLoaded">Loading youtube api...</p>
+    <youtube-player *ngIf="apiLoaded" [videoId]="video && video.id"></youtube-player>
+  </section>
+</div>

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

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

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

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+ import {ChangeDetectorRef, Component} from '@angular/core';
+
+declare global {
+  interface Window {
+    YT: typeof YT | undefined;
+    onYouTubeIframeAPIReady: () => void;
+  }
+}
+
+interface Video {
+  id: string;
+  name: string;
+}
+
+const VIDEOS: Video[] = [
+  {
+    id: 'PRQCAL_RMVo',
+    name: 'Instructional',
+  },
+  {
+    id: 'O0xx5SvjmnU',
+    name: 'Angular Conf',
+  },
+  {
+    id: 'invalidname',
+    name: 'Invalid',
+  },
+];
+
+@Component({
+  moduleId: module.id,
+  selector: 'youtube-player-demo',
+  templateUrl: 'youtube-player-demo.html',
+  styleUrls: ['youtube-player-demo.css'],
+})
+export class YouTubePlayerDemo {
+  video: Video | undefined = VIDEOS[0];
+  videos = VIDEOS;
+  apiLoaded = false;
+
+  constructor(private _ref: ChangeDetectorRef) {
+    if (window.YT) {
+      this.apiLoaded = true;
+      return;
+    }
+
+    window.onYouTubeIframeAPIReady = () => {
+      this.apiLoaded = true;
+      this._ref.detectChanges();
+    };
+  }
+}