Skip to content

Commit dbc26ac

Browse files
author
Nathan Tate
committed
feat(youtube-player): initialize component and infrastructure
1 parent 6a7fc81 commit dbc26ac

36 files changed

+700
-2
lines changed

‎.github/CODEOWNERS

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@
5757
/src/material/core/typography/** @crisbeto
5858
/src/material/core/util/** @jelbourn
5959

60+
# Miscellaneous components
61+
/src/youtube-player/** @nathantate
62+
6063
# CDK
6164
/src/cdk/* @jelbourn
6265
/src/cdk/a11y/** @jelbourn @devversion
@@ -210,6 +213,7 @@
210213
/src/e2e-app/test-util/** @jelbourn
211214
/src/e2e-app/toolbar/** @devversion
212215
/src/e2e-app/virtual-scroll/** @mmalerba
216+
/src/e2e-app/youtube-player/** @nathantate
213217

214218
# Universal app
215219
/src/universal-app/** @jelbourn

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@angular/forms": "^8.0.0",
4646
"@angular/platform-browser": "^8.0.0",
4747
"@bazel/buildifier": "^0.25.1",
48+
"@types/youtube": "^0.0.38",
4849
"@webcomponents/custom-elements": "^1.1.0",
4950
"core-js": "^2.6.1",
5051
"material-components-web": "^1.1.0",

‎packages.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ ROLLUP_GLOBALS = {
121121
"@angular/cdk-experimental": "ng.cdkExperimental",
122122
"@angular/material": "ng.material",
123123
"@angular/material-experimental": "ng.materialExperimental",
124+
"@angular/youtube-player": "ng.youtubePlayer",
124125
}
125126

126127
# Rollup globals for cdk subpackages in the form of, e.g., {"@angular/cdk/table": "ng.cdk.table"}

‎src/e2e-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ ng_module(
5555
"//src/material/sidenav",
5656
"//src/material/slide-toggle",
5757
"//src/material/tabs",
58+
"//src/youtube-player",
5859
"@npm//@angular/animations",
5960
"@npm//@angular/core",
6061
"@npm//@angular/elements",

‎src/e2e-app/e2e-app/e2e-app-layout.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
3232
<a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
3333
<a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
34+
<a mat-list-item [routerLink]="['youtube-player']">YouTube Player</a>
3435
</mat-nav-list>
3536

3637
<main>

‎src/e2e-app/e2e-app/routes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {StepperE2e} from '../stepper/stepper-e2e';
2929
import {BasicTabs} from '../tabs/tabs-e2e';
3030
import {ToolbarE2e} from '../toolbar/toolbar-e2e';
3131
import {VirtualScrollE2E} from '../virtual-scroll/virtual-scroll-e2e';
32+
import {YouTubePlayerE2E} from '../youtube-player/youtube-player-e2e';
3233
import {Home} from './e2e-app-layout';
3334

3435
export const E2E_APP_ROUTES: Routes = [
@@ -63,4 +64,5 @@ export const E2E_APP_ROUTES: Routes = [
6364
{path: 'tabs', component: BasicTabs},
6465
{path: 'toolbar', component: ToolbarE2e},
6566
{path: 'virtual-scroll', component: VirtualScrollE2E},
67+
{path: 'youtube-player', component: YouTubePlayerE2E},
6668
];

‎src/e2e-app/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
<script src="core-js/client/core.min.js"></script>
3131
<script src="zone.js/dist/zone.min.js"></script>
3232
<script src="hammerjs/hammer.min.js"></script>
33+
<script src="https://www.youtube.com/iframe_api"></script>
3334

3435
<!-- ConcatJS bundle from the Bazel TypeScript devserver. -->
3536
<script src="bundle.js"></script>

‎src/e2e-app/main-module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {StepperE2eModule} from './stepper/stepper-e2e-module';
3737
import {TabsE2eModule} from './tabs/tabs-e2e-module';
3838
import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
3939
import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
40+
import {YouTubePlayerE2eModule} from './youtube-player/youtube-player-e2e-module';
4041

4142
@NgModule({
4243
imports: [
@@ -76,6 +77,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
7677
TabsE2eModule,
7778
ToolbarE2eModule,
7879
VirtualScrollE2eModule,
80+
YouTubePlayerE2eModule,
7981
],
8082
declarations: [
8183
E2eApp,

‎src/e2e-app/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"@angular/cdk-experimental": ["../cdk-experimental/"],
1414
"@angular/material-moment-adapter": ["../material-moment-adapter/"],
1515
"@angular/material-examples": ["../material-examples/"]
16-
}
16+
},
17+
"types": ["youtube"]
1718
},
1819
"include": ["./**/*.ts"]
1920
}

‎src/e2e-app/youtube-player/youtube-player-e2e-module.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {CommonModule} from '@angular/common';
10+
import {FormsModule} from '@angular/forms';
11+
import {MatRadioModule} from '@angular/material/radio';
12+
import {NgModule} from '@angular/core';
13+
import {YouTubePlayerModule} from '@angular/youtube-player';
14+
import {YouTubePlayerE2E} from './youtube-player-e2e';
15+
16+
@NgModule({
17+
imports: [
18+
CommonModule,
19+
FormsModule,
20+
MatRadioModule,
21+
YouTubePlayerModule,
22+
],
23+
declarations: [YouTubePlayerE2E],
24+
})
25+
export class YouTubePlayerE2eModule {
26+
}

‎src/e2e-app/youtube-player/youtube-player-e2e.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div>
2+
<div *ngIf="!apiLoaded" id="youtube-loading">Loading youtube api...</div>
3+
<div>Video ID: {{video && video.id}}</div>
4+
<div>Video Name: {{video && video.name}}</div>
5+
<div>
6+
<label>Pick the video</label>
7+
<mat-radio-group aria-label="Select a video" [(ngModel)]="video">
8+
<mat-radio-button *ngFor="let video of videos" [value]="video">
9+
{{video.name}}
10+
</mat-radio-button>
11+
<mat-radio-button [value]="undefined">Unset</mat-radio-button>
12+
</mat-radio-group>
13+
</div>
14+
<youtube-player *ngIf="apiLoaded && video"
15+
[videoId]="video && video.id">
16+
</youtube-player>
17+
</div>

‎src/e2e-app/youtube-player/youtube-player-e2e.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {ChangeDetectorRef, Component} from '@angular/core';
2+
3+
declare global {
4+
interface Window {
5+
YT: typeof YT | undefined;
6+
onYouTubeIframeAPIReady: () => void;
7+
}
8+
}
9+
10+
interface Video {
11+
id: string;
12+
name: string;
13+
}
14+
15+
const VIDEOS: Video[] = [
16+
{
17+
id: 'PRQCAL_RMVo',
18+
name: 'Instructional',
19+
},
20+
{
21+
id: 'O0xx5SvjmnU',
22+
name: 'Angular Conf',
23+
},
24+
{
25+
id: 'invalidname',
26+
name: 'Invalid',
27+
},
28+
];
29+
30+
@Component({
31+
moduleId: module.id,
32+
selector: 'youtube-player-e2e',
33+
templateUrl: 'youtube-player-e2e.html',
34+
})
35+
export class YouTubePlayerE2E {
36+
video: Video | undefined = VIDEOS[0];
37+
videos = VIDEOS;
38+
apiLoaded = false;
39+
40+
constructor(private _ref: ChangeDetectorRef) {
41+
if (window.YT) {
42+
this.apiLoaded = true;
43+
return;
44+
}
45+
46+
window.onYouTubeIframeAPIReady = () => {
47+
this.apiLoaded = true;
48+
this._ref.detectChanges();
49+
};
50+
}
51+
}

‎src/youtube-player/BUILD.bazel

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
package(default_visibility = ["//visibility:public"])
2+
3+
load("//:packages.bzl", "ROLLUP_GLOBALS")
4+
load(
5+
"//tools:defaults.bzl",
6+
"markdown_to_html",
7+
"ng_e2e_test_library",
8+
"ng_module",
9+
"ng_package",
10+
"ng_test_library",
11+
"ng_web_test_suite",
12+
)
13+
load("@npm_angular_bazel//:index.bzl", "protractor_web_test_suite")
14+
15+
ng_module(
16+
name = "youtube-player",
17+
srcs = glob(
18+
["**/*.ts"],
19+
exclude = ["**/*.spec.ts"],
20+
),
21+
assets = glob(["**/*.html"]),
22+
module_name = "@angular/youtube-player",
23+
deps = [
24+
"@npm//@angular/common",
25+
"@npm//@angular/core",
26+
"@npm//@angular/forms",
27+
],
28+
)
29+
30+
ng_package(
31+
name = "npm_package",
32+
srcs = ["package.json"],
33+
entry_point = "src/youtube-player/public_api.js",
34+
entry_point_name = "youtube-player",
35+
globals = ROLLUP_GLOBALS,
36+
deps = [":youtube-player"],
37+
)
38+
39+
ng_test_library(
40+
name = "unit_test_sources",
41+
srcs = glob(
42+
["**/*.spec.ts"],
43+
exclude = ["**/*.e2e.spec.ts"],
44+
),
45+
deps = [
46+
":youtube-player",
47+
"@npm//@angular/platform-browser",
48+
],
49+
)
50+
51+
ng_web_test_suite(
52+
name = "unit_tests",
53+
deps = [":unit_test_sources"],
54+
)
55+
56+
ng_e2e_test_library(
57+
name = "e2e_test_sources",
58+
srcs = glob(["**/*.e2e.spec.ts"]),
59+
deps = [
60+
"//src/cdk/testing/e2e",
61+
],
62+
)
63+
64+
protractor_web_test_suite(
65+
name = "e2e_tests",
66+
configuration = "//src/e2e-app:protractor.conf.js",
67+
data = [
68+
"//tools/axe-protractor",
69+
"@npm//@angular/bazel",
70+
],
71+
on_prepare = "//src/e2e-app:start-devserver.js",
72+
server = "//src/e2e-app:devserver",
73+
tags = ["e2e"],
74+
deps = [
75+
":e2e_test_sources",
76+
"//src/cdk/testing/e2e",
77+
],
78+
)
79+
80+
markdown_to_html(
81+
name = "overview",
82+
srcs = [":youtube-player.md"],
83+
)
84+
85+
filegroup(
86+
name = "source-files",
87+
srcs = glob(["**/*.ts"]),
88+
)

‎src/youtube-player/README.md

Whitespace-only changes.

‎src/youtube-player/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './public-api';

‎src/youtube-player/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "@angular/youtube-player",
3+
"version": "0.0.0-PLACEHOLDER",
4+
"description": "Angular YouTube Player",
5+
"main": "./bundles/youtube-player.umd.js",
6+
"module": "./esm5/youtube-player.es5.js",
7+
"es2015": "./esm2015/youtube-player.js",
8+
"typings": "./youtube-player.d.ts",
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/angular/components.git"
12+
},
13+
"keywords": [
14+
"angular",
15+
"components",
16+
"youtube"
17+
],
18+
"license": "MIT",
19+
"bugs": {
20+
"url": "https://github.com/angular/components/issues"
21+
},
22+
"homepage": "https://github.com/angular/components/tree/master/src/youtube-player#readme",
23+
"dependencies": {
24+
"@types/youtube": "^0.0.38"
25+
},
26+
"peerDependencies": {
27+
"@angular/core": "0.0.0-NG",
28+
"@angular/common": "0.0.0-NG"
29+
},
30+
"sideEffects": false
31+
}

‎src/youtube-player/public-api.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './youtube-module';
2+
export * from './youtube-player';

‎src/youtube-player/tsconfig-build.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// TypeScript config file that is used to compile the Material package through Gulp. As the
2+
// long term goal is to switch to Bazel, and we already want to run tests with Bazel, we need to
3+
// ensure the TypeScript build options are the same for Gulp and Bazel. We achieve this by
4+
// extending the generic Bazel build tsconfig which will be used for each entry-point.
5+
{
6+
"extends": "../bazel-tsconfig-build.json",
7+
"compilerOptions": {
8+
"baseUrl": ".",
9+
"outDir": "../../dist/packages/youtube-player",
10+
"rootDir": ".",
11+
"rootDirs": [
12+
".",
13+
"../../dist/packages/youtube-player"
14+
],
15+
"paths": {},
16+
"types": ["youtube"]
17+
},
18+
"files": [
19+
"public-api.ts"
20+
],
21+
"angularCompilerOptions": {
22+
"annotateForClosureCompiler": true,
23+
"strictMetadataEmit": true,
24+
"flatModuleOutFile": "index.js",
25+
"flatModuleId": "@angular/youtube-player",
26+
"skipTemplateCodegen": true,
27+
"fullTemplateTypeCheck": true
28+
}
29+
}

‎src/youtube-player/tsconfig-tests.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// TypeScript config file that extends the default tsconfig file for the library. This config is
2+
// used to compile the tests for Karma. Since the code will run inside of the browser, the target
3+
// needs to be ES5. The format needs to be CommonJS since Karma only supports that module format.
4+
{
5+
"extends": "./tsconfig-build",
6+
"compilerOptions": {
7+
"importHelpers": false,
8+
"module": "commonjs",
9+
"target": "es5",
10+
"types": ["jasmine", "youtube"]
11+
},
12+
"angularCompilerOptions": {
13+
"strictMetadataEmit": true,
14+
"skipTemplateCodegen": true,
15+
"emitDecoratorMetadata": true,
16+
"fullTemplateTypeCheck": true,
17+
18+
// Unset options inherited from tsconfig-build
19+
"annotateForClosureCompiler": false,
20+
"flatModuleOutFile": null,
21+
"flatModuleId": null
22+
},
23+
"include": [
24+
"*.ts"
25+
]
26+
}

‎src/youtube-player/tsconfig.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Configuration for IDEs only.
2+
{
3+
"extends": "../../tsconfig.json",
4+
"compilerOptions": {
5+
"rootDir": "..",
6+
"baseUrl": ".",
7+
"paths": {},
8+
"types": ["jasmine", "youtube"]
9+
},
10+
"include": ["*.ts"]
11+
}

0 commit comments

Comments
 (0)