diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c419263 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/public/app/system.config.js b/public/app/system.config.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/public/app/system.config.js @@ -0,0 +1 @@ + diff --git a/public/package.json b/public/package.json new file mode 100644 index 0000000..a910154 --- /dev/null +++ b/public/package.json @@ -0,0 +1,26 @@ +{ + "name": "cloud-cardboard-viewer", + "description": "Angular2 and Node.js Cardboard video viewer.", + "version": "0.1.0", + "private": true, + "license": "Apache-2.0", + "author": "Google Inc.", + "repository": { + "type": "git", + "url": "https://github.com/googlecodelabs/cloud-cardboard-viewer.git" + }, + "contributors": [ + "Jason Dobry " + ], + "dependencies": { + "@google-cloud/debug-agent": "0.10.2", + "@google/cloud-errors": "0.1.1", + "@google/cloud-trace": "0.6.2", + "body-parser": "1.16.1", + "express": "4.14.1", + "googleapis": "16.1.0" + }, + "engines": { + "node": "~6" + } +} diff --git a/public/server.js b/public/server.js new file mode 100644 index 0000000..26548c8 --- /dev/null +++ b/public/server.js @@ -0,0 +1,7 @@ +if (process.env.NODE_ENV === "production") { + require("@google/cloud-trace").start(); +} + +if (process.env.GCLOUD_PROJECT) { + require("@google/cloud-debug").start(); +} diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/about.component.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/about.component.ts" new file mode 100644 index 0000000..80268be --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/about.component.ts" @@ -0,0 +1,27 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { Component } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'about', + template: ` + About + ` +}) +export class AboutComponent {} diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app-routing.module.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app-routing.module.ts" new file mode 100644 index 0000000..444b129 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app-routing.module.ts" @@ -0,0 +1,34 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { HomeComponent } from './home.component'; +import { AboutComponent } from './about.component'; + +const routes: Routes = [ + { path: '', component: HomeComponent }, + { path: 'about', component: AboutComponent }, + { path: '**', redirectTo: '' } +]; + +@NgModule({ + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ] +}) +export class AppRoutingModule {} diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app.component.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app.component.ts" new file mode 100644 index 0000000..aac5520 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app.component.ts" @@ -0,0 +1,55 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { Component } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'app', + styles: [` + .router-link-active { + text-decoration: underline; + } + `], + template: ` +
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+ ` +}) +export class AppComponent {} diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app.module.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app.module.ts" new file mode 100644 index 0000000..c063ef5 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/app.module.ts" @@ -0,0 +1,45 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import './rxjs-extensions'; + +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpModule } from '@angular/http'; + +import { AppRoutingModule } from './app-routing.module'; + +import { AppComponent } from './app.component'; +import { HomeComponent } from './home.component'; +import { AboutComponent } from './about.component'; +import { VideoCardComponent } from './video-card.component'; + +@NgModule({ + imports: [ + BrowserModule, + HttpModule, + AppRoutingModule + ], + declarations: [ + AppComponent, + HomeComponent, + AboutComponent, + VideoCardComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/home.component.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/home.component.ts" new file mode 100644 index 0000000..dffb9c3 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/home.component.ts" @@ -0,0 +1,49 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { Component } from '@angular/core'; +import { Http } from '@angular/http'; +import { Video, VideoCardComponent } from './video-card.component'; + +@Component({ + moduleId: module.id, + selector: 'home', + template: ` +

3D Cardboard Videos

+
+ {{ resultsPerPage }} of {{ totalResults }} results +
+
+ + ` +}) +export class HomeComponent { + resultsPerPage: number; + totalResults: number; + videos = []; + constructor (public http: Http) { + + } + ngOnInit () { + this.http.get('/data.json').subscribe((res) => { + const data = res.json(); + this.resultsPerPage = data.pageInfo.resultsPerPage; + this.totalResults = data.pageInfo.totalResults; + this.videos = data.items.map((video) => new Video(video)); + }); + } +} diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/index.css" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/index.css" new file mode 100644 index 0000000..8b13789 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/index.css" @@ -0,0 +1 @@ + diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/index.html" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/index.html" new file mode 100644 index 0000000..dcaf716 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/index.html" @@ -0,0 +1 @@ +index.html diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/main.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/main.ts" new file mode 100644 index 0000000..4c0aa26 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/main.ts" @@ -0,0 +1,22 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/package.json" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/package.json" new file mode 100644 index 0000000..ec6d3cd --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/package.json" @@ -0,0 +1 @@ +package.json diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/rxjs-extensions.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/rxjs-extensions.ts" new file mode 100644 index 0000000..e807dfe --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/rxjs-extensions.ts" @@ -0,0 +1,29 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +// Observable class extensions +import 'rxjs/add/observable/of'; +import 'rxjs/add/observable/throw'; + +// Observable operators +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/filter'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/switchMap'; diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/server.js" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/server.js" new file mode 100644 index 0000000..26548c8 --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/server.js" @@ -0,0 +1,7 @@ +if (process.env.NODE_ENV === "production") { + require("@google/cloud-trace").start(); +} + +if (process.env.GCLOUD_PROJECT) { + require("@google/cloud-debug").start(); +} diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/video-card.component.ts" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/video-card.component.ts" new file mode 100644 index 0000000..3c89c8b --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/video-card.component.ts" @@ -0,0 +1,90 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { Component, Input } from '@angular/core'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; + +export class Video { + id: { + videoId: string + } + snippet: { + description: string + publishedAt: string|Date + title: string + thumbnails: { + high: { + url: string + } + } + } + constructor (props) { + for (var key in props) { + this[key] = props[key]; + } + this.snippet.publishedAt = new Date(this.snippet.publishedAt); + } +} + +/** + * Component for displaying a single search result. + */ +@Component({ + moduleId: module.id, + selector: 'video-card', + styleUrls: ['src/app/video-card.css'], + template: ` +
+
+
{{ video.snippet.title }}
+
+ Published {{ video.snippet.publishedAt | date }} +
+ {{ video.snippet.description }} +
+
+
+ +
+
+ +
+
+
+ ` +}) +export class VideoCardComponent { + constructor(private sanitizer: DomSanitizer) { + this.sanitizer = sanitizer; + } + @Input() video: Video + show: boolean = false + videoUrl: SafeResourceUrl + updateVideoUrl(video: Video) { + // Appending an ID to a YouTube URL is safe. + // Always make sure to construct SafeValue objects as + // close as possible to the input data, so + // that it's easier to check if the value is safe. + const dangerousVideoUrl = `https://www.youtube.com/embed/${video.id.videoId}?autoplay=0`; + return this.sanitizer.bypassSecurityTrustResourceUrl(dangerousVideoUrl); + } +} diff --git "a/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/video-card.css" "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/video-card.css" new file mode 100644 index 0000000..e9b84ae --- /dev/null +++ "b/\345\205\254\345\205\261/\346\207\211\347\224\250\347\250\213\345\272\217/video-card.css" @@ -0,0 +1,25 @@ +/** + * Copyright 2017, Google, Inc. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.video-card { + margin-bottom: 20px; +} +.video-card iframe { + border: 0; + height: 220px; +} +.video-card img { + cursor: pointer; +}