Skip to content

Commit b7abe79

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

37 files changed

+1650
-4
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

‎build-config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ const angularVersion = packageJson.requiredAngularVersion;
2121
*/
2222
const mdcVersion = packageJson.requiredMDCVersion;
2323

24+
/**
25+
* Required rxjs version for all Angular Material packages. This version will be used
26+
* as the peer dependency version for rxjs in all release packages that require rxjs.
27+
*/
28+
const rxjsVersion = packageJson.requiredRxjsVersion;
29+
2430
/** License that will be placed inside of all created bundles. */
2531
const buildLicense = `/**
2632
* @license
@@ -34,6 +40,7 @@ module.exports = {
3440
projectVersion: buildVersion,
3541
angularVersion: angularVersion,
3642
mdcVersion: mdcVersion,
43+
rxjsVersion: rxjsVersion,
3744
projectDir: __dirname,
3845
packagesDir: join(__dirname, 'src'),
3946
outputDir: join(__dirname, 'dist'),

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"version": "8.0.1",
3737
"requiredAngularVersion": "^8.0.0 || ^9.0.0-0",
3838
"requiredMDCVersion": "^1.1.0",
39+
"requiredRxjsVersion": "^6.4.0",
3940
"dependencies": {
4041
"@angular/animations": "^8.0.0",
4142
"@angular/common": "^8.0.0",

‎packages.bzl

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,11 @@ MATERIAL_EXPERIMENTAL_SCSS_LIBS = [
108108
# version for the placeholders.
109109
ANGULAR_PACKAGE_VERSION = "^8.0.0 || ^9.0.0-0"
110110
MDC_PACKAGE_VERSION = "^1.1.0"
111+
RXJS_PACKAGE_VERSION = "^6.4.0"
111112
VERSION_PLACEHOLDER_REPLACEMENTS = {
112113
"0.0.0-NG": ANGULAR_PACKAGE_VERSION,
113114
"0.0.0-MDC": MDC_PACKAGE_VERSION,
115+
"0.0.0-RX": RXJS_PACKAGE_VERSION,
114116
}
115117

116118
# Base rollup globals for everything in the repo.
@@ -121,6 +123,7 @@ ROLLUP_GLOBALS = {
121123
"@angular/cdk-experimental": "ng.cdkExperimental",
122124
"@angular/material": "ng.material",
123125
"@angular/material-experimental": "ng.materialExperimental",
126+
"@angular/youtube-player": "ng.youtubePlayer",
124127
}
125128

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

‎src/youtube-player/BUILD.bazel

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
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+
"@npm//rxjs",
28+
],
29+
)
30+
31+
ng_package(
32+
name = "npm_package",
33+
srcs = ["package.json"],
34+
entry_point = "src/youtube-player/public_api.js",
35+
entry_point_name = "youtube-player",
36+
globals = ROLLUP_GLOBALS,
37+
deps = [":youtube-player"],
38+
)
39+
40+
ng_test_library(
41+
name = "unit_test_sources",
42+
srcs = glob(
43+
["**/*.spec.ts"],
44+
exclude = ["**/*.e2e.spec.ts"],
45+
),
46+
deps = [
47+
":youtube-player",
48+
"@npm//@angular/platform-browser",
49+
],
50+
)
51+
52+
ng_web_test_suite(
53+
name = "unit_tests",
54+
deps = [":unit_test_sources"],
55+
)
56+
57+
ng_e2e_test_library(
58+
name = "e2e_test_sources",
59+
srcs = glob(["**/*.e2e.spec.ts"]),
60+
deps = [
61+
"//src/cdk/testing/e2e",
62+
],
63+
)
64+
65+
protractor_web_test_suite(
66+
name = "e2e_tests",
67+
configuration = "//src/e2e-app:protractor.conf.js",
68+
data = [
69+
"//tools/axe-protractor",
70+
"@npm//@angular/bazel",
71+
],
72+
on_prepare = "//src/e2e-app:start-devserver.js",
73+
server = "//src/e2e-app:devserver",
74+
tags = ["e2e"],
75+
deps = [
76+
":e2e_test_sources",
77+
"//src/cdk/testing/e2e",
78+
],
79+
)
80+
81+
markdown_to_html(
82+
name = "overview",
83+
srcs = [":youtube-player.md"],
84+
)
85+
86+
filegroup(
87+
name = "source-files",
88+
srcs = glob(["**/*.ts"]),
89+
)

‎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: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
"peerDependencies": {
24+
"@angular/core": "0.0.0-NG",
25+
"@angular/common": "0.0.0-NG",
26+
"rxjs": "0.0.0-RX"
27+
},
28+
"sideEffects": false
29+
}

‎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+
},
17+
"files": [
18+
"public-api.ts",
19+
"yt.d.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.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+
},
9+
"files": ["yt.d.ts"],
10+
"include": ["./**/*.ts"]
11+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {CommonModule} from '@angular/common';
2+
import {NgModule} from '@angular/core';
3+
4+
import {YouTubePlayer} from './youtube-player';
5+
6+
const COMPONENTS = [YouTubePlayer];
7+
8+
@NgModule(
9+
{declarations: COMPONENTS, exports: COMPONENTS, imports: [CommonModule]})
10+
export class YouTubePlayerModule {
11+
}

0 commit comments

Comments
 (0)