Video details updates

src/app/app.routing.module.ts

@@ -10,7 +10,9 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [
+      RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload'})
+    ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

src/app/find-video-id/find-video-id.component.ts

@@ -26,9 +26,7 @@ export class FindVideoIdComponent implements OnInit {
 
   onSubmitId() {
     if (this.videoIdForm.valid) {
-      this.store.dispatch(new FindTranscriptById(this.videoIdForm.value.videoid));
       this.router.navigateByUrl('/?id=' + this.videoIdForm.value.videoid);
-      // this.router.navigateByUrl(['/'], { queryParams: { id: this.videoIdForm.value.videoid } });
     }
   }
 

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

@@ -41,7 +41,6 @@ export function videoReducer(state: IVideoState = initialState, action: any): IV
     case VideoActionsTypes.LOAD_TRANSCRIPT_BY_ID_ERROR: {
       return {
         ...state,
-        videoId: initialState.videoId,
         transcript: initialState.transcript,
         loading: false,
         error: true

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

-<div class="video-details-container" *ngIf="!errorLoading; else errorLoadingContainer">
+<div class="video-details-container" *ngIf="!(error$ | async) || !errorLoading; else errorLoadingContainer">
   <div class="video-details" *ngIf="(videoId$ | async) as videoId; else noIdContainer">
-    <h1>Test title</h1>
+    <h1 [class.display-none]="!videoLoaded">Moment from meeting with Two Pillars</h1>
 
-    <div class="video-container" #player>
+    <div class="video-container" #player  [class.display-none]="!videoLoaded">
       <video #video class="video" [attr.src]="'https://static.chorus.ai/api/' + videoId + '.mp4'" preload="auto">
         This browser does not support HTML5 video.
       </video>
@@ -15,8 +15,14 @@
       </div>
     </div>
 
-    <div class="transcript-container" *ngIf="(transcript$ | async) as transcript">
-      <div class="speaker-container" *ngFor="let item of transcript | orderBy: 'time'; let i = index; trackBy: trackByFn" [ngClass]="item.speaker?.toLowerCase()">
+    <div *ngIf="(loading$ | async)">
+      <mat-progress-spinner></mat-progress-spinner>
+    </div>
+
+    <div class="transcript-container" *ngIf="!(loading$ | async) && (transcript$ | async) as transcript">
+      <div class="speaker-container"
+        *ngFor="let item of transcript | orderBy: 'time'; let i = index; trackBy: trackByFn"
+        [ngClass]="item.speaker?.toLowerCase()">
         <div class="speaker-status" [class.hidden]="item.speaker === transcript[i+1]?.speaker"></div>
         <div>
           <div class="speaker-name" *ngIf="item.speaker !== transcript[i-1]?.speaker">{{ item.speaker }}</div>

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

@@ -11,6 +11,9 @@
     @media screen and (min-width: 768px) {
         max-width: 60%;
     }
+    .display-none {
+        display: none;
+    }
     .video-container {
         width: 300px;
         margin: 0 auto 15px;
@@ -39,7 +42,8 @@
                 border: none;
                 color: $color-white;
                 border-radius: 3px;
-                padding: 11px 11px 9px;
+                width: 47px;
+                height: 47px;
                 cursor: pointer;
             }
             &.visible {

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

-import { Component, OnInit, AfterViewInit, OnDestroy, ElementRef, ViewChild, Renderer2 } from '@angular/core';
+import { Component, OnInit, OnDestroy, ElementRef, ViewChild, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EventService } from '../store/services/event.service';
 import { Store, select } from '@ngrx/store';
 import { IAppState } from '../store/reducers/video.reducer';
 import { FindTranscriptById } from '../store/actions/video.actions';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-video-details',
   templateUrl: './video-details.component.html',
   styleUrls: ['./video-details.component.scss']
 })
-export class VideoDetailsComponent implements OnInit, AfterViewInit, OnDestroy {
+export class VideoDetailsComponent implements OnInit, OnDestroy {
   @ViewChild('player') private player: ElementRef;
   @ViewChild('video') private video: ElementRef;
 
+  isDestroyed$ = new Subject<boolean>();
   videoIdParam: string;
   playing = false;
   videoLoaded = false;
@@ -32,7 +34,6 @@ export class VideoDetailsComponent implements OnInit, AfterViewInit, OnDestroy {
     private evt: EventService,
     private store: Store<IAppState>
   ) {
-    // this.videoIdParam = this.route.snapshot.queryParams['id'];
 
     this.transcript$ = store.pipe(select(state => state.videoState.transcript));
     this.videoId$ = store.pipe(select(state => state.videoState.videoId));
@@ -41,42 +42,25 @@ export class VideoDetailsComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.route.queryParams.subscribe(queryParams => {
-      if (queryParams.id) {
-        this.store.dispatch(new FindTranscriptById(queryParams.id));
-
-        if (this.video) {
-          this.events = [
-            { element: this.video.nativeElement, name: 'loadstart', callback: event => this.videoLoaded = false, dispose: null },
-            { element: this.video.nativeElement, name: 'loadedmetadata', callback: event => this.onLoadedMetadata(event), dispose: null },
-            { element: this.video.nativeElement, name: 'error', callback: event => this.onLoadingError(event), dispose: null },
-            { element: this.player.nativeElement, name: 'mouseenter', callback: event => this.onMouseEnter(event), dispose: null },
-            { element: this.player.nativeElement, name: 'mouseleave', callback: event => this.onMouseLeave(event), dispose: null }
-          ];
-
-          this.evt.addEvents(this.renderer, this.events);
+    this.route.queryParams.pipe(takeUntil(this.isDestroyed$))
+      .subscribe(queryParams => {
+        if (queryParams.id) {
+          this.store.dispatch(new FindTranscriptById(queryParams.id)); 
         }
-      }
-
-    });
-  }
-
-  ngAfterViewInit() {
-    // if (this.video) {
-    //   this.events = [
-    //     { element: this.video.nativeElement, name: 'loadstart', callback: event => this.videoLoaded = false, dispose: null },
-    //     { element: this.video.nativeElement, name: 'loadedmetadata', callback: event => this.onLoadedMetadata(event), dispose: null },
-    //     { element: this.video.nativeElement, name: 'error', callback: event => this.onLoadingError(event), dispose: null },
-    //     { element: this.player.nativeElement, name: 'mouseenter', callback: event => this.onMouseEnter(event), dispose: null },
-    //     { element: this.player.nativeElement, name: 'mouseleave', callback: event => this.onMouseLeave(event), dispose: null }
-    //   ];
-
-    //   // this.evt.addEvents(this.renderer, this.events);
-    // }
+      });
+      this.loading$.pipe(takeUntil(this.isDestroyed$))
+      .subscribe(loading => {
+        if (this.events) {
+          this.evt.removeEvents(this.events);
+        }
+        this.load();
+      })
   }
 
   ngOnDestroy() {
     this.evt.removeEvents(this.events);
+    this.isDestroyed$.next(true);
+    this.isDestroyed$.complete();
   }
 
   trackByFn(index, item) {
@@ -86,6 +70,16 @@ export class VideoDetailsComponent implements OnInit, AfterViewInit, OnDestroy {
   load() {
     if (this.video && this.video.nativeElement) {
       this.video.nativeElement.load();
+
+      this.events = [
+        { element: this.video.nativeElement, name: 'loadstart', callback: event => this.videoLoaded = false, dispose: null },
+        { element: this.video.nativeElement, name: 'loadedmetadata', callback: event => this.onLoadedMetadata(event), dispose: null },
+        { element: this.video.nativeElement, name: 'error', callback: event => this.onLoadingError(event), dispose: null },
+        { element: this.player.nativeElement, name: 'mouseenter', callback: event => this.onMouseEnter(event), dispose: null },
+        { element: this.player.nativeElement, name: 'mouseleave', callback: event => this.onMouseLeave(event), dispose: null }
+      ];
+
+      this.evt.addEvents(this.renderer, this.events);
     }
   }
 

src/assets/scss/variables.scss

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

src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -35,4 +35,4 @@ h1 {
 p {
     font-size: 1rem;
     line-height: 1.34rem;
-}
+}
\ No newline at end of file