Course-preview page updated

src/app/app.module.ts

@@ -1,7 +1,10 @@
+import { Routes, RouterModule } from '@angular/router';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule, MatCheckboxModule, MatSidenavModule, MatDividerModule, MatProgressBarModule, MatListModule, MatIconModule, MatToolbarModule } from '@angular/material';
+import { YoutubePlayerModule } from 'ng2-youtube-player';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@@ -19,6 +22,12 @@ import { AboutComponent } from './about/about.component';
 import { CategoriesComponent } from './categories/categories.component';
 import { CourseCategoryComponent } from './courses/course-category/course-category.component';
 import { AllCoursesComponent } from './courses/all-courses/all-courses.component';
+import { PreviewContentComponent } from './course-preview/preview-content/preview-content.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'course-preview', pathMatch: 'full' },
+  { path: 'preview-content',  component: PreviewContentComponent }
+];
 
 @NgModule({
   declarations: [
@@ -38,8 +47,24 @@ import { AllCoursesComponent } from './courses/all-courses/all-courses.component
     CategoriesComponent,
     CourseCategoryComponent,
     AllCoursesComponent,
+    PreviewContentComponent,
+  ],
+  imports: [
+    BrowserModule, 
+    AppRoutingModule, 
+    NgbModule, 
+    BrowserAnimationsModule, 
+    MatButtonModule, 
+    MatCheckboxModule, 
+    MatSidenavModule, 
+    MatDividerModule, 
+    MatProgressBarModule, 
+    MatListModule, 
+    MatIconModule, 
+    MatToolbarModule, 
+    YoutubePlayerModule,
+    RouterModule.forRoot(routes)
   ],
-  imports: [BrowserModule, AppRoutingModule, NgbModule],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/course-preview/course-preview.component.html

@@ -1,3 +1,14 @@
-<p>
-  course-preview works!
-</p>
+<mat-sidenav-container>
+  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')" (closed)="events.push('close!')">
+    <mat-nav-list>
+      <a class="component" mat-list-item routerLink="/preview-content">1. Introduction</a>
+      <a class="component" mat-list-item routerLink="/">2. Get started</a>
+    </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <p><button (click)="sidenav.toggle()"><i class="fa fa-bars"></i></button></p>
+    <div>
+      <router-outlet></router-outlet>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/course-preview/course-preview.component.scss

@@ -0,0 +1,35 @@
+mat-sidenav-container{
+    height: 100vh;
+}
+mat-sidenav{    
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 220px;
+}
+mat-nav-list{
+    margin: 0;
+    padding-top: 50px;
+}
+.component{
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.9) !important;
+    border: none;
+    padding: 10px 80px 10px 10px;
+    text-decoration: none;
+}
+.component:hover{
+    color: black !important;
+}
+mat-sidenav-content{
+    text-align: center
+}
+mat-sidenav-content button{
+    color: rgba(255, 255, 255, 0.9);
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 20px;
+    border: none;
+    padding: 5px 20px;
+}
+mat-sidenav-content button:hover{
+    background-color: #F8F9FA;
+    color: black;
+}

src/app/course-preview/course-preview.component.ts

@@ -6,7 +6,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./course-preview.component.scss']
 })
 export class CoursePreviewComponent implements OnInit {
-
+  events: string[] = [];
+  opened: boolean;
+
   constructor() { }
 
   ngOnInit() {

src/app/course-preview/preview-content/preview-content.component.html

@@ -0,0 +1,10 @@
+<div class="container">
+  <div>
+    <youtube-player [videoId]="id" (ready)="savePlayer($event)" (change)="onStateChange($event)"></youtube-player>
+  </div>
+  <div>
+    <h1>Description</h1>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt atque dolorem at consequatur iure veniam ipsum
+      vero quam, odio harum repellat. Illo consequuntur natus velit deserunt rerum debitis quas eaque!</p>
+  </div>
+</div>

src/app/course-preview/preview-content/preview-content.component.scss

@@ -0,0 +1,8 @@
+youtube-player{
+    width: 100%;
+    height: 100vh;
+}
+.container{
+    margin: 20px 70px !important;
+    text-align: center;
+}

src/app/course-preview/preview-content/preview-content.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreviewContentComponent } from './preview-content.component';
+
+describe('PreviewContentComponent', () => {
+  let component: PreviewContentComponent;
+  let fixture: ComponentFixture<PreviewContentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PreviewContentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PreviewContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/course-preview/preview-content/preview-content.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-preview-content',
+  templateUrl: './preview-content.component.html',
+  styleUrls: ['./preview-content.component.scss']
+})
+export class PreviewContentComponent implements OnInit {
+
+  player: YT.Player;
+  private id: string = 'ZWJH7JQCjLM';
+
+  savePlayer(player) {
+    this.player = player;
+    console.log('Vide url: ', player.getVideoUrl());
+  }
+  onStateChange(event) {
+    console.log('player state', event.data);
+  }
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}