Resource in step view (connects #668) (#827)

src/app/_variables.scss

@@ -30,6 +30,9 @@ $font-family: Roboto, sans-serif;
 $screen-md: 1000px;
 $screen-sm: 780px;
 
+// Maximum full height of view container (avoiding vertical overflow)
+$view-container-height: calc(100vh - 352px);
+
 /*
  * Old Planet Material Colors
  * Saved in case we want to revert

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { NgxImgModule } from 'ngx-img';
 import { environment } from '../environments/environment';
 import { MatIconRegistry } from '@angular/material';
 import { FeedbackService } from './feedback/feedback.service';
+import { ResourcesService } from './resources/resources.service';
 
 @NgModule({
   imports: [
@@ -36,7 +37,7 @@ import { FeedbackService } from './feedback/feedback.service';
     AppComponent, PageNotFoundComponent
   ],
   providers: [
-    CouchService, AuthService, UserService, ValidatorService, PlanetMessageService, MatIconRegistry, FeedbackService
+    CouchService, AuthService, UserService, ValidatorService, PlanetMessageService, MatIconRegistry, FeedbackService, ResourcesService
   ],
   bootstrap: [ AppComponent ]
 })

src/app/courses/courses.module.ts

@@ -13,6 +13,7 @@ import { CoursesViewComponent } from './view-courses/courses-view.component';
 import { CoursesStepComponent } from './add-courses/courses-step.component';
 import { CoursesStepViewComponent } from './step-view-courses/courses-step-view.component';
 import { CoursesService } from './courses.service';
+import { ResourcesViewerComponent } from '../resources/view-resources/resources-viewer.component';
 
 @NgModule({
   imports: [
@@ -30,7 +31,8 @@ import { CoursesService } from './courses.service';
     CoursesRequestComponent,
     CoursesViewComponent,
     CoursesStepComponent,
-    CoursesStepViewComponent
+    CoursesStepViewComponent,
+    ResourcesViewerComponent
   ],
   providers: [
     CoursesService

src/app/courses/courses.service.ts

@@ -16,8 +16,9 @@ export class CoursesService {
 
   // Components call this to get details of one course.
   // If the id already matches what is stored on the service, return that.
-  requestCourse(courseId: string, opts: any = {}) {
-    if (courseId === this.course._id) {
+  // Or will get new version if forceLatest set to true
+  requestCourse({ courseId, forceLatest = false }, opts: any = {}) {
+    if (!forceLatest && courseId === this.course._id) {
       this.courseUpdated.next(this.course);
     } else {
       this.getCourse(courseId, opts);

src/app/courses/step-view-courses/courses-step-view.component.html

@@ -5,13 +5,28 @@
 
 <div class="space-container">
   <mat-toolbar class="primary-color font-size-1">
-      <span class="margin-lr-3"><h3>{{stepDetail.stepTitle}}</h3></span>
+      <span class="margin-lr-3"><h3><ng-container i18n>Step</ng-container> {{stepNum}}: {{stepDetail.stepTitle}}</h3></span>
     <span class="toolbar-fill"></span>
+    <a
+      mat-raised-button
+      color="accent"
+      class="margin-lr-10"
+      *ngIf="stepDetail.attachment"
+      [href]="resourceUrl"
+      target="_blank"
+      i18n>
+      Open resource new tab
+    </a>
     <span i18n>{{stepNum}}/{{maxStep}}</span>
     <button mat-icon-button [disabled]="stepNum === 1" (click)="changeStep(-1)"><mat-icon>navigate_before</mat-icon></button>
     <button mat-icon-button [disabled]="stepNum === maxStep" (click)="changeStep(1)"><mat-icon>navigate_next</mat-icon></button>
   </mat-toolbar>
-  <div class="view-container">
-    {{stepDetail.description}}
+  <div class="view-container view-full-height">
+    <div class="description">{{stepDetail.description}}</div>
+    <planet-resources-viewer
+      *ngIf="stepDetail.attachment"
+      [resourceId]="stepDetail.attachment.doc._id"
+      (resourceUrl)="setResourceUrl($event)">
+    </planet-resources-viewer>
   </div>
 </div>

src/app/courses/step-view-courses/courses-step-view.component.ts

@@ -5,7 +5,8 @@ import { Subject } from 'rxjs/Subject';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  templateUrl: './courses-step-view.component.html'
+  templateUrl: './courses-step-view.component.html',
+  styleUrls: [ './courses-step-view.scss' ]
 })
 
 export class CoursesStepViewComponent implements OnInit, OnDestroy {
@@ -14,6 +15,7 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
   stepNum = 0;
   stepDetail: any = { stepTitle: '', description: '' };
   maxStep = 1;
+  resourceUrl = '';
 
   constructor(
     private router: Router,
@@ -29,7 +31,7 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
     });
     this.route.paramMap.pipe(takeUntil(this.onDestroy$)).subscribe((params: ParamMap) => {
       this.stepNum = +params.get('stepNum'); // Leading + forces string to number
-      this.coursesService.requestCourse(params.get('id'));
+      this.coursesService.requestCourse({ courseId: params.get('id') });
     });
   }
 
@@ -47,4 +49,8 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
     this.router.navigate([ '../../' ], { relativeTo: this.route });
   }
 
+  setResourceUrl(resourceUrl: string) {
+    this.resourceUrl = resourceUrl;
+  }
+
 }

src/app/courses/step-view-courses/courses-step-view.scss

@@ -0,0 +1,19 @@
+:host {
+
+  .view-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+    grid-template-rows: 1fr;
+    grid-column-gap: 1rem;
+
+    > * {
+      overflow-y: auto;
+    }
+
+  }
+
+  planet-resources-viewer * {
+    max-width: 100%;
+  }
+
+}

src/app/courses/view-courses/courses-view.component.ts

@@ -49,7 +49,7 @@ export class CoursesViewComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.coursesService.courseUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe(course => this.courseDetail = course);
     this.route.paramMap.pipe(takeUntil(this.onDestroy$)).subscribe(
-      (params: ParamMap) => this.coursesService.requestCourse(params.get('id')),
+      (params: ParamMap) => this.coursesService.requestCourse({ courseId: params.get('id'), forceLatest: true }),
       error => console.log(error)
     );
   }

src/app/resources/resources.module.ts

@@ -10,7 +10,6 @@ import { MaterialModule } from '../shared/material.module';
 import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
 import { ResourcesRatingComponent } from './rating-resources/resources-rating.component';
 import { PlanetStackedBarComponent } from '../shared/planet-stacked-bar.component';
-import { ResourcesService } from './resources.service';
 import { PlanetDialogsModule } from '../shared/dialogs/planet-dialogs.module';
 
 @NgModule({
@@ -25,7 +24,6 @@ import { PlanetDialogsModule } from '../shared/dialogs/planet-dialogs.module';
     HttpClientJsonpModule,
     PlanetDialogsModule
   ],
-  declarations: [ ResourcesComponent, ResourcesViewComponent, ResourcesAddComponent, ResourcesRatingComponent, PlanetStackedBarComponent ],
-  providers: [ ResourcesService ]
+  declarations: [ ResourcesComponent, ResourcesViewComponent, ResourcesAddComponent, ResourcesRatingComponent, PlanetStackedBarComponent ]
 })
 export class ResourcesModule {}

src/app/resources/view-resources/resources-viewer.component.html

@@ -0,0 +1,15 @@
+<div [ngSwitch]="mediaType">
+  <img [src]="resourceSrc" *ngSwitchCase="'image'">
+  <video controls *ngSwitchCase="'video'">
+    <source [src]="resourceSrc" [type]="contentType" />
+    Browser not supported
+  </video>
+  <audio controls *ngSwitchCase="'audio'">
+    <source [src]="resourceSrc" [type]="contentType" />
+    Browser not supported
+  </audio>
+  <iframe [src]="pdfSrc" *ngSwitchCase="'pdf'" width="100%" height="100%" allowfullscreen mozallowfullscreen webkitallowfullscreen
+    oallowfullscreen msallowfullscreen ></iframe>
+  <div *ngSwitchCase="'other'"><a mat-button-raised href={{resourceSrc}}>Open File</a></div>
+  <iframe *ngSwitchCase="'HTML'" [src]="pdfSrc"></iframe>
+</div>

src/app/resources/view-resources/resources-viewer.component.ts

@@ -0,0 +1,66 @@
+import { Component, Input, OnChanges, OnDestroy, EventEmitter, Output } from '@angular/core';
+
+import { DomSanitizer } from '@angular/platform-browser';
+import { environment } from '../../../environments/environment';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs/Subject';
+import { ResourcesService } from '../resources.service';
+
+@Component({
+  selector: 'planet-resources-viewer',
+  templateUrl: './resources-viewer.component.html',
+  styleUrls: [ './resources-viewer.scss' ]
+})
+export class ResourcesViewerComponent implements OnChanges, OnDestroy {
+
+  @Input() resourceId: string;
+  @Input() resource: any;
+  @Output() resourceUrl = new EventEmitter<any>();
+  mediaType: string;
+  contentType: string;
+  resourceSrc: string;
+  urlPrefix = environment.couchAddress + 'resources/';
+  pdfSrc: any;
+  private onDestroy$ = new Subject<void>();
+
+  constructor(
+    private sanitizer: DomSanitizer,
+    private resourcesService: ResourcesService
+  ) { }
+
+  ngOnChanges() {
+    if (this.resource === undefined || this.resource._id !== this.resourceId) {
+      this.resourcesService.resourcesUpdated$.pipe(takeUntil(this.onDestroy$))
+        .subscribe((resourceArr) => {
+          this.setResource(resourceArr[0]);
+        });
+      this.resourcesService.updateResources({ resourceIds: [ this.resourceId ] });
+    } else {
+      this.setResource(this.resource);
+    }
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+  }
+
+  setResource(resource: any) {
+    this.resource = resource;
+    // openWhichFile is used to label which file to start with for HTML resources
+    const filename = resource.openWhichFile || Object.keys(resource._attachments)[0];
+    this.mediaType = resource.mediaType;
+    this.contentType = resource._attachments[filename].content_type;
+    this.resourceSrc = this.urlPrefix + resource._id + '/' + filename;
+    if (!this.mediaType) {
+      const mediaTypes = [ 'image', 'pdf', 'audio', 'video', 'zip' ];
+      this.mediaType = mediaTypes.find((type) => this.contentType.indexOf(type) > -1) || 'other';
+    }
+    if (this.mediaType === 'pdf' || this.mediaType === 'HTML') {
+      this.pdfSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.resourceSrc);
+    }
+    // Emit resource src so parent component can use for links
+    this.resourceUrl.emit(this.resourceSrc);
+  }
+
+}

src/app/resources/view-resources/resources-viewer.scss

@@ -0,0 +1,14 @@
+@import '../../variables';
+
+:host {
+  * {
+    max-width: 100%;
+  }
+
+  iframe {
+    display: block;
+    border: none;
+    width: 100%;
+    height: $view-container-height;
+  }
+}

src/styles.scss

@@ -300,7 +300,7 @@ body {
   // 352px = 5 * 64px toolbars + 32px of padding
   // Overflow must be set on children
   .view-container.view-full-height {
-    height: calc(100vh - 352px);
+    height: $view-container-height;
   }
 
   // Width of a form with 3 standard matInputs (180px + 10px of padding)