Initial commit

package.json

@@ -11,21 +11,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.0",
+    "@angular/animations": "^6.1.10",
+    "@angular/cdk": "^7.3.7",
     "@angular/common": "^6.1.0",
     "@angular/compiler": "^6.1.0",
     "@angular/core": "^6.1.0",
     "@angular/forms": "^6.1.0",
     "@angular/http": "^6.1.0",
+    "@angular/material": "^7.3.7",
     "@angular/platform-browser": "^6.1.0",
     "@angular/platform-browser-dynamic": "^6.1.0",
     "@angular/router": "^6.1.0",
+    "@ngrx/core": "^1.2.0",
+    "@ngrx/effects": "^6.1.0",
+    "@ngrx/router-store": "^6.1.0",
+    "@ngrx/store": "^6.1.0",
+    "@ngrx/store-devtools": "^6.1.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.2.0",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.8.0",
+    "@angular-devkit/build-angular": "^0.13.9",
     "@angular/cli": "~6.2.4",
     "@angular/compiler-cli": "^6.1.0",
     "@angular/language-service": "^6.1.0",

src/app/app.component.html

-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+<div class="main-app-container">
+  <router-outlet></router-outlet>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
+<div class="footer-container">
+  <img alt="logo" src="https://static.chorus.ai/images/chorus-logo.svg" />
+</div>
\ No newline at end of file

src/app/app.component.scss

+@import '../assets/scss/variables.scss';
+
+.main-app-container {
+    display: flex;
+    width: 100vw;
+    // height: calc(100vh - 35px);
+}
+.footer-container {
+    border-bottom: 4px solid $color-blue;
+    display: flex;
+    padding-bottom: 24px;
+    justify-content: center;
+}
\ No newline at end of file

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { MatToolbarModule, MatSnackBarModule } from '@angular/material';
+import { StoreDevtoolsModule } from "@ngrx/store-devtools";
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
 
 import { AppComponent } from './app.component';
+import { VideoEffects } from './store/effects/video.effects';
+import { VideoService } from './store/services/video.services';
+import { VideoDetailsComponent } from './video-details/video-details.component';
+import { AppRoutingModule } from './app.routing.module';
+import { videoReducer } from './store/reducers/video.reducer';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    VideoDetailsComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    AppRoutingModule,
+    MatToolbarModule,
+    MatSnackBarModule,
+    StoreModule.forRoot({
+      video: videoReducer
+    }),
+    EffectsModule.forRoot([ VideoEffects ]),
+    StoreDevtoolsModule.instrument()
   ],
-  providers: [],
+  providers: [ VideoService ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.routing.module.ts

+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { VideoDetailsComponent } from "./video-details/video-details.component";
+
+const routes: Routes = [
+  {
+    path: "",
+    component: VideoDetailsComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/store/actions/video.actions.ts

+import { Action } from "@ngrx/store";
+
+export type IVideoActionsTypes = {
+  LOAD_TRANSCRIPT_BY_ID: string;
+  LOAD_TRANSCRIPT_BY_ID_SUCCESS: string;
+  LOAD_TRANSCRIPT_BY_ID_ERROR: string;
+};
+
+export const VideoActionsTypes: IVideoActionsTypes = {
+    LOAD_TRANSCRIPT_BY_ID: "LOAD TRANSCRIPT BY ID",
+    LOAD_TRANSCRIPT_BY_ID_SUCCESS: "LOAD TRANSCRIPT BY ID SUCCESS",
+    LOAD_TRANSCRIPT_BY_ID_ERROR: "LOAD TRANSCRIPT BY ID ERROR"
+};
+
+export class FindTicketById implements Action {
+  readonly type = VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID;
+  constructor(public payload: number) {}
+}

src/app/store/effects/video.effects.ts

+import { Injectable } from "@angular/core";
+import { Actions, Effect, ofType } from "@ngrx/effects";
+import { map, mergeMap, catchError } from "rxjs/operators";
+import { VideoActionsTypes } from "../actions/video.actions";
+import { of } from "rxjs";
+import { MatSnackBar } from "@angular/material";
+import { Router } from "@angular/router";
+import { VideoService } from "../services/video.services";
+
+@Injectable()
+export class VideoEffects {
+
+    @Effect()
+    loadTranscriptById$ = this.actions$
+        .pipe(
+            ofType(VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID),
+            map((action: any) => action.payload),
+            mergeMap(id => this.videoService.loadTranscriptById(id)
+                .pipe(
+                    map(ticket => ({
+                        type: VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID_SUCCESS,
+                        payload: ticket
+                    })),
+                    catchError(error => {
+                        this.router.navigate(["Video"]);
+                        this.snackBar.open(
+                            "ERROR: There were some errors",
+                            "Error",
+                            {
+                                duration: 5000
+                            }
+                        );
+                        return of({
+                            type: VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID_ERROR,
+                            payload: error
+                        });
+                    })
+                ))
+        );
+
+    constructor(
+        private videoService: VideoService,
+        private actions$: Actions,
+        private router: Router,
+        private snackBar: MatSnackBar
+    ) { }
+}
\ No newline at end of file

src/app/store/models/video.models.ts

+export type ITranscript = {
+    "snippet": "string";
+    "speaker": "string";
+    "time": "string";
+};
\ No newline at end of file

src/app/store/reducers/video.reducer.ts

+import { VideoActionsTypes } from "../actions/video.actions";
+
+export interface IVideoState {
+    transcript: any,
+  videoId: string,
+  loading: boolean;
+  error: boolean;
+}
+
+export const initialState: IVideoState = {
+  transcript: [],
+  videoId: null,
+  loading: false,
+  error: false
+};
+
+export function videoReducer(state: IVideoState = initialState, action: any): IVideoState {
+  switch(action.type) {
+
+    case VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID: {
+      return {
+        ...state,
+        loading: true
+      };
+    }
+
+    case VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID_SUCCESS: {
+      return {
+        ...state,
+        loading: false,
+        error: false
+      };
+    }
+
+    case VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID_ERROR: {
+      return {
+        ...state,
+        loading: false,
+        error: true
+      };
+    }
+
+  }
+    return state;
+
+}

src/app/store/services/video.services.ts

+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { HttpClient } from "@angular/common/http";
+import { ITranscript } from "../models/video.models";
+
+@Injectable()
+export class VideoService {
+    readonly transcriptUrl = "https://static.chorus.ai/api";
+
+  constructor(private httpClient: HttpClient) { }
+
+  loadTranscriptById(id: number): Observable<any> {
+    return this.httpClient.get(this.transcriptUrl + '/' + id + ".json");
+  }
+
+}

src/app/video-details/video-details.component.html

+<div class="video-details-container">
+  <h1>Test title</h1>
+
+  <div class="video-container">
+    <video #video class="video" src="https://static.chorus.ai/api/4d79041e-f25f-421d-9e5f-3462459b9934.mp4" [attr.autoplay]="autoplay ? true : null"
+      [preload]="preload ? 'auto' : 'metadata'" [attr.poster]="poster ? poster : null" [attr.loop]="loop ? loop : null">
+      <ng-content select="source"></ng-content>
+      <ng-content select="track"></ng-content>
+      This browser does not support HTML5 video.
+    </video>
+  </div>
+</div>
\ No newline at end of file

src/app/video-details/video-details.component.scss

+@import '../../assets/scss/variables.scss';
+
+.video-details-container {
+    margin: auto;
+    background-color: $color-white;
+    max-width: 60%;
+    .video-container {
+        width: 300px;
+        margin: 0 auto;
+        video {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+}
\ No newline at end of file

src/app/video-details/video-details.component.spec.ts

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

src/app/video-details/video-details.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-video-details',
+  templateUrl: './video-details.component.html',
+  styleUrls: ['./video-details.component.scss']
+})
+export class VideoDetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/scss/variables.scss

+// Colors
+$color-white: #FFFFFF;
+$color-light-grey: #F7F7F7;
+$color-grey: #D7DADE;
+$color-grey-dark: #333333;
+$color-blue: #00A7D1;
\ No newline at end of file

src/styles.scss

-/* You can add global styles to this file, and also import other style files */
+@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import 'assets/scss/variables.scss';
+
+// Fonts
+@font-face {
+    font-family: 'SF UI Text Semibold';
+    font-style: normal;
+    font-weight: normal;
+    src: local('SF UI Text Semibold'), url('./assets/font/SFUIText-Semibold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'SF UI Text Regular';
+    font-style: normal;
+    font-weight: normal;
+    src: local('SF UI Text Regular'), url('./assets/font/SFUIText-Regular.woff') format('woff');
+}
+
+// Main styles
+body {
+    font-family: 'SF UI Text Regular';
+    background-color: $color-light-grey;
+    color: $color-grey-dark;
+    font-size: 15px;
+    margin: 0;
+}
+
+// Typography
+h1 {
+    font-size: 1.74rem;
+    line-height: 1.87rem;
+}
+p {
+    font-size: 1rem;
+    line-height: 1.34rem;
+}
\ No newline at end of file