├── src
    ├── assets
    │   └── .gitkeep
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── styles.scss
    ├── app
    │   ├── data
    │   │   ├── models
    │   │   │   ├── video.interface.ts
    │   │   │   └── VIDEOS.ts
    │   │   └── youtube.service.ts
    │   ├── app.component.ts
    │   ├── feed
    │   │   ├── feed.component.scss
    │   │   ├── feed.component.html
    │   │   └── feed.component.ts
    │   ├── app.component.scss
    │   ├── app-routing.module.ts
    │   ├── video-grid
    │   │   ├── video-grid.component.scss
    │   │   ├── video-grid.component.html
    │   │   └── video-grid.component.ts
    │   ├── app.module.ts
    │   └── app.component.html
    ├── main.ts
    ├── index.html
    ├── test.ts
    └── polyfills.ts
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.app.json
├── tsconfig.spec.json
├── .browserslistrc
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
├── karma.conf.js
├── tslint.json
├── angular.json
└── LICENSE


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/twerske/ng-tube/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 
3 | html, body { height: 100%; }
4 | body { 
5 |   margin: 0; 
6 |   font-family: Roboto, "Helvetica Neue", sans-serif; 
7 |   overflow: hidden;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/app/data/models/video.interface.ts:
--------------------------------------------------------------------------------
 1 | export interface Video {
 2 |   videoId: string;
 3 |   videoUrl: string;
 4 |   channelId: string;
 5 |   channelUrl: string;
 6 |   channelTitle: string;
 7 |   title: string;
 8 |   publishedAt?: any;
 9 |   description: string;
10 |   thumbnail: string;
11 |   views?: number;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.scss']
 7 | })
 8 | export class AppComponent {
 9 |   search(query: string) {
10 |     console.log(`Search: ${query}`);
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   async navigateTo(): Promise<unknown> {
 5 |     return browser.get(browser.baseUrl);
 6 |   }
 7 | 
 8 |   async getTitleText(): Promise<string> {
 9 |     return element(by.css('app-root .content span')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "../tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "../out-tsc/e2e",
 6 |     "module": "commonjs",
 7 |     "target": "es2018",
 8 |     "types": [
 9 |       "jasmine",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts",
10 |     "src/polyfills.ts"
11 |   ],
12 |   "include": [
13 |     "src/**/*.d.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/feed/feed.component.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   width: 80%;
 3 |   overflow-y: scroll;
 4 | }
 5 | 
 6 | .videos-grid {
 7 |   display: grid;
 8 |   grid-template-columns: repeat(3, 33%);
 9 |   grid-auto-rows: auto;
10 |   place-content: center;
11 |   
12 |   overflow-x: none;
13 |   overflow-y: scroll;
14 | }
15 | 
16 | .video-card {
17 |   margin: 5px;
18 | 
19 |   .video-header-image {
20 |     background-size: cover;
21 |   }
22 | }


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .toolbar{
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   height: 5%;
 5 | 
 6 |   h1 {
 7 |     margin: 0;
 8 |   }
 9 | }
10 | 
11 | .header-item {
12 |   display: flex;
13 |   align-items: center;
14 | 
15 |   &.right {
16 |     margin-right: 20px;
17 |   }
18 | 
19 |   &.left {
20 |     margin-left: 20px;
21 |   }
22 | }
23 | 
24 | .main {
25 |   display: flex;
26 |   height: 95%;
27 | 
28 |   .navigation {
29 |     width: 20%;
30 |     overflow-y: scroll;
31 |   }
32 | }


--------------------------------------------------------------------------------
/src/app/feed/feed.component.html:
--------------------------------------------------------------------------------
 1 | <div class="videos-grid">
 2 |   <mat-card *ngFor="let video of videos" class="video-card">
 3 |     <img mat-card-image [src]="video.thumbnail" alt="Video thumbnail">
 4 |     <mat-card-header>
 5 |       <div mat-card-avatar class="video-header-image" style="background-image: url({{video.thumbnail}});"></div>
 6 |       <mat-card-title>{{video.title}}</mat-card-title>
 7 |       <mat-card-subtitle>{{video.channelTitle}}</mat-card-subtitle>
 8 |       <mat-card-subtitle>{{video.views}}K views • {{video.publishedAt | date}}</mat-card-subtitle>
 9 |     </mat-card-header>
10 |   </mat-card>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>NgTube</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 |   <link rel="preconnect" href="https://fonts.gstatic.com">
10 |   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
11 |   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12 | </head>
13 | <body class="mat-typography">
14 |   <app-root></app-root>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | import { FeedComponent } from './feed/feed.component';
 4 | import { VideoGridComponent } from './video-grid/video-grid.component';
 5 | 
 6 | const routes: Routes = [
 7 |   { path: '', component: VideoGridComponent },
 8 |   { path: 'feed/:type', component: FeedComponent },
 9 |   { path: '**', component: VideoGridComponent },  // Wildcard route for a 404 page redirects to Home
10 | ];
11 | 
12 | @NgModule({
13 |   imports: [RouterModule.forRoot(routes)],
14 |   exports: [RouterModule]
15 | })
16 | export class AppRoutingModule { }
17 | 


--------------------------------------------------------------------------------
/src/app/video-grid/video-grid.component.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   width: 80%;
 3 |   overflow-y: scroll;
 4 | }
 5 | 
 6 | .search-tags {
 7 |   display: flex;
 8 |   position: fixed;
 9 |   background: #fff;
10 |   width: 100%;
11 |   z-index: 1;
12 |   padding-left: 10px;
13 |   padding-bottom: 10px;
14 | }
15 | 
16 | .videos-grid {
17 |   padding-top: 40px;
18 |   display: grid;
19 |   grid-template-columns: repeat(3, 33%);
20 |   grid-auto-rows: auto;
21 |   place-content: center;
22 |   
23 |   overflow-x: none;
24 |   overflow-y: scroll;
25 | }
26 | 
27 | .video-card {
28 |   margin: 5px;
29 | 
30 |   .video-header-image {
31 |     background-size: cover;
32 |   }
33 | }


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { browser, logging } from 'protractor';
 2 | import { AppPage } from './app.po';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', async () => {
12 |     await page.navigateTo();
13 |     expect(await page.getTitleText()).toEqual('ng-tube app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # For the full list of supported browsers by the Angular framework, please see:
 6 | # https://angular.io/guide/browser-support
 7 | 
 8 | # You can see what browsers were selected by your queries by running:
 9 | #   npx browserslist
10 | 
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: {
11 |   context(path: string, deep?: boolean, filter?: RegExp): {
12 |     keys(): string[];
13 |     <T>(id: string): T;
14 |   };
15 | };
16 | 
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 |   BrowserDynamicTestingModule,
20 |   platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "baseUrl": "./",
 6 |     "outDir": "./dist/out-tsc",
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "strict": true,
 9 |     "noImplicitReturns": true,
10 |     "noFallthroughCasesInSwitch": true,
11 |     "sourceMap": true,
12 |     "declaration": false,
13 |     "downlevelIteration": true,
14 |     "experimentalDecorators": true,
15 |     "moduleResolution": "node",
16 |     "importHelpers": true,
17 |     "target": "es2015",
18 |     "module": "es2020",
19 |     "lib": [
20 |       "es2018",
21 |       "dom"
22 |     ]
23 |   },
24 |   "angularCompilerOptions": {
25 |     "enableI18nLegacyMessageIdFormat": false,
26 |     "strictInjectionParameters": true,
27 |     "strictInputAccessModifiers": true,
28 |     "strictTemplates": true
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/app/video-grid/video-grid.component.html:
--------------------------------------------------------------------------------
 1 | <header class="search-tags">
 2 |   <mat-chip-list aria-label="Fish selection">
 3 |     <mat-chip *ngFor="let tag of searchTags" (click)="changeQueries(tag)">
 4 |       {{ tag }}
 5 |     </mat-chip>
 6 |   </mat-chip-list>
 7 | </header>
 8 | 
 9 | <div class="videos-grid">
10 |   <mat-card *ngFor="let video of videos" class="video-card">
11 |     <img mat-card-image [src]="video.thumbnail" alt="Video thumbnail">
12 |     <mat-card-header>
13 |       <div mat-card-avatar class="video-header-image" style="background-image: url({{video.thumbnail}});"></div>
14 |       <mat-card-title>
15 |         {{video.title}}
16 |       </mat-card-title>
17 |       <mat-card-subtitle>
18 |         {{video.channelTitle}}
19 |       </mat-card-subtitle>
20 |       <mat-card-subtitle>
21 |         {{video.views}}K views • {{video.publishedAt | date}}
22 |       </mat-card-subtitle>
23 |     </mat-card-header>
24 |   </mat-card>
25 | </div>


--------------------------------------------------------------------------------
/src/app/feed/feed.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Subject } from 'rxjs';
 3 | import { takeUntil } from 'rxjs/operators';
 4 | import { Video } from '../data/models/video.interface';
 5 | import { DUMMY_VIDEOS } from '../data/models/VIDEOS';
 6 | import { YoutubeService } from '../data/youtube.service';
 7 | 
 8 | @Component({
 9 |   selector: 'app-feed',
10 |   templateUrl: './feed.component.html',
11 |   styleUrls: ['./feed.component.scss']
12 | })
13 | export class FeedComponent implements OnInit {
14 |   videos: Video[] = [];
15 |   private unsubscribe$: Subject<any> = new Subject();
16 | 
17 |   constructor(private youTubeService: YoutubeService) { }
18 | 
19 |   ngOnInit(): void {        
20 |     this.retrieveVideos()
21 |   }
22 | 
23 |   retrieveVideos() {
24 |     this.youTubeService.getVideos()
25 |       .pipe(takeUntil(this.unsubscribe$))
26 |       .subscribe((items: any) => {
27 |         this.videos = items
28 |       });
29 | 
30 |     if (this.videos.length == 0) this.videos = DUMMY_VIDEOS;
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   SELENIUM_PROMISE_MANAGER: false,
20 |   baseUrl: 'http://localhost:4200/',
21 |   framework: 'jasmine',
22 |   jasmineNodeOpts: {
23 |     showColors: true,
24 |     defaultTimeoutInterval: 30000,
25 |     print: function() {}
26 |   },
27 |   onPrepare() {
28 |     require('ts-node').register({
29 |       project: require('path').join(__dirname, './tsconfig.json')
30 |     });
31 |     jasmine.getEnv().addReporter(new SpecReporter({
32 |       spec: {
33 |         displayStacktrace: StacktraceOption.PRETTY
34 |       }
35 |     }));
36 |   }
37 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ngTube
 2 | 
 3 | This project is part of the #AngularAesthetics series on the [Angular YouTube](https://youtube.com/angular).
 4 | 
 5 | ## Getting up and running
 6 | 
 7 | Clone the project, and `npm i` to install dependencies.
 8 | 
 9 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
10 | 
11 | To use the YouTube API, set up your project and API key [here](https://developers.google.com/youtube/v3/getting-started) and replace the `API_KEY` in `youtube.service.ts`. 
12 | 
13 | ## Learn Angular Material!
14 | 
15 | ### Get Started with Angular Material
16 | - [YouTube video](https://www.youtube.com/watch?v=7Esey-sNRlU)
17 | - [Starter code branch](https://github.com/twerske/ng-tube/tree/get-started-with-material)
18 | - [Solution code](https://github.com/twerske/ng-tube/tree/get-started-with-material-solution)
19 | 
20 | <!-- ### 3 Ways to Refactor your Angular UI
21 | - [YouTube video]()
22 | - [Starter code branch](https://github.com/twerske/ng-tube/tree/best-practices)
23 | - [Solution code](https://github.com/twerske/ng-tube/tree/best-practices-solution)
24 |   - [Add a navigation with component schematics]()
25 |   - [Define small, single purpose, reusable components]()
26 |   - [Modularize your ngModules]() -->


--------------------------------------------------------------------------------
/src/app/video-grid/video-grid.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { Subject } from 'rxjs';
 3 | import { takeUntil } from 'rxjs/operators';
 4 | import { Video } from '../data/models/video.interface';
 5 | import { DUMMY_VIDEOS } from '../data/models/VIDEOS';
 6 | import { YoutubeService } from '../data/youtube.service';
 7 | 
 8 | @Component({
 9 |   selector: 'app-video-grid',
10 |   templateUrl: './video-grid.component.html',
11 |   styleUrls: ['./video-grid.component.scss']
12 | })
13 | export class VideoGridComponent implements OnInit {
14 |   searchTags = ['Cats', 'Funny', 'Apartment', 'Podcasts', 'Recent', 'Baking', 'Minimalism']
15 |   queries = ''
16 |   
17 |   videos: Video[] = [];
18 |   private unsubscribe$: Subject<any> = new Subject();
19 | 
20 |   constructor(private youTubeService: YoutubeService) { }
21 | 
22 |   ngOnInit(): void {        
23 |     this.retrieveVideos()
24 |   }
25 | 
26 |   retrieveVideos() {
27 |     this.youTubeService.getVideos(this.queries)
28 |       .pipe(takeUntil(this.unsubscribe$))
29 |       .subscribe((items: any) => {
30 |         this.videos = items
31 |       });
32 | 
33 |     if (this.videos.length == 0) this.videos = DUMMY_VIDEOS;
34 |   }
35 | 
36 |   changeQueries(param: string): void {
37 |     this.queries += param
38 |     this.retrieveVideos()
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-tube",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~11.2.5",
15 |     "@angular/cdk": "~11.2.4-sha-e54d6d8ee",
16 |     "@angular/common": "~11.2.5",
17 |     "@angular/compiler": "~11.2.5",
18 |     "@angular/core": "~11.2.5",
19 |     "@angular/forms": "~11.2.5",
20 |     "@angular/material": "~11.2.4-sha-e54d6d8ee",
21 |     "@angular/platform-browser": "~11.2.5",
22 |     "@angular/platform-browser-dynamic": "~11.2.5",
23 |     "@angular/router": "~11.2.5",
24 |     "rxjs": "~6.6.0",
25 |     "tslib": "^2.0.0",
26 |     "zone.js": "~0.11.3"
27 |   },
28 |   "devDependencies": {
29 |     "@angular-devkit/build-angular": "~0.1102.3",
30 |     "@angular/cli": "~11.2.4",
31 |     "@angular/compiler-cli": "~11.2.5",
32 |     "@types/jasmine": "~3.6.0",
33 |     "@types/node": "^12.11.1",
34 |     "codelyzer": "^6.0.0",
35 |     "jasmine-core": "~3.6.0",
36 |     "jasmine-spec-reporter": "~5.0.0",
37 |     "karma": "~6.1.0",
38 |     "karma-chrome-launcher": "~3.1.0",
39 |     "karma-coverage": "~2.0.3",
40 |     "karma-jasmine": "~4.0.0",
41 |     "karma-jasmine-html-reporter": "^1.5.0",
42 |     "protractor": "~7.0.0",
43 |     "ts-node": "~8.3.0",
44 |     "tslint": "~6.1.0",
45 |     "typescript": "~4.1.5"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       jasmine: {
17 |         // you can add configuration options for Jasmine here
18 |         // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 |         // for example, you can disable the random execution with `random: false`
20 |         // or set a specific seed with `seed: 4321`
21 |       },
22 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
23 |     },
24 |     jasmineHtmlReporter: {
25 |       suppressAll: true // removes the duplicated traces
26 |     },
27 |     coverageReporter: {
28 |       dir: require('path').join(__dirname, './coverage/ng-tube'),
29 |       subdir: '.',
30 |       reporters: [
31 |         { type: 'html' },
32 |         { type: 'text-summary' }
33 |       ]
34 |     },
35 |     reporters: ['progress', 'kjhtml'],
36 |     port: 9876,
37 |     colors: true,
38 |     logLevel: config.LOG_INFO,
39 |     autoWatch: true,
40 |     browsers: ['Chrome'],
41 |     singleRun: false,
42 |     restartOnFileChange: true
43 |   });
44 | };
45 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { HttpClientModule } from '@angular/common/http';
 4 | 
 5 | import { AppRoutingModule } from './app-routing.module';
 6 | import { AppComponent } from './app.component';
 7 | import { FeedComponent } from './feed/feed.component';
 8 | import { VideoGridComponent } from './video-grid/video-grid.component';
 9 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
10 | 
11 | import { MatButtonModule } from '@angular/material/button';
12 | import { MatMenuModule } from '@angular/material/menu';
13 | import { MatIconModule } from '@angular/material/icon';
14 | import { MatDividerModule } from '@angular/material/divider';
15 | import { MatListModule } from '@angular/material/list';
16 | import { MatInputModule } from '@angular/material/input';
17 | import { MatFormFieldModule } from '@angular/material/form-field';
18 | import { MatChipsModule } from '@angular/material/chips';
19 | import { MatCardModule } from '@angular/material/card';
20 | 
21 | @NgModule({
22 |   declarations: [
23 |     AppComponent,
24 |     FeedComponent,
25 |     VideoGridComponent
26 |   ],
27 |   imports: [
28 |     BrowserModule,
29 |     AppRoutingModule,
30 |     HttpClientModule,
31 |     BrowserAnimationsModule,
32 |     MatButtonModule,
33 |     MatMenuModule,
34 |     MatIconModule,
35 |     MatDividerModule,
36 |     MatListModule,
37 |     MatInputModule,
38 |     MatFormFieldModule,
39 |     MatChipsModule,
40 |     MatCardModule,
41 |   ],
42 |   providers: [],
43 |   bootstrap: [AppComponent]
44 | })
45 | export class AppModule { }
46 | 


--------------------------------------------------------------------------------
/src/app/data/youtube.service.ts:
--------------------------------------------------------------------------------
 1 | import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 2 | import { Injectable } from '@angular/core';
 3 | import { Observable } from 'rxjs';
 4 | import { catchError, map } from 'rxjs/operators';
 5 | import { Video } from './models/video.interface';
 6 | import { DUMMY_VIDEOS } from './models/VIDEOS';
 7 | 
 8 | @Injectable({
 9 |   providedIn: 'root'
10 | })
11 | export class YoutubeService {
12 |   private API_URL = 'https://www.googleapis.com/youtube/v3/search';
13 | 
14 |   // TODO: Set up your project and API key here: https://developers.google.com/youtube/v3/getting-started
15 |   private API_KEY : string = '';
16 | 
17 |   constructor(public http: HttpClient) { }
18 |     getVideos(query?: string): Observable<any> {
19 |       query = query ? query : "cats"
20 |       const url = `${this.API_URL}?q=${query}&key=${this.API_KEY}&part=snippet&type=video&maxResults=24`;
21 |       return this.http
22 |         .get(url)
23 |         .pipe(
24 |           map((response: any) => 
25 |             response.items.map((item: any) => {
26 |               return {
27 |                 title: item.snippet.title,
28 |                 videoId: item.id.videoId,
29 |                 videoUrl: `https://www.youtube.com/watch?v=${item.id.videoId}`,
30 |                 channelId: item.snippet.channelId,
31 |                 channelUrl: `https://www.youtube.com/channel/${item.snippet.channelId}`,
32 |                 channelTitle: item.snippet.channelTitle,
33 |                 description: item.snippet.description,
34 |                 publishedAt: new Date(item.snippet.publishedAt),
35 |                 thumbnail: item.snippet.thumbnails.high.url.replace('hqdefault.jpg', 'mqdefault.jpg'),
36 |                 views: item.snippet.views
37 |               }
38 |             })
39 |         ));
40 |     }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /**
22 |  * IE11 requires the following for NgClass support on SVG elements
23 |  */
24 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
25 | 
26 | /**
27 |  * Web Animations `@angular/platform-browser/animations`
28 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
29 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
30 |  */
31 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
32 | 
33 | /**
34 |  * By default, zone.js will patch all possible macroTask and DomEvents
35 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
36 |  * because those flags need to be set before `zone.js` being loaded, and webpack
37 |  * will put import in the top of bundle, so user need to create a separate file
38 |  * in this directory (for example: zone-flags.ts), and put the following flags
39 |  * into that file, and then add the following code before importing zone.js.
40 |  * import './zone-flags';
41 |  *
42 |  * The flags allowed in zone-flags.ts are listed here.
43 |  *
44 |  * The following flags will work for all browsers.
45 |  *
46 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
47 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
48 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
49 |  *
50 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
51 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
52 |  *
53 |  *  (window as any).__Zone_enable_cross_context_check = true;
54 |  *
55 |  */
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | /***************************************************************************************************
64 |  * APPLICATION IMPORTS
65 |  */
66 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "extends": "tslint:recommended",
  3 |   "rulesDirectory": [
  4 |     "codelyzer"
  5 |   ],
  6 |   "rules": {
  7 |     "align": {
  8 |       "options": [
  9 |         "parameters",
 10 |         "statements"
 11 |       ]
 12 |     },
 13 |     "array-type": false,
 14 |     "arrow-return-shorthand": true,
 15 |     "curly": true,
 16 |     "deprecation": {
 17 |       "severity": "warning"
 18 |     },
 19 |     "eofline": true,
 20 |     "import-blacklist": [
 21 |       true,
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": {
 26 |       "options": [
 27 |         "spaces"
 28 |       ]
 29 |     },
 30 |     "max-classes-per-file": false,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-console": [
 47 |       true,
 48 |       "debug",
 49 |       "info",
 50 |       "time",
 51 |       "timeEnd",
 52 |       "trace"
 53 |     ],
 54 |     "no-empty": false,
 55 |     "no-inferrable-types": [
 56 |       true,
 57 |       "ignore-params"
 58 |     ],
 59 |     "no-non-null-assertion": true,
 60 |     "no-redundant-jsdoc": true,
 61 |     "no-switch-case-fall-through": true,
 62 |     "no-var-requires": false,
 63 |     "object-literal-key-quotes": [
 64 |       true,
 65 |       "as-needed"
 66 |     ],
 67 |     "quotemark": [
 68 |       true,
 69 |       "single"
 70 |     ],
 71 |     "semicolon": {
 72 |       "options": [
 73 |         "always"
 74 |       ]
 75 |     },
 76 |     "space-before-function-paren": {
 77 |       "options": {
 78 |         "anonymous": "never",
 79 |         "asyncArrow": "always",
 80 |         "constructor": "never",
 81 |         "method": "never",
 82 |         "named": "never"
 83 |       }
 84 |     },
 85 |     "typedef": [
 86 |       true,
 87 |       "call-signature"
 88 |     ],
 89 |     "typedef-whitespace": {
 90 |       "options": [
 91 |         {
 92 |           "call-signature": "nospace",
 93 |           "index-signature": "nospace",
 94 |           "parameter": "nospace",
 95 |           "property-declaration": "nospace",
 96 |           "variable-declaration": "nospace"
 97 |         },
 98 |         {
 99 |           "call-signature": "onespace",
100 |           "index-signature": "onespace",
101 |           "parameter": "onespace",
102 |           "property-declaration": "onespace",
103 |           "variable-declaration": "onespace"
104 |         }
105 |       ]
106 |     },
107 |     "variable-name": {
108 |       "options": [
109 |         "ban-keywords",
110 |         "check-format",
111 |         "allow-pascal-case"
112 |       ]
113 |     },
114 |     "whitespace": {
115 |       "options": [
116 |         "check-branch",
117 |         "check-decl",
118 |         "check-operator",
119 |         "check-separator",
120 |         "check-type",
121 |         "check-typecast"
122 |       ]
123 |     },
124 |     "component-class-suffix": true,
125 |     "contextual-lifecycle": true,
126 |     "directive-class-suffix": true,
127 |     "no-conflicting-lifecycle": true,
128 |     "no-host-metadata-property": true,
129 |     "no-input-rename": true,
130 |     "no-inputs-metadata-property": true,
131 |     "no-output-native": true,
132 |     "no-output-on-prefix": true,
133 |     "no-output-rename": true,
134 |     "no-outputs-metadata-property": true,
135 |     "template-banana-in-box": true,
136 |     "template-no-negated-async": true,
137 |     "use-lifecycle-interface": true,
138 |     "use-pipe-transform-interface": true,
139 |     "directive-selector": [
140 |       true,
141 |       "attribute",
142 |       "app",
143 |       "camelCase"
144 |     ],
145 |     "component-selector": [
146 |       true,
147 |       "element",
148 |       "app",
149 |       "kebab-case"
150 |     ]
151 |   }
152 | }
153 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "cli": {
  4 |     "analytics": false
  5 |   },
  6 |   "version": 1,
  7 |   "newProjectRoot": "projects",
  8 |   "projects": {
  9 |     "ng-tube": {
 10 |       "projectType": "application",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "style": "scss"
 14 |         },
 15 |         "@schematics/angular:application": {
 16 |           "strict": true
 17 |         }
 18 |       },
 19 |       "root": "",
 20 |       "sourceRoot": "src",
 21 |       "prefix": "app",
 22 |       "architect": {
 23 |         "build": {
 24 |           "builder": "@angular-devkit/build-angular:browser",
 25 |           "options": {
 26 |             "outputPath": "dist/ng-tube",
 27 |             "index": "src/index.html",
 28 |             "main": "src/main.ts",
 29 |             "polyfills": "src/polyfills.ts",
 30 |             "tsConfig": "tsconfig.app.json",
 31 |             "aot": true,
 32 |             "assets": [
 33 |               "src/favicon.ico",
 34 |               "src/assets"
 35 |             ],
 36 |             "styles": [
 37 |               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
 38 |               "src/styles.scss"
 39 |             ],
 40 |             "scripts": []
 41 |           },
 42 |           "configurations": {
 43 |             "production": {
 44 |               "fileReplacements": [
 45 |                 {
 46 |                   "replace": "src/environments/environment.ts",
 47 |                   "with": "src/environments/environment.prod.ts"
 48 |                 }
 49 |               ],
 50 |               "optimization": true,
 51 |               "outputHashing": "all",
 52 |               "sourceMap": false,
 53 |               "namedChunks": false,
 54 |               "extractLicenses": true,
 55 |               "vendorChunk": false,
 56 |               "buildOptimizer": true,
 57 |               "budgets": [
 58 |                 {
 59 |                   "type": "initial",
 60 |                   "maximumWarning": "500kb",
 61 |                   "maximumError": "1mb"
 62 |                 },
 63 |                 {
 64 |                   "type": "anyComponentStyle",
 65 |                   "maximumWarning": "2kb",
 66 |                   "maximumError": "4kb"
 67 |                 }
 68 |               ]
 69 |             }
 70 |           }
 71 |         },
 72 |         "serve": {
 73 |           "builder": "@angular-devkit/build-angular:dev-server",
 74 |           "options": {
 75 |             "browserTarget": "ng-tube:build"
 76 |           },
 77 |           "configurations": {
 78 |             "production": {
 79 |               "browserTarget": "ng-tube:build:production"
 80 |             }
 81 |           }
 82 |         },
 83 |         "extract-i18n": {
 84 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 85 |           "options": {
 86 |             "browserTarget": "ng-tube:build"
 87 |           }
 88 |         },
 89 |         "test": {
 90 |           "builder": "@angular-devkit/build-angular:karma",
 91 |           "options": {
 92 |             "main": "src/test.ts",
 93 |             "polyfills": "src/polyfills.ts",
 94 |             "tsConfig": "tsconfig.spec.json",
 95 |             "karmaConfig": "karma.conf.js",
 96 |             "assets": [
 97 |               "src/favicon.ico",
 98 |               "src/assets"
 99 |             ],
100 |             "styles": [
101 |               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
102 |               "src/styles.scss"
103 |             ],
104 |             "scripts": []
105 |           }
106 |         },
107 |         "lint": {
108 |           "builder": "@angular-devkit/build-angular:tslint",
109 |           "options": {
110 |             "tsConfig": [
111 |               "tsconfig.app.json",
112 |               "tsconfig.spec.json",
113 |               "e2e/tsconfig.json"
114 |             ],
115 |             "exclude": [
116 |               "**/node_modules/**"
117 |             ]
118 |           }
119 |         },
120 |         "e2e": {
121 |           "builder": "@angular-devkit/build-angular:protractor",
122 |           "options": {
123 |             "protractorConfig": "e2e/protractor.conf.js",
124 |             "devServerTarget": "ng-tube:serve"
125 |           },
126 |           "configurations": {
127 |             "production": {
128 |               "devServerTarget": "ng-tube:serve:production"
129 |             }
130 |           }
131 |         }
132 |       }
133 |     }
134 |   },
135 |   "defaultProject": "ng-tube"
136 | }
137 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
  1 | <header class="toolbar">
  2 |   <div class="left header-item">
  3 |     <button mat-icon-button aria-label="Menu">
  4 |       <mat-icon>menu</mat-icon>
  5 |     </button>
  6 |     <h1>ngTube</h1>
  7 |   </div>
  8 |   <div class="center header-item">
  9 |     <form class="search-form">
 10 |       <mat-form-field>
 11 |         <mat-label>Search</mat-label>
 12 |         <input #input type="text" matInput placeholder="Search" autocomplete="off">
 13 |         <mat-icon matSuffix (click)="search(input.value.toString())">search</mat-icon>
 14 |       </mat-form-field>
 15 |     </form>
 16 |     <button mat-icon-button aria-label="Voice search">
 17 |       <mat-icon mat-list-icon>keyboard_voice</mat-icon>
 18 |     </button>
 19 |   </div>
 20 |   <div class="right header-item">
 21 |     <button mat-icon-button aria-label="Create">
 22 |       <mat-icon>videocam</mat-icon>
 23 |     </button>
 24 |     <button mat-icon-button aria-label="Apps">
 25 |       <mat-icon>apps</mat-icon>
 26 |     </button>
 27 |     <button mat-icon-button aria-label="Notifications" color="accent">
 28 |       <mat-icon>notifications</mat-icon>
 29 |     </button>
 30 |     <button mat-icon-button aria-label="Profile" color="primary">
 31 |       <mat-icon>face</mat-icon>
 32 |     </button>
 33 |   </div>
 34 | </header>
 35 | 
 36 | <div class="main">
 37 |   <nav class="navigation">
 38 |     <mat-nav-list>
 39 |       <a mat-list-item routerLink="/" routerLinkActive="active">
 40 |         <mat-icon mat-list-icon color="primary">home</mat-icon>
 41 |         <div mat-line>Home</div>
 42 |       </a>
 43 |       <a mat-list-item routerLink="feed/trending" routerLinkActive="active">
 44 |         <mat-icon mat-list-icon color="accent">explore</mat-icon>
 45 |         <div mat-line>Explore</div>
 46 |       </a>
 47 |       <a mat-list-item routerLink="feed/subscriptions" routerLinkActive="active">
 48 |         <mat-icon mat-list-icon color="accent">subscriptions</mat-icon>
 49 |         <div mat-line>Subscriptions</div>
 50 |       </a>
 51 |    </mat-nav-list>
 52 |     <mat-divider></mat-divider>
 53 |     <mat-list>
 54 |       <mat-list-item>
 55 |         <mat-icon mat-list-icon>video_library</mat-icon>
 56 |         <div mat-line>Library</div>
 57 |       </mat-list-item>
 58 |       <mat-list-item>
 59 |         <mat-icon mat-list-icon>history</mat-icon>
 60 |         <div mat-line>History</div>
 61 |       </mat-list-item>
 62 |       <mat-list-item>
 63 |         <mat-icon mat-list-icon>ondemand_video</mat-icon>
 64 |         <div mat-line>Your videos</div>
 65 |       </mat-list-item>
 66 |       <mat-list-item>
 67 |         <mat-icon mat-list-icon>access_time</mat-icon>
 68 |         <div mat-line>Watch later</div>
 69 |       </mat-list-item>
 70 |       <mat-list-item>
 71 |         <mat-icon mat-list-icon>thumb_up</mat-icon>
 72 |         <div mat-line>Liked videos</div>
 73 |       </mat-list-item>
 74 |       <mat-list-item>
 75 |         <mat-icon mat-list-icon>playlist_play</mat-icon>
 76 |         <div mat-line>Playlists</div>
 77 |       </mat-list-item>
 78 |       <mat-divider></mat-divider>
 79 |       <div mat-subheader>Subscriptions</div>
 80 |       <mat-list-item>
 81 |         <mat-icon mat-list-icon>face</mat-icon>
 82 |         <div mat-line>Rhubarb</div>
 83 |       </mat-list-item>
 84 |       <mat-list-item>
 85 |         <mat-icon mat-list-icon>face</mat-icon>
 86 |         <div mat-line>Basil</div>
 87 |       </mat-list-item>
 88 |       <mat-list-item>
 89 |         <mat-icon mat-list-icon>face</mat-icon>
 90 |         <div mat-line>Chester</div>
 91 |       </mat-list-item>
 92 |       <mat-divider></mat-divider>
 93 |       <div mat-subheader>More From ngTube</div>
 94 |       <mat-list-item>
 95 |         <mat-icon mat-list-icon>smart_display</mat-icon>
 96 |         <div mat-line>ngTube Premium</div>
 97 |       </mat-list-item>
 98 |       <mat-list-item>
 99 |         <mat-icon mat-list-icon>local_movies</mat-icon>
100 |         <div mat-line>Movies & Shows</div>
101 |       </mat-list-item>
102 |       <mat-list-item>
103 |         <mat-icon mat-list-icon>videogame_asset</mat-icon>
104 |         <div mat-line>Gaming</div>
105 |       </mat-list-item>
106 |       <mat-list-item>
107 |         <mat-icon mat-list-icon>checkroom</mat-icon>
108 |         <div mat-line>Fashion & Beauty</div>
109 |       </mat-list-item>
110 |       <mat-list-item>
111 |         <mat-icon mat-list-icon>stream</mat-icon>
112 |         <div mat-line>Live</div>
113 |       </mat-list-item>
114 |       <mat-list-item>
115 |         <mat-icon mat-list-icon>lightbulb</mat-icon>
116 |         <div mat-line>Learning</div>
117 |       </mat-list-item>
118 |       <mat-list-item>
119 |         <mat-icon mat-list-icon>emoji_events</mat-icon>
120 |         <div mat-line>Sports</div>
121 |       </mat-list-item>
122 |       <mat-divider></mat-divider>
123 |       <mat-list-item>
124 |         <mat-icon mat-list-icon>settings</mat-icon>
125 |         <div mat-line>Settings</div>
126 |       </mat-list-item>
127 |       <mat-list-item>
128 |         <mat-icon mat-list-icon color="warn">emoji_flags</mat-icon>
129 |         <div mat-line>Report history</div>
130 |       </mat-list-item>
131 |       <mat-list-item>
132 |         <mat-icon mat-list-icon>help_outline</mat-icon>
133 |         <div mat-line>Help</div>
134 |       </mat-list-item>
135 |       <mat-list-item>
136 |         <mat-icon mat-list-icon>feedback</mat-icon>
137 |         <div mat-line>Send feedback</div>
138 |       </mat-list-item>
139 |     </mat-list>
140 |   </nav>
141 |   
142 |   <router-outlet></router-outlet>
143 | </div>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/src/app/data/models/VIDEOS.ts:
--------------------------------------------------------------------------------
  1 | import { Video } from "./video.interface";
  2 | 
  3 | export const DUMMY_VIDEOS: Video[] = [
  4 |   {
  5 |       "title": "CATS will make you LAUGH YOUR HEAD OFF - Funny CAT compilation",
  6 |       "videoId": "hY7m5jjJ9mM",
  7 |       "videoUrl": "https://www.youtube.com/watch?v=hY7m5jjJ9mM",
  8 |       "channelId": "UC9obdDRxQkmn_4YpcBMTYLw",
  9 |       "channelUrl": "https://www.youtube.com/channel/UC9obdDRxQkmn_4YpcBMTYLw",
 10 |       "channelTitle": "Tiger FunnyWorks",
 11 |       "description": "Cats are amazing creatures because they make us laugh all the time! Watching funny cats is the hardest try not to laugh challenge! Just look how all these cats ...",
 12 |       "publishedAt": "2017-05-31T09:30:02.000Z",
 13 |       "thumbnail": "https://i.ytimg.com/vi/hY7m5jjJ9mM/mqdefault.jpg",
 14 |       "views": 1000,
 15 |   },
 16 |   {
 17 |       "title": "Baby Cats - Cute and Funny Cat Videos Compilation #37 | Aww Animals",
 18 |       "videoId": "31LMyk-yKwI",
 19 |       "videoUrl": "https://www.youtube.com/watch?v=31LMyk-yKwI",
 20 |       "channelId": "UC8hC-augAnujJeprhjI0YkA",
 21 |       "channelUrl": "https://www.youtube.com/channel/UC8hC-augAnujJeprhjI0YkA",
 22 |       "channelTitle": "Aww Animals",
 23 |       "description": "Watching funny baby cats is the hardest try not to laugh challenge. Baby cats are amazing pets because they are the cutest and most funny. This is the cutest ...",
 24 |       "publishedAt": "2020-08-11T11:32:45.000Z",
 25 |       "thumbnail": "https://i.ytimg.com/vi/31LMyk-yKwI/mqdefault.jpg",
 26 |       "views": 70,
 27 |   },
 28 |   {
 29 |       "title": "Funniest Cats 😹 - Don't try to hold back Laughter 😂 - Funny Cats Life",
 30 |       "videoId": "eX2qFMC8cFo",
 31 |       "videoUrl": "https://www.youtube.com/watch?v=eX2qFMC8cFo",
 32 |       "channelId": "UCYPrd7A27nLhQONcCIfFTaA",
 33 |       "channelUrl": "https://www.youtube.com/channel/UCYPrd7A27nLhQONcCIfFTaA",
 34 |       "channelTitle": "Funny Cats Life",
 35 |       "description": "Funniest Cats - Don't try to hold back Laughter Watch more cute animals! https://youtube.com/playlist?list=PLH... Subscribe to watch the best, cutest ...",
 36 |       "publishedAt": "2020-10-29T12:00:27.000Z",
 37 |       "thumbnail": "https://i.ytimg.com/vi/eX2qFMC8cFo/mqdefault.jpg",
 38 |       "views": 4,
 39 |   },
 40 |   {
 41 |       "title": "Cats vs Giant Bugs | Kittisaurus",
 42 |       "videoId": "5oFz0zKdfNw",
 43 |       "videoUrl": "https://www.youtube.com/watch?v=5oFz0zKdfNw",
 44 |       "channelId": "UCwcsDWGip6vtiZyCnvDoClQ",
 45 |       "channelUrl": "https://www.youtube.com/channel/UCwcsDWGip6vtiZyCnvDoClQ",
 46 |       "channelTitle": "Kittisaurus",
 47 |       "description": "Kittisaurus #Prank My cats froze up after seeing a bunch of bugs! * Subscribe to Kittisaurus http://bitly.kr/w4TJy0L0DZ * Please forward all partnership inquiries to ...",
 48 |       "publishedAt": "2021-03-18T14:00:00.000Z",
 49 |       "thumbnail": "https://i.ytimg.com/vi/5oFz0zKdfNw/mqdefault.jpg",
 50 |       "views": 10,
 51 |   },
 52 |   {
 53 |       "title": "Cute and Funny Cat Videos to Keep You Smiling! 🐱",
 54 |       "videoId": "tpiyEe_CqB4",
 55 |       "videoUrl": "https://www.youtube.com/watch?v=tpiyEe_CqB4",
 56 |       "channelId": "UCzn2gx8zzhF0A4Utk8TEDNQ",
 57 |       "channelUrl": "https://www.youtube.com/channel/UCzn2gx8zzhF0A4Utk8TEDNQ",
 58 |       "channelTitle": "Rufus",
 59 |       "description": "hi hoomans! im rufus p goodboy and dis my yootoob channel! i has lottsa videos of doggos, good bois, cats, sleepys bois, fat bois, furry tings, floofin, blerps, ...",
 60 |       "publishedAt": "2020-04-10T16:00:28.000Z",
 61 |       "thumbnail": "https://i.ytimg.com/vi/tpiyEe_CqB4/mqdefault.jpg",
 62 |       "views": 12,
 63 |   },
 64 |   {
 65 |       "title": "CATS will make you LAUGH YOUR HEAD OFF 😆😹🤣 Funny CAT compilation",
 66 |       "videoId": "2gZONZ1I4Ko",
 67 |       "videoUrl": "https://www.youtube.com/watch?v=2gZONZ1I4Ko",
 68 |       "channelId": "UCAmhbG40GSFEJEa-6Yj8zAQ",
 69 |       "channelUrl": "https://www.youtube.com/channel/UCAmhbG40GSFEJEa-6Yj8zAQ",
 70 |       "channelTitle": "Cute Babies and Pets TV",
 71 |       "description": "CATS will make you LAUGH YOUR HEAD OFF Funny CAT compilation Thanks For Watching ! Please Like Share & Comment If You Like This Video !",
 72 |       "publishedAt": "2020-10-10T07:17:37.000Z",
 73 |       "thumbnail": "https://i.ytimg.com/vi/2gZONZ1I4Ko/mqdefault.jpg",
 74 |       "views": 100,
 75 |   },
 76 |   {
 77 |       "title": "Funny Cats Reaction To Toy",
 78 |       "videoId": "MEFSjBpuh4A",
 79 |       "videoUrl": "https://www.youtube.com/watch?v=MEFSjBpuh4A",
 80 |       "channelId": "UClJhlqb1A4u4VbGCMz5u1HQ",
 81 |       "channelUrl": "https://www.youtube.com/channel/UClJhlqb1A4u4VbGCMz5u1HQ",
 82 |       "channelTitle": "Tricksy Pets",
 83 |       "description": "",
 84 |       "publishedAt": "2020-09-03T13:11:21.000Z",
 85 |       "thumbnail": "https://i.ytimg.com/vi/MEFSjBpuh4A/mqdefault.jpg",
 86 |       "views": 10,
 87 |   },
 88 |   {
 89 |       "title": "Videos for Cats to Watch - 8 Hour Bird Bonanza",
 90 |       "videoId": "xbs7FT7dXYc",
 91 |       "videoUrl": "https://www.youtube.com/watch?v=xbs7FT7dXYc",
 92 |       "channelId": "UCPJXfmxMYAoH02CFudZxmgg",
 93 |       "channelUrl": "https://www.youtube.com/channel/UCPJXfmxMYAoH02CFudZxmgg",
 94 |       "channelTitle": "Paul Dinning",
 95 |       "description": "Videos for Cats to Watch - 8 Hour Bird Bonanza Video Produced by Paul Dinning - Wildlife in Cornwall #PaulDinning.",
 96 |       "publishedAt": "2018-02-13T15:56:36.000Z",
 97 |       "thumbnail": "https://i.ytimg.com/vi/xbs7FT7dXYc/mqdefault.jpg",
 98 |       "views": 88,
 99 |   },
100 |   {
101 |       "title": "The Meaning Behind 14 Strangest Cat Behaviors | Jaw-Dropping Facts about Cats",
102 |       "videoId": "35lcsFGu_I0",
103 |       "videoUrl": "https://www.youtube.com/watch?v=35lcsFGu_I0",
104 |       "channelId": "UCfHTrA_ceeXZePMJRtuCuNQ",
105 |       "channelUrl": "https://www.youtube.com/channel/UCfHTrA_ceeXZePMJRtuCuNQ",
106 |       "channelTitle": "Jaw-Dropping Facts",
107 |       "description": "In this video, we will talk about 14 strange things cats do and explain the meaning behind them. Begging for food but not eating it Your cat may beg for food, give ...",
108 |       "publishedAt": "2020-10-06T14:00:00.000Z",
109 |       "thumbnail": "https://i.ytimg.com/vi/35lcsFGu_I0/mqdefault.jpg",
110 |       "views": 10,
111 |   },
112 |   {
113 |       "title": "Funny Cats and Kittens Meowing Compilation",
114 |       "videoId": "DXUAyRRkI6k",
115 |       "videoUrl": "https://www.youtube.com/watch?v=DXUAyRRkI6k",
116 |       "channelId": "UCVUdHi-tdW5AKdzMiTPG97Q",
117 |       "channelUrl": "https://www.youtube.com/channel/UCVUdHi-tdW5AKdzMiTPG97Q",
118 |       "channelTitle": "funnyplox",
119 |       "description": "Here is a video of cats and kittens meowing to confuse your pets Puppies & Babies & Kitties OH MY! New videos all the time! Subscribe: ...",
120 |       "publishedAt": "2013-11-09T22:11:37.000Z",
121 |       "thumbnail": "https://i.ytimg.com/vi/DXUAyRRkI6k/mqdefault.jpg",
122 |       "views": 6000,
123 |   },
124 |   {
125 |       "title": "BEST CAT MEMES COMPILATION OF 2020 - 2021 PART 48(FUNNY CATS)",
126 |       "videoId": "NfUrT7t7NfI",
127 |       "videoUrl": "https://www.youtube.com/watch?v=NfUrT7t7NfI",
128 |       "channelId": "UCYbggI6qVceWa1_1dfH0hMA",
129 |       "channelUrl": "https://www.youtube.com/channel/UCYbggI6qVceWa1_1dfH0hMA",
130 |       "channelTitle": "Meowthemall",
131 |       "description": "Dank cat memes compilation from 2019 and 2020. Features cute and funny Tiktok cats and cat memes to make you laugh. For the best cat and animal cute pet ...",
132 |       "publishedAt": "2021-03-15T20:00:07.000Z",
133 |       "thumbnail": "https://i.ytimg.com/vi/NfUrT7t7NfI/mqdefault.jpg",
134 |       "views": 100,
135 |   },
136 |   {
137 |       "title": "BEST CAT MEMES COMPILATION OF 2020 - 2021 PART 45 (FUNNY CATS)",
138 |       "videoId": "fo7dxIRPDIk",
139 |       "videoUrl": "https://www.youtube.com/watch?v=fo7dxIRPDIk",
140 |       "channelId": "UCYbggI6qVceWa1_1dfH0hMA",
141 |       "channelUrl": "https://www.youtube.com/channel/UCYbggI6qVceWa1_1dfH0hMA",
142 |       "channelTitle": "Meowthemall",
143 |       "description": "Dank cat memes compilation from 2019 and 2020. Features cute and funny Tiktok cats and cat memes to make you laugh. For the best cat and animal cute pet ...",
144 |       "publishedAt": "2021-02-21T17:47:16.000Z",
145 |       "thumbnail": "https://i.ytimg.com/vi/jllUYAjIiYg/mqdefault.jpg",
146 |       "views": 55,
147 |   },
148 |   {
149 |       "title": "Funny Cats Compilation (Most Popular) Part 1",
150 |       "videoId": "JxS5E-kZc2s",
151 |       "videoUrl": "https://www.youtube.com/watch?v=JxS5E-kZc2s",
152 |       "channelId": "UCVaQwUU0NLkBeO6m7_j2U2Q",
153 |       "channelUrl": "https://www.youtube.com/channel/UCVaQwUU0NLkBeO6m7_j2U2Q",
154 |       "channelTitle": "NoCAT NoLiFE 2",
155 |       "description": "Video is compiled from all the funny by cute cats of worldwide ➔ Subscribe for NoCAT NoLiFE: http://goo.gl/sxSqUV (Help me reach 100.000 Subscribe) ...",
156 |       "publishedAt": "2015-09-05T06:00:17.000Z",
157 |       "thumbnail": "https://i.ytimg.com/vi/JxS5E-kZc2s/mqdefault.jpg",
158 |       "views": 140,
159 |   },
160 |   {
161 |       "title": "Cat TV 2020: 8 Hours - Birds for Cats to Watch, Relax Your Pets, Beautiful Birds, Squirrels.",
162 |       "videoId": "wOuJKGhmf3c",
163 |       "videoUrl": "https://www.youtube.com/watch?v=wOuJKGhmf3c",
164 |       "channelId": "UC7wafFu5c8AO0YF5U7R7xFA",
165 |       "channelUrl": "https://www.youtube.com/channel/UC7wafFu5c8AO0YF5U7R7xFA",
166 |       "channelTitle": "Birder King",
167 |       "description": "It's Cat TV for cats, the source of peace, 8 hours of calming video for cat, dog or anyone to enjoy. It can relax your kitten or puppy and minimize separation ...",
168 |       "publishedAt": "2020-09-20T17:54:19.000Z",
169 |       "thumbnail": "https://i.ytimg.com/vi/wOuJKGhmf3c/mqdefault.jpg",
170 |       "views": 20,
171 |   },
172 |   {
173 |       "title": "Taylor Swifts Singing &quot;Macavity&quot; in Cats | Cats The Movie | SceneScreen",
174 |       "videoId": "rQ-uzCC3hjQ",
175 |       "videoUrl": "https://www.youtube.com/watch?v=rQ-uzCC3hjQ",
176 |       "channelId": "UCB4VaK5rjEZb5rfU-nptTvw",
177 |       "channelUrl": "https://www.youtube.com/channel/UCB4VaK5rjEZb5rfU-nptTvw",
178 |       "channelTitle": "SceneScreen",
179 |       "description": "Taylor Swift's big moment comes toward the end of the movie when she sings the seductive \"Macavity\" and attempts to eliminate the competition by kidnapping ...",
180 |       "publishedAt": "2020-05-19T14:53:44.000Z",
181 |       "thumbnail": "https://i.ytimg.com/vi/rQ-uzCC3hjQ/mqdefault.jpg",
182 |       "views": 66,
183 |   },
184 |   {
185 |       "title": "Baby Cats - Cute and Funny Cat Videos Compilation #34 | Aww Animals",
186 |       "videoId": "ByH9LuSILxU",
187 |       "videoUrl": "https://www.youtube.com/watch?v=ByH9LuSILxU",
188 |       "channelId": "UC8hC-augAnujJeprhjI0YkA",
189 |       "channelUrl": "https://www.youtube.com/channel/UC8hC-augAnujJeprhjI0YkA",
190 |       "channelTitle": "Aww Animals",
191 |       "description": "Baby cats are amazing creature because they are the cutest and most funny. Watching funny baby cats is the hardest try not to laugh challenge. This is the cutest ...",
192 |       "publishedAt": "2020-06-19T02:18:53.000Z",
193 |       "thumbnail": "https://i.ytimg.com/vi/ByH9LuSILxU/mqdefault.jpg",
194 |       "views": 100,
195 |   },
196 |   {
197 |       "title": "BEST CAT MEMES COMPILATION OF 2021 W/FUNNY CATS",
198 |       "videoId": "q1u5QUbHuuo",
199 |       "videoUrl": "https://www.youtube.com/watch?v=q1u5QUbHuuo",
200 |       "channelId": "UC1hwJQTym0InfsE2VZ5jPAA",
201 |       "channelUrl": "https://www.youtube.com/channel/UC1hwJQTym0InfsE2VZ5jPAA",
202 |       "channelTitle": "Pet Ninja",
203 |       "description": "The best cat memes compilation by Pet Ninja. In the year 2021, funny cats videos are all over the place. We all love kitty-cats, so why not watch our awesome ...",
204 |       "publishedAt": "2021-03-17T18:10:30.000Z",
205 |       "thumbnail": "https://i.ytimg.com/vi/q1u5QUbHuuo/mqdefault.jpg",
206 |       "views": 100,
207 |   },
208 |   {
209 |       "title": "Funny Angry Cats 🤣 Don&#39;t Mess With These Cat 😾😾 Funniest Cat Reaction",
210 |       "videoId": "XJA-ksOpkQY",
211 |       "videoUrl": "https://www.youtube.com/watch?v=XJA-ksOpkQY",
212 |       "channelId": "UCW_X3-IRNdOl9vrZ-zGthlQ",
213 |       "channelUrl": "https://www.youtube.com/channel/UCW_X3-IRNdOl9vrZ-zGthlQ",
214 |       "channelTitle": "Funny And Cute Cat's Life",
215 |       "description": "Funny Angry Cats Don't Mess With These Cat Funniest Cat Reaction Thanks For Watching ! Please Like Share & Comment If You Like This Video !",
216 |       "publishedAt": "2021-03-17T07:41:46.000Z",
217 |       "thumbnail": "https://i.ytimg.com/vi/XJA-ksOpkQY/mqdefault.jpg",
218 |       "views": 100,
219 |   },
220 |   {
221 |       "title": "Funny Angry Cats 🤣 Watch Until The End! Don&#39;t Mess With These Pets",
222 |       "videoId": "jllUYAjIiYg",
223 |       "videoUrl": "https://www.youtube.com/watch?v=jllUYAjIiYg",
224 |       "channelId": "UCW_X3-IRNdOl9vrZ-zGthlQ",
225 |       "channelUrl": "https://www.youtube.com/channel/UCW_X3-IRNdOl9vrZ-zGthlQ",
226 |       "channelTitle": "Funny And Cute Cat's Life",
227 |       "description": "Funny Angry Cats Watch Until The End! Don't Mess With These Pets Thanks For Watching ! Please Like Share & Comment If You Like This Video ! Subscribe ...",
228 |       "publishedAt": "2021-03-04T07:22:56.000Z",
229 |       "thumbnail": "https://i.ytimg.com/vi/jllUYAjIiYg/mqdefault.jpg",
230 |       "views": 100,
231 |   },
232 |   {
233 |       "title": "Cats vs Dinosaur | Kittisaurus",
234 |       "videoId": "saZFIuXU5W8",
235 |       "videoUrl": "https://www.youtube.com/watch?v=saZFIuXU5W8",
236 |       "channelId": "UCwcsDWGip6vtiZyCnvDoClQ",
237 |       "channelUrl": "https://www.youtube.com/channel/UCwcsDWGip6vtiZyCnvDoClQ",
238 |       "channelTitle": "Kittisaurus",
239 |       "description": "Kittisaurus DINOSAUR CHALLENGE! Do the kitties like me in a T-Rex costume? Please forward all partnership inquiries to we@luvcat.com.",
240 |       "publishedAt": "2019-12-14T14:00:16.000Z",
241 |       "thumbnail": "https://i.ytimg.com/vi/saZFIuXU5W8/mqdefault.jpg",
242 |       "views": 100,
243 |   },
244 |   {
245 |       "title": "Must Watch Cat Videos 2021! -Fantastic Cats😻| YUFUS",
246 |       "videoId": "blNj0onRyfU",
247 |       "videoUrl": "https://www.youtube.com/watch?v=blNj0onRyfU",
248 |       "channelId": "UCjDhQK5hSg7JEg8UYG-62AQ",
249 |       "channelUrl": "https://www.youtube.com/channel/UCjDhQK5hSg7JEg8UYG-62AQ",
250 |       "channelTitle": "Yufus",
251 |       "description": "Hi cat lovers! The best and funniest cat videos ever! Cats are part of our life, we laugh at them so much.Funny cats are so adorable and cute. Just look at all ...",
252 |       "publishedAt": "2021-03-17T15:00:24.000Z",
253 |       "thumbnail": "https://i.ytimg.com/vi/blNj0onRyfU/mqdefault.jpg",
254 |       "views": 657,
255 |   },
256 |   {
257 |       "title": "Baby Cats | Cute And Funny Cat Videos Compilation #96 | Cute Cats Land",
258 |       "videoId": "6_RYdMyNpGM",
259 |       "videoUrl": "https://www.youtube.com/watch?v=6_RYdMyNpGM",
260 |       "channelId": "UCvQ59Qe0LIJXFsMRb7w8eUw",
261 |       "channelUrl": "https://www.youtube.com/channel/UCvQ59Qe0LIJXFsMRb7w8eUw",
262 |       "channelTitle": "Cute Cats Land",
263 |       "description": "Baby Cats | Cute And Funny Cat Videos Compilation #96 | Cute Cats Land ▷ Watch The Моst Popular Cat Videos: ...",
264 |       "publishedAt": "2021-03-17T09:30:00.000Z",
265 |       "thumbnail": "https://i.ytimg.com/vi/6_RYdMyNpGM/mqdefault.jpg",
266 |       "views": 23,
267 |   },
268 |   {
269 |       "title": "Baby Cats - Cute and Funny Cat Videos Compilation #8 | Aww Animals",
270 |       "videoId": "uHKfrz65KSU",
271 |       "videoUrl": "https://www.youtube.com/watch?v=uHKfrz65KSU",
272 |       "channelId": "UC8hC-augAnujJeprhjI0YkA",
273 |       "channelUrl": "https://www.youtube.com/channel/UC8hC-augAnujJeprhjI0YkA",
274 |       "channelTitle": "Aww Animals",
275 |       "description": "Watching funny baby cats is the hardest try not to laugh challenge. Baby cats are amazing creature because they are the cutest and most funny. It is funny and ...",
276 |       "publishedAt": "2019-12-11T19:43:05.000Z",
277 |       "thumbnail": "https://i.ytimg.com/vi/uHKfrz65KSU/mqdefault.jpg",
278 |       "views": 67,
279 |   },
280 |   {
281 |       "title": "I GPS Tracked My Cats For 24 Hours",
282 |       "videoId": "SFZb7qRmiyA",
283 |       "videoUrl": "https://www.youtube.com/watch?v=SFZb7qRmiyA",
284 |       "channelId": "UCq4qiifOaFGW3a2oljSfxUg",
285 |       "channelUrl": "https://www.youtube.com/channel/UCq4qiifOaFGW3a2oljSfxUg",
286 |       "channelTitle": "Half-Asleep Chris",
287 |       "description": "I GPS Tracked My Cats For 24 Hours. After recently letting Ralph & Tom outside for the first ever time, Ralph went missing overnight. I bought a GPS Tracking ...",
288 |       "publishedAt": "2019-09-13T17:00:03.000Z",
289 |       "thumbnail": "https://i.ytimg.com/vi/SFZb7qRmiyA/mqdefault.jpg",
290 |       "views": 1236875,
291 |   }
292 | ]


--------------------------------------------------------------------------------